* {padding: 0; margin: 0;  border: 0; box-sizing: border-box;}
*::before, *::after { box-sizing: border-box; }
html {font-size: clamp(16px,1.5vw,20px); scroll-behavior: smooth; overscroll-behavior: none;}
body {font-size: var(--font-size-body); color: var(--mainColor); font-family: var(--primaryFont); font-weight: var(--font-regular); background: var(--backgroundColor); line-height: var(--line-height-large); }
a {text-decoration: none; color: inherit; text-underline-offset: .25em; text-decoration-thickness: .05em; }
p a { text-decoration: underline; }
p a:hover { text-decoration: underline; text-underline-offset: .25em; text-decoration-thickness: .05em; transition: color 250ms; }
p img { display: block; margin-bottom: .2rem; }
p {margin-bottom: 1.4em;}
ul {list-style-type: none;}
br {margin:0; height: 0;}
strong { font-style: normal; font-weight: var(--font-bold); }
em { font-style: italic; font-weight: 300; letter-spacing: .02em; }
fieldset legend { display: none;}
address { font-style: normal;}

:root {
    /* Fonts */
    --primaryFont: "Elza";
    --headerFont: "Dashiell Fine";

    /* Font weights */
    --font-regular: 400; 
    --font-medium: 500; 
    --font-bold: 700; 

    /* Font sizes */
    --font-size-h1: 1.9rem;
    --font-size-h2: 1.9rem;
    --font-size-h3: 1.4rem;
    --font-size-h4: 1.2rem;
    --font-size-body: 1rem; 


    /* Colors */  
    --mainColor: var(--myTeal);
    --backgroundColor: var(--myWhite);

    --myBrown: #B17F4A; 
    --myBrown50: rgba(177, 127, 74, .5); 
    --myTurquoise: #00A19A; 
    --myLightTurquoise: #1BC9C1; 
    --myBlue: #71A2B5; 
    --myLightBlue: #CDDDE7; 
    --myLightBlue50: rgba(205, 221, 231, 0.5); 
    --myTeal: #0A4353; 
    --myWhite: #FFFFFF; 

    /* Line heights */
    --line-height-small: 1;
    --line-height-regular: 1.2;
    --line-height-large: 1.6; 

    /* Widths */
    --gutterSide: 2rem;
    --gutterTop: 1rem;
    --maxWidth: 55rem;
    --maxWidthUltraWide: 130rem;
    --maxWidthNarrow: 39rem;
    --width: calc(100% - calc(var(--gutterSide) * 2));

    /* Margins */
    --margin: var(--margin-y-threequart) auto;
    --margin-y: 4.5rem; 
    --margin-y-threequart: calc(var(--margin-y) * .75); 
    --margin-y-quarter: calc(var(--margin-y) / 4); 
    --margin-y-half: calc(var(--margin-y) / 2); 
    --margin-y-double: calc(var(--margin-y) * 2); 
    --margin-y-triple: calc(var(--margin-y) * 3); 
    --margin-y-quad: calc(var(--margin-y) * 4); 
    --paddingTop: 5rem; 
    --btnPadding: .4rem 1rem .5rem;

    /* Transitions */
    --myEaseOut: cubic-bezier(.17,.84,.44,1); 

    /* Shadows */
    --dropShadow: 0px 3px 6px 0 rgba(0,0,0,0.16);
    --blurShadow: 10px 10px 30px 0 rgba(0,0,0,0.16);

    /* Borders */
    --borderRadius: .75rem; 
    --halfBorderRadius: calc(var(--borderRadius) / 2);
    --btnBorderRadius: 0; 

    /* Logos */
    --logoWidth: 13rem; 
}

/* --------------- HEADERS --------------- */
h1,.h1 ,h2,.h2 ,h3,.h3 ,h4,.h4  {font-weight: var(--font-regular); font-family: var(--headerFont);  line-height: var(--line-height-regular); margin-bottom: 0.45em; }
h1, .h1 {font-size: var(--font-size-h1); } 
h2, .h2 {font-size: var(--font-size-h2); }
h3, .h3 {font-size: var(--font-size-h3);  }
h4, .h4 {font-size: var(--font-size-h4); } 

