* {padding: 0; margin: 0;  border: 0; box-sizing: border-box; color: var(--mainColor);}
html {font-size: 20px; scroll-behavior: smooth; overscroll-behavior: none;}
body {font-size: 0.8rem;  font-family: var(--primaryFont); font-weight: var(--font-light); background: var(--backgroundColor); min-width: 300px; }
a {text-decoration: none; color: var(--mainColor);}
p a:not(.btn):hover {text-decoration: underline;}
ul {list-style-type: none;}
ol { padding-left: 1em; }
p {margin-bottom: 1.4em;}
br {margin:0 !important; height: 0%;}
strong, em { font-style: normal; font-weight: var(--font-light); }
fieldset legend { display: none;}
body.no-scroll { overflow: hidden;}

html {
    touch-action: pan-x pan-y;
    height: 100% 
}

:root {
    /* Fonts */
    --primaryFont: "Optima", system-ui;
    --headerFont: "Optima", system-ui;
    --fancyFont: "Stripe";

    /* Colors */    
    --mainColor: var(--white);
    --backgroundColor: var(--myBlue);
    --myGreen: #045928;
    --myMediumGreen: #5a9c5e;
    --myLightGreen: #89da97; 
    --myOrange: #FF9700;
    --myBlue: #000549; 
    --myDarkBlue: #312891; 
    --myMediumBlue: #002e8a; 
    --myLightBlue: #00c3fd;
    
    --myBlue50: rgba(0, 5, 73, 0.5); 
    --myBlue10: rgba(0, 5, 73, 0.1); 
    --myBlue10Opaque: #E5E6EC; 
    --myBlue2: rgba(0, 5, 73, 0.02); 
    --myYellow: #ffcf00; 
    --myMediumYellow: #ffd766; 
    --myLightYellow: #ffe99d;
    --myBrown: #664229; 
    --myMediumBrown: #987554;
    --myLightBrown: #f0d8c0; 
    --myWhite: #FFF;
    --myBlack: #000; 
    --myLightGrey: #eee;
    --myFaintGrey: #F9F9F9;
    --myMediumGrey: #aaa;
    --myDisabledGrey: #999;
    --myInactiveGrey: rgba(0,0,0,.05);
    
    --odfPink: #EAA0A5;

    /* Font weights */
    --font-thin: 200; 
    --font-light: 300; 
    --font-regular: 400; 
    --font-medium: 500; 
    --font-bold: 600; 

    /* Widths */
    --gutterSide: 2rem;
    --gutterTop: .75rem;
    --maxWidth: 55rem;
    --maxWidthWide: 88rem;
    --maxWidthNarrow: 45rem;
    --maxWidthUltraWide: 130rem;
    --width: calc(100% - var(--gutterSide) * 2);
    --btnPadding: 0.65em 1.4em 0.4em;
    --btnPaddingNarrow: 0.65em 1em 0.4em;

    /* Shadows */
    --dropShadow: 0px 3px 6px 0 rgba(0,0,0,0.26);
    --navShadow: 0px 1px 4px 0 rgba(0,0,0,0.1);
    --blurShadow: 10px 10px 30px 0 rgba(0,0,0,0.16);

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

    /* Borders */
    --borderRadius: 0.5rem; 
    --halfBorderRadius: calc(var(--borderRadius) / 2);

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

/* --------------- HEADERS --------------- */
h1,.h1,h2,.h2,h3,.h3,h4,.h4,.bold { font-weight: var(--font-bold);  margin-bottom: 0.5em; font-family: var(--headerFont); text-transform: uppercase; }
h1, .h1 { font-size: 2rem; letter-spacing: 1.5px; } 
h2, .h2  {font-size: 1.8rem;}
h3, .h3  {font-size: 1.2rem;}
h4, .h4 {font-size: 1.2rem;} 
.kicker { font-size: 1rem;}

h3.info, strong.info { font-family: var(--primaryFont); font-weight: var(--font-medium); font-size: 0.6rem; color: var(--myBlue50);   text-transform: uppercase;}


/* --------------- GENERAL --------------- */
header, main, footer { max-width: var(--maxWidthUltraWide); width: 100%; margin: 0 auto; position: relative; }
section:not(section section, section.sticky), nav#desktop, footer > section, section.fullscreen > div {max-width: var(--maxWidth); width: var(--width); margin: 3rem auto; position: relative;  }
section.fullscreen { max-width: 100%; width: 100%; }
section.narrow { max-width: var(--maxWidthNarrow) !important}
main { padding-top: 3rem; }

.background { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -10;}
.foreground { position: fixed; bottom: 0; left: 0; width: 100%; height: 15%; z-index: 100; pointer-events: none; background: linear-gradient(to top, var(--myBlue) 0%, var(--myBlue) 10%, rgba(0,0,0,0) 100%); transition: 500ms;}
.background .underlay, .background .overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100vh; overflow: hidden; pointer-events: none; }
.background .underlay::before, .background .underlay::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.background .underlay { background: var(--myBlue); background-image: linear-gradient(180deg, rgba(0, 100, 150, 0.2) -0%, rgba(0,35,39,0.11) 46%, rgba(0,0,0,0.00) 100%);}

.background .underlay::after { background-image: radial-gradient(1vw 1vw, var(--myDarkBlue) 52%, rgba(32,24,126,0.00) 50vh); top: 50%; transform: translate(30%, -80%); opacity: 0.7;  }
.background .underlay::before { background-image: radial-gradient(1vw 1vw, var(--myDarkBlue) 52%, rgba(32,24,126,0.00) 50vh); top: 100%; left: 100%; transform: translate(-50%, -60%) }
.background .overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100vh; z-index: 2; }
.background .overlay::after {content: "";  position: absolute; top: 0; left: 0; width: 200%; height: 100%;  background-image: radial-gradient(2vw 2vw, var(--myBlue) 52%, rgba(10,10,30,0.00) 50vw); top: 50%; transform: translate(-35%, -50%); opacity: 0.6; }
.background .overlay::before {content: "";  width: 100%; height: 40%; top: unset; bottom: 0; background: linear-gradient(to top, var(--myBlue), rgba(0,0,0,0.00)); position: absolute; z-index: 99; }
canvas#stars { position: absolute; top: 0; left: 0; pointer-events: none; filter: blur(.3px); opacity: .7; transition: transform 5s ease;}

.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; } .no-scrollbar::-webkit-scrollbar { display: none; }
.mobile { display: none; }

.stroke { -webkit-text-stroke: 0.03em var(--myWhite);  }
.stroke.blue { -webkit-text-stroke: 0.03em var(--myBlue);  color: var(--myBlue); }

.tree { user-select: none; }
.cloud { position: absolute; mix-blend-mode: screen;  transition: opacity 500ms;}
.cloud, .cloud > img {  max-width: 100%; user-select: none; }
.cloud.c1 { top: 10%; left: 0; transform: translate(-30%, 0); }
.cloud.c2 { top: 50%; right: 0%; transform: translate(50%, 0); }
.cloud.c1 > img { max-height: 18rem; }

h2.announcement { background: var(--myWhite); border-radius: 100vmin; padding: 0.4em 1em 0.3em; font-size: clamp(1rem, 2.5vw, 1.2rem); text-align: center; display: inline-block; position: relative; color: var(--myBlue); display: flex; justify-content: center; }
.snow::before{ content: ""; top: 0; transform: translateY(calc(-100% + 6px)); width: 98%; height: 1.1rem; position: absolute;  background: transparent no-repeat center center / contain;  background-image: url("/img/top_snow.svg");  }

span.accent { position: relative;}
strong span.accent { font-weight: var(--font-bold); }
span.accent::before, span.accent::after {position: absolute; background: var(--mainColor); content: "";}
.white .accent::before, .white .accent::after { background: var(--myWhite); }
.blue .accent::before, .blue .accent::after { background: var(--myBlue) !important; }
.blue .accent { color: var(--myBlue);}

span.umlaut::before, span.umlaut::after {  height: 0.08em; width: 0.08em; top: -1px; border-radius: 50%; left: 60%; }
span.umlaut::before { left: 30%;  }

span.e-trema::before { width: 0.2em; top: -1px; height: 0.05em; left: 50%; transform: translate(-50%, 0) rotate(-15deg); }
span.e-accent::before { width: 0.2em; top: -1px; height: 0.05em; left: 50%; transform: translate(-50%, 0) rotate(15deg); }

figure { position: relative;}

button { all: unset; }
button.btn { cursor: pointer;}
.btn {  background: var(--myBlue); border-radius: 100vmin; color: var(--myWhite); text-transform: uppercase; padding: var(--btnPadding);  font-family: var(--headerFont); transition: 250ms; user-select: none; font-size: 1rem;}
.btn.white { background: var(--myWhite); color: var(--myBlue);}

.btn.white:hover,
.btn:hover { background: var(--myMediumBrown);}

.btn.green { background: var(--myMediumGreen);  color: var(--myWhite); }
.btn.green:hover { background: var(--myGreen);}

.ticket { background: var(--myMediumGreen); color: var(--myWhite); transition: background 500ms; }
.ticket:hover { background: var(--myGreen); }

a.btn.sl { font-size: 1rem; position: relative; display: block; width: calc(100% - 2rem); max-width: 20rem; margin: 4rem auto 2rem; text-align: center; padding: 0.55rem .5rem 0.45rem; }
a.btn.purchase { font-size: 1rem; position: relative; display: block; width: calc(100% - 2rem); max-width: 20rem; margin: 3rem auto 2rem; text-align: center; padding: 0.55rem .5rem 0.45rem; }
a.btn.sl::before,a.btn.sr::after { position: absolute; content: ""; background: url('/img/btnsnow_left.svg') center center / contain no-repeat; width: calc(1.4rem * 2); height: calc(0.75rem * 2); left: 0;  top: 0; transform: translate(-15%, -25%); }
a.btn.sr::after { background: url('/img/btnsnow_right.svg') center center / contain no-repeat; width: calc(2.3rem * 2); height: calc(0.85rem * 2); left: initial; right: 0; transform: translate(10%, -25%)  }

.scrollAnchor { position: absolute; top: -8rem; pointer-events: none; opacity: 0; visibility: hidden;}

*::selection { background: var(--myYellow); color: var(--backgroundColor); }

/* --------------- HEADER --------------- */
header {position: fixed; top: var(--gutterTop); left: 0; right: 0; max-width: var(--maxWidthWide); width: var(--width); z-index: 102;  display: flex;  justify-content: space-between; align-items: flex-start;  pointer-events: none; z-index: 10000000000;}
header > *:is(a,label) { pointer-events: all;}
body[data-navopen=true] { overflow: hidden;}


/* Logo left */
header > a { background: var(--myWhite); display: inline-flex; padding: .5rem 1rem .5rem 1.1rem; border-radius: var(--borderRadius); font-family: var(--fancyFont); text-transform: uppercase;  z-index: 2;  user-select: none;  transition: padding 500ms, opacity 250ms;}
header > a:first-of-type  {transform-origin: top left;  transition: 500ms;}
header > a img { width: 100%; max-width: 2.5rem; transition: 250ms ease;}
header > a img + img { position: absolute; opacity: 0; transition: 250ms ease;}
header > a strong { display: flex; flex-direction: column; align-items: flex-start; white-space: nowrap; font-size: 1.3rem; margin-left: .75rem; line-height: 1.05; transform: translateY(5%);transition: 250ms ease; }
header > a strong span { font-size: 1.15em; color: inherit;}
main > *:not(.background), footer { transition: opacity 500ms; }

/* Breadcrumbs */
#breadcrumbs { position: absolute; top: 4rem;  width: var(--width); max-width: var(--maxWidthWide); margin: 0 auto; left: 0; right: 0; transform: translateY(calc(100% + 0.5rem)); font-size: .7rem; color: var(--myWhite); transition: opacity 500ms; }
#breadcrumbs > div { margin-left:  .25em;}
#breadcrumbs span:not(:last-of-type) { display: inline-block; margin: 0 .5em; font-size: .8em; transform: translateY(-7%);}
#breadcrumbs a { text-decoration: underline; text-underline-offset: 2px;}
#breadcrumbs a:hover { color: var(--myMediumYellow);}

header > a.ticket { font-weight: var(--font-medium); margin-left: auto; margin-right: .5rem; font-size: 1.3rem; padding: .3em .75em .1em;}

section#menu { margin: 0; width: var(--width);  max-width: var(--maxWidthWide); right: 0; margin: 0 auto; position: fixed; top:0; left: 0; height: 100%;  transition: 500ms; opacity: 0;  color: var(--myBlue); pointer-events: none;  display: flex; flex-direction: column; align-items: center;  transform: translateY(-2rem);  } 
section#menu .grid {  display: grid; grid-template-columns: 1fr; width: auto; margin-left: auto;  height: auto;   position: relative;   max-width: var(--maxWidthWide);  background:  var(--myWhite); border-radius: var(--borderRadius); top: calc(var(--gutterTop) + 3rem);  padding: clamp(1rem, 1.5vw, 2rem);   box-shadow: var(--dropShadow); max-height: calc(100vh - 4rem); }
section#menu .grid::before { content: ""; background: var(--myWhite); position: absolute; top: 0; right: 1.3rem; width: .75rem; height: .75rem; transform: translateY(-50%) rotate(45deg); transition: 500ms ease; }
section#menu nav.bottom { grid-column: -1/1; }
section#menu a.btn { --ownColor: var(--myWhite); }
section#menu a.btn:hover, label.burger:hover { background: var(--myMediumBrown);}
section#menu nav.main { margin-top: 1rem; }

nav.main {  display: flex; flex-direction: column; justify-content: flex-start }
nav.main > ul {  display: flex; flex-direction: column; align-items: flex-start; }
nav.main ul li {  display: flex; flex-direction: column; align-items: flex-start; position: relative;  margin-bottom: .8rem;}
nav.main ul li[data-hide-on-desktop] { display: none; }
nav.main ul li:first-of-type { margin-top: 0;}
nav.main ul li a { background: var(--myBlue); }

nav.main ul li.active a.btn { background: var(--myYellow); color: var(--myBlue);}
nav.main ul li.active a.btn:hover { color: var(--myWhite);}


nav.side { display: flex; flex-direction: column; justify-content: center; align-items: flex-start;  }
nav.side p.h3 { text-transform: none; max-width: 18em; margin-bottom: 2rem;}
nav.side ul { display: flex; flex-direction: column; align-items: flex-start; }
nav.side ul li { display: flex; margin-bottom: 1em;}
nav.side ul li a.btn { background: var(--myBlue); }
nav.side a.search { position: relative;  display: flex; align-items: center; padding: 0.65em 1.6em 0.4em 2.6em; }
nav.side a.search::before, nav.side a.search::after { content: ""; display: block; position: absolute;  transition: 500ms; }
nav.side a.search::before { height: 2px; width: 0.4rem;  left: 1.5em; transform: translate(1px, 6px) rotate(45deg) translate(0, -4px); background: var(--ownColor); }
nav.side a.search::after {border-radius: 50%; border: 2px solid var(--ownColor);  height: 0.55rem; width: 0.55rem; left: 0.75em; transform: translate(0.35rem, -5px); }  

nav.side ul.socials { display: flex;  flex-direction: row; align-items: center; margin-top: .5rem; margin-left: .2rem; }
nav.side ul.socials li {  height: 1.8rem; width: 1.8rem; position: relative; }
nav.side ul.socials li a { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: grid; place-items: center;  background: var(--myWhite);  border-radius: .5rem;  transition: 250ms;}
nav.side ul.socials li a:hover { background: var(--myMediumYellow);}
nav.side ul.socials li:not(:last-of-type) {margin-right: 1.2rem;}
nav.side ul.socials img {max-width: 1rem; max-height: 1rem;}

nav.bottom { margin-top: auto; padding-top: 1rem;  font-size: .7rem;}
nav.bottom ul { display: flex; gap: .25rem 1rem; flex-wrap: wrap;}  
nav.bottom ul li a { color: var(--myBlue);}
nav.bottom ul li a:hover { text-decoration: underline; text-underline-offset: 2px; color: var(--myMediumBrown); }
nav.bottom ul li a.active  { text-decoration: underline; text-underline-offset: 2px; }

a.lang { position: absolute; top: 1rem; right: 1rem; font-size: .8rem; text-decoration: underline; color: var(--myBlue);}
a.lang:hover { color: var(--myMediumBrown);}

header > a, label.burger, .age-group > .box button { box-shadow: var(--navShadow);}

/* Burger */
input.burger { display: none;}
label.burger { transition: 250ms ease; cursor: pointer;  display: flex;  align-items: center; gap: .5rem; padding: .2em .75em; background: var(--myWhite);  font-size: 1.3rem;  border-radius: 100vmin;  z-index: 2;   user-select: none;  --ownColor: var(--myBlue); }
label.burger strong { color: var(--ownColor);  text-transform: uppercase; display: inline-block; transform: translateY(.12em); font-weight: var(--font-medium); transition: color 250ms; }
label.burger > div { position: relative; height: .9rem; width: 1.5rem; transition: 750ms ease; }
label.burger > div > span { width: 1.5rem; height: 3px; position: absolute; top: 0; right: 0;  background: var(--ownColor); transition: all 250ms ease, transform 500ms ease; border-radius: 100vmin; }
label.burger > div > span:nth-of-type(2) { top: calc(0.5rem - 2px); width: 1.2rem; }
label.burger > div > span:nth-of-type(3) { top: calc(1rem - 4px); width: .9rem; }

/* Burger hover */
label.burger:hover { --ownColor: var(--myWhite) }
label.burger:hover span:nth-of-type(1) { width: 1.2rem;}
label.burger:hover span:nth-of-type(2) { width: 1.4rem;}
label.burger:hover span:nth-of-type(3) { width: 1.2rem;}

/* Burger checked */
input.burger:checked ~ header label.burger div { transform: rotate(180deg);  }
input.burger:checked ~ header label.burger span:nth-of-type(1) { transform: translateY(0.4rem) rotate(45deg); width: 1.5rem;}
input.burger:checked ~ header label.burger span:nth-of-type(2) { transform: scaleX(0); width: 1.5rem;}
input.burger:checked ~ header label.burger span:nth-of-type(3) { transform: translateY(-0.4rem) rotate(-225deg); width: 1.5rem;}


input.burger:checked ~ header section#menu { opacity: 1; transform: translateY(0);}
input.burger:checked ~ header section#menu .grid { pointer-events: all;}
input.burger ~ .underlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 101; opacity: 0; pointer-events: none; transition: 500ms ease; }
input.burger:checked ~ .underlay { opacity: 1; pointer-events: all;}

a#wish { background: var(--myBlue); color: var(--myWhite);  border-radius: 100vmin;  position: relative; }
a#wish > span { font-family: var(--primaryFont); font-weight: var(--font-bold); font-size: 0.5rem; padding: 0.25rem; background:var(--myYellow); color: var(--myBlue); width: 0.8rem; height: 0.8rem;  top:100%; transform: translateY(-50%) scaleY(0); border-radius: 50%; position: absolute; right: 0.4rem; display: grid; place-items: center; line-height: 0; transition: 500ms; }
a#wish > span.show { transform: translateY(-50%) scale(1); }
a#wish > span::before { content: ""; background: url('/img/star_fill.svg') center center / cover no-repeat; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(0) scale(0); width: 1.85rem; height: 1.85rem;  }
a#wish > span.wow::before { animation: wow 1500ms forwards;  }

/* --------------- AGE GROUP SELECTOR --------------- */
.age-group {   --_buttonHeight: 2.75rem; --_gap: .25rem; --_imageWidth: 2rem; --_selector-font-size: 0.9rem;   }
.age-group { position: fixed; pointer-events: none; top: 0; left: 0; width: var(--width); max-width: var(--maxWidthWide);  height: 100vh; height: 100dvh; right: 0; margin: 0 auto;  }
.age-group > .box { position: absolute; bottom: 1rem; left: 0;  width: calc(100vw - var(--gutterSide) * 2); max-width: 11.5rem;  height: var(--_buttonHeight);  transition: 500ms ease; color: var(--myBlue);}
.age-group > .box p { pointer-events: none; position: absolute;  top: 0; left: 0; transform: translateY(.5rem); transition: 250ms ease 250ms;  color: var(--myWhite); font-size: var(--_selector-font-size); max-width: 9.5em;  opacity: 0;  background: var(--myBlue);  padding: .25rem .5rem; border-radius: var(--borderRadius); margin-left: .25rem; }
.age-group strong { display: none;  color: var(--myBlue);}
.age-group ul li { display: flex;  }
.age-group ul img { max-width: var(--_imageWidth); }
.age-group ul button { pointer-events: all; cursor: pointer;  background: var(--myWhite); padding: var(--btnPadding); gap: 0 .5rem; overflow: hidden;  position: absolute; border-radius: 100vmin;  height: var(--_buttonHeight); bottom: 0; left: 0;  width: max-content; --_delay: 0s; transition: all 500ms cubic-bezier(.08,.55,.12,1.44) var(--_delay), z-index 0s, grid-template-columns 500ms ease 200ms, padding 500ms ease 200ms; margin-top: var(--_gap); box-sizing: border-box; font-size: var(--_selector-font-size); font-weight: var(--font-medium);  } 
.age-group ul button span { color: var(--myBlue);}
.age-group ul button::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.age-group ul button:not([data-i="1"]):hover::after { background: var(--myBlue10); transition: 250ms; }


