* {padding: 0; margin: 0;  border: 0; box-sizing: border-box;}
*::before, *::after { box-sizing: border-box; }
html {font-size: clamp(16px, 1.5vw, 24px); scroll-behavior: smooth; overscroll-behavior: none;  }
body {font-size: var(--font-size-body); color: var(--mainColor); font-family: var(--primaryFont); font-weight: var(--font-regular); background: var(--backgroundColor); line-height: var(--line-height-large);  -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased }
body[data-scrollable=false] { overflow: hidden;}
a {text-decoration: none; color: inherit; }
p a:hover {text-decoration: underline;}
ul {list-style-type: none;}
p {margin-bottom: 1.4em;}
p:last-of-type { margin-bottom: 0; }
br {margin:0; height: 0;}
strong, em { font-style: normal; font-weight: var(--font-regular); }
fieldset legend { display: none;}
address { font-style: normal;}

:root {
    /* Fonts */
    --primaryFont: "Neue Haas Grotesk Display Pro", system-ui, sans-serif;
    --headerFont: "Neue Haas Grotesk Display Pro", system-ui, sans-serif;
    --fancyFont: "Funnel Display", system-ui, sans-serif;

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

    /* Font sizes */
    --font-size-huge: 7rem;
    --font-size-h1: 4rem;
    --font-size-h2: 2.5rem;
    --font-size-h3: 1.6rem;
    --font-size-h4: 1.4rem;
    --font-size-h5: 1.2rem;
    --font-size-h6: 1rem; 
    --font-size-body: 1rem; 


    /* Colors */  
    --mainColor: var(--myBlack);
    --backgroundColor: var(--myWhite);
    
    --myWhite: #FFF; 
    --myBlack: #000; 
    --myBeige: #fefbfd; 
    --myCreamy: #fcf7f9; 
    --myPurple: #B45AFF; 
    --myPink: #FF64C8; 
    --myBlue: #008CC8; 
    --myGreen: #50AA5A; 
    
    --myMint: #CCFFCC; 
    --myOrange: #FADD06; 
    --myYellow: #FADD06; 
    --myRed: #F15914; 
    --myMint: #CCFFCC;
    --myGrey: #F2F2F2;
    
    /* Opaque gradient levels */
    --myPurple-100: var(--myPurple);
    --myPurple-80: #C37BFF; 
    --myPurple-60: #D29CFF; 
    --myPurple-40: #E1BDFF; 
    --myPurple-20: #E8CDFF; 
    
    --myBlue-100: var(--myBlue);
    --myBlue-80: #33A3D3; 
    --myBlue-60: #66BADE; 
    --myBlue-40: #99D1E9; 
    --myBlue-20: #CCE8F4; 
    
    --myPink-100: var(--myPink);
    --myPink-80: #FF83D3; 
    --myPink-60: #FFA2DE; 
    --myPink-40: #FFC1E9; 
    --myPink-20: #FFBEE8; 
    
    --myGreen-100: var(--myGreen);
    --myGreen-80: #73BB7B; 
    --myGreen-60: #96CC9C; 
    --myGreen-40: #B9DDBD; 
    --myGreen-20: #DCEEDE; 




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

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

    /* Blocks */
    --cols: 16; 
    --block: calc(100vw / var(--cols)); 

    /* Widths */
    --gutterSide: var(--block);
    --gutterTop: 1rem;
    --maxWidth: calc(var(--block) * calc(var(--cols) - 2));
    --maxWidthHug: calc(var(--block) * var(--cols));
    --width: calc(100% - calc(var(--gutterSide) * 2));
    --gap: var(--block); 


    /* Margins */
    --margin: var(--block) auto;
    --paddingTop: var(--block); 
    --btnPadding: 0 0;

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

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

    /* Borders */
    --borderRadius: 0.5rem; 
    --halfBorderRadius: calc(var(--borderRadius) / 2);
    --btnBorderRadius: 1em; 
}




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

/* --------------- GENERAL --------------- */
body { min-height: 100vh; min-height: 100dvh; display: grid; grid-template-rows: 1fr auto; }
header, main, footer { max-width: var(--maxWidthUltraWide); width: 100%; margin: 0 auto; position: relative; }
nav#desktop, footer > nav, .container {max-width: var(--maxWidth); width: var(--width); margin: var(--margin); position: relative; }
section { margin: 0 auto; position: relative;  display: flex; flex-direction: column;  height: calc(var(--block-rows) * var(--block)); max-width: var(--maxWidth);}
section.ultrawide { max-width: var(--maxWidthUltraWide); width: 100%; }
section.narrow { max-width: var(--maxWidthNarrow); }
section.hug { max-width: var(--maxWidthHug); }
section:not(.hug) + section { margin-top: calc(var(--block) * -1); }
section.hug div.hugged { width: var(--width); margin: 0 auto; }
section .content { position: relative; z-index: 2; }
.container.narrow { max-width: calc(var(--block) * 16);}


