*, *::before, *::after {box-sizing: border-box;}
body {line-height: 1;}
img.center {display: block;margin-left: auto;margin-right: auto;}
img.rechts {float: right;}
.img {aspect-ratio: 16 / 9;width: 100%;object-fit: cover;}
.t-rood, body.dark .t-rood{color: #D30508;}
body {background-color: #000033;}
.resp-im {max-width: 100%;height: auto;display: block;}
.centered {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);}	
p.con {text-decoration:none;color:#f2f1f6;}
p.con a:link {text-decoration:none;color:#f2f1f6;}
p.con a:visited {text-decoration:none;color:#f2f1f6;}
p.con a:hover {text-decoration:none;color:#f2f1f6;}

p.cont {text-decoration:none;color:#000033;}
p.cont a:link {text-decoration:none;color:#000033;}
p.cont a:visited {text-decoration:none;color:#000033;}
p.cont a:hover {text-decoration:none;color:#000033;}

.wit {background: #f2f1f6}
.zwart, .zwarts {background-color : #000033; background: #000033;
background: linear-gradient(90deg,rgba(0, 0, 51, 1) 10%, rgba(24, 25, 71, 1) 90%);}

.t-wit {color: #f2f1f6}
.t-zwart {color: #000033}
hr.wit {border: 1px solid; color: #f2f1f6;padding: 0; margin: 0}

.main {margin: 0;padding: 0;float: left;width: 100%;}
.center {align-items: center;text-align: center; }
.links {text-align: left;}
.rechts {text-align: right;}
.bruit {display: none;}  
.M-weg {display: block;}

video {width: 100%;height: auto;float: left;z-index: 1}

.volmidden {position: absolute;top: 50%;left: 50%;width: 70%; transform: translate(-50%, -50%); box-sizing: border-box; padding: 0 1% 0 1%;}
	
body.dark .trank{opacity: 0.5}
.trank{opacity: 0.3}
.voltrank{opacity: 1}

.marge{margin: 10% 0 0 0}
.mainrechts{float: right;width: 50%;padding: 0 ;margin: 0;box-sizing: border-box}
.mainlinks{float: left;width: 50%;padding: 0;margin: 0;box-sizing: border-box}

.inlinks-klein{float: left;width: 30%;padding: 0;margin: 0}
.inrechts-groot{float: left;width: 70%;padding: 0;margin: 0;box-sizing: border-box}
.inlinks-groot{float: left;width: 70%;padding: 0;margin: 0;box-sizing: border-box}
.inrechts-klein{float: left;width: 30%;padding: 0;margin: 0}
.inrechts{float: left;width: 50%;padding: 0 ;margin: 0;box-sizing: border-box}
.inlinks{float: left;width: 50%;padding: 0 5% 0 0;margin: 0;box-sizing: border-box}
.inrechtst{float: left;width: 30%;padding: 5px 0 20px 0 ;margin: 0;box-sizing: border-box}
.inlinkst{float: left;width: 70%;padding: 15px 0 20px 0;margin: 0;box-sizing: border-box}

.inn {float: left;width: 100%;box-sizing: border-box; padding: 0 13% 0 13%;}

.stillinn {float: left;width: 100%;box-sizing: border-box; padding: 0 12.8% 0 12.8%;}
.still {float: left;width: 31.333%;box-sizing: border-box; padding:0; margin: 1%}
.kwart {float: left;width: 20%;box-sizing: border-box; padding:0; margin: 0}
.kwartruimte {float: right;width: 5%;box-sizing: border-box; padding:0; margin: 0}
.kwartje {float: right;width: 15%;box-sizing: border-box; padding:0; margin: 0}

.container, body.dark .container {position: relative;text-align: left;width: 100%;box-sizing: border-box; padding:0;border: 2px solid;border-radius: 8px}
.container {border-color:#000033;background-color:#000033;}

.cata-wit, a.cata-wit {color:#f2f1f6;background: #000033; transform: scale(1);margin: 30px 0 0 0; padding: 3% 3% 3% 3%;border: none;border-radius: 4px;text-align: center;text-decoration: none;font-size: 20px} 
.cata-wit:hover, a.cata-wit:hover {color:#000033;background: #f2f1f6;transform: scale(1)}
	
.cata-zwart, a.cata-zwart {color:#000033;background: #f2f1f6; transform: scale(1);margin:0; ;box-sizing: border-box;padding:3% 2%;border: none;border-radius: 4px;text-align: center;text-decoration: none;font-size: 20px} 
.cata-zwart:hover, a.cata-zwart:hover {color:#f2f1f6;background: #000033;transform: scale(1)}

.meerpad{padding: 0 9% 0 9%}
.container {position: relative;text-align: center;color: #f2f1f6;}
.bottom-left {position: absolute;bottom: 8px;left: 16px;}
.top-left {position: absolute;top: 8px;left: 16px;}
.top-right {position: absolute;top: 8px;right: 16px;}
.bottom-right {position: absolute;bottom: 8px;right: 16px;}
.centerd {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);}
.kwart {float: left;width: 20%;box-sizing: border-box; padding:0; margin: 0}
.container, body.dark .container {position: relative;text-align: left;width: 100%;box-sizing: border-box; padding:0;border: 2px solid;border-radius: 8px}
.container {border-color:#000033;background-color:#000033;}

.ronder {border-radius: 50%}


.full {width: 100%;height: 100vh;overflow:hidden;}

.dot {position: absolute;width:142vmax;height:142vmax;left:50%;top:50%;transform:translate(-50%, -50%) scale(0);border-radius: 50%;background-color:#000033;z-index: 2}

.centert {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);}
.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: #f2f1f6;padding: 0 15px 0 0;text-decoration: none;font-size: 16px;}
a.linkwit:hover {color: #f2f1f6;text-decoration: none}
a.linkwit.active {background-color: #f2f1f6;text-decoration: underline}	
.tabl-ja {display: none;}


.menu-button{
	position:fixed;
	background-color: #D30508;
    outline:none;
    border:3px solid #D30508;
    border-radius:50%;
    padding: 0;
    top: 15px;
	right: 15px;
    width: 60px;
    height: 60px;
    cursor: pointer;
    color:white;
	z-index: 190;
	
	


}
nav {
    display: flex;
    flex-flow: column wrap;
    justify-content: center;
    align-content: center;
    align-items: center;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #000033;
	z-index: 100;
    transform: translate3d(-100%, 0, 0);
}
nav ul {
    display: flex;
    flex-flow: column wrap;
    justify-content: center;
    align-content: center;
    align-items: center;
    position: fixed;    
	list-style:none;}
nav ul  li {
    font-weight:500;
    visibility:hidden;}	
.skew{
  clip-path: polygon(0 0, 100% 0, 90% 100%, 0 100%);
}
.vertical {    
   clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}
.skewback {
  clip-path: polygon(0 0, -100% 0, 100% 100%, 0 100%);
}
	
	
	

.hamburger{position: relative;top: 6px;left: auto;right: 0px;width: 32px;cursor:pointer;z-index:6;}
.hamburger line{stroke:#ffffff;stroke-width: 6px;}
	
.navi-links {float: left;width: 25%;box-sizing: border-box;padding: 15px 0 15px 0;}
.navi-rechts {float: right;width: 75%; box-sizing: border-box;  padding:1px 0 15px 0;}
	
.topnav a {padding: 0;font-size: 25px;margin: 0;overflow: hidden; float: right;}	

.navbar{position: fixed;width: 100%;top:0;left: 0;transition: 0.6s; z-index: 3;box-sizing: border-box; padding: 0}
.scrolled{color: #000033;background-color : #000033;box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);transition: 0.6s;}
	
.lijntjes {display: inline-block;position: relative;}
.lijntjes:after {background: none repeat scroll 0 0 transparent;bottom: 0;content: "";display: block;height: 5px;left: 50%;position: absolute;background-color: #be1522;transition: width 0.3s ease 0s, left 0.3s ease 0s;width: 0;}
.lijntjes:hover:after {width: 100%; left: 0;}

.knopwit a {color:#ffffff; border-color:#ffffff; padding: 14px 25px;margin: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:#000033; border-color:#ffffff;}
.knopzwart a {color:#000033; border-color:#000033; padding: 14px 25px;margin: 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: #000033;color:#ffffff; border-color:#000033;}
	
.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;}

ul li, ul.b, ul.z { list-style-type: none;float: right;margin: 0;padding: 0;overflow: hidden;}
ul li.b a {display: block;text-align: center;padding: 14px 8px 14px 8px;margin: 0 15px 0 0;text-decoration: none;box-sizing: border-box; border: 3px solid;border-radius: 4px;border-color: transparent;color: #ffffff}
ul li.b a:hover {box-sizing: border-box; border: 3px solid;border-radius: 4px;border-color: transparent;}
	
ul li.z a {display: block;text-align: center;padding: 14px 20px 14px 20px;margin: 0;text-decoration: none;background-color: #ffffff;color:#000033;box-sizing: border-box; border: 3px solid;border-radius: 4px;border-color: transparent;}	
ul li.z a:hover {background-color: #000033;color:#ffffff;box-sizing: border-box; border: 3px solid;border-radius: 4px;border-color: #ffffff;}
	
	li a link {color: chartreuse}


button {cursor: pointer;border: none;padding: 0;text-decoration: none;display: inline-block;}
.collapsibler {cursor: pointer;padding: 3% 0 2% 0;width: 100%;border: none;border-top: 1px dotted; border-top-color: #f2f1f6;color: #f2f1f6;text-align: left;outline: none;}
body.dark .collapsibler {background: #f2f1f6; cursor: pointer;padding: 3% 0 2% 0;width: 100%;border: none;border-top: 1px dotted; border-top-color: #000033;color: #000033;text-align: left;outline: none;}
.collapsibler:last-child {cursor: pointer;padding: 3% 0 3% 0;width: 100%;border: none;border-bottom: 1px dotted; border-bottom-color: #f2f1f6;color: #f2f1f6;text-align: left;outline: none;}
.activer, .collapsibler {cursor: pointer;background: #00033;color: #f2f1f6}
.activer,.collapsibler:hover {cursor: pointer;background: #000033;
background: linear-gradient(90deg,rgba(0, 0, 51, 1) 10%, rgba(24, 25, 71, 1) 90%);color: #f2f1f6}
.collapsibler:after {content: '\002B';color: #D30508;font-weight: bold;float: right;margin-left: 5px;}
.activer:after {content: "\2212";color: #D30508}
.content {padding: 0;max-height: 0;overflow: hidden;transition: 0.2s ease-out;}	
.dotj {cursor: pointer;padding: 2% 0 1% 0;width: 100%;border: none;border-top: 1px dotted; border-top-color: #f2f1f6;color: #f2f1f6;text-align: left;outline: none;}
.transparant {position: relative;bottom: 100px;left: 0;width:100%;background-image: url("https://dykz.nl/blauw-trans.png");background-position: bottom;background-repeat: repeat-x;margin:0;box-sizing: border-box; padding: 100px 0 0 0;z-index: 2}

video.portfolio {width: 100%    !important; height: auto   !important;}
video {width: 100vw;height: 100vh;object-fit: cover;overflow: hidden; float: right;margin:0; padding: 0}

.leesbaar {text-shadow: 1px 1px 3px #000000;}	
.leesbaarlogo {text-shadow: 1px 1px 3px #000000;}	
	
.folio {float: left;width: 100%;box-sizing: border-box; padding: 3% 3% 3% 3%;}	
		
.color-box {transition: background-color 0.3s ease, color 0.3s ease;border-radius: 6px ;}
.color-box:hover {background-color: #F2F1F6;background: #F2F1F6;background: linear-gradient(90deg,rgba(242, 241, 246, 1) 10%, rgba(217, 217, 225, 1) 90%);}
.color-box:hover .t-zwart, .color-box:hover .t-wit  {color: #000033;}
.color-box:hover .knop a  {background-color: #000033;color:#F2F1F6; border-color:#F2F1F6;}
	
.bruijn {background-color: #786c5c}	
.blm {background-color: #325c84}	
.roella {background-color: #6c5d4e}
.dek {background-color: #f08000}
.dijk {background-color: #ff6613}
.tommy {background-color: #ffffff}
.sweetlake {background-color: #f4cf4f}
	
.tommy .t-wit {color: #000000}
.tommy .knop a  {background-color: #ffffff; color:#000000; border-color:#000000;}
	
.bruijn .t-wit {color: #ffffff}
.bruijn .knop a  {background-color: #786c5c}
.dek .t-wit {color: #2a2a2a}
.dek .knop a  {background-color: #f08000; color:#2a2a2a; border-color:#2a2a2a;}
.dijk .t-wit {color: #000000}
.dijk .knop a  {background-color: #ff6613; color:#000000; border-color:#000000;}
.sweetlake .t-wit {color: #0d1c46}
.sweetlake .knop a  {background-color: #f4cf4f;color:#0d1c46; border-color:#0d1c46;}
		
.afgerondboven {border-radius: 6px 6px 0px 0px;display: inline-block;}	
.afgeronder {border-radius: 6px 6px 6px 6px;display: inline-block;}
.shade {box-shadow: rgba(0, 0, 0, 0.4) 0 0.25rem 0.5rem}
	
.knop a {width: auto;color:#F2F1F6; border-color:#786c5c; padding: 16px 20px 16px 20px;margin:0; text-align: center;text-decoration: none;box-sizing: border-box; border: 1px solid;border-radius: 999px;display: inline-block;}	
.knop a:hover {background-color: #000033;color:#F2F1F6; border-color:#F2F1F6;}
	
ul.opsommingz {list-style-type: circle;}
		
.infolio-l{float: left;width: 47%;padding: 0 ;margin: 0 3% 0 0;box-sizing: border-box}
.infolio-r{float: right;width: 47%;padding: 0 ;margin: 0 0 0 3%;box-sizing: border-box}
		
ul li.zz a {display: block;text-align: center;padding: 16px 20px 16px 20px;margin: 0;text-decoration: none;background-color: #D30508;color:#f2f1f6;box-sizing: border-box; border: 1px solid;border-radius: 999px;border-color: #f2f1f6;}	
ul li.zz a:hover {background-color: #000033;color:#f2f1f6;box-sizing: border-box; border: 1px solid;border-radius: 999px;border-color: #f2f1f6;}
	
.baronder {position: fixed;left: 50%;bottom: 14px; transform: translateX(-50%);display: flex;gap: 20px;padding: 18px 32px 18px 32px;background-color : #D30508;color:#f2f1f6;border: 1px solid;border-radius: 999px;border-color: #f2f1f6;z-index: 99999}

.baronder a {color: #f2f1f6;text-decoration: none;}
.baronder a:hover {text-decoration: none;}

.lijntje {display: inline-block;position: relative;}
.lijntje:after {background: none repeat scroll 0 0 transparent;bottom: 0;content: "";display: block;height: 5px;left: 50%;position: absolute;background-color: #f2f1f6;transition: width 0.3s ease 0s, left 0.3s ease 0s;width: 0;}
.lijntje:hover:after {width: 100%; left: 0;}
	
.wit {background-color : #F2F1F6;background: #F2F1F6;
background: linear-gradient(90deg,rgba(242, 241, 246, 1) 10%, rgba(217, 217, 225, 1) 90%);}
		
.skewer {background-color : #000033; background: #000033;
background: linear-gradient(90deg,rgba(0, 0, 51, 1) 10%, rgba(24, 25, 71, 1) 90%);transform: skewY(-2deg);transform-origin: top left;}	
.skewerwit {background-color : #F2F1F6;background: #F2F1F6;background: linear-gradient(90deg,rgba(242, 241, 246, 1) 10%, rgba(217, 217, 225, 1) 90%);transform: skewY(-2deg);transform-origin: top left;}	
.skewerblauw {background-color: #000033; background: #000033;background: linear-gradient(90deg,rgba(0, 0, 51, 1) 10%, rgba(24, 25, 71, 1) 90%);transform: skewY(-2deg);transform-origin: top left;}
.skewert {transform: skewY(2deg);transform-origin: top left;}


@media screen and (max-width: 1600px) { 
.padboven50{padding-top: 40px}
.padboven100{padding-top: 80px}
.padonder50{padding-bottom: 40px}
.padonder100{padding-bottom: 80px}
}
@media screen and (max-width: 1400px) {    
.inn {float: left;width: 100%;box-sizing: border-box; padding: 0 5% 0 5%;}
.stillinn {float: left;width: 100%;box-sizing: border-box; padding: 0 4.8% 0 4.8%;}
.still {float: left;width: 31.333%;box-sizing: border-box; padding:0; margin: 1%}
}
@media screen and (max-width: 1300px) {
.padboven50{padding-top: 35px}  
.padboven100{padding-top: 60px}
.padonder50{padding-bottom: 35px}
.padonder100{padding-bottom: 60px}
}
@media screen and (max-width: 1200px) {  
.padboven50{padding-top: 30px}
.padboven100{padding-top: 50px}
.padonder50{padding-bottom: 30px}
.padonder100{padding-bottom: 50px}
}
@media screen and (max-width: 1100px) { 
.inn {float: left;width: 100%;box-sizing: border-box; padding: 0 1% 0 1%;}
.stillinn {float: left;width: 100%;box-sizing: border-box; padding: 0 1% 0 1%;}
.still {float: left;width: 31.333%;box-sizing: border-box; padding:0; margin: 1%}
}
@media screen and (max-width: 1000px) {    
.inn {float: left;width: 100%;box-sizing: border-box; padding: 0 2% 0 2%;}	
.kwart {float: left;width: 25%;box-sizing: border-box; padding:0; margin: 0%}
.stillinn {float: left;width: 100%;box-sizing: border-box; padding: 0 2% 0 2%;}
.still {float: left;width: 49.6%;box-sizing: border-box; padding:0; margin: 0.2%}
}
@media screen and (max-width: 900px) {
.kwart {float: left;width: 33.33%;box-sizing: border-box; padding:0; margin: 0%}
.padboven50{padding-top: 26px}
.padboven100{padding-top: 46px}
.padonder50{padding-bottom: 26px}
.padonder100{padding-bottom: 46px}
}



@media screen and (max-width: 1600px) {.topnav a {font-size: 23px;}}
@media screen and (max-width: 1400px) {.topnav a {font-size: 22px;}}
@media screen and (max-width: 1300px) {.topnav a {font-size: 21px;}}
@media screen and (max-width: 1200px) {.topnav a {font-size: 20px;}}
@media screen and (max-width: 1100px) {.topnav a {font-size: 19px;}}
@media screen and (max-width: 1000px) {.topnav a {font-size: 18px;}}
@media screen and (max-width: 900px) {.topnav a {font-size: 17px;}}


@media screen and (max-width: 800px) {
.M-weg {display: none}
.bruit {display: block} 
.inn {float: left;width: 100%;box-sizing: border-box; padding: 0 5% 0 5%;}
video {width: 100vw;height: 100vh;object-fit: cover;float: left}
.padboven50{padding-top: 20px}
.padboven100{padding-top: 35px}
.padonder50{padding-bottom: 20px}
.padonder100{padding-bottom: 35px}
	
.volmidden {position: absolute;top: 50%;left: 50%;width: 90%; transform: translate(-50%, -50%); box-sizing: border-box; padding: 0 1% 0 1%;}
.folio {float: left;width: 100%;box-sizing: border-box; padding: 7% 6% 7% 6%;}	
.inlinks, .inrechts {float: left;width: 100%;box-sizing: border-box;padding:0}
.inlinks-klein{float: left;width: 100%;padding: 0;margin: 0}
.inrechts-groot{float: left;width: 100%;padding: 0;margin: 0;box-sizing: border-box}
.inlinks-groot{float: left;width: 100%;padding: 0;margin: 0;box-sizing: border-box}
.inrechts-klein{float: left;width: 100%;padding: 0;margin: 0}
.stillinn {float: left;width: 100%;box-sizing: border-box; padding: 0 5% 0 5%;}
.kwart {float: left;width: 50%;box-sizing: border-box; padding:0; margin: 0%}
.mobright {text-align: right;} .mobcent {text-align: center;} .mobleft {text-align: left;} 
.mobpad {margin: 30px 0 0 0}
.centert{position: absolute;top:0;left: 0;right: 0;margin: auto;width: 25%}
.navbar{position: fixed;width: 100%;top:0;left: 0;transition: 0.6s; z-index: 3;box-sizing: border-box; padding: 10px 0 10px 0}
.navi-links{float: left;width: 65%;box-sizing: border-box;padding: 10px 0 5px 0} 
.navi-rechts{float: right;width: 25%;box-sizing: border-box;padding: 5px}	

.menuz{position:absolute;top:0;left:0;display: block; width:100%;height:100vh;background-color:#000033;visibility:hidden;z-index:5;padding: 0;margin: 0}


.navigationz{  width:90%;margin: 0;
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);background-color: aquamarine;}



li.mob a {
	font-size: 33px;
display: block;
  text-align: center;
	float: left;
  padding: 10px 5px 10px 5px;
  margin: 0 0 10px 0;
  text-decoration: none;
  box-sizing: border-box;

	color: #ffffff
}

li.mob a:hover {box-sizing: border-box; border: 3px solid;border-radius: 4px;border-color: transparent;}
	



li.zob a {font-size: 33px;
display: block;
  text-align: center;
  padding: 14px 20px 14px 20px;
  margin: 0;
  text-decoration: none;
	 background-color: #ffffff;color:#000033;
  box-sizing: border-box; border: 3px solid;border-radius: 4px;border-color: transparent;}	


li.zob a:hover {
  background-color: #000033;color:#ffffff;
	 box-sizing: border-box; border: 3px solid;border-radius: 4px;border-color: #ffffff;
	}	}