﻿/* General Styling */
body {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
}

/* Main Container */
/* .warped-text {
    font-size: 60px;
    font-weight: bold;
    color: #2a7a3f;
    display: inline-block;
    transform: perspective(300px) rotateX(5deg);
  } */
/* Content Box */
#reDesign_background .content_wrap {
    justify-content: space-around;
    display: flex;
    width: 100%;
    max-width: 100rem;
    margin: 0 auto;
    position: relative;
}

#reDesign_background {
    background-color: #f1f1de;
    height: 100rem;
    position: relative;
}

    #reDesign_background .bg_wrap {
        position: relative;
    }
    /* Background Image */
    #reDesign_background .bg_img_comtent {
        background-repeat: no-repeat;
        background-size: 127%;
        background-position: center;
        position: absolute;
        height: 790px;
        transform: translate(0%, -20%);
        top: -14%;
        bottom: 0;
        right: 0;
        left: 0;
    }

    #reDesign_background .bg-wrap {
        min-height: 700px;
    }

    /* Product Images */
    #reDesign_background .product_images {
        position: absolute;
        left: -2rem;
        top: 5rem;
        bottom: 0;
        gap: 21px;
        white-space: nowrap;
        font-size: 0;
    }

    #reDesign_background .shadow {
        position: absolute;
        bottom: -12px;
        left: 51%;
        transform: translateX(-50%);
        width: 76%;
        height: 39px;
        background: radial-gradient(ellipse at center, rgb(0 0 0 / 24%) 0%, #00000026 49%);
        border-radius: 50%;
        z-index: 1;
        filter: blur(5px);
    }

    #reDesign_background .shadow-img {
        position: relative;
        display: inline-block;
        width: auto;
        height: 800px;
    }

        #reDesign_background .shadow-img img {
            width: 100%;
            height: 100%;
            object-fit: contain;
        }

    #reDesign_background .shadow-can {
        position: absolute;
        bottom: -12px;
        left: 51%;
        transform: translateX(-50%);
        width: 66%;
        height: 39px;
        background: radial-gradient(ellipse at center, rgb(0 0 0 / 24%) 0%, #00000026 49%);
        border-radius: 50%;
        z-index: 1;
        filter: blur(5px);
    }

    #reDesign_background .bottle {
        /* max-height: 75rem; */
    }

.can {
    /* max-height: 85rem; */
    object-position: 0px 42px;
}
/* Text Section */
#reDesign_background .text-head {
    top: 29rem;
    text-align: center;
    width: 30rem;
    padding-left: 20px;
    position: absolute;
    /* bottom: 91px; */
    left: 27rem;
}

.head-1 {
    color: #00734699 !important;
}

#reDesign_background .text-head h2 {
    font-weight: 700;
    color: #006e41;
    font-size: 3.7rem;
    margin: 0;
    margin-top: -6px;
    text-align: center;
    text-transform: uppercase;
    line-height: 33px;
}

#reDesign_background .description {
    position: absolute;
    /* bottom: 91px; */
    right: 16rem;
    width: 32rem;
    padding-left: 11.3rem;
    top: 46rem;
}

#reDesign_background .text-head h1 {
    color: #055a0b;
    font-size: 36px;
    font-weight: bold;
    margin-bottom: 11px;
}

#reDesign_background .inner-nutrition {
    border: 1px solid #006e41;
    margin-bottom: 15px;
}

    #reDesign_background .inner-nutrition .row:not(:last-of-type) {
        border-bottom: 1px solid #006e41;
    }

    #reDesign_background .inner-nutrition .row {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        text-transform: uppercase;
        letter-spacing: .2em;
        font-size: 1.8rem;
        line-height: 30px;
    }

#reDesign_background .copy-01 {
    font-size: 1.4rem;
    line-height: 1.4;
}

#reDesign_background .inner-nutrition .alcohol, #reDesign_background .inner-nutrition .amount, #reDesign_background .inner-nutrition .ingredients, #reDesign_background .inner-nutrition .nutritional-info {
    display: block;
    padding: 0.8rem;
    color: #006e41;
}

#reDesign_background .nutritional-info {
    font-weight: 600;
    color: #006e41;
    ;
}

#reDesign_background .ingredients-link {
    color: #006e41;
    text-decoration: none;
    font-family: Avenir-Black, Arial, sans-serif;
    display: block;
    margin-top: 1.5rem;
    font-weight: bold;
}

