@font-face {
    font-family: 'Nip Sans';
    src: url('../fonts/NipSans-Bold.woff2') format('woff2'),
        url('../fonts/NipSans-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}
/* reset */
*{ -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
   font-family: 'Nip Sans',Arial,Helvetica Neue,Helvetica,sans-serif; line-height: 1.5em; }
::-moz-selection { background: #E9F0FB; color: #221E1B; text-shadow: none; }
::selection { background: #E9F0FB; color: #221E1B; text-shadow: none; }
html { background: #1ACC5C; font-size: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
body { background: #1ACC5C; margin: 0; padding: 0; min-height: 100dvh; color: #221E1B; position: relative;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}

/* grid */
header { position: relative; z-index: 0; }
main { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: center; min-height: 100dvh; width: 100%; }
.section,
.section_row { display: flex; flex-wrap: wrap; width: 100%; }

.bg_color__zwart { background: #221E1B; }
.bg_color__wit { background: #E9F0FB; }

/* typo */
.typo__wit { color: #E9F0FB; }
.typo__groen { color: #1ACC5C; }

.typo__center { text-align: center; }
.typo__right { text-align: right; }

h1 { font-size: 9em; display: none; }
h2 { font-size: 6em; }
h3 { font-size: 4em; }
h4,
h5 { font-size: 2.4em; }
h1,
h2,
h3,
h4,
h5 { line-height: .85em; margin: 0; }
p,
ul { font-size: 2.4em; line-height: 1em; margin: 0; }
ul { margin: .5em 0; }
li { font-size: 1em; padding: .25em 0; line-height: 1em; }
p.small { font-size: 1.6em; }

p+p { margin-top: 1em;}

a:link,
a:visited { color: currentColor; text-decoration: none; }
a:hover,
a:active { color: currentColor; text-decoration: underline; }

a.btn { font-size: 8em; line-height: .85em; }

img { width: 100%; height: auto; }

.has_border--top { border-top: 1px solid #1ACC5C; }
.has_border--bottom { border-bottom: 1px solid #1ACC5C; }
.is_accordeon__head { cursor: pointer; display: flex; border-top: 1px solid #1ACC5C; transition: color .2s ease-in-out; }
.is_accordeon__head:hover { color: #221E1B; }
.is_accordeon__head h5 { width: 20%; font-size: 4em; }
.is_accordeon__head h3 { width: 80% }
.is_accordeon__main { }
.is_accordeon__main--content { border-top: 1px solid #1ACC5C; margin-left: 20%;}

/* accordeon klappert */
.is_accordeon__main { opacity: 0; max-height: 0; overflow: hidden; transition: opacity 200ms linear, max-height 200ms linear; will-change: opacity, max-height; }
.is_accordeon__head[aria-expanded='true'] + .is_accordeon__main { opacity: 1; max-height: 999em; transition: all 200ms linear; will-change: opacity, max-height; }

.hidden { display: none !important; visibility: hidden; }

/* desktop */
@media only screen and (min-width: 1024px){
  body { font-size:calc(5.75px + (10 - 5.75) * ((100vw - 768px) / (1336 - 768))) }
  .logo svg { width: 50vw; height: auto; }
  .section_row,
  .section_col { padding: 0 2vw; }

  .pt-0 { padding-top: 0; }
  .pt-10 { padding-top: 1vw; }
  .pt-20 { padding-top: 2vw; }
  .pt-40 { padding-top: 4vw; }
  .pt-60 { padding-top: 6vw; }
  .pt-80 { padding-top: 8vw; }

  .pb-0 { padding-bottom: 0; }
  .pb-10 { padding-bottom: 1vw; }
  .pb-20 { padding-bottom: 2vw; }
  .pb-40 { padding-bottom: 4vw; }
  .pb-60 { padding-bottom: 6vw; }
  .pb-80 { padding-bottom: 8vw; }

  .l4-1 { width: 25%; }
  .l4-2 { width: 50%; }
  .l4-3 { width: 75%; }
  .l4-4 { width: 100%; }

  .pre_l4-1 { margin-left: 25%; }
  .pre_l4-2 { margin-left: 50%; }

}
/* not desktop */
@media only screen and (max-width: 1023px){
  body { font-size: 62.5% }
  .logo svg { width: 75vw; height: auto; }
  .section_row,
  .section_col { padding: 0 20px; }

  .pt-0 { padding-top: 0; }
  .pt-10 { padding-top: 10px; }
  .pt-20 { padding-top: 20px; }
  .pt-40 { padding-top: 40px; }
  .pt-60 { padding-top: 60px; }
  .pt-80 { padding-top: 80px; }

  .pb-0 { padding-bottom: 0; }
  .pb-10 { padding-bottom: 10px; }
  .pb-20 { padding-bottom: 20px; }
  .pb-40 { padding-bottom: 40px; }
  .pb-60 { padding-bottom: 60px; }
  .pb-80 { padding-bottom: 80px; }
}
/* tablet */
@media only screen and (min-width: 768px) and (max-width: 1023px){
  .m4-1 { width: 25%; }
  .m4-2 { width: 50%; }
  .m4-3 { width: 75%; }
  .m4-4 { width: 100%; }
}
/* mobile */
@media only screen and (max-width: 767px){
  .section_row { padding-left: 0; padding-right: 0; }
  .s4-1 { width: 25%; }
  .s4-2 { width: 50%; }
  .s4-3 { width: 75%; }
  .s4-4 { width: 100%; }


  h2 { font-size: 4.5em; }
  h3 { font-size: 3.2em; }

  .typo__right { text-align: center; }
}