/* font imports ------------------------------ */
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,200..800&display=swap');

@font-face {
    font-family: 'F37 Stout';
    src: url('/assets/fonts/F37Stout-Black.eot');
    src: url('/assets/fonts/F37Stout-Black.eot?#iefix') format('embedded-opentype'),
        url('/assets/fonts/F37Stout-Black.woff2') format('woff2'),
        url('/assets/fonts/F37Stout-Black.woff') format('woff'),
        url('/assets/fonts/F37Stout-Black.ttf') format('truetype'),
        url('/assets/fonts/F37Stout-Black.svg#/assets/fonts/F37Stout-Black') format('svg');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'F37 Stout';
    src: url('/assets/fonts/F37Stout-Black_1.eot');
    src: url('/assets/fonts/F37Stout-Black_1.eot?#iefix') format('embedded-opentype'),
        url('/assets/fonts/F37Stout-Black_1.woff2') format('woff2'),
        url('/assets/fonts/F37Stout-Black_1.woff') format('woff'),
        url('/assets/fonts/F37Stout-Black_1.ttf') format('truetype'),
        url('/assets/fonts/F37Stout-Black_1.svg#/assets/fonts/F37Stout-Black') format('svg');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'F37 Stout Black Expanded';
    src: url('/assets/fonts/F37Stout-BlackExpanded.eot');
    src: url('/assets/fonts/F37Stout-BlackExpanded.eot?#iefix') format('embedded-opentype'),
        url('/assets/fonts/F37Stout-BlackExpanded.woff2') format('woff2'),
        url('/assets/fonts/F37Stout-BlackExpanded.woff') format('woff'),
        url('/assets/fonts/F37Stout-BlackExpanded.ttf') format('truetype'),
        url('/assets/fonts/F37Stout-BlackExpanded.svg#/assets/fonts/F37Stout-BlackExpanded') format('svg');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'F37 Stout Black Expanded';
    src: url('/assets/fonts/F37Stout-BlackExpanded_1.eot');
    src: url('/assets/fonts/F37Stout-BlackExpanded_1.eot?#iefix') format('embedded-opentype'),
        url('/assets/fonts/F37Stout-BlackExpanded_1.woff2') format('woff2'),
        url('/assets/fonts/F37Stout-BlackExpanded_1.woff') format('woff'),
        url('/assets/fonts/F37Stout-BlackExpanded_1.ttf') format('truetype'),
        url('/assets/fonts/F37Stout-BlackExpanded_1.svg#/assets/fonts/F37Stout-BlackExpanded') format('svg');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'F37 Stout Black Condensed';
    src: url('/assets/fonts/F37Stout-BlackCondensed.eot');
    src: url('/assets/fonts/F37Stout-BlackCondensed.eot?#iefix') format('embedded-opentype'),
        url('/assets/fonts/F37Stout-BlackCondensed.woff2') format('woff2'),
        url('/assets/fonts/F37Stout-BlackCondensed.woff') format('woff'),
        url('/assets/fonts/F37Stout-BlackCondensed.ttf') format('truetype'),
        url('/assets/fonts/F37Stout-BlackCondensed.svg#/assets/fonts/F37Stout-BlackCondensed') format('svg');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'F37 Stout Black Condensed';
    src: url('/assets/fonts/F37Stout-BlackCondensed_1.eot');
    src: url('/assets/fonts/F37Stout-BlackCondensed_1.eot?#iefix') format('embedded-opentype'),
        url('/assets/fonts/F37Stout-BlackCondensed_1.woff2') format('woff2'),
        url('/assets/fonts/F37Stout-BlackCondensed_1.woff') format('woff'),
        url('/assets/fonts/F37Stout-BlackCondensed_1.ttf') format('truetype'),
        url('/assets/fonts/F37Stout-BlackCondensed_1.svg#/assets/fonts/F37Stout-BlackCondensed') format('svg');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

/* root colors & fonts ------------------------------ */
:root {
	--white: #FFF;
	--black: #000;
	--grey: #e9e9e9;
    --grey-faded: rgba(0,0,0,0.15);

    --charcoal: #1E1E1E;
    --offWhite: #E8E1D7;

    --bricolage: 'Bricolage Grotesque', sans-serif;
    --f37Stout: 'F37 Stout', sans-serif;

    --html-font-family: var(--bricolage);
    --html-font-size: 20px;
    --html-font-weight: 400;
    --html-font-style: normal;
    --html-line-height: 1.3em;
    --html-letter-spacing: 0;
    --html-text-transform: none;
    --html-text-decoration: none;
    --html-color: var(--offWhite);

    --h1-font-family: var(--f37Stout);
    --h1-font-size: 6rem;
    --h1-font-weight: 900;
    --h1-font-style: inherit;
    --h1-line-height: 1.1em;
    --h1-letter-spacing: inherit;
    --h1-text-transform: uppercase;
    --h1-text-decoration: inherit;
    --h1-color: inherit;

    --h2-font-family: var(--f37Stout);
    --h2-font-size: 4rem;
    --h2-font-weight: 900;
    --h2-font-style: inherit;
    --h2-line-height: 1.1em;
    --h2-letter-spacing: inherit;
    --h2-text-transform: inherit;
    --h2-text-decoration: inherit;
    --h2-color: inherit;

    --h3-font-family: inherit;
    --h3-font-size: 2.5rem;
    --h3-font-weight: 700;
    --h3-font-style: inherit;
    --h3-line-height: 1.1em;
    --h3-letter-spacing: inherit;
    --h3-text-transform: uppercase;
    --h3-text-decoration: inherit;
    --h3-color: inherit;

    --h4-font-family: inherit;
    --h4-font-size: 1.5rem;
    --h4-font-weight: 400;
    --h4-font-style: inherit;
    --h4-line-height: 1.3em;
    --h4-letter-spacing: inherit;
    --h4-text-transform: inherit;
    --h4-text-decoration: inherit;
    --h4-color: inherit;

    --h5-font-family: inherit;
    --h5-font-size: 1.25rem;
    --h5-font-weight: 400;
    --h5-font-style: inherit;
    --h5-line-height: 1.3em;
    --h5-letter-spacing: inherit;
    --h5-text-transform: inherit;
    --h5-text-decoration: inherit;
    --h5-color: inherit;

    --txt-xsml: 0.8rem;
    --txt-sml: 0.9rem;
    --txt-med: 1.2rem;

    --body-background-color: var(--charcoal);
    --bold-font-weight: 700;
    --link-color: var(--offWhite);
    --link-color-hover: var(--offWhite);
    --hr-weight: 1px;
    --hr-color: var(--grey-faded);
    --border: 1px solid var(--grey-faded);
    --shadow: 0 0.5rem 1rem var(--grey-faded);
    --scroll-behaviour: smooth;
    --transition: 0.3s;

    --txt-1-color: var(--charcoal);
    --txt-2-color: var(--black);
    --txt-3-color: var(--black);

    --background-color-1: var(--offWhite);
    --background-color-2: var(--grey);
    --background-color-3: var(--grey);
}

/* responsive font sizes ------------------------------ */
@media only screen and (max-width: 1350px) {
    :root {
        --html-font-size: 17.75px;
    }
}
@media only screen and (max-width: 1100px) {
    :root {
        --html-font-size: 17.5px;
    }
}
@media only screen and (max-width: 800px) {
    :root {
        --html-font-size: 17.25px;
    }
}
@media only screen and (max-width: 501px) {
    :root {
        --html-font-size: 17px;
    }
}

/* root element styles ------------------------------ */
:root {
    --btn-1-font-family: inherit;
    --btn-1-font-size: inherit;   
    --btn-1-font-weight: 700;
    --btn-1-line-height: inherit;
    --btn-1-letter-spacing: inherit;
    --btn-1-text-transform: uppercase;
    --btn-1-text-decoration: inherit;
    --btn-1-color: var(--charcoal);
    --btn-1-padding: 20px 40px;
    --btn-1-background: var(--offWhite);
    --btn-1-border: 1px solid var(--offWhite);
    --btn-1-border-radius: 0rem;
    --btn-1-box-shadow: initial;

    --btn-1-color-hover: var(--charcoal);
    --btn-1-background-hover: var(--offWhite);
    --btn-1-border-hover: 1px solid var(--offWhite);

    --btn-2-font-family: inherit;
    --btn-2-font-size: inherit;   
    --btn-2-font-weight: inherit;
    --btn-2-line-height: inherit;
    --btn-2-letter-spacing: inherit;
    --btn-2-text-transform: inherit;
    --btn-2-text-decoration: inherit;
    --btn-2-color: var(--black);
    --btn-2-padding: 0.75rem 1.25rem;
    --btn-2-background: var(--white);
    --btn-2-border: 1px solid var(--black);
    --btn-2-border-radius: 0rem;
    --btn-2-box-shadow: initial;

    --btn-2-color-hover: var(--white);
    --btn-2-background-hover: var(--black);
    --btn-2-border-hover: 1px solid var(--black);

    --input-font-family: inherit;
    --input-font-size: inherit;   
    --input-font-weight: inherit;
    --input-line-height: inherit;
    --input-letter-spacing: inherit;
    --input-text-transform: inherit;
    --input-text-decoration: inherit;
    --input-color: var(--black);
    --input-padding: 0.75rem 1.25rem;
    --input-background: var(--white);
    --input-border: 1px solid var(--black);
    --input-border-radius: 0rem;
    --input-outline-focus: 3px solid var(--grey-faded);

    --select-font-family: inherit;
    --select-font-size: inherit;   
    --select-font-weight: inherit;
    --select-text-transform: inherit;
    --select-color: var(--black);
    --select-padding: 0.75rem 1.25rem;
    --select-background: var(--white);
    --select-border: 1px solid var(--black);
    --select-border-radius: 0rem;

    --textarea-font-family: inherit;
    --textarea-font-size: inherit;   
    --textarea-font-weight: inherit;
    --textarea-line-height: inherit;
    --textarea-letter-spacing: inherit;
    --textarea-text-transform: inherit;
    --textarea-text-decoration: inherit;
    --textarea-color: var(--black);
    --textarea-padding: 0.75rem 1.25rem;
    --textarea-background: var(--white);
    --textarea-border: 1px solid var(--black);
    --textarea-border-radius: 0rem;
    --textarea-resize: none;

    --checkbox-radio-margin: 0.75rem;

    --label-font-family: inherit;
    --label-font-size: inherit;   
    --label-font-weight: inherit;
    --label-line-height: inherit;
    --label-letter-spacing: inherit;
    --label-text-transform: inherit;
    --label-text-decoration: inherit;
    --label-color: var(--black);

    --placeholder-font-family: inherit;
    --placeholder-font-weight: inherit;
    --placeholder-letter-spacing: inherit;
    --placeholder-text-transform: inherit;
    --placeholder-text-decoration: inherit;
    --placeholder-color: var(--black);
    --placeholder-opacity: 0.75;
}

/* Image ------------------------------ */

img {
    max-width: 100%;
    vertical-align: middle;
}
img.protected {
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
    -webkit-touch-callout: none;
}

/* fonts ------------------------------ */
html {
    font-family: var(--html-font-family);
    font-size: var(--html-font-size);
    font-weight: var(--html-font-weight);
    font-style: var(--html-font-style);
    line-height: var(--html-line-height);
    letter-spacing: var(--html-letter-spacing);
    text-transform: var(--html-text-transform);
    text-decoration: var(--html-text-decoration);
    color: var(--html-color);
}
h1,
.h1 {
    font-family: var(--h1-font-family);
    font-size: var(--h1-font-size);
    font-weight: var(--h1-font-weight);
    font-style: var(--h1-font-style);
    line-height: var(--h1-line-height);
    letter-spacing: var(--h1-letter-spacing);
    text-transform: var(--h1-text-transform);
    text-decoration: var(--h1-text-decoration);
    color: var(--h1-color);
}
h2,
.h2 {
    font-family: var(--h2-font-family);
    font-size: var(--h2-font-size);
    font-weight: var(--h2-font-weight);
    font-style: var(--h2-font-style);
    line-height: var(--h2-line-height);
    letter-spacing: var(--h2-letter-spacing);
    text-transform: var(--h2-text-transform);
    text-decoration: var(--h2-text-decoration);
    color: var(--h2-color);
}
h3,
.h3 {
    font-family: var(--h3-font-family);
    font-size: var(--h3-font-size);
    font-weight: var(--h3-font-weight);
    font-style: var(--h3-font-style);
    line-height: var(--h3-line-height);
    letter-spacing: var(--h3-letter-spacing);
    text-transform: var(--h3-text-transform);
    text-decoration: var(--h3-text-decoration);
    color: var(--h3-color);
}
h4,
.h4 {
    font-family: var(--h4-font-family);
    font-size: var(--h4-font-size);
    font-weight: var(--h4-font-weight);
    font-style: var(--h4-font-style);
    line-height: var(--h4-line-height);
    letter-spacing: var(--h4-letter-spacing);
    text-transform: var(--h4-text-transform);
    text-decoration: var(--h4-text-decoration);
    color: var(--h4-color);
}
h5,
.h5 {
    font-family: var(--h5-font-family);
    font-size: var(--h5-font-size);
    font-weight: var(--h5-font-weight);
    font-style: var(--h5-font-style);
    line-height: var(--h5-line-height);
    letter-spacing: var(--h5-letter-spacing);
    text-transform: var(--h5-text-transform);
    text-decoration: var(--h5-text-decoration);
    color: var(--h5-color);
}
.txt-xsml {
    font-size: var(--txt-xsml);
}
.txt-sml {
    font-size: var(--txt-sml);
}
.txt-med {
    font-size: var(--txt-med);
}
.bold {
    font-weight: var(--bold-font-weight);
}
.italic {
    font-style: italic;
}
.underline {
    text-decoration: underline;
}

/* color ------------------------------ */
.txt-1 {
    color: var(--txt-1-color);
}
.txt-2 {
    color: var(--txt-2-color);
}
.txt-3 {
    color: var(--txt-3-color);
}
a {
    color: var(--link-color);
    transition: color var(--transition);
}
a:hover {
    color: var(--link-color-hover);
}
body {
    background: var(--body-background-color);
}
.bg-1 {
    background: var(--background-color-1);
}
.bg-2 {
    background: var(--background-color-2);
}
.bg-3 {
    background: var(--background-color-3);
}


/* elements ------------------------------ */
hr {
    border-top: var(--hr-weight) solid var(--hr-color);
    border-left-width: 0;
    border-right-width: 0;
    border-bottom-width: 0;
    opacity: 1;
}
.border {
    border: var(--border);
}
.shadow {
    box-shadow: var(--shadow);
}
button, a {
    cursor: pointer;
}
button {
    transition: var(--transition);
}
.btn-1 {
    font-family: var(--btn-1-font-family);
    font-size: var(--btn-1-font-size);
    font-weight: var(--btn-1-font-weight);
    line-height: var(--btn-1-line-height);
    letter-spacing: var(--btn-1-letter-spacing);
    text-transform: var(--btn-1-text-transform);
    text-decoration: var(--btn-1-text-decoration);
    color: var(--btn-1-color);
    padding: var(--btn-1-padding);
    background: var(--btn-1-background);
    border: var(--btn-1-border);
    border-radius: var(--btn-1-border-radius);
    box-shadow: var(--btn-1-box-shadow);
}
.btn-1:hover {
    color: var(--btn-1-color-hover);
    background: var(--btn-1-background-hover);
    border: var(--btn-1-border-hover);
}
a.btn-1 {
    display: inline-block;
}
.btn-2 {
    font-family: var(--btn-2-font-family);
    font-size: var(--btn-2-font-size);
    font-weight: var(--btn-2-font-weight);
    line-height: var(--btn-2-line-height);
    letter-spacing: var(--btn-2-letter-spacing);
    text-transform: var(--btn-2-text-transform);
    text-decoration: var(--btn-2-text-decoration);
    color: var(--btn-2-color);
    padding: var(--btn-2-padding);
    background: var(--btn-2-background);
    border: var(--btn-2-border);
    border-radius: var(--btn-2-border-radius);
    box-shadow: var(--btn-1-box-shadow);
}
.btn-2:hover {
    color: var(--btn-2-color-hover);
    background: var(--btn-2-background-hover);
    border: var(--btn-2-border-hover);
}
a.btn-2 {
    display: inline-block;
}
@media only screen and (max-width: 1100px) {
    .btn-1:hover {
        background: var(--btn-1-background);
        color: var(--btn-1-color);
        border: var(--btn-1-border);
    }
    .btn-2:hover {
        background: var(--btn-2-background);
        color: var(--btn-2-color);
        border: var(--btn-2-border);
    }
}

/* controls ------------------------------ */

input {
    font-family: var(--input-font-family);
    font-size: var(--input-font-size);
    font-weight: var(--input-font-weight);
    line-height: var(--input-line-height);
    letter-spacing: var(--input-letter-spacing);
    text-transform: var(--input-text-transform);
    text-decoration: var(--input-text-decoration);
    color: var(--input-color);
    padding: var(--input-padding);
    background: var(--input-background);
    border: var(--input-border);
    border-radius: var(--input-border-radius);
}

input[type="file"] {
    padding: 0;
}

input::file-selector-button {
    font-weight: bold;
    padding: var(--input-padding);
    border-top: none;
    border-right: var(--input-border);
    border-bottom: none;
    border-left: none;
    margin-right: 15px;
    line-height: var(--input-line-height);
}

select {
    font-family: var(--select-font-family);
    font-size: var(--select-font-size);
    font-weight: var(--select-font-weight);
    letter-spacing: var(--select-letter-spacing);
    text-transform: var(--select-text-transform);
    text-decoration: var(--select-text-decoration);
    color: var(--select-color);
    padding: var(--select-padding);
    background: var(--select-background);
    border: var(--select-border);
    border-radius: var(--select-border-radius);
}

select option {
    font-family: var(--select-font-family);
    font-size: var(--select-font-size);
    font-weight: var(--select-font-weight);
    text-transform: var(--select-text-transform);
    color: var(--select-color);
}

textarea {
    font-family: var(--textarea-font-family);
    font-size: var(--textarea-font-size);
    font-weight: var(--textarea-font-weight);
    line-height: var(--textarea-line-height);
    letter-spacing: var(--textarea-letter-spacing);
    text-transform: var(--textarea-text-transform);
    text-decoration: var(--textarea-text-decoration);
    color: var(--textarea-color);
    padding: var(--textarea-padding);
    background: var(--textarea-background);
    border: var(--textarea-border);
    border-radius: var(--textarea-border-radius);
    resize: var(--textarea-resize);
}
input[type='checkbox'], input[type='radio'] {
    text-align: left;
    min-width: initial;
    width: 20px;
    margin-right: var(--checkbox-radio-margin);
}
input:focus, textarea:focus, select:focus {
    outline: var(--input-outline-focus);
}
input[type='checkbox']:focus, input[type='radio']:focus {
    outline: none;
}
label {
    font-family: var(--label-font-family);
    font-size: var(--label-font-size);
    font-weight: var(--label-font-weight);
    line-height: var(--label-line-height);
    letter-spacing: var(--label-letter-spacing);
    text-transform: var(--label-text-transform);
    text-decoration: var(--label-text-decoration);
    color: var(--label-color);
}
::placeholder {
    font-family: var(--placeholder-font-family);
    font-weight: var(--placeholder-font-weight);
    letter-spacing: var(--placeholder-letter-spacing);
    text-transform: var(--placeholder-text-transform);
    text-decoration: var(--placeholder-text-decoration);
    color: var(--placeholder-color);
    opacity: var(--placeholder-opacity);
}

/* :disabled */


input:disabled,
select:disabled,
textarea:disabled {
    background-color: var(--grey);
    border: 1px solid var(--grey);
}


/* animation ------------------------------ */
html {
    scroll-behavior: var(--scroll-behaviour);
}
.enter {
	opacity: 0;
}
.entered {
	animation: fadein 1s ease 0.3s 1 normal forwards;
}
@keyframes fadein {
	0% {opacity: 0;}
	100% {opacity: 1;}
}
@media only screen and (max-width: 800px) {
    .enter {opacity: 1;}
}