/*////// HERO SECTION //////*/
section.page-hero-section {
    background: #FAFAFA;
}
section.page-hero-section.section-background {
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
}
section.hero-section div.hero-container {
    height: 60.5rem;
    padding:26.5rem 15.2rem 6rem 15.2rem ;
}

/*// HERO SCRIM //*/
div.hero-container div.container-scrim {
    /*display: none;*/
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0%, #000 86.98%);
}

/*//// FLEX ////*/
div.hero-container div.hero-flex-container {}
div.hero-flex-container div.hero-flex-item {}
div.hero-flex-item h1 {
    margin-bottom: 1.2rem;
    color: var(--Red-2, #EC1A3B);
    font-feature-settings: 'clig' off, 'liga' off;

    font-size: 4rem;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    text-transform: capitalize;    
}
div.hero-flex-item p {
    color: var(--Grey-1, #1C1C1C);
    font-feature-settings: 'clig' off, 'liga' off;
    font-size: 2.5rem;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

div.hero-flex-item div.liberty-image-container {
    display: inline-block;
    position: relative;
    border-radius: 0.5rem;
    background: #F1F1F1;
    box-shadow: 15px -10px 0px 0px #1C1C1C;
    transform: translate(26%, -25%);
}
div.liberty-image-container img {
    width: 100%;
    width: 44.6rem;
    height: auto;
    height: 37.6rem;
    border-radius: 0.5rem;
}

/*// SPECIFICS //*/
#hero-flex-item-1 {}





/*////// SERVE SECTION //////*/
section.serve-section {
    padding: 0 6rem 0 6rem;
}
section.serve-section div.serve-container {
    padding: 6rem 15.2rem;
    background: #E7E4E5;
}

/*//// FLEX ////*/
div.serve-container div.serve-flex-container {}
div.serve-flex-container div.serve-flex-item {}

div.serve-flex-container div.serve-flex-item h2 {
    position: relative;
    margin-bottom: 5rem;
    color: var(--Grey-1, #1C1C1C);
    font-feature-settings: 'clig' off, 'liga' off;
    font-size: 4rem;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    text-transform: capitalize;    
}
div.serve-flex-container div.serve-flex-item h2 span { }
div.serve-flex-container div.serve-flex-item h2:after {
    content: "";
    position: absolute;
    top: 50%;
    right: 2rem;
    transform: translateY(-50%);
    width: 25.5rem;
    height: 8.3rem;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url('https://dev-liberty-coke.pantheonsite.io/wp-content/uploads/2024/06/liberty-coke-brands-page-coca-cola-logo.png');
}
div.serve-flex-container div.serve-flex-item p {
    color: var(--Grey-2, #2E2E2E);
    font-feature-settings: 'clig' off, 'liga' off;
    font-size: 1.8rem;
    font-style: normal;
    font-weight: 400;
    line-height: 2.5rem; /* 138.889% */
    margin-bottom: 1.6rem;
}





/*////// BRANDS SECTION //////*/
section.brands-section {}
section.brands-section div.brands-container {
    padding: 10rem 10rem;
}

/*//// FLEX ////*/
div.brands-container div.brands-flex-container {
     justify-content: center;    
}
#secondary-brands-flex-container {
    margin-top: 10rem;
}

/*/ FLEX CARD STYLES /*/
/* THE FLIP CARD CONTAINER - SET THE WIDTH AND HEIGHT TO WHATEVER YOU WANT. WE HAVE ADDED THE BORDER PROPERTY TO DEMONSTRATE THAT THE FLIP ITSELF GOES OUT OF THE BOX ON HOVER (REMOVE PERSPECTIVE IF YOU DON'T WANT THE 3D EFFECT */
div.brands-flex-container div.brands-flex-item {
    background-color: transparent;
    max-width: 31rem;
    height: 31rem;
    perspective: 1000px; /* REMOVE THIS IF YOU DON'T WANT THE 3D EFFECT */
    /*border: 1px solid red;*/
}

/* THIS CONTAINER IS NEEDED TO POSITION THE FRONT AND BACK SIDE */
div.flip-card-inner {
     position: relative;
     width: 100%;
     height: 100%;
     text-align: center;
     transition: transform 0.8s;
     transform-style: preserve-3d;
}
/* DO AN HORIZONTAL FLIP WHEN YOU MOVE THE MOUSE OVER THE FLIP BOX CONTAINER */
div.brands-flex-item:hover div.flip-card-inner {
     transform: rotateY(180deg);
}

/* POSITION THE FRONT AND BACK SIDE */
div.flip-card-front, 
div.flip-card-back {
     position: absolute;
     width: 100%;
     height: 100%;
     -webkit-backface-visibility: hidden; /* SAFARI */
     backface-visibility: hidden;
}

/* STYLE THE FRONT SIDE (FALLBACK IF IMAGE IS MISSING) */
div.flip-card-front {
     background-color: transparent;
     background-size: 99%;
     background-position: -0.5rem 0.5rem;
     background-repeat: no-repeat;
}

/* STYLE THE BACK SIDE */
div.flip-card-back {
     background-color: transparent;
     transform: rotateY(180deg);
     text-align: left;
     background-size: 90%;
     background-position: 1.3rem 1.6rem;
     background-repeat: no-repeat;
     background-image: url('https://dev-liberty-coke.pantheonsite.io/wp-content/uploads/2024/06/liberty-coke-brands-page-product-can-bottom.png');  
}
/* CENTER CARD CONTENT */
div.content-container {
    position: relative;
    top: 53%;
    left: 50%;
    transform: translate(-51%, -50%);
    width: 75%;
    text-align: center;
}
div.content-container h4 {
    max-width: 16.5rem;
    margin: 0 auto .8rem auto;
    color: var(--White, #FFF);
    text-align: center;
    font-feature-settings: 'clig' off, 'liga' off;
    font-size: 1.5rem;
    font-style: normal;
    /*font-weight: 700;*/
    line-height: normal;
    text-transform: uppercase;
    letter-spacing: .075rem;
}
div.content-container p {
    margin: 0 auto .8rem auto;
    color: var(--Grey-5, #E3E3E3);
    text-align: center;
    font-feature-settings: 'clig' off, 'liga' off;
    font-family: "Gotham";
    /*font-size: 1.5rem;*/
    font-size: 1.5rem;
    font-style: normal;
    font-weight: 350;
    line-height: 1.06;
}
div.content-container a {
    font-family: "TCCC-UnityHeadline Regular";
    font-family: "TCCC-UnityHeadline Bold";
    color: var(--Red-2, #EC1A3B);
    color: #f40026;
    text-align: center;
    font-size: 1.5rem;
    /*font-size: 1.4rem;*/
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-decoration-line: underline;
}
/*// MAIN BRAND SPECIFICS //*/
#brand-flex-item-1 {}
#brand-flex-item-2 {}
#brand-flex-item-3 {}
#brand-flex-item-4 {}
#brand-flex-item-5 {}
#brand-flex-item-6 {}
#brand-flex-item-7 {}


/*MOBILE FLIP*/
div.brands-flex-item.flip div.flip-card-inner {
     transform: rotateY(180deg);
}




/*////// ORDER SECTION //////*/
section.order-section {
    padding: 0;
    margin: 0;
    background-color: rgba(244, 13, 28, 1);
}
section.order-section div.order-container {
    height: 47.3rem;
    padding: 5rem 10.2rem 0rem 10.2rem;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-image: url('https://dev-liberty-coke.pantheonsite.io/wp-content/uploads/2024/06/liberty-coke-brands-page-order-background.png');
}

/*//// FLEX ////*/
div.order-container div.order-flex-container {
    height: 100%;
}
div.order-flex-container div.order-flex-item {}

div.order-flex-item div.order-card {
    width: 71.2rem;
    height: 42.3rem;
    padding: 5rem 10.2rem 7.5rem 5rem;
    border-radius: 1.5rem 1.5rem 0rem 0rem;
    background: var(--White, #FFF);
    box-shadow: -6px -6px 15px 0px rgba(0, 0, 0, 0.25);        
}
div.order-card h1 {
    font-family: "TCCC-UnityHeadline Bold";
    margin-bottom: 3rem;
    color: var(--Coke-Red, #F40D1C);
    font-feature-settings: 'clig' off, 'liga' off;
    font-size: 4rem;
    font-style: normal;
    line-height: normal;
    text-transform: capitalize;
}
div.order-card p.p1 {
    color: var(--Grey-1, #1C1C1C);
    font-feature-settings: 'clig' off, 'liga' off;
    font-size: 2.2rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.36; /* 136.364% */
}
div.order-card p { }





/*////// SECTION //////*/
/*section.-section {}*/
/*section.-section div.-container {}*/

/*//// FLEX ////*/
/*div.-container div.-flex-container {}*/
/*div.-flex-container div.-flex-item {}*/

/*// SPECIFICS //*/
/*#flex-item- {}*/
/*#flex-item- {}*/
/*#flex-item- {}*/





/*//// DEBUG STYLES - TEST ////*/
main .bprders {
	border: 1px solid rgba( 255, 0, 0, .5) !important;
}





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


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

    /*//// SLIDERS ////*/

}

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


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

        /*//// HERO SECTION ////*/
        section.hero-section {}
        section.hero-section div.hero-container { height: auto; padding: 12rem 2rem 8rem 2rem; }
        div.hero-flex-container div.hero-flex-item { padding: 4rem 0; text-align: center; }
        div.hero-flex-item h1 { margin-bottom: 3rem; }
        div.hero-flex-item p { width: 90%; margin: 0 auto; }
        div.hero-flex-item div.liberty-image-container { margin: 0 auto; transform: none; }
        div.liberty-image-container img { width: 100%; }


        /*////// SERVE SECTION //////*/
        section.serve-section { padding: 0 2rem 0 2rem; }
        section.serve-section div.serve-container { height: auto; padding: 4rem 2rem; }
        div.serve-flex-container div.serve-flex-item h2 { width: 90%; margin: 0 auto 18rem auto; text-align: center; }
        div.serve-flex-container div.serve-flex-item h2:after { top: 140%; left: 50%; right: initial; transform: translate(-50%,-50%); }


        /*////// BRANDS SECTION //////*/
        section.brands-section div.brands-container { height: auto; padding: 4rem 0; margin: 0 auto 16rem auto; }
        div.brands-flex-container div.brands-flex-item { max-width: 34rem; max-width: 50% !important; height: 34rem; }

        div.content-container { top: 40%; left: 50%; }
        div.content-container h4,
        div.content-container p { width: 90%; font-size: 1.4rem; }
        div.content-container p br { display: none; }


        /*////// ORDER SECTION //////*/
        section.order-section div.order-container { height: auto; padding: 4rem 2rem; }

        div.order-flex-item div.order-card { width: 100%; padding: 5rem 4rem 7rem 4rem; }
        div.order-card p.p1 { font-size: 1.8rem; }
        div.order-card a.button-coke { width: 100%; text-align: center; margin-top: -4rem; }

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

        /*//// HERO SECTION ////*/
        section.hero-section {}
        section.hero-section div.hero-container { height: auto; padding: 12rem 2rem 8rem 2rem; }
        div.hero-flex-container div.hero-flex-item { padding: 4rem 0; text-align: center; }
        div.hero-flex-item h1 { margin-bottom: 3rem; }
        div.hero-flex-item p { width: 90%; margin: 0 auto; }
        div.hero-flex-item div.liberty-image-container { margin: 0 auto; transform: none; }
        div.liberty-image-container img { width: 100%; }


        /*////// SERVE SECTION //////*/
        section.serve-section { padding: 0 2rem 0 2rem; }
        section.serve-section div.serve-container { height: auto; padding: 4rem 2rem; }
        div.serve-flex-container div.serve-flex-item h2 { width: 90%; margin: 0 auto 18rem auto; text-align: center; }
        div.serve-flex-container div.serve-flex-item h2:after { top: 140%; left: 50%; right: initial; transform: translate(-50%,-50%); }


        /*////// BRANDS SECTION //////*/
        section.brands-section div.brands-container { height: auto; padding: 4rem 0; margin: 0 auto 16rem auto; }
        div.brands-flex-container div.brands-flex-item { max-width: 34rem; max-width: 50% !important; height: 34rem; }

        div.content-container { top: 40%; left: 50%; }
        div.content-container h4,
        div.content-container p { width: 90%; font-size: 1.4rem; }
        div.content-container p br { display: none; }


        /*////// ORDER SECTION //////*/
        section.order-section div.order-container { height: auto; padding: 4rem 2rem; }

        div.order-flex-item div.order-card { width: 100%; padding: 5rem 4rem 7rem 4rem; }
        div.order-card p.p1 { font-size: 1.8rem; }
        div.order-card a.button-coke { width: 100%; text-align: center; margin-top: -4rem; }

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

        div.content-container { top: 32%; left: 53%; }
        div.content-container h4,
        div.content-container p { width: 90%; font-size: 1rem; }
        div.content-container p br { display: none; }


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



/*//// LANDSCAPE STYLES ////*/
@media screen and (max-width: 851px) and (orientation: landscape) { }
@media screen and (max-width: 815px) and (orientation: landscape) { }
@media screen and (max-width: 667px) and (orientation: landscape) { }
@media screen and (max-width: 570px) and (orientation: landscape) { }