@keyframes scroll-down {
  0% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(10px);
  }

  100% {
    transform: translateY(0px);
  }
}

@keyframes scroll-ver {
  0% {
    transform: translateX(0);
  }

  50% {
    transform: translateX(10px);
  }

  100% {
    transform: translateX(0px);
  }
}

@keyframes rotate {
  0% {
    transform: rotate(0);
  }

  50% {
    transform: rotate(360deg);
  }

  100% {
    transform: rotate(0);
  }
}

@keyframes rotate1 {
  0% {
    transform: rotate(0);
  }

  50% {
    transform: rotate(360deg);
  }

  100% {
    transform: rotate(0);
  }
}

@keyframes rotate2 {
  0% {
      -webkit-transform: rotate(0deg);
      -ms-transform: rotate(0deg);
      transform: rotate(0deg);
  }    100% {
      -webkit-transform: rotate(360deg);
      -ms-transform: rotate(360deg);
      transform: rotate(360deg);
  }
}@-moz-keyframes rotate2 {
  0% {
      -webkit-transform: rotate(0deg);
      -ms-transform: rotate(0deg);
      transform: rotate(0deg);
  }    100% {
      -webkit-transform: rotate(360deg);
      -ms-transform: rotate(360deg);
      transform: rotate(360deg);
  }
}@-webkit-keyframes rotate2 {
  0% {
      -webkit-transform: rotate(0deg);
      -ms-transform: rotate(0deg);
      transform: rotate(0deg);
  }    100% {
      -webkit-transform: rotate(360deg);
      -ms-transform: rotate(360deg);
      transform: rotate(360deg);
  }
}

