.js-scroll.force-anim .fade-up,
.js-scroll.force-anim .fade-down,
.js-scroll.force-anim .fade-left,
.js-scroll.force-anim .fade-right,
.js-scroll.force-anim .fade,
.ready-scroll.force-anim .fade-up,
.ready-scroll.force-anim .fade-down,
.ready-scroll.force-anim .fade-left,
.ready-scroll.force-anim .fade-right,
.ready-scroll.force-anim .fade,
.js-scroll.force-anim .text-fade-clip,
.ready-scroll.force-anim .text-fade-clip,
.js-scroll.force-anim.fade-up,
.js-scroll.force-anim.fade-down,
.js-scroll.force-anim.fade-left,
.js-scroll.force-anim.fade-right,
.js-scroll.force-anim.fade,
.ready-scroll.force-anim.fade-up,
.ready-scroll.force-anim.fade-down,
.ready-scroll.force-anim.fade-left,
.ready-scroll.force-anim.fade-right,
.ready-scroll.force-anim.fade,
.ready-scroll.force-anim.text-fade-clip,
.js-scroll.force-anim.text-fade-clip {
    animation-play-state: initial;
}

.ready-scroll .text-fade-clip,
.ready-scroll.text-fade-clip,
.ready-scroll .fade-up,
.ready-scroll.fade-up,
.ready-scroll .fade-down,
.ready-scroll.fade-down,
.ready-scroll .fade-left,
.ready-scroll.fade-left,
.ready-scroll .fade-right,
.ready-scroll.fade-right,
.ready-scroll .fade,
.ready-scroll.fade {
    opacity: 0;
}

.ready-scroll.scrolled .text-fade-clip,
.ready-scroll.scrolled.text-fade-clip {
    opacity: 1;
    display: inline-block;
    animation: text-clip 1.6s 0s cubic-bezier(0.21, 0.2, 0.1, 1) both;
}

.ready-scroll.scrolled .fade-up,
.ready-scroll.scrolled.fade-up {
    opacity: 1;
    animation: fade-up 0.6s 0s ease both;
}

.ready-scroll.scrolled .fade-down,
.ready-scroll.scrolled.fade-down {
    opacity: 1;
    animation: fade-down 0.6s 0s ease both;
}

.ready-scroll.scrolled .fade-left,
.ready-scroll.scrolled.fade-left {
    opacity: 1;
    animation: fade-left 0.6s 0s ease both;
}

.ready-scroll.scrolled .fade-right,
.ready-scroll.scrolled.fade-right {
    opacity: 1;
    animation: fade-right 0.6s 0s ease both;
}

.ready-scroll.scrolled .fade,
.ready-scroll.scrolled.fade {
    opacity: 1;
    animation: fade 0.6s 0s ease both;
}

@media screen and (min-width: 768px) {
    .ready-scroll.scrolled .delay-1,
    .ready-scroll.scrolled.delay-1 {
        animation-delay: 100ms !important;
    }

    .ready-scroll.scrolled .delay-2,
    .ready-scroll.scrolled.delay-2 {
        animation-delay: 200ms !important;
    }

    .ready-scroll.scrolled .delay-3,
    .ready-scroll.scrolled.delay-3 {
        animation-delay: 300ms !important;
    }

    .ready-scroll.scrolled .delay-4,
    .ready-scroll.scrolled.delay-4 {
        animation-delay: 400ms !important;
    }

    .ready-scroll.scrolled .delay-5,
    .ready-scroll.scrolled.delay-5 {
        animation-delay: 500ms !important;
    }

    .ready-scroll.scrolled .delay-6,
    .ready-scroll.scrolled.delay-6 {
        animation-delay: 600ms !important;
    }

    .ready-scroll.scrolled .delay-7,
    .ready-scroll.scrolled.delay-7 {
        animation-delay: 700ms !important;
    }

    .ready-scroll.scrolled .delay-8,
    .ready-scroll.scrolled.delay-8 {
        animation-delay: 800ms !important;
    }

    .ready-scroll.scrolled .delay-9,
    .ready-scroll.scrolled.delay-9 {
        animation-delay: 900ms !important;
    }

    .ready-scroll.scrolled .delay-10,
    .ready-scroll.scrolled.delay-10 {
        animation-delay: 1000ms !important;
    }

    .ready-scroll.scrolled .delay-11,
    .ready-scroll.scrolled.delay-11 {
        animation-delay: 1100ms !important;
    }

    .ready-scroll.scrolled .delay-12,
    .ready-scroll.scrolled.delay-12 {
        animation-delay: 1200ms !important;
    }

    .ready-scroll.scrolled .delay-13,
    .ready-scroll.scrolled.delay-13 {
        animation-delay: 1300ms !important;
    }

    .ready-scroll.scrolled .delay-14,
    .ready-scroll.scrolled.delay-14 {
        animation-delay: 1400ms !important;
    }
}
.ready-scroll.scrolled .delay-1.force-delay,
.ready-scroll.scrolled.delay-1.force-delay {
    animation-delay: 100ms !important;
}

