* {padding: 0; margin: 0;  border: 0; box-sizing: border-box;}
*::before, *::after { box-sizing: border-box; }
html {font-size: clamp(16px, 1.5vw, 22px); 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);  -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased }
body::before { position: fixed; top: 0; left: 0; width: 100%; height: 100%;  background: url('/img/rough-cloth.png') center center /  17.5rem 17.5rem; content: ""; opacity: .6;  pointer-events: none;}
a {text-decoration: none; color: inherit; }
p a:hover {text-decoration: underline;}
ul {list-style-type: none;}
p {margin-bottom: 1.4em;}
br {margin:0; height: 0;}
strong, em { font-style: normal; font-weight: var(--font-regular); }
fieldset legend { display: none;}
address { font-style: normal;}
i { font-style: normal;}

:root {
    /* Fonts */
    --primaryFont: "Poppins", system-ui;
    --headerFont: "PlanjerRegular", system-ui;

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

    /* 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-h7: 1rem; 
    --font-size-body: .8rem; 


    /* Colors */  
    --mainColor: var(--myDarkBlue);
    --backgroundColor: var(--myBeige);

    --myDarkBlue: #18324E;
    --myBeige: #FFF1CC;
    --myOrange: #EF7D34;
    --myOrange10: rgba(239, 125, 52, .1);
    --myBlue: #2B6C8B;
    --myYellow: #F7C622; 
    --myYellow05: rgba(247, 198, 34, .05); 
    --myWhite: #FFF; 

    --bg-image: url('/img/bg.jpg') center center / cover;

    --odfPink: #EAA0A5;
    --odfCreme: #F9F4EE;

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

    /* Widths */
    --gutterSide: 2rem;
    --gutterTop: 1rem;
    --maxWidth: 85rem;
    --maxWidthWide: 120rem;
    --maxWidthUltraWide: 150rem;
    --maxWidthNarrow: 55rem;
    --maxWidthMild: 70rem;
    --width: calc(100% - calc(var(--gutterSide) * 2));
    --gap: 4rem; 

    /* Margins */
    --margin: var(--margin-y) auto;
    --margin-y: 4rem; 
    --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: 2rem; 
    --btnPadding: 0.5em 1.4em .5em;
    --btnPaddingTitle: 0.5em 1.4em .35em;

    /* 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: 0.5rem; 
    --halfBorderRadius: calc(var(--borderRadius) / 2);
    --btnBorderRadius: 1.3em; 

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

/* --------------- HEADERS --------------- */
h1,.h1 ,h2,.h2 ,h3,.h3, h4,.h4, h5, .h5, h6, .h6, .h7  {font-weight: var(--font-medium); font-family: var(--headerFont);  line-height: var(--line-height-regular); margin-bottom: 0.5em; }
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); } 
h5, .h5 {font-size: var(--font-size-h5); } 
h6, .h6 {font-size: var(--font-size-h6); } 
.h7 {font-size: var(--font-size-h7); } 

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

/* 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 { width: 100%; height: auto; }

/* 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 { background: var(--myYellow); color: var(--backgroundColor); padding: var(--btnPadding); border-radius: var(--btnBorderRadius); text-align: center; overflow: hidden; isolation: isolate; position: relative;   transition: border-radius 333ms, background 333ms, color 333ms;   font-weight: var(--font-bold); text-transform: uppercase; color: var(--myWhite); user-select: none; display: inline-block; }
.target:hover .btn::before,
.btn:hover::before { transform: scale(1.1);}
.target:hover .btn,
.btn:hover { border-radius: 1em; background: var(--myDarkBlue);}


.btn.orange { background: var(--myOrange);}
:is(.target:hover .btn.orange, .btn.orange:hover) { background: var(--myDarkBlue);}
.btn.blue { background: var(--myBlue);}
:is(.target:hover .btn.blue, .btn.blue:hover) { background: var(--myDarkBlue);}
.btn.white { background: var(--myWhite); color: var(--myOrange);}
:is(.target:hover .btn.white, .btn.white:hover) { color: var(--myYellow); background: var(--myWhite);}

.btn.tickets::before { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none;  z-index: -1; background: var(--bg-image); content: "";  transition: transform 333ms;   }

/* --------------- HEADER --------------- */
header { position: fixed; z-index: 10; --link-padding: .6em; transition: background 333ms, box-shadow 333ms;   border-radius: 0 0 var(--borderRadius) var(--borderRadius);}
header img, header svg { width: 100%;  color: var(--myBeige);}
header::before {  background: url('/img/rough-cloth.png') center center /  17.5rem 17.5rem; content: ""; opacity: 0; position: absolute; top: 0; left: 0; width: 100%; height: 100%; transition: opacity 333ms;}
:is(body header[data-scrolled=true], body:not(.home) header) { background: var(--myDarkBlue);  --logoWidth: 9rem; }
:is(body header[data-scrolled=true], body:not(.home) header) nav#desktop {  padding: .6rem 0; }
:is(body header[data-scrolled=true], body:not(.home) header)::before { opacity: .6;}

/* DESKTOP NAV */
nav#desktop { margin: 0 auto; padding: 0.85rem 0; color: var(--myDarkBlue);  transition: padding 333ms;}
nav#desktop > ul { display: flex; justify-content: flex-end; align-items: center; font-family: var(--headerFont); }
nav#desktop > ul li {position: relative; display: flex; }
nav#desktop > ul li a.btn { padding: var(--btnPaddingTitle);}
nav#desktop > ul > li:first-of-type {margin-right: auto; width: var(--logoWidth); transition: width 333ms; }
nav#desktop > ul > li:first-of-type a { display: flex; }
nav#desktop > ul > li:not(:first-of-type, .switcher,.menu) { margin-right: .4em; color: var(--myDarkBlue); font-weight: var(--font-medium); transition: color 333ms, transform 333ms; }
nav#desktop > ul > li:not(:first-of-type, .switcher,.menu, .lang) a { transition: color 333ms;}
nav#desktop > ul > li:not(:first-of-type, .switcher,.menu, .lang):hover a:not(.btn) { color: var(--myOrange);}

