/*  ******************************************************************************************************************************************************
    FONT SIZES, @media < 600px:
        Logo: 1.75rem (--fontSize_M2); | 1.7rem (--fontSize_M1);
        Toggle Icon: 2rem (--fontSize_M4); | 1.7rem (--fontSize_M1); | 1.6rem (--fontSize7);
        Nav li: 1.35rem (--fontSize2);
    ******************************************************************************************************************************************************/
    
        .expand {display: block;}
        .collapse {display: none;}

        .header_container {display: block; z-index: 1000; width: 100%; margin: 0; font-family: var(--fontGroup2); background-color: var(--bgColor2);}
        .navbar-toggle {position: absolute; right: 0%; cursor: pointer;}

        :root {
              --fontSz3: var(--fontSize1); /* Menu */
              }
        nav li > a {font-size: var(--fontSz3); letter-spacing: 0.0143em;} /* letter-spacing: 0.2px; */

        /* Nav */
        nav {overflow: hidden; font-family: inherit; flex-grow: 0;} /* width: 100%; margin: 0; */
        nav ul {vertical-align: top; margin: 0; padding: 0; list-style-type: none; list-style-position: outside;}
	    nav li {margin: 0; font-family: inherit; text-align: left; transition: .2s ease;} /* display: block; */
        nav li > a {display: inline; margin: 0; padding: 0;}
        nav li > a:hover, nav li > a:focus {text-decoration: underline;}
                
        .boxShadow1 {box-shadow: 0 .4rem .8rem 0 var(--bgColor5);} /* Nav Collapsed */
        .boxShadow2 {box-shadow: 0 .4rem .8rem 0 var(--bgColor3);} /* Nav Expanded */

        /* LOGO */
        .logo1 {padding: 0;}

/* RESPONSIVE *********************************************************************************************************/

        @media (max-width: 600px) {
            .menu1, .logo1 {display: none;}            
            .logo2 {display: inline;}
            .menu2 {display: block;}
            
            :root {                
                 --navWidth: 100%;
                 --wrapperTop: var(--bannerHeight); /* .wrapper margin */

            /* FONT SIZE: 1=Logo; 2=Toggle Icon; 3=Nav li; */
                 --fontSz1: var(--fontSize_M2); /* 1.75rem */
                 --fontSz2: var(--fontSize_M4); /* 2rem */
                 --fontSz3: var(--fontSize2); /* 1.35rem */

            /* LINE HEIGHT: 1=Logo; 2=Toggle/Close Icons; 3/3a=Nav li; */
                 --lineHeight1: 3;
                 --lineHeight2: 2.79;
                 --lineHeight3: 2.6;            
                 --lineHeight3a: 3.9333; /* Above + Padding (1.8rem) | 4.0333; */
            }

            .header_container {position: absolute; background-color: var(--bgColor1); color: var(--colorLight_HC1); border-bottom: none;}            
            .topBox {display: block; position: absolute; width: var(--navWidth); margin: 0; z-index: 1001; font-family: var(--fontGroup2); background-color: var(--bgColor1); color: var(--colorLight_HC1);}
            .topBoxNav {display: inline-block; position: relative; width: var(--contentWidth); margin: 0 auto; overflow: hidden; text-align: left;}
            .topBox a {line-height: var(--lineHeight2); color: inherit;} /* Includes: .logo_text1 a + .navbar-toggle */
            .navbar-toggle {font-size: var(--fontSz2);}            
            /* LOGO */
            .logo_text1 {display: inline-block; padding: 0; font-size: var(--fontSz1); line-height: var(--lineHeight1); letter-spacing: .02em; text-transform: none; font-weight: normal; font-family: inherit; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;}
            .logo_text1 a {text-decoration: none; transition-duration: 0.5s; color: inherit;}

            /* Nav */
            nav {position: absolute; top: var(--wrapperTop); right: 0; width: var(--navWidth); margin: 0 auto;
                 text-align: left; background-color: var(--bgColor1); border-bottom: none; box-shadow: 0 .4rem .8rem 0 var(--bgColor5);}
            nav ul {width: var(--contentWidth); margin: 0 auto; padding: .4rem 0; background-color: inherit;}
            nav li {margin: 0 auto; position: relative; display: block; text-transform: uppercase;}            
            nav li > a {display: block; font-size: var(--fontSz3); line-height: var(--lineHeight3a); color: inherit;}

            /* Allows offscreen menu to toggle with strict CSS */
            #nav:target {display: block; left: 0;}
            #nav:target ul {position: relative; z-index: 1000;}
        }

        @media (max-width: 362px) {
            :root {
                 /* LINE HEIGHT: 1=Logo; 2=Toggle Icon; */
                 --lineHeight1: 2.4;
                 --lineHeight2: 2.4;                 
                 /* FONT SIZE: 2=Toggle Icon; */
                 --fontSz2: var(--fontSize_M1); /* 1.7rem */
            }
            .navbar-toggle {top: .2rem;}
        }

        @media (max-width: 350px) {
            :root {
                 /* FONT SIZE: 1=Logo; 2=Toggle Icon; */
                 --fontSz1: var(--fontSize_M1); /* 1.7rem */
                 --fontSz2: var(--fontSize7); /* 1.6rem */
            }
            .navbar-toggle {margin-top: .3rem;}
        }

        @media (max-width: 342px) {
            :root {
                 /* LINE HEIGHT: 1=Logo; 2=Toggle Icon; */
                 --lineHeight1: 2.1;
                 --lineHeight2: 2.1;
            }
            .navbar-toggle {margin-top: .2rem;}
        }
        
        /* > 600px */
        @media (min-width: 600px) {
            .logo1 {display: inline;}
            .menu2, .logo2, .topBox {display: none;}

            /* Nav */
            nav {width: 100%; margin: 0; padding-top: 5rem; padding-bottom: 2.5rem; 
                 display: flex; justify-content: space-between; background-color: var(--bgColor2);}
            nav ul {background-color: var(--bgColor2); line-height: 2.8rem;}
            nav li {float: left; display: inline-block;} /* letter-spacing: 0.2px; */
            nav li:not(:last-child) {margin-right: 1.3rem;}
            nav li > a {color: var(--colorDark_LC3);}
            nav li > a:hover, nav li > a:focus {color: var(--colorDark_HC1);}            
            .active {color: var(--colorDark_HC1);} /* text-decoration: underline; /* */

             /* LOGO */
            .logo1 {height: 5.2rem; margin: -.2rem 4rem 0 0;}
            .navbarlogo {height: 3.15rem; width: 16.07rem;}
            /* .logo_text1 {padding: 1rem 1.7rem 1rem 0;} /* */
         } 

         @media (min-width: 645px) {
            nav li:not(:last-child) {margin-right: 1.45rem;}
         }

         @media (min-width: 690px) {
            nav li:not(:last-child) {margin-right: 1.75rem;}
         }

         @media (min-width: 730px) {
            nav li:not(:last-child) {margin-right: 1.9rem;}
            /* LOGO */
            .navbarlogo {height: 3.5rem; width: 17.85rem;}
        }
 
        @media (min-width: 768px) {            
            .menu1 {display: none;}
            .menu2 {display: inline;}
            nav li:not(:last-child) {margin-right: 2rem;}
        }