/* ------------------------- Variables -------------------------------------------------- */

:root {
  /* CSS Animations */
  --animation-default: 0.735s cubic-bezier(0.625, 0.05, 0, 1);
}

/* Tablet */
@media screen and (max-width: 991px) {
	:root {
	
	}
}

/* Mobile Landscape */
@media screen and (max-width: 767px) {
	:root {
	  
	}
}

/* Mobile Portrait */
@media screen and (max-width: 479px) {
	:root {

	}
}

/* ------------------------- Copy/Paste Media Queries -------------------------------------------------- */

/* Max Width */
@media screen and (max-width: 991px) {}
@media screen and (max-width: 767px) {}
@media screen and (max-width: 479px) {}

/* Min Width */
@media screen and (min-width: 992px) {}
@media screen and (min-width: 768px) {}
@media screen and (min-width: 480px) {}

/* Range */
@media screen and (min-width: 768px) and (max-width: 991px) {}

/* Orientation */
@media screen and (orientation: landscape) {}
@media screen and (orientation: portrait) {}

/* Aspect Ratio */
@media screen and (min-aspect-ratio: 16/9) {}
@media screen and (max-aspect-ratio: 4/3) {}

/* Hover and Pointer */
@media (hover: hover) and (pointer: fine) {}
@media (hover: none) and (pointer: coarse) {}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {}

/* Color Scheme */
@media (prefers-color-scheme: dark) {}
@media (prefers-color-scheme: light) {}

/* Contrast */
@media (prefers-contrast: more) {}
@media (prefers-contrast: less) {}

:is(.wf-design-mode, .w-editor) {}

/* ------------------------- Scaling System by Osmo [https://osmo.supply/] -------------------------  */

/* 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: 390; /* 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;
	}
}


/* ------------------------- Body -------------------------------------------------- */

*, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
html {scroll-behavior: initial;}

html, body {
  width: 100%;
  min-height: 100%;
  -webkit-font-smoothing: antialiased;
}

svg {
  max-width: none;
  height: auto;
  box-sizing: border-box;
  vertical-align: middle;
}

textarea {
  resize: none;
}

:is(h1, h2, h3, h4, h5, h6) > strong {
  font-weight: inherit;
}

/* Webflow Rich Text */

.w-richtext :first-child {
  margin-top: 0 !important;
}

.w-richtext :last-child {
  margin-bottom: 0 !important;
}

.w-richtext:before,
.w-richtext:after {
  display: none;
}

.w-richtext figure {
  display: block !important;
  max-width: unset !important;
  width: 100% !important;
}

.w-richtext figure > div {
  width: 100% !important;
  max-width: unset !important;
  display: unset !important;
  color: unset !important;
  font-size: unset !important;
}

.w-richtext figcaption {
  width: 100% !important;
  display: block !important;
}

.w-richtext :is(h1, h5, h6) {
  outline: 2px dashed red;
  padding: 8px;
  color: red;
}

.w-richtext :is(h1, h5, h6)::before {
  content: "Never use the H1 element inside rich text";
  font-size: 16px;
  width: 100%;
  color: red;
  display: block;
}

.w-richtext :is(h5, h6)::before {
  content: "Please use the H2, H3 & H4 Presets";
}

.w-richtext ul {
  list-style: none;
  padding-left: 1.5em;
}

.w-richtext ul li {
  position: relative;
}

.w-richtext ul li::before{
  content: "";
  position: absolute;
  width: 0.25em;
  height: 0.25em;
  background-color: currentColor;
  top: 0.5em;
  left: -0.875em;
}


/* ------------------------- Selection -------------------------------------------------- */

::selection, ::-moz-selection {
  background-color: var(--color-primary);
  color: var(--color-dark);
  text-shadow: none;
}

img::selection {
  background-color: transparent;
}

/* ------------------------- Hide Scrollbar -------------------------------------------------- */

body ::-webkit-scrollbar, body::-webkit-scrollbar{display: none;} /* Chrome, Safari, Opera */
body {-ms-overflow-style: none;} /* IE & Edge */
html {scrollbar-width: none;} /* Firefox */

/* ------------------------- Transition -------------------------------------------------- */

:is(.wf-design-mode, .w-editor) [data-transition-panel] {
  opacity: 0;
  visibility: hidden;
}

/* ------------------------- Media -------------------------------------------------- */