#reDesign_background .inner-nutrition .row p {
    padding: 0 4rem 1.4rem 0;
}

#reDesign_background .inner-nutrition .amount {
    border-right: 1px solid #006e41;
}

#reDesign_background .inner-nutrition .row p {
    margin: 0;
    padding: 0 0 1.4rem;
    color: #006e41;
    text-transform: none;
    font-family: Avenir-Medium, Arial, sans-serif;
    letter-spacing: 0;
}

#reDesign_background .overview-item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin-bottom: 1rem;
    color: #006e41;
    font-size: 0.9rem;
}

    #reDesign_background .overview-item .icon {
        height: 45px;
        width: 45px;
        margin-right: 1.1rem;
    }

#reDesign_background .icon svg {
    height: 100%;
    /* width: 100%; */
    display: block;
    fill: currentColor;
}

#reDesign_background .overview, .description {
    padding: 0 !important;
}
/* Responsive Design */
/* @media screen and (min-width: 1500px) and (max-width: 1720px){
    #reDesign_background .description {
        
        right: 30%;
    }
        #reDesign_background .product_images {
            left: 18%;
        }
} */
@media screen and (min-width: 1500px) {
    #reDesign_background .description {
        position: absolute;
        /* bottom: 91px; */
        right: 21rem;
        width: 38rem;
        padding-left: 11.3rem;
        top: 62rem;
    }

    #reDesign_background .content_wrap {
        max-width: 127rem;
    }

    #reDesign_background {
        background-color: #f1f1de;
        height: 120rem;
    }

        #reDesign_background .bg_img_comtent {
            background-repeat: no-repeat;
            background-size: 127%;
            background-position: center;
            position: absolute;
            height: 958px;
            transform: translate(0%, -12%);
            top: -14%;
            bottom: 0;
            right: 0;
            left: 0;
        }

        #reDesign_background .bottle {
            /* max-height: 76rem; */
        }

    .can {
        /* max-height: 90rem; */
        object-position: 0px 47px;
    }

    #reDesign_background .text-head h2 {
        font-weight: 800;
        color: #006e41;
        font-size: 5rem;
        margin: 0;
        margin-top: -6px;
        line-height: 43px;
    }

    #reDesign_background .product_images {
        position: absolute;
        left: 6rem;
        top: 27rem;
        bottom: 0;
    }

    .inner-nutrition .row {
        font-size: 1.3rem;
    }

    .overview-item {
        font-size: 1.3rem;
    }

    #reDesign_background .text-head {
        top: 39rem;
        text-align: center;
        width: 41rem;
        padding-left: 20px;
        position: absolute;
        /* bottom: 91px; */
        left: 23rem;
    }

    #reDesign_background .copy-01 {
        font-size: 1.8rem;
        line-height: 1.6;
    }
}

@media screen and (max-width: 375px) {
    #reDesign_background .can {
        /* max-height: 45rem !important; */
        object-position: 0px 21px;
    }

    #reDesign_background .bottle {
        /* max-height: 40rem !important; */
    }

    #reDesign_background .text-head h2 {
        font-size: 2.6rem !important;
        line-height: 26px !important;
    }

    #reDesign_background .product_images {
        justify-content: center;
        top: 45px !important;
        left: 22px !important;
    }

    #reDesign_background .description {
        top: 52rem !important;
        margin: 0;
    }

    #reDesign_background .text-head {
        width: 54% !important;
        padding-left: 0;
        position: absolute;
        /* bottom: 91px; */
        right: 0px;
        top: 110px;
        left: 144px;
    }

    #reDesign_background {
        background-color: #f1f1de;
        height: 1030px;
    }
}

@media screen and (min-width: 540px) and (max-width:720px) {
    #reDesign_background .product_images {
        justify-content: center;
        top: 110px !important;
        left: 95px !important;
    }

    #reDesign_background .text-head {
        width: 51% !important;
        top: 146px !important;
        left: 190px !important;
    }

    #reDesign_background .can {
        max-height: 57rem !important;
        object-position: 0px 21px;
    }

    #reDesign_background .bottle {
        max-height: 52rem !important;
    }

    #reDesign_background .description {
        right: 20px;
        top: 59rem !important;
        margin: 0;
    }

    #reDesign_background {
        background-color: #f1f1de;
        height: 1093px !important;
    }
}

