/* Scrolling Animations */
.ready-scroll .fade,
.ready-scroll.fade {
    opacity: 0;
    transition: opacity 0.6s;
}

.ready-scroll.scrolled .fade,
.ready-scroll.scrolled.fade {
    opacity: 1;
}

.ready-scroll .gallery-fade,
.ready-scroll .product {
    opacity: 0;
    transform: translate(-20px);
    transition: opacity 0.6s, transform 0.6s ease;
}


.ready-scroll.scrolled .gallery-fade:nth-of-type(2),
.ready-scroll.scrolled .product:nth-of-type(2),
.delay-1 {
    transition-delay: 100ms !important;
}

.ready-scroll.scrolled .gallery-fade:nth-of-type(3),
.ready-scroll.scrolled .product:nth-of-type(3),
.delay-2 {
    transition-delay: 200ms !important;
}

.ready-scroll.scrolled .gallery-fade:nth-of-type(4),
.ready-scroll.scrolled .product:nth-of-type(4),
.delay-3 {
    transition-delay: 300ms !important;
}

.ready-scroll.scrolled .gallery-fade:nth-of-type(5),
.ready-scroll.scrolled .product:nth-of-type(5),
.delay-4 {
    transition-delay: 400ms !important;
}

.ready-scroll.scrolled .gallery-fade.no-delay {
    transition-delay: 0ms !important;
}

.ready-scroll.scrolled .gallery-fade,
.ready-scroll.scrolled .product {
    opacity: 1;
    transform: translate(0px);
}

.ready-scroll .fade-up,
.ready-scroll.fade-up {
    opacity: 0;
    transform: translate(0px, 20px);
    transition: opacity 0.6s, transform 0.6s;
}

.ready-scroll.scrolled .fade-up,
.ready-scroll.scrolled.fade-up {
    opacity: 1;
    transform: translate(0px, 0px);
}


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

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

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

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

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

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

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

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

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

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

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

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

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

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



.js-scroll.force-anim .fade-up,
.js-scroll.force-anim .fade,
.ready-scroll.force-anim .fade-up,
.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,
.ready-scroll.force-anim.fade-up,
.ready-scroll.force-anim.fade,
.ready-scroll.force-anim.text-fade-clip,
.js-scroll.force-anim.text-fade-clip {
    transition: none !important;
    animation-play-state: paused;
}

.ready-scroll .text-fade-clip,
.ready-scroll.text-fade-clip {
    opacity: 0;
    transition: none !important;
    transition-delay: 0 !important;
}

.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;
}

@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);
    }
}