/* --------------- GENERAL --------------- */
body { min-height: 100vh; min-height: 100dvh; display: grid; grid-template-rows: 1fr auto; }
main { padding-top: var(--paddingTop); }
header, main, footer { max-width: var(--maxWidthUltraWide); width: 100%; margin: 0 auto; position: relative; }
nav#main, footer > nav, .container {max-width: var(--maxWidth); width: var(--width); margin: var(--margin); position: relative; }
section { position: relative;position: relative; margin: 0 auto;  display: flex; flex-direction: column; }
section.ultrawide { max-width: var(--maxWidthUltraWide); width: 100%; }
section.narrow { max-width: var(--maxWidthNarrow); }

/* COLS */
.two-col { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 0 2rem;  grid-auto-flow: dense;}

/* IMAGES */
figure, picture { position: relative;}
:is(picture.abs, picture.abs img) { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0;}
picture { display: flex; }

/* SELECTION */
*::selection { background: var(--mainColor); color: var(--backgroundColor); }

/* NO VISIBLE SCROLLBAR */
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; } .no-scrollbar::-webkit-scrollbar { display: none; }

/* BUTTONS */
button { all: unset; box-sizing: border-box; margin: 0; padding: 0; border: 0; touch-action: manipulation;  text-align: center;}
button,label { cursor: pointer;  }
.btn { padding: var(--btnPadding);  text-align: center;  user-select: none; cursor: pointer; background: var(--myTurquoise); color: var(--myWhite); font-weight: var(--font-bold); transition: color 125ms, background 125ms; border-radius: .3em;}
.btn:hover {background: var(--myTeal); }

/* ARROW */
.arrow { display: inline; display: inline-flex; align-items: flex-end; width: 1.5em; position: relative; margin-left: .25rem;  }
.arrow::before { position: absolute; content: "";  width: 1.5em; height: 1.5em; background: var(--myBlue) url("/img/arrow.svg") center center / 50% no-repeat; transform: translateY(25%);   border-radius: 50%; transition: background-color 125ms;}

/* --------------- HEADER --------------- */
header { position: fixed; z-index: 10; --link-padding: .6em; background: var(--myWhite); box-shadow: 0rem 0rem 1rem rgba(0,0,0,0.1); left: 50%; transform: translateX(-50%);}
header img { max-width: 100%; display: block;}
.burger{ display: none;  }

/* DESKTOP NAV */
nav#main { margin: 0 auto; padding: 0.75rem 0; display: flex; align-items: center;   font-size: .9rem;}
nav#main > a {max-width: var(--logoWidth); margin-bottom: 0.35rem}
nav#main > ul { display: flex; justify-content: space-around; align-items: center; margin-left: 4rem; flex-grow: 1;}
nav#main > ul > li {position: relative; display: flex; justify-content: space-between;}
nav#main > ul > li > a:not(.btn) { padding: var(--link-padding); transition: color 125ms; }

nav#main > ul li:first-of-type { display: none; }
nav#main > ul li:is(.active, :hover) > a:not(.btn) { color: var(--myTurquoise);}
nav#main > ul:has(:hover) li.active:not(:hover) > a:not(.btn) { color: var(--mainColor);} 


/* Burger */
input.burger { display: none; }
label.burger { width: 1.2rem; height: calc(0.8rem + 3px); transition: 250ms ease;  z-index: 99; align-items: center; justify-content: center;  display: none;   position: relative; }
label.burger::before { content: ""; position: absolute; --_excess: -.25rem;   top: var(--_excess); left: var(--_excess); width: calc(100% + var(--_excess) * -2); height: calc(100% + var(--_excess) * -2);}
label.burger > span { width: 1.2rem; height: 3px; position: absolute; background: var(--mainColor); transition: 250ms ease; }
label.burger > span:nth-of-type(2) { transform: translateY(-.4rem); }
label.burger > span:nth-of-type(1) { transform: none }
label.burger > span:nth-of-type(3) { transform: translateY(.4rem); }

/* Burger checked */
input.burger:checked ~ header label.burger { transform: rotate(90deg);}
input.burger:checked ~ header label.burger span:nth-of-type(2) { transform: rotate(45deg); background: var(--backgroundColor);}
input.burger:checked ~ header label.burger span:nth-of-type(1) { width: 1.6rem; height: 1.6rem; border-radius: 3px; transform: rotate(-90deg);}
input.burger:checked ~ header label.burger span:nth-of-type(3) { transform: rotate(-45deg); background: var(--backgroundColor);}


