/* ------------------------- Scaling System-------------------------  */

/* Desktop */
:root {
  --size-unit: 16; /* body font-size in design - no px */
  --size-container-ideal: 1440; /* screen-size in design - no px */
  --size-container-min: 992px;
  --size-container-max: 1920px;
  --size-container: clamp(var(--size-container-min), 100vw, var(--size-container-max));
  --size-font: calc(var(--size-container) / (var(--size-container-ideal) / var(--size-unit)));
}

/* Tablet */
@media screen and (max-width: 991px) {
  :root {
    --size-container-ideal: 834; /* screen-size in design - no px */
    --size-container-min: 768px;
    --size-container-max: 991px;
  }
}

/* Mobile Landscape */
@media screen and (max-width: 767px) {
  :root {
    --size-container-ideal: 550; /* screen-size in design - no px */
    --size-container-min: 480px;
    --size-container-max: 767px;
  }
}

/* Mobile Portrait */
@media screen and (max-width: 479px) {
  :root {
    --size-container-ideal: 390; /* screen-size in design - no px */
    --size-container-min: 320px;
    --size-container-max: 479px;
  }
}

.container {
  max-width: var(--size-container);
}

.container.medium {
  max-width: calc(var(--size-container) * 0.85);
}

.container.small {
  max-width: calc(var(--size-container) * 0.7);
}


/*NAVIGATION*/
[data-twostep-nav]{
  --cubic-default: cubic-bezier(0.625, 0.05, 0, 1);
  --animation-ease: 0.2s ease;
  
  --duration-default: 0.5s;
  --duration-default-long: 0.75s; 
  --duration-default-half: 0.25s; 
  
  --animation-default: var(--duration-default) var(--cubic-default);
  --animation-default-long: var(--duration-default-long) var(--cubic-default);
  --animation-default-half: var(--duration-default-half) var(--cubic-default);
}


/* Menu button */
.twostep-nav__toggle-bar{
  transition: transform var(--animation-default);
  transform: translateY(-0.25em) rotate(0.001deg);  
}

.twostep-nav__toggle:hover .twostep-nav__toggle-bar {
  transform: translateY(0.25em) rotate(0.001deg);
}

.twostep-nav__toggle .twostep-nav__toggle-bar:nth-child(2) {
  transform: translateY(0.15em) rotate(0.001deg);
}

.twostep-nav__toggle:hover .twostep-nav__toggle-bar:nth-child(2) {
  transform: translateY(-0.15em) rotate(0.001deg);
}

[data-nav-status="active"] .twostep-nav__toggle .twostep-nav__toggle-bar {
  transform: translateY(0em) rotate(45deg);
}

[data-nav-status="active"] .twostep-nav__toggle .twostep-nav__toggle-bar:nth-child(2) {
  transform: translateY(0em) rotate(-45deg);
}


/* Page dark overlay */
.twostep-nav__bg {
  transition: opacity var(--animation-default), visibility var(--animation-default);
}

[data-nav-status="active"] .twostep-nav__bg {
  opacity: 1;
  visibility: visible;
}


/* Inner bar grow */
.twostep-nav__bar {
  transition: max-width var(--animation-default-long) 0.2s;
}

[data-nav-status="active"] .twostep-nav__bar {
  transition: max-width var(--animation-default) 0s;
  max-width: 100%;
}


/* Thin line in nav bar */
.twostep-nav__top-line {
  transition: all var(--animation-default) 0s;
  opacity: 0;
}

[data-nav-status="active"] .twostep-nav__top-line {
  transition: all var(--animation-default) 0.1s;
  opacity: 1;
}

@media screen and (max-width: 767px) {

  .twostep-nav__top-line {
    inset: auto 1em -0.5em;
  }
  
  [data-nav-status="active"] .twostep-nav__top-line {
    transition: all var(--animation-default) 0.2s;
    inset: auto 0em -0.5em;
  }
}


/* Nav bar background */
.twostep-nav__bar__bg,
[data-nav-status="active"] .twostep-nav__back-bg{
  transition: background-color var(--animation-ease);
}

.twostep-nav__back{
  transition: all var(--animation-default);
  inset: 0em;
}