/* Popup animation */
.age-group ul button { display: grid; grid-template-columns: auto 0fr; align-items: center; justify-content: center; padding: 0 calc((var(--_buttonHeight) - var(--_imageWidth))  / 4); }
.age-group ul button img { transform: translateX(calc((var(--_buttonHeight) - var(--_imageWidth)) / 4)); transition: 500ms ease 500ms; }
.age-group ul button span { overflow: hidden; white-space: nowrap;}
.age-group ul button[data-i="1"] {  cursor: unset; }

/* Standardly pop out the first one */
/* .age-group ul button[data-i="1"] { grid-template-columns: auto 1fr; padding: var(--btnPadding); cursor: unset; } */
/* .age-group ul button[data-i="1"] img { transform: translateX(-.25rem);} */

/* On load disable all transitions */
.age-group[data-instant=true] * { transition: 0s !important;  pointer-events: none;}

/* After click transition in */
.age-group[data-hidden] {transition: transform 1000ms;}
.age-group[data-hidden=true] { transform: translateY(100%);}

/* No preference state */
.age-group[data-nothing=true] strong { position: relative;  padding: var(--btnPadding); z-index: 4;  background: var(--myWhite); font-size: var(--_selector-font-size); font-weight: var(--font-medium);  border-radius: 100vmin; height: var(--_buttonHeight); display: inline-flex; align-items: center; transition: opacity 500ms;    box-shadow: var(--navShadow); pointer-events: all;}
.age-group[data-nothing=true] button { box-shadow: none;}
.age-group[data-nothing=true][data-hover=true] strong  { opacity: 0; pointer-events: none;  }
.age-group[data-nothing=true] button[data-i="1"] { cursor: pointer; }
.age-group[data-nothing=true] button[data-i="1"]:hover::after { background: var(--myBlue10); }

/* Hover animation */
.age-group[data-animating=true] .box button { pointer-events: none; }
.age-group[data-hover=true] .box { pointer-events: all; height: calc(var(--_buttonHeight) * 3 + var(--_gap) * 3); }
.age-group[data-hover=true] .box::before { position: absolute; top: 0; width: 100%; height: 100%; content: "";  left: -1rem;  width: calc(100% + 2rem);  }
.age-group[data-hover=true] .box p { opacity: 1; transform: translateY(calc(-100%));}
.age-group[data-hover=true] .box li button { transform: none;  transition: all 500ms cubic-bezier(.08,.55,.12,1.44) var(--_delay), z-index 0s, grid-template-columns 500ms ease 100ms, padding 500ms ease 100ms;  padding: var(--btnPadding); grid-template-columns: auto 1fr; }   
.age-group[data-hover=true] .box li button img { transform: translateX(-.25rem); transition: 500ms; }
.age-group[data-hover=true] .box button[data-i="2"] {  --_delay: 100ms; transform: translate(0, calc(-200% - var(--_gap) * 2)) }
.age-group[data-hover=true] .box button[data-i="3"] {  --_delay: 50ms; transform: translate(0, calc(-100% - var(--_gap))) }
.age-group .box li button { transition-timing-function: cubic-bezier(.58,-0.4,.85,.56);  } 
.age-group .box li button[data-i="1"] { z-index: 3; }
.age-group .box li button[data-i="2"] { z-index: 1; }
.age-group .box li button[data-i="3"] { z-index: 2; }

body[data-openedpopup=true] .age-group .box { opacity: 0;}

/* --------------- FOOTER --------------- */
/* GENERAL */
footer { padding-top: 18rem; overflow: hidden; --mainColor: var(--myBlack); margin-top: -6rem; pointer-events: none; }
footer > section { pointer-events: all; }
footer h2 { font-size: 1.5rem; margin-bottom: 0; color: var(--myBlue);  }
footer > section { background: var(--myWhite); border-radius: 3rem; margin-bottom: 15vh; margin: 0 auto 15vh !important; }
footer > section::after { content: ""; position: absolute; width: 120%; height: 0; padding-bottom: 60%;  left:50%; transform: translate(-50%, -55%); top: 0;  border-radius: 50%; background-image: radial-gradient(50% 50%, #FFD766 -10%, rgba(255,215,102,0.00) 100%); z-index: -2; }
footer > section > picture {display: flex; justify-content: center; }
footer > section > img {   width: calc(100% - 2rem ); position: absolute; top: 0; transform: translateY(calc(-100% - 0.0rem)) scaleY(2.1); margin: 0 auto; left: 0; right: 0;   user-select: none; z-index: -1; }
footer > section > picture img { position: absolute; transform: translateY(calc(-100% + 0.25rem)); width: calc(100% - 4rem);  display: block; z-index: -1;  user-select: none;}
footer > section > article { display: flex; flex-direction: column; align-items: center; padding-top: 1rem; }
footer > section > article p { max-width: 14rem; text-align: center; color: var(--myBlack); margin: 0.5rem auto 0; }

footer nav { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); grid-gap:0  1rem; max-width: var(--maxWidth); width: var(--width); margin: 0rem auto; padding: 0 2rem;}
footer nav > ul > li { color: var(--myWhite); font-family: var(--headerFont); text-transform: uppercase; font-size: 1rem; margin-bottom: 0.25rem;}
footer nav > ul > li > ul { display: flex; flex-direction: column; font-family: var(--primaryFont); text-transform: initial; font-size: 0.8rem;}
footer nav > ul > li > ul > li { margin-top: 0.45rem; }
footer nav h3 { color: var(--myBlue);  margin-bottom: 0; min-height: 3em; display: flex; align-items: flex-end; font-size: 0.9rem; }
footer nav > ul > li > ul > li a:hover { text-decoration: underline; }

/* SOCIALS */
footer nav ul.socials ul {flex-direction: row; align-items: center;}
footer nav ul.socials ul li:not(:last-of-type) {margin-right: 1.2rem;}
footer nav ul.socials img {max-width: 1.6rem;}

/* WEBSITE BY */
footer section > p { display: block; position: relative; max-width: var(--maxWidth); margin: 0 3rem 0 auto; font-size: 0.6rem; display: flex; align-items: center; justify-content: flex-end; padding-bottom: 0.5rem; font-family: var(--headerFont);}
footer section > p a {  font-size: 1.2em; margin-left: 0.5em; display: inline-block; margin-top: 0.1em;}
footer section > p a:hover { text-decoration: none; color: var(--odfPink); }

/* PARTNERS */
footer nav:last-of-type { margin-bottom: 1rem;}
footer ul.partners ul { width: 100%; flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: center;  }
footer ul.partners ul img {max-height: 1.85rem; width: auto; margin-right: 1rem; filter:grayscale(1); transition: 250ms ease;  margin-bottom: 1rem;}
footer ul.partners ul img:hover {filter: none;}


/* ------------------ GENERAL FOR MULTIPLE PAGES ------------------ */
section.introduction article { display: flex; flex-direction: column; --mainColor: var(--myWhite); align-items: center; text-align: center;  max-width: 25rem; margin: 0 auto;  }
section.introduction article h1 { margin-bottom: 0.25rem; font-size: clamp(1.5rem, 4vw, 2.5rem); }
section.introduction article img { width: 12rem; margin-bottom: 1rem; }
section.introduction article p a { text-decoration: underline;}
section.introduction article p a:hover { color: var(--myMediumYellow);}
section.introduction.single article h1 { font-size: clamp(1rem, 4vw, 1.75rem); }

/* ------------------ INFORMATION PAGE LIST ------------------ */
section.information ul { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); grid-gap: 1rem;  justify-items: center; }
section.information li { position: relative; background: var(--myWhite); border-radius: calc(var(--borderRadius) * 2.5); overflow: hidden; text-align: center; transition: 250ms; max-width: 18rem; } 
section.information li a { display: flex; flex-direction: column;  height: 100%; padding: 1rem; }
section.information li picture {  display: flex; border-radius: 2rem; }
section.information li picture img { max-width: 100%; border-radius: var(--borderRadius);}
section.information li:hover { background: var(--myLightYellow)}
section.information li h2 { font-size: clamp(1rem, 1.9vw, 1.2rem);  }
section.information li article {  flex-grow: 1; display: flex; flex-direction: column; margin-top: .5rem; }
section.information li span { display: block; font-size: .9rem; background: var(--myBlue) !important; margin-top: auto;  }
section.information + section.search form { border-top: none;}
section.information + section.search form h2 { margin: 2rem auto .5rem;}

/* ------------------ INFORMATION PAGE SINGLE ------------------ */
body.informatie.single section.introduction { margin-bottom: 0;}
body.informatie.single section.introduction + section { margin-top: 1rem;}
body.informatie.single section.search { display: none; }

section.faq { color: var(--myBlue); display: grid; grid-template-columns: 1fr 2fr; align-items: flex-start;  grid-gap: 1rem; }
section.faq h2 { font-weight: var(--font-bold); color: var(--myWhite); scroll-margin-top: 5rem; }
section.faq article label h3 { font-weight: var(--font-bold); margin: 0; font-size: 1rem; user-select: none}

section.faq > nav { color: var(--myWhite); font-size: 1rem;  position: sticky; top: 7rem; margin-top: .5rem; max-width: 10rem; }
section.faq > nav ul li {  margin-bottom: .05rem; display: flex;  }
section.faq > nav ul li a {  padding: .2rem 0; position: relative; cursor: pointer; }
section.faq > nav ul li a::after { content: ""; height: 2px; width: 100%; position: absolute; left: 0; bottom: 0.35rem; background: var(--myWhite); z-index: -1; border-radius: 1rem; transition: 250ms ease; transform-origin: left; }
section.faq > nav ul li a::after {background: var(--myWhite); transform: scale(0,1);  }
section.faq > nav ul li.active a::after,
section.faq > nav ul li a:hover::after { transform: scale(1,1);  }
section.faq > nav ul li.active a::after { background: var(--myYellow);}

.sub-search { width: 100%; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid rgba(255,255,255,.3); display: grid; grid-template-rows: auto auto 0fr; transition: grid-template-rows 350ms ease;; }
.sub-search.bare { border-top: none; grid-template-rows: auto 0fr;}
.sub-search input {  font-size: .8rem; width: 100%; border-radius: var(--halfBorderRadius); color: var(--myBlue);  padding: .5em;  } 
.sub-search input:focus { outline: 2px solid var(--myYellow);}
.sub-search input::placeholder { font-size: .8rem;}
.sub-search input[type=submit] { margin-top: .25rem; cursor: pointer; overflow: hidden; padding: 0 0.5em; transition: padding 350ms ease, opacity 250ms; background: var(--myYellow); opacity: 0.7; }
.sub-search input[type=submit]:hover { opacity: 1;}

.sub-search[data-active=true] { grid-template-rows: auto auto 1fr;}
.sub-search[data-active=true] input[type=submit] { padding: 0.5em;}
.sub-search.bare[data-active=true] { grid-template-rows: auto 1fr;}


section.faq > ul { display: grid; grid-template-columns: 1fr; justify-items: center; grid-gap: 1rem; }  
section.faq > ul > li {width: 100%; max-width: 38rem; scroll-margin-top: 5rem; }
section.faq > ul > li div  { display: grid; grid-template-rows: 0fr; transition: 500ms; }
section.faq > ul > li > h2 { margin-bottom: 0; }

section.faq > ul > li > div > ul > li { background: var(--myWhite);  box-sizing: border-box; margin-bottom: .35rem; border-radius: var(--halfBorderRadius); position: relative; overflow: hidden; --mainColor: var(--myBlue); }
section.faq > ul > li > div > ul > li.animate { animation: highlight 2s ease forwards; }

section.faq > ul > li > div > ul > li label {padding: 0.6rem 0.75rem 0.5rem; display: block; transition: 250ms ease; cursor: pointer; display: flex;align-items: center;  border-radius:  var(--halfBorderRadius); }
section.faq > ul > li > div > ul > li label::before, section.faq > ul > li > div > ul > li label::after { content: ""; width: 0.5rem; height: 2px;  background: var(--myBlue); display: block; position: absolute; right: 1rem; transform: translateX(50%) rotate(-45deg); transition: 250ms ease; border-radius: 100vmin; }
section.faq > ul > li > div > ul > li label::before { transform: translateX(-7%) rotate(45deg);  }

section.faq > ul > li > div > ul > li label:hover::before, section.faq > ul > li > div > ul > li label:hover::after { transform: none; height: 0.3rem; width: 0.3rem; border-radius: 50%;}
section.faq > ul > li > div > ul > li label:hover {background: var(--myBlue10); }

section.faq > ul > li > div > ul > li input:checked + article label {  border-radius:  var(--halfBorderRadius) var(--halfBorderRadius) var(--borderRadius) var(--borderRadius); background: var(--myBlue10); }
section.faq > ul > li > div > ul > li input:checked + article label::before, section.faq > ul > li > div > ul > li input:checked + article label::after { transform: translateX(50%) rotate(45deg); width: 0.5rem; height: 2px; border-radius: 100vmin; }
section.faq > ul > li > div > ul > li input:checked + article label::before { transform: translateX(-7%) rotate(-45deg); }

section.faq > ul > li > div > ul > li .grow {height: 0; overflow: hidden; transition: 500ms ease; }
section.faq > ul > li > div > ul > li .md {padding: 0.5rem 0.75rem 0.65rem; box-sizing: border-box;}
section.faq > ul > li > div > ul > li .md a { text-decoration: underline; }
section.faq > ul > li > div > ul > li .md h2 { font-size: 1.2rem;}
section.faq > ul > li > div > ul > li .md h3 { font-size: 1rem;}
section.faq > ul > li > div > ul > li .md ul { padding-left: 1em; list-style: initial; margin-bottom: 1.4em;}
section.faq > ul > li > div > ul > li .md ol { margin-bottom: 1.4em;}
section.faq > ul > li > div > ul > li .md strong { font-weight: var(--font-medium); }
section.faq > ul > li > div > ul > li .md em{ font-style: italic; }
section.faq > ul > li > div > ul > li .md *:last-child {margin-bottom: 0.25rem;}

section.plain.lost { background:  none; display: flex; flex-direction: column; align-items: center; }
section.plain.lost h2 { color: var(--myWhite);  font-size: 1.1rem;}
section.plain.lost > div { background: var(--myWhite); padding: 1rem; border-radius: var(--borderRadius); width: 100%;  margin-top: 1rem;}
section.plain .ilost { scroll-margin-top: 8rem;}
section.plain .ilost > div {  display: grid; grid-template-rows: 0fr; transition: 500ms; }
section.plain .ilost input { display: none; }
section.plain .ilost label:hover { text-decoration: underline; cursor: pointer;  }
section.plain .ilost label {  overflow: hidden; display: block; transition: 500ms; }
section.plain .ilost > div > div { overflow: hidden; }
section.plain .ilost  input:checked ~ div { grid-template-rows: 1fr; }
section.plain .ilost  input:checked ~ label { height: 0;}



/* --------------- BLOG PAGE COLLECT --------------- */
section.blogs {margin: 1rem auto; display: flex;flex-direction: column; }
section.blogs > ul { display: flex; justify-content: center;  width: calc(100% + 1rem); margin-left: -1rem; flex-wrap: wrap;}
section.blogs li.postcard { background: var(--myWhite); border-radius: var(--borderRadius); overflow: hidden; position: relative;  width: calc(100% / 3 - 1rem);  margin: 0 0 1rem 1rem; display: flex;flex-direction: column; min-width: 17.5rem;}
section.blogs li.postcard.hide { display: none;}
section.blogs li.postcard picture {width: 100%; position: relative;  height: 0; padding-bottom: 50%;}
section.blogs li.postcard img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;}
section.blogs li.postcard article { padding: 0rem 1rem 1rem;  display: flex; flex-direction: column; flex-grow: 1;}
section.blogs li.postcard article ul { display: flex; flex-wrap: wrap;  margin: 0.5rem 0 0.25rem;}
section.blogs li.postcard article ul li { padding: 0.15rem 0.25rem 0.1rem; background: var(--myBlue);  margin-right: 0.2rem; color: var(--myWhite); font-family: var(--headerFont);  text-transform: uppercase;  border-radius: var(--halfBorderRadius); font-size: 0.55rem; margin-bottom: 0.15rem; transition: 250ms ease; letter-spacing: 0.5px;  }
section.blogs li.postcard article > a  { align-self: flex-end; margin-top: auto;}
section.blogs li.postcard > a { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 2;} 
section.blogs li.postcard a:hover ~ article a.btn { background: var(--myMediumBrown);  } 
section.blogs li.postcard article time { font-family: var(--headerFont); text-transform: uppercase; font-weight: var(--font-bold);  font-size: 0.8rem; text-align: right; border-bottom: 1px solid var(--myBlue);  padding-bottom: 0.25rem; }
section.blogs li.postcard article h2 { margin-bottom: 0.25rem; font-size: 1rem;  }
section.blogs li.postcard article .md { padding-top: 0.5rem;  margin: 0.25rem 0 0.75rem; font-size: 0.7rem;}

section.blogs fieldset { display: inline-flex;  align-items: center; margin: 0 auto; flex-wrap: wrap;} 
section.blogs fieldset input { display: none; }
section.blogs fieldset h3 {margin: 0 0.5rem 1rem 0.5rem; color: var(--myWhite);  }
section.blogs fieldset div {margin: 0 0.5rem 1rem 0; }
section.blogs fieldset label { background: var(--myMediumGrey); cursor: pointer; border-radius: 100vmin;   position: relative;  padding: 0.25rem 0.75rem 0.15rem; user-select: none; font-family: var(--headerFont); font-size: 0.9rem; text-transform: uppercase;  color: var(--myLightGrey); transition: 250ms;}
section.blogs fieldset input:checked + label { background: var(--myMediumBrown);  color: var(--myWhite); }
section.blogs fieldset label:hover { background: var(--myWhite);  color: var(--myBlue);  }
section.blogs fieldset input:checked + label::before {opacity: 0;}

/* --------------- BLOG PAGE SINGLE --------------- */
section.content { display: flex; justify-content: space-between; max-width: 40rem; margin-top: 2rem; align-items: flex-start;}
section.content figure { height: 0; width: 100%; padding-bottom: 100%; border-radius: var(--borderRadius); overflow: hidden;  margin-bottom: 0.5rem;}
section.content article { width: calc(75% - 1rem); }
section.content article ul { list-style: initial; }
section.content article :is(h2, h3, h4) {font-size: 1rem; font-weight: var(--font-bold); }
section.content article h2 { font-size: 1.2rem; }
section.content article :is(ul,ol) {padding-left: 1em; margin-bottom: 1rem;}
section.content article :is(ul,ol) li {margin-bottom: 0.25rem;}

.nieuws section.introduction { margin-bottom: 0.5rem; }
.nieuws section.introduction article { max-width: 40rem; padding-top: 2rem; } 
.nieuws section.content { max-width: 30rem; margin-bottom: 5rem; --mainColor: var(--myWhite); margin-top: 0; }
.nieuws section.content article { width: 100%;}
.nieuws section.content article time {display: block; text-align: right;  text-transform: uppercase; font-family: var(--headerFont); font-weight: var(--font-bold); margin: -0.25rem 0 0.25rem; font-size: 0.8rem; color: var(--purple)}
.nieuws section.content article picture { height: 0; padding-bottom: 40%; width: 100%; position: relative; display: block; margin-bottom: 1rem;}
.nieuws section.content article picture img {position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; border-radius: var(--borderRadius);}
.nieuws section.content article img { width: 100%; }

section.content article nav.otherposts ul { display: flex; justify-content: space-between;  text-transform: uppercase; list-style-type: none; padding: 0; margin-top: 3rem;}
section.content article nav.otherposts ul a { font-weight: var(--font-bold); color: var(--purple); font-family: var(--headerFont); font-size: 1rem;}
section.content article nav.otherposts ul a:hover {color: var(--lightPurple)}

