/* Menu Special animation */

@-webkit-keyframes slideMenu {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -32px, 0);
    transform: translate3d(0, -32px, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    visibility: visible;
  }
}

@keyframes slideMenu {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -32px, 0);
    transform: translate3d(0, -32px, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    visibility: visible;
  }
}

@keyframes slideMenuRevert {
  from {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -32px, 0);
    transform: translate3d(0, -32px, 0);
    visibility: hidden;
  }
}

@-webkit-keyframes slideMenuRevert {
  from {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -32px, 0);
    transform: translate3d(0, -32px, 0);
    visibility: hidden;
  }
}

@keyframes upper {
  from {
    -webkit-transform: translate3d(0, 0, 0) rotate(0);
    transform: translate3d(0, 0, 0) rotate(0);
  }
  to {
    -webkit-transform: translate3d(0, 11px, 0) rotate(45deg);
    transform: translate3d(0, 11px, 0) rotate(45deg);
  }
}
@keyframes medium {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@keyframes lower {
  from {
    -webkit-transform: translate3d(0, 0, 0) rotate(0);
    transform: translate3d(0, 0, 0) rotate(0);
  }
  to {
    -webkit-transform: translate3d(0, -11px, 0) rotate(-45deg);
    transform: translate3d(0, -11px, 0) rotate(-45deg);
  }
}

@keyframes upperRev {
  from {
    -webkit-transform: translate3d(0, 11px, 0) rotate(45deg);
    transform: translate3d(0, 11px, 0) rotate(45deg);
  }
  to {
    -webkit-transform: translate3d(0, 0, 0) rotate(0);
    transform: translate3d(0, 0, 0) rotate(0);
  }
}
@keyframes mediumRev {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes lowerRev {
  from {
    -webkit-transform: translate3d(0, -11px, 0) rotate(-45deg);
    transform: translate3d(0, -11px, 0) rotate(-45deg);
  }
  to {
    -webkit-transform: translate3d(0, 0, 0) rotate(0);
    transform: translate3d(0, 0, 0) rotate(0);
  }
}