/* BLOCKS */
.block-grid { position: absolute; left: 0; top: 0;  width: 100%; display: grid; grid-template-columns: repeat(var(--cols), var(--block)); grid-template-rows: repeat(var(--block-rows), var(--block));  overflow: hidden; pointer-events: none;  max-width: var(--maxWidthHug); margin: 0 auto; right: 0;  }
.block-grid > span { width: var(--block); height: var(--block); background: var(--myWhite); opacity: 0;}
.block-grid > span.go { animation: comeandgo var(--duration, 6s) ease; }
main > .block { position: absolute; top: 0; left: 0;  opacity: 0; pointer-events: none; width: var(--block); height: var(--block); }

@keyframes comeandgo { 
    0% { opacity: 0;}
    50% { opacity: 1;}
    100% { opacity: 0;}
}

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

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

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

/* BUTTONS */
button { all: unset; box-sizing: border-box; margin: 0; padding: 0; border: 0; touch-action: manipulation;  text-align: center;}
button,label { cursor: pointer;  }
.btn { padding: var(--btnPadding); border-radius: var(--btnBorderRadius); text-align: center;  position: relative;  display: inline-block; }
.btn::before,  .btn::after { content: ""; position: absolute; bottom: -.075em; width: 100%; background: currentColor; height: 1px;  left: 0;  transition: transform 500ms var(--myEase);} 
.btn::before { transform-origin: right;  transition-delay: 50ms; } 
.btn::after { transform: scaleX(0) translateX(5%);  transform-origin: left; transition-delay: 0s; }
.btn:hover::after { transform: scaleX(1);  transition-delay: 50ms;}  
.btn:hover::before { transform: scaleX(0) translateX(-5%); transition-delay: 0ms;}

/* --------------- HEADER --------------- */
header { position: fixed; z-index: 10; --link-padding: .6em;  display: flex; align-items: flex-start;  }
header img, header svg { max-width: 100%;}

/* DESKTOP NAV */
nav#desktop { margin: 0 auto; padding: 0;  z-index: 2;  }
nav#desktop > ul { display: flex; justify-content: flex-end; align-items: flex-start;}
nav#desktop > ul li {position: relative; display: flex; }
nav#desktop > ul li a { display: flex; }
nav#desktop > ul li.tickets { position: fixed;  left: 0; right: 0; margin: 0 auto; bottom: 0; display: flex; justify-content: center; pointer-events: none; height: var(--block); align-items: center; }
nav#desktop > ul li.tickets > a { background: var(--myPurple); width: calc(var(--block) * 4); height: 100%; font-family: var(--fancyFont); display: flex; align-items: center; justify-content: center; pointer-events: all; transition: background 750ms;}
nav#desktop > ul li.tickets > a > span { margin-bottom: .25em; display: inline-block; }

input.burger:checked ~ header nav#desktop > ul li.tickets > a { background: var(--myWhite);}

/* LOGO */
nav#desktop > ul > li:first-of-type {margin-right: auto; width: calc(var(--block) * 1); height: calc(var(--block) * 1);   background: var(--logoColor, var(--myWhite));  position: relative; }
nav#desktop > ul > li:first-of-type > a {  position: relative; z-index: 2;  width: 100%; height: 100%; }
nav#desktop > ul > li:first-of-type > a svg { padding: .5rem; transform-origin: top left;  transition: opacity 333ms var(--myEase) ;  }
nav#desktop > ul > li:first-of-type > a svg:first-of-type { transform: scale(2); transition-delay: 333ms; }
nav#desktop > ul > li:first-of-type > a svg + svg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; transition-delay: 0s; }