/* --------------- STANDARD PAGE --------------- */
section.plain { max-width: 40rem !important;  background: var(--myWhite); padding: 1rem; border-radius: var(--borderRadius); margin-top: 1rem;}
section.plain > article { margin-top:  0;}

/* --------------- TICKETS PAGE --------------- */
section.tickets { display: flex;flex-direction: column; align-items: center;  }
section.tickets h2 { font-size: clamp(1rem, 1.2vw, 1.4rem); position: relative; z-index: 2;}
section.tickets h2.snow::before { width: calc(100% - 2rem); transform: translateY(-0.6rem) scaleY(1.1); height: 1rem; }
section.tickets > ul {  margin: 8rem 0 4rem; width: 100%; align-items: flex-start; }
section.tickets .ticket { display: flex; flex-direction: column; align-items: center; background: var(--myWhite); border-radius: 3rem; max-width: 30rem; margin: 0 auto;   position: relative; box-sizing: border-box; padding: 1.5rem clamp(1.5rem, 2.5vw, 3rem) 1.5rem; height: auto; color: var(--myBlue);}
section.tickets .ticket picture img { width: 100%; user-select: none; }
section.tickets .ticket picture { position: absolute; top: 0; }
section.tickets .ticket.middle picture { transform: translateY(calc(-100% + 1.8rem)); width: 90%; max-width: 25rem;  left: 1.2rem; }

section.tickets .ticket ul.details {  display: grid;  grid-template-columns: 2fr 3fr; width: 100%; grid-gap: 0.5rem 1rem; margin: 2rem 0 0.5rem;  }
section.tickets .ticket ul.details strong { font-family: var(--headerFont); color: var(--myBlue);   text-transform: uppercase; letter-spacing: 0.5px; font-size: 0.73rem;}
section.tickets .ticket ul.details > li:nth-of-type(2) { grid-row: 2/3; }
section.tickets .ticket ul.details > li:nth-of-type(3) { grid-row: span 2 } 
section.tickets .ticket ul.details > li:nth-of-type(3) li { margin-bottom: 0.15rem; list-style: initial; margin-left: 1em; }
section.tickets .ticket :is(span, strong:not(span + strong)) { margin-top: auto; padding-top: 2rem; }
section.tickets .ticket > strong { font-size: 1.5rem; font-family: var(--headerFont); color: var(--myBlue);  margin: 0 0 0.5rem; }
section.tickets .ticket > span { margin-top: 1rem; font-size: 0.6rem; font-weight: var(--font-medium);  color: var(--myBlue50); }
section.tickets  ul a.btn { padding: 0.35rem 3rem 0.25rem; }

section.tickets .timeframes {  border-radius: 2rem; display: grid; place-items: center; scroll-margin-top: 5rem; background: var(--myWhite); }
section.tickets .timeframes img { width: 100%;}

section.ticketagenda { scroll-margin-top: 5rem; }
section.ticket { scroll-margin-top: 0;  }
section.map  { scroll-margin-top: 3rem; }

section.ticketagenda { overflow: hidden; margin-top: 0 !important;}
section.ticketagenda :is(h2, h3) { color: var(--myWhite);  margin-bottom: 0;}
section.ticketagenda nav li > h3 { font-size: 1.5rem; background: var(--myBlue); border-radius: 0.25rem; padding: 0.25rem 0.5rem 0rem; }
section.ticketagenda > a { color: var(--myWhite); text-decoration: underline; margin-top: 0.5rem;  display: inline-block; position: relative; z-index: 1; }
section.ticketagenda nav { position: relative; margin-top: -2rem; }

section.ticketagenda .tussen { background: var(--myWhite); color: var(--myBlue); z-index: 2; position: relative; padding: .5rem 1rem; border-radius: .9rem .5rem 0 0; display: flex; justify-content: center; align-items: center;  transform: translateY(1px);}
section.ticketagenda .tussen * { color: inherit;}
section.ticketagenda .tussen > a { max-width: 22rem; width: 100%; display: grid; grid-template-columns: auto 1fr;  grid-gap: 0 1rem; align-items: center; background: var(--myLightYellow);  padding: .5rem .75rem; border-radius: var(--borderRadius); transition: 350ms ease;}
section.ticketagenda .tussen > a * { margin: 0; }
section.ticketagenda .tussen > a h3 { margin-top: auto; }
section.ticketagenda .tussen > a:hover { background: var(--myMediumYellow); }
section.ticketagenda .tussen img { border-radius: 50%; max-width: 4.5rem; grid-row: span 2; }


section.ticketagenda nav ul { display: grid;--boxHeight: 6rem; grid-template: auto auto 1rem repeat(3, var(--boxHeight)) /  repeat(7, 1fr);   background: var(--myWhite);  grid-gap: 0.25rem}
section.ticketagenda nav ul.multi-month { grid-template: 1.75em auto 1rem repeat(3, var(--boxHeight)) 1fr 1rem var(--boxHeight) /  repeat(7, 1fr); }
section.ticketagenda nav ul.jan-only { grid-template: 1.75em 1fr 1rem repeat(2, var(--boxHeight)) /  repeat(7, 1fr); }
section.ticketagenda nav > ul { padding: .50rem 1rem 1rem; border-radius: 0 0 1rem 1rem; }
section.ticketagenda nav > ul > li { background: var(--myFaintGrey); position: relative;  }
section.ticketagenda nav ul li.day { background: var(--myBlue10); transition: 500ms;  }
section.ticketagenda nav ul li.day > :is(button, a) {  display: grid; place-items: center; cursor: pointer;  }
section.ticketagenda nav ul li.day > :is(button, a) > span { text-align: center; font-weight: var(--font-medium); display: flex; flex-direction: column; text-transform: uppercase; font-family: var(--headerFont);  color: var(--myBlue);  opacity: 0; transition: opacity 500ms;  user-select: none; }
section.ticketagenda nav ul li.day > :is(button, a) > span span { font-size: 2rem; }
section.ticketagenda nav ul li.day > :is(button, a) > em { position: absolute; font-family: var(--primaryFont); font-size: 0.6rem; right: 0.1rem; bottom: 0; transition: 500ms; }
section.ticketagenda nav ul li.day > :is(button, a) > em.korting  { right: unset; left: clamp(0.1rem, 0.5vw, 0.25rem); color: var(--myBrown);}
section.ticketagenda nav ul li :is(button, a) { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
section.ticketagenda nav ul li strong:not(.h4) { position: absolute; top: 0.25rem; right: 0.25rem; font-weight: var(--font-medium); font-size: 0.7rem; transition: opacity 500ms; }
section.ticketagenda nav ul li.inactive { opacity: 1; background: rgba(0,0,0,0.05); pointer-events: none;}
section.ticketagenda nav ul li.days em { display: block; text-align: center; font-family: var(--headerFont);  color: var(--myBlue); text-transform: uppercase; margin-right: 0.25rem; }
section.ticketagenda nav ul li.days em span { color: var(--myBlue) }
section.ticketagenda nav ul li.days em .small {display: none;}
section.ticketagenda nav ul li.full { grid-column: 1 / -1; background: none; }
section.ticketagenda nav ul li h3 { margin: 0.5rem 0 0; }
section.ticketagenda nav ul li .h4 { color: var(--myBlue);  text-align: center;  display: block; margin-bottom: 0; }


section.ticketagenda nav ul li.day[data-highlighted=true] { background: var(--myLightYellow);}
section.ticketagenda[data-has-highlights=true] nav ul li.day:not([data-highlighted=true]):hover { background: var(--myBlue10);} 

section.ticketagenda nav ul li.day:hover {background: var(--myYellow); }
section.ticketagenda nav ul li.day:hover em { color: var(--myBlue); }
section.ticketagenda nav ul li.day:hover :is(button, a) span { opacity: 1; }
section.ticketagenda nav ul li.day:hover strong{ opacity: 0;}

section.ticketagenda nav ul li.uitverkocht { background: var(--myInactiveGrey);  pointer-events: none;}
section.ticketagenda nav ul li.uitverkocht em { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); color: var(--myDisabledGrey); font-size: clamp(0.7rem, 1.2vw, .8rem); }

section.ticketagenda nav > img { position: relative; width: 100%;transform: translateY(1.15rem); pointer-events: none; user-select: none; }
section.ticketagenda nav > picture { position: absolute; top: 0; transform: translate(0, -50%); pointer-events: none; user-select: none; z-index: 3;  }
section.ticketagenda nav > picture img { max-width: 100%;}
section.ticketagenda nav > picture.theater { width: 12%; left: 40%; top: 3.5rem  }
section.ticketagenda nav > picture.tree { width: 3%;  }
section.ticketagenda nav > picture.tree.t1 { left: 85%; top: 1rem; width: 4%;   }
section.ticketagenda nav > picture.tree.t2 { left: 32%; top: 3.5rem; width: 5%;   }
section.ticketagenda nav > picture.tree.t3 { left: 82%; top: 4.5rem;  }
section.ticketagenda nav > picture.tree.t4 { left: 18%; top: 5rem;  }
section.ticketagenda nav > picture.tree2 { width: 5%; left: 60%; top: 3rem;  }
section.ticketagenda nav > picture.tree2.t2 { width: 4%; left: 75%; top: 2.2rem;  }
section.ticketagenda nav > picture.skier { top: 4rem; left: 78%; width: 10%; animation: ski 6s ease infinite alternate;  z-index: 5; }


body.tickets section.introduction { margin-bottom: 0 !important;}
body.tickets section.ticketagenda { margin-top: 0 !important;}
body.tickets section.ticketagenda nav ul li.day:hover {background: var(--myMediumGreen); }
body.tickets section.ticketagenda nav ul li.day:hover em,
body.tickets section.ticketagenda nav ul li.day span { color: var(--myWhite);}
body.tickets section.ticketagenda[data-has-highlights=true] nav ul li.day:hover,
body.tickets section.ticketagenda[data-has-highlights=true] nav ul li.day span { color: var(--myBlue);}
body.tickets section.ticketagenda[data-has-highlights=true] nav ul li[data-highlighted=true].day:hover,
body.tickets section.ticketagenda[data-has-highlights=true] nav ul li[data-highlighted=true].day span { color: var(--myWhite);}

div.popup { position: fixed; top: 0;left: 0; width: 100%; height: 100%; display: grid; place-items: center; z-index: 100; opacity: 0; pointer-events: none; transition: 500ms; }
div.popup[data-visible=true] { opacity: 1; pointer-events: all; }
div.popup .underlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%;background: rgba(0,0,0,0.9); }
div.popup article { max-width: 30rem; padding: 1rem; position: relative; border-radius: 1rem; position: relative; max-height: calc(100vh - 4rem); }
div.popup h2 { font-size: 1.4rem; margin-bottom: 0.5rem; position: relative; }
div.popup h2 span { color: var(--myMediumYellow);}
div.popup article > a { width: 100%; display: block; text-align: center; cursor: pointer; position: sticky; bottom: 0; z-index: 2; }
/* div.popup::after { content: ""; position: absolute; bottom: 0; height: 10rem; background: linear-gradient(to top, rgba(0,0,0,1), rgba(0,0,0,0)); width: 100%; pointer-events: none;} */
div.popup article > ul { list-style: numeric; padding-left: 1em; color: var(--myWhite); font-size: 1rem; margin: 1rem auto; }
div.popup article > ul > li[data-visible=false] { display: none; }
div.popup article > ul > li {margin-bottom: 0.5rem; }

 
section.other_tickets > article { display: flex; flex-direction: column; align-items: center; margin-top: 6rem; }
section.other_tickets ul { margin-top: 3rem; }
section.other_tickets ul li { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4rem;  max-width: 55rem; }
section.other_tickets ul li figure { position: relative; width: calc(40% - 1rem); height: 0; padding-bottom: 30%; overflow: hidden; border-radius: 0 0 1rem 1rem;  }
section.other_tickets ul li figure picture { border: 3px solid var(--myWhite); overflow: hidden; border-radius: 1rem; }
section.other_tickets ul li figure :is(picture, picture img) { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
section.other_tickets ul li figure > img { position: absolute; bottom: 0%; left: 0%; width: 100%; transform: translate(-0%, calc(100% - 2.2rem)); transition: 5s;   }
section.other_tickets ul li figure:hover > img {transform: translateY(calc(100% - 2rem)) scale(1.5) translateX(-12.5%) }
section.other_tickets ul li article { display: flex; flex-direction: column; align-items: flex-start; text-align: left; width:  calc(60% - 1rem); margin: 0; max-width: 30rem; }
section.other_tickets ul li.right { flex-direction: row-reverse; margin-left: auto; }

/* --------------- ACTIVITY PAGE --------------- */
body:is(.activiteit, .locatie) { --mainColor: var(--myWhite); }
body:is(.activiteit, .locatie) :is(h1, .h1) { font-size: clamp(2rem, 5vw, 2.5rem);}
section.details { display: flex; align-items: flex-start;  width: calc(100% - 14rem); margin-top: 5rem !important; flex-wrap: wrap;  }
section.details > section figure.sticky { display: none; }
section.details > section > :is(ul, h1, h2) {  max-width: 35rem; position: relative; }

section.details > section > ul { background: var(--myWhite); border-radius: 1.5rem; padding: 1rem;  display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: auto 1fr;  grid-gap: 1rem 0.5rem;  margin-bottom: 3rem; font-size: .8rem; }
section.details > section > ul.snow::before { width: calc(100% - 1.05rem); transform: translate(0.5rem, calc(-100% + 6px)) scaleY(1.6); height: 0; padding-bottom: 3%; }
section.details > section > ul :is(strong, a) { color: var(--myBlue); font-family: var(--headerFont); }
section.details > section > ul a { text-decoration: underline; text-underline-offset: 3px; }
section.details > section > ul a:hover { color: var(--myMediumBrown);}
section.details > section > ul > li:first-of-type { grid-column: -1/1; }
section.details > section > ul ul { list-style-type: none; margin-left: 0.5em;}
section.details > section > ul ul > li { display: flex; position: relative; align-items: center; }
section.details > section > ul ul > li:not(:last-of-type) { margin-bottom: 0.25rem; }
section.details > section > ul ul li::before { content: ""; width: 0.15rem; height: 0.15rem; background: var(--myBlue); position: absolute; border-radius: 100vmin; left: -0.5em; transform: translateY(-2px); }

figure.globe.sticky { position: sticky; top: 5rem; margin-left: auto; width: 13rem;  display: flex; flex-direction: column; align-items: center;  flex-shrink: 0; user-select: none;}
figure.globe > div { position: relative; background: var(--myWhite);  border-radius: 0 0 2rem 2rem; --mainColor: var(--myBlue); padding: 1rem; text-align: center; width: 100%; z-index: 1;  display: flex; flex-direction: column;  }
figure.globe > div h2 { font-size: 1.3rem;}
figure.globe > div .btn { padding: 0.35rem 1rem 0.25rem; font-size: .75rem;   margin-bottom: 0;}
figure.globe > div button.btn:last-of-type { line-height: 1.4; }
figure.globe > div button.btn:last-of-type span { color: var(--myWhite); transform: translate(2%, 1px); display: inline-block; }
figure.globe > div .btn.green { font-size: .95rem; margin-bottom: .25rem;}
figure.globe > div::before { content: ""; position: absolute; width: 100%; top: 0; left:0; background: transparent url('/img/globe_top.svg') no-repeat center center / contain; height: 2rem;  transform: translateY(calc(-100% + 1rem)); z-index: -1; }

figure.globe > figure { width: 85%; margin-bottom: -1rem; animation: none;  transform-origin: bottom; }
figure.globe > figure.multiple { cursor: pointer; }
figure.globe > figure[data-shake=true] { animation: shake 1000ms ease forwards;}

figure.globe > figure > img { width: 100%; pointer-events: none;}
figure.globe .tree { position: absolute; bottom: 25%; width: 7%;  }
figure.globe .tree img { width: 100%; }
figure.globe .tree.t1 { bottom: 33%; left: 15%;}
figure.globe .tree.t2 { bottom: 31.5%; left: 68%;}
figure.globe .tree.t3 { bottom: 30%; left: 63%;}
figure.globe .tree.alt { width: 40%; left: initial; right: 3%; top: -7%; transform: translateY(-50%); bottom: initial;  }
figure.globe :is(.images, canvas.snowy) { width: 10.45rem; height: 10.45rem; position: absolute; top: 0.3rem; left: 0; right: 0; margin: 0 auto; border-radius: 50%;  z-index: -1; overflow: hidden; clip-path: circle();}
/* figure.globe .images::before { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: radial-gradient(50% 50%, #FFD766 -10%, rgba(255,215,102,0.00) 100%); content: ""; animation: pulse 1s ease infinite alternate;} */
figure.globe .images :is(picture, picture img) { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; transition: 1000ms; pointer-events: none; user-select: none; }

figure.globe .images picture[data-visible=false] { opacity: 0; transform: rotate(-66deg); }
figure.globe .images picture[data-visible=true] {  opacity: 1; transform: rotate(0deg);pointer-events: all; }
figure.globe .images picture[data-visible=half] {  opacity: 0; transform: rotate(66deg); }

figure.globe.clickable figure { cursor: pointer; }
figure.globe.clickable figure iframe { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);  }


#lightbox { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.75); z-index: 999; display: none; place-items: center;  }
#lightbox[data-visible=true] {display: grid; }
#lightbox > div { width: calc(100% - 2rem); max-width: 60rem; position: relative; }
#lightbox > div > div { position: relative;  height: 0%; padding-bottom: 56.25%;}
#lightbox > div iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

button.wish {  margin-bottom: 0.25rem; position: relative; animation: none; }
button.wish:hover { background: var(--myMediumBrown);  }
button.wish::before, button.wish::after { content: ""; position: absolute; background: url('/img/star.svg') center center / cover no-repeat; width: 0.95rem; height: 0.95rem; left: 50%; transform: translate(-50%, 0px) rotate(calc(360deg / 5  * 0)); transition: 500ms }
button.wish::after { background: url('/img/star_fill.svg') center center / cover no-repeat; opacity: 0; }
button.wish:hover::before, button.wish:hover::after { transform: translate(-50%, -1px) rotate(calc(360deg / 5  * 1));   }

button.wish:active::before, button.wish:active::after { transform: translate(-50%, -1px) rotate(calc(360deg / 5 * 1)) scale(0.9); opacity: 1; }

button.wish.active::before { opacity: 0; animation: wishListStarred 1s ease forwards;  }
button.wish.active::after { opacity: 1; animation: wishListStarred 1s ease forwards;  }
button.wish.pre-active::after, button.wish.pre-active::before { transform: translate(-50%, -1px) rotate(calc(360deg / 5 * 1)) scale(1.1); opacity: 1; }
button.wish.pre-active::before { opacity: 0; }

figure.globe button.wish::before,figure.globe button.wish::after { left: .85rem; }

section.details > section { width: calc(100% - 14rem); position: relative; max-width: 41rem; }
section.details > section > article {  margin: 0;  font-size: clamp(.8rem, 1.5vw, 1rem);}
section.details > section > article .btn { display: inline-block; text-align: center;}
section.details > section > article .youtube { width: calc(100% - 2rem); margin: 1rem auto;  }
section.details > section > article > p > a.btn { display: block; max-width: 10rem; margin: 1rem auto; text-align: center; }
section.details > section h2#agenda, h2#open { scroll-margin-top: 5rem; }

section.details > section ul.openingstijden { display: flex; flex-direction: column; align-items: flex-start; max-width: 15rem; }
section.details > section ul.openingstijden li {  font-family: var(--headerFont); text-transform: uppercase;   font-size: 0.7rem;  justify-content: space-between; display: flex; width: 100%;  align-items: center; position: relative; }
section.details > section ul.openingstijden li span { color: var(--myWhite);  }


section.details > section > article { width: calc(100% - 2rem);}
section.details > section section.andere_avonturen { width: 100%; max-width: 100%; }
section.andere_avonturen { margin: 4rem 0; }
section.andere_avonturen ul { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); grid-gap: 1rem; }
section.andere_avonturen ul li:nth-of-type(4) { display: none; }

section.details > section > section:last-of-type { margin-bottom: 0 !important;}

