* {padding: 0; margin: 0;  border: 0; box-sizing: border-box; font-weight: var(--font-weight);  font-variation-settings: 'wght' var(--font-weight);  accent-color: red;}
*::before, *::after { box-sizing: border-box; }
html {font-size: clamp(15.8px, 1.08vw, 19px); scroll-behavior: smooth; overscroll-behavior: none;  }
html.lenis,html.lenis body{height:auto}.lenis:not(.lenis-autoToggle).lenis-stopped{overflow:clip}.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}.lenis.lenis-smooth iframe{pointer-events:none}.lenis.lenis-autoToggle{transition-property:overflow;transition-duration:1ms;transition-behavior:allow-discrete}
body {font-size: var(--font-size-body); color: var(--mainColor); font-family: var(--primary-font); --font-weight: var(--font-regular); background: var(--backgroundColor); line-height: var(--line-height-regular);  -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased }
a {text-decoration: none; color: inherit; }
/* p a:hover {text-decoration: underline;} */
ul {list-style-type: none;}
p {margin-bottom: 1.4em;}
p:last-of-type { margin-bottom: 0;}
br {margin:0; height: 0;}
strong, em { font-style: normal; --font-weight: var(--font-regular); }
p strong { font-weight: var(--font-bold); }
p em { font-style: italic;}
fieldset legend { display: none;}
address { font-style: normal;}

:root {
    /* Fonts */
    --primary-font: "Teachers", system-ui, sans-serif;
    --header-font-light: "Clash Display", system-ui, sans-serif;
    --header-font-bold: "Rethink Sans", system-ui, sans-serif;

    /* Font weights */
    --font-weight: var(--font-regular);
    --font-light: 300; 
    --font-regular: 400; 
    --font-medium: 500; 
    --font-semibold: 600; 
    --font-bold: 700; 

    /* Font sizes */
    --font-size-h1: 4rem;        /* 72px */
    --font-size-h2: 3.56rem;     /* 64px */
    --font-size-h3: 2.67rem;     /* 48px */
    --font-size-h4: 2.23rem;     /* 40px */
    --font-size-h5: 1.78rem;     /* 32px */
    --font-size-h6: 1.33rem;     /* 24px */
    --font-size-body: 1.11rem;   /* 20px */
    --font-size-little: .9rem;   /* 16px */
    --font-size-tiny: .75rem;    /* 12px */


    /* Colors */  
    --mainColor: white;
    --backgroundColor: black;

    --myGrey: #A4A6B2;
    --myYellow: #FEEF00; 

    /* Line heights */
    --line-height-small: 1.1;
    --line-height-regular: 1.3;
    --line-height-large: 1.5; 

    /* Widths */
    --gutter-side: var(--font-size-body);
    --gutter-top: .5rem;
    --max-width: 90rem;
    --max-width-ultra-wide: 150rem;
    --max-width-wide: 110rem;
    --max-width-narrow: 55rem;
    --width: calc(100% - calc(var(--gutter-side) * 2));
    --gap: 4rem; 

    /* Margins */
    --margin: var(--margin-y) auto;
    --margin-y: 5rem; 
    --padding-top: 5rem;
    --btn-padding: var(--btn-padding-block) var(--btn-padding-inline);
    --btn-padding-block: 0.6em;
    --btn-padding-inline: 1.4em; 

    /* Transitions */
    --my-ease-out: cubic-bezier(.17,.84,.44,1); 
    --my-ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1); 
    --my-ease: cubic-bezier(0.4, 0, 0.2, 1);

    /* Shadows */
    --glow: 0px -2px 20px 0px rgba(206, 243, 244, 0.25);
    --drop-shadow: 0px 3px 6px 0 rgba(0,0,0,0.16);
    --blur-shadow: 10px 10px 30px 0 rgba(0,0,0,0.16);

    /* Borders */
    --border-radius: 0.5rem; 
    --half-border-radius: calc(var(--border-radius) / 2);
    --btn-border-radius: 0em; 

    /* Logos */
    --logo-width: 15rem; 
}

/* --------------- HEADERS --------------- */
h1,.h1 ,h2,.h2 ,h3,.h3, h4,.h4, h5, .h5, h6, .h6  {font-weight: var(--font-weight); font-family: var(--header-font-bold);  line-height: var(--line-height-small); margin-bottom: 0.55em; --font-weight: var(--font-semibold);}
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); } 
.little { font-size: var(--font-size-little);}
.tiny { font-size: var(--font-size-tiny);}
:is(h1,.h1 ,h2,.h2 ,h3,.h3, h4,.h4, h5, .h5, h6, .h6) em { font-family: var(--header-font-light); --font-weight: var(--font-light) }

/* --------------- GENERAL --------------- */
body { min-height: 100vh; min-height: 100dvh; display: grid; grid-template-rows: 1fr auto; }
body[data-scrollable=false] { overflow: hidden;}
main section:first-of-type { padding-top: var(--padding-top); margin-top: 0; }
header, main, footer { max-width: var(--max-width-ultra-wide); width: 100%; margin: 0 auto; position: relative; }
nav#main, footer > nav, .container {max-width: var(--max-width); width: var(--width); margin: var(--margin); position: relative; }
section { margin: 0 auto; position: relative;  scroll-margin-top: calc(var(--margin-y) + 1rem);}
section.ultrawide { max-width: var(--max-width-ultra-wide); width: 100%; }
section.narrow { max-width: var(--max-width-narrow); }

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

/* 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;  user-select: none; }

.btn.tag { text-transform: lowercase; font-size: var(--font-size-little);   display: block; max-width: max-content; transition: font-variation-settings 333ms var(--my-ease), letter-spacing 333ms var(--my-ease);  }
.btn.tag::before,.btn.tag::after { content: "["; display: inline-block; transition: transform 333ms var(--my-ease); }
.btn.tag::after  { content: "]"; }
.target:hover .btn.tag, .btn.tag:hover { --font-weight: 500; letter-spacing: -1.5%; }
.target:hover .btn.tag::before, .btn.tag:hover::before { transform: translateX(-.1em);  }
.target:hover .btn.tag::after, .btn.tag:hover::after { transform: translateX(.1em);  }

.button { background: var(--mainColor); border: 1px solid black; color: var(--backgroundColor); padding: var(--btn-padding); text-align: center; font-size: var(--font-size-little);  transition: background 500ms var(--my-ease), color 500ms var(--my-ease); --font-weight: var(--font-medium); text-transform: uppercase; display: inline-block; }
.button:hover { background: var(--myGrey); color: white;}

/* LINES */
.line, p a {  background-image: linear-gradient(transparent, transparent), linear-gradient(white, white); background-position: 0% calc(50% + 0.5em); background-repeat: no-repeat; background-size: 100% 1px, 0% 1px; transition: background-size 750ms var(--my-ease); display: inline;  padding-bottom: .15em; text-decoration: none;}
.target:hover .line, .line:not(.invert):hover, .active .line { background-size: 100% 1px, 100% 1px; }

p a { background-size: 100% 1px, 100% 1px;} 
p a:hover { background-size: 100% 1px, 0% 1px;} 

.start { display: block; }
.start .line, p a {  background-position: 100% calc(50% + .5em);}
.start:not(:hover) .line { background-size: 100% 1px, 100% 1px;}
.start svg { width: .4em; height: auto; transition: transform 750ms var(--my-ease), opacity 750ms var(--my-ease);  margin-left: .2em; }
.start:hover svg { transform: translate(.1em, -.1em);}

.animated :is(.line, p a) { transition: background-size 500ms var(--my-ease);}
.animated:not(.finished) :is(.line, p a) { background-size: 0% 1px, 0% 1px;}
.animated:not(.finished) svg { transform: translate(-.15em, .15em); opacity: 0; }

