*, *::before, *::after {box-sizing: border-box;}

body,h1,h2,h3,p {margin: 0;font-family: "Archivo Black", Arial, Helvetica, sans-serif;}	
.pirata {margin: 0;font-family: "Pirata One", Arial, Helvetica, sans-serif;}	
.archivo-reg {font-family: "Archivo", Arial, Helvetica, sans-serif;font-optical-sizing: auto;font-weight: 400;font-style: normal;font-variation-settings:"wdth" 100.9;}
	
body {min-height: 100vh;scroll-behavior: smooth;text-rendering: optimizeSpeed;line-height: 1;}

a:not([class]) {text-decoration-skip-ink: auto;}
.img {max-width: 100%;display: block;}
/* Remove all animations and transitions for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {* {animation-duration: 0.01ms !important;animation-iteration-count: 1 !important;transition-duration: 0.01ms !important;scroll-behavior: auto !important;}}

img.center {display: block;margin-left: auto;margin-right: auto;}
img.rechts {float: right;}
a.tikdoel {font-size: 24px}
		
.img {aspect-ratio: 16 / 9;width: 100%;object-fit: cover;}

.checkbox {opacity: 0;}
.checkbox-label {background-color: #000033;border: 3px;border-style: solid;border-color: #f2f1f6;box-sizing: border-box;width: 66px;height: 39px;border-radius: 40px;padding: 3px 10px 3px 10px;cursor: pointer;display: flex;justify-content: space-between;align-items: center;}
.checkbox-label .ball {background-color: #f2f1f6; border-style: solid;border-color: #f2f1f6;width: 30px; height: 30px;box-sizing: border-box;margin: 0 2px 0 2px;border-radius: 50%;transition: transform 0.2s linear;}	
.checkbox:checked + .checkbox-label .ball {transform: translateX(24px);}
	
.checkbox-label {float: right}
.checkbox-label .ball {position: relative; left:-14px}	

.hamburger{position: relative;top: 6px;left: auto;right: 0px;width: 32px;cursor:pointer;z-index:2;}
.hamburger line{stroke:#f2f1f6;stroke-width: 6px;}
.menu{position:absolute;top:0;left:0;width:100vw;height:100vh;background-color:#000033;visibility:hidden;z-index:1}
.navigation{position: absolute;width: 100%;text-align: center;top: 50%;left: 50%;overflow: hidden;}
.navigation ul{margin: 0;padding: 8px;}
.navigation li{list-style-type: none;font-size:50px; color:#f2f1f6; text-decoration: none;margin-bottom:0px;}
.navigation a, .navigation a:hover{color:#f2f1f6; text-decoration: none;}

body.dark .hamburger line{stroke:#000033;}
body.dark .menu{background-color:#f2f1f6;}
body.dark  .navigation li{list-style-type: none;font-size:50px; color:#EB0F12; text-decoration: none;margin-bottom:0px;}
body.dark  .navigation a, body.dark .navigation a:hover{color:#000033; text-decoration: none;}

.t-rood, body.dark .t-rood{color: #D30508;}

body {background-color: #000033;}
body.dark, body.dark .wit, body.dark .zwart, body.dark .zwarts{background-color: #f2f1f6;}
body.dark .overlay {background-color: #000033}
body.dark .overlay a, body.dark .over a {color: #f2f1f6;}
body.dark, body.dark .t-wit, body.dark .t-zwart, body.dark .supp a {color: #000033;}
body.dark .checkbox-label {background-color: #f2f1f6;border-color: #000033;}
body.dark .checkbox-label .ball {background-color: #000033;border-color: #000033;}

body.dark a.linkwit, a.linkwit:link {color: #000033;}
body.dark a.linkwit:hover {color: #000033;}
body.dark a.linkwit.active {background-color: #000033;}	

body.dark hr.wit {border: 1px solid; color: #000033;}

body.dark p.con a:link {color:#000033;}
body.dark p.con a:visited {color:#000033;}
body.dark p.con a:hover {color:#000033;}

body.dark p.cont a:link {color:#f2f1f6;}
body.dark p.cont a:visited {color:#f2f1f6;}
body.dark p.cont a:hover {color:#f2f1f6;}

.centered {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);}	
.navbartt{position: sticky;width: 100%;top: 0;left :0;box-sizing: border-box; padding: 0;background-color : #f2f1f6;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: 3;}

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}
.t-wit {color: #f2f1f6}
.t-zwart {color: #1d1d1b}
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}

	.marge{margin: 10% 0 0 0}
	
strong {
  position: relative;

  &::after {
    content: '';
    position: absolute;
    bottom: -0.125rem;
    left: -0.5rem;
    right: -0.5rem;
    height: 0.75rem;
    z-index: -1;
    background-image: url('https://dykz.nl/roodunderline.svg');
    background-repeat: no-repeat;
    background-size: cover;
  }
}

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

.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;}
body.dark .container {border-color:#f2f1f6;background-color:#f2f1f6;}	
.container:hover {border-color:#f2f1f6;background-color:#000033;}
body.dark .container:hover {border-color:#000033;background-color:#f2f1f6;}
body.dark .container:hover, .container:hover {opacity: 1;transition: 0.6s ease;backface-visibility: hidden;}
body.dark .nope, .nope {opacity: 1;display: block;width: 100%;height: auto;transition: 0.8s ease;backface-visibility: hidden}	
body.dark .container:hover .nope, .container:hover .nope  {opacity: 0.2;transition: 0.3s ease;backface-visibility: hidden}
body.dark .noper, .noper  {opacity: 0}	
body.dark .container:hover .noper, .container:hover .noper  {opacity: 1;transition: 0.3s ease;backface-visibility: hidden}
	
.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;}
body.dark .container {border-color:#f2f1f6;background-color:#f2f1f6;}	
.container:hover {border-color:#f2f1f6;background-color:#000033;}
body.dark .container:hover {border-color:#000033;background-color:#f2f1f6;}
body.dark .container:hover, .container:hover {opacity: 1;transition: 0.6s ease;backface-visibility: hidden;}
body.dark .nope, .nope {opacity: 1;display: block;width: 100%;height: auto;transition: 0.8s ease;backface-visibility: hidden}	
body.dark .container:hover .nope, .container:hover .nope  {opacity: 0.2;transition: 0.3s ease;backface-visibility: hidden}
body.dark .noper, .noper  {opacity: 0}	
body.dark .container:hover .noper, .container:hover .noper  {opacity: 1;transition: 0.3s ease;backface-visibility: hidden}
	
.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}
		
body.dark .dot {position: absolute;width:142vmax;height:142vmax;left:50%;top:50%;transform:translate(-50%, -50%) scale(0);border-radius: 50%;background-color:#f2f1f6;z-index: 2}

p.slogan {margin:0;white-space:nowrap;position:absolute;left:100%;top:50%;transform:translateY(-50%);z-index: 4;opacity: 1}
.moreContent {display:none;}

.centert {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);}

.navi-links {float: left;width: 80%;box-sizing: border-box;padding: 1px 0 1px 0;}
.navi-rechts {float: right;width: 20%;box-sizing: border-box;padding: 1px 0 1px 0;text-align: right}

.navbar{position: fixed;width: 100%;top: 0;left :0;box-sizing: border-box;padding: 4px 0 4px 0;transition: 0.6s;z-index: 3;}
.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;}
body.dark .scrolled{color: #f2f1f6;background-color : #f2f1f6;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;}

.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;}	
@media screen and (max-width: 1600px) { 
.gaatopen {font-size: 60px;} 
.padboven50{padding-top: 40px}
.padboven100{padding-top: 80px}
.padonder50{padding-bottom: 40px}
.padonder100{padding-bottom: 80px}
}
@media screen and (max-width: 1500px) { 
.gaatopen {font-size: 55px;} 
}
@media screen and (max-width: 1400px) {   
.gaatopen {font-size: 55px;}  
.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%}
.gaatopen {font-size: 45px;}  
}
@media screen and (max-width: 1000px) {    
.over a {font-size: 40px}	
.overlay .closebtn, .gaatopen {font-size: 42px} 
.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) {
.over a {font-size: 33px}	
.overlay .closebtn, .gaatopen {font-size: 40px} 
.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: 800px) {
.overl a {font-size: 30px}	
.overlay .closebtn, .gaatopen {font-size: 40px} 	
.tabl-weg {display: none;}
.tabl-ja {display: block;}
.padboven50{padding-top: 22px}
.padboven100{padding-top: 46px} 
.padonder50{padding-bottom: 22px}
.padonder100{padding-bottom: 46px}
}
@media screen and (max-width: 700px) {
.over a {font-size: 29px}	
.overlay .closebtn, .gaatopen {font-size: 38px} 
.tabl-weg {display: none;}
.padboven50{padding-top: 20px}
.padboven100{padding-top: 46px}
.padonder50{padding-bottom: 20px}
.padonder100{padding-bottom: 46px}
.inlinks, .inrechts {float: left;width: 100%;box-sizing: border-box;padding:0}
}
@media screen and (max-width: 600px) {
.M-weg {display: none}
.bruit {display: block} 
.inn {float: left;width: 100%;box-sizing: border-box; padding: 0 4% 0 4%;}
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}
.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%}
.navi-links {float: left;width: 80%;box-sizing: border-box;padding: 1px 0 1px 0;}       
.navi-rechts {float: right;width: 20%;box-sizing: border-box;padding: 1px 0 1px 0;}
body.dark .navigation li{list-style-type: none;font-size:35px; color:#EB0F12; text-decoration: none;margin-bottom:0px;}
.navigation li{list-style-type: none;font-size:35px; color:#f2f1f6; text-decoration: none;margin-bottom:0px;}
.mobright {text-align: right;} .mobcent {text-align: center;} .mobleft {text-align: left;} 
}