﻿
        @media (min-width: 360px) {body {font-size: 1.0em;}} /* Standard font size is 16px */
        
        @media (min-width: 600px) {.container {width: 500px;} }
        @media (min-width: 645px) {.container {width: 78%; max-width: 536px;} }
        @media (min-width: 730px) {.container {width: 74%; max-width: none;} }
        @media (min-width: 768px) {.container {max-width: 704px;}}
        @media (min-width: 992px) {.container {max-width: none;} }
        @media (min-width: 1072px) {.container {width: 77.5%;}}
        @media (min-width: 1200px) {.container {max-width: 1100px; width: 78%;} }
        
        /* Social Icons, .content (Index.html & Consulting.html) */
        @media (min-width: 768px) {:root {--widthCore: 95%;} }
        @media (min-width: 860px) {:root {--widthCore: 85%;} }
        @media (min-width: 910px) {:root {--widthCore: 80%;} }
        @media (min-width: 1200px) {:root {--widthCore: 72%;} }
        @media (min-width: 1300px) {:root {--widthCore: 65%;} }
                
     	html {overflow-x: hidden; height: 100%; min-height: 100%; position: relative; 
              font-size: 62.5%; /* 1rem=10px */
              line-height: 1.25;  /* 1.25=20px  Standard */
     	}

        body {height: 100%; padding: 0; margin: 0; font-size: var(--fontSize1); font-family: var(--fontGroup1); color: var(--colorDark_LC4); background-color: var(--bgColor2); text-align: center; text-size-adjust: 100%; -webkit-text-size-adjust: 100%;}
        img, embed, object, video {max-width: 100%;} /* Ensures won't cause overflow & scrolling */
        a:link, a:visited, a:hover, a:focus {text-decoration: none;}
        a:hover, a:focus {cursor: pointer;}

 /* LAYOUT **********************/
        .container {height: 100%; margin: 0 auto; line-height: 1.429; /* 14.29 OR 17.86px */
                    font-size: var(--fontSize1);
                    display: flex; flex-direction: column; justify-content: space-between;}
        .flex_container {position: relative; display: flex; flex-direction: column; justify-content: flex-start;}
        .main {padding: 0;}
        .content {width: 100%; max-width: 100%; padding: 0; margin: 0; text-align: justify; color: var(--colorDark_LC3);}
        .wrapper {padding-bottom: .5rem;}
        /* FOOTER */
        .footer_wrapper {position: relative; justify-content: flex-end; padding: var(--paddingFooterTop) 0 var(--paddingFooter) 0;}
        footer {height: var(--heightFooter); padding: 0; position: relative; background-color: var(--bgColor2);}
        :root {
                 --heightTitle2: calc( var(--titleFooter) + var(--titleMarBottom2) ); /* --titleFooter (from JS) + Margin */
        }
        /* CONTENT */
        .content_det {width: 100%; padding-top: 2.5rem;}
        /* TITLE */
        .section-title, .section-title1 {position: relative; letter-spacing: .2rem; font-weight: 400; text-align: center; text-transform: uppercase; color: var(--colorDark_LC3); border-bottom: 1px solid var(--colorLight_HC3);}
        .section-title {margin: var(--titleMarTop) 0 var(--titleMarBottom); padding: var(--titlePadding) 0;}
        .section-title.Title2 {margin: 0 0 var(--titleMarBottom2);} /* Footer */
        :root {
            --titlePadding: .42rem;
            --titleMarBottom: 1.4rem;
        }
        
/*** ABBR. TEXT ***/
        .abbrMid3 {display: inline;} /* Social Title */
        li.hiddenIcon {*display: inline;} /* Social Icons */

/* RESPONSIVE *********************************************************************************************************/

        @media (max-width: 600px) {
            footer, .wrapper {width: var(--contentWidth); margin: 0 auto;}
            .wrapper {position: static; margin-top: var(--wrapperTop); padding-top: 1.6rem;}
            .container {min-height: var(--winHeight);}
            :root {
                --contentWidth: 85%;
                --titleMarTop: 1.4rem;
                --titleMarBottom2: var(--paddingFooter); /* !!! NOTE: Adds margin below line */ /* Also --heightFooter */
                /* Footer */
                --heightRem1: calc( var(--heightRem) - 0.5rem ); /* --paddingFooter & --paddingFooterTop */
                --heightFooter: calc( var(--heightSocial) + var(--heightTitle2)); /* Inc. margins */
                --paddingFooterTop: 0;
                --paddingFooter: .5rem;
             }
        }
        @media (max-width: 496px) {
            /* Abbr. Text */
            li.hiddenIcon {display: none;} /* Social Icons */
        }
        @media (max-width: 430px) {
            :root {--paddingFooter: .2rem;}
        }
        @media (max-width: 400px) {
            :root {--paddingFooter: .1rem;}
        }
        @media (max-width: 362px) {
            .wrapper {padding-top: 1rem;}
            :root {--paddingFooter: 0;}
        }
/* > 600px */
        @media (min-width: 600px) {
            footer {width: 100%; margin: 0;}
            .footer_wrapper {padding: 0;}
            .container {min-height: 100vh; font-size: var(--fontSize1);}
            :root {
                --titleMarTop: 1.49rem;
                --titleMarBottom2: 1.4rem; /* Also --heightFooter */
                /* Footer */
                --heightRem1: calc( var(--heightRem) - 2.5rem ); /* --paddingFooter & --paddingFooterTop */
                --heightFooter: calc( var(--heightSocial) + var(--heightTitle2) + var(--socMargin) ); /* Inc. margins */
            }
        }
        @media (min-width: 768px) {
            :root {
                --titleMarTop: 2.49rem;
            }
        }