#menuToggle {

  position: absolute;
  top: 20px;
  left: 20px;

  z-index: 11;

  -webkit-user-select: none;
  -moz-user-select: none;
   -ms-user-select: none;
       user-select: none;
}

#menuToggle input {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;

  cursor: pointer;

  opacity: 0; /* hide this */
  z-index: 12; /* and place it over the hamburger */

  -webkit-touch-callout: none;
}

#menuToggle span
{
  display: block;
  /*width: 40px;
  height: 6px;
  margin-bottom: 8px;*/
  position: relative;

  border-radius: 3px;

  z-index: 11;
}

.mobile-nav__line {
    width: 35px;
    height: 4px;
    border-radius: 4px;
    /*background-color: #000;*/
    -webkit-animation-duration: .6s;
    animation-duration: .6s;
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-transform-origin: center center;
    -ms-transform-origin: center center;
        transform-origin: center center;
    -webkit-transition: background-color .4s;
    -o-transition: background-color .4s;
    transition: background-color .4s;
    -webkit-transition-delay: .2s;
         -o-transition-delay: .2s;
            transition-delay: .2s
}

.mobile-nav__line--top {
    margin-bottom: 8px;
    -webkit-animation-name: hamburger-top-closed;
    animation-name: hamburger-top-closed;
  background-color: #ebebeb;
}

.mobile-nav__line--middle {
    margin-bottom: 8px;
    -webkit-animation-name: hamburger-middle-closed;
    animation-name: hamburger-middle-closed;
  background-color: #ebebeb;
}

.mobile-nav__line--bottom {
    -webkit-animation-name: hamburger-bottom-closed;
    animation-name: hamburger-bottom-closed;
  background-color: #ebebeb;
}

/*
 * Transform all the slices of hamburger
 * into a crossmark.
 */
#menuToggle.open .mobile-nav__line--top
{
  /*
  opacity: 1;
  transform: rotate(45deg) translate(-1px, 3px);
  background: #e31837;
  */
  -webkit-animation-name: hamburger-top-open;
          animation-name: hamburger-top-open;
}

/*
 * But let's hide the middle one.
 */
#menuToggle.open .mobile-nav__line--middle
{
  /*
  opacity: 0;
  transform: rotate(0deg) scale(0.2, 0.2);
  */
  -webkit-animation-name:hamburger-middle-open;
          animation-name:hamburger-middle-open;
}

/*
 * Ohyeah and the last one should go the other direction
 */
#menuToggle.open .mobile-nav__line--bottom
{
  /*
  opacity: 1;
  transform: rotate(-45deg) translate(1px, -3px);
  background: #006491;
  */
  -webkit-animation-name: hamburger-bottom-open;
          animation-name: hamburger-bottom-open;
}

/*
 * Make this absolute positioned
 * at the top left of the screen
 */
/*
 * And let's fade it in from the left
 */
#menuToggle input:checked ~ ul
{
  -webkit-transform: scale(1.0, 1.0);
      -ms-transform: scale(1.0, 1.0);
          transform: scale(1.0, 1.0);
  opacity: 1;
}

@-webkit-keyframes hamburger-top-open {
    0% {
        -webkit-transform: translateY(0) rotate(0);
        transform: translateY(0) rotate(0)
    }

    40% {
        -webkit-transform: translateY(-120%) rotate(0);
        transform: translateY(-120%) rotate(0)
    }

    60% {
        -webkit-transform: translateY(300%) rotate(0);
        transform: translateY(300%) rotate(0)
    }

    100% {
        -webkit-transform: translateY(300%) rotate(45deg);
        transform: translateY(300%) rotate(45deg)
    }
}

@keyframes hamburger-top-open {
    0% {
        -webkit-transform: translateY(0) rotate(0);
        transform: translateY(0) rotate(0)
    }

    40% {
        -webkit-transform: translateY(-120%) rotate(0);
        transform: translateY(-120%) rotate(0)
    }

    60% {
        -webkit-transform: translateY(300%) rotate(0);
        transform: translateY(300%) rotate(0)
    }

    100% {
        -webkit-transform: translateY(300%) rotate(45deg);
        transform: translateY(300%) rotate(45deg)
    }
}

