moladukes

.hamburger {
  position: relative;
  width: 20px;
  height: 40px;
  .patty {
    position: absolute;
    display: block;
    width: 20px;
    height: 1px;
    background: #fff;

moladukes

// Responsive text sizing
html {
  @media (min-width: 768px) {
    font-size: 62.5%;
  }
  @media (max-width: 767px) {
    font-size: 52.5%;
  }
  @media (max-width: 504px) {
    font-size: 42.5%;

moladukes

.video { 
  position: fixed;
  right: 0;
  bottom: 0;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: -100;
  transition: 1s opacity;

moladukes

<script src="http://www.youtube.com/player_api"></script>
<div id="player"></div>

moladukes

<!-- CSS -->
<style>
  .tab-content {
    display: none;
  }
  .tab-content.active {
    display: block;
  }
</style>
<!-- JS // Requires Jquery -->

moladukes

$gutter-width: 1rem;
$outer-margin: 2rem;
$gutter-compensation: -0.5rem;
$half-gutter-width: 0.5rem;

.row {
  display: inline-block;
  display: -ms-flexbox;
  display: -webkit-flex;

moladukes

<!-- 
NOTES: Edit these variables:
BUTTON_URL is the ticket url
BUTTON TEXT is the text on the button
BUTTON_BG is background color. You can create a color code here: http://hslpicker.com/ (i.e #ffffff )
BUTTON_COLOR is button color. You can create a color code here: http://hslpicker.com/ (i.e #000000 )
-->

<p style="text-align: center;"><a href="BUTTON_URL" style="background-color:BUTTON_BG ;border-radius:4px;color:BUTTON_COLOR ;display:inline-block;font-family:sans-serif;font-size:16px;font-weight:bold;line-height:40px;width: 150px; margin: 0 auto;text-align:center;text-decoration:none;-webkit-text-size-adjust:none;">BUTTON_TEXT</a></p>

moladukes

<!-- Demo https://codepen.io/moladukes/pen/jZKRrJ -->

<ul>
  <li><a href="#" class="accordian-toggle">Toggle</a>
  <li class="accordian-description">Description</li>
  <li><a href="#" class="accordian-toggle">Toggle</a>
  <li class="accordian-description">Description</li>
  <li><a href="#" class="accordian-toggle">Toggle</a>
  <li class="accordian-description">Description</li>
</ul>

moladukes

.sexy-box-shadow {
  box-shadow: 0 50px 100px rgba(50,50,93,.1), 0 15px 35px rgba(50,50,93,.15), 0 5px 15px rgba(0,0,0,.1);
}

moladukes

<!-- Uses group-hover for demo but could be toggled with an .active class, :group-active, or inline using your favorite js flavor -->
<button class="group text-white w-10 h-10 relative focus:outline-none bg-blue-500 rounded-md">
  <div class="block w-7 absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2">
    <hr aria-hidden="true" class="block absolute h-0.5 w-7 bg-current transform transition duration-500 ease-in-out -translate-y-2 group-hover:rotate-45 group-hover:-translate-y-0">
    <hr aria-hidden="true" class="block absolute  h-0.5 w-7 bg-current   transform transition duration-500 ease-in-out group-hover:opacity-0">
    <hr aria-hidden="true" class="block absolute  h-0.5 w-7 bg-current transform  transition duration-500 ease-in-out translate-y-2 group-hover:-rotate-45 group-hover:-translate-y-0">
  </div>
</button>