body {line-height: 1;background: #F2F1F6}
html {font-size: 16px}
body {margin: 0;padding:0}
body, p, ul, li {font-family: 'Open Sans', sans-serif;font-weight: 300;font-style: normal; color: #4b4b4b} 
h1, h2, h3 {font-family: 'Raleway', sans-serif;font-weight: 100;font-style: normal; color: #000000}
h1, h2, h3, h4 {margin: 0;}
a {text-decoration: none;color: inherit;outline: none;}
a:hover {text-decoration: none;color: inherit;}	
ul {margin: 0;padding: 0;list-style: none;}
ul li {margin: 0;padding: 0;}
ul a {text-decoration: none;}
ul a:hover {text-decoration: none}
.basis-minder{line-height: 0.8;}
.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-tien{line-height: 2.1;}
.basis-twaalf{line-height: 2.4;}
.basis{line-height: 2.7;}		
.megafooter {margin: 0;padding:0}		
.wijd{letter-spacing: 0.2em;}	
.tight{letter-spacing: -0.1em;}
.hovert:hover {text-decoration: underline;color: #000000; }
body.home .home, body.projecten .projecten, body.diensten .diensten, body.werkwijze .werkwijze, body.over .over, body.contact .contact {color: #000;font-weight: 600;}
img {width: 100%;height: 100%;object-fit: cover;object-position: center;display: block;}
.wrap {max-width: 1300px;margin: 0 auto;}	

@font-face {font-display: swap;font-family: 'Raleway';font-style: normal;font-weight: 100;
  src: url('https://ttontwerp.com/fonts/raleway-100.woff2') format('woff2'); }
@font-face {font-display: swap;font-family: 'Raleway';font-style: normal;font-weight: 200;
  src: url('https://ttontwerp.com/fonts/raleway-200.woff2') format('woff2');}
@font-face {font-display: swap;font-family: 'Raleway';font-style: normal;font-weight: 300;
  src: url('https://ttontwerp.com/fonts/raleway-300.woff2') format('woff2');}
@font-face {font-display: swap;font-family: 'Raleway';font-style: normal;font-weight: 400;
  src: url('https://ttontwerp.com/fonts/raleway-400.woff2') format('woff2'); }

@font-face {font-display: swap;font-family: 'Open Sans';font-style: normal;font-weight: 300;
  src: url('https://ttontwerp.com/fonts/open-sans-300.woff2') format('woff2'); }
@font-face {font-display: swap;font-family: 'Open Sans';font-style: normal;font-weight: 400;
  src: url('https://ttontwerp.com/fonts/open-sans-400.woff2') format('woff2');}
@font-face {font-display: swap;font-family: 'Open Sans';font-style: normal;font-weight: 500;
  src: url('https://ttontwerp.com/fonts/open-sans-500.woff2') format('woff2');}
@font-face {font-display: swap;font-family: 'Open Sans';font-style: normal;font-weight: 600;
  src: url('https://ttontwerp.com/fonts/open-sans-600.woff2') format('woff2'); }

.open {font-family: 'Open Sans', sans-serif;font-style: normal}
.ral {font-family: 'Raleway', sans-serif;font-style: normal}

.thin {font-family: 'Open Sans', sans-serif;font-weight: 300;font-style: normal}
.dun {font-family: 'Open Sans', sans-serif;font-weight: 400;font-style: normal}
.regulier {font-family: 'Open Sans', sans-serif;font-weight: 500;font-style: normal}
.bold {font-family: 'Open Sans', sans-serif; font-weight: 600;font-style: normal}

.thinral {font-family: 'Raleway', sans-serif;font-weight: 100;font-style: normal}
.dunral {font-family: 'Raleway', sans-serif;font-weight: 200;font-style: normal}
.regulierral {font-family: 'Raleway', sans-serif;font-weight: 300;font-style: normal}
.boldral {font-family: 'Raleway', sans-serif; font-weight: 400;font-style: normal}

.resp-im {max-width: 100%;height: auto;display: block;}
.centered {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);}	
.center {align-items: center;text-align: center; }
.links {text-align: left;}
.rechts {text-align: right;}
.bruit {display: none;}  
.M-weg {display: block;}
.smartmenu {display: none;}  
.deskmenu {display: block;}
.upgroot {margin-top: 6.25rem}
.upklein {margin-top: 3rem}
.downgroot {margin-bottom: 6.25rem}
.downklein {margin-bottom: 3rem}
.mobiel-pad {padding-top: 6.25rem; box-sizing: border-box}
.mobieler-pad {padding-top: 0rem; box-sizing: border-box}
.leesbaarlogo {text-shadow: 1px 1px 3px #000000;}	
.shade {box-shadow: rgba(0, 0, 0, 0.4) 0 0.25rem 0.5rem}
.btn-arrow:hover {background-color: #fff;}	
.btn-arrow {display: inline-flex;align-items: center;gap: 0.9rem;padding: 0.6rem 1.4rem;background-color: #000;color: #fff;border: none;border-radius: 0;font: inherit;cursor: pointer;text-decoration: none;}
.btn-arrow-icon {width: 2rem; height: auto;}
.p-link {margin: 0;}
.p-link a {color: inherit;text-decoration: none;transition: transform .18s ease, border-color .18s ease;display: inline-flex;align-items: center;}
.p-link a:hover, .p-link a:focus {transform: translateX(1px);outline: none;}
.p-link a::after {content: "→";font-weight: 200;transition: transform .18s ease;transform-origin: left center;}
.p-link a:hover::after,.p-link a:focus::after {transform: translateX(3px);}
.rond {width: 100%;aspect-ratio: 1 / 1;overflow: hidden;border-radius: 50%;} 
.rond img {width: 100%;height: 100%;object-fit: cover;display: block;}	
.wit {background-color: #fafafa;}
.witter {background-color: #ffffff;}
.donker {background-color: #c9c9c1;}
.grijs {background-color: #aebcbf;}
.zwart {background-color: #000000;}
.steunkleur{background-color: #EB970F}
.paars {background-color: #ccbac1;}
.mosterd {background: #9c9a45}
.donkerpaars {background: #524861}
.geel {background: #ceb875}
.groen {background: #6f745a}
.blauw {background: #59646b}
.lila {background: #6b4152}
.t-wit {color: #fafafa}
.t-zwart {color: #000000}
.t-zwar {color: #4b4b4b}
.t-steunkleur {color: #EB970F}
.t-grijs {color: #aebcbf;}
.t-paars {color: #ccbac1}
.hero {position: relative;width: 100%;z-index: 0;}
.hero-video {position: sticky;top: 0;height: 100vh;width: 100%;overflow: hidden;z-index: 0;}
.hero-overlay {position: absolute;inset: 0;background: rgba(201, 201, 193, 0.1);z-index: 1;}
.hero-video-el {width: 100%;height: 100%;object-fit: cover;object-position: top; display: block;max-width: none;max-height: none;}
.hero-content {position: relative;z-index: 2;margin-top: 0;padding-top: 0;padding-bottom:35vh;}
.hero-bottom {position: absolute;left: 5%;bottom: 40vh;}
.hero-slider {position: absolute;inset: 0;width: 100%;height: 100%;}
.hero-video-el {position: absolute;inset: 0;opacity: 0;transition: opacity 0.8s ease;}
.herol {position: relative;width: 100%;z-index: 0;}
.herol-video {position: sticky;top: 0;height: 40vh;width: 100%;overflow: hidden;z-index: 0;}
.herol-overlay {position: absolute;inset: 0;background: rgba(255, 255, 255, 0.9);z-index: 1;}
.herol-video-el {width: 100%;height: 100%;object-fit: cover;object-position: top; display: block;max-width: none;max-height: none;}
.herol-content {position: relative;z-index: 2;margin-top: 0;padding-top: 0;padding-bottom:2vh;}
.herol-bottom {position: absolute; left: 50%;
  transform: translateX(-50%);bottom: 10vh;width: 100%}
.herol-video-el {position: absolute;inset: 0;opacity: 0;transition: opacity 0.8s ease;}	
.slide-active {opacity: 1;}
.scroll-down-arrow {position: absolute;right: 5%;bottom: 40vh;display: flex;align-items: flex-start;justify-content: center;width: 30px;height: 180px;user-select: none;pointer-events: none;animation: arrow-bounce 2s infinite ease-in-out;filter: drop-shadow(1px 1px 3px #000000);}
.arrow-vertical {width: 3px;height: 180px;background-color: #ffffff;border-radius: 2px;}
.arrow-vertical::after {content: "";position: absolute;top: 100%;left: 50%;transform: translateX(-50%);border-left: 8px solid transparent;border-right: 8px solid transparent;border-top: 8px solid #ffffff;}
@keyframes arrow-bounce {
0% {transform: translateY(0);opacity: 1;}
50% {transform: translateY(10px);opacity: 0.8;}
100% {transform: translateY(0);opacity: 1;}
}
.main, .in, .inn, .innn {width: 100%;box-sizing: border-box;}
.in {padding: 0 5%; }
.inn {padding: 0 13%; }
.innn {padding: 0 22%; }
.linksfoot {width: 15%;box-sizing: border-box;}
.rechtsfoot{width: 85%;box-sizing: border-box;}
.footer-wrapper {display: flex;flex-wrap: wrap;}

.kolomfoot-wrap {display: grid;gap: 10px;grid-template-columns: 1fr;}

.kolomfoot {min-width: 0;}
.social-icons {display: flex;justify-content: flex-end;align-items: center;gap: 33px;padding:20px 0 20px 0}
.social-link {display: inline-flex;align-items: center;justify-content: center;text-decoration: none;transition: color 0.2s ease, opacity 0.2s ease;}
.social-link svg {width: 22px;height: 22px;fill: currentColor;display: block;}
.social-link-linkedin, .social-link-instagram, .social-link-facebook {color: #5e5e5e;}
.social-link-linkedin:hover {color: #0a66c2;}
.social-link-instagram:hover {color: #e1306c;}
.social-link-facebook:hover {color: #1877f2;}
.split-layoutlijn {display: flex;width: 100%;align-items: stretch;gap: 8px;background-color: #fff;}
.split-layout {display: flex;width: 100%;align-items: stretch;}
.split-text {width: 50%;}
.split-image {width: 50%;overflow: hidden;display: flex;}
.split-image img {width: 100%;height: 100%;object-fit: cover;object-position: center; /* of 'top' als je de bovenkant wil behouden */ display: block;}	
.rechts13 {padding: 0 13% 0 5%;box-sizing: border-box;}	
.links13 {padding: 0 5% 0 13%;box-sizing: border-box;}
.rechts5 {padding: 0 5% 0 5%;box-sizing: border-box;}	
.links5 {padding: 0 5% 0 5%;box-sizing: border-box;}
.padding8 {padding: 8px 0 8px 0;box-sizing: border-box;}
.divider {width: 100%;height: 8px;}
.blok {width: 100%;position: relative;}
.blok-inner {width: 100%;}
.blok.upgroott::before, .blok.upkleint::before {content: "";display: block;background-color: inherit;}
.blok.upgroott::before { height: 6.25rem; }
.blok.upkleint::before { height: 3rem; }
.blok.downgroott::after, .blok.downkleint::after {content: "";display: block;background-color: inherit;}
.blok.downgroott::after { height: 6.25rem; }
.blok.downkleint::after { height: 3rem; }
.site-header {position: fixed;top: 0;left: 0;width: 100%;height: 64px;pointer-events: none;background: transparent;transition: background-color 0.2s ease; z-index: 1002;}
.site-header-inner {max-width: 100%;height: 100%;padding: 0 5%;display: flex;align-items: center;justify-content: space-between;pointer-events: auto;}
.site-header-overlay {display: flex;align-items: center;justify-content: space-between;width: 100%;}
.site-logo {color: #000000;transition: color 0.8s ease;z-index: 1002;}
.site-logo .groot,.site-logo .sterk {color: inherit;transition: color 0.8s ease;z-index: 1002;}
.leesbaar {text-shadow: 1px 1px 3px #000000;}	
.site-header.site-header--solid {background: #ffffff;}
.site-header.site-header--solid .site-logo,
.site-header.site-header--solid .site-logo .leesbaar,
.site-header.site-header--solid .site-logo .sterk {color: #00000;}
.site-header.site-header--solid .hamburger-btn {color: #000000;}
.site-logo {color: #000000;transition: color 0.8s ease;z-index: 1002;}
.site-logo .groot, .site-logo .sterk {color: inherit;transition: color 0.8s ease;z-index: 1002;}
.leesbaar {text-shadow: 1px 1px 3px #000000;}	
.site-header.site-header--solid {background: #ffffff;}
.site-header.site-header--solid .site-logo, .site-header.site-header--solid .site-logo .leesbaar, .site-header.site-header--solid .site-logo .sterk {color: #00000;}
.site-header.site-header--solid .hamburger-btn {color: #000000;}
.twee-kolommen {display: flex;flex-wrap: wrap;}
.kolom {width: calc(50% - 25px);}
.kolom:first-child {margin-right: 50px;}
.menu-horizontal {position: relative; }
.menu-horizontal ul {list-style: none;margin: 0;padding: 0;display: flex;justify-content: flex-end;}
.menu-horizontal li {position: relative;margin-right: 2rem;}
.menu-horizontal li:last-child {margin-right: 0;}
.menu-horizontal a {text-decoration: none;padding: 0.5rem 0;display: block;transition: color 0.3s ease;}
.menu-horizontal a::after {content: "";position: absolute;bottom: 0;left: 0;width: 0;height: 2px;background-color: #ccbac1;transition: width 0.8s ease;}
.menu-horizontal a:hover::after {width: 100%;}
.menu-horizontal a:hover {color: #000000;}
.has-megamenu {position: relative;}
.megamenu {position: fixed;left: 0; right: 0;top: 64px;width: 100%;background: #fafafa;box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);opacity: 0;visibility: hidden;transform: translateY(-10px);transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;z-index: 998; }
.has-megamenu:hover .megamenu {opacity: 1;visibility: visible;transform: translateY(0);}
.megamenu-inner {max-width: 1400px;margin: 0 auto;padding: 3rem 0; display: flex;}
.megamenu-kolom {flex: 1;padding: 0 2.5%;box-sizing: border-box;min-width: 0;}
.megamenu-kolom:first-child {padding-left: 5%;}
.megamenu-kolom:last-child {padding-right: 5%;}
.megamenu-kolom h3 {margin: 0 0 1rem 0;font-size: 1rem;font-weight: 500;color: #000000;text-transform: uppercase;letter-spacing: 0.05em;}
.megamenu-kolom ul {list-style: none;margin: 0;padding: 0;display: block; }
.megamenu-kolom li {margin: 0 0 0.75rem 0;display: block;}
.megamenu-kolom a {display: block; color: #5e5e5e;padding: 0.5rem 0; line-height: 1.4;transition: color 0.3s ease;text-decoration: none;}
.megamenu-kolom a::after {display: none;}
.megamenu-kolom a:hover {color: #5e5e5e;}	
.accordion {width: 100%;margin: 0 auto;}
.accordion-item {border-bottom: 1px solid #e5e5e5;margin-bottom: 0;}
.accordion-header {list-style: none;cursor: pointer;padding: 1.5rem 0;display: flex;align-items: center;position: relative;color: #5e5e5e;transition: color 0.3s ease;}
.accordion-header::-webkit-details-marker {display: none;}
.accordion-header::marker {display: none;}
.accordion-header::before {content: "+";font-size: 1.9rem;color: #5e5e5e;margin-right: 1rem;transition: transform 0.3s ease, color 0.3s ease;font-weight: 200;min-width: 1.5rem; text-align: center;}
.accordion-header:hover {color: #000000;}
.accordion-header:hover::before {color: #000000;}
details[open] .accordion-header::before {content: "−";}
.accordion-content {padding: 0 0 1.5rem 0;padding-left: 2.5rem;color: #5e5e5e;line-height: 1.6;}
.accordion-content p {margin: 0;}
.rechter {box-sizing: border-box;padding: 0 5% 0 0}
.card-grid {display: grid;gap: 33px; grid-template-columns: repeat(4, 1fr); }
.card {background-color: #fafafa;padding: 0;box-sizing: border-box;padding-bottom: 20px;display: flex;flex-direction: column;}
.card-img {width: 100%;height: 35vh;object-fit: cover;display: block;margin-bottom: 5px;}
.card-title {margin: 5px 0 10px 0;}
.card-filters {display: flex;gap: 20px;margin-bottom: 1.5rem;}
.filter-link {text-decoration: none;color: #000000;font-size: 0.95rem;}
.filter-link.is-active {color: #000;font-weight: 400;text-decoration: underline;}
.card.is-hidden {display: none;}
	
.splitproject-layoutlijn {display: flex;width: 100%;align-items: stretch;gap: 8px;background-color: #fff;}
.splitproject-layout {display: flex;width: 100%;align-items: stretch;}
.splitproject-text {width: 50%;}
.splitproject-image {width: 50%;overflow: hidden;display: flex;}
.splitproject-image img {width: 100%;height: 100%;object-fit: cover;object-position: center; display: block;}

.split-image-grid {flex-direction: column;gap: 8px;}
.split-image-grid-top {display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px;flex: 1 1 auto;}
.split-image-grid-bottom {flex: 1 1 auto;      }
.split-image-grid-top .grid-item {position: relative;width: 100%;padding-bottom: 100%;overflow: hidden;}
.split-image-grid-top .grid-item img {position: absolute;top: 0;left: 0;width: 100%;height: 100%;object-fit: cover;display: block;}
.split-image-grid-bottom img {width: 100%;height: 100%;object-fit: cover;display: block;}	
.drie-blokken {display: flex;width: 100%;gap: 8px;background-color: #fff; }
.blok {overflow: hidden;}
.blok-links,.blok-rechts {flex: 0 0 25%;}
.blok-midden {flex: 0 0 50%;}
.blok img {width: 100%;height: 100%;object-fit: cover;display: block;}

@media (min-width: 801px) and (max-width: 1200px) 
{.kolomfoot-wrap {grid-template-columns: repeat(2, 1fr);}
}

@media (min-width: 1101px) 
{.kolomfoot-wrap {grid-template-columns: repeat(4, 1fr);}
}

@media screen and (min-width: 1300px) {
.site-header-inner {max-width: 100%;height: 100%;padding: 0;display: flex;align-items: center;justify-content: space-between;pointer-events: auto;}
.rechts13 {padding: 0 13% 0 5%;box-sizing: border-box;}	
.links13 {padding: 0 5% 0 13%;box-sizing: border-box;}
.rechts5 {padding: 0 0 0 5%;box-sizing: border-box;}	
.links5 {padding: 0 2% 0 0;box-sizing: border-box;}
}
	
@media screen and (min-width: 1300px) and (max-width: 1400px) {
.rechts13 {padding: 0 13% 0 5%;box-sizing: border-box;}	
.links13 {padding: 0 5% 0 13%;box-sizing: border-box;}
.rechts5 {padding: 0 5% 0 5%;box-sizing: border-box;}	
.links5 {padding: 0 5% 0 5%;box-sizing: border-box;}	
.site-header-inner {max-width: 100%;height: 100%;padding: 0;display: flex;align-items: center;justify-content: space-between;pointer-events: auto;}
}

@media screen and (max-width: 900px) {
 .deskmenu {display: none}
.smartmenu {display: block}	

.hamburger-btn {background: none;border: none;padding: 0;display: inline-flex;flex-direction: column;gap: 6px;cursor: pointer;color: #000000;transition: color 0.8s ease;position: relative;z-index: 1001;}
.hamburger-bar {width: 22px;height: 2px;background-color: currentColor;transition: all 0.3s ease;transform-origin: center;}
.hamburger-btn.is-active .hamburger-bar:nth-child(1) {transform: translateY(8px) rotate(45deg);}
.hamburger-btn.is-active .hamburger-bar:nth-child(2) {opacity: 0;transform: scaleX(0);}
.hamburger-btn.is-active .hamburger-bar:nth-child(3) {transform: translateY(-8px) rotate(-45deg);}
.mobile-menu {position: fixed;top: 0;right: -100%;width: 100%;height: 100vh;background-color: #ffffff;z-index: 1000;display: flex;align-items: center;justify-content: center;transition: right 0.4s ease;}
.mobile-menu.is-open {right: 0;}
.mobile-menu ul {list-style: none;margin: 0;padding: 0;text-align: center;}
.mobile-menu li {margin: 2rem 0;}
.mobile-menu a {color: #000000;text-decoration: none;font-size: 2rem;font-weight: 200;transition: color 0.3s ease;}
.mobile-menu a:hover {color: #EB970F;}
}

@media screen and (max-width: 700px) {
.M-weg {display: none}
.bruit {display: block}	
.upgroot {margin-top: 3.2rem}
.upklein {margin-top: 1.7rem}
.downgroot {margin-bottom: 3.2rem}
.downklein {margin-bottom: 1.7rem}
.in { padding: 0 5%; }
.inn { padding: 0 10%; }
.innn { padding: 0 5%; }
.linksfoot {width: 20%;box-sizing: border-box;}
.rechtsfoot{width: 80%;box-sizing: border-box;}
.twee-kolommen {display: block;}
.kolom {width: 100%;margin-right: 0;}
.split-layoutlijn {flex-direction: column; gap: 0px;}
.split-layout {flex-direction: column;}
.split-text,.split-image {width: 100%;}
.split-image {min-height: 200px;}
.rechts13 {padding: 0 10% 0 10%;box-sizing: border-box;}	
.links13 {padding: 0 10% 0 10%;box-sizing: border-box;}
.rechts5 {padding: 0 10% 0 10%;box-sizing: border-box;}	
.links5 {padding: 0 10% 0 10%;box-sizing: border-box;}
.rechter {box-sizing: border-box;padding: 0 5% 0 0}
.linker {box-sizing: border-box;padding: 0 0 0 5%}
.scroll-down-arrow {left: 5%;bottom: 30vh;width: 30px;height: 80px;}
.arrow-vertical {width: 3px;height: 80px;background-color: #ffffff;border-radius: 2px;}
.whatsapp-float {position: fixed;right: 20px;bottom: 20px;z-index: 9999;display: inline-flex;align-items: center;gap: 10px;padding: 10px 14px 10px 16px;background: #25d366;color: #fff;border-radius: 999px;box-shadow: 0px 1px 2px #000000;text-decoration: none;transition: transform 0.2s ease, box-shadow 0.2s ease;}
.whatsapp-bubble {font-size: 15px;line-height: 1;font-weight: 600;white-space: nowrap;}
.whatsapp-icon {width: 28px;height: 28px;display: block;flex: 0 0 auto;}
.whatsapp-float:hover {transform: translateY(-2px);box-shadow: 0 10px 24px rgba(0, 0, 0, 0.25);}
.hero-content {position: relative;z-index: 2;margin-top: 0;padding-top: 0;padding-bottom:5vh;}
.hero-bottom {position: absolute;left: 5%;bottom: 50vh;}
.blok.upgroott::before { height: 3.2rem; }
.blok.upkleint::before { height: 1.7rem; }
.blok.downgroott::after { height: 3.2rem; }
.blok.downkleint::after { height: 1.7rem; }
.mobiel-pad, .mobieler-pad  {padding-top: 3.2rem; box-sizing: border-box}
.mobiel-padklein, .mobieler-padklein {padding-top: 1.7rem; box-sizing: border-box}
.mobiel-onderpad  {padding-bottom: 3.2rem; box-sizing: border-box}
.card-grid {grid-template-columns: repeat(2, 1fr);}
.splitproject-layoutlijn, .split-image-grid, .split-image-grid-top, .drie-blokken {gap: 4px;}
.divider {height: 4px;}
}

@media (max-width: 500px) {.card-grid {grid-template-columns: 1fr;} .card-img {width: 100%;height: 25vh;object-fit: cover;display: block;margin-bottom: 5px;} 
.splitproject-layoutlijn {flex-direction: column; gap: 0px;}
.splitproject-layout {flex-direction: column;}
.splitproject-text,.splitproject-image {width: 100%;}
.splitproject-image {min-height: 200px;}
}


@media screen and (min-width: 1401px) {
.megam, h1.megam, h2.megam, h3.megam, p.megam {font-size: 95px}
h1, .mega, h1.mega, h2.mega, h3.mega, p.mega {font-size: 49px}
h2, .groot, h1.groot, h2.groot, h3.groot, h4.groot, p.groot {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}	
.foot {font-size: 16px}
}	
@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 {font-size: 48px}
h2, .groot, h1.groot, h2.groot, h3.groot, h4.groot, p.groot {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}	
.foot {font-size: 16px}
}
@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 {font-size: 48px}
h2, .groot, h1.groot, h2.groot, h3.groot, h4.groot, p.groot {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}
.foot {font-size: 15px}
}
@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 {font-size: 47px}
h2, .groot, h1.groot, h2.groot, h3.groot, h4.groot, p.groot {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}
.foot {font-size: 15px}
}
@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 {font-size: 47px}
h2, .groot, h1.groot, h2.groot, h3.groot, h4.groot, p.groot {font-size: 36px}
h3, .medium, h1.medium, h2.medium, h3.medium, p.medium {font-size: 24px}
ul.no-bul, 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}
.foot {font-size: 14px}
}
@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 {font-size: 46px}
h2, .groot, h1.groot, h2.groot, h3.groot, h4.groot, p.groot {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}
.foot {font-size: 14px}
}
@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 {font-size: 44px}
h2, .groot, h1.groot, h2.groot, h3.groot, h4.groot, p.groot {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}
.foot {font-size: 14px}
}
@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 {font-size: 42px}
h2, .groot, h1.groot, h2.groot, h3.groot, h4.groot, p.groot {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}
.foot {font-size: 14px}
}
@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 {font-size: 39px}
h2, .groot, h1.groot, h2.groot, h3.groot, h4.groot, p.groot {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}
.foot {font-size: 14px}
}