/* --------------- FOOTER --------------- */
footer { background: var(--myTeal); color: var(--myWhite); font-size: .85rem; margin-top: var(--margin-y-threequart);}
footer a:hover {color: var(--myTurquoise);}
footer > nav { display: grid; grid-template-columns: 2fr auto auto auto; grid-gap: 1rem calc(var(--margin-y) * 1.25);  }
footer > nav > a:first-of-type { max-width: var(--logoWidth); }
footer > nav > a img { width: 100%; }
footer > nav > ul:nth-of-type(2) { opacity: .7;}
footer > nav > ul:nth-of-type(2) a:hover {color: var(--myLightTurquoise);}
footer > nav > ul { grid-row: span 2;}
footer > nav > ul > li { margin-bottom: .5em;}
footer > nav > a:last-of-type { margin-left: 4.1rem; width: fit-content;}

footer > div { background: var(--myBrown);}
footer > div > p { max-width: var(--maxWidth); display: flex; justify-content: space-between; width: var(--width); margin: 0 auto; color: var(--myWhite); padding: 1em 0; font-size: .7rem; }

ul.socials { display: flex; align-items: center; gap: 0.2rem; --icon-size: 2rem; margin-bottom: 1rem; }
ul.socials li { position: relative; display: flex; justify-content: center; align-items: center;  }
ul.socials li a {width: var(--icon-size); height: var(--icon-size); display: flex; justify-content: flex-start; align-items: center; }
ul.socials li img { width: var(--icon-size); height: var(--icon-size); }

/* --------------- SECTIONS --------------- */
section.light { background: var(--myLightBlue50); }

section.tabbed { border-top: 1px solid var(--myTeal);}
section.tabbed > :is(h2,.h2):first-child, section.tabbed > .container:only-child :is(h2,.h2):first-child { position: absolute; top: 0; left: 50%; transform: translate(-50%, -100%); background: var(--myTeal); color: var(--myWhite); padding: var(--btnPadding); border-radius: var(--borderRadius) var(--borderRadius) 0 0; font-size: var(--font-size-h3); text-align: center; width: max-content; max-width: var(--width); }
section.tabbed > :is(h2,.h2) > span { position: absolute; left: 50%; top: 0%; transform: translate(-50%, -82%);   background: var(--myWhite); width: 1.4em; height: 1.4em; display: grid; place-items: center; color: var(--myTeal); border-radius: 50%;}


section.tabs { border-top: 1px solid var(--myTeal); margin: var(--margin-y-half) auto;}
section.tabs nav { position: absolute; top: 0; left: 50%; transform: translate(-50%, -100%); }
section.tabs nav ul {display: flex; align-items: center;  gap: 1rem;  white-space: nowrap;}
section.tabs nav ul li button { background: var(--mainColor); color: var(--myWhite); padding: var(--btnPadding); border-radius: var(--borderRadius) var(--borderRadius) 0 0;  display: block;  margin-bottom: 0; user-select: none; transition: color 125ms, background 125ms}
section.tabs nav ul li button[data-active=false] { background: var(--myBlue); color: var(--myWhite);}
section.tabs nav ul li button:hover { background: var(--myTeal);}
section.tabs .container { margin-top: var(--margin-y-half);}

section.tabs .content { scroll-margin-top: calc(var(--paddingTop) + var(--margin-y-quarter)); display: grid; grid-template-columns: 1.5fr 1fr; grid-gap: 2rem;}
section.tabs .content > div:first-of-type h3 { --ownColor: var(--myTurquoise); }
section.tabs .content > div:nth-of-type(2) h3 { --ownColor: var(--myBrown); }
section.tabs .content > div:only-child { grid-column: -1/1; }
section.tabs .content h3 { color: var(--ownColor);}
section.tabs .content ul li { position: relative;  padding-left: .8em;}
section.tabs .content ul li::before { position: absolute; left: 0; top: 0; content: "•";  color: var(--ownColor); }  
section.tabs .content[data-active=false] { display: none; }
section.tabs .content .full { grid-column: -1/1;  margin-top: var(--margin-y-threequart);  padding: var(--margin-y-half) 0 var(--margin-y-threequart);  position: relative; }
section.tabs .content .full h3 { font-size: var(--font-size-h2); color: var(--myTurquoise);}
section.tabs .content .full::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 100vw; height: 100%; background: var(--myLightBlue50); z-index: -1;}