header[data-scrolled=true] nav#desktop > ul > li:not(:first-of-type, .switcher,.menu),
body.light-header nav#desktop > ul > li:not(:first-of-type, .switcher,.menu) { color: var(--myWhite); }

nav#desktop ul.sub { font-family: var(--primaryFont); position: absolute; bottom: 0rem; right: 0; transform: translateY(100%); opacity: 0; transition: 333ms;  pointer-events: none; color: var(--myDarkBlue); border-radius: var(--borderRadius); display: flex; flex-direction: column; align-items: flex-end; background: var(--myWhite); font-weight: var(--font-medium);  box-shadow: var(--dropShadow); width: calc(100vw - var(--gutterSide) * 2); max-width: 19em; }
nav#desktop ul.sub::before { content: ""; height: .6em; width: .6em; top: 0; transform: translateY(-50%) rotate(45deg); background: var(--myWhite); right: 2.65em; position: absolute;  }
nav#desktop ul.sub li { width: 100%;  }
nav#desktop ul.sub li:not(:last-of-type, .socials ul.socials li) a { border-bottom: 1px solid var(--myOrange10); } 
nav#desktop ul.sub li a { padding:  0.4rem 1rem; ;  width: 100%;  font-weight: var(--font-bold);}
nav#desktop ul.sub li.active a::before { content: ""; width: 0.65em; height: 0.65em; background: var(--bg-image); display: inline-block; margin-right: .5rem; border-radius: 50%;}
nav#desktop ul.sub li:first-of-type a { padding-top: .6rem; border-radius: var(--btnBorderRadius) var(--btnBorderRadius) 0 0;}
nav#desktop ul.sub li:nth-last-of-type(2) a { padding-bottom:  .6rem;}

nav#desktop ul.sub li:hover a {  background: var(--myOrange10);}

header nav#desktop > ul li.hide_desktop { display: none;  }

/* LANG SWITCHER */
nav#desktop input#lang { display: none; }
nav#desktop input#lang ~ ul.sub { max-width: 10em;}

/* Burger */
input.burger { display: none; }
label.burger { font-weight: var(--font-regular);  padding: var(--btnPaddingTitle);}


/* Burger checked */
input.burger:checked ~ header nav#desktop ul.sub.menu,
input#lang:checked ~ ul.sub { opacity: 1; pointer-events: all; transform: translateY(calc(100% + .5rem)); }



/* --------------- FOOTER --------------- */
footer { display: flex; }
footer::before { position: absolute; top: 0; left: 0; width: 100%; height: 100%; content: ""; background: var(--myOrange); mask: url('/img/footer-veeg.svg') 50% 0% / cover; }
footer.yellow::before {  background: var(--myYellow);}
footer > nav { max-width: var(--maxWidthNarrow); padding-top: 10rem; margin-bottom: 0;}
footer > nav > ul { display: grid; grid-template-columns: repeat(4, auto); grid-gap: 3rem 1rem;  }
footer > nav > ul li ul li { margin-bottom: .5rem; }
footer > nav > ul li ul li a:hover { text-decoration: underline;}
footer > nav > p  { font-size: 12px; margin-top: 4rem; text-align: center;  }
footer > nav > p a { padding: .5em .75em; border-radius: 100vmin; }
footer > nav > p a:hover  { color: var(--odfCreme); background: var(--odfPink);  text-decoration: none;}
footer h3.partners { margin-bottom: 0; margin-top: 1em;}
footer ul.partners {  display: flex; flex-wrap: wrap;  grid-gap: 1rem;}
footer ul.partners li { width: clamp(4rem, 15%, 5.33rem); filter: grayscale(1);}

ul.socials { display: flex; align-items: center; gap: 0.5rem; --icon-size: 1.2rem;  }
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 svg { width: var(--icon-size); height: var(--icon-size); }


/* --------------- SECTIONS --------------- */


/* =========================================================== */
/* ========================= LANDING ========================= */
/* =========================================================== */
section.landing { padding-top: 0;}
section.landing .container { margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; grid-gap: var(--gap); }
section.landing .container > picture { position: relative; }
section.landing article { display: flex; flex-direction: column; align-items: center; justify-content: center;  padding: var(--gutterSide) var(--gutterSide) 3rem;}
section.landing article > img { max-width: 5rem;}
section.landing article .h3 { max-width: 15em; text-align: center; margin: .5em auto 0.2em;  }
section.landing article .md { text-align: center; max-width: 25em; margin: 1rem auto; }
section.landing article .md  p:last-of-type { margin-bottom: 0;}
section.landing article > strong { color: var(--myOrange);  font-family: var(--headerFont); text-align: center;}
section.landing .countdown { background: var(--myWhite); padding: .25em 1.2em;  border-radius: 100vmin; font-weight: var(--font-medium); }  
section.landing .countdown span { color: var(--myOrange); font-weight: var(--font-bold); font-size: 1.1em;}
section.landing .btn { font-size: var(--font-size-h6); margin-bottom: .5em; }

@media only screen and (min-width: 2000px) {
    section.landing article { padding-right: 10vw;}
}

@media only screen and (max-width: 1024px) {
    section.landing .container { grid-template-columns: 1fr;  grid-gap: 1rem; margin-bottom: var(--margin-y);}
    section.landing .container picture  { grid-template-columns: 1fr; mask: url('/img/header-veeg.svg') center -4rem / cover no-repeat; margin-bottom: -3rem;  margin-left: -2px;}
    section.landing article > img { max-width: 4rem;}
    section.landing .h3 { font-size: var(--font-size-h5);}
}



/* =========================================================== */
/* ========================== INTRO ========================== */
/* =========================================================== */
section.intro .h1 { text-align: center; }
section.intro .container > .md { max-width: 30rem; margin: 0 auto; text-align: center;  }