nav#desktop > ul > li:first-of-type::before,nav#desktop > ul > li:first-of-type::after, nav#desktop > ul > li:first-of-type::before,nav#desktop > ul > li:first-of-type > span { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: var(--logoColor, var(--myWhite));   transition: opacity 333ms var(--myEase)}
nav#desktop > ul > li:first-of-type::before { left: var(--block); transition-delay: 125ms;  }
nav#desktop > ul > li:first-of-type::after { top: var(--block); }
nav#desktop > ul > li:first-of-type > span { left: var(--block); top: var(--block);  transition-delay: 150ms;}
body.loading nav#desktop > ul > li:first-of-type > a svg { transition: 0s;}
body.loading nav#desktop > ul > li:first-of-type::before,body.loading nav#desktop > ul > li:first-of-type::after, body.loading nav#desktop > ul > li:first-of-type::before,nav#desktop > ul > li:first-of-type > span, body.loading nav#desktop > ul > li:first-of-type > a  { transition: 0s;}

header[data-scrolled=true] nav#desktop > ul > li:first-of-type::before, header[data-scrolled=true] nav#desktop > ul > li:first-of-type::after, header[data-scrolled=true] nav#desktop > ul > li:first-of-type > span { opacity: 0;}
header[data-scrolled=true] nav#desktop > ul > li:first-of-type > a svg:first-of-type { opacity: 0; transition-delay: 0s}
header[data-scrolled=true] nav#desktop > ul > li:first-of-type > a svg + svg { opacity: 1;  transition-delay: 333ms }

/* MOBILE NAV */
nav#mobile { position: fixed; top: 0; height: 100vh; height: 100dvh; width: 100%; display: flex; flex-direction: column; align-items: center; pointer-events: none; min-height: 100vh; min-height: 100dvh;   overflow: auto;}
nav#mobile ul { display: flex;flex-direction: column; height: 100%; margin-top: calc(var(--block) * 2); opacity: 0; transition: opacity 500ms; width: 100%; position: relative; z-index: 2;  }   
nav#mobile ul > li { display: flex; font-size: 3rem; font-family: var(--fancyFont); }
nav#mobile ul > li > a { height: calc(var(--block) * 2); display: flex; align-items: center; }
nav#mobile .content { height: 100%; width: 100%; max-width: var(--maxWidth); }
nav#mobile .block-grid { position: fixed ;}
nav#mobile .block-grid > span { animation: none;  transition: opacity var(--duration, 500ms) var(--delay, 0s) var(--myEase);}
nav#mobile .block-grid > span.animate { opacity: 1 !important;  }
body.loading nav#mobile ul { transition: 0s; } 

/* Burger */
input.burger { display: none; }
label.burger { width: var(--block); height: var(--block); display: grid; place-items: center; background: var(--myWhite); font-size: .9rem; font-family: var(--fancyFont); user-select: none;}
label.burger > span { margin-bottom: .3em; }


/* Burger checked */
input.burger:checked ~ header nav#mobile  ul { opacity: 1; pointer-events: all; }


/* --------------- FOOTER --------------- */
footer { background: var(--myPurple); margin-top: 0;}
footer > nav { display: flex; flex-direction: column; align-items: center; font-family: var(--fancyFont);  }
footer > nav > a:last-of-type  { margin: 2rem 0 ;}
footer svg { width: 10rem; height: auto;}
/* footer > nav > ul { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); grid-gap: 1rem;  } */
/* footer > nav > p  { font-size: 0.7rem; margin-top: 1rem; text-align: center;  } */
/* footer > nav > p a { padding: .5em .75em; border-radius: 100vmin; } */
/* footer > nav > p a:hover  { color: var(--odfCreme); background: var(--odfPink);  text-decoration: none;} */

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


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


/* =========================================================== */
/* ========================= LANDING ========================= */
/* =========================================================== */
section.landing { padding-top: 0; }
section.landing .content { max-height: 100%; min-height: calc(var(--block) * 8);}
section.landing .container { min-height: calc(var(--block) * 8); display: flex; align-items: flex-end; color: var(--myWhite);   }
section.landing article { display: grid; grid-template-columns: 1fr auto; align-items: flex-end;  width: 100%;   font-weight: 400;}
section.landing article .md { font-weight: var(--font-medium);}
section.landing .wtc { display: flex; flex-direction: column; align-items: flex-start;  font-size: var(--font-size-huge); margin-bottom: 0; line-height: 1; font-family: var(--fancyFont) }
section.landing .wtc span { font-size: var(--font-size-h1);}
section.landing picture { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity 500ms;}
section.landing picture[data-visible=false] {  opacity: 0; transition-delay: 250ms; }
section.landing .block-grid { z-index: 2;  overflow: hidden; max-height: 100%; }

section.landing .block-grid > span.animated {  animation: comeandgo var(--duration, 500ms) var(--myEase); animation-delay:  var(--delay, 0s) ; }

