/* ------------------------------ */
/* ---------- Animation --------- */
/* ------------------------------ */

/* Intro */
.section--intro {
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.section--intro + .section.section--light {
    margin-top: 0;
    padding-bottom: var(--spacing-12);
}

.section--intro > div {
    height: 100vh;
    height: 100svh;
}

.section--intro .content_container, .section--intro .content {
    height: 100%;
}

.section--intro .content_container {
    margin-right: auto;
    margin-left: auto;
}

.section--intro .content .typography--lead p {
    max-width: 1154px;
}


/* Animation sections */
.section__animation {
  position: relative;
  z-index: 2;
}

.section__animation--intro {
    overflow: hidden;
}

.section__animation--intro .content_container {
    position: relative;
    z-index: 2;
}

.section__animation--intro img.header__lines {
    position: absolute;
    z-index: 1;
    transform: translateX(-50%);
    max-width: unset;
}



/* Scroll */
.scroll-section {
    position: relative;
}

.scroll-section:nth-child(2) {
    height: calc(100vh + 20rem) !important;
}

.scroll-animation {
    position: fixed;
    aspect-ratio: 1 / 1;
    transform: translate(-50%, -50%);
    z-index: 1;
    pointer-events: none;

    opacity: 0;
    transition: opacity var(--transition-3);
    transition-delay: .5s;
}

.scroll-animation.is-ready {
    opacity: 1;
}

.scroll-animation-fixed {
  position: absolute !important;
  bottom: 0 !important;
  left: 50% !important;
  top: unset !important;
  right: unset !important;
}

.scroll-models {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: center;
}

.scroll-models div {
    height: 100%;
    width: 20%;
    position: relative;
}

.scroll-models img {
    position: absolute;
    bottom: 0;
    left: 50%;
    height: 100%;
    transform: translateX(-50%);
}



/* ------------------------------ */
/* -------- Media Queries ------- */
/* ------------------------------ */

@media all and (min-width: 992px) {

    .scroll-animation {
        left: 73%;
        top: 55%;
    }

    .scroll-section:nth-child(3) {
        height: calc(100vh + 4rem) !important;
    }

}


@media all and (min-width: 1400px) {

    .section__animation--intro img.header__lines {
        width: 1700px;
        top: -140px;
        left: calc(50% + 42px);
    }

}


@media all and (min-width: 1600px) {

    .section--intro > div {
        min-height: 800px;
    }

    .section__animation--intro .text {
        max-width: 780px;
    }

}


@media all and (min-width: 1600px) and (min-height: 850px) {

    .scroll-animation {
        width: 710px;
    }

    .scroll-animation-fixed {
        transform: translate(-50%, calc(50% - 10px));
    }

    .section__animation--lead .content_container {
        padding-bottom: calc(260px + var(--spacing-11)) !important;
    }

    .scroll-models {
        Height: 260px;
        width: 1372px;
    }

    .scroll-models div {
        top: 1px;
    }

}


@media all and (min-width: 1600px) and (max-height: 849.98px) and (min-height: 730px) {

    .scroll-animation {
        width: 608px;
    }

    .scroll-animation-fixed {
        transform: translate(-50%, calc(50% - 9px));
    }

    .section__animation--lead .content_container {
        padding-bottom: calc(223px + var(--spacing-11)) !important;
    }

    .scroll-models {
        height: 223px;
        width: 1100px;
    }

}


@media all and (min-width: 1600px) and (max-height: 729.98px) {

    .scroll-animation {
        width: 512px;
    }

    .scroll-animation-fixed {
        transform: translate(-50%, calc(50% - 8px));
    }

    .section__animation--lead .content_container {
        padding-bottom: calc(188px + var(--spacing-11)) !important;
    }

    .scroll-models {
        height: 188px;
        width: 900px;
    }

}


@media all and (max-width: 1599.98px) and (min-width: 1400px) {

    .section--intro > div {
        min-height: 750px;
    }

    .section__animation--intro .text {
        max-width: 760px;
    }

}


@media all and (max-width: 1599.98px) and (min-width: 1400px) and (min-height: 750px) {

    .scroll-animation {
        width: 608px;
    }

    .scroll-animation-fixed {
        transform: translate(-50%, calc(50% - 9px));
    }

    .section__animation--lead .content_container {
        padding-bottom: calc(223px + var(--spacing-11)) !important;
    }

    .scroll-models {
        height: 223px;
        width: 1100px;
    }

}


@media all and (max-width: 1599.98px) and (min-width: 1400px) and (max-height: 749.98px) and (min-height: 640px) {

    .scroll-animation {
        width: 512px;
    }

    .scroll-animation-fixed {
        transform: translate(-50%, calc(50% - 8px));
    }

    .section__animation--lead .content_container {
        padding-bottom: calc(188px + var(--spacing-11)) !important;
    }

    .scroll-models {
        height: 188px;
        width: 900px;
    }

}


@media all and (max-width: 1599.98px) and (min-width: 1400px) and (max-height: 639.98px) {

    .scroll-animation {
        width: 448px;
    }

    .scroll-animation-fixed {
        transform: translate(-50%, calc(50% - 7px));
    }

    .section__animation--lead .content_container {
        padding-bottom: calc(165px + var(--spacing-11)) !important;
    }

    .scroll-models {
        height: 165px;
        width: 780px;
    }

}


@media all and (max-width: 1399.98px) and (min-width: 1240px) {

    .section--intro > div {
        min-height: 700px;
    }

    .section__animation--intro img.header__lines {
        width: 1615px;
        top: -133px;
        left: calc(50% + 40px);
    }

    .section__animation--intro .text {
        max-width: 670px;
    }

}


@media all and (max-width: 1399.98px) and (min-width: 1240px) and (min-height: 700px) {

    .scroll-animation {
        width: 576px;
        margin-top: 1px;
    }

    .scroll-animation-fixed {
        transform: translate(-50%, calc(50% - 9px));
    }

    .section__animation--lead .content_container {
        padding-bottom: calc(212px + var(--spacing-11)) !important;
    }

    .scroll-models {
        height: 212px;
        width: 1040px;
    }

}


@media all and (max-width: 1399.98px) and (min-width: 1240px) and (max-height: 699.98px) and (min-height: 620px) {

    .scroll-animation {
        width: 512px;
    }

    .scroll-animation-fixed {
        transform: translate(-50%, calc(50% - 8px));
    }

    .section__animation--lead .content_container {
        padding-bottom: calc(188px + var(--spacing-11)) !important;
    }

    .scroll-models {
        height: 188px;
        width: 900px;
    }

}


@media all and (max-width: 1399.98px) and (min-width: 1240px) and (max-height: 619.98px) {

    .scroll-animation {
        width: 448px;
    }

    .scroll-animation-fixed {
        transform: translate(-50%, calc(50% - 7px));
    }

    .section__animation--lead .content_container {
        padding-bottom: calc(165px + var(--spacing-11)) !important;
    }

    .scroll-models {
        height: 165px;
        width: 800px;
    }

}


@media all and (max-width: 1239.98px) and (min-width: 768px) {

    .scroll-animation-fixed {
        transform: translate(-50%, calc(50% - 8px));
    }

}


@media all and (max-width: 1239.98px) and (min-width: 992px) {

    .section--intro > div {
        min-height: 650px;
    }

    .section__animation--intro .text {
        max-width: 540px;
    }

    .section__animation--intro img.header__lines {
        width: 1445px;
        top: -119px;
        left: calc(50% + 36px);
    }

}


@media all and (max-width: 1239.98px) and (min-width: 992px) and (min-height: 650px) { 

    .scroll-animation {
        width: 512px;
    }

    .scroll-animation-fixed {
        transform: translate(-50%, calc(50% - 8px));
    }

    .section__animation--lead .content_container {
        padding-bottom: calc(188px + var(--spacing-11)) !important;
    }

    .scroll-models {
        height: 188px;
        width: 900px;
    }

}


@media all and (max-width: 1239.98px) and (min-width: 992px) and (max-height: 649.98px) {

    .scroll-animation {
        width: 448px;
    }

    .scroll-animation-fixed {
        transform: translate(-50%, calc(50% - 7px));
    }

    .section__animation--lead .content_container {
        padding-bottom: calc(165px + var(--spacing-11)) !important;
    }

    .scroll-models {
        height: 165px;
        width: 780px;
    }

}


@media all and (max-width: 991.98px) {

    .scroll-animation {
        top: 50%;
        left: 50%;
    }

    .scroll-section:nth-child(3) {
        height: 100vh !important;
    }

}


@media all and (max-width: 991.98px) and (min-width: 768px) {

    .scroll-animation {
        width: 512px;
    }

    .scroll-animation-fixed {
        transform: translate(-50%, calc(50% - 8px));
    }

    .section__animation--lead .content_container {
        padding-bottom: calc(188px + var(--spacing-11)) !important;
    }

    .scroll-models {
        height: 188px;
        width: 900px;
    }

    .section__animation--intro {
        padding-top: calc(var(--spacing-12) * 1.3);
    }

    .section__animation--intro img.header__lines {
        width: 1275px;
        top: -105px;
        left: calc(50% + 32px);
    }

}


@media all and (max-width: 767.98px) and (min-width: 576px) {

    .scroll-animation {
        width: 448px;
    }

    .scroll-animation-fixed {
        transform: translate(-50%, calc(50% - 7px));
    }

    .section__animation--lead .content_container {
        padding-bottom: calc(165px + var(--spacing-11)) !important;
    }

    .scroll-models {
        height: 165px;
        width: 780px;
    }

    .section__animation--intro {
        padding-top: calc(var(--spacing-12) * 1.2);
    }

    .section__animation--intro img.header__lines {
        width: 1190px;
        top: -125px;
        left: calc(50% + 29px);
    }

}


@media all and (max-width: 575.98px) {

    .section__animation--intro {
        padding-top: calc(var(--spacing-12) * 1.3);
    }

}


@media all and (max-width: 575.98px) and (min-width: 414px) {

    .scroll-animation {
        width: 384px;
    }

    .scroll-animation-fixed {
        transform: translate(-50%, calc(50% - 6px));
    }

     .section__animation--lead .content_container {
        padding-bottom: calc(141px + var(--spacing-11)) !important;
    }

    .scroll-models {
        height: 141px;
        width: 660px;
    }

    .section__animation--intro img.header__lines {
        width: 1105px;
        top: -84px;
        left: calc(50% + 27px);
    }

}


@media all and (max-width: 413.98px) {

    .scroll-animation {
        width: 320px;
    }

    .scroll-animation-fixed {
        transform: translate(-50%, calc(50% - 5px));
    }

    .section__animation--lead .content_container {
        padding-bottom: calc(118px + var(--spacing-11)) !important;
    }

    .scroll-models {
        height: 118px;
        width: 540px;
    }

    .section__animation--intro img.header__lines {
        width: 1020px;
        top: -84px;
        left: calc(50% + 25px);
    }

}


/*
@media all and (max-width: 991.98px) and (max-height: 500px) and (orientation: landscape) {

    .scroll-animation {
        width: 340px;
    }

    .scroll-models {
        height: 100px;
        width: 700px;
    }
    
}
*/