﻿#Product .h1 {
    position: absolute;
    top: 2.2vw!important;
    z-index: 2;
    width: 100%;
}




.owl-carousel .owl-dots .owl-dot span {
    background: rgba(231, 74, 72, 0.54);
}

.owl-carousel .owl-dots .owl-dot.active span,
.owl-carousel .owl-dots .owl-dot:hover span {
    background: #e74a48;
}

.owl-carousel .owl-nav {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
}

.owl-carousel .owl-nav {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
}

    a.btn,
    .owl-carousel .owl-nav .owl-prev,
    .owl-carousel .owl-nav .owl-next {
        position: absolute;
        font-size: 0;
        width: 50px;
        height: 46.64px;
        background-size: cover;
        transform: translateY(-50%);
        background-position: center;
        background-repeat: no-repeat;
        -moz-transition: background-image 300ms;
        -webkit-transition: background-image 300ms;
        -o-transition: background-image 300ms;
        transition: background-image 300ms;
    }

        a.btn.prev,
        .owl-carousel .owl-nav .owl-prev {
            left: -10%;
            background-image: url(../images/Home/arrowLeft.png);
        }

            a.btn.prev:hover,
            .owl-carousel .owl-nav .owl-prev:hover {
                background-image: url(../images/Home/arrowLeft2.png);
            }

        a.btn.next,
        .owl-carousel .owl-nav .owl-next {
            right: -10%;
            background-image: url(../images/Home/arrowRight.png);
        }

            a.btn.next:hover,
            .owl-carousel .owl-nav .owl-next:hover {
                background-image: url(../images/Home/arrowRight2.png);
            }

            .owl-carousel .owl-nav .owl-prev.disabled,
            .owl-carousel .owl-nav .owl-next.disabled {
                display: none;
            }

        a.btn.prev {
            top: 30%;
            left: 5%;
            z-index: 1;
            position: absolute;
        }

        a.btn.next {
            top: 30%;
            right: 5%;
            z-index: 1;
            position: absolute;
        }

#Product .banner {
    background-image: url(../images/product/product-sm.jpg);      
}

#Product.details .banner {
    flex-direction: column;
    background-position: left top;
    background-image: url(../images/banner-product.png);
}

#Product .banner .layer2 {
    z-index: 2;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

#Product .banner .layer3 {
    z-index: 2;
    height: 100.1%;
    background: url(../images/bannerBg-600.png) center no-repeat;
    background-size: cover;
}

#Product .banner .h1 {
    z-index: 3;
    font-weight: 400;
    font-size: 33.296px;
    font-family: 'Iron&Brine';
}

#Product .h2 {
    margin: 26.686px 0 0;
    font-family: 'LoveYaLikeASister-Regular';
    font-size: 24px;
    color: #674130;
    text-align: center;
    letter-spacing: 2.283px;
    text-transform: uppercase;
}

    #Product .h2 .img {
        width: 204.313px;
        margin: auto;
    }

    #Product .h2 span {
        position: relative;
        display: inline-block;
    }

#Product .h3 {
    margin: 0 0;
    font-family: 'LoveYaLikeASister-Regular';
    font-weight: 400;
    font-size: 20.756px;
    color: #674130;
    text-align: center;
    letter-spacing: 2.959px;
    text-transform: uppercase;
}

    #Product .h3 .img {
        width: 176.547px;
        margin: auto;
    }

#Product .banner .h3 {
    font-weight: 400;
    font-size: 13.834px;
    transform: translateY(100%);
}

#Product .row p {
    margin: 0 auto;
    text-align: center;
    max-width: 481.172px;
    /*margin: 17.563px auto 0;*/
}

#Product .row .brand {
    width: 100%;
    margin: auto;
    display: block;
    /*margin-top: 1%;*/
    max-width: 300px;
}

#Product .v3 .line {
    width: 100%;
    display: block;
    margin: 35.139px 0;
    padding-top: 14.937px;
    background: url(../images/line.png) center top no-repeat;
    background-size: cover;
}

#Product .top {
    margin-top: 37.367px;
    margin-top: 13.667px;
}

