.scroll-js{
    opacity: 0;
    transition: opacity 500ms;
}
.scroll-js.scrolled{
    opacity: 1;
}
.scrolled.fade-in{
    animation: fade-in 750ms ease-in-out both;
}
.scrolled.fade-in-bottom{
    animation: fade-in-bottom 750ms ease-in-out both;
}
.scrolled.slide-left{
    animation: slide-in-left 750ms ease-in-out both;
}
.scrolled.slide-right{
    animation: slide-in-right 750ms ease-in-out both;
}
.scrolled.slide-bottom{
    animation: slide-in-bottom 750ms ease-in-out both;
}
.scrolled.elem-rotating{
    animation-delay: 0.0s;
    animation-direction: alternate;
    animation-duration: 750ms;
    animation-fill-mode: none;
    animation-iteration-count: 3;
    animation-name: rotating;
    animation-timing-function: ease, step-start, cubic-bezier(0.1, 1, 1.0, 0.1);
}
.scrolled.slide-left-color{
    animation: slide-in-left 750ms ease-in-out both, changeColor 7s linear infinite;
}
.scrolled.slide-right-color{
    animation: slide-in-right 750ms ease-in-out both, changeColor 7s linear infinite;
}
@keyframes rotating{
  from{ transform: scaleX(0); }
  to  { transform: scaleX(1); }
}
@keyframes slide-in-left{
    0%{
        transform: translateX(-100px);
        opacity: 0;
    }
    100%{
        transform: translateX(0);
        opacity: 1;
    }
}
@keyframes slide-in-right{
    0%{
        transform: translateX(100px);
        opacity: 0;
    }
    100%{
        transform: translateX(0);
        opacity: 1;
    }
}
@keyframes fade-in-bottom{
    0%{
        transform: translateY(50px);
        opacity: 0;
    }
    100%{
        transform: translateY(0);
        opacity: 1;
    }
}
@keyframes slide-in-bottom{
    0%{
        transform: translateY(50px);
        opacity: 0;
    }
    50%{
        transform: translateY(-25px);
        opacity: .7;
    }
    100%{
        transform: translateY(0);
        opacity: 1;
    }
}
@keyframes fade-in{
    0%{
        opacity: 0;
    }
    100%{
        opacity: 1;
    }
}
@keyframes changeColor{
    0%{
        filter: hue-rotate(0deg);
    }
    100%{
        filter: hue-rotate(360deg);
    }
}
@media (prefers-reduced-motion: reduce){
    .js-scroll{
        opacity: 1;
    }
    .scrolled{
        animation: none !important;
    }
}