@charset "utf-8";
/* CSS Document */

/*reset*/
*{margin:0; padding:0; outline:none; box-sizing:border-box;}
img,fieldset{border:0px; display:block;}
br.clear, div.clear{clear:both; font-size:0px;}
ul, ol{list-style:none;}
textarea, input.text, input[type="text"], input[type="button"], input[type="submit"], .input-checkbox, button{-webkit-appearance:none; border-radius:0;}

header, nav, article, aside, section, footer{display:block; overflow:hidden;}
header, section, footer{width:100%; height:auto; position:relative;}
section{padding: 48px 0;}


img{width: 100%; height:100%; object-fit:contain;}

/*template*/
html{width:100%; height:100%; font-size:62.5%;}
body{width:100%; height:100%; font-family:'Montserrat', sans-serif; font-size:1.4rem; line-height:1.628571; color:#31451E; overflow-x:hidden; overflow-y:scroll; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; font-weight:600;}


/*text*/
h1, h2, h3, h4, h5, h6{width:100%; font-family:'Montserrat', sans-serif; height:auto; font-weight:700; text-transform:uppercase;}
h1{font-size:2.0rem; margin-bottom:24px;}
h2{font-size:2.0rem; margin-bottom:24px;}
h3{font-size:2.0rem; margin-bottom:24px;}
h4{font-size:2.0rem; margin-bottom:16px;}
p{margin:0px 0px 32px 0px;}
p:last-of-type{margin:0px 0px 0px 0px;}
a, a{color:#5e9114; text-decoration:none;}
a:hover, a:hover {color:#C7DC93;}
small{font-size:1.2rem;}

@font-face {
    font-family: 'Font Awesome 6 Free';
    font-style: normal;
    font-weight: 400;
    font-display: auto;
    src: url('../fonts/fa-regular-400.eot');
    src: url('../fonts/fa-regular-400.eot?#iefix') format('embedded-opentype'),
         url('../fonts/fa-regular-400.woff2') format('woff2'),
         url('../fonts/fa-regular-400.woff') format('woff'),
         url('../fonts/fa-regular-400.ttf') format('truetype'),
         url('../fonts/fa-regular-400.svg#fontawesome') format('svg');
  }
  
  @font-face {
    font-family: 'Font Awesome 6 Free';
    font-style: normal;
    font-weight: 900;
    font-display: auto;
    src: url('../fonts/fa-solid-900.eot');
    src: url('../fonts/fa-solid-900.eot?#iefix') format('embedded-opentype'),
         url('../fonts/fa-solid-900.woff2') format('woff2'),
         url('../fonts/fa-solid-900.woff') format('woff'),
         url('../fonts/fa-solid-900.ttf') format('truetype'),
         url('../fonts/fa-solid-900.svg#fontawesome') format('svg');
  }
  
  @font-face {
    font-family: 'Font Awesome 6 Brands';
    font-style: normal;
    font-weight: 400;
    font-display: auto;
    src: url('../fonts/fa-brands-400.eot');
    src: url('../fonts/fa-brands-400.eot?#iefix') format('embedded-opentype'),
         url('../fonts/fa-brands-400.woff2') format('woff2'),
         url('../fonts/fa-brands-400.woff') format('woff'),
         url('../fonts/fa-brands-400.ttf') format('truetype'),
         url('../fonts/fa-brands-400.svg#fontawesome') format('svg');
  }

/*floats*/
.left{float:left;}
.right{float:right;}

/*main-container*/
main{width:100%; max-width:1920px; min-height:100vh; margin:0px auto;}
.container{max-width:1260px; margin:0px auto; padding: 0 24px; position:relative;}

/*generals*/
.button{display:block; width:fit-content; font-size:1.8rem; font-weight:600; color:white; text-transform:uppercase; background:#31451E; padding: 8px 32px; border-radius:12px;}
.button.alt{background:#C7DC93; color:#31451E;}
.button:hover{background:#C7DC93; color:#31451E;}
.button.full{width:100%; height:48px; line-height:48px; padding:unset; border-radius: 0px 0px 4px 4px;}
.button.full:hover{}
.button.outline{background:unset; border:4px solid white;}

.grid{display:grid; grid-template-columns:repeat(12,1fr); column-gap:48px;}
.padding{padding:24px;}
.round-corner{border-radius:12px;}
.border{border:2px solid greenyellow;}
.box-shadow{-webkit-box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.35); -moz-box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.35); box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.35);}


/*general image css*/
.image{width: 100%; aspect-ratio:4/3;}
.image img{width: 100%; height: 100%; object-fit:cover;}


/*colors and concditions*/
.bg-green{background:#5e9114;}
.bg-darkgreen{background:#31451E;}

.bg-darkgreen article *,
.bg-green article *:not(.usp p){color:white}
.bg-green a:not(a.button){color:#31451E;}


/*Grid controls*/
.block-1{grid-column:span 1;}
.block-2{grid-column:span 2;}
.block-3{grid-column:span 3;}
.block-4{grid-column:span 4;}
.block-5{grid-column:span 5;}
.block-6{grid-column:span 6;}
.block-7{grid-column:span 7;}
.block-8{grid-column:span 8;}
.block-9{grid-column:span 9;}
.block-10{grid-column:span 10;}
.block-11{grid-column:span 11;}
.block-12{grid-column:span 12;}

/*Breadcrumbs*/
.breadcrumbs{width:100%; height:32px;}
.breadcrumbs ol{display:flex; justify-content:flex-start;}
.breadcrumbs li,
.breadcrumbs li ,
.breadcrumbs li a span{font-size:1.2rem; line-height:32px; color:#5C5C5C;}

/*form*/
/*error message*/
.message.fail article h2,
.message.fail article p{color:red;}
.message.succes article h2,
.message.succes article p{color:green;}

.form-grid{display:grid; grid-template-columns:200px 1fr; gap:32px;}
.form-grid .wide{grid-column:span 2;}
/*checkboxes & switches*/
/*checkbox & radio*/
.form-control {font-size:1.4rem; font-family:'Open Sans', sans-serif;   display: grid; grid-template-columns: 24px auto; gap:12px;}
.form-control label{font-size:1.6rem; color:#4e0b70;}
input[type="radio"],
input[type="checkbox"] { -webkit-appearance: none; appearance: none; margin: 0; font: inherit; color:#4e0b70; width: 1.08em; height: 1.08em; border: 0.15em solid #707070; border-radius: 0.15em; transform: translateY(0.25em); display: grid; place-content: center;} 
input[type="radio"] {background-color: var(--form-background); margin: 0; border-radius: 50%; border: 0.15em solid #4e0b70;}
input[type="radio"]::before,
input[type="checkbox"]::before {content: ""; width: 0.65em; height: 0.65em; clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%); transform: scale(0); transform-origin: bottom left; transition: 120ms transform ease-in-out; box-shadow: inset 1em 1em var(--form-control-color); background-color:#ffd93d;}
input[type="radio"]::before {clip-path:unset; border-radius: 50%; transform-origin:unset; background-color:rgb(115,16,166);}
input[type="radio"]:checked::before,
input[type="checkbox"]:checked::before {transform: scale(1);}
input[type="checkbox"]:disabled,
input[type="checkbox"]:disabled,
input[type="radio"]:disabled{background:rgb(192,192,192); border:0.15em solid #707070;}

.form-grid input[type="text"],
.form-grid input[type="number"],
.form-grid input[type="date"],
.form-grid input[type="time"],
.form-grid select,
.form-grid textarea,
.form-grid input[type="datetime-local"]{width: 100%; height: 24px; font-family:'Open Sans', sans-serif; font-size: 1.6rem; line-height: 24px; padding: 16px; border-radius: 8px; border: 1px solid #707070; color: #7310A6; background: #ffffff;}
.form-grid textarea,
.form-grid select{height:unset;  padding:12px;}
.form-grid input[type="submit"]{border:0px; font-family:'Open Sans', sans-serif; font-size:1.6rem; font-weight:700; color:#fff7fb; background-color:#5e9114; padding:16px; border-radius:8px; text-decoration:none; float:right; cursor:pointer;}
/* Stijlen voor gefocusde input velden */
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
textarea:focus {border-color:#5e9114; outline: none; box-shadow: 0 0 5px rgba(78, 11, 112, 0.3); background-color: #fff7fb;}

select.red,
textarea.red,
input.red{border:1px solid red !important; color:red !important;}
label.red,
textarea.red::placeholder,
input.red::placeholder{color:red;}

/*sections*/
/*header*/
header{height:165px; position:relative; overflow:visible; z-index:12000;}
header .container{overflow:visible;}
.logo{aspect-ratio:93/53; height:212px; margin-bottom:-55px; z-index:5000;}
.logo img{width:100%; height:100%; object-fit:contain;}
header .grid nav{display:flex; justify-content:flex-end;}
header .grid nav ul{display:flex; justify-content:flex-end; align-self: flex-end;}
header .grid nav ul li{margin-right:10px; font-size:1.8rem; font-weight:700; text-transform:uppercase;}
header .grid nav ul li a{color:#31451E;}
header .grid nav ul li:after{content:'|'; padding-left:10px;}
header .grid nav ul li:hover a:not(header .grid nav ul li.cta a){color:#5e9114;}
header .grid nav ul li:last-child{margin-right:unset !important;}
header .grid nav ul li:last-child:after{content:unset; padding:unset;}
header .grid nav ul li.language{height:fit-content; margin:auto 24px auto 0;}
header .grid nav ul li.cta{height:fit-content; margin: auto 24px auto 0; line-height:unset;}
header .grid nav ul li.language img{width: 24px; height: 24px; object-fit:contain; margin: auto 0;}
header .grid .mobilelanguage{display:none;}
header .grid .menu{display:none;}


section.slider {position: relative; overflow: hidden; padding:unset;}
section.slider .background {width: 100%; aspect-ratio:160/69; width:100vw; z-index:0;}
section.slider .background img {width: 100%; height: 100%; object-fit: cover;}
section.slider .container{position: absolute; top:0; left:calc(50% - 24px); transform:translateX(-50%); height:100%; width:100%;}
section.slider .container .sticker{aspect-ratio:1/1; width:226px; position: absolute; top:24px; right:0;}
section.slider .container .sticker img{width:100%; height:100%; object-fit:contain;}

.card{padding:24px; background:#5e9114; border-radius:12px; height:fit-content; margin-top:calc(-48px + -48px);}
.card article{color:white; text-align:center;}
.card .title{text-transform:uppercase; font-size:2.0rem;}
.card .button{margin: 24px auto 0 auto;}

section.intro{overflow:visible;}

section.stripe.slideshow{padding-top:unset;}
section.stripe .slide-track{width: 100%; margin-bottom:48px;}
section.stripe .slide-track .image{width: 100%; aspect-ratio:2/1;}
section.stripe .slide-track .image img{width: 100%; height: 100%; object-fit:cover;}

section.stripe article q{font-weight:800; text-transform:uppercase; font-size:1.6rem; margin-bottom:24px; display:block;}

section.stripe .usp{text-transform: uppercase; font-weight:700; font-size:2.0rem; color:#31451E !important;}
section.stripe .usp strong{font-weight:600; display:block; color:white;}
section.stripe .background{aspect-ratio:2/1; width: 100%;}
section.stripe .background img{width: 100%; height: 100%; object-fit:cover;}
section.stripe.durable{padding-top:unset; padding-bottom:unset;}
section.stripe .slide-track .slide{position: relative;}
section.stripe.durable article{position: absolute; top:0; left:50%; transform:translateX(-50%);  height:100%; width: 100vw;  display:flex; justify-content:flex-start; align-items:flex-end; color:white; font-weight:800; font-size:2.5rem;}

section.houses .type .image{aspect-ratio:1/1 !important;}
section.houses .type article h3{font-weight:800; font-size:3.3rem; text-transform:uppercase; font-weight:700;}
section.houses .type article h3 span{display:block; font-weight:600; font-size:1.4rem;}
section.houses .type article ul{text-transform:uppercase; font-weight:600;}

section.stripe.map{padding-top:unset;}
section.stripe.map .background{margin-bottom:48px;}

section.contact{padding-top:unset; padding-bottom:unset;}
section.contact .image{aspect-ratio:377/250; width:754px; position:absolute; top:0; right:0;}
section.contact .grid article.block-4{height: 500px; padding-top:160px; text-transform:uppercase; font-size:2.0rem;}
section.contact .grid article.block-4 p{color:#31451E; font-weight:700;}

section.stripe.bg-darkgreen{text-align:center;}
section.stripe.bg-darkgreen .button{margin: 24px auto 0 auto;}
section.stripe.bg-darkgreen article h2{font-size:3.0rem;}
section.stripe.bg-darkgreen article p{font-weight:600; font-size:1.8rem;}

#voorzieningen article{align-self:center;}

section .button{margin:24px 0;}
section .image{width: 100%; aspect-ratio:4/3; margin-top:0;  margin-bottom:auto; overflow:hidden;}
section .image img{width: 100%; height: 100%; object-fit:cover;}

/*article content*/
article ol{list-style:decimal; margin:0px 0px 30px 20px;}
article ul{list-style:disc outside; margin:0px 0px 30px 20px;}
article.wide{grid-column:span 2;}
table, th,td{border:3px solid white; border-collapse:collapse; padding:4px;}
article table thead tr{font-size:2.0rem; font-weight:600; text-align:left;}
article table{width: 100%;}
article img{width: 100%; height:auto; object-fit:contain;}


/*Footer*/
footer{padding:48px 0; padding-bottom:128px;}
footer *{color:white;}
footer address{font-style: normal;}
footer .logo{aspect-ratio:38/9; height:54px; margin-bottom:24px;}
footer .logo img{width: 100%; height:100%; object-fit:contain;}
footer .partners{display:flex; justify-content:flex-start; margin-bottom:48px;}
footer .partners .logo:first-of-type{aspect-ratio:1/1; height:100px; margin-right:24px;}
footer .social-links{display:flex; justify-content:flex-start;}
footer .social-links a i{font-size:3.2rem;}
footer .social-links a:hover i{color:#C7DC93;}
footer a{display:block;}
footer a:hover{color:#C7DC93;}
footer a i{margin-right:12px;}
footer .copyright{text-align:left; margin-top:24px;}
footer .copyright,
footer .copyright * {font-size:1.4rem; color:#c4c4c4;}
footer .copyright a{margin-left:12px;}

/*tablet: 1220*/
@media only screen and (max-width:1220px) 
{
  section.stripe .usp{font-size:2.0rem;}
}

/*tablet: 768-1023*/
@media only screen and (max-width:1023px) 
{

  header{height:129px;}
  .logo{height:175px;}

  section.slider .container .sticker{width:180px;}

  section.intro .block-8{grid-column:span 7;}
  section.intro .card.block-4{grid-column:span 5;}

  section.contact .image{position: relative;}
  section.contact .grid article.block-4{padding-top:48px; padding-bottom:48px;  height:unset;}

  section.stripe .usp{font-size:2.0rem;}

  #location .block-9{grid-column:span 7;}
  #location .block-3{grid-column:span 5;}

  #benefits .block-6{grid-column: span 12;}

  #contact .block-4{grid-column:span 12;}

  .form-grid{grid-template-columns:1fr;}

}

/*mobile l: 427-767*/
@media only screen and (max-width:767px) 
{
    .form-grid{display:grid; grid-template-columns:1fr; gap:32px;}
    .form-grid .wide{grid-column:unset;}

    .logo{height:165px; margin-bottom:unset;}

    h2{font-size: 1.8rem;}

    header{overflow:visible;}
    header .grid nav{width:100%; height:auto; display:block; float:none; left:0; top:-800px; position:absolute; -webkit-transform:translateY(-140%); transform:translateY(-140%); -webkit-transition:-webkit-transform 0.5s, visibility 0s 0.5s; transition:transform 0.5s, visibility 0s 0.5s;}
    header .grid .menu{display:unset; display:block; text-align:right;}
    header .grid .menu a i{font-size:3.0rem; color:#31451E; line-height:165px;}    
    header .grid nav ul{width:100%; height:auto; display:block; position:relative; float:left; padding:24px; background:#31451E; margin-left:unset;}
    header .grid nav ul li:before{background:none;}
    header .grid nav ul li a i{display:none;}
    header .grid nav ul li{width:100%; height:auto; min-height:48px; line-height:unset; display:block; float:left; margin:0px; text-align:right; border-radius:unset;}
    header .grid nav ul li.language{min-height:24px;}
    header .grid nav ul li.language img{margin:unset; margin-right:0; margin-left:auto;}
    header .grid nav ul li:last-of-type{display:block; width:100%;}
    header .grid nav ul li:last-of-type a{margin-right:0; margin-left:auto; text-align:center; padding:0 8px; line-height:48px;}
    header .grid nav ul li a{color:white; height:48px; line-height:48px; margin:unset; border-right:unset;}
    header .grid nav ul li a:active,
    header .grid nav ul li a:hover{color:white;}
    header .grid nav ul li a.on{color:#C7DC93;}
    header .grid nav.open{width:100%; height:100vh; display:block; float:none; left:0px; top:165px; z-index:101; position:absolute; margin:0px !important; -webkit-transform:translateY(0%); transform:translateY(0%); -webkit-transition:-webkit-transform 0.5s; transition:transform 0.5s;}

    section.slider .container .sticker{width:150px;}

    .card{margin-top:unset; grid-row-start:1;}

    section.contact .image{position:relative; top:unset; right:unset; width:100vw;}

    section.contact .grid article.block-4{padding-top:unset; padding: 24px 0; height:unset; font-size:1.6rem;}

    section.stripe.bg-darkgreen article h2{font-size:2.4rem;}
    section.stripe.bg-darkgreen article p{font-size:1.6rem;}

.grid{gap:6px; row-gap:24px;}
section{padding:24px 0;}

section .block-1{grid-column:span 12 !important;}
section .block-2{grid-column:span 12 !important;}
section .block-3{grid-column:span 12 !important;}
section .block-4{grid-column:span 12 !important;}
section .block-5{grid-column:span 12 !important;}
section .block-6{grid-column:span 12 !important;}
section .block-7{grid-column:span 12 !important;}
section .block-8{grid-column:span 12 !important;}
section .block-9{grid-column:span 12 !important;}
section .block-10{grid-column:span 12 !important;}
section .block-11{grid-column:span 12 !important;}
section .block-12{grid-column:span 12 !important;}

footer .block-4,
footer .block-3{grid-column:span 12;}

footer{text-align:center; padding: 24px 0;}
footer .logo{margin:auto; margin-bottom:24px;}
footer .copyright{text-align:center;}
footer .partners{display:block;}
footer .partners .logo:first-of-type{margin:auto auto 24px auto;}
footer .social-links{justify-content:center;}
footer a:last-of-type i{margin-right:unset;}

section.slider .grid{grid-template-columns:1fr;}

section .button{width: 100%; text-align:center;}
.button{font-size:1.6rem;}

section.stripe .usp{font-size: 1.6rem;}


}

/*mobile s: 320-426*/
@media only screen and (max-width:426px)
{
.logo{height:120px;}
header {height:90px;}
header .grid .menu a i{line-height:90px;;}
header .grid nav.open{top:90px;}
section.slider .container .sticker{width:100px;}
    
}