/* ----------------------------------------------------------------
	Variables
-----------------------------------------------------------------*/
@font-face {
    font-family: Adelle;
    src: url(../fonts/e278da9a-3d76-463f-861d-3c79711b67bb.woff2);
    font-weight: 600;
	font-display: swap;
}
@font-face {
    font-family: Avenir;
    src: url(../fonts/bfb11081-e571-43ad-bed9-8953cfd4133e.woff2);
    font-weight: 300;
    font-display: swap;
}
@font-face {
    font-family: Avenir;
    src: url(../fonts/ad58244e-b79c-4260-a588-c4a890416979.woff2);
    font-weight: 900;
    font-display: swap;
}

:root {
	--shade-white: #FFFFFF;
	--shade-grey-bright: #ECECED;
	--shade-grey-light: #D1D0D1;
	--shade-grey-medium: #A3A2A4;
	--shade-grey-dark: #757478;
	--shade-black: #46464B;
	--color-main: #FC4C02;
	--color-second: #46464B;
	--color-main-glow: #FFE8C3;
	--color-second-glow: #FFDBA6;

	--bg-white: var(--shade-white);
	--bg-light: var(--shade-grey-bright);
	--bg-dark: var(--color-main);

    --transition-s: 0.15s;
    --transition-default: 0.25s;
    --transition-l: 0.5s;

	--grid-count: 12;
	--grid-width: 1244px;
	--grid-padding: calc((100% - var(--grid-width)) / 2);
	--grid-gutter: 2.5rem;
	--grid-gutter-small: 0.75rem;
	--grid-column: calc((var(--grid-width) - ((var(--grid-count) - 1) * var(--grid-gutter))) / var(--grid-count));
	--grid-column-small: calc((var(--grid-width) - ((var(--grid-count) - 1) * var(--grid-gutter-small))) / var(--grid-count));

	--padding-xxs: 0.5rem;
	--padding-xs: 1.25rem;
	--padding-s: 2.5rem;
	--padding-default: 3.125rem;
	--padding-l: 5rem;
	--padding-xl: 7.5rem;
	--padding-xxl: 10rem;
	
	--gap-xxs: 0.5rem;
	--gap-xs: 1.25rem;
	--gap-s: 2.5rem;
	--gap-default: 3.125rem;
	--gap-l: 5rem;
	--gap-xl: 7.5rem;
	--gap-xxl: 10rem;

	--section-gap: 3.75rem;
	--section-padding-s: 7.5rem;
	--section-padding-default: 12.5rem;
	--section-padding-l: 20rem;

	--border-default-width: 1px;
	--border-default-color: var(--shade-grey-light);
	--border-default: var(--border-default-width) solid var(--border-default-color);
	--border-default-light: var(--shade-grey-light);
	--border-default-dark: var(--shade-white);
	--border-radius-full: 99999rem;
	--border-radius-round: 1.25rem;
	--border-radius-inner: 1rem;
	--border-radius-button: 0.5rem;
	--border-radius-input: var(--border-radius-button);
	--border-radius-textarea: var(--border-radius-round);
	--border-radius-image: var(--border-radius-round);

	--shadow: 0px 0px 5rem 0px rgba(0, 0, 0, 0.25);
	--shadow-light: var(--shadow);
	--shadow-dark: var(--shadow);

	--glow-intensity: 1.5;
	--glow-blur-intensity: 0.25rem;
	--glow-blur: blur(var(--glow-blur-intensity));
	--glow-light-width: 0.25rem;
	--glow-light-color: var(--color-main-glow);
	--glow-light: var(--glow-light-width) solid var(--glow-light-color);
	--glow-shadow-width: calc(var(--glow-light-width) * var(--glow-intensity));
	--glow-shadow-color: var(--color-main);
	--glow-shadow: var(--glow-shadow-width) solid var(--glow-shadow-color);
	--glow-transition: var(--transition-default);

	--glass-blur: blur(0.75rem);
	--glass-background: linear-gradient(150deg, rgba(74, 74, 74, 0.3), rgba(17, 17, 17, 0.3));
	--glass-border: rgba(255, 255, 255, 0.075);

	--svg-color: var(--color-main);
	--svg-color-dark: var(--shade-white);
	--svg-stroke-width: 1px;

	--table-color-white-offset: color-mix(in srgb, var(--shade-white) 95%, var(--shade-black));
    --table-color-light-offset: color-mix(in srgb, var(--shade-grey-bright) 92.5%, var(--shade-black));
    --table-color-dark-offset: color-mix(in srgb, var(--shade-black) 95%, var(--shade-white));

	--font-color-default: var(--color-second);
	--font-color-default-dark: var(--shade-white);
	--font-color-default-grey: var(--shade-grey-medium);
	--font-color-highlight: var(--color-second);
	--font-color-highlight-dark: var(--color-second);
	--font-color-kicker: var(--color-second);
	--font-color-kicker-dark: var(--color-second);
	--font-color-h1: var(--color-main);
	--font-color-h1-dark: var(--shade-white);
	--font-color-h2: var(--font-color-h1);
	--font-color-h2-dark: var(--font-color-h1-dark);
	--font-color-h3: var(--font-color-h1);
	--font-color-h3-dark: var(--font-color-h1-dark);
	--font-color-h4: var(--color-second);
	--font-color-h4-dark: var(--font-color-h1-dark);
	--font-color-h5: var(--font-color-h1);
	--font-color-h5-dark: var(--font-color-h1-dark);
	--font-color-h6: var(--font-color-h1);
	--font-color-h6-dark: var(--font-color-h1-dark);
	--font-color-disabled: var(--shade-grey-light);
	--font-color-disabled-dark: var(--shade-grey-dark);
	--font-color-link: var(--color-second);
	--font-color-link-hover: var(--color-main);
	--font-color-link-dark: var(--shade-white);
	--font-color-link-dark-hover: var(--color-main);
	--font-color-primary: var(--font-color-default-dark);
	--font-color-primary-hover: var(--font-color-default-dark);
	--font-color-primary-dark: var(--color-main);
	--font-color-primary-dark-hover: var(--shade-white);
	--font-color-secondary: var(--color-second);
	--font-color-secondary-hover: var(--font-color-default-dark);
	--font-color-secondary-dark: var(--color-second);
	--font-color-secondary-dark-hover: var(--font-color-default);
	--font-color-transition: var(--transition-default);

	--font-family-default: 'Avenir', sans-serif;
	--font-family-kicker: 'Adelle', sans-serif;
	--font-family-h1: 'Avenir', sans-serif;
	--font-family-h2: var(--font-family-h1);
	--font-family-h3: var(--font-family-h1);
	--font-family-h4: var(--font-family-h1);
	--font-family-h5: var(--font-family-h1);
	--font-family-h6: var(--font-family-h1);
	--font-family-button: var(--font-family-default);

	--line-height-default: 1.5em;
	--line-height-kicker: 1.2em;
	--line-height-h1: 1.1em;
	--line-height-h2: var(--line-height-h1);
	--line-height-h3: var(--line-height-h1);
	--line-height-h4: var(--line-height-h1);
	--line-height-h5: var(--line-height-h1);
	--line-height-h6: var(--line-height-h1);
	--line-height-button: 1.5em;

	--font-weight-default: 300;
	--font-weight-kicker: 600;
	--font-weight-h1: 900;
	--font-weight-h2: var(--font-weight-h1);
	--font-weight-h3: var(--font-weight-h1);
	--font-weight-h4: var(--font-weight-h1);
	--font-weight-h5: var(--font-weight-h1);
	--font-weight-h6: var(--font-weight-h1);
	--font-weight-link: 300;
	--font-weight-button: 900;

	--font-size-s: 1rem;
	--font-size-default: 1.125rem;
	--font-size-l: 1.5rem;
	--font-size-cta: 2.5rem;
	--font-size-kicker: 1.35rem;
	--font-size-h1: 6rem;
	--font-size-h2: 3.75rem;
	--font-size-h3: 1.75rem;
	--font-size-h4: 1.25rem;
	--font-size-h5: 1.25rem;
	--font-size-h6: 1.25rem;
	--font-size-h1p: 1.25rem;
	--font-size-button: var(--font-size-default);

	--text-transform-default: none;
	--text-transform-kicker: none;
	--text-transform-h1: none;
	--text-transform-h2: none;
	--text-transform-h3: none;
	--text-transform-h4: var(--text-transform-h3);
	--text-transform-h5: var(--text-transform-h3);
	--text-transform-h6: var(--text-transform-h3);
	--text-transform-button: none;

	--text-decoration-link: none;
	--text-outline-width: 0.125rem;

	--text-glow: 0px 0px 6px rgba(255, 159, 25, 0.70), 0px 0px 34px #FF9F19;	
	--text-glow-color: var(--color-main-glow);
	
	--text-gap-kicker: 0.5rem;
	--text-gap-h1: 1.75rem;
	--text-gap-h2: 1.25rem;
	--text-gap-h3: 1rem;
	--text-gap-h4: 0.375rem;

	--form-gap: 1.75rem;
	--form-input-padding: 0.25rem 0px;

	--button-container-margin-top: 3.125rem;
	--button-container-margin-top-s: 1rem;
	--button-padding: 0.63rem 1.25rem;
	--button-transition: var(--transition-l);
	--button-primary-background: var(--color-main);
	--button-primary-background-hover: var(--color-second);
	--button-primary-background-dark: var(--shade-white);
	--button-primary-background-dark-hover: var(--color-second);
	--button-secondary-border-width: 1px;
	--button-secondary-border: var(--button-secondary-border-width) solid var(--button-primary-background);
	--button-secondary-border-hover: var(--button-primary-background-hover);
	--button-secondary-border-dark: var(--button-primary-background-dark);
	--button-secondary-border-dark-hover: var(--button-primary-background-dark-hover);
	--button-icon-size: var(--font-size-button);
	--button-icon-gap: 0.25rem;
	--button-icon-stroke-width: var(--svg-stroke-width);

	--icon-button-padding: 0.75rem;
	--icon-button-icon-size: 1.75rem;

	--icon-size-xs: 1.75rem;
	--icon-size-s: 2.5rem;
	--icon-size-default: 3.75rem;
	--icon-size-l: 5rem;
	--icon-size-xl: 7.5rem;
	
	--nav-height: 5rem;
}