@media only screen and (min-width: 1600px) {
    section.landing article .md { min-width: 20rem;}
}

@media only screen and (max-width: 900px) {
    section.landing article { grid-template-columns: 1fr;}
    section.landing .container {  padding-top: calc(var(--block) * 3); }
    section.landing .wtc { margin-bottom: 1rem;}
}

section.landing.sleep-out .content { z-index: unset;  }
section.landing.sleep-out .container { z-index: 4; }
section.landing.sleep-out  .md { background: var(--myWhite); border-radius: 0;  color: var(--myBlack); height: var(--block); display: flex; align-items: center; justify-content: center;  min-width: calc(var(--block) * 4);  z-index: 2; position: relative; max-width: max-content; }

/* =========================================================== */
/* ========================== ABOUT ========================== */
/* =========================================================== */
section .content > .hugged { display: flex; align-items: center; }
section .content > .hugged .inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; width: 100%; }
section .content > .hugged .inner * { height: 100%;}
section .content > .hugged .inner .btn { height: auto;}
section .content > .hugged h2 { margin: 0; height: 100%;}

section.about .prose > * + * { margin-top: .5em; }
section.about .container > ul .inner  { display: grid; grid-template-columns: 1fr 1fr; height: 100%;  }
section.about .container > ul > li { margin-bottom: var(--block); background: var(--myCreamy);  position: relative;  overflow: hidden;}
section.about .container > ul > li:nth-of-type(2n+1) { background: var(--myBeige);}
section.about .container > ul > li article { padding: var(--block); display: flex; flex-direction: column;  align-items: flex-start; align-self: stretch;}
section.about .container > ul > li article.target {   align-self: flex-start;}
section.about .container > ul > li picture:first-of-type { opacity: 0;}
section.about .container > ul > li picture:last-of-type { position: absolute; top: 0; left: 0; width: 100%; height: calc(100% + var(--block)); }
section.about .container > ul > li img { object-fit: cover;}
section.about .container > ul > li article h3 { margin-bottom: auto;  font-weight: var(--font-medium); padding-bottom: 2em;}
section.about .container > ul > li article .btn { margin-top: 1rem;}

@media only screen and (max-width: 1024px) {
    section.about .container > ul > li article { padding: 2.5rem;  }
    section.about .container > ul > li article h3 { padding-bottom: 1.5em; }
}
@media only screen and (max-width: 778px) {
    section.about .container > ul { max-width: calc(var(--block) * 6); margin: 0 auto; }
    section.about .container > ul .inner { grid-template-columns: 1fr; height: auto;}
    section.about .container > ul > li article { padding: 1.5rem;;}
    section.about .container > ul > li picture:first-of-type { opacity: 1;}
    section.about .container > ul > li picture:last-of-type { display: none; }
}

/* =========================================================== */
/* ========================= HISTORY ========================= */
/* =========================================================== */
section.about + section.history { margin-top: calc(var(--block) * -1);}

section.history .container > .blocked { display: flex; align-items: center; } 
section.history .container > .blocked  .h2 { margin: 0; }
section.history .container > ul { display: grid; grid-template-columns: 1fr 1fr; gap: var(--block) calc(var(--block) * 2); }
section.history .content { z-index: unset; }
section.history figure > strong { position: absolute; inset: var(--inset, 0 auto 0 auto); color: var(--myWhite); font-weight: var(--font-medium);  width: var(--block); height: var(--block);  background: var(--myWhite); color: var(--myBlack); display: grid; place-items: center;  z-index: 3; }
section.history .h6 { position: relative; z-index: 3;  margin-top: .25em; max-width: 30em;}

section.history li:nth-of-type(4n+1) { --inset: var(--block) auto auto var(--block) } 
section.history li:nth-of-type(4n+2) { --inset: var(--block) var(--block) auto auto } 
section.history li:nth-of-type(4n+3) { --inset: auto auto var(--block) var(--block) } 
section.history li:nth-of-type(4n+4) { --inset: auto var(--block) var(--block) auto } 



@media only screen and (max-width: 1144px) and (min-width: 500px) {
    section.history li:nth-of-type(4n+1) { --inset: auto 0 0 auto } 
    section.history li:nth-of-type(4n+2) { --inset: auto auto 0 0 } 
    section.history li:nth-of-type(4n+3) { --inset: 0 0 auto auto } 
    section.history li:nth-of-type(4n+4) { --inset: 0 auto auto 0 } 
}