section.anime p a:hover { background-image: linear-gradient(var(--myYellow), var(--myYellow)), linear-gradient(white, white);  background-size: 100% 1px, 100% 1px; color: var(--myYellow); }

/* TITLE ANIMATE */
:is(.h1, .h2, .h3, .h4, .animate):not(.no-animate) { opacity: 0; will-change: transform; rotate: 0.1deg;  }
:is(.h1, .h2, .h3, .h4, .animate):not(.no-animate).done { opacity: 1; transition: font-variation-settings 2500ms var(--my-ease);  }
.t-a { position: relative; overflow: hidden;  display: inline-flex; padding: .25em 0em; margin: -.25em 0em;  }
.delay { --delay: 250ms; }
.t-a > span { transform: translateY(calc(100% + .5em)); display: inline-block; transition: transform 750ms var(--my-ease-out) calc(150ms + var(--delay, 0ms) + var(--i,0) * (25ms)); }
[data-animate=true] .t-a > span  {transform: translateY(0);}

/* --------------- HEADER --------------- */
header { position: fixed; z-index: 10; --link-padding: .6em; transform: translateY(.5rem); transition: transform 1000ms var(--my-ease);  pointer-events: none; right: 0; left: 0; margin-inline: auto;}

body.anime { --padding-top: 3.5rem; }
body.anime header { --logo-width: 4.5rem; transform: translateY(-.25rem);  }
body.anime nav#main > ul > li.logo { transform: translateY(.5rem);}



/* DESKTOP NAV */
nav#main { margin: 0 auto; padding: var(--gutter-top) 0; transition: padding 333ms; --font-weight: var(--font-medium); text-transform: uppercase;  pointer-events: none;}
nav#main > ul { display: grid; grid-template-columns: 1fr auto 1fr;  align-items: center;  gap: .5rem;}
nav#main > ul > li {position: relative; display: flex;  pointer-events: all;}
nav#main > ul > li.contact { margin-left: auto; }
nav#main > ul > li.logo { color: white; width: var(--logo-width);  transition:  0s;  }
nav#main > ul > li.logo a { width: 100%;  display: flex;  align-items: center;  }

nav#main > ul li.menu { margin-right: auto; isolation: isolate;}
nav#main > ul li.menu > label { z-index: 2; background: none; border: 1px solid transparent; }
nav#main > ul li.menu > label:hover ~ .sub::before { background: var(--myGrey);}
nav#main > ul li.menu > .sub {  --burger-height: calc(2.25rem + .1em + 1px);  --burger-width: calc(5.91rem + .4em);  padding: 1rem 0; position: absolute; bottom: 0; left: 0; transform: translateY(100%);  pointer-events: none; clip-path: inset(calc(var(--burger-height) * -1) calc(100% - var(--burger-width)) 100% 0); transition: clip-path 500ms var(--my-ease); display: flex; }
nav#main > ul li.menu > .sub::before {content: ""; width: var(--burger-width); height: var(--burger-height);  z-index: -1; position: absolute; top: 0rem; left: 0;  background: white;  transform: translateY(calc(var(--burger-height) * -1)); border: 1px solid black;  transition: background 500ms var(--my-ease), transform 500ms var(--my-ease), width 500ms var(--my-ease), height 500ms var(--my-ease); }
body.resizing nav#main > ul li.menu > .sub,
body.resizing nav#main > ul li.menu > .sub::before { transition: 0s;}

nav#main > ul > li.contact .button { display: flex; align-items: center; gap: .25em; padding-left: calc(var(--btn-padding-inline)  - .15em);}

nav#main .sub > * {  transform: translateY(-1rem); transition: transform 500ms var(--my-ease);  pointer-events: none;  padding-inline: 2.5rem;}
nav#main .sub ul.menu {  display: flex; flex-direction: column; align-items: flex-start;  box-shadow: var(--dropShadow);  }
nav#main .sub ul.menu li {  white-space: nowrap; margin-bottom: .4rem;}
nav#main .sub ul.menu li.mobile { display: none; }
nav#main .sub ul.menu li a { padding: 0.1rem 0; width: 100%;  font-weight: var(--font-bold); display: flex; align-items: center;  transition: font-variation-settings 333ms var(--my-ease), letter-spacing 333ms var(--my-ease);  }
nav#main .sub ul.menu li a:hover,
nav#main .sub ul.menu li.active { --font-weight: var(--font-semibold); letter-spacing: -1.5%;}
nav#main > ul > li.contact .button::before,
nav#main .sub ul.menu li.active a::before { content: ""; width: 0.2em; height: 0.2em; background: currentColor; display: inline-block; margin-right: .35rem; }
nav#main .sub ul.menu li.active.anime { color: var(--myYellow);}
nav#main .sub ul.socials { justify-content: center; margin-top: 2rem;  }

nav#main .sub ul.anime { color: black;}
nav#main .sub ul.anime::before { background: var(--myYellow);  content: ""; position: absolute; top: calc(var(--burger-height) * -1 - 1rem); left: 0; width: 100%; height: calc(100% + 2rem + var(--burger-height)); z-index: -1;   border: 1px solid black ;}

nav#main .search { display: flex; margin-top: .5rem;  }
nav#main .search .input { display: flex;  position: relative; border-bottom: 1px solid white;  padding: .2rem 0; }
nav#main .search .input button {  width: 1rem;  display: grid; place-items: center; padding: .15rem; }
nav#main .search input { background: none; font-family: var(--primary-font); font-size: 1rem;  color: white; max-width: 8rem;  transition: padding-inline 333ms var(--my-ease);}
nav#main .search input:focus-visible { outline: none; padding: 0 .1em; }
nav#main .search svg { color: currentColor;}

body.loading header,
body.loading nav#main > ul > li.logo  { transition: 0s;}

/* Burger */
input.burger { display: none; }
label.burger { display: flex; align-items: center; gap: .3rem; }
label.burger > span { pointer-events: none;}
label.burger > div {  transition: 500ms ease; width: 1rem; height: 1rem;  z-index: 99;  display: flex; align-items: center;  position: relative; margin-bottom: .05em; pointer-events: none;}
label.burger > div span { width: .6rem; height: 1px; position: absolute; background: black; transition: 500ms ease; }
label.burger > div span:nth-of-type(1) { transform: rotate(90deg) }
label.burger > div span:nth-of-type(2) { transform: rotate(0deg)}
label.burger:hover > div span { background: white;}

/* Burger checked */
input.burger:checked ~ header label.burger > div span { background: white;}
input.burger:checked ~ header label.burger > div span:nth-of-type(1) { transform: rotate(135deg);}
input.burger:checked ~ header label.burger > div span:nth-of-type(2) { transform: rotate(45deg);}

input.burger:checked ~ header nav#main .sub { pointer-events: all;  clip-path: inset(calc(var(--burger-height) * -1) 0 0 0);}
input.burger:checked ~ header nav#main .sub > * { transform: translateY(0); pointer-events: all; }
input.burger:checked ~ header nav#main .burger { color: white; }
input.burger:checked ~ header nav#main .sub::before { height: calc(100% + var(--burger-height)); width: 100%; background: var(--myGrey); }


/* --------------- FOOTER --------------- */
footer > nav { display: grid; grid-template-columns: 1fr 1.2fr 2fr;  border-top: 1px solid white; padding-top: 3.33rem; margin: 0 auto 2rem;  grid-gap: 0 2rem;}
footer > nav > ul { text-transform: uppercase; font-size: var(--font-size-little); --font-weight: var(--font-medium); }
footer > nav > ul > li { margin-bottom: .75rem; }