[data-nav-status="active"]  .twostep-nav__back {
  inset: -0.25em;
}

@media screen and (max-width: 767px) {
  
  [data-nav-status="active"]  .twostep-nav__back {
    inset: -1.25em;
  }  
  
}



/* Nav bottom */
.twostep-nav__bottom {
  transition: grid-template-rows var(--animation-default) 0s;
}

[data-nav-status="active"] .twostep-nav__bottom {
  transition: grid-template-rows var(--animation-default-long) 0.25s;
  grid-template-rows: 1fr;
}

@media screen and (max-width: 767px) {
  
  .twostep-nav__bottom {
    transition: grid-template-rows var(--animation-default) 0s, transform var(--animation-default) 0s;
    transform: translateY(-0.625em);
  }
  
  [data-nav-status="active"] .twostep-nav__bottom {
    transition: grid-template-rows var(--animation-default-long) 0.25s, transform var(--animation-default) 0.25s;
    transform: translateY(0em);
  }
}


/* Nav columns reveal */
.twostep-nav__bottom-row > * {
  transition: all var(--animation-default) 0s;
  transform: translateY(2em);
  opacity: 0;
}

.twostep-nav__bottom-row > *:nth-child(2) {
 transition-delay: 0.075s;
}

[data-nav-status="active"] .twostep-nav__bottom-row > * {
  transition: all var(--animation-default-long) 0.5s;
  transform: translateY(0em);
  opacity: 1;
}

[data-nav-status="active"] .twostep-nav__bottom-row > *:nth-child(2) {
  transition-delay: 0.575s;
}
/*BUNY PLAYER*/


/* Animation */
[data-bunny-player-init] :is(.bunny-player__placeholder, .bunny-player__dark, .bunny-player__playpause, .bunny-player__loading) {
  transition: opacity 0.3s linear, visibility 0.3s linear;
}

/* Placeholder */
[data-bunny-player-init][data-player-status="playing"] .bunny-player__placeholder,
[data-bunny-player-init][data-player-status="paused"] .bunny-player__placeholder,
[data-bunny-player-init][data-player-activated="true"][data-player-status="ready"] .bunny-player__placeholder {
  opacity: 0;
  visibility: hidden;
}

/* Dark Overlay */
[data-bunny-player-init][data-player-status="paused"] .bunny-player__dark,
[data-bunny-player-init][data-player-status="playing"][data-player-hover="active"] .bunny-player__dark{
  opacity: 0.3;
}

[data-bunny-player-init][data-player-status="playing"] .bunny-player__dark {
  opacity: 0;
}

/* Play/Pause */
[data-bunny-player-init][data-player-status="playing"] .bunny-player__playpause,
[data-bunny-player-init][data-player-status="loading"] .bunny-player__playpause {
  opacity: 0;
}

[data-bunny-player-init][data-player-status="playing"][data-player-hover="active"] .bunny-player__playpause {
  opacity: 1;
}

[data-bunny-player-init][data-player-status="playing"] .bunny-player__play-svg,
[data-bunny-player-init][data-player-status="loading"] .bunny-player__play-svg {
  display: none;
}

[data-bunny-player-init][data-player-status="playing"] .bunny-player__pause-svg,
[data-bunny-player-init][data-player-status="loading"] .bunny-player__pause-svg{
  display: block;
}

/* Loading */
[data-bunny-player-init][data-player-status="loading"] .bunny-player__loading {
  opacity: 1;
  visibility: visible;
}

/* Interface */
.bunny-player__interface {
  transition: all 0.6s cubic-bezier(0.625, 0.05, 0, 1);
}

[data-bunny-player-init][data-player-status="playing"] .bunny-player__interface,
[data-bunny-player-init][data-player-status="loading"] .bunny-player__interface{
  opacity: 0;
  transform: translateY(1em) rotate(0.001deg);
}

[data-bunny-player-init][data-player-status="playing"][data-player-hover="active"] .bunny-player__interface,
[data-bunny-player-init][data-player-status="loading"][data-player-hover="active"] .bunny-player__interface {
  opacity: 1;
  transform: translateY(0em) rotate(0.001deg);
}

