/* CSS Variables [All pages] */


/* ------------------------- Variables - Sizes, Animations Etc. ------------------------------------------- */

:root {
  
  /* Animations */
  --cubic-default: cubic-bezier(0.625, 0.05, 0, 1);
  --duration-default-double: 1.2s; /* Double of default */
  --duration-default-onehalf: 0.9s; /* One & Half of default */
  --duration-default: 0.6s;
  --duration-default-half: 0.3s; /* Half of default */
  --animation-default-double: var(--duration-default-double) var(--cubic-default);
  --animation-default-onehalf: var(--duration-default-onehalf) var(--cubic-default);
  --duration-default-quarter: 0.15s; /* Quarter of default */
  --animation-default: var(--duration-default) var(--cubic-default);
  --animation-default-half: var(--duration-default-half) var(--cubic-default);
  --animation-default-quarter: var(--duration-default-quarter) var(--cubic-default);
  --animation-ease: 0.2s ease;
  --animation-ease-double: 0.4s ease;
  --cubic-bounce: linear(0,0.5737 7.6%,0.8382 11.87%,0.9463 14.19%,1.0292 16.54%,1.0886 18.97%,1.1258 21.53%,1.137 22.97%,1.1424 24.48%,1.1423 26.1%,1.1366 27.86%,1.1165 31.01%,1.0507 38.62%,1.0219 42.57%,0.9995 46.99%,0.9872 51.63%,0.9842 58.77%,1.0011 81.26%,1);
  
  /* RGB Colors, for transparent RGBA */
  --color-rgb-gray: 129, 127, 127;
  --color-rgb-tint: 40, 40, 40;
}


/* Mobile Landscape */
@media screen and (max-width: 767px) {
  :root {
    --btn-height: 3em;
    --padding-xl: 10em;
    --padding-l: 7.5em;
    --padding-m: 5em;
    --padding-s: 3.75em;
    --container-padding: 0.625em;
  }
}

/* ------------------------- Container -------------------------  */

/* Desktop */
@media screen and (min-width: 992px) {
  .container {
    max-width: var(--size-container);
    padding: 0 var(--container-padding);
  }
  
  .container.is--m {
    max-width: calc(var(--size-container) * 0.825);
  }
  
  .container.is--sm {
    max-width: calc(var(--size-container) * 0.65);
  }
  
  .container.is--s {
    max-width: calc(var(--size-container) * 0.5);
  }
}
  
/* Tablet & Mobile */
@media screen and (max-width: 991px) {
  .container {
    max-width: 100%;
    padding: 0 var(--container-padding);
  }
  
  .container.is--md-m {
    padding: 0 var(--gap-m);
  }
}

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

/* Desktop */
:root {
  --size-unit: 16; /* body font-size in design - no px */
  --size-container-ideal: 1440;
  --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: 850; 
    --size-container-min: 768px;
    --size-container-max: 991px;
  }
}

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

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

}