.hero {
  min-height: 80vh;
}
.hero__inner {
  position: relative;
  display: grid;
  grid-template-columns: 100%;
  grid-template-rows: 1fr;
}
.hero #heroAnimationContainer {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}
.hero #heroAnimationContainer canvas {
  width: 100% !important;
  height: 100% !important;
  -o-object-fit: cover;
     object-fit: cover;
}
.hero h1 {
  font-weight: 900;
  color: var(--slide-text-color);
  text-align: left;
  margin: 0;
  max-width: 50vw;
  line-height: 1.14;
  font-size: var(--step-7);
}
.hero__slide {
  grid-column: 1;
  grid-row: 1;
  position: relative;
  opacity: 0;
  pointer-events: none;
  --duration: 1.5s;
  --delay: 0s;
  --ease: var(--duration) ease-out;
  transition: opacity var(--ease);
  background-color: var(--hero-background-color);
}
.has-bg-anim .hero__slide {
  background: none !important;
}
.hero__slide--title {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  justify-content: center;
  align-items: center;
}
.hero__slide--title h1 {
  opacity: 0;
  transform: translateY(20%);
  position: relative;
  z-index: 1;
  transition: opacity var(--ease) var(--delay), transform var(--ease) var(--delay);
}
@media (prefers-reduced-motion) {
  .hero__slide--title h1 {
    transform: none;
  }
}
.hero__slide--title video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  z-index: 0;
}
.has-bg-anim .hero__slide--title video {
  display: none;
}
.hero__slide--title.active h1 {
  opacity: 1;
  transform: translateY(0);
}
.hero__slide--title.anim-out {
  --duration: 1s;
}
.hero__slide--title.anim-out h1 {
  opacity: 0;
  transform: translateY(0);
}
.hero__slide--event {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(430px, 1fr));
  -moz-column-gap: 6rem;
       column-gap: 6rem;
  row-gap: 2rem;
  height: 100%;
  box-sizing: border-box;
  padding: 3em 9vw 8em;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  --duration: 1.5s;
  --ease: var(--duration) ease-out;
}
@supports (padding: 3em clamp(1em,9vw,120px) 8em) {
  .hero__slide--event {
    padding: 3em -webkit-clamp(1em, 9vw, 120px) 8em;
    padding: 3em clamp(1em,9vw,120px) 8em;
  }
}
.hero__slide--event sl-button.white.filled {
  --sl-color-white: var(--slide-cta-color);
  --sl-color-gray-40: white;
  --sl-color-primary-95: var(--slide-cta-hover-color);
  --sl-color-primary-40: white;
  --sl-color-primary-80: var(--slide-cta-hover-color);
}
.hero__slide--event figure {
  margin: 0;
  position: relative;
  display: grid;
  transform: translateY(50%);
  opacity: 0;
  transition: transform var(--ease) var(--delay), opacity var(--ease) var(--delay);
}
@media (prefers-reduced-motion) {
  .hero__slide--event figure {
    transform: none;
  }
}
.hero__slide--event figure:nth-child(1) {
  --count:calc(1 * 0.5s);
  --delay: calc(1 * 0.5s);
}
.hero__slide--event figure:nth-child(2) {
  --count:calc(2 * 0.5s);
  --delay: calc(2 * 0.5s);
}
.hero__slide--event figure:nth-child(3) {
  --count:calc(3 * 0.5s);
  --delay: calc(3 * 0.5s);
}
.hero__slide--event figure:nth-child(4) {
  --count:calc(4 * 0.5s);
  --delay: calc(4 * 0.5s);
}
.hero__slide--event figure:nth-child(5) {
  --count:calc(5 * 0.5s);
  --delay: calc(5 * 0.5s);
}
.hero__slide--event figure:nth-child(6) {
  --count:calc(6 * 0.5s);
  --delay: calc(6 * 0.5s);
}
.hero__slide--event figure:nth-child(7) {
  --count:calc(7 * 0.5s);
  --delay: calc(7 * 0.5s);
}
.hero__slide--event figure:nth-child(8) {
  --count:calc(8 * 0.5s);
  --delay: calc(8 * 0.5s);
}
.hero__slide--event figure:nth-child(9) {
  --count:calc(9 * 0.5s);
  --delay: calc(9 * 0.5s);
}
.hero__slide--event figure:nth-child(10) {
  --count:calc(10 * 0.5s);
  --delay: calc(10 * 0.5s);
}
.hero__slide--event figure a {
  display: contents;
  text-decoration: none;
  color: var(--slide-text-color);
}
.hero__slide--event figure:first-of-type {
  align-self: flex-start;
}
.hero__slide--event figure:last-of-type {
  margin-top: 3em;
}
.hero__slide--event figure h2 {
  font-family: var(--heading-type);
  font-size: var(--step-9);
  color: var(--slide-text-color);
  line-height: 1;
  margin: 0 0 1em;
}
.hero__slide--event figure p {
  font-size: var(--step-4);
  font-family: var(--heading-type);
  font-weight: 700;
}
.hero__slide--event figure img {
  grid-column: 1;
  grid-row: 1;
  max-width: 100%;
  transition: transform var(--ease);
}
.hero__slide--event figure figcaption {
  margin: 0 0 0 5em;
  grid-column: 1;
  grid-row: 1;
}
.hero__slide--event figure sl-button {
  margin-bottom: -2em;
}
.hero__slide--event figure h2, .hero__slide--event figure sl-button, .hero__slide--event figure p {
  transform: translateY(40%);
  opacity: 0;
  transition: transform var(--ease) var(--delay), opacity var(--ease) var(--delay);
}
@media (prefers-reduced-motion) {
  .hero__slide--event figure h2, .hero__slide--event figure sl-button, .hero__slide--event figure p {
    transform: none;
  }
}
.hero__slide--event figure h2:nth-child(1), .hero__slide--event figure sl-button:nth-child(1), .hero__slide--event figure p:nth-child(1) {
  --delay: calc(var(--count) + (1 * 0.5s));
}
.hero__slide--event figure h2:nth-child(2), .hero__slide--event figure sl-button:nth-child(2), .hero__slide--event figure p:nth-child(2) {
  --delay: calc(var(--count) + (2 * 0.5s));
}
.hero__slide--event figure h2:nth-child(3), .hero__slide--event figure sl-button:nth-child(3), .hero__slide--event figure p:nth-child(3) {
  --delay: calc(var(--count) + (3 * 0.5s));
}
.hero__slide--event figure h2:nth-child(4), .hero__slide--event figure sl-button:nth-child(4), .hero__slide--event figure p:nth-child(4) {
  --delay: calc(var(--count) + (4 * 0.5s));
}
.hero__slide--event figure h2:nth-child(5), .hero__slide--event figure sl-button:nth-child(5), .hero__slide--event figure p:nth-child(5) {
  --delay: calc(var(--count) + (5 * 0.5s));
}
.hero__slide--event figure h2:nth-child(6), .hero__slide--event figure sl-button:nth-child(6), .hero__slide--event figure p:nth-child(6) {
  --delay: calc(var(--count) + (6 * 0.5s));
}
.hero__slide--event figure h2:nth-child(7), .hero__slide--event figure sl-button:nth-child(7), .hero__slide--event figure p:nth-child(7) {
  --delay: calc(var(--count) + (7 * 0.5s));
}
.hero__slide--event figure h2:nth-child(8), .hero__slide--event figure sl-button:nth-child(8), .hero__slide--event figure p:nth-child(8) {
  --delay: calc(var(--count) + (8 * 0.5s));
}
.hero__slide--event figure h2:nth-child(9), .hero__slide--event figure sl-button:nth-child(9), .hero__slide--event figure p:nth-child(9) {
  --delay: calc(var(--count) + (9 * 0.5s));
}
.hero__slide--event figure h2:nth-child(10), .hero__slide--event figure sl-button:nth-child(10), .hero__slide--event figure p:nth-child(10) {
  --delay: calc(var(--count) + (10 * 0.5s));
}
.hero__slide--event figure h2 {
  transition: transform var(--ease) var(--delay), opacity var(--ease) var(--delay), -webkit-text-fill-color 0.5s ease-in-out;
}
@media (hover: hover) {
  .hero__slide--event figure:hover sl-button {
    --sl-color-gray-40: var(--slide-cta-hover-color);
  }
  .hero__slide--event figure:hover sl-button::part(base) {
    --duration: 0.5s;
    --ease: var(--duration) ease-in-out;
    transition: border-color var(--ease), background-color var(--ease);
  }
  .hero__slide--event figure:hover sl-button::part(label) {
    --duration: 0.5s;
    --ease: var(--duration) ease-in-out;
    color: white;
    transition: color var(--ease);
  }
  .hero__slide--event figure:hover img {
    transform: translateY(-2rem);
  }
}
@media (hover: hover) and (prefers-reduced-motion) {
  .hero__slide--event figure:hover img {
    transform: none;
  }
}
@media (hover: hover) {
  .hero__slide--event figure:hover h2 {
    color: var(--slide-hover-color);
  }
}
.hero__slide--event.active figure {
  transform: translateY(0%);
  opacity: 1;
}
.hero__slide--event.active figure h2, .hero__slide--event.active figure sl-button, .hero__slide--event.active figure p {
  transform: translateY(0%);
  opacity: 1;
}
.hero__slide--event.anim-out {
  --duration: 1s;
  --ease: var(--duration) ease-in-out;
}
.hero__slide--event.anim-out figure {
  transform: translateY(0%);
  opacity: 0;
}
.hero__slide--event.anim-out figure h2, .hero__slide--event.anim-out figure sl-button, .hero__slide--event.anim-out figure p {
  transform: translateY(0%);
  opacity: 0;
}
.hero__slide.active {
  transition: opacity var(--ease);
  opacity: 1;
  pointer-events: all;
}
.hero aside {
  position: absolute;
  top: calc(25% - 1.2em);
  right: 3em;
  display: flex;
  flex-flow: column nowrap;
  align-items: flex-end;
}
.hero aside button {
  -webkit-appearance: none;
  background-color: transparent;
  color: white;
  padding: 2em 0;
  border: none;
  text-align: right;
  cursor: pointer;
  font-size: var(--step-0);
  text-transform: none;
  --duration: 0.5s;
  --ease: var(--duration) ease-in-out;
  order: 2;
  opacity: 0.4;
  transition: opacity var(--ease), font-size var(--ease);
  position: relative;
}
.hero aside button svg {
  height: 1em;
  width: 1em;
  position: absolute;
  left: calc(100% + 1em);
  top: 50%;
  transform: translateY(-50%);
  opacity: 0;
  transition: opacity var(--ease), margin var(--ease);
}
.hero aside button.active {
  opacity: 1;
  order: 1;
}
.hero aside button.active svg {
  opacity: 1;
}
.hero aside button.end {
  order: 3;
}
.hero aside button.disappear {
  transition: opacity var(--ease), margin var(--ease);
  opacity: 0;
  margin-top: -5em;
}
.hero aside button.cooldown {
  pointer-events: none;
}
.hero__partners {
  width: 100%;
  list-style: none;
  z-index: 1;
  margin: 0;
  --padding-vertical: 1em;
  box-sizing: border-box;
  background-color: var(--primary-color);
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-start;
  align-items: center;
  overflow: scroll;
  scrollbar-width: none;
}
.hero__partners::-webkit-scrollbar {
  width: 0px;
  height: 0px;
  display: none;
  -webkit-appearance: none;
}
.hero__partners sl-button {
  position: -webkit-sticky;
  position: sticky;
  left: 0;
  cursor: default;
}
.hero__partners li {
  max-height: 3em;
  padding: 0 0.5em;
}
.hero__partners svg, .hero__partners img {
  height: 3em;
  width: auto;
}
.hero__partners li:nth-child(n+4) spacer {
  width: var(--padding-side);
  display: block;
  height: 1rem;
}
.hero watermark, .hero gradient {
  display: block;
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.hero watermark {
  background-size: auto 100%;
  background-position: top 0 right 2rem;
  background-repeat: no-repeat;
}
.hero gradient {
  top: -20%;
  background: linear-gradient(var(--hero-gradient) 10%, transparent);
}
.hero.has-bg-anim watermark, .hero.has-bg-anim gradient {
  display: none;
}
.hero__dots {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  align-items: center;
}
.hero dot {
  width: 7px;
  height: 7px;
  border-radius: 7px;
  background-color: rgba(255, 255, 255, 0.5);
  margin: 1.5rem 10px;
  transition: background-color var(--ease);
  position: relative;
}
.hero dot sl-progress-ring {
  position: absolute;
  top: -5px;
  left: -5px;
  --track-color: transparent;
  --indicator-color: white;
  display: none;
}
.hero dot.active {
  background-color: white;
}
.hero dot.active sl-progress-ring {
  display: inline-flex;
}
.hero dot.cooldown {
  pointer-events: none;
}
.hero.hero--dots {
  --side-padding: clamp(1rem,14vw,200px);
  --top-padding: clamp(1rem,7vw,100px);
}
.hero.hero--dots .hero__slide--title {
  padding: var(--top-padding) var(--side-padding);
  display: block;
}
.hero.hero--dots .hero__slide--title h1 {
  max-width: 100%;
}
.hero.hero--dots .next, .hero.hero--dots .prev {
  position: absolute;
  top: var(--top-padding);
}
.hero.hero--dots .next {
  right: var(--side-padding);
  transform: translateX(100%);
}
.hero.hero--dots .prev {
  left: var(--side-padding);
  transform: translateX(-100%);
}
.hero.hero--dots aside {
  top: auto;
  right: var(--side-padding);
  transform: translateX(100%);
  bottom: calc(25% - 1.2em);
  --gap: 1em;
  --column-gap: var(--gap);
  --row-gap: var(--gap);
  margin: calc(var(--row-gap) / -2) calc(var(--column-gap) / -2);
}
.hero.hero--dots aside button {
  width: 10px;
  height: 10px;
  max-height: 10px;
  min-height: 10px;
  flex: 1 0 10px;
  border: 1px solid white;
  border-radius: 50%;
  display: block;
  opacity: 1;
  padding: 0;
  order: 1;
  position: relative;
  --item-row-gap: calc(var(--row-gap) / 2);
  --item-column-gap: calc(var(--column-gap) / 2);
  margin: var(--item-row-gap) var(--item-column-gap);
}
.hero.hero--dots aside button p {
  position: absolute;
  right: 100%;
  padding: 0 1em;
  margin: 0;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0.4;
  min-width: 15ch;
}
.hero.hero--dots aside button.active {
  order: 1;
  background-color: white;
}
.hero.hero--dots aside button.active p {
  opacity: 1;
}
.hero.hero--dots aside button.end {
  order: 1;
}
.hero.hero--dots aside button.disappear {
  transition: none;
  opacity: 1;
  margin-top: var(--item-row-gap);
}
.hero.uninit * {
  transition: none;
}
.hero.uninit aside {
  opacity: 0;
}
@media screen and (max-width: 1400px) {
  .hero h1 {
    max-width: 40vw;
    margin: 0 0.5em 0.5em auto;
  }
}
@media screen and (max-width: 1280px) {
  .hero {
    min-height: 60vh;
  }
}
@media screen and (min-width: 1025px) {
  .hero__dots {
    display: none;
  }
}
@media screen and (max-width: 1024px) {
  .hero aside {
    display: none;
  }
  .hero h1 {
    font-size: var(--step-5);
  }
  .hero__slide--event {
    justify-content: space-between;
  }
}
@media screen and (max-width: 768px) {
  .hero {
    min-height: 40vh;
  }
  .hero__partners {
    padding: 2em 1em 1em;
  }
  .hero h1 {
    width: 100%;
    max-width: 100%;
    padding: 0.5em 10vw;
  }
  .hero__slide--event figure figcaption {
    display: flex;
    flex-flow: column;
    justify-content: flex-end;
  }
}
@media screen and (max-width: 650px) {
  .hero__slide--event figure h2 {
    font-size: var(--step-6);
  }
  .hero__slide--event figure p {
    font-size: var(--step-2);
  }
}
@media screen and (max-width: 500px) {
  .hero__slide--event {
    grid-template-columns: 100%;
  }
  .hero__slide--event figure figcaption {
    margin: 0;
    padding: 1em;
  }
  .hero__slide--event figure img {
    opacity: 0.7;
  }
  .hero__slide--title h1 {
    padding: 0;
    margin-top: 2em;
  }
}
@media screen and (max-width: 400px) {
  .hero {
    min-height: 33.3vh;
  }
}
@media screen and (max-width: 375px) {
  .hero__slide--event figure p {
    font-size: var(--step-0);
  }
}