/* Timeline */
[data-bunny-player-init][data-player-status="idle"][data-player-activated="false"] .bunny-player__timeline,
[data-bunny-player-init][data-player-status="ready"][data-player-activated="false"] .bunny-player__timeline {
  pointer-events: none;
}

/* Timeline Handle */
[data-bunny-player-init] .bunny-player__timeline-handle {
  transition: transform 0.15s ease-in-out;
}

[data-bunny-player-init][data-timeline-drag="true"] .bunny-player__timeline-handle {
  transform: translate(-50%, -50%) scale(1);
}

/* Fullscreen */
[data-bunny-player-init][data-player-fullscreen="true"] .bunny-player__fullscreen-shrink-svg {
  display: block;
}

[data-bunny-player-init][data-player-fullscreen="true"] .bunny-player__fullscreen-scale-svg {
  display: none;
}

/* Mute */
[data-bunny-player-init][data-player-muted="true"] .bunny-player__volume-mute-svg {
  display: block;
}

[data-bunny-player-init][data-player-muted="true"] .bunny-player__volume-up-svg {
  display: none;
}

/* Cover Mode */
[data-bunny-player-init][data-player-update-size="cover"] {
  height: 100%;
  top: 0;
  left: 0;
  position: absolute;
}

[data-bunny-player-init][data-player-update-size="cover"] [data-player-before] {
  display: none;
}

[data-bunny-player-init][data-player-update-size="cover"][data-player-fullscreen="false"] .bunny-player__video {
  object-fit: cover;
}




/*infinite sroll*/

:is(.wf-design-mode, .wf-editor) [data-typo-scroll-item]:hover .typo-scroll__h,
[data-typo-scroll-item="active"] .typo-scroll__h{
  z-index: 2;
  color: #6B6B6B;
  mix-blend-mode: difference;
}

.typo-scroll__media {
  --po: 1.5em; /* Path offset */
  transition: clip-path 1.2s cubic-bezier(0.16, 1, 0.3, 1);
  clip-path: polygon(calc(0% + var(--po)) calc(0% + var(--po)), calc(100% - var(--po)) calc(0% + var(--po)), calc(100% - var(--po)) calc(100% - var(--po)), calc(0% + var(--po)) calc(100% - var(--po)));
  opacity: 0;
}

:is(.wf-design-mode, .wf-editor) [data-typo-scroll-item]:hover .typo-scroll__media,
[data-typo-scroll-item="active"] .typo-scroll__media {
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  opacity: 1;
}

@media (hover: none) and (pointer: coarse) { 
  [data-typo-scroll-item="active"] .typo-scroll__media {
    pointer-events: all;
  }
}

/*LIGHTBOX*/
  /* Active Classes */
.lightbox-wrap.is-active {
  display: flex;
}
.lightbox-img__item.is-active {
  visibility: visible;
}


/* Force containment of image */
.lightbox-img__item img { 
  object-fit: contain !important;
  min-width: auto;
  width: auto;
  max-height: 100%;
}


/* Simple Hover on Lightbox Buttons */
.lightbox-nav__button:hover .lightbox-nav__dot{ transform: translate(-100%, 0px) }
.lightbox-nav__button:nth-of-type(2):hover .lightbox-nav__dot{ transform: translate(100%, 0px) }

/*TOGGLE SWITCH*/

.toggle-switch {
  --toggle-count: 3;
  --toggle-padding: 0.25em;
}

[data-toggle-active] {
  color: #0a0a0a;
}

/* Video on Hover*/

/* ———— If video is active and hovered, set it to opacity 1 ———— */
[data-video-on-hover="active"] video{ opacity: 1; }

/*Droping Cards Loader*/

/* Hide Loading Container in Webflow Designer */
:is(.wf-design-mode, .wf-editor) [data-loading-container] {
  opacity: 0;
}

/* Show Cards in Webflow Designer */
:is(.wf-design-mode, .wf-editor) [data-loading-cards-list] {
  opacity: 1;
}
  
:is(.wf-design-mode, .wf-editor) [data-loading-card] {
  position: relative;
}



/*COUNTDOWN*/

[data-countdown-date] {
  gap: 0.075em;
}

