.div-vertical-bottom {
    display: flex;
    justify-content: space-around;
    align-items: flex-end;
}

.topbarorange {
    background-color: orange;
}

.categoryHeader {
    background: none repeat scroll 0 0 green;
    background-color: #04B404;
}
/*.categoryHeader h1{
	color:#ffffff;
}
.pageName h1
{
	font-weight:bold;
	border-bottom:solid 2px #000000;
}*/
.container {
    border: solid 1px #c0c0c0;
    border-radius: 10px;
    background-color: #F5EFFB; /*#F5DEB3;*/
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    color: #000000 !important;
}

.h2heading {
    font-weight: bold;
    color: #B40404 !important;
}

.bulletpoints li, .bulletpoints dd {
    line-height: 1.9rem;
    font-size: 1.0rem;
    font-weight: 400;
    text-indent: -1.2em;
    padding-left: 18px;
    color: #000000 !important;
    /*text-transform:capitalize;*/
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif
}

.boldthick {
    line-height: 1.9rem;
    font-size: 0.95rem;
    font-weight: bold;
    color: #000000 !important;
}

.bigbold {
    font-family: Arial;
    line-height: 2.5rem;
    font-size: 1.5rem;
    font-weight: bold;
    color: #2E9AFE !important;
    text-align: center;
    margin-left: 2px;
    margin-right: 2px;
}

    .bigbold.light-border {
        border: solid 1px #e2e2e2;
    }

    .bigbold p {
        color: #2E9AFE !important;
    }

    .bigbold li {
        color: #2E9AFE !important;
        font-size: 0.9rem;
        text-align: left;
        border: none;
    }

.intro {
    border-radius: 10px;
}

    .intro div p {
        font-size: 1.0rem;
        line-height: 1.5rem;
        padding: 15px;
        color: #000000;
        background-color: #ffffff;
    }

    .intro li {
        font-size: 1.0rem;
        line-height: 1.5rem;
        padding-left: 5px;
        text-indent: 1.0em;
        color: #000000;
    }

