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

* {position:relative;box-sizing: border-box;}
body.dark .circle, .circle{position:fixed;border-radius:50%;width:100px;height:100px;top:50%;}
.circle {background:#000033}
body.dark .circle{background:#f2f1f6}
.hero {overflow:hidden;width:100%;height:100vh;display:flex;align-items:center;justify-content:center;}
.animationWrapper{display:flex;align-items:center;opacity:0;}
	
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;}

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;
  }
}
body.dark .scribble, .scribble {
  position: relative;
  background-image: none;
  background-color: transparent;
  &::after {
    content: '';
    position: absolute;
    bottom: -8%;
    left: 0;
    height: 30%;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='247' height='22' fill='none'%3E%3Cmask id='a' width='246' height='23' x='0' y='1' maskUnits='userSpaceOnUse' style='mask-type:alpha'%3E%3Cpath fill='%23D9D9D9' d='M0 1h246v23H0z'/%3E%3C/mask%3E%3Cg mask='url(%23a)'%3E%3Cpath fill='%2300a661' d='M.225 13.987c40.77-3.247 81.218-6.304 122.486-5.61 40.217.68 80.07 3.493 119.823 8.284 4.828.577 4.966-4.727.193-5.301-40.597-4.886-82.029-7.082-123.059-6.436-39.896.627-80.713 2.548-119.53 8.822-.233.04-.132.263.087.25v-.009z'/%3E%3C/g%3E%3C/svg%3E");
    mask-repeat: no-repeat;
    mask-size: 95%;
    width: 100%;
    background-image: linear-gradient(
      to right,
      currentcolor 40%,
      transparent 50%
    );
    background-repeat: no-repeat;
    animation: background-size-300 0.4s 1.5s ease-in both;
    background-size: 300%
  }
}
body.dark .scribble {color: #000033;}
.scribble {color: #f2f1f6;}
.marge{margin: 10% 0 0 0}

.circle {position:fixed;border-radius:50%;width:100px;height:100px;background:#000033;top:50%;opacity: 0.5}
.hero {width: 100%;min-height:  45vh;background-position: center;background-repeat: no-repeat;background-image: url("https://dykz.nl/img/marnix-def.webp"); background-size: 100% auto;padding: 0;margin: 0;}
	
	
.centerrt {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);}
.animationWrapper{display:flex;align-items:left;opacity:1;}
.words {display:grid;width:100%;}
.words > * {grid-area: 1 / 1;}
.rotator {display:grid;width:100%}
.rotator > * {grid-area: 1 / 1;}
.rotator h1 {display:flex;align-items:left;}

.circlet {position:fixed;border-radius:50%;width:100px;height:100px;background:#000033;top:50%;}
.herot {overflow:hidden;width:100%;height:100vh;display:flex;align-items:center;justify-content:center;}
.animationWrappert{display:flex;align-items:center;opacity:0;}
.rotatort {display:grid;width:100%}
.rotatort > * {grid-area: 1 / 1;}
.rotatort h1 {display:flex;align-items:center;}

body.dark .circlet {position:fixed;border-radius:50%;width:100px;height:100px;background:#f2f1f6;top:50%;}
body.dark .herot {overflow:hidden;width:100%;height:100vh;display:flex;align-items:center;justify-content:center;}
body.dark .animationWrappert{display:flex;align-items:center;opacity:0;}
body.dark .rotatort {display:grid;width:100%}
body.dark .rotatort > * {grid-area: 1 / 1;}
body.dark .rotatort h1 {display:flex;align-items:center;}	

.rood{background-color: #D30508}

.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: 20px 0 20px 0;}
.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;}

body {background-color: #000033;}
body.dark, body.dark .wit, body.dark .zwart, body.dark .zwarts{background-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%);}	

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}
.t-rood, body.dark .t-rood{color: #D30508;}
.t-rood, body.dark .t-rood{color: #D30508}

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 .kut {width: 100%;height: auto;border-radius: 4px}
video {width: 100%;height: auto;float: left;z-index: 1}

.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: 38%;padding: 0;margin: 0}
.inrechts-groot{float: left;width: 62%;padding: 0;margin: 0;box-sizing: border-box}
.inlinks-groot{float: left;width: 62%;padding: 0;margin: 0;box-sizing: border-box}
.inrechts-klein{float: left;width: 38%;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%}

.cata-wit, a.cata-wit {color:#f2f1f6;background: #000033;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;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)}

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

.meerpad{padding: 0 8% 0 8%}
.onderruimte{margin: 0 0 20px 0}
.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: 2% 0 2% 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}
.tabl-ja {display: none;}	

@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 4% 0 4%;}
.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) { 
.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) {
.padboven50{padding-top: 26px}
.padboven100{padding-top: 46px}
.padonder50{padding-bottom: 26px}
.padonder100{padding-bottom: 46px}
}
@media screen and (max-width: 800px) {	
.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) {
.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}
.hero {width: 100%;height: 100vh;background-position: center;background-repeat: no-repeat;background-image: url("https://dykz.nl/img/marnix-def-m.webp"); background-size: 100% auto;padding: 0;margin: 0;}		
.kwart {float: left;width: 50%;box-sizing: border-box; padding:0; margin: 0%}
.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%;}
.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;} 
}