[data-countdown-update] {
  background-color: #2A2727;
  border-radius: 3em;
  padding: 0.25em 0.75em;
  line-height: 1;
  border: 0.075em solid transparent;
  margin: 0;
}

[data-countdown-update]:nth-child(odd) {
  border-radius: 0.125em;
}

[data-countdown-update="hours"] {
  background-color: transparent;
  border: 0.075em solid #2A2727;
}

[data-countdown-update]:nth-last-child(1) {
  background-color: #F84131;
}

/*BUTTON ANIMATION*/
:root {
  --button-059-color: #000000;
  --button-059-color-background: #9c9c9c;
   --button-059-hover: #ffffff;
  --button-059-color-focus: #fff;
  --button-059-padding: 0.75em 1em;
  --button-059-border-radius: 1.3em;
  --button-059-block-border-radius: 0.125em;
  --button-059-focus-inset: -0.125em;
  --button-059-ease-hover: cubic-bezier(0.32, 0.72, 0, 1);
  --button-059-ease-focus: cubic-bezier(0.32, 0.72, 0, 1);
}

.button-059 {
  -webkit-tap-highlight-color: transparent;
}

.button-059:is(:focus-visible)::after {
  box-shadow: 0 0 0 0.125em var(--button-059-color-focus);
}

.button-059::after {
  content: '';
  display: block;
  position: absolute;
  inset: var(--button-059-focus-inset);
  border-radius: var(--button-059-block-border-radius);
  transition: box-shadow 0.3s var(--button-059-ease-focus);
  pointer-events: none;
  z-index: 1;
}

.button-059__element {
  will-change: width;
  transition: width 0.3s var(--button-059-ease-hover), border-radius 0.3s var(--button-059-ease-hover);
}

.button-059__element.is--default {
  width: var(--button-059-width);
}

.button-059__element.is--default .button-059__text {
  transform-origin: left;
  transition: opacity 0.15s cubic-bezier(0.4, 0, 0.2, 1), filter 0.2s, scale 0.2s var(--button-059-ease-hover);
}

.button-059__element.is--hover {
  width: 0.375em;
}

.button-059__element.is--hover .button-059__text {
  opacity: 0;
  filter: blur(0.1875em);
  scale: 0.8;
  transform-origin: right;
  transition: opacity 0.15s cubic-bezier(0.4, 0, 0.2, 1), filter 0.2s, scale 0.2s var(--button-059-ease-hover);
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .button-059:is(:hover, :focus-visible) .button-059__element,
  [data-hover]:is(:hover, :focus-visible) .button-059 .button-059__element {
    transition: width 0.5s var(--button-059-ease-hover), border-radius 0.5s var(--button-059-ease-hover);
    transition-delay: 0.05s;
  }

  .button-059:is(:hover, :focus-visible) .button-059__element.is--default,
  [data-hover]:is(:hover, :focus-visible) .button-059 .button-059__element.is--default {
    width: 0.375em;
    border-radius: var(--button-059-block-border-radius);
  }

  .button-059:is(:hover, :focus-visible) .button-059__element.is--default .button-059__text,
  [data-hover]:is(:hover, :focus-visible) .button-059 .button-059__element.is--default .button-059__text {
    opacity: 0;
    filter: blur(0.1875em);
    scale: 0.8;
    transition-delay: 0.05s;
  }

  .button-059:is(:hover, :focus-visible) .button-059__element.is--hover,
  [data-hover]:is(:hover, :focus-visible) .button-059 .button-059__element.is--hover {
    width: var(--button-059-width);
    border-radius: var(--button-059-border-radius);
  }

  .button-059:is(:hover, :focus-visible) .button-059__element.is--hover .button-059__text,
  [data-hover]:is(:hover, :focus-visible) .button-059 .button-059__element.is--hover .button-059__text {
    opacity: 1;
    filter: blur(0);
    scale: 1;
    transition-delay: 0.125s;
  }

  .button-059:is(:hover, :focus-visible) .button-059__hover,
  [data-hover]:is(:hover, :focus-visible) .button-059 .button-059__hover {
    opacity: 1;
    scale: 1;
    transition-delay: 0.05s;
  }
}