/* Theme Name: Liberty Coke 2024
Theme URI: https://neffknows.com/
Author: Brian Mishico
Author URI: https://neffknows.com/
Description: A theme created by Brian Mishico for Liberty Coke and Neff.
Version: 2.6
License: GNU General Public License v2 or later
License URI: LICENSE
Tags: Modernizr, Conditionizr, HTML5, CSS3
This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.

Liberty Coke 2024 - 2023 is based on Hello Elementor, Underscores, HTML5blank themes.
Underschttps://underscores.me/, (C) 2012-2019 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.
HTML5blank: http://html5blank.com/
HTML5blank is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/



/*//// BOX SIZING ////*/
html { box-sizing: border-box; }
*, *:before, *:after { box-sizing: inherit; }





/*//// GLOBAL DOCUMENT SET UP ////*/
html, body {
    width: 100%; 
    height: 100%;
}
html {
    font-family: "Verdana", "Arial", "Helvetica", sans-serif;
    font-family: "TCCC-UnityText Regular", sans-serif;
    font-size: 62.5%; /* = 10px BASE FONT-SIZE FOR EM */
    line-height: 1.25; /* = 125% BASE LINE HEIGHT */
    font-weight: normal;
    font-style: normal;
    color: var(--var-font-color);
    font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    scroll-behavior: smooth;
}
body {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    overflow: overlay; 
    background-color: var(--var-body-color);
}
/*// LOCK CLASS FOR MODAL IF NEEDED //*/
body.lock {
    overflow: hidden !important;
}





/*//// SCROLL BAR ////*/
body::-webkit-scrollbar {
  width: 10px;
}
 
body::-webkit-scrollbar-track {
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  background-color: rgba(255, 255, 255, 0);;
}
 
body::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, .6);
  outline: 1px solid rgba(0, 0, 0, .6);
}





/*//// LINKS ////*/
a,
a:link {
      color: var(--var-link-color);
      text-decoration: none;
      transition: color .4s ease-in-out;
}
a:hover,
a:active {
      color: var(--var-active-link-color);
      text-decoration: none;
}
a:visited {
      color: var(--var-visited-link-color);
}





/*////// TYPE ELEMENTS //////*/
h1, h2, h3, h4, h5, h6 {
    margin: 0;
    padding: 0;
    color: var(--Grey-1, #1C1C1C);
    font-feature-settings: 'clig' off, 'liga' off;
    font-family: "TCCC-UnityHeadline Regular", "TCCC-UnityHeadline", san-serif;
}

/*//// HEADINGS & SUBHEADINGS ////*/
h1 {
    font-size: 4rem;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}
h2 {
    font-size: 3rem;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}
h3 {
    font-size: 2.5rem;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}
h4 {
    font-size: 2rem;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}
h5 {
    font-size: 1.8rem;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}


/*//// PARAGRAPHS ////*/
p, li {
    margin: 0;
    padding: 0;
    font-feature-settings: 'clig' off, 'liga' off;
    color: #000000;
    font-size: 1.6rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.37;

}
p.p1 {
    font-size: 2.2rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.36;
}
p.p2 {
    font-size: 2rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.4;
}
p.p3 {
    font-size: 1.8rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.388;
}
p.p4 {
    font-size: 1.6rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.37;
}

/*//// EYEBROW CLASSES ////*/
p.eyebrow-1,
p.eyebrow-2,
p.eyebrow-3 {
    font-family: "TCCC-UnityText Regular", sans-serif;
    font-weight: bold;
    text-transform: uppercase;    
    color: var(--Coke-Red, #F40D1C);
}
p.eyebrow-1 {
    font-size: 3.5rem;
    font-style: normal;
    line-height: 1.14;
}
p.eyebrow-2 {
    font-size: 2.5rem;
    font-style: normal;
    line-height: 1.2;
}
p.eyebrow-3 {
    font-size: 2rem;
    font-style: normal;
    line-height: 1.4;
}


/*//// FONT CLASSES ////*/
.small-caps {
  font-variant: small-caps;
}










/*//////// SHARED PAGE ELEMENTS ////////*/

/*//// SCREEN READER TEXT & SKIPLINK ////*/
.screenreader-text {
  position: absolute;
  left: -999px;
  width: 1px;
  height: 1px;
  top: auto;
}
.screenreader-text:focus {
  color: black;
  display: inline-block;
  height: auto;
  width: auto;
  position: static;
  margin: auto;
}



/*//// BREAD CRUMBS ////*/




/*//// WRAPS ALL EDGE TO EDGE - MAIN, SECTIONS AND FOOTER ////*/
.page-container {
    position: relative;
    min-height: 100%;
    background-color: var(--var-gutter-color);
}
#top-of-page.lock {
    height: 100% !important;
    overflow: hidden !important;
}




/*//// WRAPS MAIN & SECTIONS - DESIGN WIDTH ////*/
div.section-container {
    position: relative;
    width: 100%;
    max-width: var(--var-design-width); 
    height: auto;
    min-height: calc( 100vh - ( 100vh * var(--var-sticky-footer-height) ) );
    margin: 0 auto;
    background-color: var(--var-page-color);
}





/*//// WRAPS SECTIONS EXCEPT FOR NAVIGATION AND FOOTER - DESIGN WIDTH ////*/
main.main-content {
    position: relative;
    z-index: 10;
}





/*//// SECTIONS HOLD PAGE/DESIGN ELEMENTS ////*/
section { 
    position: relative;
    width: 100%;
    padding: 0;
    margin: 0;
    min-height: 10rem;
}
/*// NAVIGATION SECTION //*/
section.page-navigation-section { 
    min-height: initial;
}




/*//// CONTENT WIDTH CONTAINERS ////*/
div.container-content-width {
    position: relative;
    width: 100%;
    height: 100%;
    max-width: var(--var-content-width);
    margin: 0 auto;
    padding: 0;
    background-color: inherit;
}
/*// SPECIFIC WIDTH //*/
div.container-1440-width {
    max-width: 1440px;
}
div.container-1920-width {
    max-width: 1920px;
}





/*//// PAGE BACKGROUND ////*/
div.page-container div.fixed-page-background {
    border: 1px solid red;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: #ffffff;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    background-image: url("https://dev-liberty-coke.pantheonsite.io/wp-content/uploads/2024/07/liberty-coke-site-background-fixed.png");
}
div.page-container div.section-container {
    background-color: transparent;
}
div.header-gradient {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 100;
    width: 100%;
    height: var(--var-header-height);
    background-color: var(--var-header-color);
    background: linear-gradient(180deg, rgba(23, 20, 20, 0.70) 0%, rgba(23, 20, 20, 0.00) 100%);
    transition: background-color .3s ease;
    overflow: visible;
}
div.section-container, 
div#home-page {
    z-index: 100 !important;
}