/* --------------- ACTIVITYCARD --------------- */
li.activitycard { position: relative; border-radius: 1rem;  display: flex; flex-direction: column; }
li.activitycard :is(picture, picture img) { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 1rem 1rem 0 0;  }
li.activitycard :is(figure, figure .wish, article, article > a, article > p) { transition: 500ms;}
li.activitycard figure { height: 0; padding-bottom: 85%; border-radius: 1rem 1rem 0 0; }
li.activitycard figure::before, li.activitycard figure::after {content: ""; height: 0.6rem; bottom: 0; background: var(--myWhite); left: 0; width: 0.3rem; position: absolute; z-index: 1; pointer-events: none; }
li.activitycard figure::after {left: initial; right: 0; height: 0.4rem;  }
li.activitycard figure > span { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 2; }
li.activitycard figure picture { overflow: hidden;}
li.activitycard figure picture::after { content: ""; position: absolute; bottom: 0; width: 100%; height: 4rem; background: linear-gradient(to top, rgba(0,0,0,0.16), rgba(0,0,0,0));  }
li.activitycard figure > img { position: absolute; bottom: -1px; width: 100.11%; left: 0; pointer-events: none;  user-select: none;  }
li.activitycard figure .wish { position: absolute; right: 0.5rem; top: calc(100% - 1.1rem); width: 1.6rem; height: 1.6rem; background: var(--myBlue); display: grid; place-items: center; border-radius: 50%; z-index: 4;  cursor: pointer;}
/* li.activitycard figure div.expand { background: var(--myBlue); position: absolute; right: 0.5rem; top: calc(100% - 1.1rem); width: 1.6rem; height: 1.6rem; display: grid; place-items: center; border-radius: 50%; z-index: 2;  cursor: pointer; transform:  rotate(180deg); pointer-events: none; transition: 500ms; opacity: 0; border: 1px solid var(--myWhite);  } */
/* li.activitycard figure div.expand::before, li.activitycard div.expand::after { height: 2px; border-radius: 100vmin; width: 0.7rem; content: ""; position: absolute; background: var(--myWhite);  }  */
/* li.activitycard figure div.expand::before { transform: rotate(90deg); } */

li.activitycard article { background: var(--myWhite); padding: 1rem 0.5rem 0.5rem;  --mainColor: var(--myBlue); font-size: 0.65rem; margin-top: -1rem; display: flex; align-items: flex-start; flex-direction: column; border-radius: 0 0 1rem 1rem;  flex-grow: 1;}
li.activitycard article h2 {  font-size: .9rem; margin: 0 0 0.15rem;  max-width: calc(100% - 1.5rem);  z-index: 1; }
li.activitycard article > span { align-self: flex-end; font-size: 0.8rem; position: relative; z-index: 3;  max-height: 1.7rem; margin-top: auto; }
li.activitycard article > p { margin-bottom: 0.5rem;  color: var(--myBlack); max-height: 3.75rem; line-height: 1.15;}

li.activitycard picture img { transition: transform 500ms;}
li.activitycard > a { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 4;}
li.activitycard a:hover ~ figure picture img { transform: scale(1.03);}
li.activitycard a:hover ~ article .btn { background: var(--myMediumBrown);}


li.activitycard[data-dayopen='false'],
li.activitycard[data-open='false'],
li.activitycard[data-location='false'],
li.activitycard[data-insearch='false'],
li.activitycard[data-infilter='false'] { display: none; }

li.activitycard.no-snow::before, li.activitycard.no-snow::after { display: none; }


li.activitycard figure span::after {content: ""; background: center center / contain no-repeat; position: absolute; bottom: 0.8rem; left: 2.1rem; height: 2.5rem; width: 2.5rem;  }
li.activitycard figure span.icon_helter::after {content: ""; background-image: url(/img/icon_helter.png); left: 2.1rem;   }
li.activitycard figure span.icon_carrousel::after {content: ""; background-image: url(/img/icon_carrousel.png);  bottom: 1rem; left: 2.1rem;   }
li.activitycard figure span.icon_oliebol::after {content: ""; background-image: url(/img/icon_oliebol.png); left: 3rem; }
li.activitycard figure span.icon_snacks::after {content: ""; background-image: url(/img/icon_snacks.png); left: 3rem; height: 2.2rem; width: 2.2rem;  }
li.activitycard figure span.tree::after {content: ""; background-image: url(/img/tree.png); left: 2rem; height: 2.2rem; width: 2.2rem;  }
li.activitycard figure span.icon_snowbattle::after {content: ""; background-image: url(/img/icon_snowbattle.png);  bottom: -0.9rem; left: 3rem; height: 4rem; width: 4rem;  }
li.activitycard figure span.icon_tent::after {content: ""; background-image: url(/img/icon_tent.png); left: 2.6rem; height: 2.2rem; width: 2.2rem;  }
li.activitycard figure span.icon_waffle::after {content: ""; background-image: url(/img/icon_waffle.png);  bottom: 0.6rem; left: 2.6rem; height: 2.2rem; width: 2.2rem;  }

li:is(.sl,.sr,.ml,.mr)::before, li.sr::after { content: ""; position: absolute; pointer-events: none; top: 0; background-position: center center; background-size: contain; background-repeat: no-repeat; z-index: 2; }
li.sl::before { --size: 2; background-image: url('/img/btnsnow_left.svg'); transform: translate(-15%, -25%);  width: calc(1.4rem * var(--size)); height: calc(0.75rem * var(--size));  }
li.sr::after { --size: 2; background-image: url('/img/btnsnow_right.svg'); transform: translate(10%, -25%);  width: calc(2.3rem * var(--size)); height: calc(0.85rem * var(--size)); right: 0; }
li.ml::before { --size: 0.7; background-image: url('/img/btnsnow_ml.svg'); transform: translate(-1%, -25%);  width: calc(12.05rem * var(--size)); height: calc(2.3rem * var(--size)); }
li.mr::before { --size: 0.9; background-image: url('/img/btnsnow_mr.svg'); transform: translate(5%, -25%);  width: calc(8.3rem * var(--size)); height: calc(2.15rem * var(--size)); right: 0; }

/* --------------- ONTDEK COLLECT PAGE --------------- */
section.activiteiten { display: flex; align-items: flex-start;  }
section.sticky { position: sticky; top: 7.5rem; width: 9rem;  } 
.programma section.sticky { width: 11rem; }
.programma ul.shop { width: calc(100% - 12rem);}
section.sticky fieldset { background: var(--myWhite); border-radius: 0 0 1rem 1rem; position: relative; margin-top: 0.8rem; }
section.sticky img.snow { position: absolute; width: 100%; transform: translateY(-100%); top: 2px; }
section.sticky .tree { position: absolute; width: 1.5rem; top: -3rem; left: -10rem }
section.sticky .tree.t4 { left: 82%; top: -2.7rem }
section.sticky .tree.t3 { left: 55% }
section.sticky .tree.t2 { left: 1%; }
section.sticky .tree.t1 { left: 12%; top: -3.4rem; }
section.sticky .tree img { width: 100%; }
section.sticky h2 { font-size: 1rem;  text-align: left; width: calc(100% - 1rem ); margin: 0 auto 0.5rem; }
section.sticky input { display: none; }
section.sticky #reset { position: absolute; bottom: 0; font-weight: var(--font-light);  color: var(--myWhite); font-size: 0.7rem; align-self: center; margin: 0 auto; z-index: -1;  cursor: pointer; transition: 500ms ease;  pointer-events: none; padding: 0.25rem 0.5rem;  border-radius: 100vmin; }
section.sticky #reset:hover { background: var(--myWhite); color: var(--myBlue);  }
section.sticky[data-show=true] fieldset #reset { transform: translateY(calc(100% + 0.35rem)); pointer-events: all; z-index: 0; }

section.sticky ul { margin: 0 auto; width: calc(100% - 1rem); display: flex; flex-direction: column; align-items: flex-start; max-height: calc(100vh - 12rem);}
section.sticky ul li { margin-bottom: 0.5rem; display: flex; }
.programma section.sticky > fieldset >  ul { overflow: scroll;}
.ontdek:not(.single) section.sticky { margin-top: 3rem;}
.ontdek section.sticky fieldset { padding-bottom: .25rem;}
.ontdek section.sticky ul li { margin-bottom: 0.25rem; }
section.sticky ul li .btn { background: var(--myLightGrey); cursor: pointer;  width: 100%; margin-bottom: 0;  padding: var(--btnPaddingNarrow);  color: var(--myBlue);  font-weight: var(--font-medium);  }
section.sticky ul li .btn:hover { background: var(--myBlue10); }
.ontdek section.sticky ul li .btn { font-size: .75rem;}
.programma section.sticky > fieldset >  ul li .btn { color: var(--myWhite);}
section.sticky ul li input:checked + .btn { background: var(--myYellow); }
section.sticky ul li .btn.active  { background: var(--myBlue); }
section.sticky fieldset + div { background: var(--myWhite); border-radius: 1rem; padding: 0.5rem 0.25rem; margin-top: 2rem; }
section.sticky fieldset + div .btn.active { background: var(--myYellow) }
section.sticky fieldset + div h2 { margin-top: 0.5rem; }

fieldset.filter ul.programma > li { position: relative; display: flex; flex-direction: column;  width: 100%; align-items: flex-start; }
fieldset.filter ul.programma > li > .h3 { width: 100%;  margin-bottom: 0;}
fieldset.filter ul.programma > li > .h3 h3 { background: var(--myBlue); width: 100%; position: relative; z-index: 1; margin: 0; font-size: 0.8rem; padding: 0.45rem 1rem 0.25rem .8rem;}
fieldset.filter ul.programma > li > .btn { background: var(--myBlue);}
fieldset.filter ul.programma > li > .h3 h3.btn { cursor: initial;}
fieldset.filter ul.programma > li > ul { margin: 0; border: 2px solid var(--myBlue); width: 100%; border-radius: 0 0 1rem 1rem; border-top: none; transition: 500ms; padding: 1.5em 0.5rem 0;  margin-top: -1em; font-family: var(--headerFont); text-transform: uppercase; letter-spacing: 0; }
fieldset.filter ul.programma > li > ul > li  {margin-bottom: 0.25rem; width: 100%; }
fieldset.filter ul.programma > li > ul > li > label { position: relative; align-items: center; padding-right: .5rem; width: 100%; cursor: pointer; user-select: none; display: flex;  font-size: .7rem; letter-spacing: 0;}
fieldset.filter ul.programma > li > ul > li > label::before { content: ''; position: absolute; right: 0; width: 0.5rem; height: 0.5rem; border: 1px solid var(--myBlue); border-radius: 0.15rem; transition: 250ms ease;  }
fieldset.filter ul.programma > li > ul > li > label:hover::before { background: var(--myBlue)}
fieldset.filter ul.programma > li > ul > li > input:checked + label::before { background: var(--myYellow); }

fieldset.filter li.sub.age-filter:not([data-current='familie']) ~ li.sub:is(.lengtes, .leuk-voor) { display: none; }



section.sticky > nav.tickets ul {width: 100%; }
section.sticky > nav.tickets ul li { position: absolute; width: 100%; opacity: 0; pointer-events: none; transition: 500ms; }
section.sticky > nav.tickets ul li[data-visible=true] { opacity: 1; pointer-events: all;  margin-top: 0.5rem;}
section.sticky > nav.tickets ul li .btn { background: var(--myMediumGreen); font-size: 0.75rem; text-align: center; color: var(--myWhite);}
.programma section.sticky { z-index: 101;}


section.sticky .umlaut::before, section.sticky .umlaut::after  { background: var(--myWhite); }
section.sticky .select { padding: 0; }
section.sticky .select select {all:unset;  position: absolute; top: 0; left: 0; width: 100%; height: 100%; max-height: 1.8rem; border-radius: 100vmin; cursor: pointer;  display: none; font-size: 0.8rem;}
.ontdek section.sticky .select select { display: block; opacity: 0; }
section.sticky .select select:is(#time,#location) { display: block; }
section.sticky .select select option { background: var(--myBlack); color: var(--myWhite);}
section.sticky .select > :is(label, h3) {padding: 0.45rem 1rem 0.35rem 0.7rem; font-size: 0.8rem; z-index: 1; background: var(--myBlue); border-radius: 1rem; width: 100%; pointer-events: none;  display: flex; align-items: center; position: relative; font-weight: var(--font-bold);}
section.sticky .select > :is(label, h3) span + span { display: none; }
section.sticky .select:is(.time, .location) > :is(label, h3) > span:first-of-type { display: none; }
section.sticky .select:is(.time, .location) > :is(label, h3) > span:last-of-type { display: block; }
section.sticky .select label.mobile { display: none; }
section.sticky .select > label::before, section.sticky .select > label::after { content: ""; position: absolute; width: 0.5rem; height: 2px; border-radius: 100vmin; background: var(--myWhite); transform: translate(-0.5rem,-2px) rotate(45deg); right: 0.3rem; transition: 250ms;}
section.sticky .select > label::before {transform: translate(-0.2rem,-2px) rotate(-45deg);  }

section.activiteiten ul.shop > p { color: var(--myWhite); width: calc(100% - 10rem); margin-left:  auto; font-size: 0.7rem; margin-bottom: 1.5rem; font-weight: var(--font-thin); position: absolute; top: 0; left: 0; transform: translateY(calc(-100% - 0.75rem)); }
section.activiteiten ul.shop > p > span:first-of-type { font-weight: var(--font-medium);}
ul.shop { display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); grid-gap: 1rem;  position: relative; width: calc(100% - 10rem); margin-left: auto;  scroll-margin-top: 7.5rem; color: var(--myWhite);}
ul.shop_categories { display: none; }

body.ontdek:not(.single) ul.shop { display: none; }
body.ontdek ul.shop_categories { display: flex !important; flex-direction: column; position: relative; }
body.ontdek ul.shop_categories > li { max-width: 100%;}
body.ontdek ul.shop_categories > li:has(.slider > ul > li:only-child) { display: none; }
body.ontdek ul.shop_categories > li > p { display: none; }
body.ontdek ul.shop_categories li.activitycard { display: flex; min-width: 0; width: calc(100% / 3 - (2rem / 3)); }
body.ontdek ul.shop_categories li.activitycard[data-dayopen="false"], body.ontdek ul.shop_categories li.activitycard[data-open="false"], body.ontdek ul.shop_categories li.activitycard[data-location="false"], body.ontdek ul.shop_categories li.activitycard[data-insearch="false"], body.ontdek ul.shop_categories li.activitycard[data-infilter="false"] { display: none; }

body.ontdek ul.shop_categories .buttons { width: calc(100% - 1rem);  }
body.ontdek ul.shop_categories .swipeslider { max-width: calc(var(--maxWidth) - 10rem);}
body.ontdek ul.shop_categories > li > .btn { display: block; margin: 1rem auto 2rem; width: max-content;}
body.ontdek ul.shop_categories > li:last-of-type > .btn { margin-bottom: 0;}


/* RECOMMENDATIONS */
body[data-age="no-preference"] section.recs { display: none; }
body[data-age="familie"] section.recs ul .filter_familie { display: flex; }
body[data-age="date-night"] section.recs ul .filter_date-night { display: flex; }
body[data-age="vriendengroep"] section.recs ul .filter_vriendengroep { display: flex; }
section.recs { color: var(--myWhite); display: flex; flex-direction: column; margin: -1rem auto 8rem !important;}
body.ontdek section.recs { margin-bottom: 6rem !important;}
section.recs > .btn { align-self: center; margin-top: .5rem; }
.swipeslider { position: relative; display: flex; align-items: center; justify-content: center; }
.swipeslider .slider { overflow: auto;scroll-snap-type: x mandatory; width: calc(100% + .75rem); flex-shrink: 0; margin-left: auto;  padding: 1rem .75rem 0 0; margin: -1rem -0.75rem 0 0; scroll-behavior: smooth; }
.swipeslider .slider ul li { flex-shrink: 0; width: calc(100% / 4 - (3rem / 4));  scroll-snap-align: start;  display: block;  display: none;  }
.swipeslider .slider ul  { display: flex; gap: 1rem;  }

.swipeslider .buttons { position: absolute; width: calc(100% + 6rem);  display: flex; align-items: center; justify-content: space-between;   z-index: 4; pointer-events: none;  transition: opacity 500ms; opacity: 1;  }
.swipeslider .buttons button {  --_size: clamp(1.2rem, 2vw, 2rem); height: var(--_size); width: var(--_size); border-radius: 50%; display: flex; align-items: center; justify-content: center;  cursor: pointer; background: var(--myWhite); box-shadow: var(--dropShadow); position: absolute; top: 50%; transform: translateY(-100%); left: 0;  user-select: none; border: 2px solid transparent; transition: 250ms; pointer-events: all; opacity: 1; cursor: pointer;}
.swipeslider .buttons button span { font-size: clamp(0.8rem, 1.5vw, 1rem);  color: var(--myBlue); transform: translateY(5%);  font-weight: var(--font-bold); transition: 450ms;}
.swipeslider .buttons button + button { left: unset; right: 0;  }
.swipeslider .buttons button:hover { background: var(--myMediumBrown); color: var(--myWhite);}
.swipeslider .buttons button::before { content: "↪"; display: block; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(-90deg); color: var(--myBlue); font-size: 1rem;   transition: 450ms; opacity: 0; font-weight: var(--font-bold);}
.swipeslider .buttons button:first-of-type:before { content: "↩";  transform: translate(-50%, -50%) rotate(90deg);}

.swipeslider[data-scrollable=left] .buttons button:last-of-type span { opacity: 0; transform: translateY(5%) rotate(-180deg);}
.swipeslider[data-scrollable=left] .buttons button:last-of-type::before { opacity: 1; transform: translate(-50%, -65%) rotate(-180deg); }
.swipeslider[data-scrollable=right] .buttons button:first-of-type span { opacity: 0; transform: translateY(5%) rotate(180deg);}
.swipeslider[data-scrollable=right] .buttons button:first-of-type::before { opacity: 1; transform: translate(-50%, -65%) rotate(180deg); }


body.ontdek ul.shop_categories .swipeslider .buttons button:last-of-type { transform: translate(calc(1.5rem + 100%), -100%);  }

/* PROGRAM SEARCH */
section.activiteiten .search { position: absolute; right: 0; top: -0.5rem; transform: translateY(-100%); max-width: 15rem; }
section.activiteiten fieldset .search { display: none; }
section.activiteiten .search input { padding: .2rem 1.5rem .2rem 1.5rem; display: block; font-size: 16px; border-radius: 0.25rem; max-width: 10rem; transition: max-width 500ms; }
section.activiteiten .search input:focus { outline: 2px solid var(--myYellow);  }
section.activiteiten .search input.desktop:not(:focus) { max-width: 10rem !important;}
section.activiteiten .search input:not(:placeholder-shown) + span span { opacity: 0;} 
section.activiteiten .search input:not(:placeholder-shown) + span button { opacity: 1; pointer-events: all; }
section.activiteiten .search input::placeholder { opacity: 0; }

section.activiteiten .search > span { position: absolute; top: 1px; left: 0; width: 100%; height: 100%; display: flex; align-items: center; padding-left: 1.5rem; opacity: 0.7;  pointer-events: none; }
section.activiteiten .search > span::before, section.activiteiten .search > span::after { content: ""; display: block; position: absolute; }
section.activiteiten .search > span::before { height: 2px; width: 0.4rem;  left: 0.75rem; transform: translate(-2px, 3px) rotate(45deg) translateX(0.05rem);  background: var(--myBlue); } 
section.activiteiten .search > span::after {border-radius: 50%; border: 2px solid var(--myBlue);  height: 0.45rem; width: 0.45rem; left: 0; transform: translate(0.25rem, -3px); }  

section.activiteiten .search button { position: absolute; height: 100%; width: 1.4rem; right: 0; display: flex; align-items: center; cursor: pointer; opacity: 0; border-radius: 0.25rem; transition: 500ms;}
section.activiteiten .search button:hover { background: var(--myBlue10);}
section.activiteiten .search button::before, section.activiteiten .search button::after { position: absolute; content: ""; display: block; height: 2px; background: var(--myBlue); width: 0.7rem; transform: rotate(45deg); right: 0.35rem; border-radius: 1rem;}
section.activiteiten .search button::after { transform: rotate(-45deg); }

section.activiteiten .search div.invisible { position: absolute; top: 0; left: 0; width: auto; height: 100%; margin-left: 1.5rem; margin-right: 1.2rem;  opacity: 0; pointer-events: none;}

fieldset.filter .agendafilter { width: 100%; border: 2px solid var(--myBlue);  border-radius: 0 0 1rem 1rem; margin-top: -1rem; padding: 1rem 0 0.5rem; }
fieldset.filter h3.date { color: var(--myWhite);  background: var(--myBlue); padding: 0.45rem 1rem 0.25rem; font-size: 0.8rem; letter-spacing: 0.5px; border-radius: 100vmin; }
fieldset.filter strong.info { color: var(--myBlue); }
fieldset.filter .agendafilter h4 { border-radius: 0.25rem; padding: 0.25rem 0.35rem 0.1rem; font-size: 0.8rem;  font-family: var(--primaryFont); font-weight: var(--font-medium); font-size: 0.6rem; background: var(--myBlue); color: var(--myWhite);  width: calc(100% - 0.5rem); margin: 0.75rem auto 0; }
fieldset.filter .agendafilter h4:nth-of-type(1) { margin-top: 0.25rem; }

