@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');

:root{--blue:#060E35;}
:root{--green:#DDF472;}
:root{--light-green:#EEF4EE;}

body{font-family: 'Poppins', sans-serif; font-weight:400; color:var(--blue);}
body.formSteps{background-image:url("../img/bgForm.png"); background-size:cover; background-repeat:no-repeat;}

::-moz-selection{ color:#FFF; background:var(--blue);}
::selection{ color:#FFF; background:var(--blue);}

a:link,a:hover,a:active,a:visited{text-decoration:none;}

.font-small {font-size: 10px; color:grey;}

.fw-medium{font-weight:500!important;}
.fw-semibold{font-weight:600!important;}
.fw-bold{font-weight:700!important;}

.bg-blue{background-color:var(--blue);}
.bg-green{background-color:var(--green);}
.bg-light-green{background-color:var(--light-green);}

.text-blue{color:var(--blue);}

.radius-15{border-radius:15px;}
.radius-15-tl-tr{border-radius:15px 15px 0 0;}
.radius-15-tl-bl{border-radius:15px 0 0 15px;}
.radius-15-tr-br{border-radius:0 15px 15px 0;}

.noSelect{-webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;}
.showCursor{cursor:pointer;}

.w-95{width:95%}

h3{font-size:1.5rem; font-weight:700;}

/*header & footer*/
.header{transition:background-color .3s linear;}
.header.active{background-color:rgba(255,255,255,0.9);}
.header img{height:25px;}

.headerContent .numbers{line-height:1.2}
.headerContent .float-start{font-size:2rem;}
.imgHeader{width:45%; right:0; bottom:0;}

.footer img{height:30px}
.footer ul{font-size:0;}
.footer ul li{margin-right:15px; display:inline-block; font-size:1rem;}
.footer ul li:last-child{margin-right:0;}
.footer ul li a{color:var(--blue);}

.footerLine{border-bottom:1px solid #D4D4D8;}

/*content*/
.btnContent{padding:15px 15px 14px 15px; font-size:.85rem; color:var(--blue); line-height:1; border-radius:5px; transition:box-shadow .2s linear;}
.btnContent:hover{color:var(--blue);}

.steden ul{font-size:0;}
.steden ul li{margin:0 10px 10px 0; display:inline-block; font-size:.85rem;}
.steden ul li a{padding:8px 15px 8px 15px; display:inline-block; color:var(--blue); border-radius:20px; border:2px solid var(--blue);}
.steden ul li a:hover, .steden ul li a.active{color:var(--blue); border:2px solid var(--green);; background-color:var(--green);}

.voordelen ul{font-size:0; line-height:1;}
.voordelen ul li{padding: .3em 0 1em 40px; display:inline-block; font-size:1rem; background-image: url(../img/icoList.svg); background-repeat:no-repeat; background-size:20px 20px}

.usp{color:rgba(255,255,255,0.7);}
.usp img{width:40px;}
.usp h3{font-size:1.2rem;}

/*formulieren*/
#postcode form .d-table{border-radius:5px;}
#postcode form ::placeholder{color:var(--blue)!important; opacity:1;}
#postcode form :-ms-input-placeholder{color:var(--blue)!important;}
#postcode form ::-ms-input-placeholder{color:var(--blue)!important;}
#postcode form .form-control{font-size:.85rem; line-height:1; border-radius:5px 0 0 5px;}
#postcode form .form-control:focus{box-shadow:none;}
#postcode .btn{padding:18px 15px 18px 15px; font-size:.85rem; line-height:1; border-radius:26px 5px 5px 26px;}
#postcode .btn:focus{box-shadow: none;}

.formWrapper{background-image:url("../img/bgForm.png"); background-size:100% 100%; background-repeat:no-repeat;}
.formWrapper{padding-top:82px;}

.formProgress{line-height:1; border-radius:5px;}
.formProgressValue{padding-left:15px; padding-right:15px; border-radius:12px; background-color:rgba(255,255,255,0.82);}

.setKlantType{border:2px solid #E4E4E7; transition:border-color .3s linear;}
.setKlantType.active{border:2px solid var(--blue);}

.typeSyteem{font-size:.85rem; border:2px solid #E4E4E7; transition:border .3s linear;}
.typeSyteem.active{border:2px solid var(--blue);}
.typeSyteem .d-table-cell{line-height:1;}
.typeSyteem .d-table-cell:first-child{width:1%;}
.typeSyteem .d-table-cell div{width:20px; height:20px; border-radius:50%; border:2px solid #E4E4E7; transition:all .3s linear;}
.typeSyteem.active .d-table-cell div{border:2px solid var(--blue); background-color:var(--blue);}

.formContent img{width:40px;}
.formContent form ::placeholder{font-size:1rem!important; color:#E4E4E7!important; opacity:1;}
.formContent form :-ms-input-placeholder{font-size:1rem!important; color:#E4E4E7;}
.formContent form ::-ms-input-placeholder{font-size:1rem!important; color:#E4E4E7;}
.formContent form .form-control{border-radius:5px; border:2px solid #E4E4E7; transition:border .3s linear;}
.formContent form .form-control:focus{border:2px solid var(--blue); box-shadow:none;}
.formContent .btn{padding:15px 15px 14px 15px; font-size:.85rem; line-height:1; border-radius:5px; transition:box-shadow .2s linear;}
.formContent .btn:focus{box-shadow: none;}


@media(max-width:576px){
.headerContent{padding-left:calc(var(--bs-gutter-x) * .5); padding-right:calc(var(--bs-gutter-x) * .5);}
.headerContent.position-absolute, .headerContent .position-absolute{position:relative!important}
.imgHeader{width:100%; border-radius:15px;}
}

@media(max-width:768px){
.gutterHalf{--bs-gutter-x:1rem;}

/*header & footer*/
.header .col-8 img{height:20px;}

.footer ul{width:100%; text-align:center;}

/*formulieren*/
.formWrapper h1{font-size:1.25rem}
.formWrapper h2{font-size:1.15rem}

.setKlantType{font-size:.85rem;}

.formContent{min-height:250px;}
}

@media(min-width:768px){
html,body{width:100%; height:100%;}

/*header & footer*/
.footerCta .col-md-4{border-right:1px solid var(--blue);}
.footerCta .col-md-4:last-child{border-right:none;}

/*content*/
.steden ul{width:80%;}

.voordelen ul li{width:calc(50% - 15px);}
.voordelen ul li:nth-child(odd){margin-right:15px;}
.voordelen ul li:nth-child(even){margin-left:15px;}

.usp{border-right:1px solid rgba(255,255,255,0.15);}

/*formulieren*/
.formWrapper{padding-top:102px; height:100%;}
.d-table.formWrapper .d-table-row:last-child{height:1%;}
.d-table.formWrapper .d-table-row:nth-child(2) .d-table-cell{vertical-align:middle;}

.formContent img{width:60px;}
}

@media (min-width: 768px) and (max-width: 992px){
.headerContent h1{font-size:1.5rem}
.imgHeader{width:50%;}
}

@media(min-width:992px){
/*content*/
.btnContent:hover{color:var(--blue); -webkit-box-shadow:5px 5px 0px 0px rgba(0,0,0,0.05); box-shadow:5px 5px 0px 0px rgba(0,0,0,0.05);}

/*formulieren*/
.setKlantType:hover{border:2px solid var(--blue);}

.typeSyteem:hover{border:2px solid var(--blue);}
.typeSyteem:hover .d-table-cell div{border:2px solid var(--blue); background-color:var(--blue);}

.formContent .btn:hover, .formContent .btn:focus{-webkit-box-shadow:5px 5px 0px 0px rgba(0,0,0,0.05); box-shadow:5px 5px 0px 0px rgba(0,0,0,0.05);}
}

@media(min-width:1200px){
/*content*/
.steden ul{width:70%;}

/*formulieren*/
#postcode form .d-table{width:90%}

.formContent{height:452px;}
}

@media(min-width:1400px){
    .headerContent{top: -150px;}
/*content*/
.steden ul{width:60%;}

/*formulieren*/
#postcode form .d-table{width:100%}

.formContent{height:452px;}
}