/* Animation */
.animate-fade-in-down,
.animate-fade-in-up {
  opacity: 0;
}

.in-viewport.animate-fade-in-down,
.in-viewport .animate-fade-in-down {
  animation-name: fade-in-down;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
  animation-timing-function: ease-in-out;
}
@keyframes fade-in-down {
  0% {
      opacity: 0;
      transform: translateY(-30px)
  }
  100% {
      opacity: 1;
      transform: translateY(0)
  }
}

.in-viewport.animate-fade-out-down,
.in-viewport .animate-fade-out-down {
  animation-name: fade-out-down;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
  animation-timing-function: ease-in-out;
}
@keyframes fade-out-down {
  0% {
      opacity: 1;
      transform: translateY(0px)
  }
  100% {
      opacity: 0;
      transform: translateY(30px)
  }
}

.in-viewport.animate-fade-in-up,
.in-viewport .animate-fade-in-up {
  animation-name: fade-in-up;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
  animation-timing-function: ease-in-out;
}
@keyframes fade-in-up {
  0% {
      opacity: 0;
      transform: translateY(30px)
  }
  100% {
      opacity: 1;
      transform: translateY(0px)
  }
}

.in-viewport.animate-fade-out-up,
.in-viewport .animate-fade-out-up {
  animation-name: fade-out-up;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
  animation-timing-function: ease-in-out;
}
@keyframes fade-out-up {
  0% {
      opacity: 1;
      transform: translateY(0px)
  }
  100% {
      opacity: 0;
      transform: translateY(30px)
  }
}