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

}