* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; height: 100%; width: 100%; overflow: hidden; background: #fff }
html body {font-family: 'Inter', sans-serif; font-weight: 400; font-size: 50px; color: #313131; letter-spacing: 0; line-height: 1.75; background: #f8f8f8;}

body.museo { font-family: 'Roboto Slab', sans-serif }

.slider { width: 100%; height: 100%; margin: 0; position: absolute; }
.slick-list, .slick-track { height: 100% }
.slick-slide { margin: 0px; width: 100%; height: 100%; background: #fff }
.slick-slide { transition: all ease-in-out .3s; opacity: .2; }
.slick-active { opacity: .5; }
.slick-current { opacity: 1; }
.slick-arrow { position: absolute; z-index: 9; bottom: 0; display: none !important }
.slick-arrow.slick-next { right: 0 }
.slide-content, .slick-slide > div:first-child { width: 100%; height: 100% }
.slide-content { position: relative; padding: 60px 90px }
.slick-slide img { display: inline-block; max-width: 90vh; max-height: 90vh; }
.slide-content.orange { background: #ff6c00; color: #fff }
.slide-content.green { background: #00C45E; color: #fff }
.slide-content.blue { background: #01aef3; color: #fff }
.slide-content.purple { background: #b34262; color: #fff }

.prijs { display: block; line-height: 1; width: 700px; height: 700px; border-radius: 800px; position: absolute; padding: 325px 90px 0 0; top: -200px; right: -150px; text-align: center; background: #00C45E; color: #fff; }
.prijs .verkoopprijs { display: block; font-size: 260%; font-family: 'Roboto Slab'; margin-bottom: 10px }
.prijs .verkoopprijs span { font-size: 70% }
.prijs .nieuwprijs { font-size: 80%; font-family: 'Roboto Slab'; }
.prijs .nieuwprijs span {  }

ul.usp { margin: 0; list-style: none; font-size: 175%; text-align: center; line-height: 200%; font-family: 'Roboto Slab' }

.vertical-center { position: absolute; width: 100%; left: 50%; top: 50%; -webkit-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); padding: 60px 90px }
.align-center { text-align: center }

h1, h2, h3, h4 { font-family: 'Roboto Slab', sans-serif; font-weight: normal; line-height: 125%; margin: 15px 0 }
h1 { font-size: 200%; font-weight: 400 }
h2 { font-size: 100%; }
h1 span { font-weight: normal }

.small { font-size: 50% }

p strong { font-weight: 600 }

input { font-size: 40px; padding: 10px; border: 2px solid #eee; font-weight: 400; }
input::placeholder { opacity: 0.6 }
input:focus::placeholder { opacity: 0.2 }

*:focus { outline-color: #000; }

.smile-holder { position: absolute; top: 45px; right: 45px; width: 200px; height: 200px; }
.smile-holder img { max-width: 100% }

.specs { background: url('../images/diagonal-top-blue.svg') no-repeat 0 -200px; background-size: 100%; }
.specs h1 { max-width: 70%; font-weight: 800; margin: 0; max-height: 120px; overflow: hidden; color: #fff; }
.specs h2 { max-width: 75%; margin: 0; color: #fff; display: block; height: 120px; overflow: hidden;}
.specs table { width: 90%; line-height: 150%; margin-top: 110px; font-size: 70%; color: #313131;  border-collapse: collapse; margin-left: -15px; margin-right: -15px }
.specs table tr { line-height: 200%; background: #F8F8F8;  }
.specs table td {padding: 0 15px;}

.specs table tr:nth-child(2n) {background: #fff;}
.specs table tr:last-child { border-bottom: 0px solid #fff } 
.specs table .tablelabel { width: 35%;  font-weight: 600; text-transform: capitalize; }
.specs .smile-holder { top: auto; bottom: 45px }

.prijsbewust { background: url('../images/foto-prijsbewust.jpg') center center; background-size: cover }
.prijsbewust .overlay { position: absolute; bottom: 0; left: 0; width: 100%; background: url(../images/diagonal-bottom-orange.svg) no-repeat 0 0; background-size: 100%; margin: 0; padding: 120px 90px 50px 90px; color: #fff }
.prijsbewust h1 { margin: 0; font-family: 'Roboto Slab', sans-serif; }
.prijsbewust h1 strong, .prijsbewust p strong { font-weight: normal; font-family: 'Roboto Slab', sans-serif; }
.prijsbewust p { font-size: 90%; margin: 0; line-height: 1 }
.prijsbewust .smile-holder { bottom: 200px; top: auto }

.duurzaam { background: url(../images/diagonal-top-green.svg) #fff no-repeat left bottom; background-size: cover }
.duurzaam h1 { margin: 0; font-family: 'Roboto Slab', sans-serif; color: #fff }
.duurzaam h1 strong { font-weight: 900; font-family: 'Roboto Slab', sans-serif; }
.duurzaam .tekst-ballon { background: url(../images/speech-bubble.svg) no-repeat top left; background-size: cover; padding: 60px 110px 60px 60px; max-width: 60%; line-height: 125%; font-family: 'Roboto Slab', sans-serif; color: #000; margin-top: 75px }
.duurzaam ul.usp {line-height: 1; font-size: 110%; text-align: left; padding: 0}
.duurzaam ul.usp li {padding-left: 60px;background: url('../images/icon-check.svg') left center no-repeat; background-size: 35px; margin: 35px 0}

.duurzaam p {margin: 0 0 15px 0}
.duurzaam p strong { font-weight: normal; font-family: 'Roboto Slab', sans-serif; color: #00C45E }
.duurzaam .kwailiteitslabel { position: absolute; top: 315px; right: 45px }
.duurzaam .kwailiteitslabel img { max-width: 700px }

#f11msg { position: absolute; z-index: 999; background: #ddd; border: 1px solid #777; padding: 15px; font-size: 24px; font-weight: bold; font-family: Consolas; line-height: 1; bottom: 45px; left: 50%; transform: translateX(-50%); }

@media screen and (max-width: 1600px) {
    html body { font-size: 42px; }

    .prijs { width: 650px; height: 650px; padding-top: 360px; top: -250px }

    .smile-holder { width: 150px; height: 150px; }

    .specs {background-position: 0 -170px}
    .specs table { margin-top: 80px }
    .specs h1 { max-height: 100px; }
    .duurzaam .kwailiteitslabel img {max-width: 550px}
}

@media screen and (max-width: 1400px) {
    html body { font-size: 38px; }

    h1 {font-size: 180%}

    .specs {background-position: 0 -150px;}
    .prijs { width: 560px; height: 560px; padding-top: 340px; top: -265px; font-size: 90%; line-height: 150%; }
    .specs table { margin-top: 55px }
    .specs h1 { max-height: 70px; font-size: 150% }
    .specs h2 {font-size: 90%}

    .prijsbewust .overlay {padding-top: 75px}
    .prijsbewust p {font-size: 80%}
    .prijsbewust .smile-holder {bottom: 125px}

    .duurzaam .kwailiteitslabel {top: 240px}
    .duurzaam .kwailiteitslabel img {max-width: 500px}
    .duurzaam .tekst-ballon {font-size: 80%; background-size: contain; padding: 45px 110px 45px 60px;}

}

@media screen and (max-width: 1300px) {
    html body { font-size: 36px; }
}