@media screen and (min-width: 320px) and (max-width:766px) {

    #reDesign_background .bg_img_comtent {
        background-position: 50% 0;
        background-position: center;
        height: 256px;
    }

    #reDesign_background {
        background-color: #f1f1de;
        height: 104rem;
    }

        #reDesign_background .content_wrap {
            justify-content: normal;
            display: contents;
        }

        #reDesign_background .image-section, .text-section {
            width: 100%;
        }

        #reDesign_background .product_images {
            justify-content: center;
            top: 68px;
            left: 37px;
        }

        #reDesign_background .shadow-img {
            height: 450px;
        }

        #reDesign_background .bottle {
            /* max-height: 40rem;
            ; */
        }

        #reDesign_background .can {
            /* max-height: 50rem; */
            object-position: 0px 21px;
        }

        #reDesign_background .text-head {
            width: 59%;
            padding-left: 0;
            position: absolute;
            /* bottom: 91px; */
            right: 0px;
            top: 125px;
            left: 130px;
        }

            #reDesign_background .text-head h2 {
                font-size: 2.6rem;
                line-height: 33px;
                margin-top: -8px;
            }

        #reDesign_background .description p {
            padding: 18px;
            line-height: 28px;
        }

        #reDesign_background .description {
            width: 88%;
            position: absolute;
            /* bottom: 91px; */
            right: 20px;
            top: 55rem;
            margin: 0;
        }
}
/* @media only screen and (min-width: 601px) and (max-width:700px){
    #reDesign_background .bg_img_comtent {
        background-repeat: no-repeat;
        background-size: 153%;
        background-position: center;
        position: relative;
        height: 429px;
        transform: translate(0%, -18%);
    }
    #reDesign_background .product_images {
        position: absolute;
        left: 6%;
        top: 41%;
        bottom: 0;
    }
    #reDesign_background .bottle {
        max-height: 394px;
    }
    #reDesign_background .text-head {
        width: 70%;
        top: 197px;
        left: 9rem;
    }
    #reDesign_background .text-head h2 {
        font-size: 2.4rem;
        margin: 0;
    }
    #reDesign_background .description {
        width: 90%;
        top: 38.9rem;
        right: 29px;
        margin: 0;
    }
    .can {
        max-height: 24rem;
    }

} */
@media only screen and (min-width: 920px) and (max-width:1022px) {
    #reDesign_background .bg_img_comtent {
        height: 492px !important;
    }

    #reDesign_background .product_images {
        position: absolute;
        left: 8rem !important;
        top: 12rem !important;
        bottom: 0;
    }

    .can {
        max-height: 72rem !important;
    }

    #reDesign_background .bottle {
        max-height: 63rem !important;
    }

    #reDesign_background .text-head {
        top: 29rem !important;
        text-align: center;
        width: 30rem;
        padding-left: 20px;
        position: absolute;
        /* bottom: 91px; */
        left: 25rem !important;
    }
}

@media only screen and (min-width: 768px) and (max-width:1023px) {

    #reDesign_background .bg_img_comtent {
        background-repeat: no-repeat;
        background-size: 133%;
        background-position: center;
        height: 404px;
        transform: translate(0%, 2%);
    }

    #reDesign_background .product_images {
        position: absolute;
        left: 4rem;
        top: 19rem;
        bottom: 0;
    }

    #reDesign_background .shadow-img {
        height: 586px;
    }

    #reDesign_background .text-head {
        top: 25rem;
        text-align: center;
        width: 28rem;
        padding-left: 20px;
        position: absolute;
        /* bottom: 91px; */
        left: 17rem;
    }

    #reDesign_background .description {
        position: absolute;
        /* bottom: 91px; */
        right: 4rem;
        width: 29rem;
        padding-left: 11.3rem;
        top: 43rem;
    }

    .can {
        /* max-height: 66rem; */
        object-position: 0px 27px;
    }

    #reDesign_background .bottle {
        /* max-height: 54rem; */
    }

    #reDesign_background .text-head h2 {
        font-size: 3.3rem;
    }

    #reDesign_background .overview-item .icon {
        height: 43px;
        width: 43px;
    }
}

@media only screen and (min-width: 912px) and (max-width:1368px) and (orientation: portrait) {
    #reDesign_background .description {
        right: 13rem !important;
        ;
    }
}

@media only screen and (min-width: 853px) and (max-width:1280px) {
    #reDesign_background .description {
        right: 13rem;
    }
}