fieldset.filter .agendafilter ul { display: grid; grid-template-columns: repeat(7, 1fr); grid-gap: 2px; width: calc(100% - 1rem);  }
fieldset.filter .agendafilter ul.weekdays li { display: flex; justify-content: center; margin: 0.15rem 0 0.25rem; }
fieldset.filter .agendafilter ul.weekdays li strong { font-size: 0.55rem;  }

fieldset.filter .agendafilter ul.calendar li { height: 0; margin: 0; padding-bottom: 100%; background: var(--myLightGrey); border-radius: 2px;  position: relative;  }
fieldset.filter .agendafilter ul.calendar li.empty { pointer-events: none;}
fieldset.filter .agendafilter ul.calendar li > * { position: absolute; font-size: 0.45rem; font-weight: var(--font-bold);  border-radius: 2px; line-height: 2;}
fieldset.filter .agendafilter ul.calendar li label { cursor: pointer; position: absolute;  display: grid; place-items: center; text-align: center; width: 100%; height: 100%; transition: 250ms;  color: var(--myBlue); user-select: none; font-size: .51rem !important; }
fieldset.filter .agendafilter ul.calendar li label.disabled { cursor: initial; pointer-events: none; color: var(--myDisabledGrey)}
fieldset.filter .agendafilter ul.calendar li input:checked ~ label { background: var(--myYellow);  color: var(--myBlue); } 
fieldset.filter .agendafilter ul.calendar li label:hover { background: var(--myBlue10); } 

body:is(.programma, .locatie) section.sticky .agendafilter > button.btn { display: none;}
.en fieldset.filter .agendafilter ul.weekdays li strong { font-size: 0.42rem; }

section.locatie_optredens.sticky { position: relative; top: initial; max-width: 17.25rem; width: 100%; margin-top: 3rem; }
section.locatie_optredens.sticky .tree { left: initial; }
section.locatie_optredens .select { display: none; }
section.locatie_optredens .agendafilter { border: none; display: grid; grid-template-columns: 1fr; grid-template-rows: 1.05rem 1rem 1fr; grid-auto-flow: column; }
section.locatie_optredens .agendafilter h4 {margin: 0 auto !important;}
section.locatie_optredens fieldset { max-width: 20rem; }
section.locatie_optredens fieldset h2 { margin: 0.5rem 0.5rem 0.1rem; color: var(--myBlue); }
section.locatie_optredens fieldset.filter .agendafilter ul.calendar li label { font-size: clamp(.7rem, 1vw, .8rem);}
section.locatie_optredens > h2 {font-size: clamp(1.2rem, 4vw, 1.4rem);   margin: 1rem 0 0; }
section.locatie_optredens img.snow { transform: translateY(-100%) scale(-1, 0.25); transform-origin: bottom; }


/* --------------- OPENINGS TIMES PAGE --------------- */
section.openingstijden { background: var(--myWhite); padding: 1rem; border-radius: var(--borderRadius); overflow: auto;  color: var(--myBlue); --ownColor: var(--myBlue); --rowHeight: 1.4rem; --rowSpacing: 0.6rem;  --_min-width: 35rem;  }
section.openingstijden ul.times {  min-width: var(--_min-width); z-index: 2; color: inherit;}
section.openingstijden ul.bars { color: inherit;}
section.openingstijden ul.bars li  {  min-width: calc(var(--_min-width) + 9rem); color: var(--ownColor);}
section.openingstijden ul.times { display: flex; margin-left: 8.5rem; justify-content: space-between; width: calc(100% - 9rem);  }
section.openingstijden ul.times li { font-size: 0.6rem; font-weight: var(--font-bold); position: relative;  height: .8rem;  color: inherit;}
section.openingstijden ul.times li span { position: absolute; left: 0; transform: translateX(-50%);  color: inherit;}
section.openingstijden ul.times li::before { height: calc((var(--rowHeight) + var(--rowSpacing)) * var(--total-days)); width: 1px; position: absolute; content:""; left: 50%; background: var(--myBlue10); top: .8rem;}

section.openingstijden ul.bars li { display: grid; grid-template-columns: 8rem 1fr;  padding: calc(var(--rowSpacing) / 2) 0.5rem; align-items: center;  }
section.openingstijden ul.bars li em { transform: translateY(1px); font-weight: var(--font-medium); color: inherit;}
section.openingstijden ul.bars li:nth-of-type(odd) { background: var(--myBlue10Opaque);}
section.openingstijden ul.bars li .bar { height: var(--rowHeight);  position: relative;  display: flex; align-items: center;  --_bg: var(--myBlue); pointer-events: none;}
section.openingstijden ul.bars li .bar:hover { --_bg: var(--myGreen); }
section.openingstijden ul.bars li .bar::after { position: absolute; height: 100%; left: var(--offset-left); width: var(--length); background: var(--_bg); border-radius: 100vmin; content: "";   transition: 350ms ease; pointer-events: all;}
section.openingstijden ul.bars li .bar i { position: absolute; height: 100%; left: var(--offset-left); width: var(--length); background: var(--myBlue); border-radius: 100vmin; content: "";   transition: 350ms ease, z-index 0s; pointer-events: all; z-index: 2; }
section.openingstijden ul.bars li .bar span {  z-index: 2; display: inline-block; position: absolute; left: .25rem;  transform: translateY(1px);  color: var(--myWhite); user-select: none;   white-space: nowrap; font-style: normal;}
section.openingstijden ul.bars li .bar .tooltip { margin: 0; position: absolute; top: 0; transform: translate(-50%, calc(-100% + 0.25rem));   background: var(--myWhite);  left: 50%; padding: .25em .55em;  border-radius: var(--halfBorderRadius); color: var(--myBlue); filter: drop-shadow(1px 2px 2px  rgba(0,0,0,0.4));  pointer-events: none; opacity: 0; transition: 350ms ease;  white-space: nowrap;}
section.openingstijden ul.bars li .bar:hover .tooltip { transform: translate(-50%, calc(-100% - 0.5rem)); opacity: 1; }
section.openingstijden ul.bars li .bar .tooltip::before { content: ""; width: .5rem; height: .5rem; position: absolute; bottom: 0; left: 50%; transform: translate(-50%, 50%) rotate(45deg);  background: var(--myWhite);}
section.openingstijden ul.bars li[data-disabled=true] { color: var(--myMediumGrey);}
section.openingstijden ul.bars li[data-disabled=true] .bar { --_bg: var(--myMediumGrey); pointer-events: none; opacity: .8;  }
section.openingstijden ul.bars li[data-disabled=true] .bar::after { pointer-events: none; }
section.openingstijden ul.bars li[data-disabled=true] .bar span:not(.tooltip) { color: var(--myLightGrey);}
section.openingstijden ul.bars li .bar span.openingtimes { margin-left: var(--offset-left); padding-left: .25rem;}

section.openingstijden:not(.type_activity) ul.bars li .bar i span:not(.inside) {  right: -.25rem; left: unset; top: 50%;  transform: translate(90%, -50%);  color: var(--myBlue); background: var(--myWhite); z-index: 5; padding: 0.15em .2em 0.0em; opacity: 0;  pointer-events: none; font-size: .65rem; border-radius: var(--halfBorderRadius);   transition: 350ms ease;}
section.openingstijden:not(.type_activity) ul.bars li .bar i:hover { z-index: 5; }
section.openingstijden:not(.type_activity) ul.bars li .bar i:hover span:not(.inside){ opacity: 1; transform: translate(100%, -50%);   }
section.openingstijden:not(.type_activity) ul.bars li .bar i span:not(.inside).left { right: unset; left: -.25rem; transform: translate(-90%, -50%); }
section.openingstijden:not(.type_activity) ul.bars li .bar i:hover span:not(.inside).left { transform: translate(-100%, -50%); }
section.openingstijden:not(.type_activity) ul.bars li .bar i span.inside { color: var(--myWhite); top: 50%; transform: translateY(-40%);   padding-left: 0.25rem;}

body.activiteit section.openingstijden ul.bars li[data-disabled=true] { display: none;}
body.activiteit section.openingstijden { background: none; padding: 0; overflow: hidden; margin: 3rem 0; --rowHeight: 1rem; --rowSpacing: 0.6rem;   }
body.activiteit section.openingstijden div { background: var(--myWhite); padding: 1rem; border-radius: var(--borderRadius);  overflow: auto; color: inherit;}
body.activiteit section.openingstijden ul.bars li .bar { --_bg: var(--myLightGrey); opacity: 1;  }
body.activiteit section.openingstijden ul.bars li .bar:hover { --_bg: var(--myGreen);}
body.activiteit section.openingstijden ul.times { min-width: 25rem;}
body.activiteit section.openingstijden ul.bars li { min-width: calc(25rem + 9rem); }
body.activiteit section.openingstijden ul.bars li .bar i { position: absolute; height: 100%; left: var(--event-offset-left); width: var(--event-length); background: var(--myBlue); border-radius: .25rem; content: "";   transition: 350ms ease, z-index 0s; pointer-events: all; z-index: 2;   }
body.activiteit section.openingstijden ul.bars li .bar::after { opacity: .8;}
body.activiteit section.openingstijden ul.bars li .bar:hover { opacity: 1;}
body.activiteit section.openingstijden ul.bars li .bar:hover i { opacity: 0.3;}
body.activiteit section.openingstijden ul.bars li .bar i:hover { opacity: 1; z-index: 3; }
body.activiteit section.openingstijden.type_activity ul.bars li .bar:hover i { opacity: 0;}

body.activiteit section.openingstijden ul.bars li .bar i:only-of-type { opacity: 1;}
section.openingstijden:not(.type_activity) ul.bars li .bar i:only-of-type span.left { opacity: 1; background: none; display: inline-block; transform: translate(-100%, -50%) ;}
section.openingstijden:not(.type_activity) ul.bars li .bar i:only-of-type span:not(.left, .inside) { opacity: 1; background: none; display: inline-block; transform: translate(100%, -50%) ;}


body.activiteit .ticketagenda nav ul { --boxHeight: 5rem }
body.activiteit .ticketagenda { padding-top: 2rem; margin-top: 3rem; }
body.activiteit .ticketagenda li.day { color: var(--myBlue); }
body.activiteit .ticketagenda li.day * { color: inherit;}
/* body.activiteit .ticketagenda > a { display: none; } */
body.activiteit section.ticketagenda .tussen > a { pointer-events: none; }
body.activiteit section.ticketagenda nav ul li.day > :is(button, a) > span {font-size: .6rem;}
body.activiteit section.ticketagenda nav ul li.day > :is(button, a) > span span { font-size: 1rem;}


/* --------------- DAY PAGE --------------- */
body.day section { scroll-margin-top: 5rem; }
section.openingstijden.day ul.bars li > a:first-of-type { font-weight: var(--font-bold); transition: color 250ms; }
section.openingstijden.day ul.bars li > a:first-of-type:hover { color: var(--myMediumBrown);}
section.openingstijden.day ul.bars li .bar:hover { --_bg: var(--myMediumBrown); }
section.openingstijden.day ul.bars li .bar span { position: absolute; white-space: nowrap; color: var(--myBlue); font-size: .75rem;}
section.openingstijden.day ul.bars li .bar span.white { color: var(--myWhite);}
section.openingstijden.day ul.bars li .bar span.left {  margin-left: calc(var(--offset-left) + var(--_length) + .5rem);  }
section.openingstijden.day ul.bars li .bar span.right {  margin-left: calc(var(--offset-left) - .5rem);  transform: translateX(-100%); }
section.openingstijden.has-responsive-stripes ul.times li::before { height: var(--_stripe-height); }

section.search.day { text-align: center; }
section.search.day .sub-search { max-width: 30rem; margin: 0 auto 1rem;  padding-top: 0; }
section.search.day .sub-search input[type="submit"] { max-width: 15rem; margin-left: auto; margin-right: auto; }

/* --------------- LOCATION PAGE  --------------- */
.locatie-optredens h2 { font-size: 1.4rem; margin: 2rem 0 0; }
section.openingstijden.location { --mainColor: var(--myBlue); --_min-width: 15rem; margin-top: .5rem; display: none; }
section.openingstijden.location[data-visible=true] { display: block; }
body.locatie fieldset.filter .agendafilter ul.calendar li.unavailable { pointer-events: none; color: var(--myDisabledGrey);}
body.locatie fieldset.filter .agendafilter ul.calendar li.unavailable label { color: inherit;}
body.locatie fieldset.filter .agendafilter ul.calendar li input:checked + label { pointer-events: none;}


/* --------------- SEARCH PAGE --------------- */
body.search section.introduction { margin-bottom: 0;}
section.search { color: var(--myWhite); margin-top: 0 !important; }
section.search .input { display: flex; justify-content: center; margin-bottom: 1rem; }
section.search input { color: var(--myBlue); font-size: 1rem;  padding: .5em; width: 100%; max-width: 30em; border-radius: var(--halfBorderRadius); }
section.search input:focus { outline: 2px solid var(--myYellow)}

div#search_results > p:first-of-type { padding-bottom: .75rem; border-bottom: 1px solid rgba(255,255,255,.3); }
div#search_results > p:first-of-type[data-visible=false] { opacity: 0; pointer-events: none; margin-bottom: 0;}
div#search_results > p:first-of-type span:first-of-type { display: inline-block; font-weight: var(--font-bold); background: var(--myWhite); color: var(--myBlue); padding: .1em .2em 0;  }
div#search_results ul { display: flex; flex-direction: column; }
div#search_results[data-active=false] ul { padding-bottom: 5rem; }
div#search_results ul li { margin-bottom: 2rem;}
div#search_results ul li p { position: relative; }
div#search_results ul li p:last-of-type { margin-bottom: 0 ;}
div#search_results ul li :is(h2,p) span { color: var(--myBlue); position: relative;  padding: 0 !important; }
div#search_results ul li :is(h2,p) span::before{ position: absolute; top: 0; left: -2px; width: calc(100% + 3px); height: 100%; background: var(--myLightYellow); content: ""; z-index: -1; transform: translateY(-8%); }
div#search_results ul li h2 { margin-bottom: .25rem; }
div#search_results ul li > a { display: block; position: relative; transition: 250ms ease; }
div#search_results ul li > a::before { content: ""; border-radius: var(--borderRadius);  z-index: -2;  position: absolute; --_excess: .8em;  top: calc(var(--_excess) * -1); left: calc(var(--_excess) * -1); width: calc(100% + var(--_excess) * 2); height: calc(100% + var(--_excess) * 2); background: var(--myWhite);  opacity: 0; transition: 250ms ease; }
div#search_results ul li > a:hover { color: var(--myBlue); }
div#search_results ul li > a:hover::before { opacity: 1; }

div#search_results :is(.noResults, .halfResults, .continue) { display: none;  max-width: 35rem; text-align: center; margin: 0 auto 0; }
div#search_results :is(.noResults, .halfResults, .continue)[data-visible=true] { display: block;} 


/* --------------- STANDARD ARTICLE --------------- */
article.standard { margin: 2rem auto;  background: transparent; color: var(--myWhite);  }
article.standard.blue { color: var(--mainColor); }
article.standard time { position: absolute; top: 0; right: 0;  }
article.standard p a { text-decoration: underline;}
article.standard img { width: 100%; display: block;margin: 1rem auto; height: auto; }
article.standard ul { margin: 1em 0; }
article.standard ol { padding-left: 1em; list-style-type: decimal; }
article.standard ol li::marker { font-size: 0.7rem;}
article.standard :is(ol,ul) li { margin-bottom: 0.5rem;}
article.standard :is(ol,ul) p:last-of-type { margin: 0;}


article.standard h2 { margin-top: 2.5rem; font-size: clamp(1.2rem, 4vw, 1.4rem);  }
article.standard h2:first-child { margin-top: 0;}
article.standard strong {font-weight: var(--font-bold);}
article.standard em { font-style: italic; font-weight: var(--font-light); }
article.standard blockquote { padding: 0.5rem 0 0.5rem 2em; font-weight: var(--font-light); margin-bottom: 0.5rem; position: relative;}
article.standard blockquote::before { content: ""; position: absolute; left: 0; top: 0; height: 100%; width: 3px; background: var(--myWhite); }
article.standard blockquote p:last-of-type {margin: 0; }

body.page article.standard h2 { font-size: 1.1rem;}

.page article.standard ul { list-style: initial; padding-left: 1em; }
.page article.standard button.cookies { display: block; margin: 2rem auto;  }

/* --------------- HOMEPAGE ANIMATION --------------- */
.home main { padding-top:  0;}
div.scrollContainer  { position: relative; z-index: 101;  pointer-events: none;  }
div.scrollLock { position: sticky; width: 100%; height: 100vh; top: 0; overflow: hidden; min-height: 48rem; border-radius: 0 0 clamp(1rem, 2vw, 4rem) clamp(1rem, 2vw, 4rem); }
div.scrollLock svg { transition: 500ms;  }

div.scrollLock article  { position: absolute; display: flex; flex-direction: column; align-items: center; text-align: center; left: 0; right: 0; margin: 0 auto; top: 10%; pointer-events: all; }
div.scrollLock article > img { max-width: 5rem; display: block; margin: 0.5rem 0 1rem;}
div.scrollLock article h1 { font-size: clamp(1.2rem, 3.5vh, 2.5rem); color: var(--myWhite);  line-height: 1; margin-bottom: 0.1em;  font-family: var(--fancyFont); }
div.scrollLock article h1 span { font-size: clamp(1.4rem, 4.1vh, 2.9rem); }
div.scrollLock article h2 { font-size: clamp(0.8rem, 2vh, 1rem); color: var(--myWhite); margin-bottom: 0.3rem;  font-weight: var(--font-regular);  }
div.scrollLock article h2 em { display: inline-block; margin: 0 0.35em; font-size: 0.75em;  }
div.scrollLock article h2.announcement { font-size: clamp(0.8rem, 2.1vh, 1.1rem); color: var(--myBlue); }
div.scrollLock article h2.announcement{ margin-bottom: .5em;}
div.scrollLock > a { position: absolute; left: 50%; top: calc(100vh - 1rem); transform: translate(-50%, -100%); z-index: 2; background: var(--myWhite); padding: 0.75rem 0.5rem 1.5rem; border-radius: 1rem; font-family: var(--headerFont); text-transform: uppercase; pointer-events: all;  transition: opacity 250ms, color 250ms, background 250ms;  --ownColor: var(--myBlack)}
div.scrollLock > a:hover { background: var(--myMediumBrown); color: var(--myWhite); --ownColor: var(--myWhite); }
div.scrollLock > a::before,div.scrollLock > a::after { content: ""; position: absolute; height: 3px; width: 0.75rem; background: var(--ownColor); left: 50%; animation: bounceLeft 2s ease infinite alternate;  bottom: 0.8rem; border-radius: 100vmin;  transition: background 250ms ease;}
div.scrollLock > a::after { transform:  rotate(45deg); animation: bounceRight 2s ease infinite alternate;  }
div.scrollLock > a.hide { pointer-events: none; opacity: 0;}

div.scrollLock article h2.announcement span { color: var(--myBrown); font-weight: var(--font-bold);  display: inline-block; margin: 0 .3em; }
div.scrollLock figure { position: absolute; width: 102%; left: -1%;height: 100%;   top: 50%; transform: translate(var(--x,0px), var(--y)) scale(var(--scale)); pointer-events: none; }
div.scrollLock figure picture { width: 100%;}
div.scrollLock img { user-select: none; width: 100%; }
div.scrollLock .lights {  position: absolute; left: 50%; top: 50%; transform: translate(-50%, var(--y)); opacity: var(--opacity); width: 100%; height: 100%;   pointer-events: none; z-index: -1;  }
div.scrollLock svg {  animation: lights 45s linear infinite;  width: 100%;height: 100%; }

div.scrollLock figure { --y: -15%; --scale: 1; }
div.scrollLock figure picture { position: relative; }
div.scrollLock figure picture::before { position: absolute; top: 40%; left: 0; width: 100%; height: 100vh; content: ""; background: var(--myWhite); display: grid; place-items: center; }



/* --------------- HOMEPAGE --------------- */
/* div.scrollContainer { display: none; } */
/* div.scrollContainer + * {margin-top: -50vh !important; } */
div.scrollContainer + * {margin-top: 6rem !important; }

