/*** pecaa css variables ***/

:root {

    /*** base css ***/
    --base-font-family: montserrat, sans-serif;
    --base-header-font-family: marine, sans-serif;
    --base-hero-font-family: marine, sans-serif;
    --base-nav-font-family: marine, sans-serif;
    --base-font-weight: 100;
    --base-header-weight: 300;
    --base-header-weight-normal: 400;
    --base-header-bolder: 900;
    --base-paragraph-weight: 400;
    --base-quicklink-weight: 500;
    --base-paragraph-hero-weight: 700;
    --base-h1-font-bold: 600;
    --base-small-headers-font-bold: 700;
    --base-link-font-bold: 600;
    --base-nav-font-size: 17px;
    --base-paragraph-size: 18px;
    --base-paragraph-size-small: 16px;
    --base-paragraph-small: 0.875rem;
    --base-paragraph-smaller: 0.7rem;
    --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: 1.2;
    --h1-mobile-font-weight: 300;

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

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

    --h4-mobile-font-size: 18px;
    --h4-mobile-line-height: 1.2;
    --h4-mobile-font-weight: 600;

    --hero-paragraph-font-size: 19.2px;

    --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: #4a4a4a;
    --header-text-color: #8c2890;
    --inverse-text-color: #FFF;
    --primary-color: #73af2f;
    --secondary-color: #00a6d5; /*** VSP Blue ***/
    --button-background: #faa634;
    --quickLinks-text-color: #595959;

    --light-background: #F6F6F6; /*** lite gray bkgd for LR spreads ***/
    --dark-background: #8c2890; /*** PECAA purple ***/

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

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

    --section-color-bkgd3: #73af2f; /*** PECAA green ***/
    --section-text-color-bkgd3: #fff;

    --section-color-bkgd4: #8c2890; /*** PECAA purple ***/
    --section-text-color-bkgd4: #fff;

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

    --section-link-default: #00a6d5;
    --section-link-default-visited: #9957CB;
    --section-link-default-hover: #8c2890;

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

    --link-color: #4a4a4a;
    --link-hover-color: #757575;
    --link-visited-color: #9957CB;
    --link-text-decoration: underline;

    --highliteColor1: #76BC21;
    --highliteColor2: #8C2890;
    --highliteColor3: #00B3DC;
    --highliteColor4: #f58220;

    --sideBarBorderColor: #979797;

}

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

        /*** header css ***/
        --h1-font-size: 34px;
        --h1-line-height: 1.2;

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

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

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

    }
}

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

        /*** header css ***/
        --h1-font-size: 36.8px;
        --h1-line-height: 1.2;

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

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

        --h4-font-size: 22px;
        --h4-line-height: 1.2;
    }
}