/* =========================================================== */
/* ========================== USPS =========================== */
/* =========================================================== */
section.usps { margin: -.1rem 0; background: var(--myDarkBlue);  background: var(--myDarkBlue);  }
section.usps .container { margin: 1.5rem auto; }
section.usps::before { background: url('/img/rough-cloth.png') center center /  17.5rem 17.5rem; position: absolute; top: 0; left: 0; width: 100%; height: 100%; content: "";  opacity: .6; }
section.usps ul { display: grid; grid-template-columns: 1fr 1fr 1fr; justify-items: center;  max-width: var(--maxWidth); margin: 0 auto;  }
section.usps ul li { display: flex; color:  var(--myDarkBlue); align-items: center;  color: var(--myWhite); white-space: nowrap; gap: .5rem;}
section.usps ul li.cookie svg { padding: .5em;}
section.usps ul li svg { color: var(--myYellow); flex-shrink: 0; max-width: 2.5em;  height: auto;  width: 100%; }


@media only screen and (max-width: 768px) {
    section.usps ul { grid-template-columns: 1fr; justify-items: stretch; }
    section.usps ul li { white-space: unset;}
}


/* =========================================================== */
/* ========================= REVIEWS ========================= */
/* =========================================================== */
section.reviews { --button-size: 2.2em;  }
section.reviews .h2 { margin-bottom: 0; max-width: 11em; }
section.reviews .container { display: grid; grid-template-columns: 1fr auto; align-items: flex-end;  grid-gap: 0 2rem;}
section.reviews .swipeslider { margin-top: 1rem; }
section.reviews .container { grid-template-columns: 1fr auto; }

section.reviews .buttons { display: flex; flex-wrap: wrap; gap: 1em;}
section.reviews .buttons button {  background: var(--myWhite);   border-radius: 50%; width: var(--button-size); height: var(--button-size);  border-radius: 50%;  transition: 333ms; pointer-events: all; position: relative;  display: flex; align-items: center; justify-content: center;  --ownColor: var(--myDarkBlue); }
section.reviews .buttons button:hover { background: var(--myBlue); border: 1px solid transparent; --ownColor: var(--myWhite) }
section.reviews .buttons button:nth-of-type(1) { transform: scaleX(-1); }
section.reviews .buttons button::before,section.reviews .buttons button::after { content: ""; width: calc(var(--button-size) /  4); height: .1em; background: var(--ownColor); position: absolute; border-radius: 1rem; transform: translateX(calc(var(--button-size) / 10)) rotate(var(--r, 45deg)) translateX(-41%);  transition: background 333ms;}
section.reviews .buttons button::before { --r: -45deg; }

li.reviewcard { padding: 1.2rem;   border-radius: var(--borderRadius); display: flex; flex-direction: column; align-items: flex-start;   position: relative;overflow: hidden; font-size: .9em;  background: var(--myWhite); }   
li.reviewcard > * { position: relative; z-index: 3; }
li.reviewcard > strong.h4 { display: flex; align-items: center; gap: .8em; margin-bottom: .7em;  font-size: .8em;}
li.reviewcard .letter {  width: 3.5em; height: 3.5em; background: var(--myBlue); border-radius: 50%; overflow: hidden; margin-bottom: .5em; margin-right: .5em;}
li.reviewcard span.h4 { font-weight: var(--font-medium); margin-bottom: 0; display: inline-block;}
li.reviewcard .stars { display: flex; align-items: center;  gap: .3em; margin-bottom: 1rem;}
li.reviewcard .stars svg { width: 1.5rem; height: auto;  color: var(--myYellow);}
li.reviewcard .md { grid-column: -1/1;  font-size: 1.1em;}
li.reviewcard .md p:last-of-type { margin-bottom: 0;}
li.reviewcard::before { width: 200%; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }


/* =========================================================== */
/* ===================== TEXT AND IMAGE ====================== */
/* =========================================================== */
section.text-image .container { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 1rem var(--gap);}
section.text-image article { line-height: var(--line-height-large);  max-width: 27rem;  }
section.text-image .container.brush .media :is(img,video) { mask: url("/img/veeg.svg") center center / contain no-repeat;}
section.text-image .media :is(img,video) { border-radius: var(--borderRadius); height: auto; }
section.text-image .container.media-only { grid-template-columns: 1fr;  max-width: 45rem;}

/* POSITIONS */
section.text-image.right .media { order: 1;}
section.text-image.top .container { align-items: flex-start;  }
section.text-image.middle .container { align-items: center;  }
section.text-image.bottom .container { align-items: flex-end;  }

section:is(.intro,.text-image) + section.text-image .container { margin-top: 0;}

@media only screen and (max-width: 768px) {
    section.text-image .container { grid-template-columns: 1fr; }
    section.text-image .media { order: -1;}
    section.text-image:is(.left,.right) .media { order: -1;}
    section.text-image + section.text-image { margin-top: var(--margin-y);}
}


/* =========================================================== */
/* ===================== TITLE AND TEXT ====================== */
/* =========================================================== */
section.text .container { display: flex; flex-direction: column;  }
section.text article { max-width: 30rem;}

/* POSITIONS */
section.text.center .container {  align-items: center; }
section.text.right .container {  align-items: flex-end; }
section.text article.center { text-align: center;}
section.text article.right { text-align: right;}

/* =========================================================== */
/* ======================= CATEGORIES ======================== */
/* =========================================================== */
section.categories nav > ul { display: grid; grid-template-columns: 1fr 1fr 1fr; border-radius: var(--borderRadius); overflow: hidden;}

li.categorycard h2 { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);   color: var(--myBeige);   z-index: 3; transition: opacity 333ms, transform 333ms;}
li.categorycard figure::after { position: absolute; top: 0; left: 0; width: 100%; height: 100%; content: ""; background: rgba(0,0,0,0.2); display: block;  z-index: 2;  transition: opacity 333ms;}
li.categorycard .md { position: absolute; top: 0; left: 0; width: 100%; height: 100%;  font-size: var(--font-size-h4); padding: 1em; display: flex; justify-content: center; align-items: center; text-align: center; color: var(--myBeige);  opacity: 0; transition: opacity 333ms; background: var(--myOrange); flex-direction: column; gap: 1rem;  z-index: 3;}
li.categorycard .md::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none;   background: var(--bg-image); content: "";  transition: transform 333ms;   z-index: -1;}
li.categorycard .md p:last-of-type { margin: 0; }
li.categorycard .md  * { transform: translateY(2rem); transition: transform 333ms, background 333ms, color 333ms, border-radius 333ms; }
li.categorycard .md .btn { font-size: var(--font-size-body);}