footer > nav > div:first-of-type { margin-bottom: 9rem;}
footer > nav > div:first-of-type p { font-size: var(--font-size-little); max-width: 22em; }
footer > nav > :is(strong,p) { font-size: 12px; text-transform: uppercase; --font-weight: var(--font-medium) ; }
footer > nav > p { opacity: .7; margin-top: auto;  margin-bottom: 0;}
footer > nav > :is(strong,p) a { opacity: .7; transition: opacity 333ms var(--my-ease); text-decoration: none;}
footer > nav > :is(strong,p) a:hover { text-decoration: none; opacity: 1;  }
footer > nav > :is(strong,p) a:hover .line { background-size: 100% 1px, 0% 1px;}

footer.clean > nav {  border-top: 0; }


ul.socials { display: flex; align-items: center; gap: 0.8rem; --icon-size: .9rem;  }
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); }
ul.socials-all {  display: flex; gap: .75rem 1.5rem; --font-weight: var(--font-medium); font-size: var(--font-size-little); text-transform: uppercase; margin-top: 3.33rem; flex-wrap: wrap;}

form.newsletter { margin-top:  2rem;}
form.newsletter fieldset { display: flex;  position: relative; }
form.newsletter fieldset > label {  position: absolute; font-size: 12px; opacity: .7; left: 1em; top: 0.8em;  --font-weight: var(--font-medium);  text-transform: uppercase; transition: transform 500ms var(--my-ease), color 500ms var(--my-ease);}
form.newsletter input { padding: .41em .41em .41em 2.4em; font-family: var(--primary-font); color: white; font-size: var(--font-size-body); background: black;  border: 1px solid white; height: 100%;  transition: background 500ms var(--my-ease), border 500ms var(--my-ease), color 500ms var(--my-ease);  border-radius: 0;}
form.newsletter input::placeholder { opacity: 0;}
form.newsletter input:focus-visible::selection { background: var(--myGrey);}
form.newsletter input[type="email"]:is(:focus, :not(:placeholder-shown)) { outline: none; background: white; color: black; }
form.newsletter input[type="email"]:is(:focus, :not(:placeholder-shown)) + label { transform: translate(-.7em, -.7em);  color: black;}
form.newsletter input[type="email"]:is(:focus, :not(:placeholder-shown)) ~ button { background: var(--myGrey);  color: white;}
form.newsletter button { --font-weight: var(--font-medium); text-transform: uppercase; padding-inline: 1em; border: 1px solid white; }
form.newsletter button:focus { outline: 3px solid red;}

form.newsletter .expand { position: absolute; bottom: 0; left: 0; transform: translateY(100%); font-size: var(--font-size-little);  display: flex; gap: 2rem; padding-top: .5em; opacity: 0; transition: opacity 250ms var(--my-ease); }
form.newsletter .expand > div {  display: flex;  gap: .25em;  align-items: center; }
form.newsletter .expand input {  accent-color: black; width: .8em; height: .8em;  }

form.newsletter:hover .expand, 
form.newsletter:has(input:focus, label:focus) .expand,
form.newsletter input[type="email"]:is(:focus, :not(:placeholder-shown)) ~  .expand { opacity: 1; }

@media only screen and (max-width: 500px) {
    form.newsletter input { padding: .5em .5em .5em 2.4em;  width: calc(100% - 6rem); }
    input { font-size: 16px !important;}
    form.newsletter button { flex-shrink: 0;}    
}

/* --------------- SECTIONS --------------- */
/* =========================================================== */
/* ========================= LANDING ========================= */
/* =========================================================== */
section.landing { overflow: hidden; position: relative; isolation: isolate;}
section.landing .h1 { max-width: 12em; margin-inline: auto; --font-weight: var(--font-semibold); }
section.landing .md  {  max-width: 25em; margin-inline: auto; }
section.landing .btn { right: 0;  z-index: 1002; position: absolute; top: -1rem; transform: translateY(-100%);}
section.landing :is(.h1,.md) { text-align: center;}

section.landing .flicker {--show-amount-right: 4; --show-width-right: 2rem;  width: var(--width); max-width: var(--max-width); margin: 0 auto;   position: relative; }
section.landing .flicker > ul { display: flex; grid-template-columns: 1.1fr .9fr;  position: absolute;  height: 100%;  width: 100%; }
section.landing .flicker > button { position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 2rem; height: auto; z-index: 1002; }
section.landing .flicker > button svg {  transition: transform 250ms var(--my-ease);}
section.landing .flicker > button:hover svg { transform: translateX(.25rem);}
section.landing .flicker .height-keeper { position: relative; height: 100%; width: calc(55% - var(--gutter-side) / 2); }
section.landing .swiper { display: none; }

li.still { position: relative; height: 100%; z-index: var(--z, 1);  transition: left 1000ms var(--my-ease), transform 1000ms var(--my-ease), width 1000ms var(--my-ease);  pointer-events: none;}
li.still strong { --font-weight: var(--font-medium);  padding-top: .2em;}
li.still div { position: absolute; top: 50%; transform: translateY(-50%); padding: 2rem;  font-size: var(--font-size-h5); line-height: var(--line-height-small);  max-width: 17em;  pointer-events: none; transition: transform 750ms var(--my-ease), line-height 750ms var(--my-ease); }
li.still picture { position: absolute; top: 0; left: 0;  width: 100%;  height: 100%; border-radius: var(--border-radius); overflow: hidden; }
li.still picture img { object-fit: cover; transition: transform 750ms var(--my-ease); }
li.still picture::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: black; opacity: .3; transition: opacity 333ms var(--my-ease); }

li.still a:hover img { transform: scale(1.1);}
li.still.still a:hover picture::after { opacity: 0.1;}
li.still a:hover div { transform: translate(1rem, -50%); line-height: var(--line-height-regular);}

.flicker li.still:not(:first-of-type) { position: absolute; left: calc(55% + var(--gutter-side) / 2 + (var(--i) - var(--step)) * var(--show-width-right)); height: 100%; width: calc(45% - (var(--gutter-side) / 2) - var(--show-amount-right) * var(--show-width-right)); transform-origin: right;  transform: scale(max(calc(1 - (0.1  * (var(--i) - var(--step)))), 0)); }
.flicker li.still:not(:first-of-type) > a { height: 100%; }

.flicker li.still.clickable { pointer-events: all;}

.flicker li.still.clear { width: calc(55% - (var(--gutter-side) / 2));  pointer-events: all;}
.flicker li.still.clear picture::after { opacity: 0.2;}
.flicker li.still.clear:not(:first-of-type) { left: 0; transform: none; }

.flicker li.still.clear.gone { transform: translateX(calc((var(--step) - (var(--i)) - 1) * (-100% - var(--gutter-side)))); }
.flicker li.still.clear.gone:first-of-type { transform: translateX(calc(var(--step) * (-100% - var(--gutter-side))));}

body.touch-device section.landing .flicker { display: none; }
body.touch-device section.landing .swiper { display: flex; }
body.touch-device section.landing .container { margin-bottom: 2rem;}

section.landing .swiper { flex-direction: column; align-items: center; }
section.landing .swiper ul { display: flex; width: 100%;  overflow: auto; scroll-snap-type: x mandatory;  gap: .7rem; max-width: 100vw;  padding-block: 2rem; margin-block: -2rem;  }
section.landing .swiper ul::before,section.landing .swiper ul::after { content: ""; width: 1px; height: 1px; flex-shrink: 0; opacity: 0; pointer-events: none; }
section.landing .swiper ul li.still { flex-shrink: 0; width: 80%; max-width: 40rem; scroll-snap-align: center; pointer-events: all;  clip-path: inset(10% 0 10% 0 round var(--border-radius)); opacity: .4; }
section.landing .swiper ul li.still img { transform: scale(1.2); transition: 0s;}
section.landing .swiper ul li.still div { text-align: center; font-size: var(--font-size-h5); transform: translateY(100%); top: unset; bottom: 0rem; transition-delay: 125ms; width: 100%;  line-height: var(--line-height-regular); max-width: 100%;}
section.landing .swiper ul li.still strong { background-position: 50% calc(50% + .5em);}
section.landing .swiper ul :is(li.still,picture,img) { height: auto; position: relative; }