/*////// NAVIGATION SECTION ////*/
section.page-navigation-section {
    z-index: 1000;
    height: var(--var-header-height);
}
section.page-navigation-section.sink-into-hero {
    margin-bottom: calc( var(--var-header-height) * -1 );
}
section.page-navigation-section.fixed {
    position: fixed;
    z-index: 1000;
}


/*//// DESKTOP PAGE HEADER ////*/
section.page-navigation-section header.page-header {
    position: relative;
    position: fixed !important;
    z-index: 100;
    width: 100%;
    height: var(--var-header-height);
    max-width: var(--var-header-width);
    /*padding: 1.4rem 0 1.4rem 0;*/
    /*background-color: var(--var-header-color);*/
    background: linear-gradient(180deg, rgba(23, 20, 20, 0.50) 0%, rgba(23, 20, 20, 0.00) 100%);
    overflow: visible;
    transition: all .3s ease;
}

/*// LEFT FLEX ITEM - LOGO //*/
header.page-header div.logo-flex-item {
    height: auto;
    padding: 0 0 0 0;
    text-align: left;
}

div#logo-flex-item img.top-site-logo {
    position: absolute;
    z-index: 101;
    top: 45%;
    top: 75%;
    left: 6rem;
    transform: translateY(-50%);
    width: 14.6rem;
    height: auto;
    transition: all .4s ease;
}




/*// RIGHT - NAV //*/
header.page-header div.nav-flex-item {
    padding: 0 0 0 0;
    text-align: right;
}
/*/ MAIN MENU /*/
header.page-header ul.main-menu {
    display: inline-block;
    height: var(--var-header-height);
    vertical-align: bottom;
    margin: 0 0;
    padding: 0 0;
    list-style: none;
}
header.page-header ul.main-menu li {
    position: relative;
    display: inline-block;
    width: auto;
    height: var(--var-header-height);
    margin: 0rem 4.2rem 0rem 0rem;
    padding: 0rem 0rem 0rem 0rem;
    vertical-align: middle;
    border-bottom: .5rem solid transparent;
}
header.page-header ul.main-menu li.menu-arrow {
    padding-right: 2rem;
    margin: 0 3.6rem 0 0;
    cursor: pointer;
}
header.page-header ul.main-menu li.menu-arrow.active-open {
    border-bottom: .5rem solid #EC1A3B;
}
header.page-header ul.main-menu li.menu-arrow:after {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    content: "";
    width: 1.4rem;
    height: 1.4rem;;
    background-size: cover;
    background-image: url('https://dev-liberty-coke.pantheonsite.io/wp-content/uploads/2024/04/liberty-coke-menu-arrow-down.png');
}
header.page-header ul.main-menu li.menu-arrow.active-open:after {
    background-image: url('https://dev-liberty-coke.pantheonsite.io/wp-content/uploads/2024/07/liberty-coke-menu-arrow-up.png');
}