@media only screen and (min-width: 3600px) {
    :root {
        --grid-width: 3000px;
    }
}
@media only screen and (max-width: 2700px) and (min-width: 2400px) {
    :root {
        --grid-width: 2100px;
    }
}
@media only screen and (max-width: 1640px) {
	:root {
		--grid-width: 1150px;
	}
}
@media only screen and (max-width: 1480px) {
	:root {
		--grid-width: 1050px;
	}
}
@media only screen and (max-width: 1200px) {
	:root {
		--grid-width: 950px;
	}
}
@media only screen and (max-width: 992px) {
	:root {
		--grid-width: calc(100vw - 6rem);
		--grid-padding: 3rem;

		--section-gap: 3.75rem;
		--section-padding-s: 5rem;
		--section-padding-default: 8rem;
		--section-padding-l: 14rem;
		--font-size-s: 0.9rem;
		--font-size-default: 1rem;
		--font-size-l: 1.5rem;
		--font-size-cta: 2.5rem;
		--font-size-kicker: 1.125rem;
		--font-size-h1: 3.5rem;
		--font-size-h2: 2.5rem;
		--font-size-h3: 1.25rem;
		
		--padding-xxs: 0.5rem;
		--padding-xs: 1rem;
		--padding-s: 1.75rem;
		--padding-default: 2.5rem;
		--padding-l: 5rem;
		--padding-xl: 7.5rem;
		--padding-xxl: 10rem;
		
		--gap-xxs: 0.5rem;
		--gap-xs: 1.25rem;
		--gap-s: 2rem;
		--gap-default: 3.125rem;
		--gap-l: 5rem;
		--gap-xl: 7.5rem;
		--gap-xxl: 10rem;
	}
}
@media only screen and (max-width: 688px) {
	:root {
		--grid-width: calc(100vw - 4rem);
		--grid-padding: 2rem;
		
		--font-size-cta: 1.5rem;
		
		--section-padding-l: 20rem;
	}
}