@media only screen and (max-width: 778px) and (min-width: 500px) {
    section.history li:nth-of-type(4n+1) { --inset: auto -.25rem -.25rem auto } 
    section.history li:nth-of-type(4n+2) { --inset: -.25rem auto auto -.25rem } 
    section.history li:nth-of-type(4n+3) { --inset: -.25rem -.25rem auto auto } 
    section.history li:nth-of-type(4n+4) { --inset: auto auto -.25rem -.25rem } 
    section.history .container > ul { grid-gap: .5rem;}
}

@media only screen and (max-width: 500px) {
    section.history .container > ul { grid-template-columns: 1fr; gap: 0; }
section.history li:nth-of-type(4n+1) { --inset: calc(var(--block) - 0rem) auto auto calc(var(--block) - .5rem) } 
section.history li:nth-of-type(4n+2) { --inset: calc(var(--block) - 0rem) calc(var(--block) - .5rem) auto auto } 
section.history li:nth-of-type(4n+3) { --inset: auto auto calc(var(--block) - 1rem) calc(var(--block) - .5rem) } 
section.history li:nth-of-type(4n+4) { --inset: auto calc(var(--block) - .5rem) calc(var(--block) - 1rem) auto } 
}

/* =========================================================== */
/* ========================== HERO =========================== */
/* =========================================================== */
section.hero .container { margin-top: 0; display: grid; grid-template-columns: 1fr 1fr;}
section.hero .content { z-index: unset;}
section.hero .block-grid { z-index: 2;  }
section.hero article { position: relative; z-index: 3; display: flex; flex-direction: column; justify-content: center;  padding-right: var(--block);  }
section.hero article .md { max-width: 24em; margin: auto;}
section.hero article .h3 { font-weight: var(--font-medium); }
section.hero article .btn { display: inline-block; margin-top: .25em;}
section.hero img { object-fit: cover;}


@media only screen and (max-width: 1144px) {
    section.hero { width: 100%; max-width: 100%;}
    section.hero .container { grid-template-columns: 1fr; gap: 2rem;  max-width: calc(var(--block) * 6); width: 100%;  }
    section.hero .container article { padding: 0;  width: var(--width); margin: 0 auto; }
    section.hero .container .blocked { order: -1; }
    section.hero .container .blocked picture { height: calc(var(--block) * 4);}
}


/* =========================================================== */
/* ========================== INTRO ========================== */
/* =========================================================== */
section.intro .h1 { font-family: var(--fancyFont);  font-size: 4rem; }
section.intro article { display: grid; grid-template-columns: auto auto; grid-gap: calc(var(--block) * 1);  padding-top: var(--block);}
section.intro article .blocked { background: var(--myGreen); max-width: calc(var(--block) * 11); margin-left: auto; }
section.intro article .md { padding: var(--block); }
section.landing + section.intro article { padding-top: 0;}
section.landing + section.intro article .h1 { font-size: var(--font-size-h2); max-width: 8em;}

@media only screen and (max-width: 1694px) {
    section.intro article .h1 { margin-bottom: 0; height: calc(var(--block) * 2); align-items: center; display: flex;  }
    section.intro article .blocked { max-width: calc(var(--block) * 7); width: 100%; }
}

@media only screen and (max-width: 1060px) {
    section.intro article { grid-template-columns: 1fr; gap: 0;}
    section.intro article .blocked {  margin-left: 0; width: 100%; max-width: calc(var(--block) * 8);}
}

@media only screen and (max-width: 778px) {
    section.intro article .md { padding: 2rem; }
    section.intro + section.slider { margin-top: calc(var(--block) * -1);}
}

/* ========================================================== */
/* ====================== TEXT SLIDER ======================= */
/* ========================================================== */
section.slider {  max-width: 100vw; width: 100%;  user-select: none;  overflow: hidden; display: flex; align-items: center; }
section.slider::before { display: none; }
section.slider .container { margin: 0 auto;  display: flex; flex-direction: column; align-items: center;  background: var(--myLightPink); border-radius: var(--borderRadius); }
section.slider .container > div { width: 100%; }
section.slider .container > div > div  { width: 100%; position: relative; overflow: hidden;  padding: 1rem 0;  }
section.slider .blocked { display: flex; align-items: center; }
section.slider div > ul { display: flex;  width: max-content; align-items: center; --m:0; transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, var(--m), 0, 0, 1); will-change: transform;  }
section.slider div > ul ul { display: flex; --slider-gap: 3rem; align-items: center; }
section.slider div > ul ul li { font-size: var(--font-size-h1); font-family: var(--fancyFont);  white-space: nowrap; display: flex; align-items: center; justify-content: center; margin-right: var(--slider-gap); position: relative; width: auto; border: 2px solid var(--myBlack10); border-radius: 100vmin; height: 2.2em;}

