/*//////// MOBILE HEADER & MENU ////////*/ 
/*//// MOBILE HEADER ////*/
header.mobile-header {
    position: relative;
    z-index: 100000;
    width: 100%;
    height: auto;
    padding: 0;
    overflow: visible;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;    
}
/*//// MOBILE MENU ////*/    
nav#mobile-menu { 
    position: relative;
    z-index: 500;
    width: 100%;
    height: 80px;
    background-color: #ffffff;
} 
/*/// MOBILE DROP DOWN MENU ///*/
.drop-menu {
    position: absolute;
    left: 0;
    z-index: 101;
    margin-top: -5px;
    /*    margin-top: -22px;*/
    width: 100%;
    height: 0;
    overflow: hidden;
    background: rgba( 51, 65, 83, .85);
    background: silver;
    transition: 0.4s all ease-in-out;
    padding: 0 0 0 10px;
 }
.drop-menu ul {
    padding-top: 4rem;
    padding-left: 2rem;
    list-style: none;
}
.drop-menu ul li { }
/*// HIDE MOBILE ACCENT LINE //*/
.drop-menu ul li .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;
    width: auto;
    padding: 0 0 2rem 0;
    margin: 0 0;
}
.drop-menu .main-menu-item:last-of-type {
    margin-top: 2rem;
}

