--theme-rgb: {themeColorRGB};
--theme-darker: {themeColorDarker};
--theme-contrast: {themeContrast};
--theme-alt: {themeAltColor};
--theme-alt-darker: {themeAltColorDarker};
--theme-alt-contrast: {themeAltContrast};
--heading-dark: {headingColorDark};
--text-dark: {textColorDark};
--background-dark: {darkBackground};
--background-dark-lighter: {darkBackgroundLighter};
--border-dark: {borderDark};
--heading-light: {headingColorLight};
--text-light: {textColorLight};
--background-light: {grayBackground};
--border-light: {borderLight};
--selected-nav-item: {selectedNavigationItem};
--header-height: {headerHeight};
--logo-padding: {logoPadding};
--top-combo-calc: calc(var(--header-height) + var(--pre-top-height));
--navigation-padding: {navigationPadding};
--navigation-font-size: {navigationFontSize};
--navigation-font-weight: {navigationFontWeight};
--grid-width-small: {gridWidthSmall};
--grid-width: {gridWidth};
--grid-width-big: {gridWidthBig};
--grid-gutter: {gridGutter};
--grid-gutter-half: calc(var(--grid-gutter) / 2);
--button-border-radius: {buttonBorderRadius};
--heading-font: {headingFont};
--font-size: {textFontSize};
--font-size-big: {textBigFontSize};
--font-size-small: {textSmallFontSize};
--body-line-height: {textLineHeight};
--font-size-h1: {heading1FontSize};
--font-size-h2: {heading2FontSize};
--font-size-h3: {heading3FontSize};
--font-size-h4: {heading4FontSize};
--font-size-h5: {heading5FontSize};
--font-size-h6: {heading6FontSize};
--hero-heading: {heroHeadingFontSize};
--heading-line-height: {headingLineHeight};
--font-weight-normal: normal;
--font-weight-light: 300;
--font-weight-bold: bold;
--font-weight-bolder: bolder;
--body-font-weight: {textFontWeight};
--heading-font-weight: {headingFontWeight};
--text-big-font-weight: {textBigFontWeight};
@media only screen and (max-width: 1200px) {
--navigation-padding: {navigationPaddingSmallerScreens};
@media only screen and (max-width: 992px) {
--header-height: {headerHeightMobile};
--grid-gutter: {gridGutterMedium};
--logo-padding: {logoPaddingMobile};
--navigation-font-size: {navigationFontSizeMobile};
@media only screen and (max-width: 768px) {
--grid-gutter: {gridGutterSmall};
--hero-heading: {heroHeadingMobileFontSize};
@media only screen and (max-width: 480px) {
--grid-gutter: {gridGutterXS};