section.slider.slider + section.speakers {margin-top: 0;}

@media only screen and (max-width: 600px) {
    section.slider { height: calc(var(--block) * 2);}
    section.slider div > ul ul { --slider-gap: 1.5rem;}
    section.slider div > ul ul li { font-size: var(--font-size-h2);}
}



/* =========================================================== */
/* ======================== SPEAKERS ========================= */
/* =========================================================== */

section:not(.hug) + section.speakers { margin-top: var(--block);}
section.speakers { max-width: 100%; width: 100%; }
section.speakers .hugged { max-width: var(--maxWidth); margin: 0 auto; width: var(--width); }
section.speakers .slider { overflow: auto;  scroll-snap-type: x mandatory; max-width: 100vw;}
section.speakers ul { max-width: var(--maxWidth);  margin: 0 auto;  display: flex; align-items: stretch;  }
section.speakers ul li { max-width: calc(var(--block) * 4); flex-shrink: 0; background: var(--ownColor); scroll-snap-align: center;}
section.speakers ul li picture { padding: var(--block); padding-right: 1rem; padding-top: 0; padding-bottom: 0rem; }
section.speakers ul li picture img { box-shadow: calc(var(--block) * -.5) calc(var(--block) * .5) 0px 0px rgba(255,255,255,0.2); }
section.speakers ul::after { content: ""; height: 1px; opacity: 0; width: var(--gutterSide); flex-shrink: 0; pointer-events: none; }
section.speakers ul li h3 { margin: 0; display: flex; align-items: center; padding: 0 1rem; height: var(--block);  font-family: var(--fancyFont);  white-space: nowrap;}
section.speakers ul li h3:last-of-type { justify-content: flex-end; margin-bottom: auto;  z-index: 2; position: relative; margin-top: -.1em; }
section.speakers ul li .h6 {display: flex;  width: calc(100% - 2rem); margin: .4em auto 0; font-size: .9rem; align-items: center;  }
section.speakers ul li .h6 strong { font-weight: var(--font-medium);}
section.speakers ul li .h6 > a {padding: 0.25rem; background: rgba(255,255,255,0.2); display: inline-flex; align-items: center; justify-content: center;  margin-left: auto;  transition: background 333ms var(--myEase);}
section.speakers ul li .h6 > a:hover { background-color: rgba(255,255,255,0.4);}
section.speakers ul li .h6 > a svg {color: var(--myBlack); width: .8rem; height: auto;  }

section.speakers ul li:nth-of-type(18n+1) { background: var(--myBlue-20); }
section.speakers ul li:nth-of-type(18n+2) { background: var(--myBlue-40); }
section.speakers ul li:nth-of-type(18n+3) { background: var(--myBlue-60); }
section.speakers ul li:nth-of-type(18n+4) { background: var(--myBlue-80); }
section.speakers ul li:nth-of-type(18n+5) { background: var(--myBlue-100); }
section.speakers ul li:nth-of-type(18n+6) { background: var(--myBlue-80); }
section.speakers ul li:nth-of-type(18n+7) { background: var(--myBlue-60); }
section.speakers ul li:nth-of-type(18n+8) { background: var(--myBlue-40); }
section.speakers ul li:nth-of-type(18n+9) { background: var(--myBlue-20); }

section.speakers ul li:nth-of-type(18n+10) { background: var(--myPurple-20); }
section.speakers ul li:nth-of-type(18n+11) { background: var(--myPurple-40); }
section.speakers ul li:nth-of-type(18n+12) { background: var(--myPurple-60); }
section.speakers ul li:nth-of-type(18n+13) { background: var(--myPurple-80); }
section.speakers ul li:nth-of-type(18n+14) { background: var(--myPurple-100); }
section.speakers ul li:nth-of-type(18n+15) { background: var(--myPurple-80); }
section.speakers ul li:nth-of-type(18n+16) { background: var(--myPurple-60); }
section.speakers ul li:nth-of-type(18n+17) { background: var(--myPurple-40); }
section.speakers ul li:nth-of-type(18n+18) { background: var(--myPurple-20); }

/* 
header,footer,
section.onderdelen,
section:not(.speakers) { display: none !important; } */

