*, *::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: #ac274d;}
body {background-color : #000033; background-color: 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;}
.checklist {list-style: none;margin: 0;padding: 0;}
.checklist li {position: relative;padding-left: 1.75rem;margin: 0.4rem 0;}
.checklist li::before {content: "✓";position: absolute;left: 0;top: 0.05rem;color: #22c55e;}

.wit {background-color: #F2F1F6;background: linear-gradient(90deg,rgba(242, 241, 246, 1) 10%, rgba(217, 217, 225, 1) 90%);}
.zwart, .zwarts {background-color: #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;}
.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: #ac274d;outline:none;border:3px solid #ac274d;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: #ac274d;font-weight: bold;float: right;margin-left: 5px;}
.activer:after {content: "\2212";color: #ac274d}
.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 : #ac274d;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 : #ac274d;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: #ac274d;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%}	






	
.checklist {list-style: none;margin: 0;padding: 0;font-family: 'REM', system-ui, sans-serif}
.checklist li {position: relative;padding-left: 1.75rem;margin: 0.4rem 0;font-family: sans-serif}
.checklist li::before {content: "✓";position: absolute;left: 0;top: 0.05rem;color: #22c55e;font-family: sans-serif}
	
.basis-een{line-height: 0.8;}
	
	

.afgeronder {border-radius: 6px 6px 6px 6px;display: inline-block;}
.shade {box-shadow: rgba(0, 0, 0, 0.4) 0 0.25rem 0.5rem}	
	

	
	
.schuine-sectie {
  background-color: #000033;background: linear-gradient(90deg,rgba(0, 0, 51, 1) 10%, rgba(24, 25, 71, 1) 90%);
  color: #fff;
  margin: 4rem 6%;
  border-radius: 24px;      /* afgeronde hoeken */
  overflow: hidden;         /* content binnen de ronding houden */
  transform: skewY(-2deg);  /* schuine boven/onderrand */
}

/* content terug rechtzetten */
.schuine-sectie__inner {
  transform: skewY(2deg);
  padding: 6rem 1.5rem;
}

.infinity-banner {
  position: relative;
  overflow: hidden;
  white-space: nowrap;
  color: #e5e7eb;
  padding: 2rem 0;
}

/* fade aan de randen (optioneel) */
.infinity-banner::before,
.infinity-banner::after {
  content: "";
  position: absolute;
  top: 0;
  width: 60px;
  height: 100%;
  pointer-events: none;
}

.infinity-banner__track {
  display: inline-flex;
  gap: 3rem;
  align-items: center;
  animation: banner-scroll 40s linear infinite;
}

.infinity-banner__track span {
  font-family: "REM", system-ui, sans-serif;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 4.5rem;
}

/* animatie: van rechts naar links */
@keyframes banner-scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

/* toegankelijk: minder motion respecteren */
@media (prefers-reduced-motion: reduce) {
  .infinity-banner__track {
    animation: none;
  }
}
	
.t-rood, body.dark .t-rood{color: #ac274d;}	

.menu-button{position:fixed;background-color: #ac274d;outline:none;border:3px solid #ac274d;border-radius:50%;padding: 0;top: 15px;right: 15px;width: 60px;height: 60px;cursor: pointer;color:white;z-index: 190;}
	
.baronder {position: fixed;left: 50%;bottom: 14px; transform: translateX(-50%);display: flex;gap: 10px;padding: 10px 10px 10px 10px;background-color : #ac274d;color:#f2f1f6;border: 1px solid;border-radius: 999px;border-color: #f2f1f6;z-index: 99999}
	
.barboven {float: right;padding: 18px 32px 18px 32px;background-color : #ac274d;color:#f2f1f6;border: 1px solid;border-radius: 999px;border-color: #f2f1f6;margin-top: 15px; z-index:9}
	
	.barboven:hover {background-color : #ca2d58;}
	
	
.menu-btn {display: flex;align-items: center;justify-content: center;z-index: 1001;background-color: #ac274d;outline:none;border:1px solid #ffffff;border-radius:50%;padding: 0;width: 60px;height: 60px;cursor: pointer;color:white;}
	
	
.cta-pulse {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
 
  transform: translateZ(0); /* betere performance */
  animation: cta-pulse 2.4s ease-out infinite;
}

/* subtiele schaal + shadow-pulse */
@keyframes cta-pulse {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(249, 115, 22, 0.5);
  }
  60% {
    transform: scale(1.03);
    box-shadow: 0 0 0 12px rgba(249, 115, 22, 0);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(249, 115, 22, 0);
  }
}

/* minder bewegende interface: animatie uit */
@media (prefers-reduced-motion: reduce) {
  .cta-pulse {
    animation: none;
    box-shadow: 0 0 0 0 rgba(249, 115, 22, 0.5);
  }
}
	
.btn-shake {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  
  transform: translate3d(0, 0, 0);
  animation: btn-shake 3s ease-in-out infinite;
}

/* subtiel horizontaal schudden */
@keyframes btn-shake {
  0%, 100% {
    transform: translateX(0);
  }
  10% {
    transform: translateX(-1.5px);
  }
  20% {
    transform: translateX(1.5px);
  }
  30% {
    transform: translateX(-1px);
  }
  40% {
    transform: translateX(1px);
  }
  50% {
    transform: translateX(0);
  }
}

/* animatie uit voor mensen met 'reduce motion' */
@media (prefers-reduced-motion: reduce) {
  .btn-shake {
    animation: none;
  }
}
	
/* basis link-blok */
.link-card {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  padding: 0.75rem 1rem;
  border-radius: 999px;
  background-color: #ac274d;      /* donker */
  color: #e5e7eb;
  text-decoration: none;
  transition: background-color 180ms ease-out, transform 180ms ease-out;
}

/* hover: iets lichtere kleur */
.link-card:hover {
  background-color: #ca2d58;      /* iets lichter */
  transform: translateY(-1px);    /* subtiel “lift” effect (optioneel) */
}
	
	
	
.swoosh-text {
  position: relative;
  display: inline-block;
  z-index: 0;
}

/* de swoosh onder de tekst */
.swoosh-text::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0.03em;          /* afstand tot onderkant letters */
  width: 100%;
  height: 0.2em;          /* dikte van de swoosh */
  background: linear-gradient(90deg, #ac274d, #ca2d58);
  border-radius: 999px;   /* afgeronde uiteinden */
  transform: skewX(-2deg); /* “swoosh” vorm */
  z-index: -1;            /* achter de tekst */
}


	

.geel {
  /* ruimte tussen sterren */
  color: #facc15;          /* goudgeel */
}

.rating__text {
  color: #e5e7eb;
}

.rood {
  background: #ac274d;
}	
	
	
	
	
	.back {width: 100%;height: auto;background-position: right;background-repeat: no-repeat;background-image: url("https://dykz.nl/home/back2.png"); background-size: 60% auto;padding: 0;margin: 0;}
	
	.backt {width: 100%;height: auto;background-position: left;background-repeat: no-repeat;background-image: url("https://dykz.nl/home/back2.png"); background-size: 60% auto;padding: 0;margin: 0;}
	

	

/* sticky box in rechter kolom */
.inrechts-sticky {
  position: sticky;
  top: 11vh; /* of bijvoorbeeld 2rem */
}

	
	.clearfix {
  clear: both;
}



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




body, h1,h2,h3, h4, p, ul, li {margin: 0;line-height: 1;font-family: 'REM', system-ui, sans-serif}
@font-face {
  font-family: "REM";
  src: url("https://dykz.nl/fonts/100.woff2") format("woff2");
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}
	
	@font-face {
  font-family: "REM";
  src: url("https://dykz.nl/fonts/200.woff2") format("woff2");
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}
	
	@font-face {
  font-family: "REM";
  src: url("https://dykz.nl/fonts/300.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "REM";
  src: url("https://dykz.nl/fonts/400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
	
	
@font-face {
  font-family: "REM";
  src: url("https://dykz.nl/fonts/500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
	
@font-face {
  font-family: "REM";
  src: url("https://dykz.nl/fonts/600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
	
	@font-face {
  font-family: "REM";
  src: url("https://dykz.nl/fonts/700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
	
	@font-face {
  font-family: "REM";
  src: url("https://dykz.nl/fonts/800.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
	
	@font-face {
  font-family: "REM";
  src: url("https://dykz.nl/fonts/900.woff2") format("woff2");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
.thin {font-family: 'REM', sans-serif;font-weight: 100;font-style: normal}
.extralight {font-family: 'REM', sans-serif;font-weight: 200;font-style: normal}
.light {font-family: 'REM', sans-serif;font-weight: 300;font-style: normal}
.regular {font-family: 'REM', sans-serif;font-weight: 400;font-style: normal}
.med {font-family: 'REM', sans-serif;font-weight: 500;font-style: normal}
.semibold {font-family: 'REM', sans-serif;font-weight: 600;font-style: normal}
.bold {font-family: 'REM', sans-serif;font-weight: 700;font-style: normal}
.extrabold {font-family: 'REM', sans-serif;font-weight: 800;font-style: normal}
.black, .sterk {font-family: 'REM', sans-serif; font-weight: 900;font-style: normal}

.basis-twee{line-height: 1.2;}
.basis-vier{line-height: 1.4;}
.basis-zes{line-height: 1.6;}
.basis-acht{line-height: 1.8;}
.basis{line-height: 2;}	
ul.no-bul {list-style-type: none;margin: 0;padding: 0;font-size: 17px}	
.megam, h1.megam, h2.megam, h3.megam, p.megam {font-size: 105px}
h1, .mega, h1.mega, h2.mega, h3.mega, p.mega {font-size: 59px}
h2, .groot, h1.groot, h2.groot, h3.groot, h4.groot, p.groot, .collapsible, .collapsibler, .collapsibler:after, .activer:after {font-size: 43px}
h3, .medium, h1.medium, h2.medium, h3.medium, p.medium {font-size: 32px}
p, .normaal, h1.normaal, h2.normaal, h3.normaal, p.normaal {font-size: 20px}
.klein, h1.klein, h2.klein, h3.klein, p.klein {font-size: 13px}
p.dykz {font-size: 12px;font-weight:300;}
@media screen and (max-width: 1600px) {
.megam, h1.megam, h2.megam, h3.megam, p.megam {font-size: 100px}
h1, .mega, h1.mega, h2.mega, h3.mega, p.mega, p.slogan {font-size: 50px}
h2, .groot, h1.groot, h2.groot, h3.groot, h4.groot, p.groot, .collapsible, .collapsibler, .collapsibler:after, .activer:after {font-size: 39px}
h3, .medium, h1.medium, h2.medium, h3.medium, p.medium {font-size: 29px}
p, .normaal, h1.normaal, h2.normaal, h3.normaal, p.normaal {font-size: 20px}
.klein, h1.klein, h2.klein, h3.klein, p.klein {font-size: 13px}
}
@media screen and (max-width: 1500px) {
.megam, h1.megam, h2.megam, h3.megam, p.megam {font-size: 95px}
h1, .mega, h1.mega, h2.mega, h3.mega, p.mega, p.slogan {font-size: 49px}
h2, .groot, h1.groot, h2.groot, h3.groot, h4.groot, p.groot, .collapsible, .collapsibler, .collapsibler:after, .activer:after {font-size: 38px}
h3, .medium, h1.medium, h2.medium, h3.medium, p.medium {font-size: 28px}
p, .normaal, h1.normaal, h2.normaal, h3.normaal, p.normaal {font-size: 19px}
.klein, h1.klein, h2.klein, h3.klein, p.klein {font-size: 13px}
}
@media screen and (max-width: 1400px) {
.megam, h1.megam, h2.megam, h3.megam, p.megam {font-size: 93px}
h1, .mega, h1.mega, h2.mega, h3.mega, p.mega, p.slogan {font-size: 48px}
h2, .groot, h1.groot, h2.groot, h3.groot, h4.groot, p.groot, .collapsible, .collapsibler, .collapsibler:after, .activer:after {font-size: 38px}
h3, .medium, h1.medium, h2.medium, h3.medium, p.medium {font-size: 27px}
p, .normaal, h1.normaal, h2.normaal, h3.normaal, p.normaal {font-size: 19px}
.klein, h1.klein, h2.klein, h3.klein, p.klein {font-size: 13px}	
}
@media screen and (max-width: 1300px) {
.megam, h1.megam, h2.megam, h3.megam, p.megam {font-size: 92px}
h1, .mega, h1.mega, h2.mega, h3.mega, p.mega, p.slogan {font-size: 48px}
h2, .groot, h1.groot, h2.groot, h3.groot, h4.groot, p.groot, .collapsible, .collapsibler, .collapsibler:after, .activer:after {font-size: 37px}
h3, .medium, h1.medium, h2.medium, h3.medium, p.medium {font-size: 29px}
p, .normaal, h1.normaal, h2.normaal, h3.normaal, p.normaal {font-size: 18px}
.klein, h1.klein, h2.klein, h3.klein, p.klein {font-size: 13px}
}
@media screen and (max-width: 1200px) {
.megam, h1.megam, h2.megam, h3.megam, p.megam {font-size: 90px}
h1, .mega, h1.mega, h2.mega, h3.mega, p.mega, p.slogan {font-size: 47px}
h2, .groot, h1.groot, h2.groot, h3.groot, h4.groot, p.groot, .collapsible, .collapsibler, .collapsibler:after, .activer:after {font-size: 37px}
h3, .medium, h1.medium, h2.medium, h3.medium, p.medium {font-size: 26px}
ul.no-bul, p, .normaal, h1.normaal, h2.normaal, h3.normaal, p.normaal {font-size: 18px}
.klein, h1.klein, h2.klein, h3.klein, p.klein {font-size: 13px}
}
@media screen and (max-width: 1100px) {
.megam, h1.megam, h2.megam, h3.megam, p.megam {font-size: 86px}
h1, .mega, h1.mega, h2.mega, h3.mega, p.mega, p.slogan {font-size: 47px}
h2, .groot, h1.groot, h2.groot, h3.groot, h4.groot, p.groot, .collapsible, .collapsibler, .collapsibler:after, .activer:after {font-size: 36px}
h3, .medium, h1.medium, h2.medium, h3.medium, p.medium {font-size: 24px}
p, .normaal, h1.normaal, h2.normaal, h3.normaal, p.normaal {font-size: 17px}
.klein, h1.klein, h2.klein, h3.klein, p.klein {font-size: 13px}
}
@media screen and (max-width: 1000px) { 
.megam, h1.megam, h2.megam, h3.megam, p.megam {font-size: 80px}
h1, .mega, h1.mega, h2.mega, h3.mega, p.mega, p.slogan {font-size: 46px}
h2, .groot, h1.groot, h2.groot, h3.groot, h4.groot, p.groot, .collapsible, .collapsibler, .collapsibler:after, .activer:after {font-size: 36px}
h3, .medium, h1.medium, h2.medium, h3.medium, p.medium {font-size: 22px}
p, .normaal, h1.normaal, h2.normaal, h3.normaal, p.normaal {font-size: 17px}
.klein, h1.klein, h2.klein, h3.klein, p.klein {font-size: 13px}
}
@media screen and (max-width: 900px) {
.megam, h1.megam, h2.megam, h3.megam, p.megam {font-size: 70px}
h1, .mega, h1.mega, h2.mega, h3.mega, p.mega, p.slogan {font-size: 44px}
h2, .groot, h1.groot, h2.groot, h3.groot, h4.groot, p.groot, .collapsible, .collapsibler, .collapsibler:after, .activer:after {font-size: 33px}
h3, .medium, h1.medium, h2.medium, h3.medium, p.medium {font-size: 21px}
p, .normaal, h1.normaal, h2.normaal, h3.normaal, p.normaal {font-size: 17px}
.klein, h1.klein, h2.klein, h3.klein, p.klein {font-size: 13px}
}
@media screen and (max-width: 800px) {
.megam, h1.megam, h2.megam, h3.megam, p.megam {font-size: 60px}
h1, .mega, h1.mega, h2.mega, h3.mega, p.mega, p.slogan {font-size: 42px}
h2, .groot, h1.groot, h2.groot, h3.groot, h4.groot, p.groot, .collapsible, .collapsibler, .collapsibler:after, .activer:after {font-size: 30px}
h3, .medium, h1.medium, h2.medium, h3.medium, p.medium {font-size: 19px}
p, .normaal, h1.normaal, h2.normaal, h3.normaal, p.normaal {font-size: 17px}
.klein, h1.klein, h2.klein, h3.klein, p.klein {font-size: 13px}
}
@media screen and (max-width: 700px) {
.megam, h1.megam, h2.megam, h3.megam, p.megam {font-size: 50px}
h1, .mega, h1.mega, h2.mega, h3.mega, p.mega, p.slogan {font-size: 39px}
h2, .groot, h1.groot, h2.groot, h3.groot, h4.groot, p.groot, .collapsible, .collapsibler, .collapsibler:after, .activer:after {font-size: 27px}
h3, .medium, h1.medium, h2.medium, h3.medium, p.medium {font-size: 19px}
p, .normaal, h1.normaal, h2.normaal, h3.normaal, p.normaal {font-size: 17px}
.klein, h1.klein, h2.klein, h3.klein, p.klein {font-size: 12px}
}
@media screen and (max-width: 600px) {
.megam, h1.megam, h2.megam, h3.megam, p.megam {font-size: 45px}
h1, .mega, h1.mega, h2.mega, h3.mega, p.mega, p.slogan {font-size: 29px}
h2, .groot, h1.groot, h2.groot, h3.groot, h4.groot, p.groot, .collapsible, .collapsibler, .collapsibler:after, .activer:after {font-size: 24px}
h3, .medium, h1.medium, h2.medium, h3.medium, p.medium {font-size: 19px}
p, .normaal, h1.normaal, h2.normaal, h3.normaal, p.normaal {font-size: 17px}
.klein, h1.klein, h2.klein, h3.klein, p.klein {font-size: 12px}
}