#Product .middle {
    margin-top: -27.898px;
    background: url(../images/product-middle.jpg) top center;
    background-size: cover;
}

    #Product .middle .row {
        width: 100%;
        max-width: 650.391px;
        /*padding-top: 87.841px;*/
        padding-top: 25.841px;
    }

#product-desc.row {
    margin: 4% auto;
}

#Product .middle .item {
    width: 50%;
    max-width: 325px;
    margin-bottom: 47.398px
}

    #Product .middle .item:hover {
        transform: translateY(-5%);
    }

    #Product .middle .item .flavor {
        width: 75%;
        margin: auto;
        display: block;
        font-size: 22.563px;
        font-weight: bold;
        color: #674130;
        text-align: center;
        letter-spacing: 1.534px;
        text-transform: uppercase;
        font-family: 'LoveYaLikeASister-Regular';
    }

    #Product .middle .item .flex {
        width: 75%;
        margin: 13.546px auto 0;
        justify-content: space-around;
    }

        #Product .middle .item .flex .img {
            width: 15%;
        }

#Product .middle .row.v2 .flex {
    width: 65%;
    width: 70%;
    display: block;
    min-width: 300px;
    /*margin-top: 13.546px;*/
    padding-bottom: 30.72px;
}

    #Product .middle .row.v2 .flex .img {
        width: 18%;
        margin-right: 5%;
        width: 16%;
        margin-right: 7%;
        min-width: 50px;
        position: relative;
        vertical-align: top;
        display: inline-block;
    }

#Product .middle .row.v2 .imgBg {
    position: relative;
    z-index: 1;
}

    #Product .middle .row.v2 .imgBg .content {
        width: 100%;
        box-sizing: border-box;
        padding: 55.347px 103.782px;
    }

    #Product .middle .row.v2 .imgBg .bg {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
    }

        #Product .middle .row.v2 .imgBg .bg.mobile {
            display: block;
        }

        #Product .middle .row.v2 .imgBg .bg.desktop {
            display: none;
        }

    #Product .middle .row.v2 .imgBg .content .desc {
        position: relative;
        z-index: 1;
        font-family: 'Halogen';
        font-weight: bold;
        font-size: 16.497px;
        color: black;
        display: block;
        line-height: 24px;
        margin-bottom: 13.834px;
    }

#Product .middle .row.v2 .content .desc2 {
    position: relative;
    z-index: 1;
    font-family: 'Halogen';
    font-weight: bold;
    font-size: 14.428px;
    color: #674130;
    line-height: 24px;
}

    #Product .middle .row.v2 .content .desc2 span {
        display: block;
        margin-bottom: 13.834px;
    }

#Product .middle .row.v2 .imgBg2 {
    position: relative;
    display: flex;
    align-items: center;
    /*min-height: 382.750px;*/
    /*margin-top: -156.665px;*/
}

    #Product .middle .row.v2 .imgBg2 .bg {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
    }

    #Product .middle .row.v2 .imgBg2 .img1 {
        position: absolute;
        left: -32px;
        bottom: 53.33px;
        width: 94.391px;
    }

    #Product .middle .row.v2 .imgBg2 .img2 {
        position: absolute;
        right: -32px;
        bottom: 42.67px;
        width: 101.328px;
    }

    #Product .middle .row.v2 .imgBg2 .content {
        width: 80%;
        margin: auto;
        max-width: 422.047px;
        padding: 61.44px 15.606vw 30.72px;
    }

#Product .nutrition {
    width: 97%;
    overflow: hidden;
    /*max-width: 790.543px;*/
    max-width: 690.543px;
    margin: 43.914px auto;
    margin-top: 10px;
    border-radius: 17.563px;
    background-color: white;
    box-shadow: 0 10.543px 26.351px rgba(0,0,0,0.2);
}

    #Product .nutrition .header {
        font-family: 'Halogen';
        font-size: 24.351px;
        color: white;
        padding: 13.182px;
        text-align: center;
        background: #b47559 url(../images/texture.png) center no-repeat;
        background-size: cover;
    }

    #Product .nutrition .tableCell {
        width: 50%;
        padding: 13.182px;
        font-size: 14px;
        font-family: 'OpenSans';
        border-top: 0.884px solid rgba(103,65,48, 0.5);
        border-right: 0.884px solid rgba(103,65,48, 0.5);
    }

    #Product .nutrition.v3 .tableCell {
        width: 33%;
    }

    #Product .nutrition .table .tableRow:nth-child(even) {
        background: rgba(181,88,29, 0.2);
    }

    #Product .nutrition .tableCell:last-child {
        border-right: 0px solid rgba(103,65,48, 0.5);
    }

    #Product .nutrition .tableRow:first-child .tableCell {
        border-top: 0px solid #674130;
    }