li.categorycard:hover .md { opacity: 1; }
li.categorycard:hover h2,
li.categorycard:hover figure::after { opacity: 0;}
li.categorycard:hover h2 { transform: translate(-50%, calc(-50% - 2rem)); }
li.categorycard:hover .md  * { transform: none; } 


@media only screen and (max-width: 768px) {
    section.categories nav > ul { grid-template-columns: 1fr; max-width: 30rem; margin: 0 auto; }
}



/* =========================================================== */
/* ======================= LATEST NEWS ======================= */
/* =========================================================== */
section.latest-news h2 { text-align: center; }
section.latest-news nav > ul { grid-template-columns: repeat(4, 1fr); display: grid; grid-gap: 1rem; border-radius: var(--borderRadius); overflow: hidden;}
section.latest-news nav > .btn { max-width: max-content; margin: 2rem auto 0; display: block; }

li.card { background: var(--myWhite);  transition: background 333ms;}
li.card a { display: flex; flex-direction: column; height: 100%; }
li.card a > div { padding: 1rem;  grid-column: -1/1; transition: background 333ms, transform 333ms;  background: var(--myWhite); height: 100%;  display: flex; flex-direction: column; }
li.card .bottom { grid-template-columns: auto auto; display: grid;  align-items: center;  margin-top: auto; transition: transform 333ms, color 333ms;}
li.card .bottom time { padding: .2em .5em; background: var(--myBlue); margin-right: auto; color: var(--myWhite);  border-radius: .2em;}
li.card i.btn { height: 2em; width: 2em;  display: flex; margin-left: auto; align-items: center; justify-content: center; padding: 0; }

li.card a:hover i.btn { background: var(--myDarkBlue); }
li.card:hover { background: var(--myYellow);}
li.card:not(.bare):hover a > div { transform: translateY(-2rem); background: var(--myYellow);}
li.card:not(.bare):hover .bottom { transform: translateY(1rem); }

li.card span.btn { display: block; max-width: max-content; margin-left: auto; }
li.card a:hover span.btn { border-radius: 1em; background: var(--myBlue); }
li.card a:hover span.btn::before { transform: scale(1.1);}

@media only screen and (max-width: 1024px) {
    section.latest-news nav > ul { grid-template-columns: repeat(2, 1fr); max-width: 40rem; margin: 0 auto; }
}

@media only screen and (max-width: 768px) {
    section.latest-news .container { width: 100%; }
    section.latest-news nav > ul { display: flex; width: 100%;  overflow: auto; max-width: 100vw;  scroll-snap-type: x mandatory;}
    section.latest-news nav > ul::after { content: ""; width: 1px; height: 1px; opacity: 0; pointer-events: none; flex-shrink: 0; }
    section.latest-news nav > ul li { min-width: 18rem; scroll-snap-align: center;}
    section.latest-news nav > ul li:first-of-type { margin-left: 1rem; border-radius: var(--borderRadius) 0 0 var(--borderRadius); overflow: hidden; }
    section.latest-news nav > ul li:last-of-type { border-radius: 0 var(--borderRadius) var(--borderRadius) 0; overflow: hidden;}
}



/* =========================================================== */
/* ========================= TICKETS ========================= */
/* =========================================================== */
section.tickets { --dateWidth: clamp(22rem, 45vw, 30rem); --day-size: calc(var(--dateWidth) / 7 - .5rem); --gap: 1rem; }
section.tickets .md { max-width: 30rem;}
section.tickets .container { display: flex; flex-direction: column; align-items: center;  }
section.tickets .box {  max-width: calc(var(--dateWidth) * 2 + var(--gap));   display: flex; justify-content: center; margin-top: 1em; }
section.tickets .dateslider { position: relative;  max-width: calc(var(--dateWidth) * 2 + var(--gap));   }
section.tickets .buttons { position: absolute; top: calc(var(--font-size-h5) * 2); transform: translateY(-50%); left: 0; right: 0; margin: 0 auto; width: calc(100% - 3.5rem);    display: flex; justify-content: space-between; pointer-events: none;}
section.tickets .buttons button { width: 2em; height: 2em; transition: opacity 333ms; pointer-events: all;  background: var(--myBlue); border-radius: 50%; color: var(--myWhite); display: grid; place-items: center;}
section.tickets .buttons button svg { width: 25%; transform: translateX(.1em);}
section.tickets .buttons button:first-of-type svg { transform: translateX(-.1em);}

section.tickets .datebox[data-pos=first] + .buttons button:first-of-type { opacity: 0; pointer-events: none;}
section.tickets .datebox[data-pos=last] + .buttons button:last-of-type { opacity: 0; pointer-events: none;}

section.tickets .datebox { display: flex; gap: var(--gap); overflow: hidden;  border-radius: var(--borderRadius); overflow: hidden;}
section.tickets .month { max-width: var(--dateWidth); flex-shrink: 0; width: 100%; transform: translateX(calc((100% + var(--gap)) * var(--i, 0))); transition: transform 333ms;  padding: 1rem; background: var(--myWhite); border-radius: var(--borderRadius);}  
section.tickets .month > strong { font-weight: var(--font-medium);  text-align: center;  display: block;  margin-bottom: 1em; text-transform: capitalize; font-family: var(--headerFont);  font-size: var(--font-size-h5); color: var(--myWhite);background: var(--myDarkBlue);  padding: var(--btnPaddingTitle); border-radius: var(--halfBorderRadius); margin-bottom: .5rem;}   
section.tickets .month > ul:first-of-type { font-weight: var(--font-medium);  margin-bottom: .5rem;}
section.tickets .month > ul:first-of-type li { height: auto;}
section.tickets .month > ul { display: grid; grid-template-columns: repeat(7, var(--day-size)); grid-gap: .25rem 0.25rem; }
section.tickets .month > ul li { width: var(--day-size);  height: var(--day-size); display: grid; place-items: center; position: relative; font-size: .7rem; }