header.page-header ul.main-menu li:last-of-type {
    margin: 0 0 0 0;
}

header.page-header ul.main-menu a {
    position: relative;
    left: 0;
    top: 40%;
    color: var(--White, #FFF);
    text-align: center;
    font-family: "TCCC-UnityHeadline Regular", "TCCC-UnityHeadline", san-serif;
    font-size: 1.6rem;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    text-transform: uppercase;
    transition: all .3s ease;
}
header.page-header ul.main-menu a:hover { 
    /*margin-top: -1rem;*/
}

/*//// HEADER BUTTON ////*/
#desktop-order-button {
    padding: 1.5rem 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-size: 1.6rem;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    letter-spacing: 0.1rem;
    text-transform: uppercase;
    transition: .4s all ease;
}
#desktop-order-button:hover {
    color: var(--Coke-Red, #F40D1C);
    background: var(--White, #FFF);
    /*transform: translateY(-4px);*/
}





/*//////// MOBILE HEADER & MENU ////////*/ 
/*//// MOBILE HEADER ////*/
header.mobile-header {
    z-index: 100000;
    width: 100%;
    height: auto;
    height: 9.8rem;
    padding: 0;
    overflow: visible;
}
div.full-mobile-nav-flex-item {
    width: 100%;
    height: 4rem;
    padding: 0 1rem;
    text-align: right;
    background: linear-gradient(90deg, #000 0%, #8A8A8A 33.33%, #424242 66.67%, #1C1D1E 100%);
    box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.25);
}
#page-header-mobile div.full-mobile-nav-flex-item a {
    color: var(--white, #ffffff);
    text-align: right;
    text-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
    font-size: 1.6rem;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.125rem;
    text-decoration-line: underline;
    text-transform: uppercase;
}

/*// LEFT FLEX ITEM //*/
div.left-mobile-nav-flex-item {
    width: 50%;
    padding: 0 1rem;
}
#page-header-mobile div.left-mobile-nav-flex-item img {
    display: inline-block;
    width: 10.9rem;
    width: 100px;
    height: auto;
    vertical-align: middle;
    margin: 2rem;
}

div.left-mobile-nav-flex-item img#mobile-menu-logo {
    width: 10rem;
    margin: 3rem 0 0 2rem;
    padding: 0;
}
div.left-mobile-nav-flex-item img#mobile-menu-close {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 2.4rem;
    width: 2.6rem;
    margin: 0;
    padding: 0;
}


#page-header-mobile div.left-mobile-nav-flex-item p {
    display: inline-block;
    width: 25rem;
    margin: 0 0 0 1rem;
    vertical-align: middle;
    color: #000000;
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1;
    text-transform: uppercase;
}

/*// RIGHT FLEX ITEM //*/
div.right-mobile-nav-flex-item {
    position: relative;
    width: 50%;
    padding: 0 1rem;
    text-align: right;
}

#mobile-menu-button {
    position: fixed;
    top: 3rem;
    right: 0;
    width: 6.5rem;
    height: 5rem; 
    width: 6.5rem;
    height: 5rem;
    padding: 0.5rem 1rem 0.5rem 1rem;
    border-radius: 0.5rem 0rem 0rem 0.5rem;
    background: var(--Red-2, #EC1A3B);
    box-shadow: 4px 4px 4px 0px rgba(0, 0, 0, 0.25);
    transition: .3s ease all;
}
#mobile-menu-button div.burgerline {
    position: absolute;
    top: 1rem;
    left: 1rem;
    transform: translateY(-50%);
    width: 90%;
    height: 0.3rem;
    border-radius: 0.3rem;
    background: var(--White, #FFF);
    transition: all .3s ease;
}
#mobile-menu-button div.top-line {
    top: 30%;
    width: 2.1429rem;
    left: 2.4rem;
}
#mobile-menu-button div.middle-line {
    top: 50%;
    width: 3.75rem;
}
#mobile-menu-button div.bottom-line {
    top: 70%;
    width: 1.9286rem;
    left: 1.7rem;
}

