* { padding: 0; margin: 0; border: 0; box-sizing: border-box; }
*::before, *::after { box-sizing: border-box; }
html { font-size: clamp(16px, 1.39vw, 21px); scroll-behavior: smooth; overscroll-behavior: none; }
body { font-size: var(--font-size-body); color: var(--main-color); font-family: var(--primary-font); font-weight: var(--font-regular); background: var(--background-color); line-height: var(--line-height-regular); -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; }
a { text-decoration: none; color: inherit; }
p a:hover { text-decoration: underline; }
ul { list-style-type: none; }
p { margin-bottom: 1.4em; }
p:last-of-type { margin-bottom: 0; }
br { margin:0; height: 0; }
strong, em { font-style: normal; font-weight: var(--font-regular); }
p strong { font-weight: var(--font-bold); }
p em { font-style: italic; }
fieldset legend { display: none; }
address { font-style: normal; }

:root {
    /* Fonts */
    --primary-font: "PT Sans", system-ui, sans-serif;
    --header-font: "Open Sans", system-ui, sans-serif;
    /* Font weights */
    --font-regular: 400;
    --font-medium: 500;
    --font-bold: 700;
    /* Font sizes */
    --font-size-h1: 2rem;
    --font-size-h2: 1.8rem;
    --font-size-h3: 1.6rem;
    --font-size-h4: 1.4rem;
    --font-size-h5: 1.2rem;
    --font-size-h6: 1rem;
    --font-size-body: 1rem;
    /* Colors */
    --main-color:var(--my-black);
    --background-color: var(--my-white);
    --my-black: #000000;
    --my-white: #ffffff;
    --my-gray: #333333;
    --my-light-gray: #131516;
    --my-off-white: #f2f3f5;
    --my-green: #71b200;
    --my-mint-green: #65bd7d;
    --my-blue: #198fd9;
    --my-light-blue: #00ade6;
    --my-purple: #756eb2;
    --my-light-purple: #d512ea;
    --my-red: #e83227;
    --my-orange: #fc7900;
    --my-yellow: #ffc300;
    --odf-pink: #EAA0A5;
    --odf-creme: #F9F4EE;
    /* Line heights */
    --line-height-small: 1.2;
    --line-height-regular: 1.4;
    --line-height-large: 1.6;
    /* Widths */
    --gutter-side: 2rem;
    --gutter-top: 1rem;
    --max-width: 55rem;
    --max-width-ultra-wide: 170rem;
    --max-width-narrow: 35rem;
    --width: calc(100% - calc(var(--gutter-side) * 2));
    --gap: 4rem;
    /* Margins */
    --margin: var(--margin-y) auto;
    --margin-y: 2rem;
    --padding-top: 5rem;
    --btn-padding: 0.5em 1.4em;
    --header-height: 63px;
    /* Transitions */
    --my-ease: cubic-bezier(0.4, 0, 0.2, 1);
    --my-ease-out: cubic-bezier(.17,.84,.44,1);
    /* Shadows */
    --drop-shadow: 0rem 0.1875rem 0.375rem 0 rgba(0,0,0,0.16);
    --blur-shadow: 0.625rem 0.625rem 1.875rem 0 rgba(0,0,0,0.16);
    /* Borders */
    --border-radius: 0.5rem;
    --half-border-radius: calc(var(--border-radius) / 2);
    --btn-border-radius: 1em;
    /* Logos */
    --logo-width: 5rem;
    /* Toolbar */
    --toolbar-height: calc(40px + 1rem);
}

/* --------------- HEADERS --------------- */
h1,.h1 ,h2,.h2 ,h3,.h3, h4,.h4, h5, .h5, h6, .h6 { font-weight: var(--font-medium); font-family: var(--header-font); line-height: var(--line-height-small); margin-bottom: 0.5em; }
h1, .h1 { font-size: var(--font-size-h1); }
h2, .h2 { font-size: var(--font-size-h3); }
h3, .h3 { font-size: var(--font-size-h5); }
h4, .h4 { font-size: var(--font-size-h4); }
h5, .h5 { font-size: var(--font-size-h5); }
h6, .h6 { font-size: var(--font-size-h6); }

