.sp-nav span:nth-of-type(1) {
  -webkit-animation: menu-bar01 .75s forwards;
  animation: menu-bar01 .75s forwards;
}
@-webkit-keyframes menu-bar01 {
  0% {
    /* -webkit-transform: translateY(20px) rotate(45deg); */
    -webkit-transform: translateY(5px) rotate(45deg);
  }
  50% {
    /* -webkit-transform: translateY(20px) rotate(0); */
    -webkit-transform: translateY(5px) rotate(0);
  }
  100% {
    -webkit-transform: translateY(0) rotate(0);
  }
}
@keyframes menu-bar01 {
  0% {
    /* transform: translateY(20px) rotate(45deg); */
    transform: translateY(5px) rotate(45deg);
  }
  50% {
    /* transform: translateY(20px) rotate(0); */
    transform: translateY(5px) rotate(0);
  }
  100% {
    transform: translateY(0) rotate(0);
  }
}
.sp-nav span:nth-of-type(2) {
  transition: all .25s .25s;
  opacity: 1;
}
.sp-nav span:nth-of-type(3) {
  -webkit-animation: menu-bar02 .75s forwards;
  animation: menu-bar02 .75s forwards;
}
@-webkit-keyframes menu-bar02 {
  0% {
    /* -webkit-transform: translateY(-20px) rotate(-45deg); */
    -webkit-transform: translateY(-10px) rotate(-45deg);
  }
  50% {
    /* -webkit-transform: translateY(-20px) rotate(0); */
    -webkit-transform: translateY(-10px) rotate(0);
  }
  100% {
    -webkit-transform: translateY(0) rotate(0);
  }
}
@keyframes menu-bar02 {
  0% {
    /* transform: translateY(-20px) rotate(-45deg); */
    transform: translateY(-10px) rotate(-45deg);
  }
  50% {
    /* transform: translateY(-20px) rotate(0); */
    transform: translateY(-10px) rotate(0);
  }
  100% {
    transform: translateY(0) rotate(0);
  }
}
.sp-nav.active span:nth-of-type(1) {
  -webkit-animation: active-menu-bar01 .75s forwards;
  animation: active-menu-bar01 .75s forwards;
}
@-webkit-keyframes active-menu-bar01 {
  0% {
    -webkit-transform: translateY(0) rotate(0);
  }
  50% {
    /* -webkit-transform: translateY(20px) rotate(0); */
    -webkit-transform: translateY(10px) rotate(0);
  }
  100% {
    /* -webkit-transform: translateY(20px) rotate(45deg); */
    -webkit-transform: translateY(10px) rotate(45deg);
  }
}
@keyframes active-menu-bar01 {
  0% {
    transform: translateY(0) rotate(0);
  }
  50% {
    /* transform: translateY(20px) rotate(0); */
    transform: translateY(10px) rotate(0);
  }
  100% {
    /* transform: translateY(20px) rotate(45deg); */
    transform: scale(0.6,0.6) translateY(16px) rotate(45deg);

  }
}
.sp-nav.active span:nth-of-type(2) {
  opacity: 0;
}
.sp-nav.active span:nth-of-type(3) {
  -webkit-animation: active-menu-bar03 .75s forwards;
  animation: active-menu-bar03 .75s forwards;
}
@-webkit-keyframes active-menu-bar03 {
  0% {
    -webkit-transform: translateY(0) rotate(0);
  }
  50% {
    /* -webkit-transform: translateY(-20px) rotate(0); */
    -webkit-transform: translateY(-18px) rotate(0);
  }
  100% {
    /* -webkit-transform: translateY(-20px) rotate(-45deg); */
    -webkit-transform: translateY(-18px) rotate(-45deg);
  }
}
@keyframes active-menu-bar03 {
  0% {
    transform: translateY(0) rotate(0);
  }
  50% {
    /* transform: translateY(-20px) rotate(0); */
    transform: translateY(-18px) rotate(0);
  }
  100% {
    /* transform: translateY(-20px) rotate(-45deg); */
    transform: scale(0.6,0.6) translateY(-19px) rotate(-45deg);
  }
}