#mobile-menu-button.open div.top-line, 
#mobile-menu-button.open div.middle-line,
#mobile-menu-button.open div.bottom-line { 
    width: 4.66rem;
    left: 1rem;
    transition: all .3s ease;
}

/*//// ANIMATED MOBILE MENU ////*/    
header.mobile-header.animated #mobile-menu-button {
    top: .5rem;
    background: transparent;
    box-shadow: none;
}
header.mobile-header.animated #mobile-menu-button div.burgerline {
    position: absolute;
    top: 1rem;
    left: 1rem;
    transform: translateY(-50%);
    width: 90%;
    height: 0.3rem;
    border-radius: 0.3rem;
    background: #ffffff;
    transition: all .3s ease;
}
header.mobile-header.animated #mobile-menu-button div.top-line {
    top: 30%;
    width: 2.1429rem;
    left: 2.4rem;
}
header.mobile-header.animated #mobile-menu-button div.middle-line {
    top: 50%;
    width: 3.75rem;
}
header.mobile-header.animated #mobile-menu-button div.bottom-line {
    top: 70%;
    width: 1.9286rem;
    left: 1.7rem;
}
header.mobile-header.animated #mobile-menu-button.open div.top-line, 
header.mobile-header.animated #mobile-menu-button.open div.middle-line,
header.mobile-header.animated #mobile-menu-button.open div.bottom-line { 
    width: 4.66rem;
    left: 1rem;
    transition: all .3s ease;
}

/*/ ANIMATED LOGOS /*/
#page-header-mobile.animated div.left-mobile-nav-flex-item img.mobile-logo {
    max-height: 0;
    opacity: 0;
    transition: .3s ease all;
}
#page-header-mobile div.left-mobile-nav-flex-item img.mobile-bell {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    width: 5rem;
    height: auto;
    margin: 0;
    opacity: 0;
    max-height: 0;
    transition: opacity .3s ease;
}
#page-header-mobile.animated div.left-mobile-nav-flex-item img.mobile-bell {
    max-height: initial;
    opacity: 1;
}


/*//// MOBILE MENU ////*/    
nav#mobile-menu { 
    position: relative;
    z-index: 500;
    width: 100%;
    height: 14.7rem;;
    background-color: #ffffff;
}
nav#mobile-menu ul.mobile-menu {
    position: absolute;
    top: 60%;
    transform: translateY(-50%);
    width: 100%;
    margin: 0;
    padding: 0 0 0 4rem;
    list-style: none;
}
nav#mobile-menu ul.mobile-menu li.mobile-menu-item {
    position: relative;
    display: inline-block;
    width: auto;
    margin: 2rem 0 ;
    margin: 6rem 0 2rem 0;
    border-bottom: 1px solid transparent;
}
nav#mobile-menu ul.mobile-menu li.mobile-menu-item a { 
    display: inline-block;
}
nav#mobile-menu ul.mobile-menu li.mobile-menu-item a:hover,
nav#mobile-menu ul.mobile-menu li.obile-menu-item.on-this-page a { }

/*/// MOBILE DROP DOWN MENU ///*/
.drop-menu {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 100;
    width: 100%;
    height: 0;
    margin-top: 0;
    padding: 1rem 0.8rem 0 0.8rem;
    overflow: hidden;
    background: #26275f;
    transition: all 0.2s ease;
 }

/*// DROP DOWN MENU ITEMS //*/ 
.drop-menu ul {
    padding-top: 1rem;
    padding-left: 2rem;
    list-style: none;
}
.drop-menu ul li { }
/*// DROP DOWN MENU ITEMS //*/
.drop-menu .main-menu-item,
.drop-menu .sub-main-menu-item {
    display: block;
    padding: 7px 0;
    margin: 5px 0;
    font-size: 2.2rem;
    line-height: 1; 
    letter-spacing: .05rem;
    text-transform: uppercase;
    background-color: initial;
}
.drop-menu .main-menu-item a {
    color: #E41C25;
    font-weight: 800;
}
.drop-menu .main-menu-item a:hover {
    color: #000000;
}
/*/ HEIGHT OF OPEN DROP DOWN MENU /*/
.open {
    height: 101vh;
}
/*// YE OLD HAMBURGER //*/
.hamburger-container {
    /*display: inline-block;*/
    display: none:;
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    width: 50px;
    height: 50px;
    cursor: pointer;
}
.hamburger { width: 66%; height: 3px; background-color: #E41C25; border-radius: 2px; 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: #253875 !important;
}

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