section.intro img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
section.intro p a {margin-block: 1rem 1.4rem; float: right;}
section.intro .container { margin: var(--margin-y-quad) auto 0; padding: 1.25rem 1.75rem 0.25rem; border-radius: var(--borderRadius) var(--borderRadius) 0 0; color: var(--myWhite);  isolation: isolate;}
section.intro .container ~ .container { position: absolute;  margin: 0 auto; left: 0; right: 0; bottom: 0; background: var(--myBrown);  mix-blend-mode: multiply;}
section.intro .container ~ .container > * { opacity: 0; visibility: hidden;}
section.intro .container:first-of-type { z-index: 2;  }
section.intro.bare { height: var(--margin-y-triple);}


section.text .container { text-align: center;  max-width: var(--maxWidthNarrow);}
section.text h3 { font-size: var(--font-size-h2); color: var(--myTurquoise);}


section.usps { background: var(--myLightBlue50);}
section.usps h3 { color: var(--myBrown); }
section.usps ul li { position: relative;  padding-left: .8em;}
section.usps ul li::before { position: absolute; left: 0; top: 0; content: "•";  color: var(--myBrown); }  
section.usps h3:nth-of-type(2n+1) + ul { grid-column: 1; margin-bottom: 2rem;} 
section.usps h3:nth-of-type(2n+2) + ul { grid-column: 2; margin-bottom: 2rem;} 

section.trainingen { background: var(--myWhite);}
section.trainingen .container { margin-top: 0;}
section.trainingen ul { counter-set: index; margin-top: calc(var(--margin-y) - .5rem); overflow: hidden; border-radius: var(--borderRadius);  display: grid; grid-gap: 1rem; grid-template-columns: repeat(3, 1fr); width: 100%;  }
section.trainingen ul li { counter-increment: index; text-align: center; color: var(--myWhite);  flex-shrink: 0;}
section.trainingen ul li.active a .arrow::before {transform: translateY(0.5rem) rotate(-90deg); transform-origin: center center;}
section.trainingen ul li a { display: flex; flex-direction: column; align-items: center; padding: .8rem .8rem 3.35rem .8rem; height: 100%; position: relative;}
section.trainingen ul li a::before { content: counter(index); font-weight: var(--font-bold); font-family: var(--headerFont); font-size: var(--font-size-h3); height: 1.55em; width: 1.55em; background: var(--myWhite); border-radius: 50%; color: var(--myTeal); display: grid; place-items: center; margin: .5rem 0 1rem; }  
section.trainingen ul li a h3 { padding: 0 .25rem;}
section.trainingen ul li .arrow { margin: 2rem 0 1rem; font-size: 1.5rem; position: absolute; bottom: 1rem;}
section.trainingen ul li .arrow::before { background-color: var(--myTeal);}

section.trainingen ul li:is(:nth-of-type(6n+1),:nth-of-type(6n+6)) { background: var(--myBrown);}
section.trainingen ul li:is(:nth-of-type(6n+2),:nth-of-type(6n+4)) { background: var(--myTurquoise);}
section.trainingen ul li:is(:nth-of-type(6n+3),:nth-of-type(6n+5)) { background: var(--myBlue);}

section.details { --ownColor:  var(--myBrown);background: var(--ownColor); }
section.details.blue { --ownColor:  var(--myBlue);}
section.details .container { margin: 0 auto;  padding: var(--margin-y-half) 0; }
section.details.turquoise { --ownColor:  var(--myTurquoise);}
section.details::before,section.details::after { content: ""; height: var(--margin-y-half);  background: var(--myWhite); width: 100%; }
section.details ul { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 1rem var(--margin-y);}
section.details ul li { background: var(--ownColor);}
section.details ul li strong {filter: brightness(0.95)}
section.details ul p { color: var(--myWhite);}

section.form .container { margin-bottom: var(--margin-y); margin-top: 0; padding-top: var(--margin-y-threequart); padding-bottom: 1rem;}
section.form h3 { color: var(--myBrown); font-size: var(--font-size-h2); filter: brightness(0.95);}

section.contact .container > :first-child ~ *:not(address) { max-width: 20rem;}
address { grid-column: 2; grid-row: 1 / span 10; display: grid; grid-template-columns: auto 1fr; grid-gap: 0 2rem; }