/* #reDesign_background .bottle {
        max-height: 51rem;
    }
    #reDesign_background .can {
        max-height: 55rem;
        object-position: -20px 12px;
    }
    #reDesign_background .text-head {
        width: 50%;
        left: 13rem;
        top: 74%;
    } */
/* #reDesign_background .product_images {
        position: absolute;
        left: 19px;
        top: 168px;
    }
    #reDesign_background .description {
        width: 41%;
        top: 41rem;
        right: 49px;
        margin: 0;
        padding: 0;
    }
    #reDesign_background {
        height: 800px;
    } */
/* }
@media only screen and (min-width: 820px) and (max-width:1180px){
    #reDesign_background .text-head {
        width: 50%;
        left: 12rem;
        top: 73%;
    }
} */
@media only screen and (min-width: 1024px) and (max-width:1499px) {
    #reDesign_background .product_images {
        position: absolute;
        left: 7rem;
        top: 13rem;
        bottom: 0;
    }

    #reDesign_background {
        background-color: #f1f1de;
        height: 100rem;
    }

        #reDesign_background .text-head {
            top: 26rem;
            text-align: center;
            width: 30rem;
            padding-left: 20px;
            position: absolute;
            /* bottom: 91px; */
            left: 26rem;
        }

        #reDesign_background .bg_img_comtent {
            background-size: 128%;
            height: 649px;
            transform: translate(0%, -10%);
        }

        #reDesign_background .shadow-img {
            height: 700px;
        }

        #reDesign_background .description {
            position: absolute;
            /* bottom: 91px; */
            right: 15rem;
            width: 30rem;
            padding-left: 11.3rem;
            top: 44rem;
        }
}
/* @media only screen and (min-width: 701px) and (max-width:767px) {
    #reDesign_background .text-head {
        width: 53%;
    top: 247px;
    left: 15rem;
    }
    #reDesign_background .text-head h2 {
        font-size: 2.8rem;
        margin: 0;
    }
    #reDesign_background .product_images {
        position: absolute;
        left: 23px;
        top: 182px;
    }
        #reDesign_background .bottle {
            max-height: 627px;
        }
        #reDesign_background .can {
            max-height: 392px;
        }
        #reDesign_background .description {
            width: 100%;
            top: 51.9rem;
            right: 0;
            margin: 0;
        }
        #reDesign_background .description p{
            padding: 35px;
            line-height: 31px;
        }
} */

/* color selection */
h2[data-txt-color="Apple"] .head-2 {
    color: #83b356;
}

h2[data-txt-color="Pear"] .head-2 {
    color: #c0c449;
}

h2[data-txt-color="Watermelon"] .head-2 {
    color: #d3262f;
}

h2[data-txt-color="Blueberry"] .head-2 {
    color: #2960a7;
}

h2[data-txt-color="Elderflower & Lime"] .head-2 {
    color: #78c2ac;
}

h2[data-txt-color="Mango & Lime"] .head-2 {
    color: #e29826;
}

h2[data-txt-color="Red Rhubarb"] .head-2 {
    color: #c82742;
}

h2[data-txt-color="Sparkling Spritz"] .head-2 {
    color: #d86017;
}

h2[data-txt-color="Passionfruit & Orange"] .head-2 {
    color: #eaa11c;
}

h2[data-txt-color="Raspberry & lime"] .head-2 {
    color: #cf2f5d;
}

h2[data-txt-color="Pineapple & Lime"] .head-2 {
    color: #dcc03a;
}

h2[data-txt-color="Blackberry"] .head-2 {
    color: #92207a;
}

h2[data-txt-color="Winter cider"] .head-2 {
    color: #1D6339;
}

h2[data-txt-color="Apple 0,0%"] .head-2 {
    color: #6aa43d;
}

h2[data-txt-color="Pear 0,0%"] .head-2 {
    color: #bbbf36;
}

h2[data-txt-color="Wild Berries 0,0"] .head-2 {
    color: #be3e62;
}

h2[data-txt-color="Strawberry & Lime 0,0%"] .head-2 {
    color: #d63742;
}

h2[data-txt-color="Mandarin 0,0%"] .head-2 {
    color: #e38238;
}

h2[data-txt-color="Orange spritz"] .head-2 {
    color: #e44e32;
}

.warped-text img {
    width: 92%;
}

@media screen and (max-width: 375px) {
}

.head-2 {
    font-family: Avenir-Black,Arial,sans-serif
}