section.intro { display: flex; justify-content: space-around; flex-wrap: wrap; scroll-margin-top: 5rem;  align-items: flex-start;  }
section.intro h1 { font-size: 1.8rem; }
section.intro > article { width: calc(50% - 1rem); color: var(--myWhite); margin-top: 2rem; margin-bottom: 5rem; }
section.intro > article img { max-width: 20rem; width: 75%; margin-bottom: 1rem; }
section.intro > figure { width: calc(40% - 1rem); margin-top: auto; user-select: none; pointer-events: none; }
section.intro figure.globe figure { pointer-events: all;}
section.intro figure.globe .images { height: 0; padding-bottom: 97%; width: 95%; }
section.intro figure.globe .images iframe { position: absolute; top: -10%; left: -35%; width: 170%; height: 100%; }
/* section.intro figure.globe .images::before { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: radial-gradient(50% 50%, #FFD766 -10%, rgba(255,215,102,0.00) 100%); content: ""; animation: pulse 1s ease infinite alternate;} */
section.intro figure.globe .images img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
section.intro figure.globe canvas { height: initial; width: initial; }

section.intro .buttons { display: flex;  flex-wrap: wrap; gap: .75rem;}

.home figure.globe { cursor: pointer; }

section.intro nav { width: calc(100% - 0px); background: var(--myWhite); position: relative; margin-top: 2rem; z-index: 1; border-radius: 0 0 2rem 2rem; }
section.intro nav > img { position: absolute; width: calc(100% + .5px); left: -.25px; z-index: -1; top: 0; transform: translateY(calc(-100% + 1px));}

section.intro nav .tree { position: absolute; width: 14%; top: 0; left: 2%; transform: translateY(-90%) scaleX(-1) }
section.intro nav .tree img { width: 100%; }
section.intro nav .tree.t2 { right: 2%; transform: translateY(-75%); left: initial; }

section.intro nav :is(h2, p) { color: var(--myBlue); }
section.intro nav h2 { margin-top: 1.5rem;}
section.intro nav ul { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 1rem; margin: 0.5rem auto 1rem; width: calc(100% - 2rem); }
section.intro nav ul li { position: relative; }
section.intro nav ul li > a { width: 100%; display: block; padding-bottom: 60%; height: 0; }
section.intro nav ul li img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 1.5rem;}
section.intro nav ul li span { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; white-space: nowrap;  background-color: var(--myBlue); }
section.intro nav ul li a:hover span { background: var(--myMediumBrown); }

/* MAP STUFF */
section.map.fullscreen {  overflow: hidden; width: 100%; max-width: 100%; }
section.map { display: flex; align-items: center; justify-content: center; padding-top: 2rem; }
section.map .indicator { position: absolute;  z-index: 2; top: 0; bottom: 0; right: 0; left: 0; margin: auto; user-select: none; width: 6rem; height: 6rem; display: flex; align-items: center; justify-content: center; padding: 0.5rem;  background: rgba(0,0,0,0.8); border-radius: var(--borderRadius); flex-direction: column; color: var(--myWhite);  font-weight: var(--font-medium); text-align: center; font-size: 0.6rem; pointer-events: none; transition: 500ms ease; transform: translateY(50%); }
section.map .indicator.fi {opacity: 0; transition-delay: 2s;  }
section.map .indicator.fade-in { opacity: 1; }
section.map .indicator.hide {opacity: 0; transition-delay: 0s; }
section.map .indicator img { animation: swipe 2s ease-in-out infinite alternate;  transform-origin: bottom ; max-width: 55%; max-height: 60%;}
section.map .indicator p { margin: 0.75rem 0 0; font-size: 0.5rem; }
section.map .overflower { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; min-width: 60rem; max-width: 110rem; margin: 0 auto; right: 0; padding: 0rem 0 0;  margin-top: 1rem; }
section.map .overflower > picture { display: block; height: 0; padding-bottom: 65%; position: relative; margin: 0 auto; left: 0; right: 0; }
section.map .overflower > picture .mirror,
section.map .overflower > picture > img { height: 100%; width: 100%;  position: absolute; object-fit: contain; user-select: none; padding-right: 2rem; margin-left: 1rem;}

section.map .mirror .pin { all: unset; position: absolute;  background: var(--myBlue);  font-family: var(--headerFont); text-transform: uppercase; color: var(--myWhite);  border-radius: 50%;   width: clamp(1.2rem, 2vw, 2rem); height: clamp(1.2rem, 2vw, 2rem); cursor: pointer;  user-select: none; transition: 250ms ease; box-shadow: 0px 3px 5px 1px rgba(0,0,0,0.3); text-align: center; transform: none; display: grid; place-items: center; }
section.map .mirror .pin img { width: 75%; pointer-events: none;}
section.map .mirror .pin:hover { background: var(--myMediumYellow); transform: scale(1.1);  }

section.map .mirror .pin.active { background: var(--myYellow); }

section.map .popups {max-width: var(--maxWidth); width: var(--width); overflow: visible;  position: fixed; bottom: 0; z-index: 101; transition: opacity 500ms;  }  
section.map.abs_popup .popups {position: absolute; }
section.map.hide .popups {opacity: 0; pointer-events: none; }
section.map .popups ul { display: flex; flex-wrap: wrap; align-items: flex-start;}
section.map .popups ul li { background: var(--myWhite); position: absolute; z-index: 2; bottom: 0.5rem; left: 0; padding: 0.75rem; box-sizing: border-box; display: flex;flex-direction: column; align-items: flex-start; max-width: 17rem; width: 100%; border-radius: 1rem; left: 0; transform: translateX(-2rem); opacity: 0; transition: 250ms ease; pointer-events: none; box-shadow: var(--dropShadow);  font-size: 0.7rem;}
section.map .popups ul li p { margin-bottom: 0.5rem;}
section.map .popups ul li.show {opacity: 1; transform: none; pointer-events: all; }
section.map .popups ul li.show.bottomLeft {left: 100%; transform: translateX(-100%); }
section.map .popups ul li h3 {  color: var(--myBlue);  margin-bottom: 0.25rem; max-width: calc(100% - 1.5rem); }
section.map .popups ul li :is(picture, img) { width: 100%; border-radius: 0.25rem; margin-bottom: 0.25rem; }
section.map .popups ul li img { object-fit: cover; max-height: 18rem; }
section.map .popups ul li > a:first-of-type { font-family: var(--headerFont); text-transform: uppercase;  margin-bottom: 0.5rem; position: static; top: 0.75rem; right: 0.5rem;  color: var(--myWhite); padding: 0.35rem 1.5rem 0.25rem; align-self: flex-end; font-size: 0.8rem;    }
section.map .popups ul li .btn:hover {background: var(--myMediumBrown);}
section.map .popups ul li > button { position: absolute; width: 1rem; height: 1.2rem;  right: 0.75rem; display: flex; align-items: center; top: 0.65rem; cursor: pointer; }
section.map .popups ul li > button::before,
section.map .popups ul li > button::after { content: ""; position: absolute; width: 1rem; height: 3px; background: var(--myBlue); transform: rotate(45deg); border-radius: 100vmin;}
section.map .popups ul li > button::before { transform: rotate(-45deg);}

article.semi-intro { align-self: flex-start; max-width: fit-content; max-width: 25rem; color: var(--myWhite);   text-align: center;  margin: 0 auto; z-index: 2;  }
article.semi-intro h2 { margin-bottom: 0.25rem;}
article.semi-intro p { margin-top: 0.5rem;}

section.nav article { margin-bottom: 2rem; }

/* --------------- WISHLIST --------------- */
.wishlist ul.shop { width: 100%; margin-left: 0;}
.wishlist .empty { color: var(--myWhite); max-width: 30rem; margin: 0 auto; text-align: center; }
.wishlist .empty.hide { display: none; }
.wishlist section.wish { margin: -2rem auto 6rem;  }

/* --------------- 404 PAGE --------------- */
section.s404 { display: flex; flex-direction: column; align-items: center; margin: -2rem auto 3rem !important; }
section.s404 .btn { background: var(--myWhite); color: var(--myBlue); text-align: center;}
section.s404 .btn:hover { background: var(--myMediumBrown); color: var(--myWhite);}

/* --------------- LINKS PAGE --------------- */
body.links article h1 {font-size: clamp(1.2rem, 4vw, 2.5rem);}
body.links article img { width: 9rem ;}
section.links { margin: 0rem auto 8rem !important;}
section.links nav ul { flex-direction: column; display: flex;  align-items: center; font-size: 0.9rem; } 
section.links nav ul li { width: 100%; display: flex; max-width: 18rem; margin-bottom: 1rem;  }
section.links nav ul li a { display: block; width: 100%; text-align: center; padding: 0.65rem 0.5rem 0.45rem }

/* --------------- GATEWAY FILTER PAGE --------------- */
body > section.gateway { all:unset; }
body > section.gateway { color: var(--myBlue); text-align: center; grid-template-columns: repeat(3,1fr); grid-gap: 1rem; display: grid; position: fixed; width: var(--width);  box-sizing: border-box; max-width: var(--maxWidthNarrow); top: 50%; left: 50%; transform: translate(-50%, -50%); background: var(--myWhite); z-index: 110; padding: 2rem; border-radius: 2rem;  transition: 500ms ease;  opacity: 0; pointer-events: none; transform: translate(-50%, calc(-50% + 2rem)); transition-delay: 250ms; }
body > section.gateway[data-show] { transform: translate(-50%, -50%); opacity: 1; pointer-events: all;}
body > section.gateway[data-show] ~ .underlay  { pointer-events: all; opacity: 1; background: rgba(0,0,0,0.5);  z-index: 102; }
section.gateway h2 { grid-column: -1/1; margin-bottom: 0rem; color: inherit;}
section.gateway h3 { grid-column: -1/1; color: inherit;}
section.gateway button { padding: var(--btnPadding); display: flex; flex-direction: column; justify-content: center; align-items: center; margin-top: 3rem; font-weight: var(--font-medium); background: var(--myBlue); font-family: var(--headerFont);  border-radius:100vmin; font-size: 1rem;  cursor: pointer; user-select: none; transition: 250ms; color: var(--myWhite); position: relative; }
section.gateway button img { max-width: 3.5rem; position: absolute; top: 0; left: 50%; --_y: .35rem; transform: translate(-50%, calc(-100% + var(--_y))); width: 100%;  }
section.gateway button:nth-of-type(1) img { max-width: 5rem; --_y: .35rem;  }
section.gateway button:nth-of-type(2) img { --_y: .2rem;  }
section.gateway button:nth-of-type(3) img { max-width: 5.5rem; --_y: .3rem;  }
section.gateway button:hover { background: var(--myMediumBrown); }
section.gateway button:last-of-type { grid-column: 2; width: auto; justify-self: center; display: inline-block; margin: 0; box-sizing: border-box; }



/* --------------- CARROUSEL --------------- */
figure.carrousel { position: relative; width: 100%; border-radius: 0.5rem; overflow: hidden; margin: 3rem auto 0;  }
figure.carrousel * { width: 100%; }
figure.carrousel :is(picture, picture img) { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;}
figure.carrousel .overflower { overflow: hidden; position: relative; height: 100%; width: 100%;  }
figure.carrousel .overflower ul {display: flex; margin: 0; }
figure.carrousel .overflower .slider {width: 100%; transform: translateX(-100%); transition: 500ms ease;  }
figure.carrousel .overflower ul li { position: relative; flex-shrink: 0; margin: 0; height: 0; }
figure.carrousel .overflower ul li iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
figure.carrousel .overflower ul li img { margin: 0; }
figure.carrousel.one .slider { transform: none !important;}
figure.carrousel .buttons { position: absolute; height: 100%; display: flex; align-items: center; justify-content: space-between;  z-index: 2; pointer-events: none;}
figure.carrousel .buttons button { width: 4rem; height: 100%; cursor: pointer; align-items: center; position: relative; --ownColor: var(--myWhite);  pointer-events: all;}
figure.carrousel .buttons button::before,figure.carrousel .buttons button::after { content: ""; position: absolute; width: 1.5rem; height: 4px; background: var(--ownColor); right: 0.5rem;  transform: translateY(-0.5rem) rotate(45deg); border-radius: 1rem; transition: 250ms ease; }
figure.carrousel .buttons button::after {transform:translateY(0.5rem) rotate(-45deg);   }
figure.carrousel .buttons button:nth-of-type(1) { transform: scaleX(-1); }
figure.carrousel .buttons button:hover { --ownColor: var(--myYellow); }


/* --------------- TIJDSLOTEN PAGE --------------- */
section.tijdsloten { max-width: var(--maxWidthWide) !important; margin-top: 0 !important;}
section.tijdsloten picture { width: 100%; display: flex; max-width: 50rem; margin: 0 auto;  }
section.tijdsloten img { width: 100%; }

/* --------------- QR PAGE --------------- */
body.qr :is(footer,header, #breadcrumbs) { display: none; }

/* --------------- PRE-REGISTRATION PAGE --------------- */
section.pre-reg.pre-reg { display: flex; flex-direction: column; align-items: center; max-width: 30rem;  text-align: center; color: var(--myWhite);}
section.pre-reg > div { display: flex; flex-direction: column; align-items: center; margin-top: 0; margin-bottom: 2rem; }
section.pre-reg > div img { max-width: 3rem; margin-bottom: .5rem;}
section.pre-reg > div h1 { font-size: clamp(1.3rem, 2vw, 1.5rem);}
section.pre-reg h2 { font-size: 1.1rem; }
section.pre-reg article { margin-bottom: 6rem; }
section.pre-reg article .btn { background: var(--myWhite); color: var(--myBlue); display: inline-block; }  
section.pre-reg article p a { text-decoration: underline;}

footer.pre-reg nav { grid-template-columns: 1fr; justify-items: center; gap: .5rem; padding-bottom: 2rem; }
footer.pre-reg nav ul.socials { display: flex; justify-content: center; gap: 1rem; align-items: center;  }

section.intro.has-form article h1 { scroll-margin-top: 5rem;}
section.intro.has-form article p + div > ._form { padding: 0 !important; margin: 0 0 2rem 0 !important;  max-width: 20rem !important;} 
section.intro.has-form nav ul li { display: flex; flex-direction: column; align-items: flex-start;  padding: 1rem;   border: 1px solid var(--myBlue10); border-radius: 1rem; }
section.intro.has-form nav ul li p a { text-decoration: underline;}
section.intro.has-form nav ul li a.btn { position: relative; width: auto; height: auto; padding: var(--btnPadding); margin-top: auto;  font-size: .8rem;}

body.bare header > *:not(a.home) { display: none !important; }
body.bare footer  nav { display: none !important; }


/* --------------- IMAGE SLIDER SECTION --------------- */
section.image-slider.fullscreen { max-width: var(--maxWidthUltraWide); width: 100%;  margin: 6rem auto;   overflow: hidden;}
section.image-slider { display: flex;  gap: 1rem;}
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(8rem, 25vw, 14rem); border-radius: var(--halfBorderRadius);}

/* --------------- PROGRAMMABOEKJES PAGE --------------- */
body.boekjes section.introduction { margin-bottom: 0; }
section.boekjes.boekjes { margin-top: 0;}
section.boekjes a { display: block; text-align: center; max-width: 22rem; margin: 0 auto; }

/* --------------- ARRANGEMENTEN --------------- */
section.packages {  display: grid; grid-template-columns: 1fr 1fr 1fr;  grid-gap: 1rem;}
section.packages picture { display: flex; }
section.packages img { max-width: 100%;}
section.packages > * { background: var(--myWhite); border-radius: 1.5rem; overflow: hidden; }
section.packages .h3 { text-align: center;  padding-bottom: .5em;  border-bottom: 1px solid var(--myBlue50); }
section.packages .h3 > span {  max-width: 11em; display: inline-block;  }
section.packages article > div { padding: .75rem 1rem 1rem;}
section.packages form { padding: 1.5rem 1rem 0; }



/* --------------- PROSE CONTENT --------------- */
.prose > * + * { margin-top: 1.5em;}
.prose > h2 {padding-top: .5em;}
.prose > h2 + h2 {position: relative; bottom: 0.7em; margin-bottom: 0;}
.prose img,  .prose iframe { width: auto; max-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: .5em;}
.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: 600; }
.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,.h1,.h2,.h3,.h4) + :is(h1,h2,h3,h4) { margin-top: 0;}
.prose :is(h1,h2,h3,h4,.h1,.h2,.h3,.h4) + p { margin-top: .5em;}


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

    /* Inputs */
    --form-main-color: var(--myBlue);
    --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: var(--myBlue); 
    --form-border-width: 1px;  
    --form-border-radius: .5em;  
    
    /* Labels */
    --form-label-color: var(--myBlue);
    --form-label-border-radius: 0.5em;
    --form-label-background-color: var(--myWhite); 
    --form-label-asterisk-color: var(--myBlue);
    --form-label-transform-distance: 105%; 
    
    /* Checkboxes */
    --form-check-border-radius: .2em;

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

    /* Transition */
    --form-transition: 250ms ease; 
}
/* LAYOUT */
form.custom { position: relative; max-width: 24rem; }
form.custom fieldset { display: grid; grid-template-columns: repeat(var(--form-columns), 1fr);  grid-gap: var(--form-gap); margin: 1rem 0; }
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);  line-height: 1.2;}
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); }

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

/* LABEL */
form.custom .normal label { position: absolute;  top: calc(var(--form-padding-y) + .125em);  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) * -.5), 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);  opacity: 1;}

/* 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:has(select:focus-visible) { outline: 2px;}
form.custom .select span { position: absolute; padding-top: var(--form-padding-y); padding-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;  background: var(--myWhite); border-radius: 100vmin; width: 100%;  top: 0; left: 0; height: 100%; }
form.custom .select[data-active=true]  span { opacity: 1; }
form.custom .select::before, form.custom .select::after { content: ""; height: 2px; top: 45%; width: .45em; position: absolute; transform: translate(40%, -0.02em) rotate(var(--r, 45deg)) translateY(.2em); background: var(--mainColor); right: calc(var(--form-padding-x) + .4em); border-radius: 100vmin; transition: background var(--form-transition);  right: 1.2em; z-index: 2; }
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.75em;  cursor: pointer; }
form.custom a { text-decoration: underline;}
form.custom .field ul label::before, form.custom .field ul label::after { content: ""; position: absolute; left: 0; top: 0em; width: 1em; height: 1em; border: 1px solid var(--form-border-color); border-radius: var(--form-check-border-radius); transition: background 250ms; }
form.custom .field ul label::after { background: url("/img/check.svg") center center / contain no-repeat; left: .01em; top: .05em; 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; }

/* BUTTON */
form.custom .btn { text-align: center;}

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

form.custom span.hr { text-align: center; display: block; position: relative; }
form.custom span.hr::before { content:""; height: 1px; width: 100%; background: var(--myBlue); content: "";  position: absolute; top: 50%; left: 0; transform: translateY(-50%); }
form.custom span.hr > span { background: var(--myWhite); display: inline-block; position: relative; z-index: 2; padding: 0 1em;}
form.custom span.hr + .md { text-align: center; margin: .5rem 0 1.5rem;}

/* body.temp div.scrollLock { height: auto; margin-top: -15%; height: clamp(20rem, 60vw, 55rem); min-height: unset; max-width: 80rem; position: relative; left: 50%; transform: translateX(-50%); } */
/* body.temp footer { display: flex; flex-direction: column; align-items: center; margin-top: 0; padding: 0 0 8rem;  } */

/* --------------- CMP WIDGET ALTERATIONS --------------- */
#CookiebotWidget:not(.CookiebotWidget-open) { margin-bottom: 14px !important;  transition: margin 350ms;}

/* --------------- MEDIA QUERIES --------------- */
/* MIN */
@media only screen and (min-width: 2200px) {
    section.map .mirror .pin { font-size: .8rem;}
}

@media only screen and (min-width: 1200px) {
    section.openingstijden.day ul.bars li .bar span.middle { margin-left: calc(var(--offset-left) + .5rem);  color: var(--myWhite);  }
    section.map .mirror .pin { font-size: .8vw;}
    section.map .indicator { display: none;}
}

@media only screen and (min-width: 768px) {
    div.scrollLock.hide > *:not(article, .lights),
    div.scrollLock.hide > *:not(article) svg { opacity: 0;}
    .programma section.sticky fieldset #reset { bottom: initial; top: 0; z-index: 2; transform: none; margin-right: 0.25rem; color: var(--myBlue); text-decoration: underline; font-weight: var(--font-medium); text-align: right; opacity: 0; right: 0rem; }
    .programma section.sticky[data-show=true] fieldset #reset { opacity: 1; }
    .programma section.sticky[data-show=true] fieldset #reset:hover { color: var(--myMediumBrown); background: none;  }
}