/*//// DESKTOP FIXED NAVIGATION & ANIMATION STYLES ////*/
section.page-navigation-section header.page-header.animated {
    height: 8rem;
    padding: 0 0 0 0;
    background-color: #202124;
}
/* DESKTOP MAIN MENU */
header.page-header.animated ul.main-menu,
header.page-header.animated ul.main-menu li {
    transition: all .2s ease;
    max-height: 8rem;
}
header.page-header.animated ul.main-menu a {
    top: 38%;
}

/* WHITE LOGO */
header.page-header.animated div#logo-flex-item img.top-site-logo {
    top: 4rem;
    left: 6rem;
    width: 6.6rem;
    height: auto;
    opacity: 0;
}
/* BELL LOGO */
header.page-header div#logo-flex-item img.red-bell-logo {
    position: absolute;
    top: 0rem;
    left: 6rem;
    width: 8rem;
    height: auto;
    opacity: 0;
    transition: all .2s ease;
}
header.page-header.animated div#logo-flex-item img.red-bell-logo {
    opacity: 1;
}

/*/ ORDER BUTTON /*/
header.page-header.animated #desktop-order-button {
    padding: 2.9rem 2rem 3.1rem 2rem;
    border-radius: 0;
}

header.page-header ul.main-menu li.menu-item a { 
    transition: color .4s ease;
}
header.page-header ul.main-menu li.menu-item:hover a,
header.page-header ul.main-menu li.menu-item a:hover {
    color: #EC1A3B;
}
header.page-header ul.main-menu li.menu-arrow:hover:after,
header.page-header ul.main-menu li.menu-arrow:hover a:hover {
    color: #EC1A3B !important;
}
li.active-open a,
li.active-open:after {
    color: #EC1A3B !important;            
}
nav.sub-navigation {
    position:absolute;
    left: -35rem;
	/* left was -29rem*/
    top: 100%;
	/*right was right: -12rem; */
    right: -16rem;
    background: transparent;
    height: 30rem;
    max-height: 0;
    transition: all .4s ease;
    opacity: 0;
    overflow: hidden;
    text-align: center;
}
nav.sub-navigation ul.sub-menu li a {
    transition: color .4s ease;
}
nav.sub-navigation ul.sub-menu li:hover a,
nav.sub-navigation ul.sub-menu li a:hover {
    color: #EC1A3B;
}

/* ABOUT SUB NAV */
nav#about-sub-navigation.open {
    max-height: 7.5rem;
    padding: 1.6rem 2rem;
    background: var(--White, #FFF);
    opacity: 1;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
}
nav#about-sub-navigation ul.sub-menu {}
nav#about-sub-navigation ul.sub-menu li {
    position: relative;
    padding-left: 5rem;
    padding-right: 5rem;
    display: inline-block;
    color: var(--Grey-1, #1C1C1C);
    text-align: center;
    font-feature-settings: 'clig' off, 'liga' off;
        font-family: "TCCC-UnityText Regular";
    font-size: 1.6rem;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    text-transform: capitalize;            
}
nav#about-sub-navigation ul.sub-menu li:after {
    position: absolute;
    content: "";
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    width: 3.5rem;
    height: 3.5rem;
    background-size: cover;
    background-position: center;
}
#about-sub-navigation-1:after {
    background-image: url('https://dev-liberty-coke.pantheonsite.io/wp-content/uploads/2024/07/about-subnav-icon-1.png');
}
#about-sub-navigation-2:after {
    background-image: url('https://dev-liberty-coke.pantheonsite.io/wp-content/uploads/2024/07/about-subnav-icon-2.png');
}
#about-sub-navigation-3:after {
    background-image: url('https://dev-liberty-coke.pantheonsite.io/wp-content/uploads/2024/07/about-subnav-icon-3.png');
}
#about-sub-navigation-4:after {
    background-image: url('https://dev-liberty-coke.pantheonsite.io/wp-content/uploads/2024/07/about-subnav-icon-4.png');
}
#about-sub-navigation-5:after {
    background-image: url('https://dev-liberty-coke.pantheonsite.io/wp-content/uploads/2024/08/about-subnav-icon-leadership.png');
}
nav#about-sub-navigation ul.sub-menu li:last-of-type {
    padding-right: 0;
}
nav#about-sub-navigation ul.sub-menu li a {
    font-family: "TCCC-UnityText Regular";
    color: var(--Grey-1, #1C1C1C);
    text-align: center;
    font-feature-settings: 'clig' off, 'liga' off;
    font-size: 1.6rem;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    text-transform: capitalize;
}
nav#about-sub-navigation ul.sub-menu li a:hover { }

