*,
*::before,
*::after {box-sizing: border-box;}
body{margin: 0; padding: 0}
body {min-height: 100vh;scroll-behavior: smooth;text-rendering: optimizeSpeed;line-height: 1.5;}
img {max-width: 100%;display: block;}

.schaduw {text-shadow: 1px 3px 2px #000000;}
img .bodem{position: relative; bottom: 0}
hr {border: 1px dotted; color: #FFFFFF}
hr.wit {border: 1px dotted; color: #FFFFFF}
hr.grijs {border: 1px dotted; color: #C9C1C1}
hr.rood {border: 1px dotted; color: #be1522}
hr.zwart {border: 1px dotted;  color: #000000}	

html {margin: 0;padding: 0;scroll-behavior: smooth; }
body {margin: 0;padding: 0;font-family: 'Shippori', Calibri, Arial, Helvetica, sans-serif; }
img {max-width: 100%;height: auto; margin: 0; padding: 0;}
img.center {display: block;margin-left: auto;margin-right: auto;}
img.rechts {float: right;}
img.rond {border-radius: 2%;}
div.rond {border-radius: 2%;}

.wit {background: #FFFFFF}
.rood {background: #be1522;
background: rgb(190,21,34);
background: -moz-linear-gradient(90deg, rgba(190,21,34,1) 0%, rgba(234,15,32,1) 100%);
background: -webkit-linear-gradient(90deg, rgba(190,21,34,1) 0%, rgba(234,15,32,1) 100%);
background: linear-gradient(90deg, rgba(190,21,34,1) 0%, rgba(234,15,32,1) 100%);}
.grijs {background: #C9C1C1}
.zwart {background-color: #000000;	
background: rgb(0,0,0);
background: -moz-linear-gradient(90deg, rgba(0,0,0,1) 0%, rgba(29,29,29,1) 100%);
background: -webkit-linear-gradient(90deg, rgba(0,0,0,1) 0%, rgba(29,29,29,1) 100%);
background: linear-gradient(90deg, rgba(0,0,0,1) 0%, rgba(29,29,29,1) 100%);	
}
.t-wit {color: #FFFFFF}
.t-rood {color: #be1522}
.t-grijs {color: #C9C1C1}
.t-zwart {color: #1d1d1b}
.main {margin: 0;padding: 0;float: left;width: 100%;}
.inntekst {padding: 0 13% 0 40%;}
.center {align-items: center;text-align: center; }
.links {text-align: left;}
.rechts {text-align: right;}
.inlinks {float: left;width: 50%;box-sizing: border-box;padding:0 5% 0 0 }
.inrechts {float: left;width: 50%;box-sizing: border-box;padding:0 2% 0 1%; }
.inlinks-klein {float: left;width: 40%;box-sizing: border-box;padding-right: 5%;padding-left: 0 }
.inlinks-groter {float: left;width: 55%;box-sizing: border-box;padding:0 0 3% 0; }
.inrechts-kleiner {float: left;width: 30%;box-sizing: border-box;padding-right: 0;padding-left: 5%; margin-left: 15%}
.inrechts-groot {float: left;width: 70%;box-sizing: border-box;padding:0 0 3% 0; }
.bruit, .bruiter {display: none; }     
.inn {float: left;width: 100%;box-sizing: border-box; padding: 0 13% 0 13%;}
.inll {float: left;width: 30%; }
.inmm {float: left;width: 40%;box-sizing: border-box;padding-right: 5%;padding-left: 5%; }
.inrr {float: left;width: 30%; }

	
.knopwit a {color:#ffffff; border-color:#ffffff; padding: 14px 25px;margin: 30px 0 0 0; text-align: center;text-decoration: none;box-sizing: border-box; border: 3px solid;border-radius: 4px;display: inline-block;}	
.knopwit a:hover {background-color: #ffffff;color:#000000; border-color:#ffffff;}
		
.knopzwart a {color:#000000; border-color:#000000; padding: 14px 25px;margin: 30px 0 0 0; text-align: center;text-decoration: none;box-sizing: border-box; border: 3px solid;border-radius: 4px;display: inline-block;}	
.knopzwart a:hover {background-color: #000000;color:#ffffff; border-color:#000000;}
	
.marquee {width: 100vw; float: left;max-width: 100%;box-sizing: border-box; padding:2% 0 2% 0; overflow-x: hidden;}

.track {float: left; white-space: nowrap; will-change: transform; animation: marquee 20s linear infinite;}

@keyframes marquee {from { transform: translateX(0); } to { transform: translateX(-50%); }}	
	
.socialt {width: 100%;height: 100%;object-fit: cover;}
.kwartje {float: left;width: 24%;box-sizing: border-box; padding:0; margin: 0 0 0 1%}
		
.inrechtst{float: left;width: 36%;padding: 5px 0 10px 0 ;margin: 0;box-sizing: border-box}
.inlinkst{float: left;width: 64%;padding: 15px 0 10px 0;margin: 0;box-sizing: border-box}
	
.inl-foot{float: left;width: 28%;padding: 0;margin: 0;box-sizing: border-box}
.inr-foot-in{float: left;width: 72%;padding: 0;margin: 0;box-sizing: border-box}
.inr-foot{float: left;width: 50%;padding:0;margin: 0;box-sizing: border-box}
	
	
.linkerkant {float: left;width: 50%;box-sizing: border-box;padding:0 2% 0 5% }
.rechterkant {float: right;width: 50%;box-sizing: border-box;padding:0 }
	
.linkerkant-foot {float: left;width: 50%;box-sizing: border-box;padding:0;margin:0}
.rechterkant-foot {float: right;width: 50%;box-sizing: border-box;padding:0;margin:0}

.mobiel-weg {display: none; }
.weg {display: none; }
.M-weg {display: block;}

.in-men {float: left;width: 100%;box-sizing: border-box; padding: 0 2% 0 2%;}
.in-menl {float: left;width: 18%; box-sizing: border-box; padding:2% ;margin:0}
.in-menm {float: left;width: 62%;box-sizing: border-box;padding-right: 5%;padding-left: 5%; }
.in-menr {float: right;width: 18%; box-sizing: border-box; padding:2% ;margin:0}
nav {position: sticky;  top: 0px; width: 100%;padding: 0;box-sizing: border-box; z-index: 99}

.topnav a {color: #ffffff;text-align: center;padding: 5px 12px 10px 12px;text-decoration: none;font-size: 25px;margin: 0 0 4px 0}
.topnav a:hover {color: #EF0F13;text-decoration: none}
.topnav a.active {background-color: #ffffff;color: white;text-decoration: underline}
.topnav {overflow: hidden; float: right;}
.botnav {overflow: hidden; float: left;}

.navi-links {float: left;width: 40%;padding: 0;}
.navi-rechts {float: right;width: 60%;padding: 0;}
.foot-links, .footfoot-links {float: left;width: 60%;padding: 0;box-sizing: border-box}
.foot-rechts, .footfoot-rechts {float: left;width: 40%;padding: 0;box-sizing: border-box}
.project-links {float: left;width: 50%;padding: 0 5% 0 0;box-sizing: border-box}
.project-rechts {float: left;width: 50%;padding: 0 0 0 5%;box-sizing: border-box}
.na-boks {float: left; width: 100%; height: 150px; padding: 0;box-sizing: border-box}
header .logo img{width:100%; transition:width 0s ease-in-out 0.3s; margin:0;padding:0}
header.fixed-header .logo img{width:70%;margin:0;box-sizing: border-box;padding:0}  
.afgerond {border-radius: 4px;display: inline-block;}
.padrondom{padding: 3% 0% 3% 4%}
.padboven50{padding-top: 40px}
.padboven100{padding-top: 80px}
.padonder50{padding-bottom: 40px}
.padonder100{padding-bottom: 80px} 
.linkwit {overflow: hidden;}
a.linkwit, a.linkwit:link {color: #ffffff;padding: 0 15px 0 0;text-decoration: none;font-size: 16px;}
a.linkwit:hover {color: #EF0F13;text-decoration: none}
a.linkwit.active {background-color: #ffffff;color: white;text-decoration: underline}	
.linkgrijs {overflow: hidden;}
a.linkgrijs, a.linkgrijs:link {color: #ffffff;padding: 0 15px 0 0;text-decoration: none;font-size: 16px;}
a.linkgrijs:hover {color: #EF0F13;text-decoration: none}
a.active {background-color: #ffffff;color: white;text-decoration: underline}
.naviboven {padding: 8px 0 0 0;}
.top-container {background-color: #f1f1f1;padding: 30px;text-align: center;}
footer {width: 100%; padding: 0;box-sizing: border-box;}
	
.intek {padding: 0 13% 0 50%;}

.vertical-center {margin: 0;position: absolute;left: 50%;top: 40%;transform: translateY(-50%);transform: translateX(-50%);}
hr.foot {border-top: 1px dotted red;}
.tabl-ja {display: none;}	
img.rond {border-radius: 2%;box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;}
img.ruimte {margin: 1px 0 0 0}
.collapsible {background-color: #ffffff; cursor: pointer;padding: 2% 0 2% 0;width: 100%;border: none;border-top: 1px dotted; border-top-color: #C9C1C1;color: #000000;text-align: left;outline: none;font-size: 45px;
}
.collapsible:last-child {border: none;border-bottom: 1px dotted; border-top-color: #C9C1C1;}
.active, .collapsible:hover {background-color: #ffffff;color: #be1522}
.collapsible:after {content: '\002B';color: #be1522;font-weight: bold;float: right;margin-left: 5px;}
.active:after {content: "\2212";}
.content {padding: 0;max-height: 0;overflow: hidden;transition: 0.2s ease-out;}
.collapsible {font-size: 45px;}


.cata-wit, a.cata-wit {color:#ffffff;background: #000000; transform: scale(1);margin: 30px 0 0 0; padding: 3% 6% 3% 5%;border: none;border-radius: 4px;text-align: center;text-decoration: none;font-size: 20px} 
.cata-wit:hover, a.cata-wit:hover {transform: scale(1)}

.cata-zwart, a.cata-zwart {color:#000000;background: #ffffff; transform: scale(1);margin: 30px 0 0 0; padding: 3% 6% 3% 5%;border: none;border-radius: 4px;text-align: center;text-decoration: none;font-size: 20px} 
.cata-zwart:hover, a.cata-zwart:hover {transform: scale(1)}

p a.belmailwit:link {color:#FFFFFF;}
p a.belmailwit:visited {color:#FFFFFF;}
p a.belmailwit:hover {text-decoration:underline;color:#FFFFFF;}
p.belmailwit a:link {text-decoration:none;color:#FFFFFF;}
p.belmailwit a:visited {text-decoration:none;color:#FFFFFF;}
p.belmailwit a:hover {text-decoration:underline;color:#FFFFFF;}

p a.belmaillicht:link {color:#6699cc;}
p a.belmaillicht:visited {color:#6699cc;}
p a.belmaillicht:hover {text-decoration:underline;color:#6699cc;}
p.belmaillicht a:link {text-decoration:none;color:#6699cc;}
p.belmaillicht a:visited {text-decoration:none;color:#6699cc;}
p.belmaillicht a:hover {text-decoration:underline;color:#6699cc;}
	
.centert {position: absolute;top: 50%;left: 25%;transform: translate(-50%, -50%);}
.linksert {position: absolute;bottom: 10%;left: 25%;transform: translate(-50%, -50%);width:100%;box-sizing: border-box; padding: 4% 13% 4% 13%;}
	
.kwartje {float: left;width: 22%;box-sizing: border-box; padding:3% 5% 4% 5%; margin: 1.5%}
	

@media screen and (max-width: 1600px) { 
.topnav a {padding: 5px 12px 10px 12px;text-decoration: none;font-size: 24px;}
.gaatopen {font-size: 45px;} 
.padboven50{padding-top: 40px}
.padboven100{padding-top: 80px}
.padonder50{padding-bottom: 40px}
.padonder100{padding-bottom: 80px} 

}
@media screen and (max-width: 1500px) { 
.topnav a {padding: 5px 11px 10px 11px;text-decoration: none;font-size: 23px;}
.gaatopen {font-size: 45px;} 
.padboven50{padding-top: 30px}
.padboven100{padding-top: 70px}
.padonder50{padding-bottom: 30px}
.padonder100{padding-bottom: 70px} 

}
@media screen and (max-width: 1400px) {
.inner-header {height:45vh;width:100%;margin: 0;padding: 30px 0 0 0;}    
.topnav a {padding: 5px 11px 5px 11px;text-decoration: none;font-size: 21px;}
.gaatopen {font-size: 40px;} 
.padboven50{padding-top: 25px}
.padboven100{padding-top: 65px}
.padonder50{padding-bottom: 25px}
.padonder100{padding-bottom: 65px} 

}
@media screen and (max-width: 1300px) {
.topnav a {padding: 5px 10px 5px 10px;text-decoration: none;font-size: 20px;}
.gaatopen {font-size: 40px;} 
.padboven50, .padonder50{padding-bottom: 30px} 
.padboven100, .padonder100{padding-bottom: 60px} 
.navi-links {float: left;width: 40%;padding: 0;}
.navi-rechts {float: right;width: 60%;padding: 0;}
}
@media screen and (max-width: 1200px) {  
.topnav a {padding: 5px 9px 4px 9px;text-decoration: none;font-size: 19px;} 
.gaatopen {font-size: 38px;} 
.padboven50, .padonder50{padding-bottom: 30px} 
.padboven100, .padonder100{padding-bottom: 60px} 
}
@media screen and (max-width: 1100px) {  
.topnav a {padding: 5px 9px 4px 9px;text-decoration: none;font-size: 18px;} 
.gaatopen {font-size: 38px;}  
.padboven50, .padonder50{padding-bottom: 25px} 
.padboven100, .padonder100{padding-bottom: 50px}  

}
@media screen and (max-width: 1000px) {  
.topnav a {padding: 5px 8px 4px 8px;text-decoration: none;font-size: 17px;}  
.overlay a {font-size: 40px}	
.overlay .closebtn, .gaatopen {font-size: 36px} 
.padboven50, .padonder50{padding-bottom: 25px} 
.padboven100, .padonder100{padding-bottom: 50px} 
.inlinks-groter {float: left;width: 90%;box-sizing: border-box;padding:0 0 3% 0; }
.inrechts-kleiner {float: left;width: 100%;box-sizing: border-box;padding-right: 0;padding-left: 5%; margin-left: 10%}
.collapsible {font-size: 35px;}

}
@media screen and (max-width: 900px) {
header.fixed-header .logo img{width:85%;margin:0;box-sizing: border-box;padding:0} 
.topnav a {padding: 5px 6px 3px 6px;text-decoration: none;font-size: 15px;} 
.overlay a {font-size: 29px}	
.overlay .closebtn, .gaatopen {font-size: 31px} 
.tabl-weg {display: none;}
.tabl-ja {display: block;}
.bruiter {display: block } 
.inntabl {float: left;width: 100%;box-sizing: border-box; padding: 0 9% 0 9%;}
.padboven50, .padonder50{padding-bottom: 25px} 
.padboven100, .padonder100{padding-bottom: 50px} 
.inlinks-groter {float: left;width: 100%;box-sizing: border-box;padding:0 0 3% 0; }
.inrechts-kleiner {float: left;width: 100%;box-sizing: border-box;padding-right: 0;padding-left: 5%; margin-left: 10%}

}


@media screen and (max-width: 800px) {
.inll, .inmm, .inrr, .inlinks, .inrechts {float: left;width: 100%;box-sizing: border-box;padding-right: 0%;padding-left: 0%}
	.grootlogo{position: fixed; width: 30%;display: block;z-index: 999;padding: 2px 0 0 2%}
header.fixed-header .logo img{width:35%;margin:0;box-sizing: border-box;padding:0}   
.topnav a {padding: 5px 4px 3px 4px;text-decoration: none;font-size: 13px;} 
.overlay a {font-size: 30px}	
.overlay .closebtn, .gaatopen {font-size: 35px} 
.bruiter {display: block } 
.padboven50, .padonder50{padding-bottom: 25px} 
.padboven100, .padonder100{padding-bottom: 50px} 
	.collapsible {font-size: 25px}
	
.padrondom{padding: 15px 8px 5px 20px}
.weg {display: block;}
.M-weg {display: none;}
.inn, .inntabl {float: left;width: 100%;box-sizing: border-box; padding: 0 5% 0 5%;}  
.inrechts {float: left;width: 100%;box-sizing: border-box;padding-right: 4%;padding-left: 4%; }           
.vertical-center {margin: 0;position: absolute;left: 50%;top: 25%;transform: translateY(-50%);transform: translateX(-50%);}
	.middenmobiel {display: block;margin-left: auto;margin-right: auto;}
.padboven50, .padonder50{padding-bottom: 25px} 
.padboven100, .padonder100{padding-bottom: 50px}     
.mobleft  {text-align: left;}   
.mobright  {text-align: right;} 
.mobcent  {text-align: center;}    
.inrechts-kleiner {float: left;width: 100%;box-sizing: border-box;padding: 0; margin: 0 5% 0 0}
.inrechts-groot {float: left;width: 100%;box-sizing: border-box;padding:0 0 3% 0; } 
.in {clear: both;float: left;background-color: #000000;width: 100%; padding: 110px 10% 55px 10%; }
.inl {float: left;width: 100%; }
.inm{float: left;width: 100%;box-sizing: border-box;padding: 0;}
.inr {float: left;width: 100%; } 	
.inll {float: left;width: 100%; }
.inmm {float: left;width: 100%;box-sizing: border-box;padding-right: 0%;padding-left: 0%; }
.inrr {float: left;width: 100%; }	
.topnav a {padding: 0;text-decoration: none;font-size: 12px;} 
.overlay-links, .overlay-rechts {float: left; width: 2%;}
.overlay-midden {float: left; width: 94%;}
.navi-links {float: left;width: 70%;box-sizing: border-box;padding: 2% 0 0 0;}       
.navi-rechts {float: right;width: 30%;box-sizing: border-box;padding: 2% 0 0 0;}		
.bgfoot {min-height: 300px;background-image: url("https://vanvoordenbouw.nl/img/pixel.png");background-repeat: no-repeat;background-position: center top 5px;}		
.foot-links {float: left;width: 100%;padding: 0;box-sizing: border-box}
.foot-rechts {float: left;width: 100%;padding: 0;box-sizing: border-box}	
.footfoot-links {float: left;width: 50%;padding: 0;box-sizing: border-box}
.footfoot-rechts {float: left;width: 50%;padding: 0;box-sizing: border-box}	
.project-links {float: left;width: 100%;padding: 0;box-sizing: border-box}
.project-rechts {float: left;width: 100%;padding: 5% 0 0 0;box-sizing: border-box}
header .logo img{width:100%; transition:width 2s ease-in-out 0.8s; margin:0;padding:0}
header.fixed-header .logo img{width:100%;;margin:0;box-sizing: border-box;padding:0}  
.bruit {display: block } 
.inlinks, .inrechts {float: left;width: 100%;box-sizing: border-box;padding:0}
	.inrechtst{float: left;width: 100%;padding: 5px 0 10px 0 ;margin: 0;box-sizing: border-box}
.inlinkst{float: left;width: 64%;padding: 15px 0 10px 0;margin: 0;box-sizing: border-box}
	
.inl-foot{float: left;width: 28%;padding: 0;margin: 0;box-sizing: border-box}
.inr-foot-in{float: left;width: 72%;padding: 0;margin: 0;box-sizing: border-box}
.inr-foot{float: left;width: 100%;padding:0;margin: 0;box-sizing: border-box}
	
.linkerkant {float: left;width: 100%;box-sizing: border-box;padding:0 2% 0 5% }
.rechterkant {float: right;width: 100%;box-sizing: border-box;padding:0 }
	
.linkerkant-foot {float: left;width: 100%;box-sizing: border-box;padding:0}
.rechterkant-foot {float: right;width: 100%;box-sizing: border-box;padding:0}
	
.jojo {position: fixed;bottom: 30px;}

}


@media screen and (max-width: 1000px) {.navigatie {height: 80px} }
@media screen and (max-width: 900px) {.navigatie {height: 75px} }
@media screen and (max-width: 800px) {.navigatie {height: 65px;box-sizing: border-box;padding: 0 2% 0 2%} }
@media screen and (max-width: 700px) {.navigatie {height: 60px;box-sizing: border-box;padding: 0 2% 0 2%} }
@media screen and (max-width: 600px) {.navigatie {height: 88px;box-sizing: border-box;padding: 0 2% 0 2%} }
@media screen and (max-width: 500px) {.navigatie {height: 78px;box-sizing: border-box;padding: 0 2% 0 2%} }
@media screen and (max-width: 450px) {.navigatie {height: 74px;box-sizing: border-box;padding: 0 2% 0 2%} }
@media screen and (max-width: 400px) {.navigatie {height: 66px;box-sizing: border-box;padding: 0 2% 0 2%} }
@media screen and (max-width: 350px) {.navigatie {height: 60px;box-sizing: border-box;padding: 0 2% 0 2%} }