/*//////// MOBILE HEADER & MENU ////////*/ 
/*//// MOBILE HEADER ////*/
header.mobile-header {
    position: relative;
    z-index: 100000;
    width: 100%;
    height: auto;
    padding: 0;
    overflow: visible;
}
/*//// MOBILE MENU ////*/    
nav#mobile-menu { 
    position: relative;
    z-index: 500;
    width: 100%;
    height: 60px;
    /*background-color: var(--var-header-color);*/
    background-color: #ffffff;
    box-shadow: 0 4px 8px 0 rgb(0 0 0 / 20%), 0 6px 20px 0 rgb(0 0 0 / 19%);    
} 
/*/// MOBILE DROP DOWN MENU ///*/
.drop-menu {
    position: absolute;
    /*top: 0;*/
    left: 0;
    z-index: 100;
    margin-top: -5px;
    width: 100%;
    height: 0;
    overflow: hidden;
    /*background: rgb(20,14,126);
    background: linear-gradient(180deg, rgba(20,14,126,0.7) 0%, rgba(0,0,0,0.7) 50%, rgba(0,0,0,0.8) 100%);*/
    background-color: #eae8e2;
    transition: 0.4s all ease-in-out;
    padding: 5px 30px 0 0;
 }
.drop-menu ul {
    padding-top: 1rem;
    padding-left: 2rem;
    margin-left: -100%;
    list-style: none;
    transition: all .4s ease;
}
.drop-menu.open ul {
    margin-left: 0;
}
.drop-menu ul li { }

/*// HIDE MOBILE ACCENT LINE //*/
.drop-menu ul li .menu-accent,
.drop-menu div.horiz-menu-accent,
.drop-menu div.vert-menu-accent { 
    display: none;
}
.drop-menu .main-sub-menu {
    margin-top: 15px;
}

/*// DROP DOWN MENU ITEMS //*/
.drop-menu .main-menu-item,
.drop-menu .sub-main-menu-item {
    display: block;
    padding: 4px 0;
    margin: 4px 0;
}
.drop-menu .main-menu-item a {
    font-style: normal;
    font-weight: 600;
    /*font-size: 1.6rem;*/
    font-size: 2.4rem;
    line-height: 1.5;
    letter-spacing: 1.14286px;
    text-transform: uppercase;
    color: #525668;
    transition: all .4s ease;
    background-color: initial;
}
.drop-menu .main-menu-item a:hover {
    color: maroon;
}
/*/ HEIGHT OF OPEN DROP DOWN MENU /*/
.open {
    height: 300px;
}
/*// YE OLD HAMBURGER //*/
.hamburger-container { 
    position: absolute;
    top: 15%; left: 2%;
    width: 50px; 
    height: 50px; 
    display: inline-block;
    cursor: pointer;
}
.hamburger { width: 66%; height: 4px; background-color: #253875; border-radius: 4px; transition: 0.4s; }
.bar-1 { position: absolute; left: 50%; transform: translateX(-50%); top: 15%; }
.bar-2 { position: absolute; left: 50%; transform: translateX(-50%); top: 33%; }
.bar-3 { position: absolute; left: 50%; transform: translateX(-50%); top: 52%; }

/*ANIMATED X*/
.change-x .bar-1 {
  -webkit-transform: rotate(-45deg) translate(-18px, -2px);
  transform: rotate(-45deg) translate(-18px, -2px);
}
.change-x .bar-2 {opacity: 0;}
.change-x .bar-3 {
  -webkit-transform: rotate(45deg) translate(-15px, 6px);
  transform: rotate(45deg) translate(-15px, 6px);
}
/*SIMPLE*/
/*.change-x .bar-1, .change-x .bar-2, .change-x .bar-3 {
    background-color: #888888;
}*/

/*//// MOBILE SITE LOGO ////*/
div.mobile-site-logo {
    position: absolute;
    top: 52%;
    left: 9rem;
    transform: translateY(-50%);
    width: 28%;
    height: auto;
    margin: 0;
}
div.mobile-site-logo img {
    width: 100%;
}
/*//// MOBILE CONTACT US BUTTON ////*/
#mobile-contact-us-button {
    right: 5rem;
}





/*///////// RESPONSIVE / BREAKPOINTS ////////*/
/*// LARGE SCREEN //*/
@media only screen and (max-width: 1920px) { html { font-size: 0.521vw; } }  /*< DESIGN WIDTH */
@media only screen and (max-width: 1800px) { /*html { font-size: 0.556vw; }*/ }
/*// MEDIUM & LAPTOP //*/
@media only screen and (max-width: 1600px) { /*html { font-size: 0.625vw; }*/ }
@media only screen and (max-width: 1440px) { /*html { font-size: 0.694vw; }*/ }
@media only screen and (max-width: 1200px) { /*html { font-size: 0.833vw; }*/ }


