@charset "utf-8";

#contactgegevensdata{ display: none; }

/*  template gedeeld --------------------------------------- */
#inhoud.vervolgpagina { line-height: 180%;     z-index: 1;  }
#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; }



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

.contactpagina .contactlinks .tel{ width: 50%; font-weight: 500; font-size: 25px; color: #1A3350;  height: 55px; padding-left: 55px; text-align: left; margin-top: 20px; line-height: normal; }
.contactpagina .contactlinks .tel a{ text-decoration: none!important; color: #1A3350!important; }
.contactpagina .contactlinks .tel span{ font-size: 14px; padding-top: 0px; color: #1A3350;  }
.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: 55%; font-weight: 500; font-size: 24px; color: #1A3350;  height: 55px; padding-left: 75px; text-align: left; margin-top: 20px; line-height: normal; }
.contactpagina .contactlinks .email a{ text-decoration: none!important; color: #1A3350!important; }
.contactpagina .contactlinks .email span{ font-size: 14px; padding-top: 0px; color: #1A3350;  }
.contactpagina .contactlinks .email:before{ position: absolute; top:0; left: 0; width: 55px; height: 55px; border-radius: 100%; box-shadow: 0px 3px 30px rgba(43,40,115,0.2); background: #fff url("../img/svg-email-donker.svg") no-repeat center center; background-size: auto 14px; }
.contactpagina .contactlinks .email:hover {  text-decoration: none; }



.contactpagina .contactlinks .whatsapp{ width: 45%; font-weight: 500; font-size: 25px; color: #1A3350;  height: 55px; padding-left: 75px; text-align: left; margin-top: 20px; line-height: normal; }
.contactpagina .contactlinks .whatsapp a{ text-decoration: none!important; color: #1A3350!important; }
.contactpagina .contactlinks .whatsapp span{ font-size: 14px; padding-top: 0px; color: #1A3350;  }
.contactpagina .contactlinks .whatsapp:before{ position: absolute; top:0; left: 0; width: 55px; height: 55px;  background:  url("../img/svg-whatsapp-donker.svg") no-repeat center center; background-size: auto 100%; }
.contactpagina .contactlinks .whatsapp:hover {  text-decoration: none; }


.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: #1A3350!important;  }


.contactpagina .contactlinks .kennismaken{ margin-top: 40px; height: 280px; border-radius: 20px; background: url("../img/visual-kennismaken-kort.jpg") no-repeat center top; background-size: auto 100%; }
.contactpagina .contactlinks .kennismaken .kennismakentitel{     font-size: 25px;    font-weight: bold;    line-height: 130%;    padding-bottom: 5px; color:#fff;   }
.contactpagina .contactlinks .kennismaken .kennismakensubtitel{     font-size: 15px;    font-weight: normal;    line-height: 150%;    padding-bottom: 5px; color:#fff;   }
.contactpagina .contactlinks .kennismaken .kennismakenblok{ position: absolute; top: 40px; right: 30px; width: 350px;   padding: 30px 40px 25px;  background: #C79963; border-radius: 15px; }
.contactpagina .contactlinks .kennismaken .kennismakentitel span{ font-size: 20px;    font-weight: 500;    font-style: italic; color: #3F2D4C; }
.contactpagina .contactlinks .kennismaken .kennismakenlink{ font-size: 13px; text-transform: uppercase; font-weight: bold; color: #fff; }

.contactpagina .contactlinks .kennismaken:hover {   background-size: auto 105%; }
.contactpagina .contactlinks .kennismaken:hover .kennismakenblok {  background: #1A3350;  }
.contactpagina .contactlinks .kennismaken:hover .kennismakenblok .kennismakenlink{   color: #fff;  }


.contactpagina .contactlinks .adres{ margin-top: 30px; 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: #1A3350; font-weight: bold;  }

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



.contactpagina .contactlinks .volgons { position: absolute; top: 30px; 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.linkedin{ width: 32px; height: 32px; background: url("../img/svg-socialmedia-linkedin.svg") no-repeat;  background-size: auto 100%; margin-right: 5px;   }

.contactpagina .contactlinks .volgons a:hover{ margin-top: -5px; } 



.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: 3px;	    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-donker.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: #C79963;    font-family: 'Montserrat', sans-serif; border: 0;	border-radius: 50px;	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: #1A3350;   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);  }


.offertetekst{ padding-bottom: 25px; }
.offertetekst ul{ padding: 20px 50px; }
.offertetekst ul li{ padding: 7px 15px; }
.offertetekst ul li:before{ content:''; position: absolute; top: 8px; left: -25px; width: 26px; height: 26px;  background: #C79963;  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; }


.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: 100% auto; }
.checkboxrij.active:before{  background:url("../img/svg-vink-bol-kleur.svg") no-repeat top left; background-size: 100% auto; }
.checkboxrij span{  font-weight: normal; }

.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; }

.directofferte{ margin: 10px 0; background: #3F2D4C;  color: #fff; border-radius: 50px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); padding: 10px 20px 10px 50px; font-weight: bold; }
.directofferte:before{ position: absolute; top: 0; left: 5px; bottom: 0; width: 40px; background: url("../img/svg-information-wit.svg") no-repeat center center; background-size: auto 50%; }
.directofferte:after{ position: absolute; top: 0; right: 5px; bottom: 0; width: 40px; background: url("../img/svg-pijl-rechts-wit.svg") no-repeat center center; background-size: auto 30%; }

.directofferte:hover{background: #C79963; text-decoration: none; padding-left: 55px;  }


.vakantie {  border-radius: 10px; padding: 20px 25px; margin-bottom: 20px; font-size: 11px; line-height: 155%; font-style: italic; font-weight: 500; background: #fff;     box-shadow: 0 3px 15px rgb(0 0 0 / 5%); }
.vakantie span { color: red; font-weight: bold; }

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

}

@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; padding-top: 5px; }
	.contactpagina .contactlinks .tel span { font-size: 13px; }
	.contactpagina .contactlinks .email { font-size: 20px; }
	.contactpagina .contactlinks .email span { font-size: 13px; }
	.contactpagina .contactlinks .whatsapp { font-size: 20px; padding-top: 5px; }
	.contactpagina .contactlinks .whatsapp span { font-size: 13px; }
	#contact-formulier2 textarea { height: 190px; }
	.contactpagina .contactlinks .adres { width: 45%; }
	
	.contactpagina .contactlinks .kennismaken .kennismakentitel {font-size: 18px; }
	.contactpagina .contactlinks .kennismaken .kennismakensubtitel {font-size: 13px; }
	.contactpagina .contactlinks .kennismaken .kennismakenblok {  top: 20px;  right: 20px; width: 290px; padding: 25px 35px 20px; }
	.contactpagina .contactlinks .kennismaken {  margin-top: 40px; height: 230px; }
	
	.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: 30px; }
	.contactpagina .contactlinks .info { margin-top: 30px; }
	
	.tabel .kolom1{   width: 35%; }
	.tabel .kolom2{   width: 65%; padding: 0 20px 10px 0;  }
	
	.vakantie { margin: 20px 0 10px; }
}


@media screen and (min-width: 1px) and (max-width: 739px) {
	
	.contactpagina { margin-top: 50px; }
	#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: 22px; }
	.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; padding-top: 5px; }	
	
	.contactpagina .contactlinks .whatsapp { width: 100%; margin-top: 30px; }
	.contactpagina .contactlinks .whatsapp span { font-size: 13px; }
	.contactpagina .contactlinks .whatsapp { font-size: 22px; padding-top: 5px; }
	
	.contactpagina .contactlinks .kennismaken { height: 120px; margin-bottom: 200px; border-radius: 20px 20px 0 0; }
	.contactpagina .contactlinks .kennismaken .kennismakenblok { text-align: center; top: 115px;  left: 0px; width: 100%; padding: 25px 40px 25px; border-radius: 0 0 20px 20px ; }
	.contactpagina .contactlinks .kennismaken .kennismakentitel { font-size: 20px; }
	.contactpagina .contactlinks .kennismaken .kennismakensubtitel { font-size: 14px; }
	.contactpagina .contactlinks .kennismaken .kennismakenlink { margin-top: 5px; }
	
	.contactpagina .contactlinks .adres { margin-top: 40px; width: 100%; padding-left: 45px; padding-right: 100px; }
	
	.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: 35px;   }
	
	#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;  }	
	
	.offertetekst ul {    padding: 20px 0 20px 50px; }
	
	.directofferte{ line-height: 140%; font-size: 12px; padding: 10px 20px 10px 55px; }
	.directofferte:before{ left: 9px; }
	
	.vakantie { margin: 20px 0 10px; }
}