section.landing .swiper ul li.still.active { clip-path: inset(0 0 0 0 round var(--border-radius)); opacity: 1;}
section.landing .swiper ul li.still.active img { transform: scale(1); }
section.landing .swiper ul li.still.active div {  transform: translateY(0);  }
section.landing .swiper ul li.still.active strong { opacity: 1; transition: opacity 500ms var(--my-ease) 125ms, background-size 750ms var(--my-ease) 700ms;  }
section.landing .swiper .btn {  position: relative; right: unset; z-index: 1; transform: none; top: unset; margin-top: 1rem;  }

body.loading section.landing .swiper ul :is(li.still, li.still img) { transition: 0s;}

@media only screen and (min-width: 1500px) {
    section.landing::after { content: ""; height: 100%; width: 15rem; background: linear-gradient(to left, black, transparent); position: absolute; top: 0; right: 0; z-index: 1001; pointer-events: none;}
}

@media only screen and (max-width: 1500px) {
    section.landing .flicker { position: relative; }
    section.landing .flicker::after { content: ""; height: 100%; width: 15rem; background: linear-gradient(to left, black, transparent); position: absolute; top: 0; right: calc(var(--gutter-side) * -1); z-index: 1001; pointer-events: none;}
}

@media only screen and (max-width: 1024px) {
    li.still strong { transition: opacity 500ms var(--my-ease) 600ms;}
    li.still:not(.clear) strong { opacity: 0;}
}
@media only screen and (max-width: 768px) {
    section.landing .swiper ul li.still div { transform: translateY(1rem); }
}


/* =========================================================== */
/* ===================== HEADER AND TEXT ===================== */
/* =========================================================== */
section.text .container { border-top: 1px solid white; }
section.text .h2 {padding-top: .5em; }
section.text .prose { display: flex; flex-direction: column; align-items: flex-start; font-size: var(--font-size-h5); max-width: 30em; }
section.text .prose p:first-of-type { margin-bottom: 0;}
section.text .prose > *:not(.start) { line-height: var(--line-height-small);}
section.text .prose > a.start { margin-top: 2.1em; }
section.text .prose .line { font-size: var(--font-size-body);  margin-top: 0;}

/* ANIME POSTER HOVERS */
section.text.has-posters ul.posters { position: absolute; --left: calc(var(--font-size-h5) * 30); left: var(--left); z-index: 2;  display: flex; top: 50%; transform: translateY(-50%); width: calc(100% - var(--left));  height: 100%; justify-content: center; align-items: center; }
section.text.has-posters ul.posters > li { max-width: 18rem; position: absolute; width: 100%; height: 100%;  opacity: 0; transition: opacity 500ms var(--my-ease);}
section.text.has-posters ul.posters > li.show { opacity: 1;}

/* LEFT-RIGHT LAYOUT */
section.text.alt h2 { padding-top: 0; }
section.text.alt .container { display: grid; grid-template-columns: 1fr 1.5fr; border: none; grid-gap: 0 calc(var(--margin-y) * 2);  align-items: flex-start; }
section.text.alt .button { font-size: var(--font-size-body);}

body.touch-device section.text.has-posters ul.posters {  display: none;  }

@media only screen and (max-width: 1250px) {
    section.text.alt .container { grid-gap: 0 var(--margin-y);}
    section.text.alt h2 { font-size: var(--font-size-h4);}
    section.text.alt .prose { font-size: var(--font-size-h6);}
}
@media only screen and (max-width: 1024px) {
    section.text.has-posters ul.posters {display: none; }    
}

@media only screen and (max-width: 768px) {
    section.text .h2 { padding-top: 1em; }

    section.text.alt .container { grid-template-columns: 1fr; gap: 0rem; }
    section.text.alt .container .button { margin-bottom: 1.5rem; }
    section.text.alt h2 { font-size: var(--font-size-h2);}
    section.text.alt .prose { font-size: var(--font-size-h5); }
}
/* header,footer,section:not(.intro) { display: none !important; } */


/* =========================================================== */
/* ====================== RELATED NEWS ======================= */
/* =========================================================== */
section.some-news .h2 { padding-top: .25em; margin-bottom: .75em; border-top: 1px solid white; }
section.some-news .container > .btn { margin-left: auto; }
section.some-news ul { display: grid; grid-template-columns: 2fr 1fr 1fr; grid-gap: var(--gutter-side);  margin-top: var(--font-size-h4);}

li.newscard { position: relative; }
li.newscard .tags { position: absolute; left: 1rem; top: 1rem;  z-index: 2;  display: flex; align-items: flex-start; gap: .25em; margin-top: 0; transition: transform 750ms var(--my-ease);}
li.newscard .tagged { background: black; }
li.newscard .tagged:last-of-type  { background: white;  color: black;}
li.newscard div { margin-top: 1.1rem; }
li.newscard picture { overflow: hidden;}
li.newscard picture img { transition: transform 750ms var(--my-ease); }

li.newscard:hover img { transform: scale(1.05);}
li.newscard:hover .tags { transform: translate(-.75rem, -.75rem); }

.tagged { font-size: var(--font-size-tiny); text-transform: uppercase; padding: var(--btn-padding);  }


@media only screen and (min-width: 1150px) {
    :is(section:not(.all-news, .standard) li.newscard:first-of-type, section.all-news ul:first-of-type li) div {  position: absolute; bottom: 0;  padding: 1rem;  }
    :is(section:not(.all-news, .standard) li.newscard:first-of-type, section.all-news ul:first-of-type li) span.btn { position: absolute; bottom: 0; transform: translateY(calc(100% + 1rem));}
    :is(section:not(.all-news, .standard) li.newscard:first-of-type, section.all-news ul:first-of-type li) picture::after { content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 35%; background: linear-gradient(to top, black, transparent); opacity: .6;}
    :is(section:not(.all-news, .standard) li.newscard:first-of-type, section.all-news ul:first-of-type li) h3 { font-size: var(--font-size-h5);}
}
@media only screen and (max-width: 1150px) and (min-width: 768px) {
    section.some-news ul { grid-template-columns: 1fr 1fr;}
    section.some-news ul li:nth-of-type(3) {display: none; }
}

@media only screen and (max-width: 768px) {
    section.some-news ul { display: flex; overflow: scroll; max-width: 100vw; width: calc(100% + var(--gutter-side) * 2); margin-left: calc(var(--gutter-side) * -1);  grid-gap: unset; gap: var(--gutter-side); scroll-snap-type: x mandatory;  }  
    section.some-news ul::before,section.some-news ul::after { content: ""; width: 1px; height: 1px; flex-shrink: 0; opacity: 0; pointer-events: none;   }
    section.some-news ul li { flex-shrink: 0; width: 18rem;  scroll-snap-align: center;}
}


/* =========================================================== */
/* ======================== ALL NEWS ========================= */
/* =========================================================== */
section.all-news .h1 { margin-bottom: 1em; }
section.all-news nav, 
section.all-news ul:last-of-type  { display: grid; grid-template-columns: 1fr 1fr; grid-gap: var(--gutter-side); align-items: flex-start; }
section.all-news nav { grid-template-columns: 1fr 1.25fr;}
section.all-news ul:first-of-type { grid-template-columns: 1fr; }
section.all-news li.newscard { margin-bottom: 4rem;}

@media only screen and (max-width: 1024px) {
    section.all-news nav { grid-template-columns: 1fr;}
}

