@font-face {
    font-family: "causten";
    src: url("../fonts/causten-thin-webfont.woff2") format("woff2");
}

@font-face {
    font-family: "causten";
    src: url("../fonts/causten-light-webfont.woff2") format("woff2");
    font-weight: 200;
}

@font-face {
    font-family: "causten";
    src: url("../fonts/causten-regular-webfont.woff2") format("woff2");
    font-weight: 300;
}

@font-face {
    font-family: "causten";
    src: url("../fonts/causten-medium-webfont.woff2") format("woff2");
    font-weight: 500;

}

@font-face {
    font-family: "causten";
    src: url("../fonts/causten-semibold-webfont.woff2") format("woff2");
    font-weight: 600;
}

@font-face {
    font-family: "causten";
    src: url("../fonts/causten-bold-webfont.woff2") format("woff2");
    font-weight: 700;
}

@font-face {
    font-family: "causten";
    src: url("../fonts/causten-black-webfont.woff2") format("woff2");
    font-weight: 900;
}

@font-face {
    font-family: "icone";
    src: url("../fonts/icones.woff") format("woff2")
}

:root {

    /* Fonts */

    --font-family-base: "causten", BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";

    --icone-font: 'icone', BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";

    --heading-font-family: var(--font-family-base);

    --font-weight-base: 500;

    --h1-font-size: 38px;
    --h1-line-height: 40px;

    --h2-font-size: 20px;
    --h2-line-height: 24px;

    --h3-font-size: 28px;

    --menu-font-size: 30px;

    --base-font-size: 17px;
    --line-height-base: calc(var(--base-font-size) * 1.5);

    --large-font-size: 25px;
    --large-line-height: 30px;

    --huge-font-size: 30px;
    --huge-line-height: 38px;

    --middle-font-size: 18px;
    --middle-plus-font-size: 20px;

    --small-font-size: 16px;
    --small-line-height: calc(var(--small-font-size) * 1.5);

    --smaller-font-size: 14px;

    --smallest-font-size: 12px;

    /* Color */

    --primary: #0DAD8D;
    --primary-light: #11C89F;

    --alt-lighter: rgba(157, 123, 82, 0.1);

    --grey-light: #C1C1C1;
    --grey-lighter: #F1F2F3;
    --grey-lightest: #D8D8D8;
    --grey-dark: #575756;
    --grey-darker: #2C2C2C;
    --grey-darkest: #151515;

    --danger: #CC0000;

    --text-color: var(--grey-darkest);
    --text-light: var(--grey-light);
    --text-lighter: var(--grey-lighter);

    --white: #fff;
    --page-title-color: var(--white);

    --facebook-color: #1877F2;
    --twitter-color: #03A9F4;
    --linkedIn-color: #01669A;

    --border-base: 1px solid var(--text-color);
    --border-light: 1px solid #D8D8D8;
    --border-lighter: 1px solid rgba(216, 216, 216, 0.3);

    --shadow-color: rgba(0, 0, 0, 0.125);

    --td-bg: #E8E9EA;
    --th-bg: #E8E9EA;

    --tab-inactive: #B4B4B4;

    --td-padding: 14px calc(var(--gutter) / 2);
    --th-padding: 14px 30px 14px calc(var(--gutter) / 2);

    /* Transitions */

    --transition-time: 0.25s;
    --transition-time-short: 0.125s;
    --transition-time-long: 0.5s;
    --transition-time-longer: 0.75s;
    --transition-time-longest: 1.25s;

    --transition-timing: cubic-bezier(.19, .94, .47, .99);

    --delay-burger: .75s;
    --delay-burger-item: .05s;
    --delay-sub-burger-item: .0375s;

    /* grid */

    --col: calc(var(--container-width) / 12);

    --gutter: 30px;
    --row-md: block;

    /* Container */

    --container-sm: 100%;
    --container-md: 840px;
    --container-lg: 1200px;

    --container-width: 100%;

    --container-padding: calc(var(--gutter) / 2);
    --container-sm-padding: calc(var(--gutter) / 2);

    --mobile-padding: 25px;

    /* Layout */

    --header-height: 117px;
    --left-nav: 75px;

    /* Forms */

    --input-border: 2px solid #D8D8D8;
    --input-border-hover: 2px solid var(--grey-darkest);
    --input-border-focus: 2px solid var(--primary);
    --input-border-alert: 2px solid var(--danger);

    /* Cover */
    --cover-height: auto;

}

@media (min-width: 768px) {
    :root {
        --container-width: var(--container-sm);

        --th-bg: #fff;

    }
}

@media (min-width: 1024px) {
    :root {
        --container-width: var(--container-md);

        --h1-font-size: 50px;
        --h1-line-height: 50px;

        --h2-font-size: 20px;
        --h2-line-height: 24px;

        --base-font-size: 20px;
        --line-height-base: calc(var(--base-font-size) * 1.5);

        --large-font-size: 24px;
        --large-line-height: 32px;

        --huge-font-size: 80px;
        --huge-line-height: 75px;

    }
}

@media (min-width: 1280px) {
    :root {
        --container-width: var(--container-lg);
        --container-sm-padding: var(--col);
        --menu-font-size: 45px;

        --h1-font-size: 65px;
        --h1-line-height: 65px;

        --h2-font-size: 20px;
        --h2-line-height: 24px;

        --large-font-size: 30px;
        --large-line-height: 38px;

        --huge-font-size: 80px;
        --huge-line-height: 75px;
    }
}

@media (min-width: 1800px) {
    :root {
        --menu-font-size: 55px;

        --h1-font-size: 80px;
        --h1-line-height: 75px;
    }
}