*, *::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; background: #000033; background: linear-gradient(90deg,rgba(0, 0, 51, 1) 10%, rgba(24, 25, 71, 1) 90%)}
.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-color: #F2F1F6;background: #F2F1F6;background: linear-gradient(90deg,rgba(242, 241, 246, 1) 10%, rgba(217, 217, 225, 1) 90%);}
.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;}
	
.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: 99;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;}
	
	
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;}
	
		
.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}
		
	
.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;}
	
.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;}

.navbart{position: fixed;width: 100%;top:0;left: 0;transition: 0.6s; box-sizing: border-box; padding: 0;z-index: 99}

.skewermenu {position: fixed; width: 100%; height: 13vh; top:0;left: 0;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;padding: 0;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;z-index: 1}

.hier {float:left; padding: 12vh 0 0 0}
	
.barboven {float: right;padding: 18px 32px 18px 32px;background-color : #D30508;color:#f2f1f6;border: 1px solid;border-radius: 999px;border-color: #f2f1f6;margin-top: 15px; z-index:9}
.barboven a {color: #f2f1f6;text-decoration: none;}
.barboven a:hover {text-decoration: none;}
	
.page-transition-overlay {position: fixed;inset: 0;background: #000033;z-index: 4;pointer-events: none;transform: scaleY(0);transform-origin: top;}
	
.kwartruimtelinks {float: left;width: 5%;box-sizing: border-box; padding:0; margin: 0}
.kwartjelinks {float: left;width: 20%;box-sizing: border-box; padding:0; margin: 0}

.navbar.bruit .inn {position: relative;display: flex;align-items: center;justify-content: space-between;}
.opperbaas{z-index: 1004}
/* checkbox verbergen */
.menu-toggle {position: absolute;opacity: 0;pointer-events: none;}
.menu-btn {display: flex;align-items: center;justify-content: center;z-index: 1001;background-color: #D30508;outline:none;border:1px solid #ffffff;border-radius:50%;padding: 0;width: 60px;height: 60px;cursor: pointer;color:white;}
.menu-btn span, .menu-btn span::before, .menu-btn span::after {display: block;position: relative;width: 28px;height: 2px;background: #ffffff;transition: 0.3s ease;}
.menu-btn span::before, .menu-btn span::after {content: "";position: absolute;left: 0;}
.menu-btn span::before {top: -8px;}
.menu-btn span::after {top: 8px;}
/* open state: kruis */
.menu-toggle:checked + .menu-btn span {background: transparent;}
.menu-toggle:checked + .menu-btn span::before {top: 0;transform: rotate(45deg);}
.menu-toggle:checked + .menu-btn span::after {top: 0;transform: rotate(-45deg);}
.nav-main {position: fixed;inset: 0;background-color: #000033; background: #000033;background: linear-gradient(90deg,rgba(0, 0, 51, 1) 10%, rgba(24, 25, 71, 1) 90%);display: flex;align-items: center;justify-content: center;transform: translateY(-100%);transition: transform 0.4s ease;z-index: 1000;}
/* open state: nav naar beneden */
.menu-toggle:checked ~ .nav-main {transform: translateY(0);}
.knopmenu a {width: 80%; background-color: #000033;color:#F2F1F6; border-color:#F2F1F6; padding: 20px 0px 20px 0px;margin:0; text-align: center;text-decoration: none;box-sizing: border-box; border: 1px solid;border-radius: 999px;display: inline-block;}	
.knopmenu a:hover {background-color: #000033;color:#F2F1F6; border-color:#F2F1F6;}
.tekstmenu p {padding: 0 5% 0 5%}
.menutekst {width: 80%}	

@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}	
	
.skewermenu {height: 10vh}
.hier {padding: 12vh 0 0 0}
		

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