#Product #Brands {
    padding-top: 5px;
    padding-bottom: 50px;
}

    #Product .row.v3,
    #Product #Brands .row {
        max-width: 1155px;
    }

/*#Product .row.v3 {
    margin-top: -86.190px;
}*/

#Product .middle .row.v3 .flavour {
    padding-bottom: 50px;
}
#Product .middle #owl-Flavours .item {
    width: 100%;
    display: block;
    margin-bottom: 0;
}

    #Product .middle #owl-Flavours .item:hover {
        transform: translateY(-5%);
    }

@media screen and (max-width: 420px) {

    #Product #Brands {
        padding-top: 25px;
    }
}

@media screen and (max-width: 434px) {

    #Product .middle .row.v2 .flex {
        width: 100%;
        display: flex;
        min-width: auto;
        justify-content: space-around;
    }
    #Product .middle .row.v2 .flex .img {
        width: 18%;
        min-width: auto;
        margin-right: 0;
    }

}

@media screen and (max-width: 599px) {

    #Product .banner .layer2 .img,
    #Product .banner .layer3 .img {
        display: none;
    }
}

@media screen and (min-width: 600px) {

    #Product .banner {
        background-image: url(../images/product/product.jpg);      
    }
    #Product .banner .layer3 .img {
        opacity: 0;
    }

    #product-desc.row {
        margin: auto;
    }
}

@media screen and (max-width: 665px) {

    #Product .middle .item {
        margin-bottom: 7.128vw
    }

        #Product .middle .item .flavor {
            font-size: 3.393vw;
            letter-spacing: 0.231vw;
        }

        #Product .middle .item .flex {
            margin: 2.037vw auto 0;
        }

    #Product .middle .row.v2 .imgBg .content {
        padding: 8.323vw 15.606vw;
    }
}

@media screen and (min-width: 790px) {

    #Product .top {
        margin-top: 4.730vw;
        margin-top: 1.73vw;
    }
}

@media screen and (min-width: 992px) {

    #Product .middle .row {
        max-width: 979.391px;
    }

        #Product .middle .row.v2 {
            max-width: 948.641px;
        }
}

@media screen and (max-width: 1023px) {

    #Product .middle .row.v2 .imgBg .pimg {
        width: 100%;
        margin: auto;
        max-width: 287.125px;
    }

    #Product .middle .row.v2 .imgBg .content {
        margin: auto;
        max-width: 650.391px;
    }

    #Product .middle .row.v2 .imgBg2 {
        margin-left: auto;
        margin-right: auto;
        max-width: 747.23px;
    }
    #Product .middle .row.v2 .imgBg2 .content {
        width: 100%;
        max-width: 650.391px;
        box-sizing: border-box;
    }
}