.ready-scroll.scrolled .delay-2.force-delay,
.ready-scroll.scrolled.delay-2.force-delay {
    animation-delay: 200ms !important;
}

.ready-scroll.scrolled .delay-3.force-delay,
.ready-scroll.scrolled.delay-3.force-delay {
    animation-delay: 300ms !important;
}

.ready-scroll.scrolled .delay-4.force-delay,
.ready-scroll.scrolled.delay-4.force-delay {
    animation-delay: 400ms !important;
}

.ready-scroll.scrolled .delay-5.force-delay,
.ready-scroll.scrolled.delay-5.force-delay {
    animation-delay: 500ms !important;
}

.ready-scroll.scrolled .delay-6.force-delay,
.ready-scroll.scrolled.delay-6.force-delay {
    animation-delay: 600ms !important;
}

.ready-scroll.scrolled .delay-7.force-delay,
.ready-scroll.scrolled.delay-7.force-delay {
    animation-delay: 700ms !important;
}

.ready-scroll.scrolled .delay-8.force-delay,
.ready-scroll.scrolled.delay-8.force-delay {
    animation-delay: 800ms !important;
}

.ready-scroll.scrolled .delay-9.force-delay,
.ready-scroll.scrolled.delay-9.force-delay {
    animation-delay: 900ms !important;
}

.ready-scroll.scrolled .delay-10.force-delay,
.ready-scroll.scrolled.delay-10.force-delay {
    animation-delay: 1000ms !important;
}

.ready-scroll.scrolled .delay-11.force-delay,
.ready-scroll.scrolled.delay-11.force-delay {
    animation-delay: 1100ms !important;
}

.ready-scroll.scrolled .delay-12.force-delay,
.ready-scroll.scrolled.delay-12.force-delay {
    animation-delay: 1200ms !important;
}

.ready-scroll.scrolled .delay-13.force-delay,
.ready-scroll.scrolled.delay-13.force-delay {
    animation-delay: 1300ms !important;
}

.ready-scroll.scrolled .delay-14.force-delay,
.ready-scroll.scrolled.delay-14.force-delay {
    animation-delay: 1400ms !important;
}

@keyframes text-clip {
    0% {
        clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%);
        transform: translate(50px);
    }

    100% {
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
        transform: translate(0px);
    }
}
@keyframes fade-up {
    0% {
        opacity: 0;
        transform: translate(0px, 20px);
    }

    100% {
        opacity: 1;
        transform: translate(0px, 0px);
    }
}
@keyframes fade-left {
    0% {
        opacity: 0;
        transform: translate(20px, 0px);
    }

    100% {
        opacity: 1;
        transform: translate(0px, 0px);
    }
}
@keyframes fade-right {
    0% {
        opacity: 0;
        transform: translate(-20px, 0px);
    }

    100% {
        opacity: 1;
        transform: translate(0px, 0px);
    }
}
@keyframes fade-down {
    0% {
        opacity: 0;
        transform: translate(0px, -20px);
    }

    100% {
        opacity: 1;
        transform: translate(0px, 0px);
    }
}
@keyframes fade {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}