@charset "utf-8";

#contactgegevensdata{ display: none; }

#contactbg{   }



#kruimelpad{  margin-top: 150px;  padding: 20px 0 50px 0; box-sizing: border-box; }
#kruimelpad .content{ font-size: 11px; padding-bottom: 30px; z-index: 1; border-bottom: 1px solid #eee;   }
#kruimelpad .content a{ color: #000;  }
#kruimelpad .content a:hover{  }
#kruimelpad .content .kruimellinks{ opacity: 1; color: #000; height: 20px; line-height: 22px; margin-top: 10px; box-sizing: border-box; padding-left: 45px; background: url(../img/svg-sitemap.svg) no-repeat left center; background-size: 18px auto; }
#kruimelpad .content .kruimellinks:hover{ }
#kruimelpad .content h1{ color: #000; font-size: 36px; box-sizing: border-box;  }
#kruimelpad .content .kruimellinks { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#kruimelpad .centered{	 }
#kruimelpad .volgons { position: absolute; bottom: 25px; right: 10px;  font-size: 14px; font-style: italic; z-index: 1;  }
#kruimelpad .volgons span{ padding-right: 30px; }
#kruimelpad .volgons a.linkedin{ width: 28px; height: 28px; background: url("../img/svg-socialmedia-linkedin.svg") no-repeat; margin-right: 5px; }
#kruimelpad .volgons a.facebook{ width: 28px; height: 28px; background: url("../img/svg-socialmedia-facebook.svg") no-repeat;   background-size: auto 100%;  margin-right: 5px; }
#kruimelpad .volgons a.twitter{ width: 28px; height: 28px; background: url("../img/svg-socialmedia-twitter.svg") no-repeat;   background-size: auto 100%;}
#kruimelpad .volgons a.youtube{ width: 28px; height: 28px; background: url("../img/svg-socialmedia-youtube.svg") no-repeat;   background-size: auto 100%; margin-right: 5px; }
#kruimelpad .volgons a.instagram{ width: 28px; height: 28px; background: url("../img/svg-socialmedia-instagram.svg") no-repeat;  background-size: auto 100%; margin-right: 5px;   }
#kruimelpad .volgons a.tiktok{ width: 28px; height: 28px; background: url("../img/svg-socialmedia-tiktok.svg") no-repeat;  background-size: auto 100%; margin-right: 5px;   }
#kruimelpad .volgons a.youtube:hover{ width: 28px; height: 28px; background: url("../img/svg-socialmedia-youtube-hover.svg") no-repeat;   background-size: auto 100%; }
#kruimelpad .volgons a.instagram:hover{ width: 28px; height: 28px; background: url("../img/svg-socialmedia-instagram-hover.svg") no-repeat;   background-size: auto 100%; }
#kruimelpad .volgons a.linkedin:hover{ width: 28px; height: 28px; background: url("../img/svg-socialmedia-linkedin-hover.svg") no-repeat;   background-size: auto 100%; }
#kruimelpad .volgons a.facebook:hover{ width: 28px; height: 28px; background: url("../img/svg-socialmedia-facebook-hover.svg") no-repeat;   background-size: auto 100%; }
#kruimelpad .volgons a.tiktok:hover{ width: 28px; height: 28px; background: url("../img/svg-socialmedia-tiktok-hover.svg") no-repeat;   background-size: auto 100%; }
#kruimelpad .volgons a:hover{ margin-top: -4px; }

#inhoud.vervolgpagina{ padding: 0px 0 90px 0;  z-index: 2; }
#inhoud.vervolgpagina .centered{	 }
#inhoud.vervolgpagina .centered .container.pagina{	line-height: 220%;  }
#inhoud.vervolgpagina .centered .container.pagina.nocta{  min-height: 570px;  }

#inhoud.vervolgpagina .bg { position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0; overflow: hidden;  }
#inhoud.vervolgpagina #paginaparalax{ position: absolute;  left:-200px;;  top: 0px; width: 1420px; bottom: 0px; }

/*  template gedeeld --------------------------------------- */
#inhoud.vervolgpagina h1{ font-size: 40px;  padding-bottom: 15px;  }
#inhoud.vervolgpagina h2{ font-size: 32px;  padding: 30px 0 15px;  }
#inhoud.vervolgpagina h1 + h2{  padding: 0px 0 20px; }
#inhoud.vervolgpagina h1 + h3{  padding: 0px 0 20px; }
#inhoud.vervolgpagina h3{ font-size: 18px; color: #E14A26; padding: 30px 0 20px; }
#inhoud.vervolgpagina h4{ font-size: 16px; color: #E14A26; }
#inhoud.vervolgpagina h6{ font-weight: 300; font-size: 20px; padding: 40px 120px; box-sizing: border-box; background: #fff; box-shadow: 0 3px 12px rgba(0,0,0,0.05); border-radius: 20px; margin: 40px 0; position: relative; float: left; width: 100%; text-align: center;  font-style: italic; }

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

