/*!

 * Hamburgers

 * @description Tasty CSS-animated hamburgers

 * @author Jonathan Suh @jonsuh

 * @site https://jonsuh.com/hamburgers

 * @link https://github.com/jonsuh/hamburgers

 */

.hamburger {

  padding: 3em;

  display: inline-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;

  position: absolute;

  border: 0;

  margin: 0;

  right: 3.2%;

  top: -1.2em;

  z-index: 150;

  overflow: visible;

  }



.hamburger-box {

  width: 2.8em;

  display: inline-block;

  position: absolute;

  }



.hamburger-inner {

  display: block;

  top: 50%;

  margin-top: -2px; }

  .hamburger-inner, .hamburger-inner::before, .hamburger-inner::after {

    width: 100%;

    height: 0.2em;

    background-color: #cc0b0e;

    border-radius: 4px;

    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: -0.6em; }

  .hamburger-inner::after {

	top: 0;

    bottom: -0.5em!important; }



  /*

   * Emphatic

   */

.hamburger--emphatic {

  overflow: hidden; }

  .hamburger--emphatic .hamburger-inner {

    transition: background-color 0.125s 0.175s ease-in; }

    .hamburger--emphatic .hamburger-inner::before {

      left: 0;

      transition: transform 0.125s cubic-bezier(0.6, 0.04, 0.98, 0.335), top 0.05s 0.125s linear, left 0.125s 0.175s ease-in; }

    .hamburger--emphatic .hamburger-inner::after {

      top: 0.6em;

      right: 0;

      transition: transform 0.125s cubic-bezier(0.6, 0.04, 0.98, 0.335), top 0.05s 0.125s linear, right 0.125s 0.175s ease-in; }

  .hamburger--emphatic.is-active .hamburger-inner {

    transition-delay: 0s;

    transition-timing-function: ease-out;

    background-color: transparent; }

    .hamburger--emphatic.is-active .hamburger-inner::before {

      left: -80px;

      top: -80px;

      transform: translate3d(80px, 80px, 0) rotate(45deg);

      transition: left 0.125s ease-out, top 0.05s 0.125s linear, transform 0.125s 0.175s cubic-bezier(0.075, 0.82, 0.165, 1); }

    .hamburger--emphatic.is-active .hamburger-inner::after {

      right: -80px;

      top: -80px;

      transform: translate3d(-80px, 80px, 0) rotate(-45deg);

      transition: right 0.125s ease-out, top 0.05s 0.125s linear, transform 0.125s 0.175s cubic-bezier(0.075, 0.82, 0.165, 1); }



  /*

   * Emphatic Reverse

   */

.hamburger--emphatic-r {

  overflow: hidden; }

  .hamburger--emphatic-r .hamburger-inner {

    transition: background-color 0.125s 0.175s ease-in; }

    .hamburger--emphatic-r .hamburger-inner::before {

      left: 0;

      transition: transform 0.125s cubic-bezier(0.6, 0.04, 0.98, 0.335), top 0.05s 0.125s linear, left 0.125s 0.175s ease-in; }

    .hamburger--emphatic-r .hamburger-inner::after {

      top: 10px;

      right: 0;

      transition: transform 0.125s cubic-bezier(0.6, 0.04, 0.98, 0.335), top 0.05s 0.125s linear, right 0.125s 0.175s ease-in; }

   .hamburger.is-active{

   	  top: -0.5em!important;

   }

  .hamburger--emphatic-r.is-active .hamburger-inner {

    transition-delay: 0s;

    transition-timing-function: ease-out;

    background-color: transparent; }

    .hamburger--emphatic-r.is-active .hamburger-inner::before {

      left: -80px;

      top: 80px;

      transform: translate3d(80px, -80px, 0) rotate(-45deg);

      transition: left 0.125s ease-out, top 0.05s 0.125s linear, transform 0.125s 0.175s cubic-bezier(0.075, 0.82, 0.165, 1); }

    .hamburger--emphatic-r.is-active .hamburger-inner::after {

      right: -80px;

      top: 80px;

      transform: translate3d(-80px, -80px, 0) rotate(45deg);

      transition: right 0.125s ease-out, top 0.05s 0.125s linear, transform 0.125s 0.175s cubic-bezier(0.075, 0.82, 0.165, 1); }