@charset "utf-8";

#contactgegevensdata{ display: none; }

/*  template gedeeld --------------------------------------- */
#inhoud.vervolgpagina { line-height: 180%;   }
#inhoud.vervolgpagina h1{ font-size: 50px;  padding-bottom: 10px; font-weight: bold; }
#inhoud.vervolgpagina h2{ font-size: 32px;  padding: 30px 0 15px; font-weight: bold; } 


#contactmap_container{  margin-top: 0px; z-index: 0; }
#map_container { position: absolute; bottom: 0px; left: 0px; right: 0px; height:200px; border-radius: 0 0 20px 20px;  background: #f5f5f5 url(../img/loading.gif) no-repeat center center; }
#mapscrolloverlay{ position: absolute; bottom: 0px; left: 0px; right: 0px; top: 0px; }


#inhoud.offerte .contactinfocontainer { display: none; }
#inhoud.offerte .centered .container.contactpagina:before { display: none; }
#inhoud.offerte #contact-formulier2 textarea { height: 250px; }

.checkboxrij { min-height: 30px; padding-left: 40px; font-size: 14px; font-weight: bold; margin-bottom: 10px; overflow: hidden; }
.checkboxrij input[type=checkbox]{ position: absolute; top: 0px; left: -80px; }
.checkboxrij label{ position: relative; float: left; width: 100%; cursor: pointer; }
.checkboxrij:before{ position:absolute; top: 4px; left: 0px; width: 23px; height: 23px; background:url("../img/svg-vink-bol-licht.svg") no-repeat top left; cursor: pointer;}
.checkboxrij.active:before{  background:url("../img/svg-vink-bol-kleur.svg") no-repeat top left;}
.checkboxrij span{  font-weight: normal; }


