/*!
 * Hamburgers
 * @description Tasty CSS-animated hamburgers
 * @author Jonathan Suh @jonsuh
 * @site https://jonsuh.com/hamburgers
 * @link https://github.com/jonsuh/hamburgers
 */

.hamburger {
   display: block;
   width: 30px;
   height: 18px;
   font: inherit;
   overflow: visible;
   margin: 0;
   padding: 0;
   cursor: pointer;
   transition-timing-function: linear;
   transition-duration: .15s;
   transition-property: opacity, filter;
   text-transform: none;
   color: inherit;
   border: 0;
   background-color: transparent
}

.hamburger-box {
   display: block;
   width: 100%;
   height: 100%;
   position: relative;
}

.hamburger-inner {
   display: block;
}

.hamburger-inner,
.hamburger-inner:after,
.hamburger-inner:before {
   width: 100%;
   height: 2px;
   transition-timing-function: ease;
   transition-duration: .3s;
   transition-property: transform;
   background-color: #333;
   position: absolute;
   left: 0;
}

.hamburger-inner:after,
.hamburger-inner:before {
   display: block;
   content: "";
}

.hamburger-inner:before {
   top: 8px
}

.hamburger-inner:after {
   top: 16px;
}

.hamburger.is-active .hamburger-inner {
   transform: translate(0, 8px) rotate(30deg);
}
.hamburger.is-active .hamburger-inner:before {
   opacity: 0;
}
.hamburger.is-active .hamburger-inner:after {
   transform: translate(0, -16px) rotate(-60deg)
}