.columns {column-width: 20rem;}
address + address {margin-top: 1rem;}
address img { max-width: 8.5rem;}
address > div { display: flex; flex-direction: column; align-items: flex-start;}
address:not(:has(ul)) {grid-gap: 0 1rem;}
address:not(:has(ul)) img {max-width: 5.5rem;}
address:not(:has(ul)) > div {justify-content: center;}
address:not(:has(ul)) > div em {margin-bottom: 0.5rem;}
address strong { font-size: var(--font-size-h4); font-weight: var(--font-bold) ;}
address em { color: var(--myTurquoise);}
address nav { margin: 1rem 0;}
address nav ul {margin: 0!important; padding: 0!important;}
address nav li { margin-bottom: 1rem!important; list-style: none;}
address nav li a { display: flex; align-items: center;}
address nav li a:hover { color: var(--myTurquoise);}
address nav li a::before { content: ""; width: 1.8em; height: 1.8em; background: var(--mainColor) url('/img/tel.svg') center center / 65% 65% no-repeat; margin-right: .65rem; border-radius: .1rem;}
address nav li a:hover::before { background-color: var(--myTurquoise);}
address nav li.mail a::before { background-image: url("/img/mail.svg");}


/* --------------- FAQ --------------- */
section.standard ul.faq-list { list-style: none; padding: 0;}
ul.faq-list li:first-of-type { border-top: 1px solid;}

ul.faq-list details { border-bottom: 1px solid;  }
ul.faq-list details summary { cursor: pointer; padding: .5rem .5rem .5rem 0; border-bottom: 1px; list-style: none;   user-select: none;}
ul.faq-list details summary::before { content: "+ "; display: inline-block; width: 1rem; }
ul.faq-list details[open] summary::before { content: "- "; }
ul.faq-list details[open] summary,
ul.faq-list details summary:hover {color: var(--myTurquoise);}