/* MAX */
@media only screen and (max-width:1890px) {
    /* --------------- CMP WIDGET ALTERATIONS --------------- */
    #CookiebotWidget:not(.CookiebotWidget-open) { margin: 0 0 80px 35px !important; }
}
@media only screen and (max-width:1270px) {
    main { padding-top: 2.5rem; } 
    input.burger:checked ~ header section#menu { transform: translateY(1.75rem); max-height: calc(100vh - 6rem); }
    section#menu .grid::before { width: 2rem; height: 2rem; border-radius: .25rem; top: .25rem;   }  

    /* Recommendations */
    section.recs h2 { font-size: clamp(1.2rem, 2.3vw, 1.8rem); }
    .swipeslider .buttons { width: calc(100% - 0.5rem);  }
    .swipeslider .buttons button { transform: translateY(-150%); box-shadow: var(--dropShadow); --_size: 1.5rem;  }
    .swipeslider .buttons button span { transform: translateY(2%); }
    /* .swipeslider .buttons button::before { position: absolute; --_excess: .5rem;  top: calc(var(--_excess) * -1); left: calc(var(--_excess) * -1); width: calc(100% + var(--_excess) * 2); height: calc(100% + var(--_excess) * 2); content: ""; } */

    body.ontdek .swipeslider .buttons button { transform: translate(0, -150%) !important;  background: var(--myYellow); }
}
    
@media only screen and (max-width: 1100px) {
    footer > section > img { width: calc(100% - 3rem);  }
    
    .background .underlay::after { background-image: radial-gradient(1vw 1vw, var(--myDarkBlue) 52%, rgba(32,24,126,0.00) 50vw); }
    .background .underlay::before { background-image: radial-gradient(1vw 1vw, var(--myDarkBlue) 52%, rgba(32,24,126,0.00) 50vw);  }
        
    section.packages.packages { display: flex; flex-wrap: wrap; max-width: calc(var(--maxWidthNarrow) - 10rem); justify-content: center; }
    section.packages.packages > * { max-width: 17rem; }
    /* Recommendations */
    .swipeslider .slider { width: calc(100% + var(--gutterSide) * 2); margin: -1rem 0 0; padding: 1rem 0 0; }
    .swipeslider .slider li.activitycard { min-width: 12rem;}
    .swipeslider .slider ul { margin-left: var(--gutterSide);}
    .swipeslider .slider ul li { scroll-snap-align: center;}
    .swipeslider .slider ul li:last-of-type { width: 1rem; height: 1px; display: block; }
    .swipeslider .buttons { width: calc(100% + 1rem);}

    body.ontdek:not(.single, .locatie) ul.shop_categories li.list-category > a.btn {width: auto;  text-align: center; font-size: .8rem; grid-column: -1/1; }

    /* Ontdek page sliders */
    body.ontdek:not(.single,.locatie) section.activiteiten {flex-direction: column; margin-top: 0; }
    body.ontdek:not(.single,.locatie) section.activiteiten ul.shop { margin-left: 0; max-width: 100%; width: 100%; }
    body.ontdek:not(.single,.locatie) ul.shop_categories .swipeslider { max-width: 100%; }
    body.ontdek:not(.single,.locatie) section.sticky { position: relative; top: initial; width: 100%; max-width: 100%; display: flex; flex-direction: column; align-items: flex-start; }
    body.ontdek:not(.single,.locatie) section.sticky h2 { text-align: center; }
    body.ontdek:not(.single,.locatie) section.sticky fieldset { display: flex; flex-direction: column; align-items: flex-start;  width: 100%; max-width: 17rem; margin: 0 auto; }
    body.ontdek:not(.single,.locatie) section.sticky ul { flex-direction: row; width: 100%; overflow: visible !important; max-height: initial; padding: 0 0.25rem;  }
    body.ontdek:not(.single,.locatie) section.sticky ul li { flex-grow: 1; text-align: center; margin: 0 0.25rem 0.5rem;  }
    body.ontdek:not(.single,.locatie) section.sticky ul li .btn { white-space: nowrap; font-size: 0.8rem; padding: 0.4rem 0 0.25rem; width: 100%; font-size: .7rem; }
    body.ontdek:not(.single,.locatie) section.sticky img.snow { transform: translateY(-100%) scale(-1, 0.45); transform-origin: bottom; }
    body.ontdek:not(.single,.locatie) section.sticky fieldset + div { width: 100%; max-width: 17rem; margin: 0.5rem auto 1rem; padding: 0.1rem 0.25rem; display: flex; flex-direction: row-reverse;}
    body.ontdek:not(.single,.locatie) section.sticky fieldset + div > *:not(.mobile, h2) { display: none;}
    body.ontdek:not(.single,.locatie) section.sticky fieldset + div h2 { text-align: left; padding: 0 0.5rem; width: auto; transform: translateY(1px); }
    body.ontdek:not(.single,.locatie) section.sticky fieldset + div h2::after { content: ":"; }
    body.ontdek:not(.single,.locatie) section.sticky fieldset + div .select { position: relative; display: flex; align-items: center; width: 100%; }
    body.ontdek:not(.single,.locatie) section.sticky.locatie_optredens ul li { text-align: left;}
    body.ontdek:not(.single,.locatie) .ontdek section.sticky #reset { display: none; }

    body.ontdek:not(.single,.locatie) ul.shop_categories li.list-category { display: grid; grid-template-columns: auto 1fr;  align-items: flex-end;   grid-gap: 0 1rem; }
    body.ontdek:not(.single,.locatie) ul.shop_categories li.list-category > p { margin-bottom: .9rem; font-size: .7rem; font-weight: var(--font-medium); margin-left: auto; }
    body.ontdek:not(.single,.locatie) ul.shop_categories li.list-category > div { grid-column: -1/1;  }
    body.ontdek:not(.single,.locatie) ul.shop_categories h2 {  margin-top: .5rem;}
    body.ontdek:not(.single,.locatie) ul.shop_categories li.activitycard { display: flex; width: 14rem; }

    /* LOCATION PAGE */
    section.openingstijden.location ul.times li:nth-of-type(even) { display: none; }
}
@media only screen and (max-width: 1100px) and (max-height: 375px) {
    .background .underlay::after,
    .background .underlay::before { display: none; }
}
@media only screen and (min-width: 768px) and (max-height: 520px) {
    section#menu .grid { overflow: auto;}
}

@media only screen and (max-width: 1100px) {    
    body.activiteit section.ticketagenda nav .tussen { border-radius: 30% 0 0; transform: translateY(1px); }
    body.activiteit section.ticketagenda nav .tussen.active {  padding-top: 1rem; border-radius: .25rem 0 0;}
    body.activiteit section.ticketagenda nav .tussen.active + ul { padding-top: 0.5rem;}
    body.activiteit section.ticketagenda nav .tussen h3 { font-size: .9rem;}
    body.activiteit section.ticketagenda nav .tussen p { font-size: .7rem;}
    body.activiteit section.ticketagenda nav .tussen img { max-width: 3.5rem; }

    body.activiteit section.ticketagenda nav > img { transform: translateY(0.7rem); }
    body.activiteit section.ticketagenda nav > picture { z-index: 3;  }
    body.activiteit section.ticketagenda nav > picture.theater { width: 17%; top: 8%; }
    body.activiteit section.ticketagenda nav > picture.tree:is(.t1,.t2, .t3) { display: none; }
    body.activiteit section.ticketagenda nav > picture.tree.t4 { top: 8%; width: 7%; }
    body.activiteit section.ticketagenda nav > picture.skier { width: 18%; left: 70%;  top: 9%; }

    body.activiteit section.ticketagenda nav ul { --boxHeight: 2rem; }
    body.activiteit section.ticketagenda nav ul li em { margin: 0;}
    body.activiteit section.ticketagenda nav ul li.days em .small{ display: block; text-align: center; }
    body.activiteit section.ticketagenda nav ul li em .large { display: none; }
    body.activiteit section.ticketagenda nav ul li h3 { font-size: 1rem; }
    body.activiteit section.ticketagenda nav ul li h4 { font-size: .8rem; margin-bottom: 0;}
    body.activiteit section.ticketagenda nav ul li.day > button > span { display: none; }
    body.activiteit section.ticketagenda nav ul li.day strong { top: initial; right: initial; transition: 250ms;}
    body.activiteit section.ticketagenda nav ul li.day[data-highlighted=true]:hover strong { color: var(--myWhite); opacity: 1; }
    body.activiteit section.ticketagenda nav ul li.day:not([data-highlighted=true]):hover strong { opacity: 1; color: var(--myBrown);}
    body.activiteit section.ticketagenda nav ul li.day > :is(button, a) > span { display: none;  }
    
    body.activiteit section.ticketagenda nav ul li.uitverkocht {display: grid; place-items: center; }
    body.activiteit section.ticketagenda nav ul li.uitverkocht strong { color: var(--myDisabledGrey) !important;}
    body.activiteit section.ticketagenda nav ul li.uitverkocht em { opacity: 0; transition: 350ms; white-space: nowrap; top: 0; background: var(--myDisabledGrey);  color: var(--myWhite) !important; pointer-events: none; padding: .2rem .35rem .15rem; border-radius: .3rem; z-index: 2;  filter: drop-shadow(0px 0px 2px rgba(0,0,0,0.15));   transform: translate(-50%, calc(-50% - .9rem)); }
    body.activiteit section.ticketagenda nav ul li.uitverkocht em::before { content: ""; width: .3rem; height: 0.3rem; position: absolute; left: 50%; bottom: 0; transform: translate(-50%, 35%) rotate(45deg); background: var(--myDisabledGrey); }
    body.activiteit section.ticketagenda nav ul li.uitverkocht:is(:hover, :focus, :active) em {  opacity: 1; }

}
@media only screen and (max-width: 1020px) {
    section.map .overflower { margin-top: 3.5rem; }
    section.andere_avonturen ul li:nth-of-type(4) { display: block; }
}

@media only screen and (max-width: 1000px) {
    .home section.intro { flex-direction: column; max-width: 30rem; margin: 0 auto; }
    .home section.intro > article { display: flex; flex-direction: column; align-items: flex-start;  }
    .home section.intro > :is(figure, article) {width: 100%; margin-bottom: 1rem;}
    .home section.intro > figure { max-width: 18rem; margin: 0 auto; display: flex; flex-direction: column; align-items: center;  }
    .home section.intro nav { margin-top: 0; }
    .home section.intro nav ul { display: flex; flex-direction: column; max-width: 20rem; }

    div.scrollLock figure { --y: 0%; }

    section.tickets > ul { display: grid; grid-template: 1fr / 1fr; place-items: center;  margin: 2rem 0 2rem; grid-gap: 2.5rem 1rem;  }
    section.tickets > ul .ticket { width: 100%; min-height: 0; transform: none !important; min-height: 0 !important; }
    section.tickets > ul .ticket.middle { width: 100%; max-width: 18rem; margin: 1.5rem 0; }
    section.tickets > ul .ticket.middle:nth-of-type(2) { order: -1; grid-column: span 2;   }
    section.tickets > ul .details { margin: 0; }
    section.tickets > ul .ticket :is(span, strong:not(span + strong)) { margin-top: 0; }
    section.other_tickets > article { margin-top: 0; }
    
}