@media only screen and (max-width: 500px) {   
    section.all-news ul:last-of-type  { grid-template-columns: 1fr;}
}

/* =========================================================== */
/* ========================== REELS ========================== */
/* =========================================================== */
section.reels { overflow: hidden;  }
section.reels .container { margin-bottom: 0;  display: grid; grid-template-columns: 1fr 1fr; grid-gap: 0 var(--gap); align-items: center;  border-top: 1px solid white; margin-top: 0; padding-top: 3.33rem; }
section.reels .container .prose { margin-inline: auto; max-width: 23em;}
section.reels .reel { transition: transform 750ms var(--my-ease); will-change: transform; grid-column: -1/1; margin-top: var(--margin-y);}
section.reels .reel[data-grabbing=true] { cursor: grabbing; }
section.reels ul { display: grid; grid-template-columns: repeat(5,1fr); grid-gap: 2rem;}
section.reels ul li { transition: 0s;  position: absolute; width: calc(100% / 5 - (1.6rem));  bottom: 0; left: 50%;  translate: -50% 5.55%; pointer-events: none; will-change: transform; transform: translateY(100%);}
section.reels ul li .media { display: flex; transform: translateY(20%); box-shadow: var(--glow); border-radius: var(--border-radius); overflow: hidden; transition: transform 750ms var(--my-ease);}
section.reels ul li .clicker { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: all;}
section.reels .height-keeper { margin: 0 auto; pointer-events: none; opacity: 0; visibility: hidden; width: calc(100% / 5 - (1.6rem));  }


section.reels ul li.active .media { transform: translateY(0%);}
section.reels ul li.active { pointer-events: all;}
section.reels ul li.active .clicker { pointer-events: none;}
section.reels .reel.transitioning ul li { transition: 500ms var(--my-ease); }


@media only screen and (max-width: 768px) {
    section.reels .container .prose { margin-left: 0; }
    section.reels .reel { margin-top: 2rem;  }
    section.reels .height-keeper { width: calc((100% / 4.7 - (1.6rem)) * 1.3);}
    section.reels ul { transform: scale(1.3);   }
    section.reels ul li { width: calc(100% / 4.7 - (1.6rem)); translate: -50% 105%}
}

@media only screen and (max-width: 500px) {
    section.reels .height-keeper { width: calc((100% / 4.1 - 1.6rem) * 1.5); }
    section.reels ul li { width: calc((100% / 4.1 - 1.6rem)); }
    section.reels ul li .media { box-shadow: 0px -2px 10px 0px rgba(206, 243, 244, 0.25);}
    section.reels ul { transform: scale(1.5);   }
    
}

/* =========================================================== */
/* ========================== ABOUT ========================== */
/* =========================================================== */
section.about .container { display: grid; grid-template-columns: 1fr 2.2fr; grid-gap: 0 var(--gap); grid-template-areas: "s s" "t d"; }
section.about .h2 { grid-area: t;}
section.about .h4 { grid-area: s; padding-bottom: var(--margin-y); border-bottom: 1px solid white; margin-bottom: var(--font-size-h3); }
section.about .prose { grid-area: d; font-size: var(--font-size-h5); margin-top: 1.05em; max-width: 32em; margin-left: auto; }

section.about ul.usps { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-column: -1/1; text-align: center; border-top: 1px solid white; border-bottom: 1px solid white; margin-top: calc(var(--margin-y) * 2); }  
section.about ul.usps li { padding: var(--margin-y) 1rem;  }
section.about ul.usps li:nth-of-type(2) { position: relative; }
section.about ul.usps li:nth-of-type(2)::before,section.about ul.usps li:nth-of-type(2)::after { content: ""; width: 1px; height: 100%; position: absolute; left: 0; background: white; top: 0;  transform-origin: bottom; transform: scaleY(var(--scale, 0)); transition: transform 750ms var(--my-ease) 250ms;}
section.about ul.usps li:nth-of-type(2)::after { left: unset; right: 0; }
section.about ul.usps li:nth-of-type(2):not(.activate) { --scale: 1; }
section.about ul.usps li p { margin-inline: auto;  max-width: 14em;}

section.about + section.text .container { border: none; }
section.about + section.text h2 { padding-top: 0; }


@media only screen and (max-width: 768px) {
    section.about .container { grid-template-columns: 1fr; grid-template-areas: "s" "t" "d"; }
    section.about ul.usps { grid-template-columns: 1fr;  margin-top: var(--margin-y);} 
    section.about ul.usps li:nth-of-type(2)::before,section.about ul.usps li:nth-of-type(2)::after { width: 100%; height: 1px;  transform: scaleX(var(--scale, 0)); }
    section.about ul.usps li:nth-of-type(2)::before { top: unset; bottom: 0; }
}

/* =========================================================== */
/* ========================== TEAM =========================== */
/* =========================================================== */
section.team .container { margin-top: calc(var(--margin-y) * 2); display: grid;  grid-template-columns: auto 1fr;}
section.team .container .h2 { margin-bottom: 3.33rem; padding-bottom: .5em; max-width: max-content;}
section.team .container .h2::before { width: calc(100vw - var(--gutter-side) * 2); content: ""; height: 1px; max-width: var(--max-width); background: white;  position: absolute; bottom: 0; left: 0; }
section.team .container strong.h2 { margin: 0; padding: 0;  opacity: 0; visibility: hidden; pointer-events: none;}

section.team .container > ul { display: grid; grid-template-columns: repeat(3,1fr); grid-gap: calc(var(--font-size-h6) * 2) var(--font-size-h6);  width: 100%;  }
section.team .container > ul li .h6 { margin: .83em 0 .4em; --font-weight: var(--font-medium);}
section.team .container .btn { grid-column: -1/1; margin: 0 0 2.33rem auto;  }

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

@media only screen and (max-width: 768px) {
    section.team .container strong.h2 { display: none;  }
    section.team .container .h2 { margin-bottom: 2rem; }
    section.team .container > ul { grid-template-columns: 1fr 1fr;}
}

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


/* =========================================================== */
/* ======================= TITLE LIST ======================== */
/* =========================================================== */
ul.titles { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: var(--font-size-h6);}
ul.titles.narrow { grid-template-columns: repeat(4,1fr); grid-gap: .9rem;}

li.title picture { box-shadow: 0px 0px 0px 0px rgba(206, 243, 244, 0);  transition: box-shadow 333ms var(--my-ease); width: 100%; height: 0; padding-bottom: 148%; }
li.title picture img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;}
li.title picture:hover { box-shadow: 0px -2px 2.5rem 0px rgba(206, 243, 244, 0.65);}
li.title.landscape picture { padding-bottom: 56.25%;}

section.titles:not(:first-of-type) .h1 { font-size: var(--font-size-h2); border-bottom: 1px solid white; padding-bottom: 0.5em; margin-bottom: 3.33rem; }

@media only screen and (max-width: 768px) {
    ul.titles {  grid-template-columns: repeat(2, 1fr); }
}

/* =========================================================== */
/* ====================== TITLES INTRO ======================= */
/* =========================================================== */
section.intro .container { grid-template-columns: 1fr 2fr; display: grid; grid-gap: 0 var(--gap);}
section.intro .container .h1 { max-width: 6.3em;}
section.intro .prose { font-size: var(--font-size-h5); margin: 1.2rem 0 var(--margin-y);  }
section.intro ul.titles { grid-column: -1/1;}

@media only screen and (max-width: 768px) {
    section.intro .prose { margin: 0;}
}

