.banner .splide__slide {
    position: relative;
    height: 100vh;
    min-height: 60rem;
}

.banner .splide__slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
}

@media (max-width: 992px) {
    .banner .splide__slide img.desktop {
        display: none;
    }
}

@media (min-width: 992px) {
    .banner .splide__slide img.mobile {
        display: none;
    }
}

.banner .splide__slide img.abottom {
    object-position: center bottom;
}

.banner .splide__slide .label {
    right: 16rem;
    bottom: 17.5rem;

    font-size: 2.4rem;
    line-height: 1em;
    font-weight: 400;

    padding: 1.5rem 3rem;
    position: absolute;
    background: #ffffff;
}

.banner .splide__pagination {
    right: 16rem;
    bottom: 14rem;
}

@keyframes bannerScroll {
      0% { transform: translateX(-50%) translateY(-20%) rotate(90deg); }
    100% { transform: translateX(-50%) translateY(20%) rotate(90deg); }
}

.banner [scroll] {
    color: #ffffff;

    left: 50%;
    bottom: 6rem;
    z-index: 2;
    font-size: 8rem;

    position: absolute;
    animation: bannerScroll 1s infinite alternate ease-out;
}


.about {
    background: #ffcc00;
    padding-top: 20rem;
}

.about h3 {
    font-size: 4.8rem;
    font-weight: 300;
    line-height: 1.2em;
    text-align: center;
}


.portfolio {
    margin: 18rem 0 0;
    padding: 0 0 16rem;
    position: relative;
}

.portfolio:after {
    z-index: 1;

    top: 35rem;
    left: 0;
    right: 0;
    bottom: 0;

    content: '';
    display: block;
    position: absolute;

    background: #f1f1f0;
}

.portfolio .splide {
    z-index: 2;
    position: relative;
    padding-bottom: 4rem;
}

.portfolio .splide__slide {
    height: 70rem;
}

.portfolio .splide__pagination {
    left: 0;
    bottom: 0;
}

.portfolio .splide__pagination button {
    background: #000000;
}

.portfolio .text {
    color: #000000;

    width: 50%;
    margin: 4.6rem 0;

    font-size: 2.1rem;
    line-height: 3.6rem;

    z-index: 2;
    position: relative;
}

.portfolio .button {
    z-index: 2;
    position: relative;
}


.solutions {
    margin-bottom: 15.6rem;
}

.solutions .splide {
    width: 65%;
    padding-right: 4rem;
}

.solutions .splide__slide {
    height: 126rem;
    max-height: 80vh;
}

.solutions .splide__slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.solutions .splide__pagination {
    right: 0;
    bottom: 0;
    flex-direction: column;
}
.solutions .splide__pagination button {
    background: #000000;
}

.solutions .text {
    color: #000000;
    margin: 0 0 4.6rem 6rem;

    font-size: 2.1rem;
    line-height: 3.6rem;
}

.solutions .button {
    width: min-content;
    margin: 0 0 0 6rem;
}


.history {
    padding: 15rem 0 18rem;

    font-size: 2.1rem;
    line-height: 1.65em;

    color: #000000;
    background: #ffcc00;
}

.history p {
    width: 45%;
    margin-right: 12rem;
}

.history .button {
    width: min-content;
}



/* hovers ********************************************************************/

@media (any-hover: hover) {

    .history .button:hover {
        color: #000000;
    }

}


/* responsive ****************************************************************/

@media (max-width: 1160px) {

    .banner .splide__slide img.aleft {
        object-position: left center;
    }

    .banner .splide__slide .label {
        right: 30px;
        bottom: 24.5rem;
    }

    .banner .splide__pagination {
        right: 30px;
        bottom: 8rem;
    }

    .about {
        padding-top: 10rem;
    }

    .about h3 {
        padding: 0 30px;
        font-size: 2.8rem;
    }

    .portfolio {
        margin: 8rem 0 0;
        padding: 0 0 6rem;
    }

    .portfolio:after {
        top: 20rem;
    }

    .portfolio .splide__slide {
        height: 35rem;
    }

    .portfolio .text {
        width: 100%;
    }

    .solutions {
        margin-bottom: 8.6rem;
    }

    .solutions .wrapper {
        flex-direction: column;
    }

    .solutions .splide {
        width: auto;
        margin-left: -30px;
        margin-right: -30px;
        padding-right: 0;
    }

    .solutions .splide__slide {
        height: 60rem;
    }

    .solutions .splide__pagination {
        right: 5px;
        bottom: 5px;
    }

    .solutions .text {
        margin: 4.6rem 0;
    }

    .solutions .button {
        margin: 0;
    }

    .partners h3 {
        font-size: 3.8rem;
    }

    .partners .splide__slide {
        width: 50%;
        height: 8rem;
    }

    .history {
        padding: 8rem 0 15rem;
    }

    .history .wrapper {
        align-items: flex-start;
        flex-direction: column;
    }

    .history p {
        width: 100%;
        margin-right: 0;
        margin-bottom: 4.6rem;
    }

}