/* SCROLL ANIMATION
=============================================== */

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

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

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

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

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

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

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

.scrolled.fade-in-top--slow {
  animation: fade-in-top 0.8s ease-in-out both;
}

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

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

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

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

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

.scrolled.slide-left--slow {
  animation: slide-in-left 1.4s ease-in-out both;
}

.scrolled.slide-left--xslow {
  animation: slide-in-left 1.8s ease-in-out both;
}

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

.scrolled.slide-right--slow {
  animation: slide-in-right 1.4s ease-in-out both;
}

.scrolled.slide-right--xslow {
  animation: slide-in-right 1.8s ease-in-out both;
}

@media (prefers-reduced-motion) {
    .js-scroll {
        opacity: 1;
    }

    .scrolled {
        animation: none !important;
    }
}

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

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

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

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

@keyframes fade-in-top {
    0% {
        -webkit-transform: translateY(-20px);
        transform: translateY(-20px);
        opacity: 0;
    }

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

@keyframes fade-in-bottom {
    0% {
        -webkit-transform: translateY(20px);
        transform: translateY(20px);
        opacity: 0;
    }

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

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

    100% {
        opacity: 1;
    }
}