section.tickets .month > ul:last-of-type li { background: var(--myOrange10); isolation: isolate; font-weight: var(--font-bold);  } 
section.tickets .month > ul:last-of-type li > a { position: absolute; top: 0; left: 0; width: 100%; height: 100%;  display: grid; place-items: center;}
section.tickets .month > ul:last-of-type li::before { background: var(--bg-image); position: absolute; top: 0; left: 0; width: 100%; height: 100%; content: ""; opacity: 0;  z-index: -1;  transition: opacity 333ms;}
section.tickets .month > ul:last-of-type li:not(:empty, .nope):hover::before { opacity: 1;}
section.tickets .month > ul:last-of-type li:not(:empty, .nope):hover { color: var(--myWhite);}

section.tickets .month > ul:last-of-type li:empty { background: rgba(0,0,0,0.02);}
section.tickets .month > ul:last-of-type li.nope { text-decoration:line-through; opacity: .4; background: rgba(0,0,0,0.1);}
section.tickets .month > ul:last-of-type li.today { background: var(--myOrange);  text-decoration: none; opacity: 1; color: var(--myWhite);}


@media only screen and (max-width: 768px) {
    section.tickets { --dateWidth: clamp(20rem, calc(100vw - 4rem), 30rem); --gap: .5rem; }
    body:not(.touch-device) section.tickets  { --dateWidth: clamp(20rem, calc(100vw - 2rem), 30rem); --gap: .5rem; }
    section.tickets .dateslider { max-width: var(--dateWidth); }
    section.tickets .buttons {transform: translateY(-60%); }
    section.tickets .buttons button { width: 1.35em; height: 1.35em; }

    
    
    section.tickets .dateslider,section.tickets .box { max-width: var(--dateWidth);  width: 100%; }
    body.touch-device section.tickets .buttons { display: none; }
    body.touch-device section.tickets .datebox { overflow: auto; scroll-snap-type: x mandatory;  scroll-behavior: smooth;}
    body.touch-device section.tickets .datebox .month { scroll-snap-align: start;}

    
    body.touch-device section.tickets .dateslider { max-width: 100vw; }
    body.touch-device .datebox { width: calc(100% + var(--gutterSide) * 2); position: relative; margin-left: calc(var(--gutterSide) * -1);}
    body.touch-device .datebox > .month:first-of-type { margin-left: var(--gutterSide);}
    body.touch-device .datebox::after { content: ""; width: 1px; height: 1px; opacity: 0; pointer-events: none; flex-shrink: 0;}
    body.touch-device section.tickets .datebox .month { scroll-snap-align: center; transform: none !important;}
}

/* =========================================================== */
/* ==================== ALLE ACTIVITEITEN ==================== */
/* =========================================================== */
section.activiteiten .h1 { text-align: center; }
section.activiteiten .container > .md { max-width: 30rem; margin: 0 auto; text-align: center;}
section.activiteiten .container > ul { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-gap: 1rem; }

li.activitycard { border-radius: var(--borderRadius); overflow: hidden; position: relative; }
li.activitycard i.btn { margin-left: auto; grid-column: -1/1;  }
li.activitycard a:hover i.btn { background: var(--myDarkBlue); }
li.activitycard:not(.bare) div *  { transition: color 333ms, transform 333ms, background 333ms;}
li.activitycard:not(.bare):hover { background: var(--myBlue);}
li.activitycard:not(.bare):hover a > div { transform: translateY(-1rem); background: var(--myBlue); color: var(--myWhite);}
li.activitycard:not(.bare):hover a > div .btn { background: var(--myYellow); color: var(--myDarkBlue);}

@media only screen and (max-width: 1024px) {
    section.activiteiten .container > ul { grid-template-columns: 1fr 1fr; }
}

@media only screen and (max-width: 768px) {
    section.activiteiten .container > ul { grid-template-columns: 1fr; max-width: 30rem; margin: 0 auto;  }
}

/* =========================================================== */
/* ======================= ALLE NIEUWS ======================= */
/* =========================================================== */
section.news .container > ul { grid-template-columns: repeat(4,1fr); border-radius: var(--borderRadius); overflow: hidden;}

@media only screen and (max-width: 1024px) {
    section.news .container > ul { grid-template-columns: repeat(2, 1fr); }
}
@media only screen and (max-width: 500px) {
    section.news .container > ul { grid-template-columns: repeat(1, 1fr); }
}


/* =========================================================== */
/* ======================== STANDARD ========================= */
/* =========================================================== */
section.standard article.container { max-width: 40rem; }


/* =========================================================== */
/* ========================= CONTACT ========================= */
/* =========================================================== */
section.contact .container { display: grid;  grid-template-columns: 1fr 1fr; max-width: var(--maxWidthNarrow); gap: 1rem var(--gap);}

@media only screen and (max-width: 768px) {
    section.contact .container { grid-template-columns: 1fr; max-width: 25rem;}
    section.contact .container fieldset { grid-template-columns: 1fr;  }
}

/* =========================================================== */
/* ========================== CARDS ========================== */
/* =========================================================== */
li.card.bare > div { padding: 1rem 1rem .5rem; }
li.card.bare:hover { background: var(--myWhite);}


/* =========================================================== */
/* ====================== IMAGE SLIDER ======================= */
/* =========================================================== */
section.image-slider { display: flex;  gap: 1rem; overflow: hidden; flex-direction: row; margin: var(--margin);}  
section.image-slider > ul { display: flex; overflow: hidden; gap: 1rem;flex-shrink: 0; transform: translateX(0%); animation: slide 120s linear infinite }
section.image-slider > ul li img { position: relative; max-width: clamp(10rem, 33vw, 18rem); border-radius: var(--halfBorderRadius); }

@media only screen and (max-width: 768px) {
    section.image-slider > ul { animation: slide 30s linear infinite }

}

/* =========================================================== */
/* ==================== TOEGANKELIJKHEID ===================== */
/* =========================================================== */
li.accesscard { background: var(--myWhite); padding: 1rem;  border-radius: var(--borderRadius);}
li.accesscard .btn { margin-left: auto; display: block; max-width: max-content;}