#inhoud.vervolgpagina a{   color: #000; text-decoration: underline; } 
#inhoud.vervolgpagina .pagina img{   max-width: 100%; height: auto; } 





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

#contact-formulier2 textarea{	border: 1px solid rgba(0,0,0,0.1); background: #fff;	width:100%;	height: 123px;	padding: 25px; box-sizing: border-box;	border-radius: 0;	    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-1.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: #E14A26;     font-family: 'Montserrat', sans-serif; border: 0;	border-radius: 0;	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: #000;   text-decoration: none; ;}


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

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



#contact-left{ z-index: 1; line-height: 180%;  position: absolute; top: 0px; left: 0px; background: #fff;     box-shadow: 0 12px 50px rgba(0,0,0,0.13); border-radius: 0; padding: 250px 50px 250px; width: 360px;  }
#contact-right{ z-index: 0;  padding: 20px 0 0 500px;  }

#contactopnemenbol.contactinformatie{ display: none; }

.contactinfocontainer.afspraak{ margin-top: 90px; }
.contactinfocontainer{ padding: 40px 0 100px;  }
.contactinfocontainer:before{ z-index: 0; position: absolute; top: 0px; left: 0px; right: 0px; height: 150px; border-radius: 0 0 0 0; background: url("../img/visual-menu.jpg") no-repeat top center; background-size: cover;}

.contactinfocontainer .contactinfo{  text-align: center; z-index: 1;  }