.keyBenefits {
    border: solid 1px #c0c0c0;
    border-radius: 10px;
    background-color: #F8E0E0; /*#F5DEB3;*/
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

    .keyBenefits li h2 {
        font-weight: bold;
        color: #B40404;
    }

    .keyBenefits li {
        line-height: 1.9rem;
        font-size: 0.95rem;
        font-weight: bold;
        text-indent: -1.2em;
        padding-left: 15px;
        color: #000000;
    }

.ingredients {
    border-radius: 10px;
    background-color: #99ff99;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

    .ingredients div p {
        font-size: 1.0rem;
        line-height: 1.75rem;
        padding: 15px;
        font-weight: bold;
        color: #000000;
    }

.nutritional {
    border-radius: 10px;
    background-color: #0080ff;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

    .nutritional h3, .nutritional h5 {
        color: #ffffff;
        font-weight: bold;
    }

    .nutritional td, .nutritional p {
        font-weight: bold;
        font-size: 1.0rem;
        color: #0080ff;
        padding: 10px;
        text-transform: uppercase;
        border: solid 10px #0080ff;
        background-color: #ffffff;
    }

.procedureA {
    border-radius: 10px;
    background-color: #A9E2F3;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.procedureB {
    border-radius: 10px;
    background-color: #CED8F6;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

    .procedureA img, .procedureB img, .imgkeyBenefits {
        -ms-transform: scale(0.8,0.8); /* IE 9 */
        -webkit-transform: scale(0.8,0.8); /* Safari */
        transform: scale(0.8,0.8);
    }

.SplImage {
    width: 100%;
    height: auto;
    padding: 2px 2px 2px 2px;
}

.imgStamp {
    -ms-transform: scale(0.7,0.7); /* IE 9 */
    -webkit-transform: scale(0.7,0.7); /* Safari */
    transform: scale(0.7,0.7);
}

.procedureA dd, .procedureB dd {
    font-size: 1rem;
    line-height: 1.5rem;
}

.procedureA H3, .procedureB H3 {
    font-weight: bold;
    text-transform: uppercase;
    border-bottom: solid 2px #000000;
}

.procedureA H2, .procedureB H2 {
    font-weight: bold;
    text-indent: 1em;
    text-transform: uppercase;
    border-bottom: solid 2px #e1e1e1;
    border-right: solid 2px #e1e1e1;
    border-radius: 10px;
    background-color: #336699;
    color: #ffffff !important;
    padding: 5px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2)
}

.featured H2 {
    padding-left: 20px;
}

.featured p {
    padding-left: 20px;
    font-size: 16px;
}

.related H3 {
    font-weight: bold;
    border-bottom: solid 3px Green;
}

.related p {
    font-size: 16px;
}
/*.faq
{
	border-radius:10px;
	background-color:#DDEEFF;
	border:solid 1px #a1a1a1;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}*/
.faq h3 {
    font-weight: bold;
    font-size: 1rem;
    /*line-height:2.5rem;*/
    margin-top: 20px;
    color: #000;
}

.intro h2 {
    font-weight: bold;
    text-transform: uppercase;
    border-bottom: solid 2px #000000;
    padding-left: 5px;
    line-height: 2.5rem;
}

.faq h4 {
    line-height: 1.5rem;
}

.faq p, p.faq {
    font-size: 1.0rem;
    line-height: 1.5rem;
    padding-left: 5px;
}

    .faq p.lastline {
        border-bottom: solid 1px #ffffff;
    }

.faq li {
    font-size: 1.0rem;
    line-height: 1.5rem;
    padding-left: 35px;
    text-indent: 1.0em;
}

.bottommenu li {
    list-style-type: none;
    text-indent: -1.2rem;
}

.imgshadow {
    -moz-box-shadow: inset 2px 2px 10px #000000;
    -webkit-box-shadow: inset 2px 2px 10px #000000;
    box-shadow: inset 2px 2px 10px #000000;
}

.mildboxshadow {
    box-shadow: 0 8px 8px 0 #e2e2e2, 0 6px 20px 0 lightblue;
}

.mildboxlightshadow {
    box-shadow: 0 4px 8px 0 rgba(250, 250, 250, 0.2), 0 6px 20px 0 rgba(250, 250, 250, 0.19);
}

.texthighlighter {
    text-shadow: 2px 5px 10px rgba(0, 0, 0, 2);
}

.whitehighlighter {
    text-shadow: 2px 5px 10px rgba(255, 255, 255, 2);
}

.paymentmethods img {
    min-height: 30px;
    float: left;
    padding: 1px;
}

a.courtesy {
    color: green !important;
    text-decoration: underline !important;
}

.slidenext:hover {
    background-color: #e2e2e2;
}

.text-orange-hover:hover {
    color: orange !important;
}

h2.underline {
    -webkit-box-shadow: 0 4px 6px -6px teal;
    -moz-box-shadow: 0 4px 6px -6px teal;
    box-shadow: 0 4px 6px -6px teal;
}


/*Big Menu Styles start here*/

/* Mega Menu header, if needed */
.menu-content {
    background-color: #efefef;
    border: solid 2px #000;
}

/* Create three equal columns that floats next to each other */
.columnWhite3, .column3 {
    float: left;
    width: 33.33%;
    padding: 10px;
    background-color: transparent;
}

.columnWhite4, .column4 {
    float: left;
    width: 25%;
    padding: 8px 10px 10px 10px;
    background-color: transparent;
    display: grid;
    justify-items: start;
    justify-content: start;
}

    .column3 h5 a, .column4 h5 a, .column3 h5 span {
        float: none;
        color: #000 !important;
        padding: 6px;
        text-decoration: none;
        display: block;
        text-align: left;
        font-weight: bold;
    }

    .column3 a, .column4 a {
        /* Style links inside the columns */
        float: none;
        color: #000 !important;
        padding: 6px;
        text-decoration: none;
        display: block;
        text-align: left;
        font-weight: 600;
    }

    .columnWhite3 h5 a, .columnWhite4 h5 a, .columnWhite3 h5 span {
        float: none;
        color: orangered !important;
        padding: 6px;
        text-decoration: none;
        display: block;
        text-align: left;
        font-weight: bold;
    }
    /* Style links inside the columns */
    .columnWhite3 a, .columnWhite4 a {
        float: none;
        /*color: #FFF !important;*/
        padding: 6px;
        text-decoration: none;
        display: block;
        text-align: left;
    }

    .column3 h5 a, .column4 h5 a, .column3 h5 span {
        float: none;
        color: #000 !important;
        padding: 2px;
        text-decoration: none;
        display: block;
        text-align: left;
    }
    /* Style links inside the columns */
    .column3 a, .column4 a {
        float: none;
        color: #000 !important;
        padding: 2px;
        text-decoration: none;
        display: block;
        text-align: left;
    }

        /* Add a background color on hover */
        .column3 a:hover, .column4 a:hover {
            color: white !important;
            background-color: green;
            text-decoration: double;
        }

@media screen and (max-width: 768px) {
    .column3, .column4, .columnWhite3, .columnWhite4 {
        width: 100% !important;
    }
}

/* Clear floats after the columns */
.row:after {
    content: "";
    display: table;
    clear: both;
}

/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
    .column4 {
        width: 100%;
        height: auto;
    }
}

/*Big menu code ends here */


/*Used in home page*/
.thumbnail {
    border: 1px solid #ddd; /* Gray border */
    border-radius: 10px !important; /* Rounded border */
    padding: 5px; /* Some padding */
}

    .thumbnail:hover {
        box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
    }

.opacity0 {
    opacity: 0;
}

/*Used in home page*/
.catimage {
    width: 100%;
    /* Set a specific height */
    min-height: 300px;
    /* Position and center the image to scale nicely on all screens */
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    background-size: contain;
    border-radius: 4px;
    /*border: white solid 1px;*/
}

    .catimage:hover {
        /*border:5px green solid;*/
    }

.scrollcatimage {
    /* Set a specific height */
    min-height: 150px;
    /* Position and center the image to scale nicely on all screens */
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    background-size: contain;
    border-radius: 10px;
    border: white solid 1px;
    white-space: nowrap;
}

.prodimage {
    width: 100%;
    /* Set a specific height */
    min-height: 250px;
    /* Position and center the image to scale nicely on all screens */
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    background-size: contain;
    /*border-radius: 10px;
    border: lightskyblue solid 1px;*/
}


.prodimage:hover {
    /*border: solid 2px green;*/
}

/*Used in home page*/
@media screen and (max-width: 768px) {
    .catimage { /* Set a specific height */
        min-height: 120px;
    }

    .prodimage { /* Set a specific height */
        min-height: 100px;
    }

    .scrollcatimage {
        min-height: 200px;
        min-width: 180px;
    }
}


/*Used in category pages*/
.tiles {
    /* border: 1px solid #ddd; Gray border */
    min-height: 40px;
    display: none;
}

    .tiles a {
        color: green !important;
        font-weight: 400;
        font-size: 12px;
    }

    .tiles span {
        color: white !important;
        margin-top: 5px;
    }

.offer {
    font-weight: 400;
    background-color: orange;
    border-radius: 5px;
    padding: 1px 5px 1px 5px;
    font-size: 10px;
}

@media screen and (min-width:601px) {
    .tiles a {
        color: green !important;
        font-weight: bold;
        font-size: 12px;
    }

    .tiles span {
        color: white !important;
        margin-top: 5px;
    }

    .offer {
        font-weight: 400;
        background-color: orange;
        border-radius: 5px;
        padding: 1px 5px 1px 5px;
        font-size: 10px;
    }
}

/*Used in category pages*/
.heroimage {
    width: 100%;
    /* Set a specific height */
    min-height: 350px;
    /* Position and center the image to scale nicely on all screens */
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    background-size: cover;
}

.homepageproductbannerSBRPDR {
    background-image: url('../img/homepage/SambarPowder-mini.jpg');
}

.homepageproductbannerRSMPDR {
    background-image: url('../img/homepage/RasamPowder-mini.jpg');
}

.homepageproductbannerIKARA {
    background-image: url('../img/homepage/IdlyKaram-mini.jpg');
}

.homepageproductbannerCRPDR {
    background-image: url('../img/homepage/CurryPowder-mini.jpg');
}

.homepageproductbannerKNDPDR {
    background-image: url('../img/homepage/KandhiPowder-mini.jpg');
}

.homepageproductbannerTCM {
    background-image: url('../img/homepage/TastyCerealMix-mini.jpg');
}

.homepageproductbannerDMP {
    background-image: url('../img/homepage/DelightMedleyPRO-mini.jpg');
}

.homepageproductbannerHM {
    background-image: url('../img/homepage/HealthMix-mini.jpg');
}

.homepageproductbannerAMOSTEO {
    background-image: url('../img/homepage/AmosteoHealthPorridge-mini.jpg');
}

.homepageproductbannerMMM {
    background-image: url('../img/homepage/MastiMilletMix-mini.jpg');
}

.homepageproductbannerPPML {
    background-image: url('../img/homepage/Papmeal-mini.jpg');
}

.homepageproductbannerPPRSM {
    background-image: url('../img/homepage/PepperRasamMix-mini.jpg');
}

.homepageproductbannerAMHERB {
    background-image: url('../img/homepage/AMHERBTea-mini.jpg');
}

.homepageproductbannerGMM {
    background-image: url('../img/homepage/GoldenMilk-mini.jpg');
}

.homepageproductbannerTPH {
    background-image: url('../img/homepage/TemplePulihora-mini.jpg');
}

.homepageproductbannerBGR {
    background-image: url('../img/homepage/MaapilaiSamba-mini.jpg');
}


.homepage-cat-bgspicepowders {
    background-image: url('../img/homepage/cat-bgspicepowders-mini.jpg');
}

.homepage-cat-bgricerava {
    background-image: url('../img/homepage/cat-bgricerava-mini.jpg');
}

.homepage-cat-bgflours {
    background-image: url('../img/homepage/cat-bgflours-mini.jpg');
}

.homepage-cat-bgbreakfast {
    background-image: url('../img/homepage/cat-bgbreakfast-mini.jpg');
}

.homepage-cat-bgtiffins {
    background-image: url('../img/homepage/cat-bgtiffins-mini.jpg');
}

.homepage-cat-bgbabyfoods {
    background-image: url('../img/homepage/cat-bgbabyfoods-mini.jpg');
}

.homepage-cat-bgporridge {
    background-image: url('../img/homepage/cat-bgporridge-mini.jpg');
}

.homepage-cat-bgmalts {
    background-image: url('../img/homepage/cat-bgmalts-mini.jpg');
}


.cat-bgspicepowders {
    background-image: url('../img/cat-bgspicepowders.jpg');
}

.cat-bgricerava {
    background-image: url('../img/cat-bgricerava.jpg');
}

.cat-bgflours {
    background-image: url('../img/cat-bgflours.jpg');
}

.cat-bgbreakfast {
    background-image: url('../img/cat-bgbreakfast.jpg');
}

.cat-bgtiffins {
    background-image: url('../img/cat-bgtiffins.jpg');
}

.cat-bgbabyfoods {
    background-image: url('../img/cat-bgbabyfoods.jpg');
}

.cat-bgporridge {
    background-image: url('../img/cat-bgporridge.jpg');
}

.cat-bgmalts {
    background-image: url('../img/cat-bgmalts.jpg');
}

.cat-bgoffers {
    background-image: url('../img/cat-bgoffers.jpg');
}

/*Used for product images display in all products pages*/
/* starts here */
/* Position the image container (needed to position the left and right arrows) */
.lbcontainer {
    position: relative;
    padding-top: 20px;
}

/* Hide the images by default */
.mySlides {
    display: none;
}

/* Add a pointer when hovering over the thumbnail images */
.cursor {
    cursor: pointer;
}

/* Next & previous buttons */
.prev,
.next {
    cursor: pointer;
    top: 40%;
    width: auto;
    padding: 16px;
    margin-top: -50px;
    color: white;
    font-weight: bold;
    font-size: 20px;
    border-radius: 0 3px 3px 0;
    user-select: none;
    -webkit-user-select: none;
}

/* Position the "next button" to the right */
.next {
    right: 0;
    border-radius: 3px 0 0 3px;
}

    /* On hover, add a black background color with a little bit see-through */
    .prev:hover,
    .next:hover {
        background-color: rgba(0, 0, 0, 0.8);
    }

/* Add a transparency effect for thumnbail images */
.demo {
    opacity: 1;
}

.active {
    border: solid 1px lightgreen;
    border-radius: 5px;
}

.demo:hover {
    opacity: 0.6;
}
/* ends here */

/*Product snapshot info below price*/
.productkeyinfo {
    text-align: left;
}
/**/

/*for Quote in product pages*/
.sideline {
    background-color: lightyellow;
    border-left: solid 5px orange;
    border-right: solid 2px orange;
    border-top: solid 2px orange;
    border-bottom: solid 2px orange;
    overflow: auto;
    margin: 10px 10px 10px 10px;
    padding: 10px 10px 10px 10px;
}

/*for product specs in product pages*/
.detailproductpage {
    /*background-color: #efefef;
    border: solid 3px orange;
    border-radius: 5px;
    overflow: auto;*/
    margin: 2px 2px 2px 2px;
    padding: 2px 2px 2px 2px;
}

/*for category pages*/
.categorypage {
    background-color: #fff;
    border-radius: 5px;
    overflow: visible;
    margin: 5px -10px 2px 2px;
    padding: 5px 10px 5px 5px;
    border: teal solid 1px;
    /*min-height: 480px;*/
    box-shadow: 0 8px 8px 0 #e2e2e2, 0 6px 20px 0 lightblue;
}

    .categorypage:hover {
        border: orangered solid 3px;
    }

@media screen and (max-width:361px) {
    .categorypage {
        background-color: #fff;
        border-radius: 5px;
        overflow: visible;
        margin: 5px -10px 2px 2px;
        padding: 5px 10px 5px 5px;
        border: teal solid 1px;
        /*min-height: 300px;*/
        box-shadow: 0 8px 8px 0 #e2e2e2, 0 6px 20px 0 lightblue;
    }

    .scrollcatimage {
        min-height: 100px;
        min-width: 5px;
    }

    .essentialnutrition {
        min-height: 150px;
    }
}

.offersheading {
    background-color: orange;
    border: solid 3px orange;
    border-radius: 5px;
    overflow: auto;
    margin: 2px 2px 2px 2px;
    padding: 2px 2px 2px 2px;
}

/*for offer pages*/
.offerpage {
    background-color: #fff;
    border-radius: 5px;
    overflow: visible;
    margin: 2px 2px 2px 2px;
    padding: 2px 2px 2px 2px;
}

.minipadding {
    padding: 5px 2px 10px 2px;
    border: orangered solid 2px;
}

/*for multipacks in product pages*/
.offerproductpage {
    text-align: left;
    /*background-color: lightgreen;
    border: solid 3px green;
    border-radius: 5px;
    overflow: auto;*/
    font-weight: bold;
    padding: 2px 2px 2px 2px;
}

    .offerproductpage h5 {
        color: #B40404 !important;
        font-weight: bold !important;
        font-size: 20px !important;
        padding: 5px 5px 5px 5px;
        border-radius: 5px;
        border-bottom: solid 0px #B40404;
    }

.searchresult {
    min-height: 40px;
    vertical-align: middle;
    padding-top: 5px;
    margin-bottom: 2px;
}

    .searchresult > a {
        font-size: 12px;
        font-weight: bold;
    }

.OffersCircle {
    position: absolute;
    float: right;
    height: 50px;
    width: 50px;
    background-color: orangered;
    border-radius: 50%;
    color: #ffffff;
    padding-top: 15px;
}



/* shopify sections */

/*Comes for all sections*/
.shopify-buy__product {
    min-width: calc(60% - 20px) !important;
}

.shopify-buy__layout-vertical {
    text-align: center !important;
    position: relative !important;
}

.shopify-buy__btn-and-quantity > .shopify-buy__btn-wrapper {
}
/*Product Pages*/
.shopify-buy__btn-and-quantity > .shopify-buy__product__title, .shopify-buy__btn-and-quantity > .shopify-buy__product__price {
    /*width: calc(60% - 20px) !important;*/
    width: 80% !important;
    margin: 0px;
}
/*Offer Pages*/
.shopify-buy__product-img-wrapper > .shopify-buy__product__title, .shopify-buy__product-img-wrapper > .shopify-buy__product__price, .shopify-buy__product-img-wrapper > .shopify-buy__btn-wrapper {
    /*width: calc(60% - 20px) !important;*/
    width: 80% !important;
    margin: 0px;
}
/*Offer Pages*/
.shopify-buy__product-img-wrapper img {
    text-align: center;
    width: 75%;
}
/*For all pages*/
.shopify-buy__product__title, .shopify-buy__product__price {
    /*font-size: 18px !important;
    font-weight: bold;
    font-family: Arial;
    padding: 2px 10px 2px 10px;*/
    text-align: center !important;
    /*white-space:nowrap;
    margin: 2px;*/
}
/*for all pages*/
.shopify-buy__btn-wrapper {
    margin: 0px;
    text-align: center;
}
/*for all pages*/
.shopify-buy__btn {
    width: 100px !important;
    font-size: 12px !important;
    font-weight: bold;
    color: white;
    background-color: #1d8211 !important;
    font-family: Arial !important;
    padding: 10px 10px 10px 10px !important;
    border-radius: 5px !important;
}

    .shopify-buy__btn:hover {
        background-color: orange !important;
    }

.shopify-buy__btn-disabled {
    background-color: #808080 !important;
}

.shopify-buy__btn-and-quantity .shopify-buy__quantity {
    border: solid 1px green !important;
    border-radius: 5px !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
    margin-right: 5px !important;
}


@media screen and (min-width:601px) {
    .shopify-buy__product {
        width: 100% !important;
        min-width: 150px !important;
    }

    .shopify-buy__product-img-wrapper img {
        width: 100%;
        margin: 0px;
    }
}

.pimg {
    max-height: 100px;
    max-width: 100px;
    display: inline-block;
}

/*Overide style for Shpify contents*/
.producttitle {
    margin: 0px;
    /*white-space: nowrap;*/
    min-height: 40px;
    max-width: 280px;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
    font-weight: bold;
    font-size: 14px;
    display: -webkit-box;
    -webkit-line-clamp: 2; /* number of lines to show */
    -webkit-box-orient: vertical;
}

@media only screen and (max-width: 650px) {
    .producttitle {
        max-width: 150px;
        font-size: 12px;
        /*display: -webkit-box;
    -webkit-line-clamp: 2; /* number of lines to show */
        /*-webkit-box-orient: vertical;*/
    }
}

/*For Product Page*/
.producttitleinpage {
    /*max-width: 300px;
    overflow: hidden;
    text-overflow: ellipsis;*/
    text-align: center;
    font-weight: bold;
    font-size: 20px;
    /*display: -webkit-box;
    -webkit-line-clamp: 2;*/
}

/*multipacks in product page*/
.producttitlemp {
    max-width: 230px;
    min-height: 80px;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center !important;
    font-size: 14px;
    /*display: -webkit-box; */
    -webkit-line-clamp: 2;
}

@media only screen and (max-width: 650px) {
    .producttitlemp {
        max-width: 150px;
        min-height: 80px;
        font-size: 12px;
        /*display: -webkit-box;
    -webkit-line-clamp: 2; /* number of lines to show */
        /*-webkit-box-orient: vertical;*/
    }
}

/*Offer Page*/
.producttitleOff {
    margin: 0px;
    /*white-space: nowrap;*/
    min-height: 80px;
    max-width: 280px;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
    font-weight: bold;
    font-size: 14px;
    display: -webkit-box;
    -webkit-line-clamp: 2; /* number of lines to show */
    -webkit-box-orient: vertical;
}

/**/
.productdescription {
    /*max-width: 300px;*/
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: left;
    font-size: 12px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.productweight {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 300px;
    font-weight: bold;
    font-size: 14px;
}

/*Product price general*/
.productprice {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 300px;
    font-weight: bold;
    font-size: 14px;
    color: green;
}

@media only screen and (max-width: 768px) {
    .productprice {
        max-width: 150px;
        font-size: 11px;
        margin: 0px;
        /*display: -webkit-box;
    -webkit-line-clamp: 2; /* number of lines to show */
        /*-webkit-box-orient: vertical;*/
    }
}

/*product price in multipacks*/
.productpricemp {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 300px;
    font-weight: bold;
    font-size: 14px;
    color: green;
}

/*Product compare price  general*/
.productcaprice {
    white-space: nowrap;
    text-decoration: line-through;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
    font-weight: bold;
    font-size: 14px;
    color: red;
}

@media only screen and (max-width: 768px) {
    .productcaprice {
        font-size: 11px;
    }
}

/*Product compare price in multipacks*/
.productcapricemp {
    white-space: nowrap;
    text-decoration: line-through;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 300px;
    font-weight: bold;
    font-size: 14px;
    color: red;
}

.text-orange {
    color: orangered !important;
}

.background-orange {
    background-color: orangered !important;
}

.background-gold {
    background-color: lightyellow !important;
}
/*Mobile Menu style starts here*/

/* The sidepanel menu */
.sidepanel {
    height: 75%; /* Specify a height */
    width: 0; /* 0 width - change this with JavaScript */
    position: fixed; /* Stay in place */
    text-align: left;
    z-index: 99; /* Stay on top */
    top: 0;
    left: 0;
    background-color: #111; /* Black*/
    overflow-x: hidden; /* Disable horizontal scroll */
    padding-top: 60px; /* Place content 60px from the top */
    transition: 0.5s; /* 0.5 second transition effect to slide in the sidepanel */
}

    /* The sidepanel links */
    .sidepanel a {
        padding: 4px 8px 4px 15px;
        text-decoration: none;
        font-size: 15px !important;
        color: #818181;
        display: block;
        transition: 0.3s;
    }

        /* When you mouse over the navigation links, change their color */
        .sidepanel a:hover {
            color: #f1f1f1;
        }

    /* Position and style the close button (top right corner) */
    .sidepanel .closebtn {
        position: absolute;
        top: 25px;
        right: 25px;
        font-size: 30px;
        margin-left: 50px;
    }

/* Style the button that is used to open the sidepanel */
.openbtn {
    font-size: 20px;
    cursor: pointer;
    background-color: #111;
    color: white;
    padding: 10px 15px;
    border: none;
}

    .openbtn:hover {
        background-color: #444;
    }

/*Mobile Menu style End here*/


/*Mega Menu starts here*/
/* Navbar container */
.navbar {
    overflow: hidden;
    background-color: #002633;
    font-family: Arial;
}

    /* Links inside the navbar */
    .navbar a {
        float: left;
        font-size: 12px !important;
        color: white;
        text-align: center;
        /*padding: 14px 16px;*/
        text-decoration: none;
    }

    .navbar .firstmenu {
        float: left;
        font-size: 16px !important;
        color: white;
        text-align: center;
        padding: 14px 5px;
        text-decoration: none;
    }

/* The dropdown container */
.dropdown {
    float: left;
    overflow: hidden;
}

    /* Dropdown button */
    .dropdown .dropbtn {
        font-size: 12px;
        border: none;
        outline: none;
        color: white;
        padding: 14px 16px;
        background-color: inherit;
        font: inherit; /* Important for vertical align on mobile phones */
        margin: 0; /* Important for vertical align on mobile phones */
    }

    /* Add a red background color to navbar links on hover */
    .navbar a:hover, .dropdown:hover .dropbtn {
        text-decoration: underline;
    }

/* Dropdown content (hidden by default) */
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    width: 100%;
    left: 0;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

    /* Mega Menu header, if needed */
    .dropdown-content .header {
        background: green;
        padding: 6px;
        color: #e2e2e2;
        font-weight: bold;
        text-align: center;
    }

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
    display: block;
}

/* Create three equal columns that floats next to each other */
.column {
    float: left;
    width: 33.33%;
    padding: 10px;
    background-color: #ccc;
    height: 250px;
}

    /* Style links inside the columns */
    .column a {
        float: none;
        color: black;
        padding: 16px;
        text-decoration: none;
        display: block;
        text-align: left;
    }

        /* Add a background color on hover */
        .column a:hover {
            text-decoration: underline;
        }

/* Clear floats after the columns */
.row:after {
    content: "";
    display: table;
    clear: both;
}
/*Mega menu ends here */


#product_reviews, #google-reviews {
    display: flex;
    flex-wrap: wrap;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}

span.review-profile-image {
    float: none;
    padding: 0px 15px 0px 0px;
}

    span.review-profile-image img {
        width: 40px;
    }

.modal-backdrop.in {
    display: none;
}

.review-item {
    border: solid 1px rgba(190, 190, 190, .35);
    /*margin: 0 auto;*/
    padding: 1em;
    flex: 1 1 30%;
    display: flex;
    flex-direction: column;
    align-content: stretch;
    margin: 10px;
    border-radius: 10px;
    overflow-wrap: normal;
    overflow: hidden;
    max-height: 400px;
}

@media ( max-width:1200px) {
    .review-item {
        flex: 1 1 30%;
    }
}

@media ( max-width:450px) {
    .review-item {
        flex: 1 1 90%;
    }
}

.review-item-long {
    border: solid 1px rgba(190, 190, 190, .35);
    /*margin: 0 auto;*/
    padding: 1em;
    flex: 1 1 90%;
    display: flex;
    flex-direction: column;
    align-content: stretch;
    text-overflow: ellipsis;
    margin: 10px;
    border-radius: 10px;
}

@media ( max-width:1200px) {
    .review-item-long {
        flex: 1 1 90%;
    }
}

@media ( max-width:450px) {
    .review-item-long {
        flex: 1 1 90%;
    }
}

.review-header {
    display: flex;
    flex-wrap: wrap;
    text-align: center;
}

.review-picture {
    width: 5em;
    height: auto;
    align-self: center;
    margin-right: 1em;
}

.review-usergrade {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}

.review-meta, .review-stars {
    text-align: center;
    font-size: 115%;
}

.review-author {
    text-transform: capitalize;
    font-weight: bold;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.review-date {
    opacity: .6;
    display: block;
}

.review-text {
    line-height: 1.55;
    text-align: left;
    max-width: 100%;
    text-align: justify;
}

.review-stars ul {
    display: inline-block;
    list-style: none !important;
    margin: 0;
    padding: 0;
}

    .review-stars ul li {
        float: left;
        list-style: none !important;
        margin-right: 1px;
        line-height: 1;
    }

        .review-stars ul li i {
            color: #eb6e00;
            /* Google's Star Orange in Nov 2017 */
            font-size: 1.4em;
            font-style: normal;
        }

            .review-stars ul li i.inactive {
                color: #c6c6c6;
            }

.star:after {
    content: "\2605";
}


.buttons {
    margin: 20px 0 0 0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

.more-reviews {
    text-align: center;
}

.write-review {
    text-align: center;
}

    .more-reviews a,
    .write-review a {
        margin: 5px;
        border: 1px #eb6e00 solid;
        border-radius: 40px;
        padding: 10px;
        background-color: #eb6e00;
        color: #FFF;
        text-decoration: none;
    }

.ribbon {
    --f: 10px; /* control the folded part*/
    --r: 15px; /* control the ribbon shape */
    --t: 10px; /* the top offset */

    position: relative;
    inset: var(--t) calc(-1*var(--f)) auto auto;
    padding: 0 10px var(--f) calc(10px + var(--r));
    clip-path: polygon(0 0,100% 0,calc(100% - var(--f)) calc(70% - var(--r)), 100% calc(100% - var(--f)), calc(100% - var(--f)) calc(100% - var(--f)),0 calc(100% - var(--f)), var(--r) calc(50% - var(--f)/2));
    /*clip-path: polygon(0 0,100% 0,100% calc(100% - var(--f)),calc(100% - var(--f)) 100%, calc(100% - var(--f)) calc(100% - var(--f)),0 calc(100% - var(--f)), var(--r) calc(50% - var(--f)/2));*/
    background: yellow;
    color: lightyellow;
    box-shadow: 0 calc(-1*var(--f)) 0 inset #0005;
}

    .ribbon:hover {
        background: green;
    }

/**
 * Owl Carousel v2.3.4
 * Copyright 2013-2018 David Deutsch
 * Licensed under: SEE LICENSE IN https://github.com/OwlCarousel2/OwlCarousel2/blob/master/LICENSE
 */
/*
 * 	Default theme - Owl Carousel CSS File
 */
.owl-theme .owl-nav {
    margin-top: 10px;
    text-align: center;
    -webkit-tap-highlight-color: transparent;
}

    .owl-theme .owl-nav [class*='owl-'] {
        color: #FFF;
        font-size: 14px;
        margin: 5px;
        padding: 4px 7px;
        background: #D6D6D6;
        display: inline-block;
        cursor: pointer;
        border-radius: 3px;
    }

        .owl-theme .owl-nav [class*='owl-']:hover {
            background: #869791;
            color: #FFF;
            text-decoration: none;
        }

    .owl-theme .owl-nav .disabled {
        opacity: 0.5;
        cursor: default;
    }

        .owl-theme .owl-nav.disabled + .owl-dots {
            margin-top: 10px;
        }

.owl-theme .owl-dots {
    text-align: center;
    -webkit-tap-highlight-color: transparent;
}

    .owl-theme .owl-dots .owl-dot {
        display: inline-block;
        zoom: 1;
        *display: inline;
    }

        .owl-theme .owl-dots .owl-dot span {
            width: 10px;
            height: 10px;
            margin: 5px 7px;
            background: #D6D6D6;
            display: block;
            -webkit-backface-visibility: visible;
            transition: opacity 200ms ease;
            border-radius: 30px;
        }

        .owl-theme .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span {
            background: #869791;
        }


.owl-carousel, .owl-carousel .owl-item {
    -webkit-tap-highlight-color: transparent;
    position: relative
}

.owl-carousel {
    display: none;
    width: 100%;
    z-index: 1
}

    .owl-carousel .owl-stage {
        position: relative;
        -ms-touch-action: pan-Y;
        touch-action: manipulation;
        -moz-backface-visibility: hidden
    }

        .owl-carousel .owl-stage:after {
            content: ".";
            display: block;
            clear: both;
            visibility: hidden;
            line-height: 0;
            height: 0
        }

    .owl-carousel .owl-stage-outer {
        position: relative;
        overflow: hidden;
        -webkit-transform: translate3d(0,0,0)
    }

    .owl-carousel .owl-item, .owl-carousel .owl-wrapper {
        -webkit-backface-visibility: hidden;
        -moz-backface-visibility: hidden;
        -ms-backface-visibility: hidden;
        -webkit-transform: translate3d(0,0,0);
        -moz-transform: translate3d(0,0,0);
        -ms-transform: translate3d(0,0,0)
    }

    .owl-carousel .owl-item {
        min-height: 1px;
        float: left;
        -webkit-backface-visibility: hidden;
        -webkit-touch-callout: none
    }

        .owl-carousel .owl-item img {
            display: block;
            width: 100%
        }

    .owl-carousel .owl-dots.disabled, .owl-carousel .owl-nav.disabled {
        display: none
    }

    .no-js .owl-carousel, .owl-carousel.owl-loaded {
        display: block
    }

    .owl-carousel .owl-dot, .owl-carousel .owl-nav .owl-next, .owl-carousel .owl-nav .owl-prev {
        cursor: pointer;
        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none
    }

    .owl-carousel .owl-nav button.owl-next, .owl-carousel .owl-nav button.owl-prev, .owl-carousel button.owl-dot {
        background: 0 0;
        color: inherit;
        border: none;
        padding: 0 !important;
        font: inherit
    }

    .owl-carousel.owl-loading {
        opacity: 0;
        display: block
    }

    .owl-carousel.owl-hidden {
        opacity: 0
    }

    .owl-carousel.owl-refresh .owl-item {
        visibility: hidden
    }

    .owl-carousel.owl-drag .owl-item {
        -ms-touch-action: pan-y;
        touch-action: pan-y;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none
    }

    .owl-carousel.owl-grab {
        cursor: move;
        cursor: grab
    }

    .owl-carousel.owl-rtl {
        direction: rtl
    }

        .owl-carousel.owl-rtl .owl-item {
            float: right
        }

    .owl-carousel .animated {
        animation-duration: 1s;
        animation-fill-mode: both
    }

    .owl-carousel .owl-animated-in {
        z-index: 0
    }

    .owl-carousel .owl-animated-out {
        z-index: 1
    }

    .owl-carousel .fadeOut {
        animation-name: fadeOut
    }

@keyframes fadeOut {
    0% {
        opacity: 1
    }

    100% {
        opacity: 0
    }
}

.owl-height {
    transition: height .5s ease-in-out
}

.owl-carousel .owl-item .owl-lazy {
    opacity: 0;
    transition: opacity .4s ease
}

    .owl-carousel .owl-item .owl-lazy:not([src]), .owl-carousel .owl-item .owl-lazy[src^=""] {
        max-height: 0
    }

.owl-carousel .owl-item img.owl-lazy {
    transform-style: preserve-3d
}

.owl-carousel .owl-video-wrapper {
    position: relative;
    height: 100%;
    background: #000
}

.owl-carousel .owl-video-play-icon {
    position: absolute;
    height: 80px;
    width: 80px;
    left: 50%;
    top: 50%;
    margin-left: -40px;
    margin-top: -40px;
    background: url(owl.video.play.png) no-repeat;
    cursor: pointer;
    z-index: 1;
    -webkit-backface-visibility: hidden;
    transition: transform .1s ease
}

    .owl-carousel .owl-video-play-icon:hover {
        -ms-transform: scale(1.3,1.3);
        transform: scale(1.3,1.3)
    }

.owl-carousel .owl-video-playing .owl-video-play-icon, .owl-carousel .owl-video-playing .owl-video-tn {
    display: none
}

.owl-carousel .owl-video-tn {
    opacity: 0;
    height: 100%;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    transition: opacity .4s ease
}

.owl-carousel .owl-video-frame {
    position: relative;
    z-index: 1;
    height: 100%;
    width: 100%
}

/*for zoom testing*/

.owl-item > div {
    cursor: pointer;
    margin: 0;
    transition: margin 0.4s ease;
}

.owl-item.center > div {
    cursor: auto;
    margin: 5% 2% 2% 2%;
}

.owl-item:not(.center) > div {
    /*opacity: .95;*/
}

/*For prev next buttons on sides*/

.owl-prev, .owl-next {
    width: 30px;
    height: 100px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: block !important;
    border: 0px solid black;
}

.owl-prev {
    left: 10px;
}

.owl-next {
    right: 10px;
}

    .owl-prev i, .owl-next i {
        transform: scale(2,5);
        color: #000;
        padding: 2px;
    }

/*Ends Here*/