html, body,#body {width:100%;height:100%;margin:0;padding:0;}
body, div:not(.fancybox-type-image){box-sizing: border-box;transition:0.25s}

/*** ACHTERGROND AFBEELDING ***************************************************/
body {background:#fff;font-weight: 400;font-family:"Titillium Web", sans-serif;font-size:16px;line-height:24px;text-align:center;color:#1f1f1f;overflow-y:scroll;overflow-x:hidden;position:absolute}
#preloader{position:fixed;width:100%;height:100%;overflow:hidden;background:#fff;z-index:1000}
h1 {font-family:"Lato", sans-serif;font-weight:300;font-size:36px;line-height:40px;margin-top:0;}
h2 {font-weight: 700;font-family: "Lato", sans-serif;font-size: 26px;line-height:26px;text-transform:uppercase;letter-spacing: -0.03em;margin:20px 0}
h3 {font-family:"Lato", sans-serif;font-size:24px;font-weight:300;margin:10px 0 20px 0;}
h4{font-weight: 800;font-family: Montserrat;font-size: 22px;line-height: 22px;text-transform:uppercase;color:#1f1f1f}
a {transition:0.25s;color:#003ca2;text-decoration:none}
a:hover {color:#003ca2;text-decoration:none}
a img, a img:hover {border:none}
div, p {padding:0;margin:0}
ul{padding-top:0;padding-bottom:0;margin-top:0;margin-bottom:0}
hr {clear:both;border:none;border-bottom:1px solid #0c0c0c;color:transparant;height:3px;margin:5px 0}

#clearfloat {height:1px;overflow:hidden;clear:both;float:none}

.melding, .meldinggoed {border:1px solid #e30000;color:#e30000;background:#ffdede;padding:15px;font-size:14px;line-height:14px;font-style:italic;margin:5px 0}
.meldinggoed {border:1px solid #3c6f08;color:#3c6f08;background:#d6eebd}

.markeer{background:#fd0;padding:0 5px;color:#0c0c0c}
.noshow{display:none}

.fal, .far {color:inherit;font-size:12px;font-family: "Font Awesome 5 Pro";}

/*

blauw: #003ca2
bruin donker: #a25700
bruin 2				#b57933
bruin 3				#c79a66
bruin licht		#dabc99

*/
/***** FORMULIER **************************************************************/
form {background:#cccfd5;padding:20px 12px;width:320px;font-size:0;text-align:center;color:#fff;box-sizing: border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;}
form .input_box{width:calc(50% - 2px);margin:2px 2px 2px 0;display:inline-block;position:relative}
form .input_box:nth-of-type(2n){margin-right:0;margin-left:2px;}

input, textarea, select {width:100%;font-family:"Titillium Web", sans-serif;font-size:12px;color:#666;line-height:34px;height:34px;text-indent:15px;padding:0;border:none;background:rgba(255,255,255,0.6);transition:0.25s;position:relative;box-sizing: border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;}
form input.default, textarea.default{font-size:12px;font-style:italic;color:#667999}
input:focus, textarea:focus, select:focus{background-color:rgba(255,255,255,0.9)}
input.fout, textarea.fout, select.fout{border:1px solid #e30000;color:#e30000;font-style:italic}

select{display: block;text-indent:6px;width:100%;height:34px;box-sizing: border-box;-moz-appearance: none;-webkit-appearance: none;appearance: none;cursor:pointer;padding-left:6px
 background-color: rgba(255,255,255,0.5);background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23667999%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E');background-repeat: no-repeat, repeat;background-position: right .7em top 50%, 0 0;background-size: .65em auto, 100%;}
select option{background:rgba(255,255,255,0.8);border:none}
select option:first-child, select.default{font-size:12px;font-style:italic;color:#667999}

textarea {height:94px;width:100%;margin-top:2px;font-size:12px;padding:10px 15px;text-indent:0;line-height:14px}

.button, button {background:none;text-align:center;line-height:34px;margin:15px auto;height:36px;width:auto;min-width:80px;border:1px solid #fff;text-indent:0;padding:0 25px;color:#fff;font-size:14px;text-transform:lowercase;transition:0.25s;cursor:pointer}
.button:hover, .button:focus {background:transparent;color:#003ca2;border-color:#003ca2}

.radio, form .checkbox {height:20px;width:13px;margin:0 3px 0 0;float:left;border:0;background:none}
.radiolabel {height:auto;margin-right:20px;font-size:12px;float:left;width: calc(100% - 38px);
text-align: left;}

form .foutmelding{color:#e30000;display:block;margin-top:-8px;line-height:17px;font-size:11px;position:absolute;top:1px;z-index:12}

 .grecaptcha-badge{display:none}

/***** HEADER *****************************************************************/
#header{position:fixed;top:0;left:0;width:100%;z-index:100;background:#f1eee8;height:227px}
/*#header .wrapper{max-width: 1240px;margin:0 auto;position:relative} */
#logo{position:absolute;top:28px;left:45px;}
#header .knoppen{width:100%;height:65px;position:absolute;bottom:0}
#header .knoppen .knop{background:#a25700;width:25%;float:left;height:65px;line-height:65px;text-align:center;color:#eec3a2;font-size:24px}
#header .knoppen .knop.email{background:#b57933;color:#f7e1d0;font-size:14px}
#header .knoppen .knop.tijden{background:#c79a66;color:#f7e1d0;font-size:14px}
#header .knoppen .knop.nood{background:#dabc99;color:#fff;font-size:18px}
#header .knoppen .knop i{font-size:24px;margin-right:8px;margin-top:20px;float:left}
#header .knoppen .knop.telefoon i, #header .knoppen .knop.tijden i{margin-top:21px;}
#header .knoppen .knop:hover{opacity:0.7}
#header .knoppen .knop span{float:left}
#header .knoppen .knop .con{ width:auto;display:inline-block;}

/***** MENU *******************************************************************/
#btn_menu_mobiel{display:none}
#menu{float:right;position:relative;z-index:10}
#menu ul{list-style:none;margin:37px 45px 0 0;padding:0;font-family:Lato, sans-serif;}
#menu ul li{display:inline-block;margin:0;padding:0;position:relative}
#menu ul li a{transition: 0.25s;display:inline-block;padding:30px 20px 24px 20px;font-weight:400;font-size:14px;text-transform:uppercase;color:#1f1f1f}
#menu ul li.uitklap i {color: inherit;font-weight: bold;margin:0;font-size: 14px;display: inline-block;background: none;margin-left:8px;}
#menu ul:hover li a{opacity:0.5}
#menu ul li a:hover{color:#1f1f1f;opacity:1}
#menu ul li.actief a{color:#003ca2}

#menu ul#submenu{display:none;position:absolute;min-width:225px;left:-10px;top:30px;overflow:visible;right:auto;background:rgba(241,238,232,0.9);padding:15px 0 15px 25px;text-align:left}
#menu ul li ul#submenu li{display:block}
#menu ul li ul#submenu li a{display:block;color:#1f1f1f;padding:6px 0px;opacity:1;border:none}
#menu ul li ul#submenu li a::after{background:none;padding:0;width:0;}
#menu ul li ul#submenu li a:hover{color:#003ca2;border:none}

/***** AFBEELDINGEN ***********************************************************/
#afbeeldingen{position:relative;width:100%;height:474px;overflow:hidden;z-index:10}
/* #afbeeldingen.home{height:580px} */
#afbeeldingen ul, #afbeeldingen ul li{position:absolute;top:0;left:0;width:100%;height:100%;padding:0;margin:0}
#afbeeldingen ul li{opacity:0;}
#afbeeldingen ul li.active{opacity:1;}
#afbeeldingen ul li img{min-width:100%;min-height:100%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}
#afbeeldingen .tekst{width:100%;max-width:1240px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:2;color:#fff}
#afbeeldingen .tekst h2{color:#fff;font-size:62px;line-height:66px;font-weight:600;text-shadow:0 0 12px #555}
#afbeeldingen .tekst .titel{width:100%;text-align:left;font-size:56px;display:block;margin-bottom:50px;font-weight:bold}
#afbeeldingen .tekst .ondertitel{width:100%;text-align:left;font-size:46px;line-height:24px;display:block;margin-bottom:0;font-weight:700}
#afbeeldingen .tekst .button{font-weight:600;transition: 0.25s;font-size:24px;text-transform:none;float:left;margin-top:50px}
#afbeeldingen.contact iframe{margin-top: -127px;height: 724px;}

/***** KRUIMELPAD *************************************************************/
#kruimelpad{width:100%;padding-left:calc((100%-1240)/2);height:53px;line-height:53px;color:#fff;text-align:left;background:#c79a66;position:relative}
#kruimelpad a{color:#fff}
#kruimelpad a:hover{color:#eec3a2}
#kruimelpad .kp-wrapper{max-width:1240px;margin:0 auto}

#btn_esvelddak{background:#a25700 url("img/esvelddak.png") 15px 14px no-repeat;height:53px;box-sizing: border-box;line-height:20px;position:absolute;top:0;right:30px;padding:4px 20px 5px 80px;}
#btn_esvelddak .tekst{font-size:12px;}
#btn_esvelddak .site{display:block;font-family:"Lato", sans-serif;font-weight:200;font-size:22.85px;text-transform:uppercase}

/***** FOOTER *****************************************************************/
#footer{width:100%;background:#406cb9;padding:60px 0 1px 0;border-top: 1px solid #003ca2;position:relative;font-size:13px;}
#footer .wrapper{max-width:1240px;margin:0 auto}

#footer h2{font-size:18px;font-weight:200;margin-bottom:10px;margin-top:0}
#footer a{display:block;color:#fff}
#footer a:hover{color:#ccd8ec;}
#footer .blok{width:25%;color:#fff;float:left;text-align:left;line-height:24px;margin-top:0}
#footer i{margin-right:14px;clear:left;float:left;margin-top:7px}
#footer .blok.informatie{padding-left:70px;padding-bottom:20px}
#footer .blok.vestigingen{line-height:18px}

.onderfooter{background:#003ca2;width:100%}
.onderfooter .wrapper{height:73px;line-height:73px;text-align:left;color:#ccd8ec;max-width:1240px;margin:1px auto 0;font-size:0.9em}
.onderfooter .wrapper a{color:#ccd8ec;margin-left:6px;margin-right:6px }
.onderfooter .wrapper a:hover{color:#fff}

.onderfooter .facebook{display:block;float:left;margin-top:21px;text-align:center;background:#ccd8ec;width:32px;height:31px;overflow:hidden;position:relative}
.onderfooter .facebook:hover{background:#fff}
.onderfooter .facebook i{color:#003ba1;font-size:20px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}
.onderfooter .copy{float:right}

/***** PAGINA INHOUD **********************************************************/
#container{padding-top:227px;background:#fff;width:100%} 
#container .wrapper{padding-top:63px;position:relative}
#content{max-width:1240px;margin:0 auto 40px;text-align:left}
#content #text {float:left;width:calc(100% - 360px)}
#text img{max-width:100%}
#text h2{margin-bottom:5px;font-size:20px;}

/***** CONTACT FORMULIER ******************************************************/
#contactform{float:right;width:320px}
#btn_nooddienst{padding: 0 9px;display:block;margin-top:40px;color:#003ca2;font-family:"Lato", sans-serif;font-weight:300;font-size:18px}
#btn_nooddienst .nummer{font-weight:800;font-size:24px;display:block;letter-spacing:5px;line-height:37px}
#btn_nooddienst i{font-size:39px;float:left;margin-right: 20px;line-height:52px}
#btn_nooddienst:hover{opacity:0.8}

#certificeringen{border-top:1px solid #003ca2;margin-top:120px;padding:30px 0 60px 0;text-align:center;position:relative;}
#certificeringen h2{color:#1f1f1f; font-weight:200}
#certificeringen #logos{text-align:left;margin-top:80px;position:relative;clear:both;height:36px;overflow:hidden;width:100%;}
#certificeringen #logos ul{list-style:none;padding:0;margin:0;position:relative;}
#certificeringen #logos ul li{position:absolute;width:242px;height:36px;}
#certificeringen #logos img{margin:0;max-width:100%;max-height:100%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}

/**** HOMEPAGE ****************************************************************/

#content.home #btn_nooddienst{width:320px;margin:40px auto}
#content.home #contactform{float:none;margin:0 auto;width:100%;max-width:350px}
#content.home #contactform form{background:none;width:100%;margin:0;padding:0}

#content.home .textpage{width:calc(66.6666% - 60px);float:left;margin-top:80px}
#content.home #text{width:100%}

#content.home .textpage .button{color:#003ca2;border-color:#003ca2;line-height:34px;height:36px;margin-top:40px;display:inline-block}
#content.home .textpage .button:hover{opacity:0.6}

#home_blok.contact h3, #home_blok h2{font-family:"Lato", sans-serif;font-weight:200;font-size:24px;text-transform:none;text-align:center;margin-top:0}
#home_blok{width:calc(33.3333% - 30px);height:365px;position:relative;float:left;margin:80px 0 40px 0;background:#99b1d9}
#home_blok.recensies{background:#6689c7}
#home_blok.projecten{background:#3362b4;margin:80px 45px 40px;position:relative}
#home_blok.contact{float:right;height:auto;}

#home_blok{color:#fff;padding:30px 40px;font-size:12px;line-height:16px;overflow:hidden}
/* #home_blok.waarom h3{font-family:"Titillium Web", sans-serif;text-transform:uppercase;font-size:12px;margin:12px 0 0 0 }
#home_blok.waarom .tekst{height:246px;overflow:hidden;} */
#home_blok .button{display:inline-block;width:auto;position:absolute;bottom:34px;left:50%;transform:translate(-50%);margin:0}

#home_blok.projecten ul.projecten{width:100%;height:208px;overflow:hidden;position:relative;list-style:none;margin:0;padding:0}
#home_blok.projecten li{opacity:0;width:100%;height:100%;overflow:hidden;position:absolute;top:0;left:0;z-index:1}
#home_blok.projecten li.active{opacity:1}
#home_blok.projecten li img{width:100%;height:auto;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}
#home_blok.projecten li .titel{display:none;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#fff;border:1px solid #fff;background:rgba(0,0,0,0.5);padding:10px 25px;font-size:14px}
/* #home_blok.projecten .item:hover .titel{display:block} */
#home_blok.projecten .volgende, #home_blok.projecten .vorige{opacity:0.5;position:absolute;top:50%;left:50px;font-size:36px;transform:translate(0,-50%);color:#fff;z-index:20;cursor:pointer}
#home_blok.projecten .volgende{left:auto;right:50px}
#home_blok.projecten .volgende:hover, #home_blok.projecten .vorige:hover{opacity:1;}

#home_blok.foto img{height:100%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}

/* #home_blok.projecten{margin:80px 20px 40px}*/ 

ul#recensies, ul#recensies li{box-sizing: border-box;list-style:none;margin:0;padding:0}
#recensies .item{opacity:0;position:absolute;top:0;left:0;background:#6689c7;padding:30px 40px;width:100%;height:100%;font-size:16px}
#recensies .item.active{opacity:1}
#recensies .item .tekst{position:absolute;top:50%;transform:translate(0,-50%);width: calc(100% - 80px);line-height:20px}
#recensies .item .tekst i{font-size:12px;margin-right:5px;float:left}
#recensies .item .tekst i.fa-quote-right{margin-left:5px;margin-right:0;float:none}
/*#recensies .item .tekst .quote{float:left;width:269px} */
#recensies .item .naam{font-size:20px;margin:0 0 20px 0;font-family: "Lato", sans-serif;font-weight:700}
#recensies .item .sterren{margin:20px 0 0 0;float:none;clear:both;text-align:center}
#recensies .item .sterren i{font-size:24px;margin:0 5px;opacity:0.6;float:none}
#recensies .item .sterren i.geel{color:#f6d600;opacity:1}

/**** SPEERPUNTEN ****/
#speerpunten{margin:40px 0;text-align-last:justify}
#speerpunten .item {display:inline-block;width:320px;overflow:hidden;height:240px;position:relative;text-align:center;text-align-last:center}
#speerpunten .item i{height:80px;font-size:65px;color:#555}
#speerpunten .item h3{font-size:28px;text-align:center;text-align-last:center}
#speerpunten .item .tekst{text-align:left;text-align-last:left}

/**** DIENSTEN ****/
#diensten{font-size:0}
#diensten a.item{display:inline-block;width:298px;height:220px;overflow:hidden;margin:0 16px 16px 0;position:relative}
#diensten a.item:nth-of-type(4n){margin-right:0}
#diensten a.item .img{width:100%;height:100%;position:absolute;top:0;left:0}
#diensten a.item .img img{height:100%;width:auto;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}
#diensten a.item .titel{position:absolute;bottom:20px;right:0;background:rgba(255,255,255,0.9);line-height:60px;height:60px;min-width:160px;padding:0 20px;text-align:right;font-size:20px;z-index:20;color:#1a1a1a;font-weight:700}
#diensten:hover a.item{opacity:0.6}
#diensten a.item:hover{opacity:1}

/***** PROJECTEN **************************************************************/
#content #text.projecten{width:100%}
#projecten{float:left;width:calc(100% - 360px + 20px)} /* 20px breder dan de tekst voor de margin van de afbeeldingen */
#projecten a.item{width:280px;height:200px;overflow:hidden;position:relative;float:left;margin:20px 20px 0 0;border:1px solid #cecece;border-radius:5px;box-sizing:border-box;}
#projecten img{width:100%;height:auto;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}

#projecten a.item h3{display:block;transition:0.3s;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#fff;border:1px solid #555;background:rgba(22,22,22,0.5);padding:10px 25px;font-size:16px;color:#efefef;font-weight:bold;text-transform:uppercase;text-align:center;max-width:90%;box-sizing:border-box;}
#projecten a.item:hover h3{opacity:0}

#projecten .project .img{width:280px;height:200px;overflow:hidden;position:relative;float:left;margin:20px 20px 0 0;border:1px solid #cecece;border-radius:5px;box-sizing:border-box;}
#projecten .project .img img{transition:0.3s;width:100%;height:auto;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}
#projecten .project .img:hover img{opacity:0.8}

#projecten .project .btn_terug{float:right;margin-top:-25px}




#corona{margin:20px 0}