.media:has([data-wf--aspect-ratio--variant="cover-mode"]) {
  position: absolute;
  top: 0em;
  left: 0em;
  height: 100%;
}

.media:has([data-wf--aspect-ratio--variant="cover-mode"]) .aspect-ratio {
  display: none;
}

[data-wf--aspect-ratio--variant="5-4-landscape"], [data-aspect-ratio="5:4 Landscape"] .aspect-ratio {padding-top: 80%}
[data-wf--aspect-ratio--variant="4-3-landscape"], [data-aspect-ratio="4:3 Landscape"] .aspect-ratio {padding-top: 75%}
[data-wf--aspect-ratio--variant="3-2-landscape"], [data-aspect-ratio="3:2 Landscape"] .aspect-ratio {padding-top: 66.66%}
[data-wf--aspect-ratio--variant="16-9-landscape"], [data-aspect-ratio="16:9 Landscape"] .aspect-ratio {padding-top: 56.25%}
[data-wf--aspect-ratio--variant="2-1-landscape"], [data-aspect-ratio="2:1 Landscape"] .aspect-ratio {padding-top: 50%}
[data-wf--aspect-ratio--variant="1-1-square"], [data-aspect-ratio="1:1 Square"] .aspect-ratio {padding-top: 100%}
[data-wf--aspect-ratio--variant="4-5-portrait"], [data-aspect-ratio="4:5 Portrait"] .aspect-ratio {padding-top: 125%}
[data-wf--aspect-ratio--variant="3-4-portrait"], [data-aspect-ratio="3:4 Portrait"] .aspect-ratio {padding-top: 133.33%}
[data-wf--aspect-ratio--variant="2-3-portrait"], [data-aspect-ratio="2:3 Portrait"] .aspect-ratio {padding-top: 150%}
[data-wf--aspect-ratio--variant="9-16-portrait"], [data-aspect-ratio="9:16 Portrait"] .aspect-ratio {padding-top: 177.77%}

[data-media-init] [data-media-placeholder] {
  transition: opacity 0.2s ease, visibility 0.2s ease;
}

[data-media-init][data-media-status="playing"] [data-media-placeholder],
[data-media-init][data-media-status="paused"] [data-media-placeholder] {
  visibility: hidden;
  opacity: 0;
}

:is(.wf-design-mode, .w-editor) .cover-media:has(.cover-placeholder.w-condition-invisible):has(.cover-image.w-condition-invisible)::before {
  content: "Video preview not availabe in Webflow";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(0.375em, 4cqw, 1em);
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: rgb(from var(--color-dark) r g b / 20%);
  border-radius: inherit;
}

.cover-placeholder {
  container-type: inline-size;
}

.cover-placeholder .cover-placeholder__p {
  font-size: clamp(0.375em, 4cqw, 1em);
}

/* ------------------------- Underline Link -------------------------------------------------- */

[data-underline-link] {
  text-decoration: none;
  position: relative;
}

[data-underline-link]::before,
[data-underline-link="alt"]::before,
[data-underline-link="alt"]::after{
  content: "";
  position: absolute;
  bottom: 0.0625em;
  left: 0;
  width: 100%;
  height: 0.0625em;
  background-color: var(--color-primary);
  transition: transform var(--animation-default);
  transform-origin: right;
  transform: scaleX(0) rotate(0.001deg);
}

[data-underline-link="alt"]::before {
  transform-origin: left;
  transform: scaleX(1) rotate(0.001deg);
  transition-delay: 0.3s;
}

[data-underline-link="alt"]::after {
  transform-origin: right;
  transform: scaleX(0) rotate(0.001deg);
  transition-delay: 0s;
}

@media (hover: hover) and (pointer: fine) {
  [data-hover]:hover [data-underline-link]::before,
  [data-underline-link]:hover::before {
    transform-origin: left;
    transform: scaleX(1) rotate(0.001deg);
  }  
  
  [data-hover]:hover [data-underline-link="alt"]::before,
  [data-underline-link="alt"]:hover::before {
    transform-origin: right;
    transform: scaleX(0) rotate(0.001deg);
    transition-delay: 0s;
  }
  
  [data-hover]:hover [data-underline-link="alt"]::after,
  [data-underline-link="alt"]:hover::after {
    transform-origin: left;
    transform: scaleX(1) rotate(0.001deg);
    transition-delay: 0.3s;
  }
}