/*   COLOR USAGE, BODY (Current Theme) *********************************************************************************************************************
     COLORS:    #000 (--colorDark_HC1);
                #808080 (--colorDark_LC3);
                #333 (--colorDark_LC4);
                #ddd (--colorLight_HC3);
                #D3D3D3 (--colorLight_HC4) | (--lGrey3);     
     BACKGROUND:#fff (--bgColor2);
                #000 (--bgColor1);
                rgba(0,0,0,.23) (--bgColor5)
                rgba(255, 255, 255, .3) (--bgColor3);

    COLORS = Black (nav, services header), White (nav), #808080 (light gray = body, nav, table, title, subtitle, SELECT DOCS: .content_det), #333 (dark gray = body, services header; @media < 600px, SELECT DOCS: title, subtitle), 
             HOVER = Black (Select Docs: .content_det a, .services_header a, .services_det a)
    BACKGROUND = White, Black (Nav < 600px)
    BOX-SHADOW = rgba(0,0,0,.23), rgba(255, 255, 255, .3)
    OTHER       CHEVRON/ARROWS: Black, #808080, #333
                BORDERS: #ddd, #D3D3D3 (light grays)
                SOCIAL ICONS: BACKGROUND = #D3D3D3, Black;  TEXT = White;
                FONT AWESOME: Black, White
    *******************************************************************************************************************************************************/
/*   ADDL. NOTES *******************************************************************************************************************************************
    Vars Renamed:  --fontSize1a => --fontSize2; --fontSize1b => --fontSize3, --fontSize3 => --fontSize7
    *******************************************************************************************************************************************************/

:root {

/* FONT */
       --fontGroup1: "Helvetica Neue", Helvetica, Arial, sans-serif;
       --fontGroup2: "Century Gothic", "Helvetica Neue", Helvetica, Arial, sans-serif;
       
       --fontSize1: 1.4rem;
       --fontSize2: 1.35rem;
       --fontSize3: 1.34rem;

       --fontSize7: 1.6rem;       
       --fontSize_M1: 1.7rem;
       --fontSize_M2: 1.75rem;
       --fontSize_M4: 2rem;

/* COLORS */

       --color1: #000000; /* black, rgba(0, 0, 0, 0) */
       --color2: #ffffff; /* white */

       /* Grey Family */
           --lGrey1: #ddd; /* #dddddd, rgb(221, 221, 221) */
           --lGrey3: #D3D3D3; /* rgb(211, 211, 211) */

           --dGrey1: #888; /* #888888 */
           --dGrey2: #808080;
           --dGrey3: #333; /* #333333, rgb(51, 51, 51) */
           --dGrey4: #15191b; /* rgb(21, 25, 27) */

           --shade4: rgba(0,0,0,.23);
           --shade10: rgba(255, 255, 255, .3);

/*** COLOR THEME ***/

    /* BACKGROUND COLORS */
       --bgColor1: var(--color1);
       --bgColor2: var(--color2);

       --bgColor3: var(--shade10); /* White */
       --bgColor5: var(--shade4); /* Grey */
       
    /* TEXT COLORS */ /* HC=High Contrast, LC = Low Contrast */
       /* Light Colors */
           --colorLight_HC1: var(--color2);
           --colorLight_HC3: var(--lGrey1);
           --colorLight_HC4: var(--lGrey3); 

       /* Dark Colors */
           --colorDark_HC1: var(--color1);
           --colorDark_LC3: var(--dGrey2);
           --colorDark_LC4: var(--dGrey3);
}