/* =========================================================== */
/* =========================== FAQ =========================== */
/* =========================================================== */
section.faq .container { display: grid; grid-template-columns: auto 2.2fr; align-items: flex-start;  grid-gap: var(--gap);  margin-top: 0rem;}
section.faq .block h2 { color: var(--myOrange); scroll-margin-top: 5rem; margin-bottom: .75rem;  }
section.faq article label h3 { margin: 0; user-select: none; width: calc(100% - 1.11rem);  font-family: var(--primaryFont);  font-weight: var(--font-bold);}

section.faq fieldset { color: var(--myWhite); font-size: 1rem;  position: sticky; top: 7rem; background: var(--myOrange); padding: 1rem;  border-radius: var(--borderRadius); overflow: hidden;}
section.faq fieldset::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: var(--bg-image); z-index: -1; }
section.faq fieldset h2 { color: var(--myWhite);}
section.faq fieldset ul li {  margin-bottom: .05rem; display: flex;  }
section.faq fieldset ul li label {  padding: .2rem 0; position: relative; cursor: pointer;  color: var(--myWhite); font-size: .8rem; font-weight: var(--font-bold);  user-select: none;}
section.faq fieldset ul li label:is([data-active=true], :hover) { text-decoration: underline; text-underline-offset: .15em; }

section.faq ul.main { display: grid; grid-template-columns: 1fr; justify-items: center; grid-gap: 1rem; }  
section.faq ul.main input {  position: absolute; width: 0; height: 0; opacity: 0; pointer-events: 0; scroll-margin-top: var(--margin-y);}
section.faq ul.main > li {width: 100%; scroll-margin-top: 5rem; }
section.faq ul.main > li[aria-hidden=true] { display: none; }
section.faq ul.main .grow  { display: grid; grid-template-rows: 0fr; transition: 333ms; }

section.faq div.expand > ul > li { background: var(--myWhite);  margin-bottom: .35rem; position: relative; overflow: hidden; --mainColor: var(--myOrange);  border-radius: var(--halfBorderRadius);}
section.faq div.expand > ul > li .grow {height: 0; overflow: hidden; transition: 333ms ease;  background: var(--myFaintBlue);}
section.faq div.expand > ul > li .prose {padding: 0.5rem 0.75rem 0.65rem; box-sizing: border-box; }

section.faq div.expand > ul > li label {padding: 0.6rem 0.75rem 0.5rem; display: block; transition: 333ms ease; cursor: pointer; display: flex;align-items: center;  border-radius: var(--halfBorderRadius);}
section.faq div.expand > ul > li label::before, section.faq div.expand > ul > li label::after { content: ""; width: 0.4rem; height: 3px; top: 1.3em; background: var(--mainColor); display: block; position: absolute; right: .85rem; transform: translateX(42%) rotate(-45deg); transition: 333ms ease;  border-radius: 1rem; }
section.faq div.expand > ul > li label::before { transform: translateX(-7%) rotate(45deg);  }

section.faq div.expand > ul > li label:hover::before, section.faq div.expand > ul > li label:hover::after { transform: none; height: 0.4rem; width: 0.4rem;  transform: translate(10%, -.2em); }
section.faq div.expand > ul > li label:hover {background: var(--myYellow); color: var(--myWhite); --mainColor: var(--myWhite); }

section.faq div.expand > ul > li input:checked + article label {background: var(--myOrange); --mainColor: var(--myWhite);  color: var(--myWhite); }
section.faq div.expand > ul > li input:checked + article label:not(:hover)::before, section.faq div.expand > ul > li input:checked + article label:not(:hover)::after { transform: translateX(50%) rotate(45deg); }
section.faq div.expand > ul > li input:checked + article label:not(:hover)::before { transform: translateX(-7%) rotate(-45deg); }

@media only screen and (max-width: 768px) {
    section.faq .container{ grid-template-columns: 1fr; max-width: 30rem;  gap: 1.5rem;}
    section.faq fieldset ul li label { font-size: var(--font-size-h6); }
    section.faq fieldset { position: relative; top: unset; max-width: 100%;  isolation: isolate;}
}


/* =========================================================== */
/* ======================== PARTNERS ========================= */
/* =========================================================== */
section.partners .container { margin: 0 auto var(--margin-y-half); }
section.partners .container > ul { display: grid; grid-template-columns: repeat(auto-fill,minmax(16rem, 1fr)); grid-gap: 1rem; }

li.partner.card { border-radius: var(--borderRadius);background: var(--myOrange);  color: var(--myWhite); position: relative; isolation: isolate; }
li.partner.card::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: var(--bg-image); border-radius: var(--borderRadius); z-index: -1;  opacity: 0; transition: opacity 333ms;}
li.partner.card picture { max-width: 6rem; padding: 0.5rem; background: var(--myWhite); border-radius: var(--halfBorderRadius); }
li.partner.card :is(a,.a) { padding: 1rem;    display: flex; flex-direction: column; }
li.partner.card a > div { padding: 0; background: none; }
li.partner.card > div {padding: 0;}
li.partner.card:hover { background: var(--myOrange);}
li.partner.card:hover::before { opacity: 1;}
li.partner.card .h5 { margin-top: 1em;}
li.partner.card .target:hover span.btn { color: var(--myDarkBlue);}


/* =========================================================== */
/* ===================== OPENINGSTIJDEN ====================== */
/* =========================================================== */
section.openingstijden .h1 { text-align: center; }
section.openingstijden .container > .md { max-width: 30rem; margin: 0 auto; text-align: center;}
section.openingstijden .container .grid { display: grid; grid-template-columns: 1fr 1fr; grid-gap: var(--gap); margin-top: 2rem; }