@keyframes scale {
  0% {
    left: -800px;
    -webkit-transform: scale(0);
    transform: scale(0);
    opacity: 0;
  }

  100% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

@-webkit-keyframes slideUp {
  from {
    background-position: 0 0;
  }

  to {
    background-position: 0% -1000%;
  }
}
@keyframes slideUp {
  from {
    background-position: 0 0;
  }

  to {
    background-position: 0% -1000%;
  }
}

@keyframes outer-ripple {
  0% {
    transform: scale(1);
    filter: alpha(opacity=50);
    opacity: 0.5;
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    -webkit-filter: alpha(opacity=50);
  }

  80% {
    transform: scale(1.5);
    filter: alpha(opacity=0);
    opacity: 0;
    -webkit-transform: scale(1.5);
    -moz-transform: scale(1.5);
    -ms-transform: scale(1.5);
    -o-transform: scale(1.5);
  }

  100% {
    transform: scale(2.5);
    filter: alpha(opacity=0);
    opacity: 0;
    -webkit-transform: scale(2.5);
    -moz-transform: scale(2.5);
    -ms-transform: scale(2.5);
    -o-transform: scale(2.5);
  }
}
@-webkit-keyframes outer-ripple {
  0% {
    transform: scale(1);
    filter: alpha(opacity=50);
    opacity: 0.5;
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
  }

  80% {
    transform: scale(2.5);
    filter: alpha(opacity=0);
    opacity: 0;
    -webkit-transform: scale(2.5);
    -moz-transform: scale(2.5);
    -ms-transform: scale(2.5);
    -o-transform: scale(2.5);
  }

  100% {
    transform: scale(3.5);
    filter: alpha(opacity=0);
    opacity: 0;
    -webkit-transform: scale(3.5);
    -moz-transform: scale(3.5);
    -ms-transform: scale(3.5);
    -o-transform: scale(3.5);
  }
}
@-moz-keyframes outer-ripple {
  0% {
    transform: scale(1);
    filter: alpha(opacity=50);
    opacity: 0.5;
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
  }

  80% {
    transform: scale(2.5);
    filter: alpha(opacity=0);
    opacity: 0;
    -webkit-transform: scale(2.5);
    -moz-transform: scale(2.5);
    -ms-transform: scale(2.5);
    -o-transform: scale(2.5);
  }

  100% {
    transform: scale(3.5);
    filter: alpha(opacity=0);
    opacity: 0;
    -webkit-transform: scale(3.5);
    -moz-transform: scale(3.5);
    -ms-transform: scale(3.5);
    -o-transform: scale(3.5);
  }
}

@keyframes inner-ripple {
  0% {
    transform: scale(1);
    filter: alpha(opacity=50);
    opacity: 0.5;
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
  }

  30% {
    transform: scale(1);
    filter: alpha(opacity=50);
    opacity: 0.5;
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
  }

  100% {
    transform: scale(1.5);
    filter: alpha(opacity=0);
    opacity: 0;
    -webkit-transform: scale(1.5);
    -moz-transform: scale(1.5);
    -ms-transform: scale(1.5);
    -o-transform: scale(1.5);
  }
}
@-webkit-keyframes inner-ripple {
  0% {
    transform: scale(1);
    filter: alpha(opacity=50);
    opacity: 0.5;
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
  }

  30% {
    transform: scale(1);
    filter: alpha(opacity=50);
    opacity: 0.5;
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
  }

  100% {
    transform: scale(1.5);
    filter: alpha(opacity=0);
    opacity: 0;
    -webkit-transform: scale(1.5);
    -moz-transform: scale(1.5);
    -ms-transform: scale(1.5);
    -o-transform: scale(1.5);
  }
}
@-moz-keyframes inner-ripple {
  0% {
    transform: scale(1);
    filter: alpha(opacity=50);
    opacity: 0.5;
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
  }

  30% {
    transform: scale(1);
    filter: alpha(opacity=50);
    opacity: 0.5;
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
  }

  100% {
    transform: scale(1.5);
    filter: alpha(opacity=0);
    opacity: 0;
    -webkit-transform: scale(1.5);
    -moz-transform: scale(1.5);
    -ms-transform: scale(1.5);
    -o-transform: scale(1.5);
  }
}

@-webkit-keyframes ImgAnimate {
  0% {
    -webkit-transform: rotate(0) translate(-10px) rotate(0);
    -moz-transform: rotate(0) translate(-10px) rotate(0);
    -ms-transform: rotate(0) translate(-10px) rotate(0);
    -o-transform: rotate(0) translate(-10px) rotate(0);
    transform: rotate(0) translate(-10px) rotate(0);
  }

  100% {
    -webkit-transform: rotate(360deg) translate(-10px) rotate(-360deg);
    -moz-transform: rotate(360deg) translate(-10px) rotate(-360deg);
    -ms-transform: rotate(360deg) translate(-10px) rotate(-360deg);
    -o-transform: rotate(360deg) translate(-10px) rotate(-360deg);
    transform: rotate(360deg) translate(-10px) rotate(-360deg);
  }
}
@-moz-keyframes ImgAnimate {
  0% {
    -webkit-transform: rotate(0) translate(-10px) rotate(0);
    -moz-transform: rotate(0) translate(-10px) rotate(0);
    -ms-transform: rotate(0) translate(-10px) rotate(0);
    -o-transform: rotate(0) translate(-10px) rotate(0);
    transform: rotate(0) translate(-10px) rotate(0);
  }

  100% {
    -webkit-transform: rotate(360deg) translate(-10px) rotate(-360deg);
    -moz-transform: rotate(360deg) translate(-10px) rotate(-360deg);
    -ms-transform: rotate(360deg) translate(-10px) rotate(-360deg);
    -o-transform: rotate(360deg) translate(-10px) rotate(-360deg);
    transform: rotate(360deg) translate(-10px) rotate(-360deg);
  }
}
@-ms-keyframes ImgAnimate {
  0% {
    -webkit-transform: rotate(0) translate(-10px) rotate(0);
    -moz-transform: rotate(0) translate(-10px) rotate(0);
    -ms-transform: rotate(0) translate(-10px) rotate(0);
    -o-transform: rotate(0) translate(-10px) rotate(0);
    transform: rotate(0) translate(-10px) rotate(0);
  }

  100% {
    -webkit-transform: rotate(360deg) translate(-10px) rotate(-360deg);
    -moz-transform: rotate(360deg) translate(-10px) rotate(-360deg);
    -ms-transform: rotate(360deg) translate(-10px) rotate(-360deg);
    -o-transform: rotate(360deg) translate(-10px) rotate(-360deg);
    transform: rotate(360deg) translate(-10px) rotate(-360deg);
  }
}
@keyframes ImgAnimate {
  0% {
    -webkit-transform: rotate(0) translate(-10px) rotate(0);
    -moz-transform: rotate(0) translate(-10px) rotate(0);
    -ms-transform: rotate(0) translate(-10px) rotate(0);
    -o-transform: rotate(0) translate(-10px) rotate(0);
    transform: rotate(0) translate(-10px) rotate(0);
  }

  100% {
    -webkit-transform: rotate(360deg) translate(-10px) rotate(-360deg);
    -moz-transform: rotate(360deg) translate(-10px) rotate(-360deg);
    -ms-transform: rotate(360deg) translate(-10px) rotate(-360deg);
    -o-transform: rotate(360deg) translate(-10px) rotate(-360deg);
    transform: rotate(360deg) translate(-10px) rotate(-360deg);
  }
}

@keyframes video {
  0% {
    box-shadow: 0 0 0 0 rgba($bg--base,.7);
  }

  40% {
    box-shadow: 0 0 0 50px rgba($bg--base,0);
  }

  80% {
    box-shadow: 0 0 0 50px rgba($bg--base,0);
  }

  100% {
    box-shadow: 0 0 0 rgba($bg--base,0);
  }
}

@keyframes horizontal-move {
  0% {
    transform: rotateZ(5deg);
  }

  50% {
    transform: rotateZ(-5deg);
  }

  100% {
    transform: rotateZ(5deg);
  }
}

@keyframes horizontal-move-two {
  0% {
    transform: rotateZ(20deg);
  }

  50% {
    transform: rotateZ(-20deg);
  }

  100% {
    transform: rotateZ(20deg);
  }
}

@-webkit-keyframes slideUp {
  from {
    background-position: 0 0;
  }

  to {
    background-position: 0% -1000%;
  }
}
@keyframes slideUp {
  from {
    background-position: 0 0;
  }

  to {
    background-position: 0% -1000%;
  }
}

@keyframes float-bob-x {
  0% {
    -webkit-transform: translateX(-100px);
    transform: translateX(-100px);
  }
  50% {
    -webkit-transform: translateX(-10px);
    transform: translateX(-10px);
  }
  100% {
    -webkit-transform: translateX(-100px);
    transform: translateX(-100px);
  }
}

@-webkit-keyframes zoominoutsinglefeatured {
  0% {
    -webkit-transform: scale(1, 1);
            transform: scale(1, 1);
  }
  50% {
    -webkit-transform: scale(1.2, 1.2);
            transform: scale(1.2, 1.2);
  }
  100% {
    -webkit-transform: scale(1, 1);
            transform: scale(1, 1);
  }
}

@keyframes zoominoutsinglefeatured {
  0% {
    -webkit-transform: scale(1, 1);
            transform: scale(1, 1);
  }
  50% {
    -webkit-transform: scale(1.2, 1.2);
            transform: scale(1.2, 1.2);
  }
  100% {
    -webkit-transform: scale(1, 1);
            transform: scale(1, 1);
  }
}


// @-moz-keyframes bouncing-text {
//   0% {
//       -moz-transform: translateX(10%);
//   }
//   100% {
//       -moz-transform: translateX(-10%);
//   }
// }

// @-webkit-keyframes bouncing-text {
//   0% {
//       -webkit-transform: translateX(10%);
//   }
//   100% {
//       -webkit-transform: translateX(-10%);
//   }
// }

@keyframes bouncing-text {
  0% {
      right: -80%;
  }
  100% {
      right: 100%;
  }
}

@keyframes rotatebox {
  0% {
      -webkit-transform: translate(-50%, -50%) rotate(0deg);
      -ms-transform: translate(-50%, -50%) rotate(0deg);
      transform: translate(-50%, -50%) rotate(0deg);
  }    100% {
      -webkit-transform: translate(-50%, -50%) rotate(360deg);
      -ms-transform: translate(-50%, -50%) rotate(360deg);
      transform: translate(-50%, -50%) rotate(360deg);
  }
}@-moz-keyframes rotatebox {
  0% {
      -webkit-transform: translate(-50%, -50%) rotate(0deg);
      -ms-transform: translate(-50%, -50%) rotate(0deg);
      transform: translate(-50%, -50%) rotate(0deg);
  }    100% {
      -webkit-transform: translate(-50%, -50%) rotate(360deg);
      -ms-transform: translate(-50%, -50%) rotate(360deg);
      transform: translate(-50%, -50%) rotate(360deg);
  }
}@-webkit-keyframes rotatebox {
  0% {
      -webkit-transform: translate(-50%, -50%) rotate(0deg);
      -ms-transform: translate(-50%, -50%) rotate(0deg);
      transform: translate(-50%, -50%) rotate(0deg);
  }    100% {
      -webkit-transform: translate(-50%, -50%) rotate(360deg);
      -ms-transform: translate(-50%, -50%) rotate(360deg);
      transform: translate(-50%, -50%) rotate(360deg);
  }
}

@keyframes rev-rotate {
  0% {
      -webkit-transform: translate(-50%, -50%) rotate(0deg);
      -ms-transform: translate(-50%, -50%) rotate(0deg);
      transform: translate(-50%, -50%) rotate(0deg);
  }    100% {
      -webkit-transform: translate(-50%, -50%) rotate(-360deg);
      -ms-transform: translate(-50%, -50%) rotate(-360deg);
      transform: translate(-50%, -50%) rotate(-360deg);
  }
}@-webkit-keyframes rev-rotate {
  0% {
      -webkit-transform: translate(-50%, -50%) rotate(0deg);
      -ms-transform: translate(-50%, -50%) rotate(0deg);
      transform: translate(-50%, -50%) rotate(0deg);
  }    100% {
      -webkit-transform: translate(-50%, -50%) rotate(-360deg);
      -ms-transform: translate(-50%, -50%) rotate(-360deg);
      transform: translate(-50%, -50%) rotate(-360deg);
  }
}@-moz-keyframes rev-rotate {
  0% {
      -webkit-transform: translate(-50%, -50%) rotate(0deg);
      -ms-transform: translate(-50%, -50%) rotate(0deg);
      transform: translate(-50%, -50%) rotate(0deg);
  }    100% {
      -webkit-transform: translate(-50%, -50%) rotate(-360deg);
      -ms-transform: translate(-50%, -50%) rotate(-360deg);
      transform: translate(-50%, -50%) rotate(-360deg);
  }
}

@keyframes nama_utha {
  0% {
      bottom: 0;
      -webkit-transform: translateY(100%);
      -ms-transform: translateY(100%);
      transform: translateY(100%);
  }

  100% {
      bottom: 100%;
      -webkit-transform: translateY(-100%);
      -ms-transform: translateY(-100%);
      transform: translateY(-100%);
  }
}

@keyframes utha_nama {
  0% {
      top: 0;
      -webkit-transform: translateY(-100%);
      -ms-transform: translateY(-100%);
      transform: translateY(-100%);
  }

  100% {
      top: 100%;
      -webkit-transform: translateY(100%);
      -ms-transform: translateY(100%);
      transform: translateY(100%);
  }
}

@keyframes choose-hexagon-1 {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes choose-hexagon-2 {
  0% {
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
  }

  100% {
    -webkit-transform: rotate(540deg);
    -moz-transform: rotate(540deg);
    -o-transform: rotate(540deg);
    transform: rotate(540deg);
  }
}

@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}