/* =========================================================== */
/* =================== PROGRAMMAONDERDELEN =================== */
/* =========================================================== */
section.onderdelen { background: var(--myGreen); }
section.onderdelen .content { padding: var(--block) 0; }
section.onderdelen ul li h3:last-of-type { justify-content: flex-start;  margin: 0; padding: 0;}
section.onderdelen ul li h3 { height: auto;}
section.onderdelen ul li .inner { padding: 1rem 1rem 2rem;  height: 100%; display: flex; flex-direction: column; }
section.onderdelen ul li { max-width: calc(var(--block) * 6);  }
section.onderdelen ul li > .inner p:has(a):last-child { margin-top: auto; padding-top: 1rem;  }

section.onderdelen ul li:nth-of-type(7n+1) { background: var(--myGreen-80); }
section.onderdelen ul li:nth-of-type(7n+2) { background: var(--myGreen-60); }
section.onderdelen ul li:nth-of-type(7n+3) { background: var(--myGreen-40); }
section.onderdelen ul li:nth-of-type(7n+4) { background: var(--myGreen-20); }
section.onderdelen ul li:nth-of-type(7n+5) { background: var(--myGreen-40); }
section.onderdelen ul li:nth-of-type(7n+6) { background: var(--myGreen-60); }
section.onderdelen ul li:nth-of-type(7n+7) { background: var(--myGreen-80); }

@media only screen and (max-width: 778px) {
    section.onderdelen ul li { max-width: calc(var(--block) * 5);}   
    section.onderdelen .content {padding-top: 0;}
}

/* =========================================================== */
/* ======================== TIMETABLE ======================== */
/* =========================================================== */
section.timetable.timetable { margin-top: 0; }
section.timetable .container { margin-top: 0;}
section.timetable .h1 { font-family: var(--fancyFont); margin: 0;}
section.timetable .blocked  {  display: flex; align-items: center;  justify-content: center;  }

.table { 
    --stages: 4; 
    --hours: 40;  
    --two-hours: 24;
    --hour: 12;
    --half-hour: 6;
    --kwartier: 3; 
    --five-min-blocks: calc((var(--hours)) * var(--hour) + 2);  

    --stage-width: calc(var(--block) *2);
    --time-text-padding: 25px; 

}
.table { display: grid; grid-template-rows: repeat(var(--stages), var(--block)); background: var(--myWhite);  border: 1px solid var(--myPurple); overflow: auto;}

/* Times */
.table > .times .time { display: flex; flex-direction: column; align-items: center; grid-column: span var(--hour);  }
.table > .times .sticky { background: var(--myPurple-20); font-size: .8rem;}
.table > .times .time > strong { font-family: var(--fancyFont); margin-top: .35em; display: flex; align-items: center;   }  
.table > .times .time div { display: grid; grid-template-columns: repeat(4,25%); font-size: 14px; align-items: flex-end; width: 100%;   margin-top: auto;  position: relative; }
.table > .times .time div::before {  position: absolute; bottom: 0; transform: translate(-50%, 100%); height: calc(var(--stages) * var(--block));  content: ""; width: 1px; background: var(--myPurple-20);  left: 100%;  }
.table > .times .time div > span { transform: translateX(-50%); margin-bottom: .5em;}
.table > .times .time div > span::before { position: absolute; bottom: 0; transform: translate(-50%, 100%);  height: calc(var(--stages) * var(--block));  content: ""; width: 1px; background: var(--myPurple); opacity: .075; left: 50%; pointer-events: none; }
.table > .times .time div > span { margin-right: auto;}
.table > .times .time:last-of-type { grid-column: span 2; }

/* Stages */
.table > ul { height: var(--block); display: grid; grid-template-columns: var(--stage-width) var(--time-text-padding) repeat(var(--five-min-blocks), calc(var(--block) / 3)); border-bottom: 1px solid var(--myPurple-20);}
.table > ul > .sticky { grid-column: 1; background: var(--myPurple-60); display: grid; place-items: center; font-weight: var(--font-medium);  position: sticky; left: 0; z-index: 3; }
.table > .stage > .event { grid-column: span var(--half-hour); display: grid; place-items: center;  font-size: 12px; padding: .5em; text-align: center; position: relative; z-index: 2; height: calc(var(--block) - 1px); overflow: hidden; background: var(--ownColor, --myPurple-20); }
/* .table > .stage > .event:nth-of-type(4n+1) { background: var(--myPurple-40); } */
/* .table > .stage > .event:nth-of-type(4n+2) { background: var(--myPurple-60); } */
/* .table > .stage > .event:nth-of-type(4n+3) { background: var(--myPurple-80); } */