section.openingstijden :is(.h2,.h6) {  text-align: center; margin-bottom: 0.1em; display: block; }
section.openingstijden .h2 { max-width: 15em; margin-inline: auto;}
section.openingstijden .h6 { margin-bottom: .6rem;}
section.openingstijden table { width: 100%;  border-collapse: collapse; border-radius: var(--borderRadius); overflow: hidden;}
section.openingstijden table :is(th,td) {border: .5rem solid var(--myOrange); padding: 0.75em;  text-align: center;}
section.openingstijden table tr:first-of-type th,
section.openingstijden table td { background: var(--myDarkBlue); color: var(--myBeige); font-family: var(--headerFont); font-size: var(--font-size-h6); line-height: 1; }
section.openingstijden table tbody td:not(:first-of-type) { background: none; color: var(--myDarkBlue);}

section.openingstijden table tr:first-of-type th { border-top: none;}
section.openingstijden table tr:last-of-type td { border-bottom: none;}
section.openingstijden table :is(th,td):last-of-type { border-right: none;}
section.openingstijden table :is(th,td):first-of-type { border-left: none;}

section.openingstijden .table { overflow: auto; max-width: 100vw; width: calc(100% + var(--gutterSide) * 2); margin-left: calc(var(--gutterSide) * -1); display: flex; padding: 0 var(--gutterSide); }
section.openingstijden br { display: none; }

@media only screen and (max-width: 1770px) {
    section.openingstijden .container .grid { grid-template-columns: 1fr; max-width: 40rem; margin-inline: auto;}
}

@media only screen and (max-width: 768px) {   
    section.openingstijden br { display: block; }
}

/* --------------- FORM --------------- */
form.custom { 
    /* Layout */
    --form-columns: 2;
    --form-gap: 1em;  

    /* Inputs */
    --form-main-color: var(--mainColor);
    --form-input-background-color: var(--myWhite);
    --form-padding-x: .75em; 
    --form-padding-y: .5em;  
    --form-padding: var(--form-padding-y) var(--form-padding-x);  

    /* Borders */
    --form-border-color: transparent;
    --form-border-width: 1px;  
    --form-border-radius: 0.5rem; 
    
    /* Labels */
    --form-label-color: var(--mainColor);
    --form-label-border-radius: 0.5em;
    --form-label-background-color: var(--myWhite); 
    --form-label-asterisk-color: var(--myOrange);
    --form-label-transform-distance: 90%; 
    
    /* Checkboxes */
    --form-check-border-radius: .2em;

    /* States */
    --form-color-focus: var(--myOrange);
    --form-color-error: maroon;

    /* Transition */
    --form-transition: 333ms ease; 
}
/* LAYOUT */
form.custom { position: relative; max-width: 50rem; margin: 0 auto; }
form.custom fieldset { display: grid; grid-template-columns: repeat(var(--form-columns), 1fr);  grid-gap: var(--form-gap);}
form.custom fieldset > div { position: relative; }

/* INPUTS */
form.custom :is(textarea, input, select) { padding: var(--form-padding); font-family: var(--primaryFont); font-size: var(--font-size-body); color: var(--form-main-color); width: 100%; transition: border var(--form-transition), padding var(--form-transition); border: var(--form-border-width) solid var(--form-border-color);  background: var(--form-input-background-color); border-radius: var(--form-border-radius); }
form.custom :is(textarea, input, select):focus-visible { outline: none; border: var(--form-border-width) solid var(--form-color-focus); }
form.custom :is(textarea, input, select)::placeholder { opacity: 0; }
form.custom .normal input { color: var(--form-main-color); }
form.custom div.double, form.custom small, form.custom small ~ * { grid-column: -1/1; }

/* TEXTAREA EXTRA'S */
form.custom .normal textarea { min-width: 100%; max-width: 100%; resize: none;  border: var(--form-border-width) solid var(--form-border-color); }
form.custom .normal textarea:focus-visible { border: var(--form-border-width) solid var(--form-color-focus);  }

/* DIVIDER */
form.custom .divider:not(:first-of-type) { margin-top: 2em; }

/* LABEL */
form.custom .normal label { position: absolute;  top: calc(var(--form-padding-y) + .05em);  left: var(--form-padding-x); opacity: .85; pointer-events: none; transform-origin: left; transition: var(--form-transition); white-space: nowrap; color: var(--form-label-color);  border-radius: var(--form-label-border-radius);}
form.custom .normal :is(textarea:is(:focus,:not(:placeholder-shown)), input:is(:focus, :not(:placeholder-shown))) + label, form.custom .select[data-active=true] label { transform: translate(calc(var(--form-padding-x) * 0), calc(var(--form-label-transform-distance) * -1)) scale(0.7); padding: 0 .2em 0 0.5em; opacity: 1; background: var(--form-label-background-color); max-width: unset; }
form.custom .normal :is(textarea:is(:focus,:not(:placeholder-shown)), input:is(:focus, :not(:placeholder-shown))):not([required]) + label, form.custom .select[data-active=true] select:not([required]) + label { padding: 0 .5em;}

/* ASTERISK */
form.custom .normal :is(textarea, input, select)[required] + label::after { content: "*"; display: inline-block; margin-left: 0.15em; color: var(--form-label-asterisk-color); transition: var(--form-transition); }
form.custom .normal :is(:is(input, textarea):is(:focus, :not(:placeholder-shown)), select[data-active=true]) + label:after { opacity: 0; }

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

/* SELECTS */
form.custom .select { position: relative; display: flex; align-items: center; min-height: 2.333em; background: var(--form-input-background-color);  border: var(--form-border-width) solid var(--form-border-color); border-radius: var(--form-border-radius); }
form.custom .select select { position: absolute; top: 0; left: 0; width: 100%; height: 100%; color: transparent; background: transparent; border: none; cursor: pointer; }
form.custom .select span { position: absolute; top: var(--form-padding-y); left: var(--form-padding-x); pointer-events: none; transform-origin: left; transition: var(--form-transition); white-space: nowrap; color: var(--form-label-color); font-weight: var(--font-semi-bold); opacity: 0; }
form.custom .select[data-active=true]  span { opacity: 1; }
form.custom .select::before, form.custom .select::after { content: ""; height: 2px; top: 45%; width: .4em; position: absolute; transform: translate(40%, -.05em) rotate(var(--r, 45deg)) translateY(.18em); background: var(--form-main-color); right: calc(var(--form-padding-x) + .4em); border-radius: 100vmin; transition: background var(--form-transition); }
form.custom .select::after { --r: -45deg; }