/* =========================================================== */
/* ======================= HIGHLIGHTS ======================== */
/* =========================================================== */
@media only screen and (max-width: 768px) {
    section.highlights ul.titles { margin-left: calc(var(--gutter-side) * -1); width: calc(100% + calc(var(--gutter-side) * 2));  display: flex; overflow: auto; max-width: 100vw; scroll-snap-type: x mandatory;}
    section.highlights ul.titles > li { width: 15rem; flex-shrink: 0; scroll-snap-align: center;}
    section.highlights ul.titles::before,section.highlights ul.titles::after { width: 1px; height: 1px; opacity: 0; pointer-events: none;  flex-shrink: 0; content: ""; }
}

/* =========================================================== */
/* ===================== FULLWIDTH MEDIA ===================== */
/* =========================================================== */
section.media .container { max-width: var(--max-width-wide);  margin-top: 1rem;  width: var(--width);}
section.media .container.contained { max-width: var(--max-width);}
section.media .container .media { display: flex; flex-direction: column; }
section.media .container picture { width: 100%; }
section.media .aspect { width: 100%; height: 0; padding-bottom: 56.25%; position: relative; }
section.media .aspect[data-aspect="219"] { padding-bottom: 42.85%;}
section.media .aspect[data-aspect="219"] :is(.media, .media > *) { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;}

section.media.halo .halo { position: absolute; top: 0; left: 0; width: 100%; height: 100%;  max-width: var(--max-width); right: 0; margin: 0 auto; }
section.media.halo .halo::before { content: ""; position: absolute; bottom: 0; width: 100%; height: 0; padding-bottom: 100%; border-radius: 50%; background:  radial-gradient(var(--halo-color) 25%, transparent 60%) center center / 170% 100%;  left: 50%; transform: translate(-50%, 25%) scale(0); filter: blur(2rem);   clip-path: inset(70% 0 0 0); transition: transform 2500ms var(--my-ease);}
section.media.halo:not(.activate) .halo::before  { transform: translate(-50%, 25%) scale(1); }

section.media > button { opacity: 0; transition: opacity 333ms var(--my-ease);  position: sticky; bottom: 1rem; left: 50%; transform: translate(-50%, 0) rotate(90deg); width: 2rem; height: auto; z-index: 2;  display: flex; flex-direction: column; align-items: center;  margin-top: calc(-3rem - var(--margin-y)); margin-bottom: calc(var(--margin-y) * 1.2); }
section.media.show-arrow > button { opacity: 1; }

section.media .media.media.media > button { position: absolute; top: unset; left: unset; bottom: 0.2rem; width: 2rem; height: 2rem;  right: 0.2rem;  z-index: 2; background: black; color: white;  padding: .25em .5em;  border-radius: 0%;  cursor: pointer; }
section.media .media video:not(.muted) ~ button svg:nth-of-type(2) { display: none; }
section.media .media video.muted ~ button svg:nth-of-type(1) { display: none; }

section.media:first-of-type {  margin-bottom: 3.33rem ;}
section.media:first-of-type .container { margin-bottom: 0; }
section.media:first-of-type + section.text.alt .container { margin-top: 3.33rem;}

/* @media only screen and (min-width: 1600px) { */
    section.media:first-of-type .container {  overflow: hidden;  min-height: 15rem; max-height: calc(100vh - 3.33rem - (var(--font-size-h2) * 1.5) - var(--padding-top)); display: flex; align-items: center;  }
/* } */

@media only screen and (min-width: 768px) {
    section.media { min-height: 20rem;}
}

@media only screen and (max-width: 768px) {
    section.media.halo .halo::before { clip-path: inset(50% 0 0 0);}
    body.titles section.media:first-of-type .container { min-height: unset; margin-top: 2rem;  }
    body.anime section.media:first-of-type .container { margin-top: 1.5rem; }
}

/* =========================================================== */
/* ==================== HIGHLIGHTED TITLE ==================== */
/* =========================================================== */
section.highlight .container { display: grid; grid-template-columns: 1fr 1.5fr;  grid-gap: 0 calc(var(--margin-y) * 2); border-top: 1px solid white; padding-top: var(--margin-y);}
ul.details { display: flex; flex-direction: column;  }
ul.details li > strong { opacity: .5; margin-bottom: .5em; display: block; }
ul.details li > :is(a,p) { font-size: var(--font-size-h6); margin-bottom: 1em;  max-width: 15em; }
ul.details li > a { display: block;  max-width: unset;}

body:has(section.powster) section.highlight picture { display: none; }
body:has(section.powster) section.highlight article { width: 100%; grid-column: 2;}
body:has(section.powster) section.highlight article ul.details {flex-direction: row; gap: 1rem 3.33rem; width: 100%; flex-wrap: wrap; }

@media only screen and (max-width: 1250px) {
    section.highlight .container { grid-gap: 0 var(--margin-y);}
}

@media only screen and (max-width: 768px) {
    section.highlight .container { grid-gap: 0 2rem;}
    section.highlight .container picture { display: flex; align-items: flex-start; }
    section.highlight .container img { object-fit: contain;}
    body:has(section.powster) section.highlight article { grid-column: unset;}

    
}

/* =========================================================== */
/* ======================== SEO TEXT ========================= */
/* =========================================================== */
section.simple { font-size: var(--font-size-little);}

/* =========================================================== */
/* ===================== RELATED TITLES ====================== */
/* =========================================================== */
section.related .container { display: grid; align-items: flex-end; grid-gap: 0 var(--gap); grid-template-columns: 1fr auto;  padding: 2.66rem 0 2.66rem; border-top: 1px solid white;  }
section.related .container .h2 { margin-bottom: 0; }
section.related .container .btn { margin-bottom: 1em;}
section.related .container > ul { grid-column: -1/1; margin-top: 2.66rem; }

li.title.landscape > a { height: 100%; display: flex;  flex-direction: column; }
li.title.landscape picture img { height: 100%; object-fit: cover;}
li.title.landscape .h6 { margin-top: .5em; --font-weight: var(--font-medium); }
li.title.landscape .h6 br { display: none; }

@media only screen and (max-width: 768px) {
    section.related ul.titles { margin-left: calc(var(--gutter-side) * -1); width: calc(100% + calc(var(--gutter-side) * 2));  display: flex; overflow: auto; max-width: 100vw; scroll-snap-type: x mandatory; margin-top: 1rem; }
    section.related ul.titles > li { width: 17rem; flex-shrink: 0; scroll-snap-align: center;}
    section.related ul.titles::before,section.related ul.titles::after { width: 1px; height: 1px; opacity: 0; pointer-events: none;  flex-shrink: 0; content: ""; }
    section.related .btn { order: 2; margin: 1rem 0 1rem auto; }
}

/* =========================================================== */
/* ====================== NEWS ARTICLE ======================= */
/* =========================================================== */
section.standard article { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 0 var(--margin-y); align-items: flex-start;}
section.standard h1 { margin-bottom: 1.2em; }
section.standard .sticky { position: sticky; top: 6rem;}
section.standard div > picture { margin: 0 0 1.5em; }
section.standard .prose h2.h5 { margin-bottom: 1rem;}

section.standard div.related ul { display: grid; grid-template-columns: 1fr 1fr; grid-gap:  var(--font-size-h6); }

@media only screen and (max-width: 1024px) {
    section.standard article { grid-template-columns: 1fr; }
    section.standard .sticky { position: relative; top: unset;}
    section.standard div > picture { margin: 0 0 1.5em; }
}


@media only screen and (max-width: 768px) {
    section.standard div.related ul {grid-template-columns: 1fr; } 
}

/* =========================================================== */
/* ========================= CONTACT ========================= */
/* =========================================================== */
section.contact .container { display: grid; grid-template-columns: .85fr 1fr; grid-gap: 0 var(--gap); align-items: flex-start; }
section.contact article { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 2rem;}
section.contact ul.details li { display: flex; flex-direction: column; align-items: flex-start; margin-bottom: 1em;  }
section.contact ul.details li a { pointer-events: none; margin-bottom: 0.5em;}
section.contact ul.details li a span { pointer-events: all;}
section.contact .media { grid-column: -1/1;}

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

