/*** prm css variables ***/
:root {
    /*** base css ***/
    --base-font-family: 'Open Sans', sans-serif;
    --base-header-font-family: 'Nunito Sans', sans-serif;
    --base-font-weight: 400;
    --base-header-weight: 300;
    --base-h1-font-bold: 600;
    --base-small-headers-font-bold: 700;
    --base-link-font-bold: 600;
    --base-paragraph-size: 1rem;
    --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: 32px;
    --h1-mobile-line-height: 48px;
    --h1-font-weight: 400;
    --h1-mobile-font-weight: 300;
    --h1-p-font-size: 22px;

    --h2-mobile-font-size: 28px;
    --h2-mobile-line-height: 32px;
    --h2-mobile-font-weight: 300;

    --h3-mobile-font-size: 22px;
    --h3-mobile-line-height: 30px;
    --h3-mobile-font-weight: 300;

    --h4-mobile-font-size: 18px;
    --h4-mobile-line-height: 27px;
    --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: #0B2335;
    --inverse-text-color: #FFF;
    --primary-color: #3A60FF;
    --secondary-color: #FFF; /*** VSP Blue ***/
    --button-background: #faa634;

    --light-background: #F6F6F6; /*** lite gray bkgd for LR spreads ***/
    --dark-background: #3A60FF; /*** VSP Blue ***/

    --section-color-bkgd1: #d0d7df; /*** lite gray bkgd for testimonials ***/
    --section-text-color-bkgd1: #0B2335;

    --section-color-bkgd2: #595959; /*** darker gray bkgd - accordions and footer ***/
    --section-text-color-bkgd2: #fff;

    --section-color-bkgd3: #B4DBF7; /*** VSP light blue ***/
    --section-text-color-bkgd3: #0B2335;

    --section-color-bkgd4: #241ED6; /*** VSP Dark vivid blue ***/
    --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: #3A60FF;
    --section-link-inverse-visited: #9957CB;
    --section-link-inverse-hover: #241ED6;

    --link-color: #3A60FF;
    --link-hover-color: #241ED6;
    --link-visited-color: #9957CB;
    --link-text-decoration: underline;

    --highliteColor1: #00b6f1;
    --highliteColor2: #003046;
    --highliteColor3: #9fcc3b;
    --highliteColor4: #f58220;

    --sideBarBorderColor: #979797;

    /* text format */ 
        --cap: capitalize;
        --footer-font-size: 14px;

}

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

        /*** header css ***/
        --h1-font-size: 36px;
        --h1-line-height: 52px;
        --h1-font-weight: 300;
        --h1-p-font-size: 20px;

        --h2-font-size: 32px;
        --h2-line-height: 48px;
        --h2-font-weight: 300;

        --h3-font-size: 28px;
        --h3-line-height: 32px;
        --h3-font-weight: 300;

        --h4-font-size: 20px;
        --h4-line-height: 33px;
        --h4-font-weight: 700;

    }
}

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

        /*** header css ***/
        --h1-font-size: 40px;
        --h1-line-height: 60px;
        --h1-font-weight: 300;
        --h1-p-font-size: 22px;

        --h2-font-size: 36.8px;
        --h2-line-height: 54px;
        --h2-font-weight: 300;

        --h3-font-size: 32px;
        --h3-line-height: 54px;
        --h3-font-weight: 300;

        --h4-font-size: 22px;
        --h4-line-height: 33px;
        --h4-font-weight: 700;

  	}
}