/* Fixes video mix-blend mode on Firefox 87 */
.swiper-slide .aspect-ratio-box {
    opacity: 0.98
}

.home-video-slide .textured-text {
    font-size: 6.8em;
    font-weight: 900;
    text-transform: uppercase;
}

.horizontal-text-positioning,
.stacked-text-positioning {
    display: block;
    height: 100%;
    left: 0;
    margin: 0 auto;
    mix-blend-mode: multiply;
    position: absolute;
    top: 0;
    width: 100%;
}

.horizontal-text-clip-wrap,
.stacked-text-clip-wrap {
    display: block;
    height: 100%;
    opacity: .6;
    position: relative;
    width: 100%;
}

.stacked-video-container, .horizontal-video-container {
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}

.stacked-video-container {
    -webkit-clip-path: url(#stacked-text-clip);
    clip-path: url(#stacked-text-clip);
}

.horizontal-video-container {
    -webkit-clip-path: url(#horizontal-text-clip);
    clip-path: url(#horizontal-text-clip);
}

.horizontal-video,
.stacked-video {
    display: block;
    height: 100%;
    left: 0;
    object-fit: cover;
    position: absolute;
    top: 0;
    width: 100%;
}

.svg-text-clip {
    height: 0;
    position: absolute;
    width: 0;
}

/* CRADLE SLIDE */
#cradle .home-video-slide-text {
    display: flex;
    justify-content: space-between;
    position: absolute;
    top: 75%;
    left: 17%;
    right: 10%
}
#cradle span {
    opacity: 0;
    font-size: 3.3vw;
}
.no-js #cradle span {
    opacity: 1;
}
#cradle span.animate {
    animation-duration: 0.1s;
    animation-name: home-fade-in;
    animation-fill-mode: forwards;
    animation-timing-function: ease-out;
}


@media screen and (max-width: 600px) {
    /* HOME */
    .home-hero-wrap::before, .home-hero-wrap:before {
        padding-top: calc((740 / 536) * 100%);
    }

    .aspect-ratio-box::before {
        padding-top: calc((740 / 536) * 100%);
    }

    .stacked-video-container {
        -webkit-clip-path: url(#stacked-text-clip-mobile);
        clip-path: url(#stacked-text-clip-mobile);
    }

    .horizontal-video-container {
        -webkit-clip-path: url(#stacked-text-clip-mobile);
        clip-path: url(#stacked-text-clip-mobile);
    }

    :root {
        --cradle-container-width-pct: 46;
    }

    #cradle .home-video-slide-text {
        display: block;
        position: absolute;
        width: 100%;
        max-width: calc(var(--cradle-container-width-pct) * 1vw);
        right: 7.3%;
        left: auto;
        bottom: 5%;
        top: auto;
        overflow: hidden;
    }

    #cradle span {
        display: block;
        font-size: 2em;
        line-height: 1.1;
        text-align: center;
        float: right;
    }

    #cradle span:nth-of-type(1) {
        font-size: calc(1vw * var(--cradle-container-width-pct) / 4.6);
    }

    #cradle span:nth-of-type(2) {
        font-size: calc(1vw * var(--cradle-container-width-pct) / 5);
    }

    #cradle span:nth-of-type(3) {
        font-size: calc(1vw * var(--cradle-container-width-pct) / 6.5);
    }

    #cradle span:nth-of-type(4) {
        font-size: calc(1vw * var(--cradle-container-width-pct) / 3.85);
    }

    body .swiper-container-horizontal > .swiper-pagination-bullets {
        text-align: left;
        margin-left: 6%;
        bottom: 4.6%;
    }
}

    /* ANIMATIONS */
    @keyframes home-fade-in {
        0% {
            opacity: 0;
        }

        100% {
            opacity: 1;
        }
    }