@media only screen and (max-width: 600px) {
    section.contact article { grid-template-columns: 1fr; grid-gap: 0;}
    section.contact article ul:last-of-type { order: -1;}
}

/* =========================================================== */
/* ======================= ALL TITLES ======================== */
/* =========================================================== */
section.titles.all .container {  display: grid; grid-template-columns: 1fr 1fr;  align-items: flex-end; }
section.titles.all .container .h1 { margin-bottom: 0; }
section.titles.all ul.titles { grid-column: -1/1; margin-top: var(--margin-y);  }
section.titles.all ul.titles li[data-visible=false] { display: none; ;}

fieldset.filter { display: flex; flex-direction: column; align-items: flex-start;   margin-bottom: .5em;}
fieldset.filter label {opacity: .5; display: block;   font-size: var(--font-size-little); text-transform: uppercase; margin-bottom: 0.1em; }
fieldset.filter .select { position: relative;  display: flex; align-items: center;  padding-right: 1.5rem; cursor: pointer;}
fieldset.filter .select::before, fieldset.filter .select::after { content: ""; width: .5rem; height: 2px; position: absolute; right: 0; transform: translateX(-50%) rotate(var(--r, -45deg)) translateY(.2rem); background: white; border-radius: .5rem;}
fieldset.filter .select::before { --r: 45deg; }
fieldset.filter :is(select, strong)  { background: none; color: white;  font-family: var(--header-font-bold); font-size: var(--font-size-h5); --font-weight: var(--font-medium); }
fieldset.filter select { appearance: none; -webkit-appearance: none; -moz-appearance: none; accent-color: white; color: black; opacity: 0; position: absolute; top: 0; left: 0; width: 100%; height: 100%; font-size: var(--font-size-body); cursor: pointer; }


@media only screen and (max-width: 768px) {
    section.titles.all .container { grid-template-columns: 1fr;  }
    fieldset.filter { margin-top: 1.5rem; }
}

/* =========================================================== */
/* ========================== LEGAL ========================== */
/* =========================================================== */
section.legal article { max-width: var(--max-width-narrow); margin: 0 auto; }
section.legal article h1 { font-size: var(--font-size-h4);}

/* =========================================================== */
/* ========================= SEARCH ========================== */
/* =========================================================== */
section.search .container { margin-top: 2em; display: flex; flex-direction: column;  align-items: center;  }
section.search .container > ul { width: 100%; }
section.search .container > ul > li { margin-bottom: var(--margin-y); }
section.search .container > ul > li > ul { display: grid; grid-template-columns: repeat(4,1fr); grid-gap: 1rem; }
section.search .container ul.pages > li a { min-height: 7em; padding: 1em;  display: block; transition: background 333ms; height: 100%;  border: 1px solid white;}
section.search .container ul.pages > li a strong { margin-bottom: .8em; }
section.search .container > ul:not(:empty) ~ .no-results { display: none; }

section.search .no-results { max-width: 32em; margin: var(--margin-y) auto; display: none; }
section.search .no-results h2 { font-size: var(--font-size-h6); }

section.search li.first-view.first-view  {grid-column: -1/1; border: none; text-align: center; max-width: 13em; margin: 2rem auto;  }


body.show section.search .container > *:not(ul) { display: initial; }

form.searchbar { display: flex; align-items: center; position: relative; margin-top: auto;  width: 100%; max-width: 20rem;  margin-bottom: 3.33rem; }
form.searchbar input { font: inherit; width: 100%; padding: .5em 2.8em .5em 0em;  border-bottom: 1px solid white;  background: none; transition: background 333ms var(--my-ease), color 333ms var(--my-ease), padding 333ms var(--my-ease);   width: 100%; color: white; }
form.searchbar input::selection { background: var(--myGrey); color: white;}
form.searchbar input::placeholder { opacity: .5;  color: white;}
form.searchbar input:focus-visible { background: white; color: black; outline: none; padding-left: .25em;}
form.searchbar input:focus-visible::placeholder,
form.searchbar input:focus-visible ~ button svg { color: black;}

form.searchbar button { position: absolute; right: 0; height: 100%; display: flex; align-items: center; justify-content: center;  width: 2.25rem; border-radius: .25rem;  top: 0; }
form.searchbar button::before { width: 100%; height: 100%; content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background: var(--myDarkOrange); border-radius: 50%;  opacity: 0; transition: opacity 250ms; border-radius: .25rem;}
form.searchbar button svg { transition: color 250ms; position: relative; z-index: 2;  height: 100%; width: 1em;  color: var(--mainColor); }
form.searchbar button:hover::before { opacity: 1;}


@media only screen and (max-width: 1024px) {
    section.search .container > ul l ul {grid-template-columns: repeat(3, minmax(0,1fr)); }
}

