:root {

    /*** base css ***/
    --base-font-family: century-gothic, sans-serif;
    --base-header-font-family: century-gothic, sans-serif;
    --base-header-weight: 300;
    --base-paragraph-font-weight: 400;
    --base-h1-font-bold: 600;
    --base-header-weight-bold: 700;
    --base-link-font-weight: 400;
    --base-link-font-bold: 600;
    --base-paragraph-size: 1rem;
    --base-paragraph-large: 1.375rem;
    --base-paragraph-small: 0.875rem;
    --base-paragraph-line-height: 1.75;
    --base-body-background: #fff;
    --text-letter-spacing: 0.12px;
    --header-letter-spacing: 0.5px;

    --row-class-width: 90rem;

    --single-gutter-padding: 0.9375rem;
    --double-gutter-padding: calc(var(--single-gutter-padding)*2);

    --standard-component-padding: 1rem;
    --large-component-padding: 2rem;

    --small-margin-bottom: 1.5rem;
    --medium-margin-bottom: 2.5rem;
    --large-margin-bottom: 3.5rem;

    /*** header css ***/
    --h1-mobile-font-size: 36px;
    --h1-mobile-line-height: 1.5;
    --h1-mobile-font-weight: 700;

    --h2-mobile-font-size: 28px;
    --h2-mobile-line-height: 1.5;
    --h2-mobile-font-weight: 400;

    --h3-mobile-font-size: 22px;
    --h3-mobile-line-height: 1.75;
    --h3-mobile-font-weight: 400;

    --h4-mobile-font-size: 18px;
    --h4-mobile-line-height: 1.5;
    --h4-mobile-font-weight: 700;

    --h1-font-size: var(--h1-mobile-font-size);
    --h1-line-height: var(--h1-mobile-line-height);

    --h2-font-size: var(--h2-mobile-font-size);
    --h2-line-height: var(--h2-mobile-line-height);

    --h3-font-size: var(--h3-mobile-font-size);
    --h3-line-height: var(--h3-mobile-line-height);

    --h4-font-size: var(--h4-mobile-font-size);
    --h4-line-height: var(--h4-mobile-line-height);

    --tablet-multiplier: 1.125;
    --desktop-multiplier: 1.25;

    /*** colors ***/
    --text-color: #737678;
    --inverse-text-color: #FFF;
    --primary-color: #595959;
    --secondary-color: #FFF; 
    --button-background: #EFEFEF;

    --light-background: #F2F2F0; 
    --dark-background: #000;

    --section-color-bkgd1: #F6F6F6; 
    --section-text-color-bkgd1: #0B2335;

    --section-color-bkgd2: #F2F2F0; 
    --section-text-color-bkgd2: #000;

    --section-color-bkgd3: #737678; 
    --section-text-color-bkgd3: #fff;

    --section-color-bkgd4: #00204A; 
    --section-text-color-bkgd4: #fff;

    --section-white-background: #fff;
    --section-text-color-white: #0B2335;

    --section-link-default: #3A60FF;
    --section-link-default-visited: #9957CB;
    --section-link-default-hover: #241ED6;

    --section-link-inverse: #fff;
    --section-link-inverse-visited: #8B14A4;
    --section-link-inverse-hover: #000;

    --link-color: #3A60FF;
    --link-hover-color: #241ED6;
    --link-visited-color: #8B14A4;
    --link-text-decoration: underline;

    --highliteColor1: #D6D6D6;
    --highliteColor2: #ADADAD;
    --highliteColor3: #333333;
    --highliteColor4: #000000;

}

/* Medium only */
@media screen and (min-width: 40em) and (max-width: 63.9375em) {
    :root {

        /*** header css ***/
        --h1-font-size: 36px;
        --h1-line-height: 1.5;

        --h2-font-size: 32px;
        --h2-line-height: 1.5;

        --h3-font-size: 28px;
        --h3-line-height: 1.5;

        --h4-font-size: 20px;
        --h4-line-height: 1.5;

    }
}

/* large and up */
@media screen and (min-width: 64em) {
    :root {

        /*** header css ***/
        --h1-font-size: 40px;
        --h1-line-height: 1.5;

        --h2-font-size: 36px;
        --h2-line-height: 1.5;

        --h3-font-size: 32px;
        --h3-line-height: 1.5;

        --h4-font-size: 22px;
        --h4-line-height: 1.5;

    }
}