ul.faq-list .faq-answer { padding: .5rem .5rem 0rem 0; border-bottom: 1px solid #eee; }

  
/* --------------- STANDARD PAGE --------------- */
section.standard img { width: 100%;}
section.standard :is(h2,h3):not(:first-child) {  padding-top: 1em; }
section.standard article > div:not(:last-of-type) {margin: calc(var(--font-size-h2) + 2.4rem) auto calc(var(--font-size-h2) + 1rem);}
section.standard article > div:first-of-type { margin-top: 0; }
section.standard .single-col { max-width: var(--maxWidth);  margin: 0 auto;  }
section.standard .container:not(:has(.two-col)) .single-col {max-width: 44rem;}
section.standard p a {  color: var(--myTurquoise); }
section.standard ul { list-style: initial;  padding-left: 1rem; margin: .5rem 0 1rem;}
section.standard ul li { margin-bottom: 0.25rem; }
section.standard ol { list-style: numeric;  padding-left: 1rem; margin: .5rem 0 1rem;}
section.standard ol li {margin-bottom: 0.5rem;}
section.standard :is(ul, ol) li::marker { font-weight: var(--font-medium); font-size: 0.9rem;  }
section.standard blockquote { padding-left: 1rem; border-left: .25rem solid var(--myTurquoise); font-size: 1.2rem;  margin: 1.5rem 0;}
section.standard h2 {color: var(--myTurquoise);}
section.standard h3 {color: var(--myBrown);}

/* --------------- FORM --------------- */
form.custom { 
    --form-main-color: var(--mainColor);  
    --form-border-color: var(--mainColor); 
    --form-label-color: var(--mainColor); 
    --form-input-background-color: transparent;  
    --form-asterisk-color: var(--mainColor); 
    --form-color-focus: var(--mainColor); 
    --form-color-error: maroon;
 }
form.custom { background: var(--myWhite); padding: 2rem;  border-radius: var(--borderRadius); border: 1px solid var(--myTurquoise); display: grid; grid-template-columns: 1fr 1fr; grid-gap: 0 var(--margin-y); align-items: flex-start; }
form.custom fieldset { display: grid; grid-template-columns: 1fr; grid-gap: 1rem;}

form.custom :is(textarea, input, select) { padding: 0.5rem; color: var(--form-main-color);  width: 100%; border: 1px solid var(--myLightTurquoise);  font-size: var(--font-size-body);}
form.custom :is(textarea, input, select):focus-visible {  outline: 1px solid var(--myLightTurquoise); }
form.custom :is(textarea, input, select)::placeholder { opacity: 0;}
form.custom :is(textarea, input, div):not([required]) + label::after { content: "(optioneel)"; display: inline-block; margin-left: 0.35em;  color: var(--form-asterisk-color); transition: opacity 250ms; }

form.custom input {font-family: var(--primaryFont);}
form.custom textarea { min-width: 100%; width: 100%; max-width: 100%; resize: none; color: var(--form-main-color);  font-family: var(--primaryFont); background: var(--form-input-background-color); }
form.custom div { display: flex; flex-direction: column-reverse; position: relative;  margin-bottom: .5rem;  align-items: flex-start; }
form.custom div > label { margin-bottom: .25rem;}

form.custom :is(:is(input, textarea):is(:focus, :not(:placeholder-shown)), .select[data-active=true]) + label:after { opacity: 0; }
form.custom .select[data-active=true] label::after { opacity: 0;}

form.custom input[type="email"]:not(:focus, :placeholder-shown):invalid + label::after { content: "Ongeldig"; display: inline-block; margin-left: 0.5em; padding: 0 0.5em;color: var(--form-color-error);}

form.custom .select { position: relative;}
form.custom .select > div { width: 100%; height: 100%; min-height: 2.333em; position: relative;   margin-bottom: 0;}
form.custom .select select { position: absolute; top: 0; left: 0; width: 100%; height: 100%; color: transparent; background: transparent;  cursor: pointer;  z-index: 2; font-family: var(--primaryFont);}
form.custom .select span { position: absolute; color: var(--form-main-color); top: 0; padding: .33rem .5rem; left: 0em; pointer-events: none;  transform-origin: left;   white-space: nowrap;   color: var(--form-label-color); }

form.custom .select > div::before,form.custom .select > div::after { content: ""; height: 2px; top: 45%; width: .5rem; position: absolute; transform: translate(40%, -.05rem) rotate(var(--r, 45deg)) translateY(.2rem); background: var(--mainColor);  right: 1rem; border-radius: 100vmin; }
form.custom .select > div::after { --r: -45deg }
form.custom .check { flex-direction: row; }
form.custom .check input { opacity: 0; position: absolute; top: 0; left: 0; width: 0; height: 0; }
form.custom .check label { display: flex; align-items: center; }
form.custom .check label::before { content: ""; margin-right: .8rem; width: 1rem; height: 1rem; border: 1px solid var(--myLightTurquoise); display: inline-block; }
form.custom .check input:checked + label::before {  background: var(--myLightTurquoise) url("/img/check.svg") center center / 80% 80% no-repeat; }
form.custom button { background: var(--myTurquoise);  width: fit-content; color: var(--myWhite); border-radius: 100vmin; padding: .25rem .25rem .25rem 1rem; font-weight: var(--font-regular); border: none; display: flex; align-items: center;  margin-left: auto; }
form.custom button span { height: 1.5em; margin-left: .5em; font-size: 1.2rem;}
form.custom button span::before { transform: none; background-color: var(--myTeal);}
form.custom button:hover {background: var(--myTeal);}


/* --------------- 404 PAGE --------------- */
section.not-found { display: flex; flex-direction: column; align-items: center  }


/* --------------- MEDIA QUERIES --------------- */
/* MIN */


/* MAX */
@media only screen and (max-width: 1100px) {
    /* --------------- HEADER --------------- */
    nav#main { font-size: 1rem;}
}
@media only screen and (max-width: 950px) {
    /* --------------- SECTIONS --------------- */
    section.trainingen ul { grid-template-columns: 1fr 1fr;}
    /* --------------- FORM --------------- */
    form.custom { grid-gap: 2rem; }
    
}
@media only screen and (max-width: 768px) {
    :root { 
        --paddingTop: 4.25rem; 
        --logoWidth: 13rem; 
        --gutterTop: 1rem; 
        --gutterSide: 1.25rem; 
    }
    label.burger { display: flex; }

    /* --------------- HEADER --------------- */

    header::before { position: absolute; top: 0; left: 0; width: 100%; height: 100%; content: ""; background: var(--myWhite); border-bottom: 1px solid var(--myLightBlue50); }
    nav#main > ul { position: fixed; top: var(--paddingTop); border-bottom: 1px solid var(--myLightBlue50); padding: 1.5rem 1rem 2rem;  transform: translateY(calc(-100% - var(--paddingTop))); transition: 250ms ease;  width: 100%; display: flex; flex-direction: column; align-items: flex-start; background: var(--backgroundColor);   display: flex;flex-direction: column;  margin: 0; left: 0;  z-index: -1; box-shadow: 0rem 0rem 1rem rgba(0,0,0,0.1);}
    nav#main > ul > li { display: flex; margin: 0;  font-size: 1.2rem;}
    nav#main > ul > li:first-of-type { display: flex; }
    nav#main > ul > li > a:not(.btn) { padding: 0.5rem;  }
    nav#main > ul > li > a.btn { margin-top: 1rem;}
    nav#main > label { margin-left: auto; }
    input.burger:checked ~ header nav#main ul { transform: none;  } 

    /* --------------- FOOTER --------------- */
    footer > nav { grid-template-columns: 1fr; font-size: 1rem; grid-gap: 2rem;}
    footer > nav > a:first-of-type { max-width: 17rem;}
    footer > nav > a:last-of-type { margin: 0;}
    footer > div {margin-top: 3.5rem;}

    /* --------------- SECTIONS --------------- */
    .two-col { grid-template-columns: 1fr; }
    section.text .container { text-align: left;}
    section.usps h3:nth-of-type(2n+2) + ul { grid-column: 1; }
    section.tabs .content { grid-template-columns: 1fr;}
    section.tabs .content > div:not(:last-of-type) { margin-bottom: 2rem; }
    section.tabs .content > .full { margin-top: 0;}
    section.form .container { max-width: 30rem;}
    section.contact .container { max-width: 30rem; }
    section.contact address { order: 2; grid-row: unset;  grid-column: unset;}
    section.standard article > div:not(:last-of-type) { max-width: var(--maxWidthNarrow);}
    
    /* --------------- FORM --------------- */
    form.custom { grid-gap: 1rem; grid-template-columns: 1fr;  margin-bottom: var(--margin-y-half); }


}

@media only screen and (max-width: 600px) {
    :root { 
        --margin: 3rem auto;
    }
    /* --------------- SECTIONS --------------- */
    section.trainingen ul { grid-template-columns: 1fr; max-width: 25rem; margin-left: auto; margin-right: auto; }
    section.details ul { grid-template-columns: 1fr;}
    section.tabs { border: none;}
    section.tabs nav {  position: sticky; top: var(--paddingTop); transform: none; inset: unset; padding-top: .5rem; top: var(--paddingTop); z-index: 2; border-bottom: 1px solid var(--mainColor); background: var(--myWhite); display: none; }
    section.tabs nav ul { width: 100%;  overflow: auto;  max-width: 100vw;}
    section.tabs nav ul li:first-of-type { margin-left: var(--gutterSide)}
    section.tabs nav ul li:last-of-type { margin-right: var(--gutterSide)}
    section.tabs .content.content { display: block;  position: relative; }
    section.tabs .content::before {  content: ""; position: absolute; top: 0; left: calc(var(--gutterSide) * -1); width: calc(100% + var(--gutterSide) * 2); height: 1px; background: var(--mainColor);}
    section.tabs .content h3:first-of-type { font-size: var(--font-size-h2); }

    section.tabs .content:not(:first-child) { margin-top: 5rem; }
    section.tabs .content > div:first-of-type { position: relative; padding-top: 1.5rem;   }
    section.tabs .content > div:first-of-type >  h3:first-child{ position: absolute; top: 0; left: 50%; transform: translate(-50%, -100%); background: var(--mainColor); color: var(--myWhite); padding: var(--btnPadding); border-radius: var(--borderRadius) var(--borderRadius) 0 0; font-size: var(--font-size-h3); text-align: center; width: max-content; max-width: var(--width); }
    section.tabs > :is(h2,.h2) > span { position: absolute; left: 50%; top: 0%; transform: translate(-50%, -70%);   background: var(--myWhite); width: 1.4em; height: 1.4em; display: grid; place-items: center; color: var(--myTeal); border-radius: 50%;}

    section.contact address {  grid-template-columns: 1fr; margin-top: 2rem; }
    section.contact address img { margin: 0 0 1rem; }
}


/* --------------- REDUCED MOTION --------------- */
@media (prefers-reduced-motion) { }
  

/* --------------- ANIMATIONS --------------- */