/* Days */
.table > .days > .day { text-align: center; display: flex; align-items: center; grid-column: span 193;  background: var(--myWhite);  position: relative; }
.table > .days > .day:last-of-type {  padding-left: 1rem;  grid-column: span 288;}
.table > .days > .day::after { content: ""; height: 100%; right: 0; transform: translateX(50%); background: var(--myPurple-20); width: 1px;position: absolute; }
.table > .days > .day  > span {position: sticky; left: calc(var(--block) * 2 + 1rem); margin-right: var(--block); }
.table > .days .sticky { background: var(--myPurple-20); font-size: .8rem; font-weight: var(--font-regular);}

@media only screen and (max-width: 778px) {
    section.timetable .container { margin-top: var(--block);  width: 100%; max-width: 100%;}
    .table > ul { --stage-width: var(--block);}
    .table > ul > .sticky { font-size: .75rem; }
}

/* =========================================================== */
/* ======================== PARTNERS ========================= */
/* =========================================================== */
section.partners .container > ul { display: flex; flex-wrap: wrap;}
section.partners .container > ul > li { width: calc(100%  / 4);}

section.partners .container > ul > li:nth-of-type(3n+1) { background: var(--myPurple-20);}
section.partners .container > ul > li:nth-of-type(3n+2) { background: var(--myPurple-40);}
section.partners .container > ul > li:nth-of-type(3n+3) { background: var(--myPurple-60);}

section.partners .container > ul > li .inner { display: flex; flex-direction: column; align-items: center; padding: 1rem; justify-content: center; }
section.partners .container > ul > li a { display: flex; flex-direction: column; height: 100%; justify-content: center; }
section.partners .container > ul > li picture { max-width: 8rem; max-height: 8rem; }
section.partners .container > ul > li picture img { object-fit: contain;}

/* section.partners .container > ul > li:nth-of-type(6) ~ li {  width: calc(100% / 6);} */
/* section.partners .container > ul > li:nth-of-type(6) ~ li picture { max-width: 5rem;} */

@media only screen and (max-width: 500px) {
    section.partners .container > ul { display: grid; grid-template-columns: 1fr 1fr;  grid-template-rows: repeat(6, calc(var(--block) * 2))}
    section.partners .container > ul li { width: 100%;  padding: 2rem;  }
}


/* =========================================================== */
/* ====================== IMAGE GALLERY ====================== */
/* =========================================================== */
section.images ul { display: grid; grid-template-columns: 1fr 1fr; gap: var(--block);}
section.images ul li { position: relative; }
section.images ul li picture { opacity: 0;}
section.images ul li picture img { object-fit: cover;}
section.images ul li picture + picture { opacity: 1; position: absolute; top: 0; left: 0; width: 100%; height: 100%;  }

/* --------------- PROSE CONTENT --------------- */
.prose > * + * { margin: 1.5em 0 0;}
.prose img,  .prose iframe { width: 100%; } 
.prose ul, .prose ul ul ul { list-style: disc;}
.prose ul ul,.prose ul ul ul ul { list-style: circle; }
.prose :is(ol,ul)  { padding-left: 1em;}
.prose :is(ol,ul) :is(ol,ul) { margin: .5em 0; }
.prose blockquote { position: relative; font-style: italic; font-size: 1.5rem; padding-left: .8em; border-left: .25rem solid var(--mainColor);}
.prose > * strong { --font-weight: var(--font-medium); font-weight: var(--font-medium); }
.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) + :is(h1,h2,h3,h4) { margin-top: .2em;}


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


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


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


/* MAX */
@media only screen and (min-width: 2750px) {
    :root { 
        --block: calc(2750rem / 24 / var(--cols)); 
    }    
}

@media only screen and (max-width: 778px) {
    :root { 
        --width: calc(100% - 1rem);
        --maxWidth: calc(100% - 1rem);
        --gutterTop: 1rem; 
        --gutterSide: 1rem; 

        --font-size-huge: 4.5rem;
        --font-size-h1: 3rem;
        --font-size-h2: 2rem;
        --font-size-h3: 1.6rem;
    }
    nav#mobile, .mobile { display: block; }
    nav#mobile ul > li { margin-left: .5rem; font-size: var(--font-size-h2); }
    nav#mobile ul > li > a { height: var(--block); }
}

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

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

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