/* SVG Logo Animation */

#e {
  -webkit-animation: e 1s both;
  animation: e 1s both;
  opacity: 0;
}
#s-top {
  -webkit-animation: s-top 1.5s both;
  animation: s-top 1.5s both;
  opacity: 0;
}
#s-bottom {
  -webkit-animation: s-bottom 1.8s both;
  animation: s-bottom 1.8s both;
  transform-origin: center;
  transform-box: fill-box;
  animation-delay: 1.2s;
  opacity: 0;
}
#n {
  -webkit-animation: n 1s both;
  animation: n 1s both;
  animation-delay: 2.5s;
}
#a {
  -webkit-animation: a 1s both;
  animation: a 1s both;
  animation-delay: 2.5s;
}
#p {
  -webkit-animation: p 1s both;
  animation: p 1s both;
  animation-delay: 2.5s;
}
#circle {
  -webkit-animation: circle 4s both infinite;
  animation: circle 4s both infinite;
  transform-origin: center;
  transform-box: fill-box;
  animation-delay: 3.15s;
}
@keyframes s-top {
  0% {
    -webkit-transform: rotate3d(-1, 1, 0, 180deg);
    transform: rotate3d(-1, 1, 0, 180deg);
    opacity: 0;
  }
  100% {
    -webkit-transform: rotate3d(-1, 1, 0, 0deg);
    transform: rotate3d(-1, 1, 0, 0deg);
    opacity: 1;
  }
}
@-webkit-keyframes s-top {
  0% {
    -webkit-transform: rotate3d(-1, 1, 0, 180deg);
    transform: rotate3d(-1, 1, 0, 180deg);
    opacity: 0;
  }
  100% {
    -webkit-transform: rotate3d(-1, 1, 0, 0deg);
    transform: rotate3d(-1, 1, 0, 0deg);
    opacity: 1;
  }
}
@keyframes s-bottom {
  0% {
    -webkit-transform: scale(1) rotateZ(0);
    transform: scale(1) rotateZ(0);
    opacity: 0;
  }
  50% {
    -webkit-transform: scale(2) rotateZ(180deg);
    transform: scale(2) rotateZ(180deg);
  }
  100% {
    -webkit-transform: scale(1) rotateZ(360deg);
    transform: scale(1) rotateZ(360deg);
    opacity: 1;
  }
}
@-webkit-keyframes s-bottom {
  0% {
    -webkit-transform: scale(1) rotateZ(0);
    transform: scale(1) rotateZ(0);
    opacity: 0;
  }
  50% {
    -webkit-transform: scale(2) rotateZ(180deg);
    transform: scale(2) rotateZ(180deg);
  }
  100% {
    -webkit-transform: scale(1) rotateZ(360deg);
    transform: scale(1) rotateZ(360deg);
    opacity: 1;
  }
}
@keyframes e {
  0% {
    -webkit-transform: translateX(-200px);
    transform: translateX(-200px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    opacity: 1;
  }
}
@-webkit-keyframes e {
  0% {
    -webkit-transform: translateX(-200px);
    transform: translateX(-200px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    opacity: 1;
  }
}
@-webkit-keyframes n {
  0% {
    -webkit-transform: translateX(80px);
    transform: translateX(80px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    opacity: 1;
  }
}
@keyframes n {
  0% {
    -webkit-transform: translateX(70px);
    transform: translateX(70px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    opacity: 1;
  }
}
@-webkit-keyframes a {
  0% {
    -webkit-transform: translateX(70px);
    transform: translateX(70px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    opacity: 1;
  }
}
@keyframes a {
  0% {
    -webkit-transform: translateX(70px);
    transform: translateX(70px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    opacity: 1;
  }
}
@-webkit-keyframes p {
  0% {
    -webkit-transform: translateX(70px);
    transform: translateX(70px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    opacity: 1;
  }
}
@keyframes p {
  0% {
    -webkit-transform: translateX(70px);
    transform: translateX(70px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    opacity: 1;
  }
}
@keyframes circle {
  0% {
    -webkit-transform: rotatez(0deg);
    transform: rotatez(0deg);
    opacity: 0;
  }
  10% {
    -webkit-transform: rotatez(0deg);
    transform: rotatez(0deg);
    opacity: 0.5;
  }
  50% {
    -webkit-transform: rotateZ(360deg);
    transform: rotateZ(360deg);
    opacity: 1;
  }
  100% {
    -webkit-transform: rotateZ(360deg);
    transform: rotateZ(360deg);
    opacity: 1;
  }
}
@-webkit-keyframes circle {
  0% {
    -webkit-transform: rotatez(0deg);
    transform: rotatez(0deg);
    opacity: 0;
  }
  10% {
    -webkit-transform: rotatez(0deg);
    transform: rotatez(0deg);
    opacity: 0.5;
  }
  50% {
    -webkit-transform: rotateZ(360deg);
    transform: rotateZ(360deg);
    opacity: 1;
  }
  100% {
    -webkit-transform: rotateZ(360deg);
    transform: rotateZ(360deg);
    opacity: 1;
  }
}