/*//// LOCATION SUB NAV ////*/
nav#location-sub-navigation.open {
    max-height: 13.5rem;
    padding: 2rem 2rem;
    background: var(--White, #FFF);
    opacity: 1;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
}
nav#location-sub-navigation ul.sub-menu {
    width: 119rem;
    margin-left: 21rem;
    width: 118rem;
    margin-left: 22rem;

}
nav#location-sub-navigation ul.sub-menu li {
    position: relative;
    padding-left: 5rem;
    width: 23rem;
    margin-bottom: 3.2rem;
    display: inline-block;
    color: var(--Grey-1, #1C1C1C);
    text-align: center;
    font-feature-settings: 'clig' off, 'liga' off;
    font-family: "TCCC-UnityText Regular";
    font-size: 1.6rem;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    text-transform: capitalize;
    text-align: left;
}
nav#location-sub-navigation ul.sub-menu li:after {
    position: absolute;
    content: "";
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    width: 3.5rem;
    height: 3.5rem;
    background-size: cover;
    background-position: center;
    background-image: url('https://dev-liberty-coke.pantheonsite.io/wp-content/uploads/2024/07/location-icon-1.png');
}

nav#location-sub-navigation ul.sub-menu li a {
    font-family: "TCCC-UnityText Regular";
    color: var(--Grey-1, #1C1C1C);
    text-align: center;
    font-feature-settings: 'clig' off, 'liga' off;
    font-size: 1.6rem;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    text-transform: capitalize;
}

/*//// SUSTAINABILITY SUB NAV ////*/
nav#sustainability-sub-navigation.open {
    max-height: 7.5rem;
    padding: 1.6rem 2rem;
    background: var(--White, #FFF);
    opacity: 1;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
}
nav#sustainability-sub-navigation ul.sub-menu {
    width: 119rem;
    margin-left: 19rem;  
}
nav#sustainability-sub-navigation ul.sub-menu li {
    position: relative;
    padding-left: 5rem;
    padding-right: 2rem;
    display: inline-block;
    color: var(--Grey-1, #1C1C1C);
    text-align: center;
    font-feature-settings: 'clig' off, 'liga' off;
    font-family: "TCCC-UnityText Regular";
    font-size: 1.6rem;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    text-transform: capitalize;            
}
nav#sustainability-sub-navigation ul.sub-menu li:after {
    position: absolute;
    content: "";
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    width: 3.5rem;
    height: 3.5rem;
    background-size: cover;
    background-position: center;
}
#sustainability-sub-navigation-1:after {
    background-image: url('https://dev-liberty-coke.pantheonsite.io/wp-content/uploads/2025/02/sustainability-icon-waste.png');
}
#sustainability-sub-navigation-2:after {
    background-image: url('https://dev-liberty-coke.pantheonsite.io/wp-content/uploads/2025/02/sustainability-icon-emissionse.png');
}
#sustainability-sub-navigation-3:after {
    background-image: url('https://dev-liberty-coke.pantheonsite.io/wp-content/uploads/2025/02/sustainability-icon-water.png');
}
nav#sustainability-sub-navigation ul.sub-menu li:last-of-type {
    padding-right: 0;
}
nav#sustainability-sub-navigation ul.sub-menu li a {
    font-family: "TCCC-UnityText Regular";
    color: var(--Grey-1, #1C1C1C);
    text-align: center;
    font-feature-settings: 'clig' off, 'liga' off;
    font-size: 1.6rem;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    text-transform: capitalize;
}
nav#sustainability-sub-navigation ul.sub-menu li a:hover {

}


/*//// ANIMATE VIDEO ARROW ////*/
div.video-container {
    position: relative;
    display: inline-block;
    width: auto;
    height: auto;
    margin: 0 0;
    padding: 0 0;
}
div.video-container svg {
    position: absolute;
    top: 55%;
    left: 50%;
    transform: translate(-50%,-50%);
    z-index: 100;
    width: 9.2rem;
    fill: #ffffff;
    transition: fill .3s ease;
    cursor: pointer;
}
div.video-container:hover svg {
    fill: #F40D1C;
}



/*//// LINK HOT SPOT ////*/
a.hot-spot,
a.hotspot {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 10000;
}


/*ANIMATIONS*/
.slide-up {
    transition: all .3s ease;
    /*transition-delay: .2s;*/
    opacity: 0;
    margin-top: 2rem;
}
.slide-up.animate {
    opacity: 1;
    margin-top: 0;
}

/*Transue Animations*/


/*//// DEBUG SETTINGS .debug ////*/
main .debug {
    border: 1px solid rgba( 255, 0, 0, .5) !important;
}