@-webkit-keyframes hamburger-top-closed {
    0% {
        -webkit-transform: translateY(300%) rotate(45deg);
        transform: translateY(300%) rotate(45deg)
    }

    40% {
        -webkit-transform: translateY(300%) rotate(0);
        transform: translateY(300%) rotate(0)
    }

    60% {
        -webkit-transform: translateY(-120%) rotate(0);
        transform: translateY(-120%) rotate(0)
    }

    100% {
        -webkit-transform: translateY(0) rotate(0);
        transform: translateY(0) rotate(0)
    }
}

@keyframes hamburger-top-closed {
    0% {
        -webkit-transform: translateY(300%) rotate(45deg);
        transform: translateY(300%) rotate(45deg)
    }

    40% {
        -webkit-transform: translateY(300%) rotate(0);
        transform: translateY(300%) rotate(0)
    }

    60% {
        -webkit-transform: translateY(-120%) rotate(0);
        transform: translateY(-120%) rotate(0)
    }

    100% {
        -webkit-transform: translateY(0) rotate(0);
        transform: translateY(0) rotate(0)
    }
}

@-webkit-keyframes hamburger-middle-open {
    0%,40%,60% {
        -webkit-transform: rotate(0);
        transform: rotate(0);
        opacity: 1
    }

    100% {
        -webkit-transform: rotate(-45deg);
        transform: rotate(-45deg);
        opacity: 0
    }
}

@keyframes hamburger-middle-open {
    0%,40%,60% {
        -webkit-transform: rotate(0);
        transform: rotate(0);
        opacity: 1
    }

    100% {
        -webkit-transform: rotate(-45deg);
        transform: rotate(-45deg);
        opacity: 0
    }
}

@-webkit-keyframes hamburger-middle-closed {
    0% {
        opacity: 0
    }

    40% {
        -webkit-transform: rotate(0);
        transform: rotate(0);
        opacity: 0
    }

    100%,60% {
        -webkit-transform: rotate(0);
        transform: rotate(0);
        opacity: 1
    }
}

@keyframes hamburger-middle-closed {
    0% {
        opacity: 0
    }

    40% {
        -webkit-transform: rotate(0);
        transform: rotate(0);
        opacity: 0
    }

    100%,60% {
        -webkit-transform: rotate(0);
        transform: rotate(0);
        opacity: 1
    }
}

@-webkit-keyframes hamburger-bottom-open {
    0% {
        -webkit-transform: translateY(0) rotate(0);
        transform: translateY(0) rotate(0)
    }

    40% {
        -webkit-transform: translateY(120%) rotate(0);
        transform: translateY(120%) rotate(0)
    }

    60% {
        -webkit-transform: translateY(-300%) rotate(0);
        transform: translateY(-300%) rotate(0)
    }

    100% {
        -webkit-transform: translateY(-300%) rotate(-45deg);
        transform: translateY(-300%) rotate(-45deg)
    }
}

@keyframes hamburger-bottom-open {
    0% {
        -webkit-transform: translateY(0) rotate(0);
        transform: translateY(0) rotate(0)
    }

    40% {
        -webkit-transform: translateY(120%) rotate(0);
        transform: translateY(120%) rotate(0)
    }

    60% {
        -webkit-transform: translateY(-300%) rotate(0);
        transform: translateY(-300%) rotate(0)
    }

    100% {
        -webkit-transform: translateY(-300%) rotate(-45deg);
        transform: translateY(-300%) rotate(-45deg)
    }
}

@-webkit-keyframes hamburger-bottom-closed {
    0% {
        -webkit-transform: translateY(-300%) rotate(-45deg);
        transform: translateY(-300%) rotate(-45deg)
    }

    40% {
        -webkit-transform: translateY(-300%) rotate(0);
        transform: translateY(-300%) rotate(0)
    }

    60% {
        -webkit-transform: translateY(120%) rotate(0);
        transform: translateY(120%) rotate(0)
    }

    100% {
        -webkit-transform: translateY(0) rotate(0);
        transform: translateY(0) rotate(0)
    }
}

@keyframes hamburger-bottom-closed {
    0% {
        -webkit-transform: translateY(-300%) rotate(-45deg);
        transform: translateY(-300%) rotate(-45deg)
    }

    40% {
        -webkit-transform: translateY(-300%) rotate(0);
        transform: translateY(-300%) rotate(0)
    }

    60% {
        -webkit-transform: translateY(120%) rotate(0);
        transform: translateY(120%) rotate(0)
    }

    100% {
        -webkit-transform: translateY(0) rotate(0);
        transform: translateY(0) rotate(0)
    }
}