/* --------------- GENERAL --------------- */
body { min-height: 100vh; min-height: 100dvh; display: grid; grid-template-rows: 1fr auto; }
/* main section:first-of-type { padding-top: var(--padding-top); margin-top: 0; } */
header, main, footer { max-width: var(--max-width-ultra-wide); width: 100%; margin: 0 auto; position: relative; }
nav#desktop, footer > nav, .container { max-width: var(--max-width); width: var(--width); margin: var(--margin); position: relative; }
section { margin: 0 auto; position: relative; background: var(--background-color); }
section.ultrawide { max-width: var(--max-width-ultra-wide); width: 100%; }
section.narrow { max-width: var(--max-width-narrow); }

/* IMAGES */
figure, picture { position: relative; }
picture.abs img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
picture { display: flex; }
img, video { width: 100%; height: auto; user-select: none; }

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

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

/* BUTTONS */
button { box-sizing: border-box; margin: 0; padding: 0; border: 0; touch-action: manipulation; text-align: center; }
button,label { cursor: pointer; user-select: none; }
.btn { background: var(--main-color); color: var(--background-color); padding: var(--btn-padding); border-radius: var(--btnborder-radius); text-align: center; }


/* --------------- HEADER --------------- */
header { position: sticky; z-index: 10; bottom: 0; order: 2; }
.burger, .mobile { display: none; }
#skiplink { position: fixed; left: 50%; top: -40rem; transform: translate(-50%, -50%); text-transform: none; font-size: 1rem; background: var(--background-color); opacity: 0; pointer-events: none; text-align: center; padding: 0.5rem; z-index: 5; }
#skiplink:focus { top: 4rem; opacity: 1; pointer-events: all; }

/* DESKTOP NAV */
nav#desktop { margin: 0 auto; max-width: 100%; width: 100%; }
nav#desktop > ul { display: flex; justify-content: space-between; align-items: stretch; }
nav#desktop > ul li { position: relative; display: flex; flex: 1; justify-content: center; align-items: center; text-align: center; font-size: .75rem; padding: .4rem; }