/* MULTICHOICE / SINGLE CHOICE */
form.custom .field { flex-direction: column; }
form.custom .field p { margin-bottom: 0.5em; color: var(--form-label-color);}
form.custom .field ul { display: flex; flex-wrap: wrap; gap: 1em;   }
form.custom .field ul li { position: relative; display: flex;  color: var(--form-label-color);}
form.custom .field ul input { position: absolute; top: 0; left: 0; opacity: 0; pointer-events: none; }
form.custom .field ul input:focus { border: none; outline: none; }
form.custom .field ul input:focus-visible + label::before { outline: 3px solid var(--form-color-focus); }
form.custom .field ul label:hover::before { background: var(--form-color-focus); }
form.custom .field ul label { padding-left: 1.5em; }
form.custom .field ul label::before, form.custom .field ul label::after { content: ""; position: absolute; left: 0; top: 0.25em; width: 1em; height: 1em; border: 1px solid var(--form-border-color); border-radius: var(--form-check-border-radius); transition: background 333ms; }
form.custom .field ul label::after { background: url("/img/icons/check.svg") center center / contain no-repeat; left: 0px; background-size: 60%; transform-origin: bottom; transition: transform var(--form-transition); transform: scale(0); border: none; }
form.custom .field ul input:checked ~ label::after { transform: none; }

/* CAPCHA NOTICES */
form.custom small { font-size: 11px; opacity: 1; transform-origin: top left; margin: calc(var(--em) * -1) 0 .5rem; margin-left: var(--halfBorderRadius); opacity: .5;}
form.custom small a { text-decoration: underline; }
.grecaptcha-badge { visibility: hidden; }



/* --------------- SWIPESLIDER  --------------- */
.swipeslider { position: relative; display: flex; align-items: center; justify-content: center; grid-column: -1/1; }
.swipeslider .slider { overflow: auto; scroll-snap-type: x mandatory; width: calc(100% + var(--calculated-gutter, var(--gutterSide)) * 2); flex-shrink: 0; margin-left: auto; scroll-behavior: smooth; }
.swipeslider .slider > ul  { display: flex; --_gap: 1rem;  gap: var(--_gap);  }
.swipeslider .slider > ul::after { content: ""; width: 1px; height: 1px; opacity: 0; pointer-events: none; flex-shrink: 0; margin-left: -1rem;}
.swipeslider .slider > ul > li { flex-shrink: 0; width: clamp(18rem, 25vw, 25rem);  scroll-snap-align: center;  }
.swipeslider .slider > ul > li:last-of-type { display: block; width: calc(var(--gutterSide) - var(--_gap)); background: none;  opacity: 0; pointer-events: none; min-width: unset; max-width: unset; scroll-snap-align: end; }
.swipeslider .slider > ul > li:first-of-type { margin-left: var(--calculated-gutter, var(--gutterSide)); scroll-snap-align: center;}


/* --------------- PROSE CONTENT --------------- */
.prose > * + * { margin: 1.5em 0 0;}
.prose > * + *:last-child { margin-bottom: .5em;}
.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) li { margin-bottom: .25em;}
.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(--mainColor);}
.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: 0;}
.prose :is(h1,h2,h3,h4) + :is(h1,h2,h3,h4) { margin-top: .2em;}


/* --------------- 404 PAGE --------------- */
section.not-found .container { display: flex; flex-direction: column; align-items: center; min-height: 40vh; justify-content: center;  }


/* --------------- COOKIE BANNER COLORS --------------- */
section.odf__cookies.odf__cookies { 
    --odf_main_color: black;
    --odf_background_color: white; 
    --odf_highlight_color: maroon; 
}


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


/* MAX */
@media only screen and (max-width: 768px) {
    :root { 
        --logoWidth: 8rem; 
        --margin-y: 2.5rem; 
        --gutterTop: 1rem; 
        --gutterSide: 1rem;
        --paddingTop: 3rem; 
        --font-size-body: 1rem;  
        --font-size-h1: 1.6rem;
        --font-size-h2: 1.5rem;
        --font-size-h3: 1.4rem;
        --font-size-h4: 1.3rem;
        --font-size-h5: 1.2rem;
    }
    /* --------------- HEADER --------------- */
    label.burger { display: flex; }
    :is(body header[data-scrolled=true], body:not(.home) header) { --logoWidth: 7rem; }
    header { width: calc(100% - .3rem); left: .15rem;  top: .15rem; border-radius: var(--borderRadius); box-shadow: none;  }
    :is(body header[data-scrolled=true], body:not(.home) header) { box-shadow: var(--dropShadow);}
    nav#desktop li.tickets { position: fixed; bottom: 1rem; left: 0; right: 0; margin: 0 auto; pointer-events: none; display: flex; justify-content: center; }
    nav#desktop li.tickets a { pointer-events: all; font-size: var(--font-size-h5);}
    nav#desktop ul.sub li a { padding:  0.6rem 1rem; ;  width: 100%;  font-weight: var(--font-bold);}
    body.home li.tickets { transform: translateY(calc(1rem + 100%));}
    body.home header[data-show-ticket=true] li.tickets { transform: none;}
    body:has(section.tickets) header nav#desktop li.tickets { display: none; }
    /* nav#desktop ul.sub { max-width: unset; } */
    input.burger:checked ~ header nav#desktop ul.sub { transform: translateY(calc(100% + .75rem)); }
    
    /* --------------- FOOTER --------------- */
    footer > nav { padding-top: 8rem;}
    footer > nav > ul { grid-template-columns: 1fr 1fr; }
    footer > nav > p  { margin: 3rem auto 5rem; text-align: center;  }
    footer h3.partners { margin-top: 3rem; }    
}



@media only screen and (max-width: 500px) {
    nav#desktop .btn { font-size: .9rem;}
}
@media only screen and (max-width: 350px) {
    html { font-size: 4.575vw;}
}

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

/* --------------- ANIMATIONS --------------- */
@keyframes slide {
    0% { transform: translate(0%, 0);}
    100% { transform: translate(calc(-100% - 1rem), 0);}
}