.drop-menu .main-menu-item a {
    color: var(--Blue, #0A1E2C);
    text-align: center;
    font-family: "Gotham";
    font-size: 2rem;
    font-style: normal;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: 0.05rem;
    transition: all .4s ease;
    text-decoration: none;
}
.drop-menu .main-menu-item a.accent {
    padding: 1.2rem 4rem;
    border-radius: 5rem;
    border: 1px solid var(--Blue, #0A1E2C);
    background: var(--Blue, #0A1E2C);
    color: #ffffff;
}
.drop-menu .main-menu-item a:hover {
    color: #3A696E;
}
/*/ HEIGHT OF OPEN DROP DOWN MENU /*/
.open {
    height: 100vh;
}

/*// YE OLD HAMBURGER //*/
div.hamburger-container {
    display: inline-block;
    position: absolute;
    top: 57%; 
    right: 6%;
    transform: translateY(-50%);
    width: 5rem; 
    height: 5rem; 
    cursor: pointer;
}
.hamburger { 
    width: 100%;
    height: 2px;
    background-color: var(--Blue, #0A1E2C);
    border-radius: 0; 
}
.bar-1 { position: absolute; left: 50%; transform: translateX(-50%); top: 15%; transition: transform .3s ease; }
.bar-2 { position: absolute; left: 50%; transform: translateX(-50%); top: 33%; transition: transform .3s ease; }
.bar-3 { position: absolute; left: 50%; transform: translateX(-50%); top: 52%; transition: transform .3s ease; }

/* ANIMATED X */
/*.change-x .bar-1 {
  -webkit-transform: rotate(-45deg) translate(-1.8rem, 0rem);
  transform: rotate(-45deg) translate(-1.8rem, 0rem);
}
.change-x .bar-2 { opacity: 0; }
.change-x .bar-3 {
  -webkit-transform: rotate(45deg) translate(-1.5rem, .6rem);
  transform: rotate(45deg) translate(-1.5rem, .6rem);
}
div.splat-flex-item.hamburger-flex-item div.hamburger-container.change-x {
    transform: translateY(-50%) scale(.75);
}*/
/* SIMPLE X */
.change-x .bar-1, 
.change-x .bar-2, 
.change-x .bar-3 {
    background-color: #C4C4C4 !important;
}


/*// MOBILE SITE LOGO //*/
div.mobile-site-logo {
    position: absolute;
    left: 4rem;
    top: 50%;
    width: 25rem;
    transform: translateY(-50%);
    margin: 0;
}
div.mobile-site-logo img {
    width: 100%;
}





/*////// GLOBAL RESPONSIVE //////*/
/*// LARGE SCREEN //*/
@media only screen and (max-width: 1920px) { }

/*// MEDIUM & LAPTOP //*/
@media only screen and (max-width: 1440px) { 
        /*//// DESIGN WIDTH ////*/
        html { font-size: 0.694vw; }
}

/*// MOBILE SCREEN //*/
@media only screen and (max-width: 1024px) {
        /*//// SIZING RESET ////*/
        html { font-size: 10px; }

        /*//// SECTION RESET ////*/
        body .page-container main section { height: auto; }
}


/*// SMALL MOBILE //*/
@media only screen and (max-width: 851px) {

        /*//// SIZING RESET ////*/
        html { font-size: 9px; }


        /*//// FOOTER - CTA CONTAINER ////*/
        section.cta-section div.cta-container { padding: 0 3rem; }
        div.cta-container div.cta-flex-container { height: auto; transform: translateY(-25%); }
        #cta-flex-item-1 { padding: 3rem 3rem 0 3rem; }
        #cta-flex-item-1 h3 { font-size: 2.6rem; }
        #cta-flex-item-2 { padding: 3rem 3rem 2rem 3rem; }


        /*//// FOOTER ////*/
        footer { height: auto; }
        footer div.footer-container  { padding: 6rem 3rem 0 3rem; }
        footer div.footer-bottom-container { padding: 4rem 3rem 8rem 3rem; }
        /*/ TOP ROW /*/
        div#footer-top-left-column { order: 2; padding: 4rem 0 0 0;; text-align: center; }
        div#footer-top-center-column { order: 1; padding: 2rem 0; text-align: center; }
        div#footer-top-center-column img { display: inline-block; margin:0 auto }
        div#footer-top-right-column { order: 3; padding: 0 0  4rem 0; text-align: center; }
        /*/ BOTTOM ROW /*/
                div.footer-bottom-row div.footer-bottom-left-column,
        div.footer-bottom-row div.footer-bottom-center-column,
        div.footer-bottom-row div.footer-bottom-right-column { padding: 1rem 0 }
        div.footer-bottom-row div.footer-bottom-left-column { justify-content: center; text-align: center; }
        div.footer-bottom-left-column p { margin-bottom: 0; text-align: center; }
        div.footer-bottom-row div.footer-bottom-right-column {  text-align: center; }
        /*/ FOOTER MENU /*/
        ul.footer-menu {}
        ul.footer-menu li { display: block; padding: 0 0; margin: 2rem 0 0 0; }
        ul.footer-menu li a { font-size: 2rem; }


        /*//// CTA BUTTONS ////*/
        a.cta-button { font-size: 1.5rem; }
        
} 
@media only screen and (max-width: 480px) {

        /*//// SIZING RESET ////*/
        html { font-size: 1.875vw; }
        main.main-content { overflow-x: hidden; }


        /*//// MOBILE HEADER LOGO ////*/
        div.mobile-site-logo { left: 3rem; width: 30rem; }
        div.mobile-site-logo img { max-width: 100%; }


        /*//// FOOTER - CTA CONTAINER ////*/
        section.cta-section div.cta-container { padding: 0 3rem; }
        div.cta-container div.cta-flex-container { height: auto; transform: translateY(-25%); }
        #cta-flex-item-1 { padding: 3rem 3rem 0 3rem; }
        #cta-flex-item-1 h3 { font-size: 2.6rem; }
        #cta-flex-item-2 { padding: 3rem 3rem 2rem 3rem; }


        /*//// FOOTER ////*/
        footer { height: auto; }
        footer div.footer-container  { padding: 6rem 3rem 0 3rem; }
        footer div.footer-bottom-container { padding: 4rem 3rem 8rem 3rem; }
        /*/ TOP ROW /*/
        div#footer-top-left-column { order: 2; padding: 4rem 0 0 0;; text-align: center; }
        div#footer-top-center-column { order: 1; padding: 2rem 0; text-align: center; }
        div#footer-top-center-column img { display: inline-block; margin:0 auto }
        div#footer-top-right-column { order: 3; padding: 0 0  4rem 0; text-align: center; }
        /*/ BOTTOM ROW /*/
                div.footer-bottom-row div.footer-bottom-left-column,
        div.footer-bottom-row div.footer-bottom-center-column,
        div.footer-bottom-row div.footer-bottom-right-column { padding: 1rem 0 }
        div.footer-bottom-row div.footer-bottom-left-column { justify-content: center; text-align: center; }
        div.footer-bottom-left-column p { margin-bottom: 0; text-align: center; }
        div.footer-bottom-row div.footer-bottom-right-column {  text-align: center; }
        /*/ FOOTER MENU /*/
        ul.footer-menu {}
        ul.footer-menu li { display: block; padding: 0 0; margin: 2rem 0 0 0; }
        ul.footer-menu li a { font-size: 2rem; }

}
@media only screen and (max-width: 380px) { }
@media only screen and (max-width: 320px) { }


/*//// LANDSCAPE STYLES ////*/
@media screen and (max-width: 851px) and (orientation: landscape) {
    
        /*//// FOOTER ////*/
        footer {}
        footer div.footer-container { padding: 7rem 4rem; }
        /*/ TOP FLEX /*/
        div.footer-top-left-column h3 { font-size: 2.4rem; }
        div.footer-top-right-column img.footer-logo { width: 100%; }
        /*/ BOTTOM FLEX /*/
        div.footer-bottom-left-column ul.footer-menu li { display: block; width: 100%; margin-bottom: 1.8rem; }
        div.footer-bottom-left-column ul.footer-menu li > a { font-size: 1.6rem; }
        div.footer-bottom-center-column div.splat-flex-item-50.address-left-column a { font-size: 1.6rem; text-decoration: underline; }
        div.footer-bottom-flex div.footer-bottom-right-column { padding-top: 8rem; }

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