@charset "utf-8";

/* ===== Algemene css ===== */
html{box-sizing:border-box;}
*.*::before, *::after {box-sizing:inherit;}
html{font-size:100%; line-heigth: 1.5; -webkit-text-size-adjust:100%; text-size-adjust: 100%; scrollbar-gutter: stable;}
body {margin:0; font-family: sans-serif;color: #222; background-color: #CCC;}

img, picture, video, canvas, svg {display:block; max-width:100%;height:auto;}

button, input, select, textarea {font:inherit;color:inherit;}

a:link{color:#000;text-decoration:none;}
a:visited{text-decoration:none;color: black;outline:0px;}
a:hover{text-decoration:none;color:#00F; outline:0px;}
a:active{text-decoration:none;outline:0px;}
a:focus-visible{outline:0px solid; outline-offset: 0px}

[hidden]{display:none !important;}

ul, ol{text-align:left;margin: 0 0 1rem;padding-left:1em;}
nav ul, nav ol{list-style:none;list-style-image:none;margin:0;padding:0;}

table{border-collapse:collapse;border-spacing:0;}
td{vertical-align:top;}

hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding: 0;}
small{font-size:85%;}
sub, sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline; }
sup{top:-0.5em;}
sub{bottom:-0.25em;}

@media print{*{background:transparent !important;color: #000 !important;text-shadow:none ! !important; box-shadow:none !important;}
a, a:visited{text-decoration:underline;}

pre, blockquote{border:1px solid #999;page-break-inside:avoid;}
thead{display:table-header-group;}
tr, img{page-break-inside: avoid;}

@page{margin:0.5cm;}
img{max-width: 100% !important;}
p, h2, h3 {orphans:3;widows:3;vertical-align:top;}
h2, h3{page-break-after:avoid;}
}

.hidden{display:none !important;visibility:hidden;}
.visuallyhidden{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;}
.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus{clip:auto;height:auto;margin:0;overflow:visible;position:static;width:auto;}
.invisible{visibility:hidden;}

h3 {font-size: 16px}

/* ===== Flow-root, logo,navigatie (header sectie 1) ===== */
.flow-root {display: flow-root; width:100%;margin:auto;background-color: #FFF;}
 .img-l {width:100%;height:auto;display: block;margin:2% 10% 2% 2%;}
.brand {display: block;}
.wrapper-topnav {display: grid; grid-template-columns: 20% 1fr; align-items: center; gap: 20px; width: 100%;}
.topnav {display: flex; justify-content: flex-begin; align-items: center; background-color:#FFF;margin-left:1%;padding-top:5%;}
.topnav a {padding: 14px 40px; font-size: 18px; color: black;}
.active {background-color: #FFF; color: black;}
.dropdown {position: relative;}
.dropbtn {padding: 14px 40px;}
.dropdown .dropbtn {border: none; outline: none; background-color: inherit; font-family: inherit;font-size:18px;}
.dropdown-content {display: none; position: absolute; top:100%; left: 0; background-color: rgba(0,153,255,1);min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);z-index: 10;color:white;}
.dropdown-content a {color: white; padding-left:15px; display: block; text-align: left;}
.topnav a:hover, .dropdown:hover .dropbtn {background-color: #009; color: white;}
.dropdown-content a:hover {background-color: #03C;color: white;}
.dropdown:hover .dropdown-content {display: block;}
.topnav .icon {display: none; cursor:pointer;}

.wrapper-kw{display:flex; width:100%;}
#klantwaardering {flex:1; background-color: #36C;text-align:left;font-size:11px; color:#FFF;padding-left:1%;}
#reviews {flex:1; background-color: #36C;text-align:right;font-size:11px; color:#FFF;clear:both;padding-right:1%;}
.checked {color:#FC0;}

@media only screen and (max-width: 600px) {
.wrapper-topnav {grid-template-columns: auto auto;}
.img-l {width:65%;}
.topnav {display: block;margin:0%;padding-left:1%;}
.topnav a, .dropdown .dropbtn {display: none;}
.topnav .icon {display: block; color: black; font-size:36px;padding:1px 8px;border: groove #09F;border-radius:12px;background-color:white;float: right; margin-left:1%;}
.topnav.responsive {position:absolute; left:0; background-color:rgba(0,153,255,1); width:99%;top:28%;z-index:999;}
.topnav.responsive .icon {position: absolute;right: 0;top: 0%;color:black;background-color:white;border-style:groove;border-color:black;font-size:30px;padding:4px 12px;}
.topnav.responsive a {display: block;text-align: left;padding:10px 4px;color:white;}
.topnav.responsive .dropdown {float: none;}
.topnav.responsive .dropdown-content {position:relative;}
.topnav.responsive .dropdown .dropbtn {display:block; color: #FFF;width:100%;padding:10px 4px;text-align:left;}

}

@media only screen and (min-width: 600px) and (max-width: 768px) {
.topnav a {padding: 10px 10px; font-size:16px;}
.active {background-color: #FFF; color: black;}
.dropdown .dropbtn {font-size: 16px; padding: 10px 10px;padding-left: 20px;}
.dropdown-content a {float: none; padding: 10px 16px;}
}

@media only screen and (min-width: 768px) and (max-width: 992px) {
.wrapper-topnav {grid-template-columns: auto auto;}
.img-l {width:60%;height:auto;}
.topnav {display: block;margin:0%;padding-left:1%;}
.topnav a, .dropdown .dropbtn {display: none;}
.topnav .icon {display: block; color: black; font-size:28px;padding:6px 12px;border: groove #09F;border-radius:12px;background-color:white;float: right; top:5%; margin-left:22%;}
.topnav.responsive {position:absolute; left:0; background-color:rgba(0,153,255,1); width:99%;top:20%;z-index:999;}
.topnav.responsive .icon {display:block; position: absolute; right: 0;top: 0;color:black;background-color:white;border-style:groove;border-color:black;font-size:36px;padding:4px 12px;}
.topnav.responsive a {display: block;text-align: left;padding:10px 4px;color:white; font-size: 18px;}
.topnav.responsive .dropdown {float: none;}
.topnav.responsive .dropdown-content {position:relative;}
.topnav.responsive .dropdown .dropbtn {display:block; color: #FFF;width:100%;padding:10px 4px;text-align:left;}
}

@media only screen and (min-width: 992px){
#klantwaardering {font-size:12px;}
#reviews {font-size:12px}
}

/* ===== Modal, Welkom (header slot) ===== */
.modal {display: none; position: fixed; z-index: 1; padding-top: 100px; left: 0; top: 0; width: 100%; overflow: auto;}
.modal-content {background-color: #fefefe;margin: auto;padding: 20px; border: 1px solid #888;width: 80%;}
.close-m {color: #aaaaaa;float: right;font-size: 28px;font-weight:bold;}
.close-m:hover,.close-m:focus {color: #000;cursor: pointer;}
.div-m {background-color: white;color: white;border-radius:12px;}
.div-m strong {font-size:12px;}
#myBtn-m{background-color:#FFF;font-size:12px;color:#03C}
#rcorners-m {border-radius:10%}

strong {color: #FFF;}
h3.title2 {color: #FFF;}
h1.title2 {color: #FFF; font-size:16px;}

@media only screen and (max-width: 600px) {
.wrapper-head2, #header2 {float:left;clear:both;width:100%;background-color: #dbdbdb; }
.div-m {margin-left:63%; width:35%; position:absolute;z-index:1;font-size:14px; text-align:center;padding-left:1%;padding-right:1%;padding-bottom:1%; margin-top:12%;padding-top:1%;background-color: rgba(0,153,255,.8);color:white;}
.div-m strong{font-size:14px;}
.modal {padding-top: 0.5%;}
.modal-content {width: 88%; text-align:left;color:black;}
#myBtn-m{font-size:14px;padding:5%;border-radius:12px;}
.top-right {position: absolute;top: 2%; right: 10%;}
.img-w{width:100%; display:none;}
.img-w2{width:100%;height:auto;}
.center {margin: auto; width: 85%;}
#welkom {float:left;width:96%;background-color: #F8F8F8; font-size:14px;font-weight:normal;font-style:normal;text-align:left;padding: 0 1%;margin:1%;}

h3.title2 {color:#00F}
h1.title2 {color:#00F}

}

@media only screen and (min-width: 600px) and (max-width: 768px) {
.wrapper-head2, #header2 {float:left;clear:both;width:100%;background-color: #DBDBDB;}
.img-w {width:100%;display:none;}
.img-w2{width:100%;height:auto;}
.center {margin: auto; width: 65%;}
.top-right {position: absolute;top: 2%; right: 10%;}
.div-m {margin-left:75%; width:20%; position:absolute;z-index:1;font-size:12px; text-align:center;background-color:#FFF;padding-left:1%;display:none;}
.modal {z-index: 2; padding-top: 17%;}
.modal-content {padding: 2%;margin-left:18%; width: 60%; text-align:left;color:black;}
#welkom {float:right;clear:none;width:37%;color: #FFF; margin-bottom: 1.5%;font-size:14px;font-weight: normal;font-style: normal;text-align:left;margin-left:55%;position:absolute;z-index:1;padding-left:1.25%;padding-right:1.25%;background-color: rgba(0,153,255,0.9);margin-top:-42.5%;}

}

@media only screen and (min-width: 768px) and (max-width: 992px) {
.wrapper-head2, #header2 {float:left;clear:both;width:100%;background-color: #DBDBDB;}
.img-w {width:100%;height:auto;}
.img-w2 {display:none;}
.top-right {position: absolute;top: 2%; right: 14%;}
.center {margin: auto; width: 65%;}
#welkom {float:left;width:35%;color: #FFF; margin-bottom: 1.5%;font-size:12px;font-weight: normal;font-style: normal;text-align:left;margin-left:0.25%;;position:absolute;z-index:1;padding-left:0.5%;padding-right:0.5%;background-color: rgba(0,153,255,0.9);margin-top:-25%;}
.div-m {margin-left:70%; width:27%; position:absolute;z-index:4;font-size:14px; text-align:center;background-color:rgba(0,153,255,.8);padding-left:.75%;padding-bottom:3%;margin-top:5%;}
.div-m strong {font-size:20px;}
.modal {z-index: 4; padding-top: 10%;}
.modal-content {padding: 2%;margin-left:20%;width: 60%; text-align:left;color:black;}
#myBtn-m{background-color:#FFF;font-size:20px;padding-left:5%;padding-right:5%;margin-right:2%;border-radius:12px;}
	
}

@media only screen and (min-width: 992px) {
.wrapper-head2, #header2 {float:left;clear:both;width:100%; background-color:#DBDBDB;}
.img-w {width:100%; display:block; float:left;height:auto;}
.img-w2 {display:none;}
#welkom {float:right;clear:none;width:18%;color: #FFF; margin-bottom: 1.5%;font-size:14px;font-weight: normal;font-style: normal;text-align:left;margin-left:3.5%;;position:absolute;z-index:1;padding-left:1.25%;padding-right:1.25%;margin-top:1%;background-color: rgba(0,153,255,0.9);}
.div-m {margin-left:75%; margin-top:12%; width:20%; position:absolute;z-index:2;font-size:12px; text-align:center;background:rgba(0,153,255,.9);padding:0.5%;padding-bottom:2.75%;}
.div-m strong {font-size:20px;}
.modal {display: none; position: fixed; z-index: 2; padding-top: 2%; left: 0; top: 0; width: 100%;overflow: auto;}
.modal-content {padding: 1%;margin-left:30%;width: 35%; text-align:left;color:black;}
#myBtn-m{background-color:#FFF;font-size:20px;padding-top:5%;padding-bottom:5%;border-radius:12px;}

}

/* ===== 2, 3 en 4 kolommen en main css ===== */
main {background-color: rgba(0,153,255,0.5);}
.colnog {display:flex; flex-wrap: wrap; width:100%;background-color: #FFF; box-sizing:border-box;}
.colwol {display:flex; flex-wrap: wrap; width:100%;background-color: rgba(0,153,255,0.5); gap: 0.25%; padding: 0.25%; box-sizing:border-box;}
.wolcol {background-color: #FFF;text-align:left;color: #000;font-size:14px; flex: 0 0 40%;padding-left:8%;padding-right:2%}
.wolcol-1{background-color: #FFF;text-align:left;color: #000;font-size:14px; flex: 1;padding-left:0.5%;padding-right:0.5%;}
.wolcol-2{background-color: #FFF;text-align:left;color: #000;font-size:14px; flex: 0 0 40%;text-align:left;padding-left:2%;padding-right:2%;padding-bottom: 1%;}
.wolcol-3{background-color: #FFF;text-align:left;color: #000;font-size:14px; flex: 0 0 29.3333%;text-align:left;padding-left:2%;padding-right:2%;}
.wolcol-3 a {color: #00C;}
.img-wl, .img-c2 {width:100%;float:left;height:auto;padding-top:1%;}
h2.title2 {font-size: 16px; color: #FFF;}
h2.title, h3.title {font-size: 16px; color:#00C; text-align:center;}
.img-d {width:100%;height:auto;}
.img-w3 {width:49%;float:left;height:auto;padding-top:1%;padding-right:1%;padding-bottom:0.5%;}
.img-tl {width:49%;float:left;height:auto;padding-top:1%;padding-right:1%;}
.div-wol {float:left; width:97%;text-align:left;clear:none;padding-left:.25%; padding-right:.25%;border-color:#00C;border-style: solid;font-size:14px}
.div-wol ul {padding:0%;margin:0%;}
.div-wol li {display:inline-block;margin-right:1.5%;}

.col2 {display:grid; align-items: stretch; background-color: rgba(0,153,255,0.5); grid-template-columns: 19.95% 29.95% 19.95% 29.95%; padding-bottom:0.25%; padding-right:0.10%;}
.pair {display: grid; grid-template-columns: 19.95% 29.95%; align-items: stretch;}
.col2-image {background-color: #FFF;width:100%;margin-left:1%;padding-top:5%;padding-left:1%;}
.col2-tekst {background-color: #FFF;padding-left:2%;padding-right:2%;text-align:left;font-size:14px;}
#myBtn-zvw{background-color:#FFF;font-size:14px;padding-left:5%;padding-right:5%;margin-right:2%;border-radius:12px;color:#00C;font-weight: bolder;margin-left:25%;border-style: groove;border-color: #09F;}

strong {font-size: 14px;}

@media only screen and (max-width: 600px) {
.wolcol {background-color: #FFF;text-align:left;color: #000;font-size:13px; flex: 0 0 96%;padding-left:2%;padding-right:2%;}
.wolcol-1, .wolcol-2 {background-color: #FFF;text-align:left;color: #000;flex-basis: 100%;margin-bottom: 0.5%; padding-left: 1%; padding-right:1%;}
.wolcol-2 {display:none;}
.wolcol-3 {flex-basis: 96%;}
.img-w3 {width:49%;float:left;height:auto;padding-top:1%;padding-right:1%;}
.col2,.pair {grid-template-columns: 1fr;background-color: rgba(0,153,255,0.5);}
.col2-image {padding-left:0.5%; padding-right:0.5%;height:auto;background-color: #FFF; width:97%;padding-top:1%;margin-right:1%;}
.col2-tekst {margin-left:0.75%;margin-right:0.75%; margin-bottom: 0.75%;padding-left:1%; padding-right:1%;background-color: #FFF;}

 }
@media only screen and (min-width: 600px) and (max-width: 768px) {
.wolcol{flex: 0 0 48%;background-color: #FFF;color:black;font-size:12px;padding-left:1%;padding-right:1%}
.wolcol-1{flex-basis:45%;background-color: #FFF;color:black;font-size:12px; padding-left: 1%; padding-right: 1%; margin-bottom:0.25%;} 
.wolcol-2, .div-wol{font-size:13px;}
.img-w3 {width:49%;float:left;height:auto;padding-top:1%;padding-right:1%;padding-bottom:10%;}
.img-tl {width:49%;float:left;height:auto;padding-top:1%;padding-right:1;padding-bottom:10%;}
.col2 {grid-template-columns: 40% 60%; background-color: rgba(0,153,255,0.5);}
.col2-image {height:auto; width:100%;background-color: #FFF;padding-top:5%;padding-left:1%;padding-right:1%;margin-bottom:0.40%;}
.col2-tekst {margin-right: 0.5%; margin-bottom:0.25%;padding-left:1%; padding-right:1%; background-color: #FFF;}

strong{font-size:13px;}
 
 }
@media only screen and (min-width: 768px) and (max-width: 992px) {
.wolcol {background-color: #FFF;text-align:left;color: #000;font-size:14px; flex: 0 0 46%;padding-left:2%;padding-right:2%;}
.wolcol-1{flex-basis: 47%;background-color: #FFF;color:black;font-size:14px;padding-left:1%;padding-right:1%; margin-bottom:0.25%;}
.img-w3 {width:49%;float:left;height:auto;padding-top:1%;padding-right:1%;padding-bottom:10%;}
.img-tl {width:49%;float:left;height:auto;padding-top:1%;padding-right:1;padding-bottom:10%;} 
.wolcol-2, .div-wol{font-size:12px;}
.col2 {grid-template-columns: 40% 60%; background-color: rgba(0,153,255,0.5);}
.col2-image {height:auto; width:100%;background-color: #FFF;padding-top:5%%;padding-left:1%;padding-right:1%; padding-bottom:2%;margin-bottom:0.30%;}
.col2-tekst {margin-right: 0.5%; margin-bottom:0.25%;padding-left:1%; padding-right:1%; background-color: #FFF;}

 }

/* ====== contact, voorwaarden, privacy en disclaimer (footer) ====== */
address {text-decoration: none; font-style: normal;}
.colcontact {display:flex;flex-wrap: wrap; width:100%;}
.contactcol-1 {flex: 0 0 32.3333%;background-color: #006;text-align:left;padding-left:1%;color:white;font-size:14px;}
.style-con:link {color:white}
.style-con:hover {color:white}

.mainelf {float:left;clear:both;width:100%;background-color: #F0FFFF;}
.rowelf {background-color:#DBDBDB; display: flex; flex-wrap: wrap; padding: 0 0 0;}
.columnelf {background-color: #F8F8F8; flex: 0 0 24%;padding-left:0.5%;padding-right:0.5%;}
.contentelf {padding:2%;text-align:center;background-color: #F8F8F8;}
.contentelf-2 {padding-top:3%;}
.contentelf-3 {padding-top:3%;}
.contentelf-4 {padding-left:30%;padding-top:1.75%;}
#h3elf {font-size:14px;text-align:center;}
.img-pv {width:40%;height:auto;padding-top:0.5%;}
.img-pc {width:37%;height:auto;padding-top:0.5%;}  
.img-l2 {width:60%;display:block;margin-left:auto;margin-right:auto;height:auto;}
.img-l3 {width:60%;float:center;height:auto;}
.imagetext {position:relative; align:center;font-size:14px;}
.centered {position: absolute; top: 72%;left: 30%;}
.ffc {font-size:48px;margin-left:45%;float:left;}
.ffc3 {font-size:48px;margin-left:45%;float:left;}

@media only screen and (max-width: 600px) {
.colcontact {background-color:#006;}
.contactcol-1 {flex: 0 0 96.5%;text-align:left;padding-left:3%;}

.mainelf {float:left;clear:both;width:100%;background-color: #003;}
.rowelf {background-color:#006; display: flex; flex-wrap: wrap; padding: 0 0 0;}
.columnelf {background-color: #F8F8F8; flex: 48%; margin: .25% .25% .25%}
.contentelf {padding:2%;text-align:center;background-color: #F8F8F8;}
.contentelf-2 {padding-top:15%;padding-bottom:1%;font-size: 11px;}
.contentelf-3 {padding-top:15%;padding-bottom:1%;font-size:10px;}
.contentelf-4 {padding-bottom:10.5%;padding-top:1%;}
.img-pv {width:52%;padding-top:0%;height:auto;padding-left:20%;}
.img-pc {width:40%;padding-top:8%;height:auto;} 
.imagetext {position:relative; text-align:center;color:black;font-family: inherit;font-size:11px;}
.centered {position: absolute; top: 72%;left: 25%;}
.ffc {font-size:48px;margin-left:40%;}
.ffc3 {font-size:48px;margin-left:40%;}
 }
@media only screen and (min-width: 600px) and (max-width: 768px) {
.columnelf {background-color: #F8F8F8; flex: 0 0 24%;padding-left:0.5%;padding-right:0.5%;}
.contentelf {padding:2%;text-align:center;background-color: #F8F8F8;}
.contentelf-2 {font-size:11px;padding-top:5%;padding-bottom:1%;}
.contentelf-3 {padding-top:5%;font-size:11px;padding-bottom:1%;}
.contentelf-4 {padding-top:5.25%;padding-bottom:1%;}
.img-pv {width:38%;height:auto;margin-top:1%;}
.img-pc {width:40%;height:auto;margin-top:1%;} 
.imagetext {position:relative; text-align:center;color:black;font-family: inherit;font-size:12px;}
.centered {position: absolute; top: 72%;left: 25%;}
.ffc {font-size:28px;padding-top:10%;}
.ffc3{font-size:28px;padding-top:10%;}
 }
@media only screen and (min-width: 768px) and (max-width: 992px) {
.contactcol-1 {flex: 0 0 32.33%; text-align:left;padding-left:1%;font-size:13px;}

.columnelf {background-color: #F8F8F8; flex: 0 0 24%;padding-left:0.5%;padding-right:0.5%;}
.contentelf {padding:2%;text-align:left;background-color: #F8F8F8;}
.contentelf-2 {padding-top:3%;font-size:11px;text-align:center;padding-top:14%;padding-bottom:12%;}
.contentelf-3 {padding-top:14%;font-size:11px;padding-bottom:14%;}
.contentelf-4 {padding-top:3%;padding-bottom:13%;}
.img-pv {width:38%;padding-top:6%;height:auto;}
.img-pc {width:40%;padding-top:6%;height:auto;} 
.imagetext {position:relative; text-align:center;color:black;font-family: inherit;font-size:11px;}
.centered {position: absolute; top: 72%;left: 25%;}
.ffc {font-size:48px;margin-left:40%;}
.ffc3{font-size:48px;}
 }