.menu-height {
    height: 20rem;
}

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

.solutions p {
    font-size: 2.1rem;
    font-weight: 300;
    line-height: 1.65em;
    margin-bottom: 4rem;
}

.solutions p:last-child {
    margin-bottom: 0rem;
}

.solutions h3 {
    font-size: 4.8rem;
    font-weight: 400;
    line-height: 1.2em;
}

.solutions .text {
    width: 60%;
    margin-right: 12rem;
}

.solutions .splide {
    margin-top: 20rem;
}

.solutions .splide__slide {
    height: 80vh;
    background: black;
}

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

.solutions .splide__pagination {
    right: 16rem;
    bottom: 12rem;
}

.compare {
    position: relative;
}

.compare .after {
    position:absolute;
    width:50%;
    height:100%;
    top:0;
    left:0;
    overflow:hidden;
    z-index: 2;
}

.compare .after img {
    width: 100vw;
}

.compare .resizer {
    z-index: 5;

    display:flex;
    cursor: pointer;
    position:absolute;
    align-items:flex-end;

    top:0;
    left:50%;
    width:4px;
    height:100%;
    background:white;

    -ms-touch-action: pan-y;
        touch-action: pan-y;
}

.compare .resizer i {
  color: #000000;
  background: #ffcc00;

  display:flex;
  position:absolute;
  align-items:center;
  justify-content:center;

  width:6rem;
  height:6rem;
  margin: 0 0 4rem calc(-3rem + 2px);

  font-size: 2rem;
  border-radius:50%;

  border: 2px solid white;
}


.portfolio {
    padding: 20rem 0;

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

    color: #000000;
    background: #f1f1f0;
}

.portfolio p {
    width: 60%;
    margin-left: 12rem;
}

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


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

@media (any-hover: hover) {

}



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

@media (max-width: 1160px) {

    .solutions {
        padding-top: 10rem;
    }

    .solutions .text {
        width: 100%;
        margin: 0 0 4.6rem;
    }

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

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


    .solutions .splide {
        margin-top: 10rem;
    }

    .solutions .splide__slide {
        height: 45rem;
    }

    .solutions .splide__pagination {
        right: 30px;
        bottom: 3rem;
    }

    .portfolio {
        padding: 10rem 0 15rem;
    }

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

    .portfolio p {
        width: 100%;
        margin-left: 0;
        margin-bottom: 4.6rem;
    }

    .portfolio .button {
        order: 2;
    }

}