/*// MOBILE SCREEN //*/
@media only screen and (max-width: 1024px) {
        /*//// SIZING RESET ////*/
        html { font-size: 10px; }
        /*// SECTION RESET //*/
        body .page-container main section { height: auto; }


        /*//// MOBILE HEADER LOGO ////*/
        div.mobile-site-logo { top: 50%; left: 9rem; width: 11rem; }
        div.mobile-site-logo img { max-width: 100%; }
        #mobile-contact-us-button { right: 2rem; padding: 1.2rem 2.5rem 1.2rem 2.5rem; font-size: 1.4rem; }


        /*//// NAVIGATION & HEADER ////*/
        img.top-site-logo { display: none; }
        div.page-header-container div.red-accent-bar { height: 1rem; }
        a.join-now-button { top: 57%; transform: translateY(-50%); z-index: 1000001; }
        /*// SUB NAVIGATION //*/
        div.page-hero-container div.hero-accent-bar { height: auto; background-color: rgba(204, 209, 197, .6); }
        div.hero-accent-bar nav.hero-navigation { height: auto; padding: 3rem 0; }


        /*//// HERO SECTION ////*/
        a.wsa-button img { width: 25rem; min-width: 25rem; }
        section.page-hero-section { min-height: 6rem; }
        div.page-hero-container div.hero-blue-bar, 
        div.page-hero-container div.hero-content-container { top: 25%; bottom: initial; padding: 5% 0; }
        div.hero-flex-container { width: 100%; }
        div.hero-flex-container div.left-hero-flex-item { width: 40%; }
        div.hero-flex-container div.left-hero-flex-item h1,
        div.hero-blue-bar h2 { font-size: 5rem; line-height: 1; }
        div.hero-flex-container div.right-hero-flex-item { width: 50%; padding-right: 10rem; }
        div.hero-content-container p, 
        div.hero-blue-bar p { margin-top: 1rem; /*font-size: 1.4rem;*/ font-size: 1.6rem; }
        /*// ALERT BOX //*/
        div.alert-box { top: initial; bottom: 0; padding: 1.4rem 0 1.4rem 1.4rem; background-color: #2F4176; }
        div.alert-box.slide-open { right: -0.2rem; }
        div.alert-box div.alert-container { padding: 1.6rem; }
        div.alert-container h2 { margin-bottom: 0.8rem; font-size: 1.8rem; line-height: 1; }
        div.alert-container p { margin-bottom: 1.8rem; padding-left: 1.8rem; font-size: 1.2rem; }


        /*//// PAGE CONTENT SECTION ////*/
        section.page-content-section {}
        section.page-content-section div.page-content-container {  }
        div.content-flex-container {  }
        div.content-flex-container div.content-flex-item { padding: 6rem; }
        div.content-flex-item h1 { }
        div.content-flex-item h2 { }
        div.content-flex-item h3 { }
        div.content-flex-item h3 span { }
        div.content-flex-item h4 { }
        div.content-flex-item h5 { }
        div.content-flex-item h6 { }

        div.content-flex-item p { }
        div.content-flex-item p.list-header,
        div.content-flex-item p span.list-header { }
        div.content-flex-item ul, 
        div.content-flex-item ol { }
        div.content-flex-item ul li, 
        div.content-flex-item ol li { }
        div.content-flex-item p a,
        div.content-flex-item li a { }


        /*//// FOOTER ////*/
        footer {}
        div.footer-container {}
        div.footer-container div.footer-flex {}
        /*// LEFT //*/
        div.footer-flex div.footer-left-item { width: 100%; padding: 2rem; text-align: center; }
        div.footer-left-item img.footer-logo {}
        /*// CENTER //*/
        div.footer-flex div.footer-center-item { width: 100%; padding: 2rem; }
        div.footer-center-item ul.footer-menu { width: 100%; margin: 0 auto; }
        ul.footer-menu li { width: 100%; margin: 1rem 0; text-align: center; }
        ul.footer-menu li a { font-size: 1.8rem; }
        ul.footer-menu li ul.footer-sub-menu { width: 100%; margin: 0 auto; }
        ul.footer-sub-menu li { width: 100%; text-align: center; }
        ul.footer-sub-menu li a { font-size: 1.4rem; }
        /*// RIGHT //*/
        div.footer-flex div.footer-right-item { width: 100%; padding: 2rem; text-align: center; }
        div.footer-flex div.red-accent,
        div.footer-flex div.blue-accent { display: none; }

        div.footer-right-item a.social-icon-link { position: relative; top: initial; right: initial; }
        div.footer-right-item img.social-icon { float: initial; margin: 2rem auto; }


}


/*// SMALL MOBILE //*/
@media only screen and (max-width: 850px) { 
        html { font-size: 9px; }

        /*//// BUTTONS ////*/


        /*//// NAVIGATION & HEADER ////*/
        /*// SUB NAVIGATION //*/
        div.page-hero-container div.hero-accent-bar { height: auto; background-color: rgba(204, 209, 197, .7); }
        div.hero-accent-bar nav.hero-navigation { height: auto; padding: 1rem 0; }


        /*//// HERO SECTION ////*/
        section.page-hero-section div.page-hero-container { height: 50vh; }
        div.hero-flex-container div.left-hero-flex-item { width: 50%;  padding-left: 8rem;}
        div.hero-flex-container div.left-hero-flex-item h1,
        div.hero-blue-bar h2 { font-size: 3.8rem; text-align: left; }
        div.hero-flex-container div.left-hero-flex-item h1 span { display: none; }
        div.hero-flex-container div.right-hero-flex-item { width: 50%; padding-right: 4rem; }
        nav.hero-navigation ul.child-page-navigation { position: relative; top: initial; transform: translateX(-50%); margin: 0; width: 95%; }
        nav.hero-navigation ul.child-page-navigation li { padding: 0.3rem 2rem; }


        /*//// PAGE CONTENT SECTION ////*/
        section.page-content-section {}
        section.page-content-section div.page-content-container {  }
        div.content-flex-container {  }
        div.content-flex-container div.content-flex-item { padding: 6rem; }
        div.content-flex-item h1 { }
        div.content-flex-item h2 { }
        div.content-flex-item h3 { }
        div.content-flex-item h3 span { }
        div.content-flex-item h4 { }
        div.content-flex-item h5 { }
        div.content-flex-item h6 { }

        div.content-flex-item p { width: 85%; }
        div.content-flex-item p.list-header,
        div.content-flex-item p span.list-header { }
        div.content-flex-item ul, 
        div.content-flex-item ol { }
        div.content-flex-item ul li, 
        div.content-flex-item ol li { }
        div.content-flex-item p a,
        div.content-flex-item li a { }
} 
@media only screen and (max-width: 480px) { 
        html { font-size: 1.667vw; } /* =8px or 80% DESKTOP SIZE */

        /*//// BUTTONS ////*/
        a.shca-red-button,
        a.shca-blue-button { padding: 1.1rem 2.2rem 1.1rem 2.2rem; font-size: 2.2rem; }

        /*//// NAVIGATION & HEADER ////*/
        section.page-hero-section div.page-hero-container { height: auto; }
        div.page-header-container div.red-accent-bar { display: none; height: 0; }
        drop-menu .main-menu-item a { font-size: 1.8rem; }
        div.mobile-site-logo { top: 50%; left: 17%; width: 16rem; }
        a.join-now-button { padding: 1.4rem 1.2rem 1.1rem 1.8rem; /*font-size: 1.8rem;*/ font-size: 2rem; }
        div.page-hero-container div.hero-accent-bar { background-color: rgba(204, 209, 197, .85); }
        nav.hero-navigation ul.child-page-navigation li { padding: 1.1rem 2rem; }
        nav.hero-navigation ul.child-page-navigation li a { font-size: 2rem; }


        /*//// HERO SECTION ////*/
        a.wsa-button img { width: 40rem; }
        div.hero-flex-container div.left-hero-flex-item, 
        div.hero-flex-container div.right-hero-flex-item { width: 100%; max-width: 100%; padding: 1rem 7rem; text-align: left; }
        div.hero-flex-container div.left-hero-flex-item h1,
        div.hero-blue-bar h2 { font-size: 5rem; }
        div.hero-content-container p, div.hero-blue-bar p { margin-top: 1.8rem; font-size: 2.4rem; line-height: 1.5; letter-spacing: 0; } 
        div.page-hero-container div.hero-blue-bar, div.page-hero-container div.hero-content-container { padding: 7% 0 11% 0; }


        /*//// PAGE CONTENT SECTION ////*/
        div.content-flex-container div.content-flex-item { padding: 8rem 4rem; }
        div.content-flex-item h1 { }
        div.content-flex-item h2 { font-size: 4rem; }
        div.content-flex-item h3 { margin-top: 0; font-size: 3rem; }
        div.content-flex-item h3 span { }
        div.content-flex-item h4 { }
        div.content-flex-item h5 { }
        div.content-flex-item h6 { }

        div.content-flex-item p { width: 97%; font-size: 2.4rem; line-height: 1.5; letter-spacing: 0; }
        div.content-flex-item p.list-header,
        div.content-flex-item p span.list-header { }
        div.content-flex-item ul, 
        div.content-flex-item ol { }
        div.content-flex-item ul li, 
        div.content-flex-item ol li { }
        div.content-flex-item p a,
        div.content-flex-item li a { }





        /*//// FOOTER ////*/
        div.footer-left-item img.footer-logo { width: 60%; height: auto; }
        ul.footer-sub-menu li a { font-size: 1.6rem; }
        div.footer-right-item h4 { font-size: 2rem; }
        div.footer-right-item p { margin-bottom: 6rem; }
        div.footer-right-item p,
        div.footer-right-item p a { font-size: 1.8rem; }
        div.footer-right-item img.social-icon { display: block; margin: 2rem auto; }
        div.footer-right-item a.social-icon-link { top: initial !important; }


}
@media only screen and (max-width: 380px) { }
@media only screen and (max-width: 320px) { }
@media screen and (max-width: 850px) and (orientation: landscape) {
       /*//// HERO SECTION ////*/
       section.page-hero-section div.page-hero-container { height: 105vh; }

}
@media screen and (max-width: 667px) and (orientation: landscape) { }
@media screen and (max-width: 570px) and (orientation: landscape) { }