/*//// BUTTONS ////*/
a.button-coke {
    display: inline-block;
    height: auto;
    padding: 1.5rem 3rem;
    margin-right: 3rem;
    border-radius: 0.3rem;
    background: var(--Black, #000);
    color: var(--White, #FFF);
    font-size: 2rem;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    letter-spacing: 0.1rem;
    text-transform: uppercase;
    border: 1px solid black;
    transition: all .3s ease;
}
a.button-coke:hover {
    color: var(--Black, #000);
    background: var(--White, #FFF);
}




/*//// CUTTING CORNERS ////*/
div.cut-corner {
    position: relative;
}
div.cut-corner:before {
    content: '';
    position: absolute;
    top: -1px;
    right: -1px;
    border-top: 7.6rem solid white;
    border-left: 7.6rem solid transparent;
    width: 0;
}




/*//// PAGE HERO SECTION ////*/
/*// BACKGROUND IMAGE STYLE //*/
section.page-hero-section {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}
section.page-hero-section div.page-hero-container {
    height: var(--var-hero-section-height);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

/*// HERO CONTENT FLEX //*/
div.page-hero-container div.hero-flex-container {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 99;
    align-items: stretch;
}
div.hero-flex-container div.full-hero-flex-item {
    padding-top: 30rem;
    padding-left: 12.5rem;
    text-align: left;
}

/*// FLUID IMAGE - SECTION & CONTENT CONTAINER //*/
section.page-hero-section img.fluid-image {
    width: 100%;
    height: auto;
}

/*// HEADLINE //*/
div.headline-container {}
div.headline-container h1 {
    position: absolute;
    top: 21rem;
    left: 50%;
    transform: translateX(-50%);
    font-family: 'EB Garamond', serif;
    font-weight: 400;
    font-size: 6.1rem;
    line-height: 1.3;
    text-align: center;
    color: #ffffff;
    font-variant: small-caps;
    opacity: 0;
    transition: all .75s ease;
}
div.headline-container h1.animated {
    top: 17.5rem;
    opacity: 1;
}
div.headline-container h1 span {
    font-style: italic;
    font-variant: initial;
}


/*// BYLINE //*/
div.byline-container {}
div.byline-container h2 {}


/*// WYSIWYG CONTENT //*/
div.hero-content-container {}
div.hero-content-container h3 {}


/*// SCROLL DOWN HERO ARROW //*/
a.hero-section-arrow {
    position: absolute;
    top: 90.5%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
    cursor: pointer;
}
a.next-section-link img {
    width: 4.5rem;
    height: auto;
}





/*//// PAGE HERO ALERT BOX ////*/
div.alert-box {
    position: absolute;
    top: 10rem;
    right: -100%;
    z-index: 100;
    padding: 2.5rem 0 2.5rem 3.5rem;
    background-color: rgba(23, 26, 58, 65.43%);
    transition: all .4s ease;
}
div.alert-box.slide-closed {
    right: -100%;
}
div.alert-box.slide-open {
    right: 0;
}
div.alert-box div.alert-container {
    width: 100%;
    max-width: 31rem;
    padding: 2rem 1rem;
    border: 1px solid #A4A0A0;
}                         
div.alert-container h2 {
    margin-bottom: 1.8rem;
    font-family: "Open Sans Condensed", sans-serif;
    font-style: normal;
    font-weight: bold;
    font-size: 2.8rem;
    line-height: 3.8rem;
    color: #ffffff;
}
div.alert-container p {
    margin-bottom: 2rem;
    padding-left: 2rem;    
    font-style: normal;
    font-weight: normal;
    font-size: 1.5rem;
    line-height: 1.333;
    letter-spacing: -0.015em;
    color: #ffffff;
}
div.alert-container a.shca-red-button {
    margin-left: 2rem;
}





/*//// LINK HOT SPOT ////*/
a.hot-spot,
a.hotspot {
    position: absolute !important;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}
a.hot-spot:after,
a.hotspot:after {
    content: none !important;
}




/*//////// SITE FOOTER ////////*/
/*//// STICKY FOOTER ////*/
/* REMOVE COMMENTS FOR STICKY FOOTER */
/*main, footer {
    padding-bottom: var(--var-sticky-footer-height);
}*/
/*footer {
    position: absolute;
    left: 50%; 
    bottom: 0;
    transform: translateX(-50%);
}*/





/*//////// PAGE MODALS / POP-UP ////////*/

/*//// MODAL ANIMATIONS ////*/
@-webkit-keyframes animateEvent {
    from { top: -1000px; opacity: 0; }
    to { top: 10rem; opacity: 1; }
}
@keyframes animateEvent {
    from { top: -1000px; opacity: 0; }
    to { top: 10rem; opacity: 1; }
}

@-webkit-keyframes animatetop {
    from { top: -1000px; opacity: 0; }
    to { top: 53%; opacity: 1; }
}
@keyframes animatetop {
    from { top: -1000px; opacity: 0; }
    to { top: 53%; opacity: 1; }
}

/*//// MODAL BACKGROUND ////*/
.page-modal {
    display: none;
    position: fixed;
    z-index: 99999;
    padding-top: 5%;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.6);
}
/*// SHOW PAGE MODAL BACKGROUND //*/
.page-modal.show-modal {
    display: block !important;
    padding-top: 0 !important;
 }
/*// MODAL SCRIM //*/
#pageModal .modal-scrim,
#videoModal .modal-scrim,
#videoModal1 .modal-scrim,
#videoModal2 .modal-scrim,
#videoModal3 .modal-scrim,
#videoModal4 .modal-scrim {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.9);
}

/*//// REQUST AN EVENT MODAL ////*/
#pageModal .modal-box {
    position: relative;
    top: 10rem;
    width: 100%;
    max-width: 108rem;
    height: 80vh;
    margin: auto;
    padding: 0;
    background-color: #ffffff;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    -webkit-animation-name: animateEvent;
    animation-name: animateEvent;
    -webkit-animation-duration: 0.5s;
    animation-duration: 0.5s;
}
/*// IFRAME CONTENT //*/
#pageModal .modal-box iframe {
    height: 100%;
    width: 100%;
    border: none;
}
/*// IMAGE CONTENT //*/
#pageModal .modal-box img {
    width: 100%;
    height: auto;
    width: 100.5%;
    height: auto;
    position: relative;
    left: -2px;
}
/*// EVENT CLOSE X //*/
#pageModal p.close,
#pageModal span.close {
    position: absolute;
    top: -3rem;
    right: 0px;
    font-size: 1.6rem;
    font-weight: bold;
    color: #ffffff;
    cursor: pointer;
}