.contactinfocontainer .contactinfo.contactpersoon{ width: 100%; padding: 0px 0px 10px 0px;  }
.contactinfocontainer .contactinfo.contactpersoon .subtitel{ font-size: 13px; line-height: 150%;  font-style: italic; font-weight: 500; padding-bottom: 15px; border-bottom: 1px solid #eee; margin-bottom: 15px; }
.contactinfocontainer .contactinfo.contactpersoon .profiel{ position: absolute; top: -220px; right: 50%; margin-right: -90px; width: 170px; height: 170px; border: 10px solid #fff; background: url("../img/logo-vostotaalbouw-avatar.jpg") no-repeat center center; background-size: cover; box-shadow: 0 4px 20px rgba(0,0,0,0.1); border-radius: 100%; }
.contactinfocontainer .contactinfo.contactpersoon span { font-size: 22px; }

.contactinfocontainer .contactinfo span{ font-weight: bold;  }
.contactinfocontainer .contactinfo a{ text-decoration: none!important;  }
.contactinfocontainer .contactinfo a:hover{ text-decoration: underline!important; }

.contactinfocontainer .contactinfo.telefoon { padding: 20px 0 0 0; }
.contactinfocontainer .contactinfo.email { padding: 20px 0 0; }

.contactinfocontainer .contactinfo.socialmedia { padding: 20px 0 0 70px; }
.contactinfocontainer .contactinfo.socialmedia a{ width: 36px; height: 36px; margin-right: 5px;   }
.contactinfocontainer .contactinfo.socialmedia .linkedin{  background: url("../img/svg-socialmedia-linkedin.svg") no-repeat; background-size: auto 100%;  }
.contactinfocontainer .contactinfo.socialmedia .facebook{ background: url("../img/svg-socialmedia-facebook.svg") no-repeat; background-size: auto 100%;  }
.contactinfocontainer .contactinfo.socialmedia .twitter{  background: url("../img/svg-socialmedia-twitter.svg") no-repeat;  background-size: auto 100%; }
.contactinfocontainer .contactinfo.socialmedia .youtube{  background: url("../img/svg-socialmedia-youtube.svg") no-repeat; background-size: auto 100%; }
.contactinfocontainer .contactinfo.socialmedia .instagram{  background: url("../img/svg-socialmedia-instagram.svg") no-repeat;  background-size: auto 100%; }
.contactinfocontainer .contactinfo.socialmedia .tiktok{  background: url("../img/svg-socialmedia-tiktok.svg") no-repeat;  background-size: auto 100%; }
.contactinfocontainer .contactinfo.socialmedia a:hover{ margin-top: -5px; }

.contactinfocontainer .contactinfo.socialmedia .youtube:hover{  background: url("../img/svg-socialmedia-youtube-hover.svg") no-repeat;  background-size: auto 100%; }
.contactinfocontainer .contactinfo.socialmedia .instagram:hover{  background: url("../img/svg-socialmedia-instagram-hover.svg") no-repeat;  background-size: auto 100%; }

.contactinfocontainer .contactinfo.socialmedia .linkedin:hover{  background: url("../img/svg-socialmedia-linkedin-hover.svg") no-repeat;  background-size: auto 100%; }
.contactinfocontainer .contactinfo.socialmedia .facebook:hover{  background: url("../img/svg-socialmedia-facebook-hover.svg") no-repeat;  background-size: auto 100%; }
.contactinfocontainer .contactinfo.socialmedia .tiktok:hover{  background: url("../img/svg-socialmedia-tiktok-hover.svg") no-repeat;  background-size: auto 100%; }

.contactoptieblok{ border-radius: 0px; padding: 40px 40px 0 170px; height: 145px; width: 100%; margin: 20px 0 20px; line-height: 150%;  background: #fff; box-shadow: 0 12px 50px rgba(0,0,0,0.13); }
.contactoptieblok:before{ position: absolute; top: 0px; left: 0px; width: 130px; bottom: 0px; border-radius: 0 0 0 0; }
.contactoptieblok:before{ transition: all .2s linear;    -o-transition: all .2s linear;    -moz-transition: all .2s linear;    -webkit-transition: all .2s }
.contactoptieblok .title{ font-weight: bold; font-size: 26px; padding-bottom: 5px; }


.contactoptieblok.whatsapp:before{  background: #E14A26 url("../img/svg-whatsapp-wit.svg") no-repeat center center; background-size: auto 55px; }
.contactoptieblok.offerte:before{  background: #1A1818 url("../img/svg-offerte.svg") no-repeat center center; background-size: auto 50px;  }
.contactoptieblok.boeken:before{  background: #1A1818 url("../img/svg-offerte.svg") no-repeat center center; background-size: auto 50px;  }
.contactoptieblok.faq:before{  background: #E14A26 url("../img/svg-info.svg") no-repeat center center; background-size: auto 55px; }

.contactoptieblok:hover{  box-shadow: 0 12px 20px rgba(0,0,0,0.23);  }
.contactoptieblok.offerte:hover:before{  background-color: #1A1818;  }
.contactoptieblok.boeken:hover:before{  background-color: #1A1818;  }
.contactoptieblok.whatsapp:hover:before{  background-color: #1A1818;  }
.contactoptieblok.faq:hover:before{  background-color: #1A1818;  }


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


@media screen and (min-width: 1320px) and (max-width: 1660px) {
	#contact .bg:after { display: none; }
	
	#contact-left{   padding: 250px 50px 250px; width: 350px;  }
	#contact-right{   padding: 20px 0 0 460px;  }
	
	.contactoptieblok { width: 100%; height: 140px; padding: 25px 40px 0 170px;    margin: 10px 0 10px; }
	.contactoptieblok .title { padding-bottom: 10px; }
	
	.contactinfocontainer .contactinfo.socialmedia { padding: 20px 0 0 50px; }
}

@media screen and (min-width: 1024px) and (max-width: 1319px) {
	
	#kruimelpad {		margin-top: 120px; }
	
	#contact-left{   padding: 190px 50px 250px; width: 250px;  }
	#contact-right{   padding: 20px 0 0 330px;  }
	.contactinfocontainer .contactinfo.contactpersoon .profiel { top: -160px;  margin-right: -65px;  width: 110px; height: 110px; }
	.contactinfocontainer:before{  height: 130px; }
	.contactinfo { font-size: 14px; }
	.contactinfo.adres { line-height: 160%; }
	.contactinfocontainer .contactinfo.socialmedia {    padding: 20px 0 0 25px; }
	.contactinfocontainer .contactinfo.socialmedia a {    width: 24px;		height: 24px; }
	
	.contactoptieblok { width: 100%; height: 120px; padding: 25px 40px 0 170px;   margin: 10px 0 10px; font-size: 14px; line-height: 160%; }
	.contactoptieblok .title { padding-bottom: 5px; }

	.contactinfocontainer:after{ z-index: 0; position: absolute; top: 50px; left: 150px; width: 120px; height: 120px;}


	.tabel .kolom1 { width: 40%; }
	.tabel .kolom2 { width: 60%; }
	.tabel .kolom2{  padding: 0 0 10px 0;  }
	
	#contact:before { width: 70%; }
	#contact .bg { display: none; }
}

@media screen and (min-width: 740px) and (max-width: 1023px) {
	
	#kruimelpad {		margin-top: 120px; }
	#kruimelpad { padding: 20px 0 0px 0; }
	#kruimelpad .volgons { right: 10px; }
	#kruimelpad .content { border-bottom: 0; }
	
	#inhoud.vervolgpagina h1{ font-size: 32px; }
	#inhoud.vervolgpagina h2{ font-size: 23px;  padding: 10px 0 20px; }
	
	#contact-left{   position: relative; float: left; top: auto; padding: 30px 30px 40px 200px; width: 100%;  }
	#contact-right{   padding: 60px 0 0 0px;  }
	
	.contactinfocontainer:before{  height: auto; right: auto; width: 130px; bottom: 0px; border-radius: 0; }
	.contactinfocontainer:before{ background: none;}
	
	.contactinfocontainer:after{ display : none; }

	
	.contactinfocontainer .contactinfo.contactpersoon .profiel { right: auto; margin-right: auto; left: -160px; top: 0px; width: 100px; height: 100px; }
	.contactinfocontainer .contactinfo { text-align: left; }
	.contactinfocontainer .contactinfo.socialmedia {  display: none; }
	.contactinfocontainer .contactinfo.contactpersoon span { font-size: 22px; }
	.contactinfocontainer .contactinfo.contactpersoon .subtitel { padding-bottom: 10px;  margin-bottom: 10px; }
	#map_container { bottom: auto; top: 0px; right: 0px; left: auto; width: 240px; height: 100%; border-radius: 0px; }
	
	.contactoptieblok { width: 100%; height: 120px; padding: 25px 40px 0 170px;  margin: 10px 0 10px; font-size: 14px; line-height: 160%; }
	.contactoptieblok .title { padding-bottom: 5px; }
	.contactoptieblok.whatsapp { margin-bottom: 10px; }
	.contactoptieblok.faq { margin-bottom: 40px; }
	
	.tabel .kolom1{   width: 35%; }
	.tabel .kolom2{   width: 65%; padding: 0 20px 10px 0;  }
	
	#contact:before { height: 650px; width: 100%; top: -30px; left: -50px;  }
	#contact .bg { display: none; }
	
}


@media screen and (min-width: 1px) and (max-width: 739px) {
	
	#kruimelpad { display: none;  }

	#inhoud.vervolgpagina {    padding: 0 0 0px; margin-top: 40px; }
	#inhoud.vervolgpagina h1{ font-size: 18px; padding: 0 0 10px;  }
	#inhoud.vervolgpagina h2{ font-size: 16px;  padding: 10px 0 10px; }

	#contact-left{   position: relative; float: left; top: auto; padding: 200px 30px 200px 30px; width: 100%;  }
	#contact-right{   padding: 60px 0 0 0px;  }
	
	.contactinfocontainer:before{  height: 120px; background-size: cover;  }
	.contactinfocontainer:after {  top: 50px; left: 170px; width: 120px; height: 120px; }	
	
	.contactinfocontainer .contactinfo { line-height: 170%; }
	.contactinfocontainer .contactinfo.contactpersoon span { font-size: 20px; }
	.contactinfocontainer .contactinfo.contactpersoon .profiel { top: -160px; margin-right: -70px; width: 120px; height: 120px; }
	.contactinfocontainer .contactinfo.socialmedia {    padding: 20px 0 0 40px; }
	.contactinfocontainer .contactinfo.contactpersoon .subtitel { padding-bottom: 10px;  margin-bottom: 10px; }
	#map_container {  height: 150px; }
	
	.contactoptieblok { width: 100%; text-align: center; font-size: 13px; height: auto; padding: 110px 30px 30px 30px;    margin: 10px 0;  line-height: 160%; }
	.contactoptieblok:before { width: 100%; height: 80px; bottom: auto; border-radius: 0 0 0 0; }
	.contactoptieblok .title { padding-bottom: 5px; font-size: 18px; }
	.contactoptieblok.faq { margin-bottom: 40px; }
	.contactoptieblok.whatsapp:before{  background-size: auto 35px; }
	.contactoptieblok.offerte:before{ background-size: auto 30px;  }
	
	
	#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%; }
	.verplicht { text-align: center; }
	
	.tabel .kolom1{   width: 100%; text-align: left; padding: 0; }
	.tabel .kolom2{   width: 100%; padding: 0 0 10px 0;  }
	.tabel .rij.submit .kolom1{   display: none;  }
	
	#contact:before { height: 650px; width: 100%; top: -30px; left: -50px;  }
	#contact .bg { display: none; }
	
}