@media only screen and (max-width: 900px) {
    section.details > section > ul { grid-template-rows: 1fr 1fr; grid-template-columns: 1fr 1fr 1fr; }
    section.details > section > ul > li:nth-of-type(2) { grid-row: 2/3 }
    section.details > section > ul > li:is(:nth-of-type(3), :nth-of-type(4)) { grid-row: span 2; }
}
@media only screen and (max-width: 768px) {
    :root { 
        --logoWidth: 2.5rem; 
        --gutterSide: 1rem; 
        --gutterTop: .25rem; 
    }
    .mobile { display: block; }

    /* GENERAL  */
    section.introduction article img { width: 8rem; }
    
    /* HEADER  */
    header { display: grid; grid-template-columns: 1fr auto; grid-gap: .15rem 0.25rem; width: calc(100% - .5rem); }
    header > a:first-of-type { grid-row: span 2; margin-right: auto; padding: .5em 1em .5em .8em }
    header > a.ticket { margin: 0 0 0 auto;  }
    header > a img { max-width: 1.5rem;}
    header > a strong { font-size: .8rem; margin-left: .5rem; }
    label.burger > div { width: 1.2rem;}
    label.burger > div > span { height: 3px;  width: 1.2rem;}
    label.burger > div > span:nth-of-type(2) { width: 1rem; top: calc(0.45rem - 2px);}
    label.burger > div > span:nth-of-type(3) { width: .8rem; top: calc(.9rem - 4px);}

    label.burger:hover span:nth-of-type(1) { width: .9rem; }
    label.burger:hover span:nth-of-type(2) { width: 1.1rem; }
    label.burger:hover span:nth-of-type(3) { width: .9rem; }

    input.burger:checked ~ header label.burger span:nth-of-type(1) { transform: translate(-.15rem, 0.4rem) rotate(45deg); width: 1.2rem; }
    input.burger:checked ~ header label.burger span:nth-of-type(2) { width: 1.2rem;}
    input.burger:checked ~ header label.burger span:nth-of-type(3) { transform: translate(-.15rem, -0.3rem) rotate(-225deg); width: 1.2rem; }
    input.burger:checked ~ header > a:first-of-type { transform: translate(-2%, -10%) scale(1.3) ; }

    label.burger { grid-column: 2; margin-left: auto; grid-row: 1;  gap: .25rem;}
    label.burger, header > a.ticket { font-size: 1rem }
    header > a.ticket { top: unset; bottom: 1rem; right: .25rem; position: fixed;  padding: var(--btnPaddingNarrow); transition: opacity 500ms; }
    nav.main ul li[data-hide-on-desktop] { display: flex; }
    body.ontdek header > a.ticket { display: none; }
    
    .age-group {    --_gap: .15rem; --_imageWidth: 1.6rem; --_selector-font-size: 0.8rem;  width: calc(100% - 0.5rem); height: 100dvh; }
    .age-group > .box p { max-width: 10em; }
    
    nav.main {font-size: clamp(1.2rem, 3.5vh, 2rem); margin-bottom: .5rem; }
    nav.bottom a:hover { color: var(--myMediumYellow);}
    
    section#menu { margin: 0; width: 100%;  max-width: 100%;  overflow: unset; color: var(--myWhite); pointer-events: none; display: flex; flex-direction: column; align-items: flex-start; top: 4.5rem; transform: none !important;  max-height: unset !important;}
    section#menu nav.main { margin-top: 0;}
    section#menu .grid { grid-template-rows: 1fr auto;  background: none; width: 100%; height: auto; top: var(--gutterTop); grid-gap: 1rem; padding: 0.25rem 0 0; margin: -1rem auto 0; box-shadow: none; overflow: scroll;  max-height: unset; min-height: 20rem;  padding-bottom: 10rem; }
    section#menu .grid > *  { padding-left: var(--gutterSide); }
    section#menu .grid::before {display: none; }
    section#menu nav.bottom { grid-column: -1/1; margin-top: auto;}
    section#menu a.btn { --ownColor: var(--myBlue); color: var(--myBlue); background: var(--myWhite); font-size: .9rem; }
    section#menu label.burger { background: var(--myWhite);}
    section#menu nav.main ul li > a.ticket { padding: var(--btnPadding); background: var(--myMediumGreen); color: var(--myWhite); }
    section#menu nav.main ul li > a.ticket:hover { background:  var(--myGreen);}
    section#menu a.btn:hover { background: var(--myLightYellow);}
    label.burger:hover { background: var(--myMediumBrown);}

    a.lang { color: var(--myWhite); top: 0rem; right: var(--gutterSide); }
    a.lang:hover { color: var(--myMediumYellow);}
    nav.main ul li > a {  color: var(--myWhite); }
    nav.main ul li > a:not(.tickets)::before { background: var(--myWhite);}
    nav.main ul li > a:not(.tickets)::after { background: var(--myMediumYellow); }
    
    
    input.burger:checked ~ footer,

    input.burger:checked ~ main .cloud,
    input.burger:checked ~ header .age-group,
    input.burger:checked ~ header > a.ticket,
    input.burger:checked ~ main > *:not(.background) { opacity: 0; pointer-events: none;}

    input.burger:checked ~ header > a:not(.ticket) { background: transparent; }
    input.burger:checked ~ header > a strong {  color: var(--myWhite); -webkit-text-stroke-color: var(--myWhite);}
    input.burger:checked ~ header > a img { opacity: 1;}
    input.burger:checked ~ header > a img:first-of-type { opacity: 0;}
    input.burger:checked ~ header #breadcrumbs { opacity: 0;}
    input.burger:checked ~ div.underlay { display: none; }

    #breadcrumbs { top: 2.15rem; width: calc(100% - 1rem); font-size: .6rem; }

    /* FOOTER */
    footer { padding-top: 35vw; }
    footer nav { margin: 0 auto; padding: 0; }
    footer nav > ul {margin-bottom: 2rem;}
    footer nav > ul h3 { min-height: 0;}
    footer > section { border-radius: 3rem 3rem 1rem 1rem; }
    footer > section > p { text-align: center; margin: 0 auto; justify-content: center;  }
    footer > section > img { width: calc(100% - 4rem);  }

    /* HOME */
    div.scrollLock { min-height: 30rem; }
    div.scrollLock article { top: 15%; transition: 500ms;  }
    div.scrollLock article.go-away { opacity: 0; pointer-events: none; }
    div.scrollLock article > img { display: none;}
    div.scrollLock > a { bottom: 2rem; top: initial;  }
    div.scrollLock > a span { height: 0; overflow: hidden; display: block; }
    div.scrollLock figure {left: -40%; width: 180%;  transition: all 0s ease, opacity 0s;  --y: -8%;  }
    div.scrollLock .lights { --y: 5%; transform: translateY(var(--y)); }
    
    div.scrollContainer.hide * { opacity: 0;}
    div.scrollContainer { height: 100vh !important; position: relative; top: 0; left: 0; height: 100%; width: 100%; transition: opacity 500ms; border-radius: 0 0 1rem 1rem; overflow: hidden; }
    div.scrollContainer + * { opacity: 1; transition: 500ms ease; margin-top: 5rem !important; }
    div.scrollContainer.go + * { opacity: 1; }
    div.scrollContainer.go.fade { opacity: 0;}
    div.scrollContainer.go > div > a { opacity: 0;}
    div.scrollContainer.go figure#arch { --scale: 8; --y: -150%;  }
    div.scrollContainer.go figure#front { --scale: 3; --y: 350%;  }
    div.scrollContainer.go figure#back { --scale: 3; --y: 150%;  }
    div.scrollContainer.go div.lights {  --y: 25%; --opacity: 0;  }

    .home section.intro nav .tree { width: 14%;}
    
    article.semi-intro { width: calc(100% - 2rem); }
    article.semi-intro h2 { margin-bottom: 0.25rem; font-size: 1.5rem; } 

    section.nav ul { grid-template-columns: 1fr; max-width: 15rem; margin: 0 auto; grid-gap: 2rem; }


    /* MAP */
    section.map .overflower { margin-top: 5.5rem; }
    section.map .popups ul li h3 { font-size: 1rem; }
    section.map .popups ul li p { font-size: 0.6rem; }
    section.map .popups ul li > a:first-of-type { margin-bottom: 0 ; }
    section.map .popups ul li button { display: block; }

    /* BLOGS */
    section.blogs > ul {margin: 0 auto; width: 100%; }
    section.blogs li.postcard { width: 100%; max-width: 20rem; min-width: 0; margin: 0 auto 1rem;}
    section.blogs fieldset h3 { width: 100%; margin-bottom: 0.5rem;}
    section.blogs fieldset { max-width: 20rem; }

    /* ACTIVITYCARD */
    button.wish::before,  button.wish::after{ transform: translate(-47%, -1px) rotate(calc(360deg / 5  * 0)); }
    li.activitycard input ~ figure .wish::before { transform: translate(-50%, -1px) rotate(calc(360deg / 5 * -4)); }
    li.activitycard input ~ figure .wish::after { transform: translate(-50%, -1px) rotate(calc(360deg / 5 * -4)); }
    li.activitycard > label { display: block;  position: absolute; top: 0; left: 0; width: 100%; height: 100%;  z-index: 1; }   
    li.activitycard article { font-size: 0.7rem;}

    /* This bit gives them the smaller transform */
    /* section:not(.recs) li.activitycard input:not(:checked) ~ figure { padding-bottom: 60%;  } */
    /* section:not(.recs) li.activitycard input:not(:checked) ~ figure div.expand { opacity: 1; transform: none;  } */
    /* section:not(.recs) li.activitycard input:not(:checked) ~ figure .wish { top: 0.25rem; z-index: 3;} */
    /* section:not(.recs) li.activitycard input:not(:checked) ~ article > *:not(svg, img, h2) { max-height: 0; overflow: hidden; padding-top: 0; padding-bottom: 0; margin: 0;} */
    /* section:not(.recs) li.activitycard input:not(:checked) ~ article > a { opacity: 0;} */
    /* section:not(.recs) li.activitycard input:checked ~ figure { padding-bottom: 85%; } */



    li.sl::before { --size: 2; }
    li.sr::after { --size: 1.8; }
    li.ml::before { --size: 0.6; }
    li.mr::before { --size: 0.7; }

    /* SHOP */
    ul.shop { margin-top: 0.5rem !important; width: 100%;  display: none;  }
    ul.shop.desk { display: grid; }
    ul.shop_categories { display: flex; flex-direction: column; max-width: var(--maxWidth); width: 100%;  position: relative; margin-bottom: 4rem; }
    ul.shop_categories li.list-category { display: grid; grid-template-columns: auto 1fr;  align-items: flex-end;   grid-gap: 0 1rem; }
    ul.shop_categories li.list-category > p { margin-bottom: .9rem; font-size: .7rem; font-weight: var(--font-medium); margin-left: auto; }
    ul.shop_categories li.list-category > div { grid-column: -1/1;  }
    ul.shop_categories h2 { font-size: 1.2rem; margin-top: 1rem;}
    ul.shop_categories > li[data-visible=false] { display: none;}
    ul.shop_categories li.activitycard { display: flex; width: 12rem; }
    ul.shop_categories li.activitycard[data-dayopen="false"], ul.shop_categories li.activitycard[data-open="false"], ul.shop_categories li.activitycard[data-location="false"], ul.shop_categories li.activitycard[data-insearch="false"], ul.shop_categories li.activitycard[data-infilter="false"] { display: none; }
    /* ul.shop_categories .swipeslider { width: calc(100vw + var());} */

    /* FILTERS */
    section.activiteiten { flex-direction: column;  }
    section.sticky { position: relative; top: initial; width: 100%; max-width: 100%; display: flex; flex-direction: column; align-items: flex-start; }
    section.sticky h2 { text-align: center; }
    section.sticky fieldset { display: flex; flex-direction: column; align-items: flex-start;  width: 100%; max-width: 17rem; margin: 0 auto; }
    section.sticky ul { flex-direction: row; width: 100%; overflow: visible !important; max-height: initial; padding: 0 0.25rem;  }
    section.sticky ul li { flex-grow: 1; text-align: center; margin: 0 0.25rem 0.5rem;  }
    section.sticky ul li .btn { white-space: nowrap; font-size: 0.8rem; padding: 0.4rem 0 0.25rem; width: 100%;; }
    section.sticky img.snow { transform: translateY(-100%) scale(-1, 0.45); transform-origin: bottom; }
    section.sticky fieldset + div { width: 100%; max-width: 17rem; margin: 0.5rem auto 1rem; padding: 0.1rem 0.25rem; display: flex; flex-direction: row-reverse;}
    section.sticky fieldset + div > *:not(.mobile, h2) { display: none;}
    section.sticky fieldset + div h2 { text-align: left; padding: 0 0.5rem; width: auto; transform: translateY(1px); }
    section.sticky fieldset + div h2::after { content: ":"; }
    section.sticky fieldset + div .select { position: relative; display: flex; align-items: center; width: 100%; }
    
    section.sticky.locatie_optredens ul li { text-align: left;}
    .ontdek section.sticky #reset { display: none; }

    section.activiteiten > .search { display: none; }
    section.activiteiten fieldset div.search { display: block; position: relative; top: unset; right: unset; transform: none; max-width: calc(100% - 0.5rem); width: 100%; margin: 0 auto 0.5rem; }
    section.activiteiten fieldset div.search input { max-width: 100%; width: 100%; background: none; border: 2px solid var(--myBlue); border-radius: 100vmin; padding: .33rem 1.5rem .33rem 1.8rem; }
    section.activiteiten fieldset div.search input:focus { outline: none; }
    section.activiteiten .search > span { margin-left: 0.5rem; width: calc(100% - 0.75rem); }
    section.activiteiten .search button:hover { background: none; }
    
    /* PROGRAMMA PAGE */
    .programma section.sticky h2 { text-align: left;}
    .programma section.sticky #reset { bottom: initial; right: 0.25rem; color: var(--myBlue); font-weight: var(--font-medium);  text-decoration: underline; opacity: 0; }
    .programma section.sticky[data-show='true'] #reset { transform: none; opacity: 1; pointer-events: all; }
    .programma section.sticky img.snow { transform: translateY(-100%) scale(1, 0.65);}
    .programma section.sticky .h3.select { z-index: 10; user-select: none;}
    .programma section.sticky .h3.select h3 { pointer-events: all; }
    .programma section.sticky .select span { display: inline-block !important;  font-size: .6rem;}
    .programma section.sticky .select span:nth-of-type(2) { display: inline-block !important; height: 1.4em; }
    .programma section.sticky .h3.select[data-open=true] +  .agendafilter { display: block; }
    .programma section.sticky .agendafilter {  z-index: 9; background: var(--myWhite); display: none; position: relative;  }
    .programma section.sticky .agendafilter ul { width: 100%;}
    .programma section.sticky .agendafilter > button.btn { width: 6rem; background: var(--myBlue50) !important; font-size: 0.7rem; padding: 0.25rem 0.5rem 0.15rem; margin-top: 0.5rem; display: inline !important; }
    
    .programma section.activiteiten { display: flex; flex-direction: column;  align-items: center;  }
    .programma section.activiteiten ul.shop { margin: 2rem auto 0 !important; width: 100%; }
    .programma section.activiteiten ul.shop > p { max-width: 17rem; margin: 0 auto; right: 0; transform: translateY(calc(-100% - 0.5rem)); width: 100%;  }
    .programma section.sticky { transition: 500ms; width: 100%;  }
    
    .programma section.sticky { order: -1; }
    .programma section.sticky fieldset ul { flex-direction: column;  }
    .programma section.sticky fieldset ul li { margin: 0 0 0.5rem;}
    
    .programma section.sticky .select select { display: block; }
    .programma section.sticky .select select { transition: 500ms; }
    .programma section.sticky .select select:focus + *::before,
    .programma section.sticky .select[data-open=true] h3::before { transform: translate(-0.2rem, -2px) rotate(45deg);  }
    .programma section.sticky .select select:focus + *::after,
    .programma section.sticky .select[data-open=true] h3::after { transform: translate(-0.5rem, -2px) rotate(-45deg);  }
    .programma section.sticky .select label.mobile { display: flex;}
    .programma section.sticky .select > h3 { padding: 0.45rem 1.1rem 0.35rem 0.8rem;  background: var(--myBlue) !important; cursor: pointer; }
    .programma section.sticky .select > h3::before, .programma section.sticky .select > h3::after { content: ""; position: absolute; width: 0.5rem; height: 2px; border-radius: 100vmin; background: var(--myWhite); transform: translate(-0.5rem,-2px) rotate(45deg); right: 0.3rem; transition: 250ms }
    .programma section.sticky .select > h3::before {transform: translate(-0.2rem,-2px) rotate(-45deg);  }
    .programma section.sticky .select > :is(label, h3) { padding-right: 1.5rem; }
    .programma section.sticky .sub ul:not(.weekdays,.calendar) { display: none; }
    .programma fieldset.filter ul.programma > li > .btn span { display: inline; }
    .programma section.sticky > nav.tickets { max-width: 17rem; position: relative; width: 100%; margin: 0.5rem auto 0rem; }
    .programma section.sticky > nav.tickets ul {padding: 0; transition: 500ms; }
    .programma section.sticky > nav.tickets ul[data-show=true] {margin-bottom: 2.5rem; }
    .programma section.sticky > nav.tickets ul li {margin: 0;}

    section.locatie_optredens > h2 {margin: 1rem 0 1.5rem; }

    
    /* ACTIVITYPAGE */
    
    section.details { flex-direction: column-reverse;  margin-top: 2rem !important;}
    section.details > .h1 { margin-bottom: 0rem; font-size: 1.3rem; }
    section.details > h2.mobile:not(.h1) { font-size: .8rem; margin-bottom: .5rem;}
    
    figure.globe > div h2 { display: none; }
    section.details > figure.globe.sticky { position: relative;  top: unset; margin: 0 auto 2rem;  }
    figure.globe > div { padding-top: 1.5rem; }

    section.details > section { width: 100%; max-width: 30rem; margin: 0 auto;  }
    section.details > section :is(h1,h2).desktop { display: none;}
    section.details > section > ul > li { margin-bottom:  0.5rem;}
    section.details > section > ul.snow::before { width: calc(100% - 1rem); left: 0; transform: translate(0.5rem, calc(-100% + 6px)) scaleY(2); } 
    section.details > section > .standard h2:first-of-type { margin-top: 2rem ;}
    section.details > section > section.andere_avonturen { margin-top: 4rem;}
    section.details a.btn.purchase { margin: 0 auto; position: fixed; bottom: 1rem; left: 0; right: 0; z-index: 106; transform: translateY(calc(100% + 1rem)); width: calc(100% - .5rem); }
    body[data-popbutton=true] section.details a.btn.purchase {transform: none;}
    body[data-popbutton=true] .age-group { transform: translateY(-3rem); transition: 250ms;}
    body[data-popbutton=true][data-openedpopup] .btn.purchase { opacity: 0;}
    


    /* INFORMATION PAGE */
    section.faq { grid-template-columns: 1fr; max-width: 20rem !important; margin-top: -2rem !important; }
    section.faq nav { position: relative; top: unset; max-width: 100%; }
    section.faq h2 { font-size: 1.2rem;}

    body.informatie.single section.search { display: flex;  max-width: 20rem !important; }
    body.informatie.single section.search h2 { font-size: 1.2rem;}
    body.informatie.single .faq .sub-search { display: none; }
    body.informatie.single .faq > ul { border-top: 1px solid rgba(255,255,255,.3); padding-top: 1rem;}
    body.informatie.single section.search form { border-top: none;  }

    /* TICKETS */
    section.tickets h2.snow::before { transform: translateY(-0.55rem) scaleY(2); z-index: -1; }
    section.other_tickets ul { display: flex;  flex-direction: column;  align-items: center; margin-top: 1rem; }
    section.other_tickets ul li { flex-direction: column !important; width: 100%; max-width: 25rem; }
    section.other_tickets ul li figure { width: 100%;  padding-bottom: 60%;}
    section.other_tickets ul li article { width: 100%; margin-top: 1rem; }
    section.other_tickets ul li .btn { font-size: .8rem;text-align: center;}

    section.ticketagenda#agenda {margin-top: -1rem;}
    section.ticketagenda :is(h2, h3) { font-size: 1rem; }
    section.ticketagenda > a { margin: 0.25rem 0 0.5rem; }
    section.ticketagenda nav { margin-top: 0;}
    
    section.ticketagenda nav .tussen { border-radius: 30% 0 0; transform: translateY(1px); }
    section.ticketagenda nav .tussen.active {  padding-top: 1rem; border-radius: .25rem 0 0;}
    section.ticketagenda nav .tussen.active + ul { padding-top: 0.5rem;}
    section.ticketagenda nav .tussen h3 { font-size: .9rem;}
    section.ticketagenda nav .tussen p { font-size: .7rem;}
    section.ticketagenda nav .tussen img { max-width: 3.5rem; }

    section.ticketagenda nav > img { transform: translateY(0.7rem); width: 101%; margin-left: -.5%; }
    section.ticketagenda nav > picture { z-index: 3;  }
    section.ticketagenda nav > picture.theater { width: 17%; top: 2rem; }
    section.ticketagenda nav > picture.tree:is(.t1,.t2, .t3) { display: none; }
    section.ticketagenda nav > picture.tree.t4 { top: 2rem; width: 7%; }
    section.ticketagenda nav > picture.tree2.t1 { top: 2rem;}
    section.ticketagenda nav > picture.tree2.t2 { top: 3rem;}
    section.ticketagenda nav > picture.skier { width: 18%; left: 70%;  top: 2rem; }
    section.ticketagenda nav ul { --boxHeight: 2rem; }
    section.ticketagenda nav ul li em { margin: 0;}
    section.ticketagenda nav ul li.days em .small{ display: block; text-align: center; }
    section.ticketagenda nav ul li em .large { display: none; }
    section.ticketagenda nav ul li h3 { font-size: 1rem; }
    section.ticketagenda nav ul li .h4 { font-size: .9rem; margin-bottom: 0;}
    section.ticketagenda nav ul li.day > button > span { display: none; }
    section.ticketagenda nav ul li.day strong { top: initial; right: initial;}
    section.ticketagenda nav ul li.day:hover strong { color: var(--myWhite); opacity: 1; }
    section.ticketagenda nav ul li.day > button > em { position: absolute; font-family: var(--primaryFont); font-size: 0.4rem; right: 0.1rem; bottom: 0.1rem;  }
    section.ticketagenda nav ul li.day.inactive strong { display: none; }
    section.ticketagenda nav ul li.day.inactive em { display: none; }
    section.ticketagenda nav ul li.day > :is(button, a) > span { display: none;  }
    
    section.ticketagenda nav ul li.uitverkocht {display: grid; place-items: center; }
    section.ticketagenda nav ul li.uitverkocht strong { color: var(--myDisabledGrey) !important;}
    section.ticketagenda nav ul li.uitverkocht em { opacity: 0; transition: 350ms; white-space: nowrap; top: 0; background: var(--myDisabledGrey);  color: var(--myWhite) !important; pointer-events: none; padding: .2rem .35rem .15rem; border-radius: .3rem; z-index: 2;  filter: drop-shadow(0px 0px 2px rgba(0,0,0,0.15));   transform: translate(-50%, calc(-50% - .9rem)); }
    section.ticketagenda nav ul li.uitverkocht em::before { content: ""; width: .3rem; height: 0.3rem; position: absolute; left: 50%; bottom: 0; transform: translate(-50%, 35%) rotate(45deg); background: var(--myDisabledGrey); }
    section.ticketagenda nav ul li.uitverkocht:is(:hover, :focus, :active) em {  opacity: 1; }
    

    /* OPENINGSTIJDEN PAGE */
    /* section.openingstijden { width: 100% !important;  } */
    section.openingstijden { --_min-width: 32rem;  }
    section.openingstijden ul.bars li { grid-template-columns: 1fr; min-width: calc(var(--_min-width)) !important; padding: 0.3rem 0;  width: 100%; }
    section.openingstijden ul.times { margin-left: 0; }
    section.openingstijden ul.times {  min-width: var(--_min-width) !important; width: 100%; }
    section.openingstijden ul.bars li em { justify-self: flex-start; position: sticky; left: -.5rem; background: var(--myWhite); font-size: .7rem;  font-weight: var(--font-bold); margin-left: .25rem;}
    section.openingstijden ul.bars li:nth-of-type(odd) em { background: var(--myBlue10Opaque);}
    section.openingstijden ul.times li::before { height: calc(calc(57.8px * var(--total-days))); }
    
    

    /* AGE GATEWAY POPUP */
    body > section.gateway {  grid-template-columns: 1fr; padding: 1rem; border-radius: 1.5rem; max-width: 25rem; }
    body > section.gateway h2 { font-size: .9rem; }
    body > section.gateway h3 { font-size: .8rem; max-width: 12em; margin: 0 auto; text-transform: none; }
    body > section.gateway button { max-width: 12rem; margin: 2rem auto 0; font-size: .8rem; }
    body > section.gateway button:last-of-type {  grid-column: unset;}
    section.gateway button:nth-of-type(1) img { max-width: 3.75rem; --_y: .3rem } 
    section.gateway button:nth-of-type(2) img { max-width: 2.75rem; }
    section.gateway button:nth-of-type(3) img { max-width: 4rem  }

    /* DAY PAGE */
    section.openingstijden.day h2 { font-size: 1.3rem; }


    /* TIJDSLOTEN */
    body.tijdsloten section.introduction { margin-bottom: 0rem;}
    body.tijdsloten section.tijdsloten  { width: 100%; overflow: auto; }
    body.tijdsloten section.tijdsloten img {max-width: 180%;}

    /* --------------- CMP WIDGET ALTERATIONS --------------- */
    #CookiebotWidget:not(.CookiebotWidget-open) { margin: 0 0 75px 0px !important; left: 9px !important;}  
    #CookiebotWidget.CookiebotWidget-open { bottom: 80px !important; }
}

@media only screen and (max-width: 650px) {
    section.tickets > ul { grid-template: 1fr / 1fr; grid-gap: 1rem; }
    section.tickets > ul .ticket { max-width: 18rem; margin-bottom: 1rem; }
    section.tickets > ul .ticket.middle:nth-of-type(2) { grid-column: span 1; margin-bottom: 0;  }
    section.tickets > ul .ticket { margin-bottom: 2rem;}
    section.tickets > ul .ticket:last-of-type { margin-top: 3rem;}
}

@media only screen and (max-width: 550px) {
    section#menu .grid {  display: flex; flex-direction: column; align-items: flex-start;  }
    section#menu nav.bottom { padding-bottom: 0rem;  }
    section#menu nav.side ul { margin-top: 1rem;}
}
@media only screen and (max-width: 500px) {
    /* section.details > section > ul { display: flex; align-items: flex-start; flex-direction: column; width: auto;  margin-bottom: 1rem;  grid-gap: 0; padding-bottom: 0.5rem; } */
    section.andere_avonturen ul li:nth-of-type(4) { display: none; }

    div.popup { display: flex; flex-direction: column; }
    div.popup article { padding: 0.5rem 0.25rem; margin-top: 5rem; padding: 1rem;}
    div.popup article > a { position: fixed; bottom: 3.5rem; width: calc(100% - 1rem); left: 0.5rem; font-size: 1rem; z-index: 1; }
    div.popup li input ~ label:hover { background: none; }
    div.popup li label > h3 { font-size: 1rem; }
}

/* --------------- ANIMATIONS --------------- */
@keyframes shake {
    0% { transform:  rotate(0deg); }
    20% { transform: rotate(2deg); }
    40% { transform: rotate(-2deg); }
    60% { transform: rotate(2deg); }
    80% { transform: rotate(-2deg); }
    100% { transform: rotate(0); }
}

@keyframes lights {
    0% { transform: translate(-50%, -37%) scale(2.3) rotate(0);  }
    50% { transform: translate(-50%, -37%) scale(2.3) rotate(180deg);  }
    100% { transform: translate(-50%, -37%) scale(2.3) rotate(360deg);  }
}

@keyframes bounceLeft { 
    0% { transform: translate(calc(-50% + 0.225rem), 0) rotate(-45deg);  }
    100% { transform: translate(calc(-50% + 0.225rem), 0.25rem) rotate(-45deg);  }
}
@keyframes bounceRight { 
    0% { transform: translate(calc(-50% - 0.225rem), 0) rotate(45deg); }
    100% { transform: translate(calc(-50% - 0.225rem), 0.25rem) rotate(45deg); }
}

@keyframes swipe { 
    0% { transform: rotate(-5deg);}
    100% { transform: rotate(5deg);}
}

@keyframes wiggle { 
    0% { transform: scale(1.2) rotate(-2deg); }
    100% { transform: scale(1.2) rotate(2deg); }
}

@keyframes wiggleAlt { 
    0% { transform: rotate(0deg); }
    50% { transform: rotate(-1deg); }
    100% { transform: rotate(1deg); }
}

@keyframes pulse { 
    0% { transform: scale(0.75);}
    100% { transform: scale(1.25);}
}

@keyframes wishListStarred {
    0% { transform: translate(-50%, -1px) rotate(calc(360deg / 5  * 1)) scale(0.9);  }
    50% { transform: translate(-50%, -1px) rotate(calc(360deg / 5 * 3)) scale(1.5); }
    100% { transform: translate(-50%, -1px) rotate(calc(360deg / 5 * 3)) scale(1.1)}
}

@keyframes wow {
    0% { transform: translate(-50%, -50%) rotate(calc(360deg / 5  * 0)) scale(0);  }
    50% { transform: translate(-50%, -50%) rotate(calc(360deg / 5 * 5)) scale(1); }
    100% { transform: translate(-50%, -50%) rotate(calc(360deg / 5 * 10)) scale(0)}
}
@keyframes highlight {
    0%{ background: var(--myWhite);}
    20%{ background: var(--myMediumYellow);}
    70%{ background: var(--myMediumYellow);}
    100%{ background: var(--myWhite);}
}


@keyframes ski {
    0% { transform: translate(0, 0);}
    0% { transform: translate(-30%, 0%);}
}
@keyframes slide {
    0% { transform: translate(0%, 0);}
    100% { transform: translate(calc(-100% - 1rem), 0);}
}