/*//// VIDEO MODALS ////*/
#videoModal .modal-box,
#videoModal1 .modal-box,
#videoModal2 .modal-box,
#videoModal3 .modal-box,
#videoModal4 .modal-box {
    position: relative;
    top: 53%;
    transform: translateY(-50%);    
    width: 85%;
    max-width: 108rem;
    height: auto;
    margin: auto;
    padding: 0;
    -webkit-animation-name: animatetop;
    animation-name: animatetop;
    -webkit-animation-duration: 0.5s;
    animation-duration: 0.5s;
    border-radius: 10px;
}

/*/ VIDEO CLOSE X /*/
#videoModal span.close,
#videoModal1 span.close,
#videoModal2 span.close,
#videoModal3 span.close,
#videoModal4 span.close {
    position: absolute;
    z-index: 1000;
    top: -3rem;
    right: 3px;
    font-size: 1.6rem;
    color: #ffffff;
    cursor: pointer;
    transition: opacity .3s ease;
}
#videoModal span.close:hover,
#videoModal span.close:focus,
#videoModal1 span.close:hover,
#videoModal1 span.close:focus,
#videoModal2 span.close:hover,
#videoModal2 span.close:focus,
#videoModal3 span.close:hover,
#videoModal3 span.close:focus,
#videoModal4 span.close:hover,
#videoModal4 span.close:focus  {
    color: var(--Coke-Red, #F40D1C);
    text-decoration: none;
    cursor: pointer;
}

/*//// VIDEO PLAYER ////*/
div.container-hero-width div#video-player-container-1 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 100;
    width: 100%;
    height: auto;
    margin-top: calc( var(--var-header-height) / 2 );
    transition: opacity .4s ease;
}
video#videoPlayer1,
video#videoPlayer2,
video#videoPlayer3,
video#videoPlayer4 {
    width: 100%;
    height: auto;
    transition: opacity 1.1s ease;
}
img#video-play-button-1,
img#video-play-button-2,
img#video-play-button-3,
img#video-play-button-4 {
    display: none;
}
/* FADER */
#videoPlayer1.vidFader,
#videoPlayer2.vidFader,
#videoPlayer3.vidFader,
#videoPlayer4.vidFader {
    transition-delay: 12s;
    opacity: 0;
}
#videoPlayer1.vidFaderNow,
#videoPlayer2.vidFaderNow,
#videoPlayer3.vidFaderNow,
#videoPlayer4.vidFaderNow {
    opacity: 0;
}





/*//// ELEMENT ANIMATIONS ////*/
.fade-in-up {
    transform: translateY(16px);
    opacity: 0;
    transition: all .4s ease;
}
.fade-in-up.animate {
    transform: translateY(0px);
    opacity: 1;
}