:root {
    --white: #fff;
    --black: #000;
    --grey: #7f7f7f;
    --grey-light: #d6d6d6;
    --grey-medium: #d9d9d9;
    --orange: #f27e00;
    --orange-light: #ffa73c;
    --orange-mid: #d95e00;
    --blue: #0081a7;
    --blue-sky: #ebf9fb;
    --blue-lighter: #eefcfe;
    --blue-light: #c4edf3;
    --blue-placeholder: #60abc1;
    --blue-mid: #005f7b;
    --blue-dark: #1865b8;
    --blue-darker: #004191;
    --blue-portrait: #80c9de;
    --red: #e20000;

    --grid-gap: 12px;

    --font-family: "Shift", serif;

    /* 14 / 14 */
    --font-size-body: 14px;
    --line-height-default: 1;

    /* 10 / 10 */
    --font-size-m0: 9px;

    /* 13 / 13 */
    --font-size-m1: 13px;

    /* 15 / 15 */
    --font-size-m2: 15px;

    /* 16 / 16 */
    --font-size-m3: 16px;
    --font-size-button: 16px;

    /* 12 / 12 */
    --font-size-t0: 12px;

    /* 20 / 20 */
    --font-size-t1: 20px;

    /* 23 / 23 */
    --font-size-t2: 23px;

    /* 25 / 25 */
    --font-size-t3: 25px;

    /* 36 / 36 */
    --font-size-h1: 36px;

    /* 30 / 30 */
    --font-size-h2: 30px;

    /* 22 / 22 */
    --font-size-h3: 22px;

    /* 18 / 18 */
    --font-size-nav: 18px;
}

/* RESPONSIVE */
@media only screen and (max-width: 740px) {
    :root {
        --font-size-body: 15px;
        --font-size-t0: 13px;
        --font-size-t1: 18px;
        --font-size-t3: 23px;
        --font-size-h1: 30px;
        --font-size-h2: 26px;
        --font-size-h3: 20px;
        --font-size-nav: 22px;
    }
}