/* NAV COLORS */
:is(nav#desktop, nav#mobile) > ul > li.nav-green, #side-navigation .side-nav-btn.nav-green, #side-nav-panel.nav-green { background-color: var(--my-green); }
:is(nav#desktop, nav#mobile) > ul > li.nav-light-blue, #side-navigation .side-nav-btn.nav-light-blue, #side-nav-panel.nav-light-blue { background-color: var(--my-light-blue); }
:is(nav#desktop, nav#mobile) > ul > li.nav-purple, #side-navigation .side-nav-btn.nav-purple, #side-nav-panel.nav-purple { background-color: var(--my-purple); }
:is(nav#desktop, nav#mobile) > ul > li.nav-red, #side-navigation .side-nav-btn.nav-red, #side-nav-panel.nav-red { background-color: var(--my-red); }
:is(nav#desktop, nav#mobile) > ul > li.nav-orange, #side-navigation .side-nav-btn.nav-orange, #side-nav-panel.nav-orange { background-color: var(--my-orange); }
:is(nav#desktop, nav#mobile) > ul > li.nav-yellow, #side-navigation .side-nav-btn.nav-yellow, #side-nav-panel.nav-yellow { background-color: var(--my-yellow); }
:is(nav#desktop, nav#mobile) > ul > li.nav-light-purple, #side-navigation .side-nav-btn.nav-light-purple, #side-nav-panel.nav-light-purple { background-color: var(--my-light-purple); }
:is(nav#desktop, nav#mobile) > ul > li.nav-gray, #side-navigation .side-nav-btn.nav-gray, #side-nav-panel.nav-gray { background-color: var(--my-gray); color: var(--my-white); }
#side-navigation .side-nav-btn.nav-blue, #side-nav-panel.nav-blue { background-color: var(--my-blue); }

nav.toolbar { background-color: var(--my-blue); height: var(--header-height); display: flex; }
nav.toolbar > ul { display: flex; align-items: center; justify-content: center; gap: 1rem; width: var(--width); max-width: var(--max-width); margin: 0 auto; padding: .5rem 0; }
nav.toolbar > ul > li:nth-of-type(3) { margin-left: auto; }
nav.toolbar ul li svg { width: 40px; height: 40px; color: var(--my-white); }
#back-to-top-btn { opacity: 0; pointer-events: none; transition: opacity 300ms var(--my-ease); }
#back-to-top-btn.visible { opacity: 1; pointer-events: auto; }
#back-to-top-btn svg { transform: rotate(180deg); background-color: var(--my-gray); border-radius: var(--border-radius); }

/* MOBILE NAV */
nav#mobile { display: none; position: fixed; bottom: var(--header-height); max-height: calc(100vh - var(--header-height)); overflow: auto; left: 0; width: 100%; flex-direction: column; transform: translateY(100%); transition: transform 500ms ease; z-index: -1; }
nav#mobile > ul { display: flex; flex-direction: column; }
nav#mobile > ul > li { display: flex; width: 100%; padding: .1rem 0; text-align: center; }
nav#mobile > ul > li > a { display: block; width: 100%; padding: .6rem 1rem; font-size: 1.1rem; font-weight: var(--font-medium); }

/* Burger */
nav.toolbar .burger-li { display: none; }
button.burger { position: relative; width: 1.3rem; height: calc(0.8rem + 3px); transition: 500ms ease; z-index: 99; display: flex; align-items: center; background: none; border: none; padding: 0; cursor: pointer; }
button.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); }
button.burger > span { width: 1.6rem; height: 3px; position: absolute; background: var(--my-white); transition: 500ms ease; }
button.burger > span:nth-of-type(1) { transform: none; }
button.burger > span:nth-of-type(2) { transform: translateY(-.5rem); }
button.burger > span:nth-of-type(3) { transform: translateY(.5rem); }

/* Burger open */
header.menu-open nav.toolbar button.burger span:nth-of-type(1) { opacity: 0; }
header.menu-open nav.toolbar button.burger span:nth-of-type(2) { transform: rotate(45deg); }
header.menu-open nav.toolbar button.burger span:nth-of-type(3) { transform: rotate(-45deg); }
header.menu-open nav#mobile { transform: translateY(0); }

/* --------------- SIDE NAVIGATION --------------- */
#side-navigation { position: fixed; left: 0; top: 50%; transform: translateY(-50%); z-index: 20; display: flex; align-items: center; }
#side-navigation > input { display: none; }
#side-navigation .side-nav-btn { padding: 1rem 1rem 1rem 0.7rem; border-radius: 0 var(--half-border-radius) var(--half-border-radius) 0; display: flex; align-items: center; justify-content: center; transition: opacity 300ms var(--my-ease); }
#side-nav-toggle:checked ~ .side-nav-btn { opacity: 0; pointer-events: none; }
#side-nav-panel { position: fixed; top: 50%; left: 0; transform: translateX(-100%) translateY(-50%); width: 18rem; max-height: 70vh; overflow: hidden; transition: transform 300ms var(--my-ease); z-index: 21; display: flex; flex-direction: column; border-radius: 0 var(--border-radius) var(--border-radius) 0; }
#side-nav-toggle:checked ~ #side-nav-panel { transform: translateX(0) translateY(-50%); }
#side-nav-panel button.close { display: flex; justify-content: flex-end; padding: .6rem 1.5rem; font-size: 1.5rem; line-height: 1; cursor: pointer; flex-shrink: 0; position: absolute; top: 0; right: 0; background: none; border: none; color: inherit; }
#side-nav-panel > ul { overflow-y: auto; padding: 0 1.5rem 1.5rem; flex: 1; min-height: 0; }
#side-nav-panel > ul li a { display: block; padding: 0.75rem 0; border-bottom: 1px solid rgba(255,255,255,0.2); }
#side-nav-panel > ul li:last-child a { border-bottom: none; }
#side-nav-panel > ul li a:hover { opacity: 0.8; }
#side-navigation button.burger > span { background: var(--my-black); }
body.tijdlijn #side-navigation button.burger > span { background: var(--my-white); }


/* --------------- FOOTER --------------- */
footer { width: var(--width); max-width: var(--max-width); height: auto; padding: 1.2rem 0; }
footer > ul { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 1rem; }
footer > ul > li { text-align: center; font-size: 14px; }
footer > ul > li > a:hover { color: var(--my-light-blue); }
/* --------------- SECTIONS --------------- */

/* ========================================================== */
/* ========================== HERO ========================== */
/* ========================================================== */
section.hero { position: relative; width: 100%; height: 100vh; overflow: hidden; }
section.hero :is(picture,img) { width: 100%; height: 100%; object-fit: cover; display: block; }
section.hero div { position: absolute; inset: 0; z-index: 2; text-align: center; display: flex; align-items: center; width: 100%; justify-content: space-evenly; flex-direction: column; }
section.hero div h1 { width: var(--width); color: var(--my-white); text-transform: uppercase; font-weight: var(--font-bold); font-size:var(--font-size-h2); -webkit-text-stroke: 1px; }
section.hero div svg { width: 4rem; height: 4rem; color: var(--my-white); }
section.hero .hero-caption { position: absolute; bottom: 0.5rem; right: 1rem; z-index: 3; font-size: 0.65rem; color: var(--my-black); margin: 0; padding: 0.25rem 0.5rem; background: rgba(255,255,255,0.6); -webkit-backdrop-filter: blur(.25rem); backdrop-filter: blur(.25rem); border-radius: .1rem; }
.scroll-to-first-h2 { background-color: transparent; }


/* ========================================================== */
/* ========================== TEXT ========================== */
/* ========================================================== */
section.text h3 { font-size:var(--font-size-h5); font-weight: var(--font-medium); }
section.text p { font-size:var(--font-size-body); }
section.text a:hover { color: var(--my-blue); }
button.ster { background-color: transparent; color: var(--my-blue); font-size: var(--font-size-h4); }
section.text p:has(button.ster.show) button + em { display: block; }
button.ster:focus { background-color: var(--my-blue); color: var(--my-black); }
section.text p:has(button.ster) button + em { display: none; background: var(--my-off-white); padding: 1rem; margin: 1rem 0; }
section.text p:has(button.ster) button + em[aria-hidden=false] { display: block; }

/* =========================================================== */
/* ======================== PHOTOGRID ======================== */
/* =========================================================== */
section.photogrid .grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.5rem; }
section.photogrid .grid-item { display: flex; flex-direction: column; }
section.photogrid .grid-item picture { display: block; width: 100%; overflow: hidden; }
section.photogrid .grid-item img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: .5rem; }
section.photogrid .grid-item button { padding: 0; border: none; background: none; cursor: pointer; display: block; width: 100%; }
section.photogrid .grid-item figcaption { font-size: 0.75rem; color: var(--my-gray); opacity: 0.6; padding: 0.4rem 0.25rem 0; }
section.photogrid .grid[data-count="1"] { grid-template-columns: 1fr; }
section.photogrid .grid[data-count="3"] .grid-item:last-child { grid-column: span 1; }
section.photogrid .grid[data-count="5"] .grid-item:last-child { grid-column: span 1; }
.grid.has-aspect .grid-item picture { aspect-ratio: 4/3; }
section.photogrid .grid:not(.has-aspect) .grid-item img { height: auto; object-fit: unset; }

/* =========================================================== */
/* ===================== BRONVERMELDING ====================== */
/* =========================================================== */
section.bronvermelding { overflow-x: hidden; }
section.bronvermelding h3 { font-size:var(--font-size-h5); font-weight: var(--font-medium); }
section.bronvermelding ol { font-size:var(--font-size-body); padding-left: 3rem; display: flex; flex-direction: column; gap: .4rem; }
section.bronvermelding ol li { font-size: .9rem; overflow-wrap: anywhere; }

/* ========================================================== */
/* =========================== FAQ ========================== */
/* ========================================================== */
ul.faq { --faq-background-color: var(--my-white); --faq-main-color: var(--my-black); --faq-hover-color: var(var(--my-faded-blue)); }
ul.faq { list-style: none; padding: 0; width: 100%; }
ul.faq button { color: inherit; background: inherit; border: inherit; font-size: inherit; display: block; line-height: inherit; width: 100%; text-align: left; font-weight: var(--font-medium); }
ul.faq > li { background: var(--my-white); margin-bottom: .5rem; overflow: hidden; border-bottom: 1px solid var(--my-off-white); }
ul.faq > li h3 { margin-bottom: 0; }
ul.faq > li button { padding: .75rem 1rem .75rem 0; display: flex; flex-direction: row-reverse; align-items: flex-start; justify-content: flex-end; cursor: pointer; transition: color 333ms ease; background: var(--faq-background-color); color: var(--faq-main-color); }
ul.faq > li button span { width: 1.3rem; height: 1.3rem; margin-top: .05em; margin-right: 1rem; display: flex; align-items: center; justify-content: center; transition: background 333ms ease; background: var(--faq-main-color); color: var(--faq-background-color); flex-shrink: 0; }
ul.faq > li button span::before,ul.faq > li button span::after { content: ""; position: absolute; width: .6rem; height: 2px; border-radius: 1rem; background: currentColor; transform: rotate(var(--r, 0deg)); transition: transform 333ms ease, color 333ms ease; }
ul.faq > li button span::before { --r: -90deg; }
ul.faq > li button:hover { color: var(--my-blue); }
ul.faq > li button:hover span { background: var(--my-blue); color: var(--my-white); }

ul.faq > li > div { transition: padding 333ms ease, max-height 333ms ease; overflow: hidden; width: calc(100% - 3rem); padding-left: 1rem; color: var(--faq-main-color); }
ul.faq > li > div > div { transform: translateY(-.5rem); transition: transform 333ms ease; padding: 1rem .5rem 1.5rem; }
ul.faq > li > div > div > *:last-child { margin-bottom: 0; }
ul.faq > li > div[aria-hidden=true] { max-height: 0px; }

/* Opened */
ul.faq > li > div[aria-hidden=false] { max-height: var(--height, unset); }
ul.faq > li > div[aria-hidden=false]  > div { transform: none; }
ul.faq > li button[aria-expanded=true] { color: var(--my-blue); }
ul.faq > li button[aria-expanded=true] span { background: var(--my-blue); color: var(--my-white); }
ul.faq > li button[aria-expanded=true] span::before { --r: 0deg; }


@media only screen and (max-width: 768px) {
    ul.faq li h3 { font-size: var(--font-size-body); }
    ul.faq > li > div { width: calc(100% - 1rem); }
}

/* ========================================================== */
/* ======================= TIMELINE ========================= */
/* ========================================================== */
section.timeline { max-width: var(--max-width); width: var(--width); margin: var(--margin); }
section.timeline .grid { display: flex; flex-direction: column; }
section.timeline .grid article { margin-bottom: 0.5rem; }
section.timeline .grid article[data-no-gap="true"] { margin-bottom: 0; }
section.timeline .grid article { --item-color: var(--my-light-blue); display: grid; grid-template-columns: 1fr 1fr; position: relative; }
section.timeline .grid article::after { content: ""; position: absolute; top: 0; bottom: 0; left: calc(50% - 5px); width: 10px; background: var(--item-color); pointer-events: none; }
section.timeline .grid article .side { display: flex; align-items: flex-start; gap: 1rem; padding: 1rem; }
section.timeline .grid article[data-position="left"] .side { grid-column: 1; flex-direction: row; padding-right: 1rem; }
section.timeline .grid article[data-position="right"] .side { grid-column: 2; flex-direction: row-reverse; padding-left: 1rem; }
section.timeline .grid article img { width: 5rem; height: 5rem; border-radius: 50%; border: 10px solid var(--item-color); display: block; }
section.timeline .grid article .side .content { flex: 1; text-align: left; margin-top: 1.8rem; border-top: 2px dotted var(--item-color); padding-top: 0.3rem; }
section.timeline .grid article .side .content h2 { font-size: var(--font-size-h6); }
section.timeline .grid article .side .content p { font-size: .8rem; }
section.timeline .grid article[data-position="left"] .side .content { text-align: right; }

/* ========================================================== */
/* ======================= LIGHTBOX ========================= */
/* ========================================================== */
/* LIGHTBOX DISABLED
section.lightbox { --lightbox-background-color: var(--my-white); --lightbox-faint-color: var(--my-faint-grey, #f5f5f5); --lightbox-main-color: var(--my-blue); --lightbox-soft-color: var(--my-light-grey, #bbb); }
section.lightbox { z-index: 15; background: var(--lightbox-faint-color); position: fixed; top: 0; left: 0; width: 100%; height: 100%; margin: 0; display: flex; flex-direction: column; transition: background 500ms, opacity 250ms; }
section.lightbox[data-visible="false"] { display: none; }
section.lightbox[data-visible="opening"] { display: flex; opacity: 0; }
section.lightbox[data-visible="leaving"] { display: flex; opacity: 0; }
section.lightbox[data-visible="true"] { display: flex; opacity: 1; }

section.lightbox .imagebox { position: relative; width: calc(100% - 6rem); height: 100%; margin: 4rem auto 0; max-height: calc(100% - 8rem); max-width: var(--max-width-ultra-wide, 1600px); transition: margin-top 500ms; }
section.lightbox .imagebox > .fixed { position: fixed; margin: 0 auto; right: 0; left: 0; width: 100%; max-width: calc(var(--max-width-ultra-wide, 1600px) + 3rem); display: flex; pointer-events: none; justify-content: space-between; z-index: 99; padding: 0 1.5rem; }
section.lightbox[data-visible=true] .imagebox > .fixed > * { pointer-events: all; }
section.lightbox .imagebox > .fixed > strong { color: var(--lightbox-soft-color); font-size: .7rem; }
section.lightbox .imagebox > .fixed > strong span { color: var(--lightbox-main-color); font-weight: var(--font-medium, 500); font-size: .9rem; }
section.lightbox .imagebox > .fixed > .controls { display: flex; flex-direction: column; gap: 1rem; }
section.lightbox .imagebox > .fixed > .controls button { background: none; border: none; color: var(--lightbox-main-color); cursor: pointer; display: flex; align-items: center; justify-content: center; padding: .5rem; }
section.lightbox .imagebox > .fixed > .controls button.play svg + svg { display: none; }
section.lightbox .imagebox > .fixed > .controls button.play[data-playing=true] svg:first-of-type { display: none; }
section.lightbox .imagebox > .fixed > .controls button.play[data-playing=true] svg:last-of-type { display: block; }

section.lightbox .buttons { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: calc(100% + 8rem); z-index: 2; display: flex; justify-content: space-between; max-width: calc(var(--max-width, 1200px) + 7rem); pointer-events: none; }
section.lightbox .buttons button.arrow { width: 2.4rem; height: 2.4rem; border: none; background: none; pointer-events: all; cursor: pointer; position: relative; transition: transform 250ms ease; }
section.lightbox .buttons button.arrow::before, section.lightbox .buttons button.arrow::after { content: ""; position: absolute; left: 50%; top: 50%; width: 1rem; height: 3px; border-radius: 1rem; background: var(--lightbox-main-color); }
section.lightbox .buttons button.arrow::before { transform: translate(-90%, -50%) rotate(-45deg); transform-origin: left center; }
section.lightbox .buttons button.arrow::after { transform: translate(-90%, -50%) rotate(45deg); transform-origin: left center; }
section.lightbox .buttons button.arrow:hover { transform: translateX(-.2em); }
section.lightbox .buttons button.arrow + button.arrow { transform: scaleX(-1); }
section.lightbox .buttons button.arrow + button.arrow:hover { transform: scaleX(-1) translateX(-.2em); }

section.lightbox ul.big { list-style: none; padding: 0; margin: 0; position: relative; width: 100%; height: 100%; }
section.lightbox ul.big li { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
section.lightbox ul.big li picture { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
section.lightbox ul.big li picture img { object-fit: contain; width: 100%; height: 100%; color: transparent; font-size: 0; }
section.lightbox ul.big li:first-of-type { z-index: 2; }
section.lightbox ul.big li:not(:first-of-type, :last-of-type, :nth-of-type(2), :nth-of-type(3), :nth-last-of-type(2)) { display: none; }
section.lightbox ul.big li:is(:last-of-type, :nth-of-type(2), :nth-of-type(3), :nth-last-of-type(2)) { opacity: 0; }

section.lightbox ul.small { list-style: none; flex-shrink: 0; margin: 0 auto; width: 100%; max-width: var(--max-width-ultra-wide, 1600px); display: flex; gap: 1rem; overflow: auto; scroll-snap-type: x mandatory; padding: 1rem; scroll-behavior: smooth; }
section.lightbox ul.small li { opacity: 0.5; border: 2px solid transparent; display: flex; transition: opacity 350ms; }
section.lightbox ul.small li button { padding: 0; border: none; background: none; cursor: pointer; display: flex; }
section.lightbox ul.small li:is(:hover, [data-highlighted=true]) { opacity: 1; }
section.lightbox ul.small li img { position: relative; height: clamp(3.2rem, 15vw, 8rem); width: auto; transition: border-radius 350ms; }
section.lightbox ul.small li:first-of-type { margin-left: auto; }
section.lightbox ul.small li:last-of-type { margin-right: auto; }
section.lightbox:not(.gallery) ul.small li[data-highlighted=true] { border: 2px solid var(--lightbox-main-color); border-radius: 5px; }
section.lightbox:not(.gallery) ul.small li[data-highlighted=true] img { border-radius: 3px; }

@media only screen and (max-width: 768px) {
section.lightbox .imagebox { margin: 1.5rem auto 0; width: calc(100% - 1rem); }
section.lightbox .buttons { width: calc(100% + 2rem); }
}

@media (pointer: coarse) {
section.lightbox ul.big { overflow-x: scroll; scroll-snap-type: x mandatory; display: flex !important; -webkit-overflow-scrolling: touch; }
section.lightbox ul.big li, section.lightbox ul.big li:not(:first-of-type, :last-of-type, :nth-of-type(2), :nth-of-type(3), :nth-last-of-type(2)), section.lightbox ul.big li:is(:last-of-type, :nth-of-type(2), :nth-of-type(3), :nth-last-of-type(2)) { position: relative !important; flex-shrink: 0 !important; width: 100% !important; scroll-snap-align: start; opacity: 1 !important; display: flex !important; z-index: auto !important; }
section.lightbox ul.big li picture { position: relative !important; }
}
LIGHTBOX DISABLED */

/* ========================================================== */
/* ========================= LOGOS ========================== */
/* ========================================================== */
section.colofon h1 { width: 100%; display: grid; place-items: center; margin-bottom: 4rem; border-bottom: 4px solid var(--my-blue); text-transform: uppercase; font-size: var(--font-size-h5); padding: .8rem 0; }
section.colofon ul { display: flex; width: 100%; align-items: center; justify-content: space-between; }

/* --------------- PROSE CONTENT --------------- */
.prose > * + * { margin: 1.3em 0 0; }
.prose img,  .prose iframe { width: 100%; }
.prose ul, .prose ul ul ul { list-style: disc; }
.prose ul ul,.prose ul ul ul ul { list-style: circle; }
.prose :is(ol,ul) { padding-left: 1em; }
.prose :is(ol,ul) :is(ol,ul) { margin: .5em 0; }
.prose blockquote { position: relative; font-style: italic; font-size: 1.5rem; padding-left: .8em; border-left: .25rem solid var(--main-color); }
.prose > * strong { --font-weight: var(--font-bold); }
.prose > * em { font-style: italic; }
.prose a:not(.btn) { text-decoration: underline; }
.prose code { font-family: monospace; background: #ddd; padding: .2rem; }
.prose :is(h1,h2,h3,h4) + * { margin-top: .5em; }



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


/* --------------- COOKIE BANNER COLORS --------------- */
section.odf__cookies.odf__cookies { --odf_main_color: black; --odf_background_color: white; --odf_highlight_color: var(--my-blue); }


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


/* MAX */
@media only screen and (max-width: 768px) {
:root {
    --logo-width: 2.5rem;
    --gutter-top: 1rem;
    --gutter-side: 1rem;
}
    .mobile { display: block; }
    nav#desktop { display: none; }
    nav#mobile { display: flex; }
    nav.toolbar .burger-li { display: flex; align-items: center; }
    section.photogrid .grid { grid-template-columns: 1fr; }
    section.timeline .grid article { grid-template-columns: 1fr; }
    section.timeline .grid article::after { left: 5px; width: 6px; }
    section.timeline .grid article img { border: 6px solid var(--item-color); }
    section.timeline .grid article .side, section.timeline .grid article[data-position="left"] .side { grid-column: 1; display: grid; grid-template-columns: 1fr 5rem; gap: 1rem; flex-direction: unset; padding: 1rem 1rem 1rem 1.5rem; }
    section.timeline .grid article .side .image { grid-column: 2; grid-row: 1; }
    section.timeline .grid article .side .content, section.timeline .grid article[data-position="left"] .side .content { grid-column: 1; grid-row: 1; text-align: left; }
    section.timeline .grid article .side .content { padding-left: .5rem; }
    section.timeline .grid article[data-position="right"] .side { grid-column: 1; }
}

@media only screen and (max-width: 450px) {
    section.hero { position: relative; width: 100%; height: 550px; overflow: hidden; }
}

@media only screen and (max-width: 350px) {
    html { font-size: 4.575vw; }
}

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

/* --------------- FULLWIDTH MEDIA / VIDEO FLOATER --------------- */
    section.fullwidth-media { padding: 0; }
    section.fullwidth-media .video.media { position: relative; width: 100%; overflow: hidden; }
    section.fullwidth-media .video.media video { width: 100%; height: 100%; display: block; object-fit: cover; }

    .media button.mute-btn { position: absolute; bottom: 1rem; right: 1rem; display: inline-flex; align-items: center; justify-content: center; padding: 0.5em; z-index: 2; }
    .media button.mute-btn svg { height: 1em; width: auto; display: block; }
    .media button.mute-btn::before, .media button.mute-btn::after { display: none; }
    .media video[data-muted="true"] ~ button.mute-btn .mute-on { display: none; }
    .media video[data-muted="false"] ~ button.mute-btn .mute-off { display: none; }

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


/* --------------- NOOT --------------- */
    button.noot-trigger { cursor: pointer; background: none; border: none; color: var(--my-blue); font-size: 1.6em; line-height: inherit; padding: 0 0.05em; }
    button.noot-trigger:hover { opacity: 0.7; }
    p.noot-before { margin-bottom: 0; }
    p.noot-after { margin-top: 0; }
    .noot-panel { display: none; background: var(--my-off-white); font-style: italic; }
    .noot-panel.open { display: block; padding: 1.5em; margin: 1em 0; }