/*//////// MOBILE HEADER & MENU ////////*/ 
/*//// MOBILE HEADER ////*/
header.mobile-header {
    position: relative;
    position: fixed;
    z-index: 100000;
    width: 100%;
    height: auto;
    padding: 0;
    overflow: visible;
    transition: .4s ease all;
}

header.mobile-header.animated {
    background-color: #1C1C1C;
    heighT: 6rem;
    overflow: visible;
}


/*//// MOBILE MENU ////*/    
nav#mobile-menu { 
    position: relative;
    position: fixed;
    z-index: 500;
    width: 100%;
    height: 100px;
    background-color: var(--var-header-color); 
} 
/*/// MOBILE DROP DOWN MENU ///*/
.drop-menu {
    /*position: absolute;*/
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    width: 100%;
    height: 0;
    overflow: hidden;
    transition: 0.4s all ease;
    padding: 5px 0 0 0;
    border-radius: 0rem 0rem 25rem 0rem;
    background: linear-gradient(0deg, #1C1C1C 0%, #1C1C1C 100%), linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.70) 56.25%, rgba(0, 0, 0, 0.00) 100%), #FFF;
 }
.drop-menu ul {
    padding: 0rem 3rem;
    padding: 0rem 0rem;
    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;
    padding: 16px 0;
    margin: 5px 0;
    color: var(--White, #FFF);
    font-feature-settings: 'liga' off, 'clig' off;
    font-family: "TCCC-UnityHeadline Bold";
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    text-transform: uppercase;
    text-align: left;
}
.drop-menu .main-menu-item a {
    padding-left: 2rem;
    color: #ffffff;
    font-weight: 700;
}
.drop-menu .main-menu-item a:hover {
    color: #ffffff;
}


.drop-menu .sub-main-menu-item {
    border-bottom: 1px solid #e3e3e3;
}
.drop-menu .sub-main-menu-item a {
    padding-left: 2rem;
    color: #000000;
    font-weight: 700;
    text-transform: capitalize;
}


/*/ HEIGHT OF OPEN DROP DOWN MENU /*/
.open {
    height: 101vh;
}


/*// PLACE ORDER BUTTON //*/
a#mobile-order-button {
    display: inline-block;
    width: 100%;
    max-width: calc(100% - 4rem);
    margin: 0 auto 0 2rem;
    padding: 2rem 2rem;
    border-radius: 5rem;
    background: var(--Coke-Red, #F40D1C);
    border: 1px solid var(--Coke-Red, #F40D1C);
    color: var(--White, #FFF);
    leading-trim: both;
    text-edge: cap;
    font-family: "TCCC-UnityHeadline Bold";
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    letter-spacing: 0.1rem;
    text-transform: uppercase;
    transition: .4s all ease;
    text-align: center;
}

/*//// MOBILE MENU ACCORDIAN ////*/
li.accordian-container {
    position: relative;
    height: auto;
}

/*// ACCORDIAN TOP //*/
li.accordian-container div.accordian-top {
    position: relative;
    height: auto;
    padding: 0 0 0 0;
}
/*//// ACCORDIAN ICON ////*/
li.accordian-container .accordian-icon {
   position: absolute;
   top: 50%;
   right: 2rem;
   transform: translateY(-50%);
   width: 2.4rem;
   height: 2.4rem;
   color: #ffffff;
   visibility: initial;
   cursor: pointer;
}
li.accordian-container .accordian-icon img {
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
}


div.accordian-top.open a {
    color: #E41C25 !important;
}


/*// ICON VISIBILITY //*/
li.accordian-container div.accordian-top.open .accordian-icon.closed { visibility: hidden; }
li.accordian-container div.accordian-top.open .accordian-icon.opened { visibility: visible; }

li.accordian-container div.accordian-top .accordian-icon.closed { visibility: visible; }
li.accordian-container div.accordian-top .accordian-icon.opened { visibility: hidden; }

/*// ACCORDIAN BOTTOM //*/
li.accordian-container div.accordian-bottom {
    height: auto;
    max-height: 0;
    padding: 0 0 0 0;
    background: #ffffff;
    transition: all .4s ease;
    overflow: hidden;
}
li.accordian-container div.accordian-bottom.open {
   height: auto;
   padding: 0rem 3rem 3rem 3rem;
   margin-top: 4rem;
   max-height: 100rem;
}





/*// YE OLD HAMBURGER //*/
.hamburger-container { 
    display: inline-block;
    position: absolute;
    top: 33%; right: 4%;
    width: 50px; 
    height: 50px; 
    cursor: pointer;
}
.hamburger { width: 66%; height: 4px; background-color: #B78952; 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: #ffffff !important;
} */

/*// MOBILE SITE LOGO //*/
div.mobile-site-logo {
    position: absolute;
    top: 52%;
    left: 4rem;
    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;
}





/*////// GLOBAL RESPONSIVE //////*/
/*// LARGE SCREEN //*/
@media only screen and (min-width: 1921px) { 

    html { font-size: 0.625vw !important; }

    /*//// SECTION CONTAINER ////*/
    div.section-container, 
    div#home-page { margin: 0 0; width: 100%; max-width: 100%; }

    /*//// CONTENT CONTAINERS ////*/
    header.container-content-width.responsive-margin{ padding-left: 55px !important; padding-right: 180px !important; }
    section.responsive-margin { padding-left: 180px !important; padding-right: 180px !important; }
    div.container-content-width.responsive-margin { padding-left: 180px !important; padding-right: 180px !important; }

    /*//// DESKTOP MENU ////*/
    nav#sustainability-sub-navigation ul.sub-menu { margin-left: 25rem; }


    /*//// FOOTER ////*/
    #footer { max-width: 100% !important; }

}


/*/ SCALE UP FROM 1440 to 1920 /*/
@media only screen and (min-width: 1441px) and (max-width: 1920px) { 

    html { font-size: 0.675vw !important; }

    /*//// CONTENT CONTAINERS ////*/
    header.container-content-width.responsive-margin { padding-left: 1.3rem !important; padding-right: 9rem !important; }
    section.responsive-margin { padding-left: 9rem !important; padding-right: 9rem !important; }    
    div.container-content-width.responsive-margin { padding-left: 9rem !important; padding-right: 9rem !important; }

}


/*// MEDIUM & LAPTOP //*/
@media only screen and (max-width: 1440px) { 

        /*//// DESIGN WIDTH ////*/
        html { font-size: 0.694vw; }

        /*//// CONTENT CONTAINERS ////*/
        header.container-content-width.responsive-margin { padding-left: 0 !important; padding-right: 6rem !important; }
        section.responsive-margin { padding-left: 6rem !important; padding-right: 6rem !important; }
        div.container-content-width.responsive-margin { padding-left: 6rem !important; padding-right: 6rem !important; }

        /* BELL LOGO */
        header.page-header div#logo-flex-item img.red-bell-logo { left: 4.2rem; }

}


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

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

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

        /*//// CONTENT CONTAINERS ////*/
        header.container-content-width.responsive-margin,
        section.responsive-margin,
        div.container-content-width.responsive-margin { padding-left: 4rem !important; padding-right: 4rem !important; }

        /*//// PAGE MODAL ////*/
        #pageModal .modal-box { margin-top: 10%; }

        /*//// FOOTER ////*/
        footer {}
        footer div.footer-container { padding: 7rem; }
        /*/ TOP FLEX /*/
        div.footer-top-left-column h3 { font-size: 3.2rem; }
        /*/ BOTTOM FLEX /*/
        div.footer-container div.footer-bottom-flex { padding-top: 4rem; }
        div.footer-bottom-flex div.footer-bottom-right-column { margin-left: 0; }
        div.footer-bottom-right-column p { padding-top: 0; }

}


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

        /*//// SIZING RESET ////*/
        html { font-size: 1.058vw; }

        /*//// CONTENT CONTAINERS ////*/
        header.container-content-width.responsive-margin,
        section.responsive-margin,
        div.container-content-width.responsive-margin { padding-left: 2rem !important; padding-right: 2rem !important; }

        /*//// FOOTER ////*/
        footer { height: auto; }
        footer div.footer-container { padding: 7rem 4rem; }
        /*/ TOP FLEX /*/
        div#footer-top-left-column { padding: 4rem 0; text-align: center; }
        div#footer-top-left-column img { display: inline-block; margin:0 auto }
        div#footer-top-center-column {}
        div#footer-top-right-column { padding: 4rem 0; }
        /*/ MENU LIST /*/
        ul.footer-menu li,
        ul.footer-menu li a { width: 100%; padding: 0.6rem 2rem; font-size: 1.2rem; border: none; }
        ul.footer-menu.bottom-footer-menu li:last-of-type,
        ul.footer-menu.bottom-footer-menu li:last-of-type a { width: 100%; padding: 0.6rem 2rem; font-size: 1.2rem; border: none; }
        
} 
@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: 40rem; }
        div.mobile-site-logo img { max-width: 75%; }


        /*//// NUTTON ////*/
        a.button-coke { padding: 2.2rem 4rem; margin-left: 0; margin-right: 0; }


        #pageModal .modal-box { max-width: 93% !important; }


        /*//// FOOTER ////*/
        footer { height: auto; }
        footer div.footer-container { padding: 7rem 4rem; }
        /*/ TOP FLEX /*/
        div#footer-top-left-column { padding: 4rem 0; text-align: center; }
        div#footer-top-left-column img { display: inline-block; margin:0 auto }
        div#footer-top-center-column {}
        div#footer-top-right-column { padding: 4rem 0; }
        /*/ MENU LIST /*/
        ul.footer-menu li,
        ul.footer-menu li a { width: 100%; padding: 0.6rem 2rem; font-size: 1.2rem; border: none; }
        ul.footer-menu.bottom-footer-menu li:last-of-type,
        ul.footer-menu.bottom-footer-menu li:last-of-type a { width: 100%; padding: 0.6rem 2rem; font-size: 1.2rem; border: none; }

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

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

        div.mobile-site-logo { left: 43%; top: 48%; width: 35rem; transform: translate(-50%, -50%); }

}
@media only screen and (max-width: 320px) {
        /*//// SIZING RESET ////*/
        html { font-size: 7.9px; }
}


/*//// 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) { }


/*
1920+ - content width 1623px - margin 180px
1670 - content width 1370px - margin 150px
1440 - content width 1320px - margin 60px
*/