/*!
 * Hamburgers
 * @description Tasty CSS-animated hamburgers
 * @author Jonathan Suh @jonsuh
 * @site https://jonsuh.com/hamburgers
 * @link https://github.com/jonsuh/hamburgers
 */
.hamburger {
  display: block;
  cursor: pointer;
  transition-property: opacity, filter;
  transition-duration: 0.15s;
  transition-timing-function: linear;
  font: inherit;
  color: inherit;
  text-transform: none;
  background-color: transparent;
  border: 0;
  margin: 0;
  overflow: visible;
  position: fixed;
}

.hamburger.is-active {
  mix-blend-mode: normal;
}
.hamburger-box {
  width: 2.7rem;
  height: 1.8rem;
  display: inline-block;
  position: relative;
  transition: 0.4s ease-out opacity; 
}
  /* Larger than tablet */
  @media (min-width: 750px) {
    .hamburger-box {
      padding-right: 0;
    }
  }
  .is-active .hamburger-box {
    width: 2.7rem;
  }
.hamburger-inner {
  display: block;
  top: 50%;
}
  .hamburger-inner, .hamburger-inner::after {
    width: 2.7rem;
    height: 1px;
    background-color: #727070;
    box-shadow: 1px -1px white;
    position: absolute;
    transition-property: transform;
    transition-duration: 0.15s;
    transition-timing-function: ease; }
  .hamburger-inner::before, .hamburger-inner::after {
    content: "";
    display: block; }
  .hamburger-inner::before {
    top: -7px; }
  .hamburger-inner::after {
    bottom: -5px; }
    
/*
   * Spin
   */
.hamburger--spin .hamburger-inner {
  transition-duration: 0.3s;
  transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
  .hamburger--spin .hamburger-inner::before {
    transition: top 0.1s 0.34s ease-in, opacity 0.1s ease-in; }
  .hamburger--spin .hamburger-inner::after {
    transition: bottom 0.1s 0.34s ease-in, transform 0.3s cubic-bezier(0.55, 0.055, 0.675, 0.19); }
.hamburger.hamburger--spin {
    transition: 0.15s ease-out all;
}
.hamburger--spin.is-active .hamburger-inner {
  transform: rotate(225deg);
  transition-delay: 0.14s;
  transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); 
  width: 2.7rem;
   }
  .hamburger--spin.is-active .hamburger-inner::before {
    width: 2.7rem;
    top: 0;
    opacity: 0;
    box-shadow: none;
    transition: top 0.1s ease-out, opacity 0.1s 0.14s ease-out; }
  .hamburger--spin.is-active .hamburger-inner::after {
    width: 2.7rem;
    bottom: 0;
    box-shadow: none;
    transform: rotate(-90deg);
    transition: bottom 0.1s ease-out, transform 0.3s 0.14s cubic-bezier(0.215, 0.61, 0.355, 1); 
     }