@media only screen and (max-width: 768px) {
    section.search .container h1  { margin-top: 1rem; }
    section.search .container > ul li ul {grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media only screen and (max-width: 450px) {
    section.search .container ul.news {grid-template-columns: 1fr; }
}


/* =========================================================== */
/* ========================= AWARDS ========================== */
/* =========================================================== */
section.awards .container { border-top: 1px solid white; padding-top: var(--margin-y);}
section.awards ul { display: flex;max-width: var(--max-width-narrow);  margin: 0 auto; gap: 3rem; justify-content: center; }
section.awards ul li { display: flex; align-items: center; justify-content: center;  }
section.awards ul li img { max-width: 12rem; max-height: 5rem;}

/* =========================================================== */
/* ==================== TICKETS - POWSTER ==================== */
/* =========================================================== */
section.powster iframe { width: 100%; height: 100%; min-height: 50rem; overscroll-behavior: auto;}

@media only screen and (max-width: 768px) {
    section.powster iframe { min-height: 32.5rem;}
}

/* =========================================================== */
/* ==================== TICKETS - MOOVEE ===================== */
/* =========================================================== */
section.moovee { max-width: var(--max-width-narrow); }
section.moovee:has(.mv_dark-theme > p:only-child) { display: none; }
.mv_moovee-container.mv_moovee-container.mv_moovee-container.mv_moovee-container { 
    --mv-font-family: inherit;
    --mv-button-font-size: var(--font-size-little);
    --mv-button-bg-color: white; 
    --mv-button-bg-color-hover: var(--myGrey); 
    --mv-button-text-color: black; 
    --mv-button-border-color: transparent; 
    --mv-button-border-color-hover: transparent; 
    --mv-tab-active-bg-color: var(--myGrey) !important;
    --mv-cinema-padding-y: 2rem; 
    --mv-cinema-list-divider-color: white !important;  
}
.mv_cinema.mv_cinema svg { width: auto;}
.mv_moovee-container.mv_moovee-container svg { width:1em; height: auto; }
.mv_location-detection.mv_location-detection { text-transform: uppercase; opacity: .7;  font-size: var(--font-size-little); display: flex; gap: 1rem;}
.mv_location-detection.mv_location-detection button svg { display: none; }
.mv_search .mv_search-input, .mv_search input[type="text"], .mv_search textarea { font-size: var(--font-size-little) !important; background: none; }
.mv_search #search-input1 { background: none !important; color: white !important; padding-left: 3em !important; border: 1px solid white !important; border-radius: 0 !important; margin-top: 0.5em;}
.mv_search.mv_search.mv_search.mv_search svg { width: .6em; }

.mv_select-display.mv_select-display { background: none; }
.mv_select-display.mv_select-display .mv_select-text {  --font-weight: var(--font-medium); }
.mv_select-display.mv_select-display .mv_flag { width: .9em; height: .9em; }
.mv_select-display.mv_select-display .mv_icon {  width: .7em; margin-top: .15em; opacity: 1; }

.mv_cinema:first-of-type .mv_cinema-header { padding-top: 1rem !important ;}
.mv_cinema .mv_performances { padding-bottom: 3rem !important;}
.mv_cinema-location { opacity: .7 !important; }

.mv_btn { gap: .5em !important;}

.mv_tabs-scroll-container  { margin-bottom: .75em !important;}
.mv_tabs.mv_tabs .mv_tab.mv_tab { border: 1px solid white; min-width: unset; min-height: unset; width: 2.5em; height: 2.5em; }
.mv_tabs.mv_tabs .mv_tab.mv_tab:not(:first-of-type) { border-left: 0; }

.mv_tabs .mv_tab .mv_weekday,.mv_tabs .mv_tab .mv_day { font-size: var(--font-size-tiny) !important; }

.mv_footer  { display: none; }

.mv_btn-show-more.mv_btn-show-more { background: white; color: black;  border-radius: 0 !important; padding: var(--btn-padding); text-transform: uppercase; --font-weight: var(--font-medium) !important; }
.mv_btn-show-more svg { display: none; ;}





/* --------------- 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-bold); }
.prose > * em { font-style: italic; }
.prose code { font-family: monospace; background: #ddd; padding: .2rem; }
.prose :is(h1,h2,h3,h4) + * { margin-top: .8em; }
.prose :is(h1,h2,h3,h4) + :is(h1,h2,h3,h4) { margin-top: .2em;}
.prose h2 { font-size: var(--font-size-h5); --font-weight: var(--font-medium); }
.prose h3 { font-size: var(--font-size-h6); --font-weight: var(--font-medium); }
.prose h4 { font-size: var(--font-size-h6); --font-weight: var(--font-medium); }
.prose :is(h5,h6) { font-size: var(--font-size-h6); --font-weight: var(--font-medium);}


/* --------------- COLOR PICKER HALO --------------- */
div.helper { position: fixed; bottom: var(--gutter-side); right: var(--gutter-side); background: white; padding: .5em 1em;  display: flex;  color: black; --font-weight: 500; gap: 1rem;} 
div.helper input { width: 1.5rem; height: 1.5rem; border-radius: 50%; border: none; outline: none;  cursor: pointer; }
div.helper button { font-size: var(--font-size-little);  border: 1px solid black; padding: .2em .5em; cursor: pointer; width: 5em;  text-align: center;} 

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


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

}
section.odf__cookies.odf__cookies > div { border-radius: 0; }
section.odf__cookies.odf__cookies .odf__buttons { gap: .25rem; }
section.odf__cookies .odf__buttons button.odf__primary { border-radius: 0; }


/* --------------- LIGHTBOX --------------- */
#lightbox {width: 100%; height: 100%; position: fixed; top: 0; left: 0; background: rgba(0,0,0,0.85); z-index: 9999999; line-height: 0; cursor: pointer; display: none;}
#lightbox .img {position: relative; top: 50%;left: 50%;-ms-transform: translateX(-50%) translateY(-50%);-webkit-transform: translate(-50%,-50%);transform: translate(-50%,-50%);max-width: 100%;max-height: 100%;}
#lightbox .img img {opacity: 0; pointer-events: none; width: auto;}
#lightbox span {display: block; position: fixed; bottom: 13px; height: 1.5em; line-height: 1.4em; width: 100%; text-align: center; color: white; text-shadow:-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000;  }
#lightbox span {display: none;}
#lightbox .videoWrapperContainer { position: relative;  height: 100%;  max-width: var(--maxWidth); max-height: 100%; width: var(--width); margin: 0 auto; }
#lightbox .videoWrapperContainer .videoWrapper { background: black;   position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: grid; place-items: center;} 
#lightbox .videoWrapper :is(iframe,video) {position: absolute; max-height: calc(100% - 2rem); width: 100%;height: auto; border: 0;display: block; object-fit: contain; }   
#lightbox #prev, #lightbox #next {height: 50px; line-height: 36px; display: none; margin-top: -25px; position: fixed; top: 50%; padding: 0 15px; cursor: pointer; text-decoration: none; z-index: 99; color: white; font-size: 60px;}
#lightbox.gallery #prev, #lightbox.gallery #next {display: block;}
#lightbox #prev {left: 0;}
#lightbox #next {right: 0;}
#lightbox #close {height: 50px; width: 50px; position: fixed; cursor: pointer; text-decoration: none; z-index: 99; right: 0; top: 0;}
#lightbox #close:after, #lightbox #close:before {position: absolute; margin-top: 22px; margin-left: 14px; content: ""; height: 3px; background: white; width: 23px; -webkit-transform-origin: 50% 50%; -moz-transform-origin: 50% 50%; -o-transform-origin: 50% 50%; transform-origin: 50% 50%; transform: rotate(-45deg); -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg);}
#lightbox #close:after { transform: rotate(45deg); -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); }
#lightbox, #lightbox * { -webkit-user-select: none;  -moz-user-select: none;    -ms-user-select: none;      user-select: none;}

@media screen and (min-width: 1200px) {
    #lightbox .img { max-width: 1200px; }
}
@media screen and (min-height: 1200px) {
    #lightbox .img { max-height: 1200px;}
}


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


/* MAX */
@media only screen and (max-width: 768px) {
    :root { 
        --logo-width: 12.5rem; 
        
        
        --font-size-h1: calc(4rem * .6);
        --font-size-h2: calc(3.56rem * .6);
        --font-size-h3: calc(2.67rem * .75);
        --font-size-h4: calc(2.23rem * .75);
        --font-size-h5: calc(1.78rem * .75);
        --font-size-h6: calc(1.33rem * .75);
        --font-size-body: 1rem;
        --font-size-little: .9rem;
        --font-size-tiny: .75rem;

        --padding-top: 2rem; 
        --margin-y: 3.33rem;

    }
    /* --------------- GENERAL --------------- */
    section.flow.flow, section .container.flow.flow { grid-template-columns: 1fr; }

    /* --------------- HEADER --------------- */
    header { height: 100%; transform: none; }
    label.burger { width: auto; height: 2rem; padding: 0 1rem; }
    label.burger > div { justify-content: center; }
    nav#main > ul > li:last-of-type { display: none; }
    nav#main .sub ul.menu li.mobile { display: block; } 
    nav#main .sub > * {  transform: translateY(1rem); }
    nav#main > ul li.logo { grid-column: 2;}
    nav#main > ul li.menu { position: fixed; right: 1.25rem; bottom: 1.25rem;  transform: none; }
    nav#main > ul li.menu > .sub { left: unset; right: 0; top: unset; bottom: 0; transform: none; --burger-height: 2rem; --burger-width: 5.5rem; clip-path: inset(calc(100% - var(--burger-height)) 0 0 calc(100% - var(--burger-width))); padding: 2rem 0 4rem }    
    nav#main > ul li.menu > .sub > * { padding-inline: 2rem; }
    nav#main > ul li.menu > .sub::before { inset: auto 0 0 auto;  transform: none; height: var(--burger-height); }

    input.burger:checked ~ header nav#main .sub { clip-path: inset(-1.75rem 0 -1.75rem 0); }
    input.burger:checked ~ header nav#main .sub::before {  height: 100%;  }
    
    /* --------------- FOOTER --------------- */
    footer > nav { grid-template-columns: 1fr 1fr; grid-gap: 2rem;}
    footer > nav > div:first-of-type { grid-column: -1/1; margin-bottom: 5rem; }
    footer > nav > span { display: none; }
    footer > nav > :is(p,strong) { grid-column: -1/1; }
    footer > nav > strong { margin-bottom: 2rem; }

}

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

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

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