.js-scroll {
  opacity: 0;
  transition: opacity 500ms;
}

.js-scroll.scrolled {
  opacity: 1;
}

.scrolled.fade-in {
  animation: fade-in 1s ease-in-out both;
}

.scrolled.slide-in-left{
  animation: slide-in-left 1s forwards;
}

.scrolled.slide-in-right {
  animation: slide-in-right 1s forwards;
}

.scrolled.fade-in-bottom {
  animation: fade-in-bottom 1s ease-in-out both;
}


@keyframes fade-in {
  0% {
    opacity: 0;
    z-index: 200;
  }
  100% {
    opacity: 1;
    z-index: 200;
  }
}

@keyframes slide-in-left {
  0% {
    transform: translateX(-300px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
  }
}

@keyframes slide-in-right {
  0% {
    transform: translateX(300px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
  }
}

@keyframes fade-in-bottom {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 0.85;
  }
}