@media screen and (min-width: 1024px) {

    a.btn,
    .owl-carousel .owl-nav .owl-prev,
    .owl-carousel .owl-nav .owl-next {
        width: 4.122vw;
        height: 3.851vw;
    }

        a.btn.prev {
            top: 60%;
        }

        a.btn.next {
            top: 60%;
        }

    #Product .h2 {
        margin: 2.378vw 0 0;
        font-size: 3.041vw;
        letter-spacing: 0.289vw;
    }

        #Product .h2 .img {
            width: 34.054vw;
        }

    #Product .h3 {
        font-size: 2.027vw;
        letter-spacing: 0.289vw;
        transform: translateY(-100%);
    }

    #Product .banner .h1 {
        font-size: 3.252vw;
    }

    #Product .banner .h3 {
        font-size: 1.351vw;
    }

    #Product .middle .row.v2 {
        max-width: 72.973vw;
    }
        #Product .middle .row.v2 .flex {
            padding-bottom: 3vw;
        }
        #Product .middle .row.v2 .imgBg {
            position: relative;
            width: 60.946vw;
            display: flex;
            min-height: 30vw;
            margin-left: auto;
            align-items: center;
        }

            #Product .middle .row.v2 .imgBg .bg.desktop {
                display: block;
            }

            #Product .middle .row.v2 .imgBg .bg.mobile {
                display: none;
            }

            #Product .middle .row.v2 .imgBg .pimg {
                position: absolute;
                top: 50%;
                left: -15%;
                z-index: 1;
                max-width: 28.041vw;
                display: block;
                transform: translateY(-50%);
            }

            #Product .middle .row.v2 .imgBg .content {
                width: 40.541vw;
                margin-left: auto;
                padding: 5.405vw 10.135vw 5.405vw 0;
            }

                #Product .middle .row.v2 .imgBg .content .desc {
                    font-size: 1.611vw;
                    line-height: 2.344vw;
                    margin-bottom: 1.351vw;
                }

        #Product .middle .row.v2 .content .desc2 {
            font-size: 1.409vw;
            line-height: 2.422vw;
        }
        #Product .middle .row.v2 .content .desc2 span {
            margin-bottom: 1.351vw;
        }

        /*#Product .middle .row.v2 .imgBg2 {
            margin-top: -11.979vw;
            min-height: 37.379vw;
        }*/

            #Product .middle .row.v2 .imgBg2 .img1 {
                left: -3.125vw;
                bottom: 5.208vw;
                width: 9.219vw;
            }

            #Product .middle .row.v2 .imgBg2 .img2 {
                right: -3.125vw;
                bottom: 4.167vw;
                width: 9.896vw;
            }

            #Product .middle .row.v2 .imgBg2 .content {
                max-width: 41.216vw;
                
                padding: 6vw 15.606vw 3vw;
            }

        #Product .middle .row.v2 #owl-Flavours {
            padding: 30px 0 40px;
        }

    /*#Product .row.v3 {
        margin-top: -8.417vw;
    }*/
}

@media screen and (min-width: 1300px) {

    #Product .h3 .img {
        width: 13.581vw;
    }

    #Product .v3 .line {
        margin: 2.703vw 0;
        padding-top: 1.149vw;
    }

    #Product .row p {
        max-width: 60.014vw;
        /*margin: 1.351vw auto 0;*/
    }

    #Product .middle {
        margin-top:0.297vw;
    }

        #Product .middle .row {
            max-width: 75.338vw;
            /*padding-top: 6.757vw;*/
            padding-top: 3.911vw;
        }

        #Product .middle .item {
            max-width: 25vw;
            margin-bottom: 3.646vw;
        }

            #Product .middle .item .flavor {
                font-size: 1.736vw;
                letter-spacing: 0.118vw;
            }

            #Product .middle .item .flex {
                margin: 1.042vw auto 0;
            }

    #Product .nutrition {
        /*max-width: 60.811vw;*/
        max-width: 51.119vw;
        margin: 3.378vw auto;
        margin-top: 0.769vw;
        border-radius: 1.351vw;
        box-shadow: 0 0.811vw 2.027vw rgba(0,0,0,0.2);
    }

        #Product .nutrition .header {
            font-size: 2.027vw;
            padding: 1.014vw;
        }

        #Product .nutrition .tableCell {
            padding: 1.014vw;
            font-size: 1.081vw;
            border-top: 0.068vw solid rgba(103,65,48, 0.5);
            border-right: 0.068vw solid rgba(103,65,48, 0.5);
        }
}

@media screen and (min-width: 1480px) {

    #Product .row .brand {
        max-width: 20.270vw;
    }

    #Product #Brands {
        padding-top: 0.338vw;
        padding-bottom: 3.378vw;
    }

        #Product .row.v3,
        #Product #Brands .row {
            max-width: 78.041vw;
        }
}