.offertetekst{ padding-bottom: 25px; }
.offertetekst ul li:before{ content:''; position: absolute; top: 8px; left: -25px; width: 26px; height: 26px;  background: #79A108;  border-radius: 100%;   }
.offertetekst ul li:after{ content:''; position: absolute; top: 17px; left: -17px; width: 10px; height: 8px; background: url("../img/svg-vink.svg") no-repeat; background-size: 100% auto; }



.contactpagina { margin-top: 170px; padding-bottom: 80px; border-bottom: 2px solid #EEEEF4; }
.contactpagina .contactlinks{ width: 50%; padding-right: 100px; }

.contactpagina .contactlinks .tel{ width: 50%; font-weight: 500; font-size: 25px; color: #231F20;  height: 55px; padding-left: 55px; text-align: left; margin-top: 10px; line-height: normal; }
.contactpagina .contactlinks .tel a{ text-decoration: none!important; color: #231F20!important; }
.contactpagina .contactlinks .tel span{ font-size: 14px; padding-top: 0px; color: #ED1E25;  }
.contactpagina .contactlinks .tel:before{  position: absolute; top: 0px; left: 0px; bottom: 0px; width: 38px; background:url("../img/svg-telefoon-donker.svg") no-repeat top left; background-size:  auto 100%; }
.contactpagina .contactlinks .tel:hover {  text-decoration: none; }

.contactpagina .contactlinks .email{ width: 50%; font-weight: 500; font-size: 25px; color: #231F20;  height: 55px; padding-left: 85px; text-align: left; margin-top: 10px; line-height: normal; }
.contactpagina .contactlinks .email a{ text-decoration: none!important; color: #231F20!important; }
.contactpagina .contactlinks .email span{ font-size: 14px; padding-top: 0px; color: #ED1E25;  }
.contactpagina .contactlinks .email:before{ position: absolute; top:0; left: 0; width: 65px; height: 55px;  background: #fff url("../img/svg-hexagon-witborder.svg") no-repeat center center; background-size: auto 100%; }
.contactpagina .contactlinks .email:after{ position: absolute; top:0; left: 0; width: 65px; height: 55px;  background:  url("../img/svg-email-donker.svg") no-repeat center center; background-size: auto 14px; }
.contactpagina .contactlinks .email:hover {  text-decoration: none; }

.contactpagina .contactpersonen{ margin-top: 20px; }
.contactpagina .contactpersonen .contactpersoon{ margin-top: 20px; width: 100%; padding-left: 55px; line-height: 140%; font-size: 13px; }
.contactpagina .contactpersonen .contactpersoon:before{  position: absolute; top: 0px; left: 0px; bottom: 0px; width: 38px; background:url("../img/svg-pin-donker.svg") no-repeat top left; background-size:   60% auto; }

.contactpagina .contactpersonen .contactpersoon span{ font-weight: bold; }
.contactpagina .contactpersonen .contactpersoonlinks{width: 50%; }
.contactpagina .contactpersonen .contactpersoonrechts{width: 50%; }


.contactpagina .contactlinks .split{ height: 1px; background: #eee; margin: 60px 0; }
.contactpagina .contactlinks .txt { padding-bottom: 20px;  }
.contactpagina .contactlinks .txt a{ font-weight: bold; text-decoration: none!important; color: #231F20!important;  }


.contactpagina .contactlinks .kennismaken{ margin-top: 30px; height: 230px; border-radius: 0px; background: url("../img/visual-kennismaken-kort.jpg") no-repeat center center; background-size: cover; }
.contactpagina .contactlinks .kennismaken .kennismakentitel{     font-size: 20px;    font-weight: bold;    line-height: 130%;    padding-bottom: 5px; color:#fff;   }
.contactpagina .contactlinks .kennismaken .kennismakenblok{ position: absolute; top: 30px; left: 30px; width: 320px;   padding: 30px 40px 25px;  background: #ED1E25 url("../img/svg-hexagon-groep-wit.svg") no-repeat right 15px top 15px; background-size: auto 30px; border-radius: 0px; }
.contactpagina .contactlinks .kennismaken .kennismakentitel span{ font-size: 20px;    font-weight: 500;    font-style: italic; }
.contactpagina .contactlinks .kennismaken .kennismakenlink{ font-size: 13px; text-transform: uppercase; font-weight: bold; color: #fff; }
.contactpagina .contactlinks .kennismaken .kennismakenblok:hover{   background: #231F20;  }
.contactpagina .contactlinks .kennismaken .kennismakenblok:hover .kennismakenlink{   color: #ED1E25;  }


#inhoud.vervolgpagina.en .contactlinks .kennismaken{ height: 250px; }

.contactpagina .contactlinks .adres{ margin-top: 50px; width: 50%; padding-left: 55px; padding-right: 50px; line-height: 150%; font-size: 13px; }
.contactpagina .contactlinks .adres:before{  position: absolute; top: 0px; left: 0px; bottom: 0px; width: 38px; background:url("../img/svg-pin-donker.svg") no-repeat top left; background-size:   60% auto; }
.contactpagina .contactlinks .adres span{ font-size: 14px;  color: #231F20; font-weight: bold;  }

.contactpagina .contactlinks .info{ margin-top: 50px; width: 50%; line-height: 150%; font-size: 13px; }
.contactpagina .contactlinks .info span{ font-size: 14px;  color: #231F20; font-weight: bold;  }

.contactpagina .contactlinks .adres.adres2{ margin-top: 20px;  }
.contactpagina .contactlinks .info.info2{ margin-top: 20px;  }

.contactpagina .contactlinks .volgons { position: absolute; top: 70px; right: 0px;  font-size: 14px; font-style: italic; z-index: 1;  }
.contactpagina .contactlinks .volgons a.facebook{ width: 32px; height: 32px; background: url("../img/svg-socialmedia-facebook.svg") no-repeat;   background-size: auto 100%;  margin-right: 5px; }
.contactpagina .contactlinks .volgons a.instagram{ width: 32px; height: 32px; background: url("../img/svg-socialmedia-instagram.svg") no-repeat;  background-size: auto 100%; margin-right: 5px;   }
.contactpagina .contactlinks .volgons a.instagram:hover{ background: url("../img/svg-socialmedia-instagram-hover.svg") no-repeat;   background-size: auto 100%; }
.contactpagina .contactlinks .volgons a.facebook:hover{  background: url("../img/svg-socialmedia-facebook-hover.svg") no-repeat;   background-size: auto 100%; }

.contactpagina .contactlinks .links { width: 50%; }
.contactpagina .contactlinks .rechts { width: 50%; }
.contactpagina .contactlinks .links .adres { width: 100%; }
.contactpagina .contactlinks .rechts .info { width: 100%; }


.contactpagina .contactrechts{ width: 50%; padding-left: 50px; padding-top: 50px;  }
.contactpagina .contactrechts .rijtitel{ font-weight: 600; }
.contactpagina .contactrechts .rij{ padding-bottom: 15px; }


#contact-formulier2 textarea{	border: 1px solid rgba(0,0,0,0.1); background: #fff;	width:100%;	height: 220px;	padding: 25px; box-sizing: border-box;	border-radius: 1px;	    font-family: 'Montserrat', sans-serif;}
#contact-formulier2 input[type=text], #contact-formulier2 input[type=email]{	border: 1px solid rgba(0,0,0,0.1); background: #fff;	width:100%;	padding: 0 15px; box-sizing: border-box;  height: 40px; line-height: 40px;	border-radius: 3px;	font-family: 'Montserrat', sans-serif; }
#contact-formulier2 select{	border: 1px solid rgba(0,0,0,0.1); background: #fff  url("../img/svg-pijl-beneden-kleur.svg") no-repeat 97% center; background-size: 10px auto;	width:100%;	padding: 0 15px; box-sizing: border-box;  height: 40px; line-height: 40px;	border-radius: 3px;    font-family: 'Montserrat', sans-serif;	-webkit-appearance: none;	}
#contact-formulier2 input[type=submit]{	 background: #ED1E25;   font-family: "Roboto Condensed", sans-serif; text-transform: uppercase; border: 0;	border-radius: 1px;	position: relative; 	float: left; 	height: 50px; 	line-height: 47px; 	font-size: 16px; 	font-weight: 600; 	color: #fff; 		padding: 0 25px;    transition:all .2s linear;     -o-transition:all .2s linear;     -moz-transition:all .2s linear;     -webkit-transition:all .2s linear;	cursor: pointer;	-webkit-appearance: none;	}
#contact-formulier2 input[type=submit]:hover{	background: #231F20;   text-decoration: none; ;}

#contact-formulier2 textarea, #contact-formulier2 input[type=text], #contact-formulier2 select, #contact-formulier2 input[type=email] { outline-style: none; }

#contact-formulier2 textarea:hover, #contact-formulier2 input[type=text]:hover, #contact-formulier2 select:hover, #contact-formulier2 input[type=email]:hover { border: 1px solid rgba(0,0,0,0.2); box-shadow: 0px 3px 10px rgba(0,0,0,0.1);  }


#inhoud.vervolgpagina ul{ text-align: left; padding: 20px 0 20px 40px; }
#inhoud.vervolgpagina ul li{ list-style: disc;  padding: 5px 0 5px 30px;  list-style-position: outside; }
#inhoud.vervolgpagina ul li span{ text-align: left; padding: 10px 0 0 10px;  }
#inhoud.vervolgpagina ul.special li span:before{ content:''; position: absolute; top: 13px; left: -45px; width: 26px; height: 26px;  background: #79A108;     box-shadow: 0px 9px 20px rgba(0,84,164,0.5); }
#inhoud.vervolgpagina ul.special li span:after{ content:''; position: absolute; top: 22px; left: -37px; width: 10px; height: 8px; background: url("../img/svg-vink.svg") no-repeat; background-size: 100% auto; }
#inhoud.vervolgpagina ol{ text-align: left; padding: 20px 0 20px 40px; list-style-type: decimal; }
#inhoud.vervolgpagina ul li{ list-style: disc;  padding: 5px 0 5px 30px;  list-style-position: outside; }


.offertetekst{ padding-bottom: 25px; }
.offertetekst ul li:before{ content:''; position: absolute; top: 8px; left: -25px; width: 26px; height: 26px;  background: #ED1E25;  border-radius: 100%;   }
.offertetekst ul li:after{ content:''; position: absolute; top: 17px; left: -17px; width: 10px; height: 8px; background: url("../img/svg-vink-wit.svg") no-repeat; background-size: 100% auto; }

.tabel{position: relative;float: left; width: 100%; margin: 0px 0px 10px 0px; }
.tabel .kolom1{ position: relative; float: left; width: 30%; padding-right: 50px; box-sizing: border-box; text-align: left; font-weight: bold; }
.tabel .kolom2{ position: relative; float: left; width: 70%; padding: 0 200px 10px 0; box-sizing: border-box; }
.tabel .kolom2.marge{ padding: 20px 0; }
.verplicht { font-size: 10px; color: #999; text-align: left; padding-top: 20px; }


.checkboxrij { min-height: 30px; padding-left: 40px; font-size: 14px; font-weight: bold; margin-bottom: 10px; overflow: hidden; }
.checkboxrij input[type=checkbox]{ position: absolute; top: 0px; left: -80px; }
.checkboxrij label{ position: relative; float: left; width: 100%; cursor: pointer; }
.checkboxrij:before{ position:absolute; top: 4px; left: 0px; width: 23px; height: 23px; background:url("../img/svg-vink-bol-donker-1.svg") no-repeat top left; cursor: pointer; background-size: auto 23px;}
.checkboxrij.active:before{  background:url("../img/svg-vink-bol-kleur.svg") no-repeat top left; background-size: auto 23px;}
.checkboxrij span{  font-weight: normal; }



@media screen and (min-width: 1320px) and (max-width: 1660px) {
	
	.contactpagina .contactlinks{ width: 55%; padding-right: 100px; }
	.contactpagina .contactrechts{ width: 45%; padding-left: 30px;  }
	.contactpagina .contactpersonen .contactpersoonlinks{width: 60%; }
	.contactpagina .contactpersonen .contactpersoonrechts{width: 40%; }
}

@media screen and (min-width: 1024px) and (max-width: 1319px) {
	
	.contactpagina .contactlinks{ width: 60%; padding-right: 60px; }
	.contactpagina .contactrechts{ width: 40%; padding-left: 20px; padding-top: 30px; }
	
	#inhoud.vervolgpagina h1 { font-size: 40px; }
	.contactpagina { margin-top: 150px; }
	.contactpagina .contactlinks .tel { font-size: 20px; }
	.contactpagina .contactlinks .tel span { font-size: 13px; }
	.contactpagina .contactlinks .email { font-size: 20px; }
	.contactpagina .contactlinks .email span { font-size: 13px; }
	#contact-formulier2 textarea { height: 245px; }
	
	
	.contactpagina .contactpersonen .contactpersoonlinks{width: 60%; }
	.contactpagina .contactpersonen .contactpersoonrechts{width: 40%; }
	
	.contactpagina .contactlinks .volgons { width: 32px;   }
	.contactpagina .contactlinks .volgons a.facebook{ margin-bottom: 7px; }
	
	.tabel .kolom1 { width: 40%; }
	.tabel .kolom2 { width: 60%; }
	.tabel .kolom2{  padding: 0 0 10px 0;  }
	
}

@media screen and (min-width: 740px) and (max-width: 1023px) {
	
	.contactpagina { margin-top: 130px; }
	#inhoud.vervolgpagina h1 { font-size: 40px; }
	.contactpagina .contactlinks{ width: 100%; padding-right: 0px; padding-bottom: 40px; border-bottom: 2px solid #EEEEF4;   }
	.contactpagina .contactlinks .txt {    padding-bottom: 0px; }
	.contactpagina .contactrechts{ width: 100%;  padding-left: 0px; }
	.contactpagina .contactlinks .kennismaken { margin-top: 40px; }
	.contactpagina .contactlinks .adres { margin-top: 60px; }
	.contactpagina .contactlinks .info { margin-top: 60px; }
	
	
	.tabel .kolom1{   width: 35%; }
	.tabel .kolom2{   width: 65%; padding: 0 20px 10px 0;  }
	
}


@media screen and (min-width: 1px) and (max-width: 739px) {
	
	.contactpagina { margin-top: 40px; }
	#inhoud.vervolgpagina h1 { font-size: 24px; }
	.contactpagina .contactlinks{ width: 100%; padding-right: 0px; padding-bottom: 40px; border-bottom: 2px solid #EEEEF4;   }
	.contactpagina .contactlinks .txt {    padding-bottom: 0px; }
	.contactpagina .contactrechts{ width: 100%;  padding-left: 0px; }
	.contactpagina .contactlinks .kennismaken { margin-top: 40px; }
	
	.contactpagina .contactlinks .tel { width: 100%; padding-left: 65px; margin-top: 25px; }
	.contactpagina .contactlinks .tel span { font-size: 13px; }
	.contactpagina .contactlinks .tel { font-size: 20px; }
	.contactpagina .contactlinks .tel:before { left: 5px; }
	
	.contactpagina .contactlinks .email { width: 100%; margin-top: 30px; }
	.contactpagina .contactlinks .email span { font-size: 13px; }
	.contactpagina .contactlinks .email { font-size: 20px; }
	
	.contactpagina .contactlinks .kennismaken { height: 120px; margin-bottom: 200px; }
	.contactpagina .contactlinks .kennismaken .kennismakenblok { top: 135px;  left: 0px; width: 100%; padding: 25px 40px 25px; }
	
	.contactpagina .contactlinks .adres { margin-top: 50px; width: 100%; padding-left: 45px; }
	
	.contactpagina .contactlinks .info { margin-top: 20px; width: 100%; padding-left: 45px; }
	.contactpagina .contactlinks .info:before{  position: absolute; top: 0px; left: 0px; bottom: 0px; width: 38px; background:url("../img/svg-information-donker.svg") no-repeat top left; background-size:  auto 40%; }

	.contactpagina .contactlinks .volgons { top: 45px;   }
	
	.contactpagina .contactpersonen .contactpersoonlinks{width: 100%; }
	.contactpagina .contactpersonen .contactpersoonrechts{width: 100%; }
	
	#contact-formulier2 { font-size: 12px; }
	#contact-formulier2 select{ position: absolute; top: 0px; ;left: 0px; }
	#contact-formulier2 .selectmenu{ min-height: 80px; }
	#contact-formulier2 input[type=submit] { width: 100%; }

	.tabel .kolom1{   width: 100%; text-align: left; padding: 0; }
	.tabel .kolom2{   width: 100%; padding: 0 0 10px 0;  }
	.tabel .rij.submit .kolom1{   display: none;  }
	
}