@-webkit-keyframes fadeInUp2 {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 50%, 0);
    transform: translate3d(0, 50%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes fadeInUp2 {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 50%, 0);
    transform: translate3d(0, 50%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

.fadeInUp2 {
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp;
}

@keyframes spin {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(-360deg);
  }
}

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes scrollUp {
  0% {
    transform: translateY(0);
  }

  100% {
    transform: translateY(-50%);
  }
}

@keyframes scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

@keyframes color_anim {
  0% {
    fill: rgb(255, 255, 255);
    opacity: 0;
  }

  50% {
    fill: rgb(255, 255, 255);
    opacity: 0.4;
  }

  100% {
    fill: white;
  }
}

@-webkit-keyframes btn-content {
  0% {
    outline: 0.2em solid rgb(38, 38, 38);
    outline-offset: 0;
  }
}

@keyframes btn-content {
  0% {
    outline: 0.2em solid rgb(38, 38, 38);
    outline-offset: 0;
  }
}

@keyframes spin360 {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.reveal-word span {
  display: inline-block;
  opacity: 0.001;
  filter: blur(10px);
  transform: translateY(20px);
  will-change: transform, opacity, filter;
  transition: opacity 0.7s ease, filter 0.7s ease,
    transform 0.7s cubic-bezier(0.23, 1, 0.32, 1);
}

.reveal-word span.visible {
  opacity: 1;
  filter: blur(0px);
  transform: translateY(0);
}

.reveal {
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.reveal.active {
  opacity: 1;
  transform: translateY(0);
}

.scroll-container {
  position: static;
  transform: none;
  @media (min-width: 768px) {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    will-change: transform;
  }
}
