/* Atomic Styles */

/* ///////////////////// */

/* ***** Font Colors */

/* --- Default */

.fcolor--dark {
  color: var(--color__dark);
}

.fcolor--light {
  color: var(--color__light);
}

.fcolor--light-opac,
.fcolor--light-opac * {
  color: var(--color__lightOpac);
}

/* --- Corporate */

.fcolor--primary {
  color: var(--color__primary);
}

.fcolor--primary-opac {
  color: var(--color__primaryOpac);
}

.fcolor--secondary {
  color: var(--color__secondary);
}

.fcolor--accent {
  color: var(--color__accent);
}

/* --- System */

.fcolor--success {
  color: var(--color__success);
}

.fcolor--warning {
  color: var(--color__warning);
}

.fcolor--error {
  color: var(--color__error);
}

/* ***** Font Weights */

.fweight--bold {
  font-family: "Good Sans Bold";
  font-weight: 700;
}

/* ***** Background Colors*/

/* --- Default */

.bg--dark {
  background-color: var(--color__dark);
}

.bg--light {
  background-color: var(--color__light);
}

.bg--light *:not([class*="fcolor--"]),
.bg--light p a:not([class*="fcolor--"]),
.bg--light .p a:not([class*="fcolor--"]) {
  color: var(--color__primary);
}

/* --- Corporate */

.bg--primary {
  background-color: var(--color__primary);
}

.bg--primary *:not([class*="fcolor--"]),
.bg--primary p a:not([class*="fcolor--"]),
.bg--primary .p a:not([class*="fcolor--"]) {
  color: var(--color__light);
}

.bg--primary .fcolor--light-opac * {
  color: var(--color__lightOpac);
}

.bg--primary-opac {
  background-color: var(--color__primaryOpac);
}

.bg--secondary {
  background-color: var(--color__secondary);
}

.bg--accent {
  background-color: var(--color__accent);
}

.bg--accent *:not([class*="fcolor--"]),
.bg--accent p a:not([class*="fcolor--"]),
.bg--accent .p a:not([class*="fcolor--"]) {
  color: var(--color__light);
}

/* --- System */

.bg--success {
  background-color: var(--color__success);
}

.bg--warning {
  background-color: var(--color__warning);
}

.bg--error {
  background-color: var(--color__error);
}

.ib {
  display: inline-block;
}

/* ***** Fill Colors */

/* --- Default */

.fill--dark {
  fill: var(--color__dark);
}

.fill--light {
  fill: var(--color__light);
}

/* --- Corporate */

.fill--primary {
  fill: var(--color__primary);
}

.fill--primaryDark {
  fill: var(--color__primaryDark);
}

.fill--secondary {
  fill: var(--color__secondary);
}

.fill--accent {
  fill: var(--color__accent);
}

/* ***** Borders */

.radius--small {
  border-radius: var(--radius__small);
}

.radius--regular {
  border-radius: var(--radius__regular);
}

.radius--large {
  border-radius: var(--radius__large);
}

.radius--custom {
  border-top-left-radius: var(--radius__large);
  border-bottom-right-radius: var(--radius__large);
  overflow: hidden;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

.radius--custom__small {
  border-top-left-radius: var(--radius__small);
  border-bottom-right-radius: var(--radius__small);
  overflow: hidden;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

.radius--custom__regular {
  border-top-left-radius: var(--radius__regular);
  border-bottom-right-radius: var(--radius__regular);
  overflow: hidden;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

section.radius--custom {
  z-index: 1;
}

section.radius--custom + section {
  margin-top: -5em;
  padding-top: 5em;
}

/* ***** Overflows */

.overflow--hidden {
  overflow: hidden;
}

/* ***** Width */

.w--mini {
  width: 6rem;
}

/* ***** Height */

.h--full {
  height: 100%;
}

/* ***** Poiner Events */

.no-interact {
  pointer-events: none;
}

/* ***** Fixed Ratios */

[class*="ratio--"] {
  position: relative;
  height: auto;
}

[class*="ratio--"]::before {
  display: block;
  content: "";
  width: 100%;
}

[class*="ratio--"] > * {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.ratio--1_1::before {
  padding-top: calc(1 / 1 * 100%);
}

.ratio--3_2::before {
  padding-top: calc(2 / 3 * 100%);
}

.ratio--4_3::before {
  padding-top: calc(3 / 4 * 100%);
}

.ratio--3_4::before {
  padding-top: calc(4 / 3 * 100%);
}

.ratio--4_5::before {
  padding-top: calc(5 / 4 * 100%);
}

.ratio--16_9::before {
  padding-top: calc(9 / 16 * 100%);
}

.ratio--12_16::before {
  padding-top: calc(16 / 12 * 100%);
}

/* ***** GSAP Animations */

.split-parent {
  overflow: hidden;
}

.is-animating {
  pointer-events: none;
  cursor: default;
}

/* ***** Hyphens */

.hyphens--manual {
  -webkit-hyphens: manual;
  -ms-hyphens: manual;
  hyphens: manual;
}

/* ***** Position */

.pos--rel {
  position: relative;
}