<? 
if(isset($_COOKIE['previousVisitProdCat'])){
    $currCat = $_COOKIE['previousVisitProdCat'];
    }else{
     $currCat = 71; // Colds and Immunity
 }
 include 'catColors.php';
 
 if(!isset($contentCatId)){
    $colorCatId = 149;
} else {
    $contentCatId = 149;
}
?>
<style type="text/css">
iframe#prodSelectFrame { min-height: 248px!important; }
a,body{color:#444;outline:0;}*,:after,:before{-moz-box-sizing:border-box;box-sizing:border-box;-webkit-font-smoothing:antialiased;font-smoothing:antialiased;text-rendering:optimizeLegibility}html{font-size:62.5%;overflow-x:hidden;}body{font:300 11px/1.2 Arial, sans-serif}.clear:after,.clear:before{content:' ';display:table}.clear:after{clear:both}img{max-width:100%;vertical-align:bottom;border:0;}a{text-decoration:none}a:active,a:focus,a:hover{outline:0}input:focus{outline:0;border:1px solid #04A4CC}.wrapper{max-width:1140px;width:95%;margin:0 auto;}::selection{background:#04A4CC;color:#FFF;text-shadow:none}::-webkit-selection{background:#04A4CC;color:#FFF;text-shadow:none}::-moz-selection{background:#04A4CC;color:#FFF;text-shadow:none}.alignnone{margin:5px 20px 20px 0}.aligncenter,div.aligncenter{display:block;margin:5px auto}.alignright{float:right;margin:5px 0 20px 20px}.alignleft{float:left;margin:5px 20px 20px 0}a img.alignright{float:right;margin:5px 0 20px 20px}a img.alignleft,a img.alignnone{margin:5px 20px 20px 0}a img.alignleft{float:left}a img.aligncenter{display:block;margin-left:auto;margin-right:auto}.wp-caption{background:#FFF;border:1px solid #F0F0F0;max-width:96%;padding:5px 3px 10px;text-align:center}.wp-caption.alignleft,.wp-caption.alignnone{margin:5px 20px 20px 0}.wp-caption.alignright{margin:5px 0 20px 20px}.wp-caption img{border:0;height:auto;margin:0;max-width:98.5%;padding:0;width:auto}.gallery-caption,.wp-caption .wp-caption-text{font-size:11px;line-height:17px;margin:0;padding:0 4px 5px}@media print{blockquote,img,pre,tr{page-break-inside:avoid}*{background:0 0!important;color:#000!important;box-shadow:none!important;text-shadow:none!important}a,a:visited{text-decoration:underline}a[href]:after{content:" (" attr(href) ")"}abbr[title]:after{content:" (" attr(title) ")"}.ir a:after,a[href^="#"]:after,a[href^="javascript:"]:after{content:""}blockquote,pre{border:1px solid #999}thead{display:table-header-group}img{max-width:100%!important}@page{margin:.5cm}h2,h3,p{orphans:3;widows:3}h2,h3{page-break-after:avoid}}

/*------------------------------------*\
FONTS
\*--------------------------------------*/


@font-face {
    font-family: 'Interstate-regular';
    src: url('<?php echo get_template_directory_uri(); ?>/fonts/interstate-regular-webfont.woff') format('woff'),
    url('<?php echo get_template_directory_uri(); ?>/fonts/interstate-regular-webfont.woff2') format('woff2');    
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Interstate-bold';
    src: url('<?php echo get_template_directory_uri(); ?>/fonts/interstate-bold-webfont.woff') format('woff'),
    url('<?php echo get_template_directory_uri(); ?>/fonts/interstate-bold-webfont.woff2') format('woff2'),
    url('<?php echo get_template_directory_uri(); ?>/fonts/interstate-bold.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Interstate-blackCondensed';
    src: url('<?php echo get_template_directory_uri(); ?>/fonts/Interstate-BlackCondensed.eot');
    src: url('<?php echo get_template_directory_uri(); ?>/fonts/Interstate-BlackCondensed.eot?#iefix') format('embedded-opentype'),
    url('<?php echo get_template_directory_uri(); ?>/fonts/Interstate-BlackCondensed.woff') format('woff'),
    url('<?php echo get_template_directory_uri(); ?>/fonts/Interstate-BlackCondensed.ttf') format('truetype'),
    url('<?php echo get_template_directory_uri(); ?>/fonts/Interstate-BlackCondensed.svg#Archer-bold') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'interstate-bold-italic';
    src: url('<?php echo get_template_directory_uri(); ?>/fonts/interstate-bolditalic-webfont.woff2') format('woff2'),
    url('<?php echo get_template_directory_uri(); ?>/fonts/interstate-bolditalic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;

}

@font-face {
    font-family: 'archer-bold';
    src: url('<?php echo get_template_directory_uri(); ?>/fonts/Archer-Bold.eot');
    src: url('<?php echo get_template_directory_uri(); ?>/fonts/Archer-Bold.eot?#iefix') format('embedded-opentype'),
    url('<?php echo get_template_directory_uri(); ?>/fonts/Archer-Bold.woff2') format('woff2'),
    url('<?php echo get_template_directory_uri(); ?>/fonts/Archer-Bold.woff') format('woff'),
    url('<?php echo get_template_directory_uri(); ?>/fonts/Archer-Bold.ttf') format('truetype'),
    url('<?php echo get_template_directory_uri(); ?>/fonts/Archer-Bold.svg#Archer-bold') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Frutiger BLK Std';
    src: url('<?php echo get_template_directory_uri(); ?>/fonts/FrutigerLTStd-ExtraBlackCn.eot');
    src: url('<?php echo get_template_directory_uri(); ?>/fonts/FrutigerLTStd-ExtraBlackCn.eot?#iefix') format('embedded-opentype'),
    url('<?php echo get_template_directory_uri(); ?>/fonts/FrutigerLTStd-ExtraBlackCn.woff') format('woff'),
    url('<?php echo get_template_directory_uri(); ?>/fonts/FrutigerLTStd-ExtraBlackCn.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}


@font-face {
    font-family: 'Frutiger LT Std';
    src: url('<?php echo get_template_directory_uri(); ?>/fonts/FrutigerLTStd-LightCn.eot');
    src: url('<?php echo get_template_directory_uri(); ?>/fonts/FrutigerLTStd-LightCn.eot?#iefix') format('embedded-opentype'),
    url('<?php echo get_template_directory_uri(); ?>/fonts/FrutigerLTStd-LightCn.woff') format('woff'),
    url('<?php echo get_template_directory_uri(); ?>/fonts/FrutigerLTStd-LightCn.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Futura Std';
    src: url('<?php echo get_template_directory_uri(); ?>/fonts/FuturaStd-Book.woff2') format('woff2'),
    url('<?php echo get_template_directory_uri(); ?>/fonts/FuturaStd-Book.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Futura Std Bold';
    src: url('<?php echo get_template_directory_uri(); ?>/fonts/FuturaStd-Bold.woff2') format('woff2'),
    url('<?php echo get_template_directory_uri(); ?>/fonts/FuturaStd-Bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Futura Std Bold';
    src: url('<?php echo get_template_directory_uri(); ?>/fonts/FuturaStd-BoldItalic.woff2') format('woff2'),
    url('<?php echo get_template_directory_uri(); ?>/fonts/FuturaStd-BoldItalic.woff') format('woff');
    font-weight: 700;
    font-style: italic;
    font-display: swap;
}

/*------------------------------------*\
GLOBAL
\*--------------------------------------*/

.category-247 .prodTile:nth-child(2) .prodTileCopyCont p:nth-child(4),
.category-247 .prodTile:nth-child(2) .prodTileCopyCont p:nth-child(5),
.category-247 .prodTile:nth-child(3) .prodTileCopyCont p:nth-child(4),
.category-247 .prodTile:nth-child(3) .prodTileCopyCont p:nth-child(5) {
	display: none;
}
	
form.surveys-forms input[type=text], form.surveys-forms input[type=number] input[type=tel], form.surveys-forms input[type=email], form.surveys-forms label, form.surveys-forms legend, form.surveys-forms select, form.surveys-forms textarea{
    border-radius: 6px;
}

.second_img{
    float: right;
    display: block;
    width: 100%;    
    margin: 30px 0;
    clear: both;
}

body .type-product .prodDetPackCont .second_img img{
    width: 100%;
    max-width: 350px;
    height: 100%;
    margin: 0 auto;
}

.green{
    color: #00583C !important;
}

p, li{
    line-height: 1.5;
}

ol{
    position: relative;
    list-style-type: none;
    counter-reset: ol-counter;
}

.faqli > div > a > span{
    font-weight: normal;
}


.histSlideCopy p.green ul li{

}

strong, b{
    color: #00583C;
}

ol > li{
    display: block;
}

ol > li:before {
    content: counter(ol-counter);
    counter-increment: ol-counter;
    position: relative;
    top: 0;
    left: -1em;
    width: 1em;
    font-weight: bold;
    text-align: right;
    color: #00583C;
    margin: 0 -0.6em 0 0;
}

.single-product li{
    margin: 0;
    list-style-position: inside;
    text-indent: -2em;
}

.single-product li:first-letter{
    text-transform: capitalize
}

.allIngredCont li{
    list-style-type: none;
    text-indent: 0;
}

h2, h3, span.bannerTitle, .healthSection span.bannerTitle, .centeredTitle h1{
    font-family: 'Futura Std Bold';
}

.bannerCopy p, span.bannerTag, h1.bannerTag{
    font-family: 'Frutiger LT Std';
    font-weight: bold;
}


h1, h1 a, h4{
    font-family: 'Futura Std Bold';
    color: #00583C;
}

h4{
    font-size: 20px;
}

.ref, .references, body.single-post small{
    display: none;
}

table {
    border-collapse: collapse;
    width: 100%;
}

.wp-block-table table, .wp-block-table th, .wp-block-table tr, .wp-block-table td{
    border: 1px solid #d9d9d9;
    padding: 15px;
    vertical-align: top;
}

table, th, tr, td{
    padding:  15px;
}

body.single-recipe b{
    text-transform: capitalize;
}

.clearfix {
    overflow: auto;
}

.clearfix:after {
    content: "";
    clear: both;
    display: table;
}

/* css for qr */
.mobileVid{
    display: block;
    position: relative;
    padding-bottom: 193px;
    padding-top: 0px;
    height: 0;
    clear: both;
    margin: 0 auto;
    max-width: 350px;
}


.mobileVid iframe, .mobileVideo object, .mobileVideo embed {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 padding-top:10px;
}

/*for faq*/

/* Create two equal columns that floats next to each other */
@media screen and (max-width: 1440px) {
    .questions-faq{
        container-type: inline-size;
        padding: 0 0 10px;
        font-weight: 600;
        color: #00583c;
        width:90% !important;
        margin-left: 5% !important;
    }
}
@media screen and (min-width: 1660px) {
    .questions-faq{
        width: 85% !important;
        margin-left:4% !important;
    }
}
.questions-faq{
    container-type: inline-size;
    padding: 0 0 10px;
    font-weight: 600;
    color: #00583c;
    width:85%;
    margin-left:4%;
}
.faqli{
    padding: 0;

}

.faqli > div {
    width: 100%;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #00583c;
    font-size: 16px;
}

.faqli > div > a {
    color: #00583c;
    font-weight: 600;
}

.faqli > div > a > span {
    font-size: 16px;
    line-height: 1.2;
}



.faq-col {
    float: left;
    width: 50%;
    padding: 10px;
}

/* Clear floats after the columns */
.faq-row:after {
    content: "";
    display: table;
    clear: both;
}
.question{
    padding:20px;
    border-bottom: 1px solid #00583c;
}
.ques{
    display:flex;
    align-items: center;
    width: 95%;
    padding-left:10px;
}
.fa{
    position: relative;
    font-size: 30px !important;
    padding: 0px 10px !important;
    width: 5% !important;
    margin-top: 9px;
}
/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
    .faq-col {
      width: 100%;
  }
  .faqli{
    height: auto;
}
}
@media (max-width: 480px){
    .mobileVid iframe, .mobileVideo object, .mobileVideo embed {
        /*top: -8px;*/
    }
}


/* Create two equal columns that floats next to each other */
.column {
    float: left;
    width: 50%;
    padding: 9px 0px 0px 35px;
    height: 100%;
}

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

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
    .column {
        width: 100% !important;
        border-right:none !important;
    }
    .qr-title{
        padding: 15px 0px 0px 32px;
    }
}
@media screen and (max-width: 768px) {
    .qr-title{
        padding: 15px 0px 0px 32px;
    }
    .column{
        width: 50%;
        padding: 9px 15px 0px 35px;
        height: 100%;
    }
    
}
/*--------------------------------------*\
RESPONSIVE
\*--------------------------------------*/

@media only screen and (min-width:1px) {

    .prodDetLeft{
        display: block;
        float: none;
        width: 100%;
        max-width: 350px;
        height: auto;
        /*position: relative;*/
        margin: 0 auto 20px;
    }

    .lpv2 .ng-scope{
        background: transparent;
    }

    .prodDetTop{
        /*float: left;*/
    }

    .ps-footer{
        display: none !important;
    }

    .ps-widget{
        margin-top: -1px;
    }


    .com-1{
        margin:35px !important;
    }
    img.desktopBanner, .activeIngredRow span.prodDetKeyIngFlipBtn, .socLinksDesktop, .artSocContDeskTop, img.ourStoryTopLeft, img.ourStoryTopRight, .sourceToShelfDeskCont, .bannerImg img.desktopBannerPackshot, img.leg, img.legWide, .bannerSection img.leafBGdesktop, .bannerGreyStrip{
        display: none;
    }

    .bs p.white, .newsletterColRight p.white {
        color: #fff;
        float: right;
        display: inline-block;
        position: absolute;
        bottom: 25px;
        right: 20px;
        padding: 0;
        margin: 0;
        font-size: 12px;
    }

    .GApartnership .newsletterColRight{
        position: relative;
    }

    .GApartnership .newsletterColRight p.white{
        bottom: 0px;
    }

    .type-product img.GAfooterBanner{
        height: 100%;
        margin: 0;
        width: 100%;
    }

    .GApartnership{
        margin-top: 50px;
    }

    .GApartnership .newsletterContRow{
        position: relative;
    }

    body .GApartnership .headerPartnership{
        position: relative;
        bottom: 0px;
        margin: 0 auto;
        width: 100%;
    }


    .GApartnership .newsletterSection h2{
        font-size: 32px;
        line-height: 0;
        margin-bottom: 20px;
        display: inline;
    }

    .GApartnership .headerPartnership .partnershipMobileLogo{
        margin: 0 0 0 5px;
    }

    body .GAfooterBtn{
        width: 100%;
    }



    /* structure */

    main{
        padding-top: 45px;
    }

    .wrapper{
        width: 100%;
        display: block;
    }

    .vidCont{
        display: block;
        position: relative;
        padding-bottom: 50.25%;
        padding-top: 30px;
        height: 0;
    }


    .vidCont iframe, .vidConteo object, .vidConteo embed {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        padding: 27px 0;
        border: 0;
    }

    /* end structure */

    /* fonts */

    .upperCase{
        text-transform: uppercase;
    }

    h1{
        font-size: 16px;
    }

    h2{
        font-size: 18px;
    }
    
    p, ol, ul, span{
        font-size: 14px;
        display: block;
        @media (min-width: 768px) {
            font-size: 16px;
        }
    }
	sup,
	span {
		display: inline!important;
	}
	

    ::-webkit-input-placeholder {
       color: #9ABDB5;
   }

   :-moz-placeholder {
       color: #9ABDB5;
   }

   ::-moz-placeholder {
       color: #9ABDB5;
   }

   :-ms-input-placeholder {
       color: #9ABDB5;
   }

   .centHeading{
    font-family: 'Futura Std Bold';
    text-align: center;
    font-size: 27px;
}

/* end fonts */

/* mobile nav   */

header, .mobSubSubMenu, .mobSubMenu, .desktopFooter, .desktopContactPopup, p#breadcrumbs, .prodDetSocContDesk, .leftStickyNav, form.desktop, .searchTitleCont {
    display: none;
}

body{
    display: block;
    margin: 0 auto;
    width: 100%;
    font-size: 14px;

    @media (min-width: 768px) {
        font-size: 16px;
    }
}

.mobileHeader{
    display: block;
    width: 100%;
    height: 45px;
    background: #00583C;
    position: fixed;
    top: 0;
    z-index: 1000;
}

.mobileHeader a{
    text-transform: uppercase;
}

.mobMenuWrap{
    display: inline-block;
    width: 50px;
    height: 45px;
    float: left;
}

.mobMenuBtn{
    float: left;
    position: absolute;
    padding: 12px 0 0 13px;
    cursor: pointer;
}

.bannerTitle{
    line-height: 1;
}

span.bar{
    display: block;
    width: 25px;
    height: 4px;
    border-radius: 1px;
    background-color: #9ABDB5;
    clear: both;
    margin: 0 0 4px;
}

.mobLogoCont{
    display: inline-block;
    width: auto;
    float: left;
    border-left: 1px solid #00583C;
    padding-left: 5px;
    height: 45px;
}

.mobLogoCont img{
    display: block;
    width: 50px;
    height: auto;
    margin: 8px auto 0;
}

.mobBtnLeft{
    display: block;
    float: right;
    width: 50px;
    height: 45px;
    border-left: 1px solid #00583C;
    position: relative;
}

.mobBtnLeft img{
    display: block;
    margin: 10px auto 0;
    height: 13px;
    width: auto;
}

.mobBtnLeft span{
    display: block;
    clear: both;
    color: #9ABDB5;
    font-size: 8px;
    margin-top: 4px;
    text-align: center;
}

.mobSearchCont{
    height: 40px;
    position: absolute;
    top: 45px;
    width: 100%;
    background: #fff;
    display: none;
    z-index: 1;
    border-bottom: 1px solid #ccc;
}

form.mobile{
    width: 100%;
    padding-top: 12px;
}

.mobSearchCont form.mobile .search-input{
    border: none;
    display: block;
    width: 73%;
    float: left;
    font-size: 16px;

}

form.mobile button.search-submit{
    display: inline-block;
    background: url('data:img/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUBAMAAAB/pwA+AAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAKlBMVEUAAACavbWavbWavbWavbWavbWavbWavbWavbWavbWavbWavbWavbUAAADzpBTgAAAADHRSTlMAVbsiqjNEZsyZd+7lQc+4AAAAAWJLR0QAiAUdSAAAAAlwSFlzAAALEgAACxIB0t1+/AAAAIFJREFUCNdjYAACRp1DAgxgwOxz5syRADAz51BpuM4xsOCZAgYG9jMGQCbTcZCAjAKQiGkAMZkOAomaAhCT/RCQmAPWzHoGlYmkAEkbC9iwGgeQFMIKmTMnSsN7QBYznjkOdM4hiKAAa+V0kIFsZw4yQMHqMwIwps42GIvBogDGAgAxgydWx0OsCAAAAABJRU5ErkJggg==') no-repeat;
    background-size: 100%;
    height: auto;
    width: 17px;
    border: none;
    position: absolute;
    right: 9px;
    top: 12px;
    z-index: 2;
}

form.mobile .closeMobSearchBtn{
    display: inline-block;
    float: left;
    margin: 0 10px 0 15px;
}

form.mobile .closeMobSearchBtn img{
    width: 15px;
    height: auto;
}

.mobNav {
    display: none;
    float: left;
    position: absolute;
    top: 45px;
    z-index: 5;
    background: #fff;
    width: 100%;
    height: auto;
}

.mobNav a {
    display: block;
    width: 100%;
    float: left;
    border-bottom: 1px solid #00583C;
    padding: 15px 0;
    text-align: center;
    font-size: 12px;
    background-color: #00583C;
    color: #fff;
}

.mobNav a:hover{
    text-decoration: none;
}

.arrow{
    background: url(<?php echo get_template_directory_uri(); ?>/img/mobNavRightArrow.png) no-repeat;
    background-position: 95% center ;
}

.arrowLeft{
    background: url(<?php echo get_template_directory_uri(); ?>/img/mobNavLeftArrow.png) no-repeat;
    background-position: 5% center ;
}

.arrowDown, .artCatArrowDown{
    background: url(<?php echo get_template_directory_uri(); ?>/img/mobNavDownArrow.png) no-repeat;
    background-position: 95% center ;
    transition: all .2s;
}

.arrowReturnUp, .artCatReturnUp{
    background: url(<?php echo get_template_directory_uri(); ?>/img/mobNavUpArrow.png) no-repeat;
    background-position: 95% center;
}


.mobSubMenu{
    width: 100%;
    background: #fff;
    position: absolute;
    right: -100%;
}

.mobSubSubMenu{
    display: none;
    height: auto;
    position: relative;
}

.mobSubSubMenu a{
    background-color: #fff;
    color: #00583C;
}

.headerBG{
    position: absolute;
    height: 45px;
}

.headerCTAStrip{
    display: block;
    float: left;
    width: 100%;
    height: 90px;
    background: #44308F;
    position: absolute;
    top: 45px;
    z-index: 3;
    color: #fff;
    cursor: pointer;
    border-bottom: 1px solid #00583C;
}

.headerCTAStrip img{
    position: absolute;
    width: 20px;
    height: auto;
    margin: 10px 10px 0 15px;
}
.headerCTAStrip span{
    margin: 11px auto 0;
    width: 80%;
    font-size: 11px;
    text-align: center;
    color: #fff;
}

.headerCTAStrip span.ctaBtn{
    display: block;
    border: 1px solid #fff;
    border-radius: 20px;
    width: 80px;
    padding: 5px;
    margin: 5px auto;
}

.headerCTAStrip span.ctaClose{
    position: absolute;
    border: 1px solid #fff;
    border-radius: 20px;
    padding: 6px 4px;
    line-height: .5;
    right: 6px;
    top: -6px;
    width: 22px;
    font-size: 18px;
    text-align: center;
    display: block;
}

/* end mobile nav */

/*  mobile signUpPopup mobile */

.signUpPopupInner iframe{
    width: 100%;
    height: 330px !important;
    background:url(<?php echo get_template_directory_uri(); ?>/img/reload.gif) center center no-repeat;
}

.signUpPopup{
    display: none;
    position: fixed;
    width: 90%;
    max-width: 360px;
    background: #fff;
    border: 1px solid #ccc;
    height: 445px;
    z-index: 1001;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.signUpPopup h3{
    text-align: center;
}



.popupClose{
    color: #fff;
    position: relative;
    top: -45px;
    right: 5px;
    font-size: 40px;
    cursor: pointer;
    z-index: 1401;
    float: right;
}

.contactUsPopup .popupClose{
    top: -26px;
    right: -14px;
    color: black !important;
}

.signUpPopupInner{
    width: 80%;
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
}





/* end signUpPopup mobile */


/* mobile footer */

.mobFooter{
    border-top: 1px solid #ccc;
    padding: 25px 0;
    clear: both;
    background: #00583C;
    color: #fff;
    float: left;
}

.footerSocCont{
    display: block;
    margin: 0 auto;
    width: 90%;
    border-top: 1px solid #9ABDB5;
    padding-top: 30px;
}

.footerSocContInner{
    display: block;
    width: 130px;
    margin: 0 auto;
}

.footerSocContInner img{
    width: 30px;
    height: auto;
    margin: 0 5px;
}

.mobFooterContWrapper {
    width: 90%;
    margin: 0 auto;
}

.mobFooterLinkWrapper {
    margin: 0 15px;
}

.mobFooterRow {
    display: flex;
    margin: 20px -15px;
    /*padding: 15px 0;*/
}

.mobFooterContactWrapper {
    align-items: center;
}

.mobFooterContCol {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;
    padding: 0 15px;
}

img.footerLogo{
    display: block;
    width: 107px;
}

.mobFooterLinkCont a {
    display: block;
    padding: 8px 0;
    font-size: 12px;
    color: #fff;
    text-decoration: underline;
}

.mobFooterLinkCont a:hover {
    text-decoration: none;
}

.mobFooterContactCont a{
    font-size: 12px;
    color: #fff;
    padding: 8px 0;
}

.mobFooterSocial a {
    display: inline-block;
    text-decoration: none;
    padding-right: 10px;
    color: #fff;
}

.mobFooterSocial img {
    height: 25px;
}

p.disclaimer {
    font-size: 11px;
    margin: 0;
}

p.copyright{
    display: block;
    font-size: 11px;
    margin: 0;
    padding-top: 15px;
    border-top: 1px solid rgba(255, 255, 255, 0.7);
}

/* end mobile footer */

/* mobile product detail page */

.prodDetKeyIngDesktopCont{
    display: none;
}

.type-product h4{
    /*font-size: */
}

.single-product main{
    padding-top: 45px;
}

.type-product{
    width: 100%;
    margin: 0 auto;
}

.type-product img{
    display: block;
    width: auto;
    margin: 20px auto;
    height: 200px;
}

.prodDetTopCopyCont, .prodDetMidCopyCont, .prodDetLowerCopyCont{
    width: 90%;
    margin: 0 auto;
}

.prodDetTopCopyCont span{
    font-family: 'Interstate-bold';
    text-transform: uppercase;
    padding: 0 0 5px;
    border-bottom:1px solid #ccc;
    width: 50%;
}

.type-product h1{
    font-size: 24px;
    line-height: 1.2;
    text-transform: capitalize;
}

.prodDetPackCont{
    display: block;
    float: left;
    width: 100%;
    background: linear-gradient(to right bottom, <?= isset($catColorList[$contentCatId]) ? $catColorList[$contentCatId] : '#1A705B' ?> 42%, #fff 42.2%);
}

.howToBuyCont{
    display: block;
    clear: both;
    width: 100%;
    height: auto;
    margin: 20px auto;
}

.prodIcons{
    display: block;
    width: 100%;
    float: left;
    margin-top: 20px;
}

.prodDetTopCopyCont .prodIcons{
    margin: 20px 0 30px;
}

.prodIconCont{
    display: block;
    float: left;
    width: 33%;
}

.prodIconCont img{
    float: left;
    width: auto;
    max-width: 22px;
    height: 20px;
    margin: 0px 5px 0 0;
}

.prodIconCont span{
    display: inline-block;
    width: auto;
    border: none;
    font-size: 10px;
    color: #444;
    font-family: Arial;
    margin: 0;
    line-height: 2;
}

span.avail{
    font-size: 12px;
    text-transform: none;
    width: 100%;
    border-bottom: 1px solid #adc8c1;
}

.prodDetDivider{
    display: block;
    width: 75%;
    margin: 50px auto 40px;
    border-bottom: 1px solid #adc8c1;
}

img.showHideIcon{
    display: block;
    margin: 50px auto 0 ;
    width: 45px;
    height: auto;
}

.allIngredCont h4{
    font-size: 24px;
    text-align: center;
    width: 130px;
    margin: 30px auto;
}

h4.keyIng{
    margin-top: 70px;
    text-align: center;
    border: none;
    width: 100%;
    clear: both;
    float: left;
}

/*.howToBuyCont span{
    width: 150px;
    padding: 10px;
    color: #fff;
    background-color: #666;
    border-radius: 5px;
    display: block;
    text-align: center;
    margin: 0 auto;
    }*/

    .activeIngredRow, .qAndARow{
        position: relative;
        width: 100%;
        height: 80px;
        background: #000;
        overflow: hidden;
        margin: 20px 0 0;
        transition: all .2s;
        cursor: pointer;
    }

    .qAndARow{
        background: none;
        margin: 0;
    }

    .qAndARow p{
        position: relative;
        top: 67px;
        width: 90%;
        margin: 12px auto;
    }


    .qAndARow span:hover{
        background: #DDECE9;
    }

    .greenBG{
        background: #00583C !important;
    }

    .activeIngredRow span, .qAndARow span{
        font-family: 'Interstate-regular';
        display: block;
        width: 100%;
        font-size: 20px;
        position: absolute;
        top: 29px;
        color: #fff;
        padding: 0 0 0 10px;
        text-transform: uppercase;
    }

    .qAndARow span{
        text-transform: none;
        background: #f8f8f8;
        color: #444;
        font-size: 17px;
        padding: 25px 0 20px 10px;
        top: 0;
        transition: all .2s;
    }

    .activeIngredRow img.openIcon, .qAndARow img.openIcon{
        position: absolute;
        right: 30px;
        top: 3px;
        width: 20px;
        height: 20px;
        opacity: 1;
        transition: all .2s;
    }

    .activeIngredRow img.rotate, .qAndARow img.rotate{
        transform:rotate(45deg);
    }

    h4.prodDetArrowDown{
        margin: 0;
        padding: 10px 0;
    }

    .activeIngredImgCont{
        display: block;
        height: 80px;
        background: #000;
    }

    .activeIngredRow img{
        width: 100%;
        height: auto;
        opacity: .3;
        margin: 0;
    }

    .activeIngredRow:hover{
        opacity: .9;
    }

    p.keyIngCopy{
        color: #fff;
        width: 90%;
        margin: 0 auto;
    }

    .prodDetAccHide{
        display: none;
        width: 100%;
        height: auto;
        float: left;
    }

    .prodDetSocCont{
        display: none;
        width: 80%;
        max-width: 212px;
        padding: 20px 0 30px;
        margin: 0 auto;
        clear: both;
    }

    span.socTitle{
        font-family: 'interstate-bold-italic';
        font-size: 12px;
        margin: -3px 5px 0 0;
        text-align: center;
    }

    .prodDetSocLinks{
        display: block;
        width: 116px;
        margin: 20px auto;
    }

    .prodDetSocLinks span{
        float: left;
    }

    .prodDetLowerCopyContOuter{
        display: block;
        width: 100%;
        background: #F1F7F7;
        float: left;
        padding-bottom: 70px;
    }

    .relProdCont, .relArtCont{
        display: block;
        width: 100%;
        float: left;
        margin-top: 50px;
    }

    .relProdCont h4, .relArtCont h4{
        text-align: center;
        border-bottom: 2px solid #ccc;
        padding-bottom: 10px;
    }

    .relArtRow{
        position: relative;
        padding: 15px 0;
        margin: 0 0 10px;
        height: 80px;
        background: #fff;
    }

    .relArtRow:hover{
        box-shadow: 3px 3px 6px #ccc;
    }

    .relArtRow a{
        display: block;
        float: left;
        width: 100%;
    }

    .relArtRow span{
        display: block;
        text-align: left;
        padding: 10px 0;
        margin: 0 20px 0 70px;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
    }

    .relArtRow span.relArtNum{
       color: #fff;
       background: <?= isset($catColorList[$contentCatId]) ? $catColorList[$contentCatId] : '#1A705B' ?>;
       padding: 9px 14px;
       border-radius: 30px;
       margin: 0 0 0 20px;
       float: left;
   }


   .relProdRow{
    display: block;
    width: 100%;
    float: left;
}

.relProdImgCont img{
    width: auto;
    height: 200px;
}

.lowerPromoCont{
    display: block;
    float: left;
    width: 100%;
    height: auto;
    position: relative;
}

.type-product .lowerPromoImg{
    display: none;
}

.type-product .lowerPromoMobImg{
    position: absolute;
    width: 100%;
    height: auto;
}


span.lowerPromoTitle, .prodDetQualityTile span{
    display: block;
    width: 100%;
    font-family: 'Interstate-regular';
    font-size: 18px;
    text-align: center;
    color: #fff;
    position: absolute;
    top: 10%;
}

.lowerPromoCopyCont{
    display: block;
    width: 90%;
    margin: 55% auto 0;
    background: #fff;
    position: relative;
    padding: 15px;
}

.lowerPromoCopyCont p{
    margin: 0;
}

.prodDetQualityCont{
    display: block;
    width: 100%;
    float: left;
    margin: 50px 0 0 0;
    background: #fff;
}

.prodDetQualityCont img{
    width: 115px;
    height: auto;
    margin: 0 auto;
}

.prodDetSectionTitle{
    display: block;
    margin: 0 0 50px;
}

.prodDetSectionTitle img{
    display: block;
    width: 50px;
    height: auto;
    margin: 0 auto;
}

.prodDetSectionTitle h4{
    width: 100%;
    text-align: center;
}

.prodDetQualityTile{
    display: block;
    width: 100%;
    float: left;
    margin: 0 0 75px;
}

.prodDetQualityTile span{
    position: relative;
    margin: 40px 0 30px;
}

.prodDetQualityTile p{
    text-align: center;
    width: 60%;
    margin: 0 auto;
}

.prodDetQualityCont .first span:before, .prodDetQualityCont .second span:before, .prodDetQualityCont .third span:before{
    content: '1';
    opacity: .1;
    font-size: 90px;
    position: absolute;
    top: -47px;
}

.prodDetQualityCont .second span:before{
    content: '2';
}

.prodDetQualityCont .third span:before{
    content: '3';
}

.shortUnderline{
    display: block;
    width: 35px;
    margin: 0 auto;
    border-bottom: 1px solid #ccc;
}

.prodDetFeatureTitleCont img{
    margin: 0 auto;
    width: 50px;
    height: auto;
}

.buyNowStickCont{
    display: none;
    position: fixed;
    z-index: 102;
    left: 0;
    bottom: 0;
    cursor: pointer;
}

.buyNowStickCont img{
    position: relative;
    width: 40px;
    height: auto;
    float: left;
    z-index: 2;
}

.buyNowStickCont span{
    position: absolute;
    background: #00583C;
    color: #fff;
    font-family: 'Interstate-bold';
    font-size: 11px;
    padding: 7px 0 7px 48px;
    margin: 25px 0 0 0;
    width: 120px;
    border-radius: 0 45px 45px 0px;
    z-index: 1;
    cursor: pointer;
}

.buyNowPopup, .videoPopup {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    max-width: 500px;
    height: auto;
    background: #fff;
    z-index: 1002;
    background: #f8f8f8;
}

.buyNowPopup span, .videoPopup span {
    font-family: 'Interstate-bold';
    font-size: 18px;
    text-align: center;
    padding: 5% 10%;
}

.buyNowPopup img, .videoPopup img {
    width: 50%;
    float: left;
    padding: 5%;
}

/* end mobile product detail page */

/* mobile product category page */

.prodArtTileContOuter{
    background: #F1F7F7;
    width: 100%;
    float: left;
}

.prodArtTileCont{
    display: block;
    width: 100%;
    height: auto;
    padding: 10px;
    margin-top: 30px;
}

.prodSelectCont h2, .prodTileCopyCont h2, .prodArtTileCont h2{
    font-family: 'Interstate-blackCondensed';
}

.prodTile{
    background: #fff;
    padding: 20px;
    margin-bottom: 10px;
    transition: all .2s;
    float: left;
    width: 100%;
}

.prodTileCopyCont{
    display: block;
    width: 100%;
    height: auto;
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
}

h1, h2, h3{
    color:#00583C;
    line-height: 1.1;
}

.archive-meta{
    border-left: 5px solid #DDE5E2;
    padding-left: 10px;
}

.prodTileImgCont img, .frontArtTileImgCont img{
    display: block;
    margin: 30px auto;
    height: 150px;
    width: auto;
}

.frontArtTileImgCont img{
    width: 100%;
    height: 315px;
    object-fit: cover;
}

.prodSelect iframe{
    position: relative;
    border: 0;
    outline: 0;
    overflow-y: auto;
}

.prodDetFeatVidCont{
    display: block;
    float: left;
    margin: 30px 0;
    background: #00583C;
    color: #fff;
}

.prodDetFeatVidCont span{
    font-family: 'Interstate-regular';
    font-size: 18px;
}

/*.prodDetFeatVidCont span*/

/* end mobile product category page */

/* mobile article category page */

.featuredArtCont{
    position: relative;
    display: block;
    float: left;
    width: 100%;
    clear: both;
    padding-bottom: 8%;
}

.featuredArtCont img{
    width: 100%;
    height: auto;
}

.featArtCopyCont{
    background: #fff;
    width: 90%;
    display: block;
    margin: -80px auto 0;
    padding: 1.5% 3%;
    position: relative;
}

.artTile{
    display: block;
    width: 100%;
    float: left;
    margin: 0 0 20px;
    background: #fff;
}

.artTileImgCont{
    width: 50%;
    float: left;
}

.artTileImgCont img{
    width: 100%;
}

.artTileTitleCont{
    position: relative;
    width: 48%;
    float: right;
    display: block;
}

.artTile h2{
    margin: 6% 0 0;
    padding-left: 2%;
    font-size: 15px;
}

.artTile p{
    display: block;
    width: 100%;
    clear: both;
    line-height: 1.8;
    padding: 3% 3% 0;
}

.artCatContOuter .wrapper{
    width: 100%;
}

.mustReadCont, .trendingCont{
    display: block;
    float: left;
    width: 100%;
    margin: 0 0 10px 0;
}

img.artRecTitleImg{
    display: block;
    width: 30px;
    margin: 0 auto;
}

.recArtCont{
    display: block;
}

.recArtCont span{
    display: inline-block;
    float: left;
}

.artRecTitleCont span:last-child {
    display: block;
    width: 78%;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 55px;
}

.artRecTitle, .trendingCont .artRecTitle{
    font-weight: bold;
}

.artRecTitle{
    position: relative;
    left: 0px;
    padding: 15px 15px;
    margin-bottom: 5px;
    overflow: hidden;
    color: #D21F3C;
    text-align: center;
    border-bottom: 1px solid #ccc;
}

.artRecRow{
    display: block;
    width: 100%;
    margin: 10px auto;
    position: relative;
    clear: both;
    padding: 10px;
    float: left;
    border-top: 1px solid #F1F7F7;
    background: #fff;
}

span.mustReadNum{
    color: #fff;
    background: #245EAC;
    padding: 9px 14px;
    border-radius: 30px;
    margin: 0 2% 0 0;
}

.trendingCont span.mustReadNum{
    background: #d21f3c;
}

.single-post .artCopyCont a.button{
    background: #00583C;
    color: #fff;
    margin: 30px auto;
    border-radius: 4px;
    font-style: normal;
    text-decoration: none;
    text-align: center;
    padding: 20px;
    display: block;
    width: 100%;
    max-width: 270px;
    font-family: "Futura Std Bold";
}

.single-post .artCopyCont a.button:hover{
    text-decoration: underline;
}

article p.artLearn{
  margin: 30px 0 0;
  text-align: center;
}

/* end mobile article category page */


/* mobile article page */

.artTitleBG{
    display: none;
}

img.postArtImg, img.article{
    position: absolute;
    top: 45px;
    left: 0px;
}

.single-post h1, .single-recipe h1, .single-ingredient h1{
    display: block;
    margin: 48% 0 5% 0;
    text-align: center;
    font-size: 22px;
    padding: 0 5%;
}


.single-post .artCopyCont, .single-recipe .artCopyCont, .single-ingredient .artCopyCont{
    display: block;
    width: 90%;
    margin: 0 auto 40px;
    padding-bottom: 40px;
    border-bottom: 1px solid #00583C;
}

.single-post .artCopyCont a{
    font-style: italic;
    color: #00583C;
    text-decoration: underline;
}

.artVidCont{
    position: relative;
    background: #00583C;
    padding: 0 5% 40%;
    margin: 15% 0 25%;
    height: 0px;
}

.artSocContMob{
    display: inline-block;
    width: 100%;
    margin: 15px 0 0;
    height: 80px;
}

.prodVidCont{
    background: #00583C;
    width: 90%;
    float: right;
}

span.quote{
    position: relative;
    display: block;
    font-size: 17px;
    width: 70%;
    max-width: 500px;
    margin: 50px auto;
}

span.quote:before{
    content: '';
    background: url('<?php echo get_template_directory_uri(); ?>/img/openQuote.png') no-repeat;
    width: 20px;
    height: 15px;
    background-size: 20px;
    left: 0px;
    top: -25px;
    position: absolute;

}

span.quote:after{
    content: '';
    background: url('<?php echo get_template_directory_uri(); ?>/img/closeQuote.png') no-repeat;
    width: 20px;
    height: 15px;
    background-size: 20px;
    right: 0px;
    bottom: -25px;
    position: absolute;
}


.artDetailRelArtCont h2.relArtTileTitle{
    text-align: center;
    font-size: 26px;
    margin-bottom: 40px;
}

.artDetailRelArtCont .artTile p{
    display: block;
}

.readMoreSpanCont{
    display: block;
    width: 100%;
}

.artDetailRelArtCont span{
    color: #fff;
    background: #00583C;
    display: block;
    padding: 7px 10px;
    margin: 0 auto;
    float: none;
    text-align: center;
    width: 110px;
    font-family: "Futura Std Bold";
    border-radius: 4px;
}


/* end mobile article page */

/* mobile A to Z page */

.aTozRow{
    display: none;
    width: 100%;
    clear: both;
    overflow: hidden;
    height: auto;
}

.aTozRow:first-child{
    display: block;
}

.aTozLetBtnCont{
    display: none;
}

.aTozLetterCont{
    position: relative;
    left: 0px;
    width: 105.7%;
    margin: 1px 0 0 -3%;
    padding: 10px 15px;
    overflow: hidden;
    color: #fff;
    background-color: #00583C;
}

.aTozLetterCont span{
    display: inline-block;
}

.aTozLetterCont span:last-child:before{
    content: '- ';
}

.aTozLetterCont span:last-child:after{
    content:
}

/* end mobileA to Z page */

/* mobile search results page  */

.searchSlideContOuter{
    float: right;
    width: 100%;
    clear: both;
}

.searchSlideCont{
    display: block;
    float: left;
    width: 100%;
    height: auto;
    padding-bottom:10px;
}


.searchRow{
    display: block;
    clear: left;
    float: left;
    border-top: 1px solid #00583C;
    padding: 20px 0;
    width: 100%;
    min-height: 150px;
}

.serachRowCopyCont{
    display: block;
    float: left;
    width: 55%;
    padding: 2%;
}

.searchRowImgCont{
    display: block;
    float: left;
    width: 45%;
}

.searchRowImgCont img{
    display: block;
    width: auto;
    height: 100px;
    margin: 0 auto;
}

.serachRowCopyCont h2{
    margin-top: 0;
    font-size: 16px;
}

.searchPagerCont, .searchPagerContProd, .searchPagerContArt{
    display: block;
    float: left;
    width: 100%;
    position: relative;
    z-index: 100;
}

.cycle-sentinel{
    height: auto;
}

.searchSlide{
    margin-bottom: 40px;
    float: left;
    height: auto;
    width: 100%;
}

.searchPager{
    display: inline-block;
    width: 75%;
    clear: both;
    z-index: 1;
}

.searchPagerCont span, .searchPager span, .searchPagerContProd span, .searchPagerContArt span {
    float: left;
    color: #00583C;
    cursor: pointer;
    margin: 4px;
    padding: 5px 0;
    transition: all .2s;
    width: 27px;
    text-align: center;
}

.searchPagerCont span.cycle-pager-active, .searchPagerCont span:hover,
.searchPager span.cycle-pager-active, .searchPager span:hover{
    color: #fff;
    background: #00583C;
}

.searchPagerCont span.prev, .searchPagerContProd span.prev, .searchPagerContArt span.prev{
    background: url(<?php echo get_template_directory_uri(); ?>/img/leftArrowGreen.png)no-repeat;
    float: left;
    height: 20px;
    margin-top: 9px;
}

.searchPagerCont span.next, .searchPagerContProd span.next, .searchPagerContArt span.next{
    background: url(<?php echo get_template_directory_uri(); ?>/img/rightArrowGreen.png)no-repeat;
    background-position: right;
    float: right;
    height: 20px;
    margin-top: 9px;
}

form.resultsSearch{
    margin: 30px 0;
}

form.resultsSearch input, form.map input{
    border: 0;
    outline: 0;
    font-size: 20px;
    margin: 0 auto;
    color: #00583C;
    background: #d4f1ea;
    width: 90%;
    display: block;
    padding: 15px 0;
    text-align: center;
}

.search-submit{
    width: 90%;
    display: block;
    margin: 0 auto;
    color: #fff;
    background: #00583C;
    border: 0;
    outline: 0;
    padding: 15px 0;
    cursor: pointer;
    transition: all .2s;
    font-family: "Futura Std Bold";
}

form.resultsSearch .search-submit:hover{
    opacity: .9;
}

.searchSlideContOuter h3{
    text-align: center;
    margin-top: -10px;
}

.prodOrArtBtnCont{
    display: none;
}

/* end mobile search results page  */

/*  mobile front page */

/*.bannerSection{
    position: relative;
    display: block;
    width: 100%;
    float: left;
    height: auto;
    padding-bottom: 20px;
    }*/

    .home .bannerSection{
        margin-bottom: 25px;
    }

    .home .healthSection .bannerSection{
        display: none;
    }

    .bannerImgBG{
        display: block;
        height: 50%;
        width: 100%;
        position: absolute;
        /*background: linear-gradient(to right bottom, #00AA5D 42%, #fff 42.2%);    */
        z-index: 1;
    }

    .bannerImgBG img.leafBG{
        width: 100%;
        margin: 100px 0 0 0;
    }

    .bannerCopyBG{
        display: none;
    }

    .bannerImg{
        width:  100%;
        float: left;
        position: relative;
        z-index: 2;
    }

    img.leafBG{
        top: 21%;
        position: absolute;
        width: 100%;
    }

    .bannerImg img, .bannerImg svg{
        display: block;
        margin: 60px auto -30px;
        width:  70%;
        max-width: 260px;
    }

    .fnfy.frontPageBanner {
        height: 530px;
        position: relative;
        background: url(<?= get_template_directory_uri(); ?>/img/for-nature-for-you/NOWN_HomePage_Banner_Mobile.jpg) no-repeat center/auto 530px;
    }

    .effervescent.frontPageBanner {
        height: 500px;
        position: relative;
        background: url(<?= get_template_directory_uri(); ?>/img/effervescent/NOWN_HomePage_Banner_Mobile.jpg) no-repeat right center/auto 500px;
    }

    @media only screen and (min-width: 480px) {
        .fnfy.frontPageBanner {
            background: url(<?= get_template_directory_uri(); ?>/img/for-nature-for-you/NOWN_HomePage_Banner_Tablet.jpg) no-repeat center/auto 530px;
        }
        .effervescent.frontPageBanner {
            background: url(<?= get_template_directory_uri(); ?>/img/effervescent/NOWN_HomePage_Banner_Tablet.jpg) no-repeat right center/auto 500px;
        }
    }
    @media only screen and (min-width: 768px) {
        .fnfy.frontPageBanner {
            background: url(<?= get_template_directory_uri(); ?>/img/for-nature-for-you/NOWN_HomePage_Banner_Laptop.jpg) no-repeat center/auto 530px, #000;
        }
        .effervescent.frontPageBanner {
            background: url(<?= get_template_directory_uri(); ?>/img/effervescent/NOWN_HomePage_Banner_Laptop.jpg) no-repeat right -140px center/auto 500px, #021510;
        }

        body .GAfooterBtn{
            min-width: unset;
        }

    }

    @media only screen and (min-width: 1280px) {
        .fnfy.frontPageBanner {
            height: 530px;
            background: url(<?= get_template_directory_uri(); ?>/img/for-nature-for-you/NOWN_HomePage_Banner_Desktop.jpg) no-repeat center/auto 530px, linear-gradient(to right, #000 0%, #000 calc((100% - 1140px) / 2), rgba(0,0,0,0) calc((100% - 1140px) / 2),  rgba(0,0,0,0) calc(100% - (100% - 1140px) / 2), #000 calc(100% - (100% - 1140px) / 2), #000 100%);
        }
        .effervescent.frontPageBanner {
            height: 500px;
            background: url(<?= get_template_directory_uri(); ?>/img/effervescent/NOWN_HomePage_Banner_Desktop.jpg) no-repeat center/auto 500px, linear-gradient(to right, #021510 0%, #021510 calc((100% - 1140px) / 2), rgba(0,0,0,0) calc((100% - 1140px) / 2),  rgba(0,0,0,0) calc(100% - (100% - 1140px) / 2), #021510 calc(100% - (100% - 1140px) / 2), #021510 100%);
        }
    }

    .frontPageBanner a{
        display: block;
        width: 100%;
        float: left;
        position: relative;
        z-index: 1;
    }

    .bannerCopy{
        width: 100%;
        float: right;
        position: relative;
        z-index: 2;
        background: #fff;
        margin: 30px 0 20px;
    }

    .bannerCopy span.bannerTitle{
        color: #D22730;
        text-align: center;
    }

    .bannerCopy p{
        text-align: center;
        font-size: 24px;
        line-height: 1;
        padding: 0;
        margin: 20px 0 -20px;
    }

    .bannerCopyCont{
        display: block;
        width: 90%;
        margin: 0 auto;
    }

    .bannerCopyContInner{
        position: relative;
        margin: 40px 0 20px 0;
        display: block;
        clear: both;
    }

    img.mobileBanner{
        width: 100%;
        height: auto;
    }


    span.bannerTitle, .healthSection span.bannerTitle {
        font-size: 30px ;
        text-align: left ;
        font-weight: normal;
        width: 100%;
    }

    .healthSection span.bannerTitle{
        margin-top: 20px;
    }

    p.bannerCopy{
     margin-bottom: 0;
 }

 span.bannerTag, h1.bannerTag{
    width: 80%;
    font-weight: bold;
    display: block;
    margin: 0 auto;
    text-align: center;
    clear: both;
    font-size: 19px;
    color: #00583C
}

span.bannerTag p{
    font-size: 11px;
    width: 80%;
    margin: 25px auto;
}

.bannerBtn, .howToBuyCont span, .ourStoryLower a, .afonRowCopyCont a, .afonCopy a, .mapInfoRow a, a.getDirections, .bannerProdBtn, span.contactSubmit, span.afonSignup{
    position: relative;
    display: block;
    clear: both;
    width: 100%;
    margin: 20px auto 0;
    color: #fff;
    background: #00583C;
    border-radius: 4px;
    padding: 8px 0;
    text-align: center;
    text-transform: uppercase;
    cursor: pointer;
    max-width: 350px;
    font-size: 16px;
    letter-spacing: 1px;
}

.howToBuyCont span {
    font-family: 'Futura Std Bold';
    transition: background-color .3s;
    padding: 18px 0;
}

.howToBuyCont span:hover {
    background: #002519;
}

.bannerBtn {
    font-family: 'Futura Std Bold';
    transition: background .3s;
    color: #00583C;
    background: #fff;
}

.bannerBtn:hover {
    background: #F1F7F7;
}

.bannerBtn.greenBtn {
    color: #fff;
    background: #00583c;
}

.bannerBtn.greenBtn:hover {
    background: #002519;
}

.ForNatForGreenBtn{
    margin-top: 30px !important;
    margin-left: 2% !important;
    margin-right: 2% !important;    
}


@media only screen and (min-width: 768px) {
    .bannerBtn {
        display: inline-block;
        width: auto;
        min-width: 200px;
        max-width: unset;
    }
}



.home .bannerBtn{
    font-family: 'Futura Std Bold';
    font-weight: normal;
    margin: 60px auto;
}

a.getDirections{
    float: left;
    margin-bottom: 10px;
}

.bannerProdBtn{
    width: 90%;
    margin: 0 auto;
    float: none;
}

.bannerProdBtn span{
    text-transform: none;
    border: none;
    width: 100%;
    padding: 0;
}

.qualitySection a.bannerBtn{
    margin-bottom:  30px;
    width:  90%;
    max-width: 300px;
    clear:  both;
}

span.footerSub{
    width: 100%;
    text-align: center;
    clear: both;
    padding: 11px 0 0;
    cursor: pointer;
}

span.contactSubmit{
    margin: -4px auto 0;
}

.howToBuyCont span{
    margin: 20px auto 35px;
}

.prodDetInfoRow p{
    font-size: 14px;
}

span.afonSignup{
    display: block;
    max-width: 250px;
    width: 80%;
    margin: 0 auto 30px;
    float: none;
    clear: both;
}

.mapInfoRow a{
    margin-top: 0;
}

.home .prodDetPackCont{
    background: linear-gradient(to right bottom, <?=   isset($catColorList[$currCat]) ? $catColorList[$currCat] : '#1A705B' ?>  48%, #fff 48.2%);
    height: 100%;
}

.home .prodDetTop{
    margin: -15px 0 0 0;
}

.home .prodDetPackCont img{
    display: block;
    margin: 25px auto 0;
    height: 200px;
    width: auto;
}

.home .prodDetTopCopyCont h1{
    margin: 15px 0;
    text-align: center;
    display: block;
    float: left;
    width: 100%;
    font-size: 23px;
}

.home .prodDetTopCopyCont p{
    text-align: center;
    display: block;
    clear: both;
    width: 90%;
    margin: 15px auto;  
}

/*.prodHideShow span:after, .howToBuyCont span:after, .ourStoryLower a:after, .mapInfoRow a:after{
    content: "";
    background: url('<?php echo get_template_directory_uri(); ?>/img/whiteRightArrow.png') no-repeat;
    background-size: 8px;
    width: 8px;
    height: 12px;
    position: absolute;
    right: 14px;
    top: 11px;   
    }*/

    .howToBuyCont span:after{
        top: 9px;
    }

    .seasonImgCont, .healthyImgCont, .diffImgCont, .qualityTile{
        display: block;
        width: 100%;
        float: left;
        text-align: center;
        padding: 50px 0 30px;
    }

    .qualityTile .qualityImgWrapper {
        padding: 0 15px;
        position: relative;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: auto;
        max-width: 100%;
    }

    .qualityTile img{
        width: 87px;
        max-height: 130px;
    }

    .qualityTile .qualityContWrapper {
        flex-basis: 0;
        -ms-flex-positive: 1;
        flex-grow: 1;
        max-width: 100%;
        padding: 10px 15px 0;
    }

    .qualitySection span a{
        font-family: "Futura Std Bold";
        font-size: 16px;
        font-weight: bold;
        color: #005740;
        text-transform: uppercase;
        text-decoration: underline;
        letter-spacing: 1px;
        clear: both;
    }

    .qualitySection span a:hover{
        text-decoration: none;
    }

    .qualitySection p{
        font-size: 14px;
        line-height: 1.3;
        margin-bottom: 0;
    }

    .prodSection{
        display: block;
        float: left;
        width: 100%;
        padding-bottom: 30px;
        background: #F5F5F5;
    }

    .prodSelect{
        display: block;
        float: left;
        width: 100%;
        min-height: 400px;
        background: #F1F7F7;
    }

    span.prodSectTitle, .healthSection span{
        font-size: 16px;
        font-weight: bold;
        color: #5484A4;
        width: 70%;
        text-align: center;
        margin: 0 auto;
        clear: both;
    }

    .home .prodTile{
        float: left;
        width: 100%;
    }

    .home .hiddenTiles{
        display: none;
    }

    .prodHideShow{
        position: relative;
        display: block;
        float: left;
        width: 100%;
        cursor: pointer;
        padding: 60px 0 30px;
    }

    .prodHideShow span{
        text-align: center;
        font-weight: bold;
        margin: 0 auto;
    }

/*.prodHideShow span:after, .prodHideShow span.hide:after{
    background: url('<?php echo get_template_directory_uri(); ?>/img/downArrowGreen.png') no-repeat;
    width: 14px;
    background-size: 14px;
    right: 50px;
    top: 5px;
    position: absolute;
    }*/

    .prodHideShow span.hide:after{
        background: url('<?php echo get_template_directory_uri(); ?>/img/upArrowGreen.png') no-repeat;
        width: 14px;
        background-size: 14px;
        right: 50px;
        top: 5px;
        position: absolute;
    }

    .healthSection{
        display: block;
        margin: 0 0 40px;
    }

    .healthSectionTitle{
        display: block;
        clear: both;
        margin: 0 0 40px;
    }

    .qualitySection{
        display: block;
        float: left;
        width: 100%;
        background: #EAEEEF;
    }

    .qualityTile {
        width: 100%;
        float: left;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        -ms-flex-align: center;
        align-items: center;
        text-align: left;
        padding: 20px 0;
    }

    @media only screen and (min-width: 768px) {
        .qualityTile {
            float: none;
            width: 80%;
            margin: 0 auto;
        }
    }

    @media only screen and (min-width: 1024px) {

        .prodDetLeft{
            float: right;
        }


        .qualityTile {
            float: left;
            padding: 50px 0 30px;
            width: 33.33%;
            margin: 0;
            -ms-flex-align: start;
            align-items: start;
        }

        body .GAfooterBtn{
            width: 250px;
            float:  right;
            clear: none;
        }
    }

    .newsletterSection {
        background: radial-gradient(92.76% 92.76% at 50% 7.24%, #24513D 0%, #173929 62.13%, #06170A 100%);
        color: white;
    }

    .newsletterSection .wrapper {
        padding-left: 15px;
        padding-right: 15px;
    }

    .newsletterSection h2 {
        color: #fff;
        font-size: 24px;
        line-height: 30px;
    }

    .newsletterContRow {
        display: -ms-flex;
        display: -webkit-flex;
        display: flex;
        flex-wrap: wrap;
        margin-left: -15px;
        margin-right: -15px;
        align-items: center!important;
    }

    .newsletterContCol {
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
        width: 100%;
        padding-right: 15px;
        padding-left: 15px;
    }

    .newsletterContCol .newsletterContColLeft {
        padding-top: 40px;
        padding-bottom: 40px;
        padding-right: 140px;
        background: url(https://naturesown2016.schweb.net.au/wp-content/themes/naturesown/img/newsletter-plant.png) no-repeat right 20px center/auto 60%;
        background-position: bottom right;
    }

    .GApartnership .newsletterContCol .newsletterContColLeft{
        background: url();
        width:100%;
        padding-right: unset;
    }

    .newsletterColRight {
        padding-left: 0;
        padding-right: 0;
        position: relative: ;
    }

    .newsletterForm {
        background: rgba(0, 0, 0, 0.35);
        padding: 15px;
    }

    @media only screen and (min-width: 768px) {
        .newsletterSection h2 {
            font-size: 32px;
            line-height: 42px;
        }

        .newsletterContCol {
            -ms-flex: 0 0 50%;
            flex: 0 0 50%;
            max-width: 50%;
        }

        .newsletterContCol .newsletterContColLeft {
            padding-top: 60px;
            padding-bottom: 60px;
            padding-right: 40%;
        }

        .newsletterColRight {
            padding-left: 15px;
            padding-right: 15px;
        }

        .newsletterForm {
            border-radius: 4px;
        }
    }

    @media only screen and (min-width: 1024px) {
        .newsletterSection h2 {
            font-size: 32px;
            line-height: 42px;
        }

        .newsletterContCol .newsletterContColLeft {
            padding: 30px 0 100px;
            padding-right: 40%;
        }
    }

    .prodSelectCatIframeBG{
        position: absolute;
        display: block;
        width: 100%;
        height: 370px;
        background: #1FAE66;
    }

    iframe#prodSelectFrame{        
        min-height: 400px;
    }

    span.seeMore{
        background: url(<? echo get_template_directory_uri(); ?>/img/downArrowGreen.png) no-repeat;
        background-size: 12px;
        background-position: 100% 7px;
        width: 210px; 
    }

    span.seeFewer{
        display: none;
        background: url(<? echo get_template_directory_uri(); ?>/img/upArrowGreen.png) no-repeat;
        background-size: 12px;
        background-position: 100% 7px;
        width: 210px; 
    }

    .seasonImgCont img{
        width: 100px;
    }



    /* end mobile front page */


    /* mobile healthy living page */

    .centeredTitle h1{
        text-align: center;
        font-size: 30px;
        padding: 10px 0;
    }

    .heaLivRow{
        position: relative;
        display: block;
        float: left;
        width: 100%;
        padding: 20px 0;
    }

    .heaLivFeatCont{
        padding: 60px 0;
    }

    .heaLivRowBGColor{
        position: absolute;
        bottom: 0px;
        width: 100%;
        height: 70%;
        display: none;
    }

    .heaLivFeatCont .heaLivRowBGColor{
        background: #F1F7F7;
        height: 100%;
    }

    .heaLivHeaAdv .heaLivRowBGColor{
        background: #D9E6F0;
    }

    .heaLivWellBeing .heaLivRowBGColor{
        background: #D9E5E3;
    }

    .heaLivStories .heaLivRowBGColor{
        background: #EEDFE2;
    }

    .heaLivRecipes .heaLivRowBGColor{
        background: #DEDCEB;
    }

    .heaLivNews .heaLivRowBGColor{
        background: #E1E9E9;
    }



    .heaLivTile{
        background: #fff;
        display: block;
        width: 100%;
        margin: 0 auto 0;
    }

    .heaLivTileCopyCont{
        padding: 20px;
    }

    .heaLivRowTitleCont{
        display: block;
        width: 100%;
        float: right;
        margin-bottom: 20px;
    }

    .heaLivTileCont{
        display: block;
        float: left;
        width: 100%;
        overflow-x: hidden;
    }

    .heaLivTileImgCont img{
        width: 100%;
    }

    .heaLivSlideCont{
        display: block;
        float: left;
    }

    .heaLivRow .cycle-slide{

    }

    .heaLivRowTitleCont img{
        display: block;
        float: left;
        width: 30px;
        height: auto;
        position: relative;
        margin: 0 0 0 7px;
    }

    .heaLivStories .heaLivRowTitleCont img{
        bottom: -10px;
    }

    .heaLivNews .heaLivRowTitleCont img{
        bottom: -15px;
    }

    .heaLivRowTitleCont h3{
        padding-left: 45px;
    }

    .heaAdvTitle{
        border-bottom: 1px solid #285AA9;
    }

    .heaAdvTitle h3{
        color: #285AA9;
    }

    .heaLivWellBeing .heaAdvTitle h3{
        color: #00583C;
    }

    .heaLivWellBeing .heaAdvTitle{
        border-bottom: 1px solid #00583C;
    }

    .heaLivStories .heaAdvTitle h3{
        color: #D02038;   
    }

    .heaLivStories .heaAdvTitle{
        border-bottom: 1px solid #D02038;
    }

    .heaLivRecipes .heaAdvTitle h3{
        color: #503393;   
    }

    .heaLivRecipes .heaAdvTitle{
        border-bottom: 1px solid #503393;
    }

    .heaLivNews .heaAdvTitle h3{
        color: #5F6B71;   
    }

    .heaLivNews .heaAdvTitle{
        border-bottom: 1px solid #5F6B71;
    }

    .heaLivTilePagerCont{
        position: relative;
        display: block;
        float: left;
        width: 100%;
    }

    .heaLivTilePager{
        width: 54px;
        margin: 0 auto;
    }

    .heaLivTilePager span{
        float: left;
        font-size: 25px;
        padding: 0 4px;
        color: #b5d6ce;
        cursor: pointer;
    }

    .heaLivTilePager span.cycle-pager-active{
        color: #00583C;
    }

    span.heaLivSeeMore{
        width: 100%;
        display: block;
        font-family: 'Interstate-BlackCondensed';
        text-align: center;
        position: relative;
        float: left;
        padding: 20px;
    }

    span.heaLivSeeMore img{
        margin: 5px 0 -4px 10px;
    }

    /* end mobile healthy living page */

    /* mobile our story page */

    .centeredTitle span{
        display: block;
        width: 90%;
        margin: 0 auto 35px;
        text-align: center;
    }

    .ourStoryTop{
        display: block;
        float: left;
        background: #20AE65;
        height: 0;
        padding-bottom: 59%;
        width: 100%;
    }

    .ourStoryTop .vidCont{
        width: 85%;
        margin: 1.5% auto 0;
    }

    .history{
        display: block;
        width: 100%;
        float: left;  
        padding: 30px 0; 
    }

    .ourStoryImgCont{
        display: block;
        width: 100%;
    }

    .ourStoryImgCont img{
      display: block;
      margin: 0 auto;
      width: 50px;
  }

  .history span{
    display: block;
    width: 90%;
    margin:0 auto;
    text-align: center;
}

#cycle-1{
    height: 220px;
}

.histSlideCont{
    display: block;
    float: left;
    width: 100%;
    height: auto;
}

.histSlide{
    display: block;
    float: left;
    width: 100%;
    height: 200px;
}

.histSlideBG{
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
}

.sustainabilityPlanSection .histSlideBG{
    background: url(<? echo get_template_directory_uri(); ?>/img/for-nature-for-you/leafBg.svg) no-repeat center/100px auto;
}

.histSlideBG span{
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    text-align: center;
    font-family: 'Futura Std Bold';
    font-size: 110px;
    opacity: .1;
}

.histSlideCopy p{
    position: absolute;
    top: 50%;
    transform: translateY(-57%);
    text-align: center;
    padding: 11%;
    font-size: 16px;
    font-family: 'interstate-regular';
    width: 100%;
}

.sustainabilityPlanSection .histSlideCopy p{
    font-family: Arial, sans-serif;
    color: #444;
}

#cycle-2{
    margin-top: 30px;
    z-index: 150;
}

.cycle-2BG{
    position: relative;
    width: 66%;
    height: 22px;
    border-bottom: 2px solid #00583C;
    display: block;
    margin: -64px auto 20px;
}

#cycle-2 span{
    text-align: center;
    padding-bottom: 25px;
    opacity: .4 !important;
    cursor: pointer;
}

#cycle-2 span.sliderYear{
    padding-top: 30px;
    opacity: 1 !important;
}

#cycle-2 span.sliderYear span {
    opacity: .4 !important;
    font-family: "Futura Std Bold";
    transition: transform 0.5s ease-in-out;
}

#cycle-2 span.sliderYear.cycle-slide-active span{
    opacity: 1 !important;
    transform: scale(3.5) translateY(5px);
}


#cycle-2 span.prev, #cycle-2 span.next, .sourceToShelfBtns .next, .sourceToShelfBtns .prev, .afonPrevNextCont .prev, .afonPrevNextCont .next {
    position: absolute;
    opacity: 1 !important;
    border: 2px solid;
    border-radius: 45px;
    width: 42px;
    font-size: 25px;
    font-family: 'interstate-regular';
    line-height: 1;
    background: #fff;
}

#cycle-2 span.prev{
    padding: 6px 14px 6px 13px;
    left: -20%;
}

#cycle-2 span.next{
    padding: 6px 11px 6px 14px;
    right: -20%;
}

#cycle-2 span.cycle-slide-active{
   opacity: 1 !important;
}

#cycle-2 span.cycle-slide-active:after, #cycle-2 span.cycle-slide:after{
    position: relative;
    display: block;
    content: "\2022";
    font-size: 31px;
    bottom: -1px;
    width: 100%;
}

.sustainabilityPlanSection #cycle-2 span.cycle-slide-active:after {
    transform: scale(3);
}

.cycle-carousel-wrap { 
    margin-left: 33% !important;
}

.whatWeDo, .sourceToShelf{
    display: block;
    float: left;
    width: 100%;
    background: #F1F7F7;
    padding: 30px 0 0;
}

.sourceToShelf{
    background: #fff;
}

p.whyWeDoCopyCont, p.sourceToShelfCopy{
    width: 90%;
    margin: 0 auto 30px;
}

.sourceToShelfSlideCont{
    padding: 0 0 40px;
    margin-top: 50px;
}

.sourceToShelfSlide{
    width: 100%;
}

.sourceToShelfSlide img{
    display: block;
    margin: 0 auto;
}

.sourceToShelfSlide span{
    text-align: center;
    font-family: 'interstate-regular';
    font-weight: bold;
    width: 80%;
    margin: 0 auto;
}

.sourceToShelfSlide span.slideNum{
    display: block;
    width: 20px;
    text-align: center;
    border: 2px solid #00583C;
    border-radius: 10px;
    margin: 15px auto 10px;
    font-weight: bold;
}

.sourceToShelfBtns, .byNatureSlideBtns{
    width: 85%;
    display: block;
    position: relative;
    margin: 0 auto;
    top: 75px;
    z-index: 150;
}

.byNatureSlideBtns{
    top: -126%;
}

.sourceToShelfBtns .next,
.sourceToShelfBtns .prev,
.byNatureSlideBtns .next,
.byNatureSlideBtns .prev{
    border: none;
    font-family: 'interstate-regular';
    cursor: pointer;
    width: auto;
    background: none;
    padding: 15px;
}

.byNatureSlideBtns span{
    font-size: 33px;
    color: #fff;
    background: #00583C !important;
    border: 2px solid #00583C !important;
    border-radius: 20px;  
}

.byNatureSlideBtns span:hover{
    opacity: .8;
}

.sourceToShelfBtns .next, .byNatureSlideBtns .next{
    position: absolute;
    right: 0;
    text-align: right;
}

.sourceToShelfBtns .prev, .byNatureSlideBtns .prev{
    position: absolute;
    left: 0;
}

.byNatureSlideBtns .next{
    padding: 0 10px 0 13px;
}

.byNatureSlideBtns .prev{
    padding: 0 12px;
}

.byNature{
    display: block;
    float: left;
    width: 100%;
    background: #F1F7F7;
    padding: 30px 0;
}

.byNature p{
    width: 90%;
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
}

.byNatureSlideCont{
    display: block;
    height: 140px;
    padding: 40px 0;
    margin: 60px auto 0;
}

.byNatureSlideCont .cycle-carousel-wrap{
  margin-left: none !important;
}

.byNatureSlideCont .cycle-slide{
    position: absolute;
    bottom: 0px;
}

.byNatureSlideCont .byNatureSlideInner{
    display: block;
    width: 80%;
    height: auto;
    margin: 0 auto;
    opacity: .2;
    transition: .5s all; 
}

.byNatureSlideCont .cycle-slide img{
    display: block; 
    margin: 0 auto; 
    width: auto;
    height: 70px;   
}

.byNatureSlideCont .cycle-slide span{
    width: auto;
    float: left;
    color: #fff;
    background: #00583C;
    padding: 5px 10px;
    margin: -45% 0 0;
    z-index: 1;
    position: relative;
    font-size: 11px;
}

.byNatureSlideCont .cycle-slide-active img{
    height: 90px;
}

.byNatureSlideCont .cycle-slide-active .byNatureSlideInner{
    width: 100%;
    opacity: 1;     
}

.evidence{
    display: block;
    width: 100%;
    float: left;
    padding: 30px 0;
}

.evidence h3{
    width: 80%;
    margin: 20px auto;
}

.evidence p{
    width: 80%;
    margin: 0 auto;
    text-align: center;
}

.evidence img.ourStoryRange{
    display: block;
    width: 80%;
    max-width: 400px;
    margin: 45px auto 0;
}

.ourStoryLower{
    width: 100%;
    float: left;
    margin: 0 auto;
    padding-bottom: 30px;
}

.ourStoryLowerInner{
    display: block;
    width: 80%;
    margin:0 auto;
}

.ourStoryLower a{
    border: 1px solid #00583C;
    font-family: "Futura Std Bold";
    padding: 18px 0;
    transition: background-color .3s;
}

.ourStoryLower a:hover {
    background: #002519;
}

.ourStoryLower a.white{
    background: #fff;
    border: 1px solid #00583C;
}

.ourStoryLower a.white:hover {
    background: #f1f7f7;

}

/*.ourStoryLower a.white:after{*/
    /*    content: "";*/
    /*    background: url('<?php echo get_template_directory_uri(); ?>/img/rightArrowGreen.png') no-repeat;*/
    /*    background-size: 7px;*/
    /*    width: 8px;*/
    /*    height: 12px;*/
    /*    position: absolute;*/
    /*    right: 14px;*/
    /*    top: 10px;   */
    /*}*/

    /* end mobile our story page */

    /* mobile contact page */

    p.contactUs{
        width: 90%;
        max-width: 560px;
        margin: 40px auto;
        text-align: center;
    }

    .contactTile{
        display: block;
        width: 90%;
        background: #F6F6F6;
        margin: 0 auto 5%;
        height: 400px;
    }

    .contactTile:hover{
        box-shadow: 2px 2px 6px #ccc;
    }

    .contactTile h3{
        font-family: 'interstate-regular';
        color: #034EA1;
        text-align: center;
        padding: 40px 0 10px 0;
        display: block;
        margin: 0 auto 60px;
        width: 80%;
        border-bottom: 1px solid #ccc;
    }

    .contactTile img{
        display: block;
        margin: 10px auto 50px;
        padding: 20px 0 0 0;
    }

    .contactTile span{
        font-family: 'interstate-regular';
        font-weight: bold;    
        text-align: center;
    }

    .signupContactPage{
        display: block;
        position: relative;
        transform: translate(0, 0);
        top: 0;
        left: inherit;
        margin: 0 auto 80px;
    }

    .signupContactPage .popupClose{
        display: none;
    }

    /* end mobile contact page */


    /* mobile afon page */

    .popupBG, .afonVidContOuter .vidCont, .popupClose{
        display: none;
    }

    .popupBG{
        position: fixed;
        top: 0;
        width: 100%;
        height: 100%;
        background: #000;
        opacity: .8;
        z-index: 1001;
    }

    .afonVidContOuter{
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 100%;
        z-index: 1002;
        background: #000;
    }


    .afonsignUpCont{
        position: relative;
        display: block;
        width: 100%;
        float: left;
        height: auto;
    }

    .afonRowsCont{
     position: relative;
     display: block;
     height: auto;
     float: left;
     width: 100%;
     clear: both;
     margin-top: -20px;
 }

 .afonRow{
     margin-bottom: 25px;
     display: block;
     float: left;
     width: 100%;
 }

 .afonRowVidImgCont, .afonRowCopyCont{
    position: relative;
    width: 100%;
    float: left;
    height: 100%;
}

.afonRowVidImgCont{
    cursor: pointer;
}

.afonRowVidImgCont img{
    display: block;
    margin: 0 auto;
    width: 100%;
}

.afonTileRight{
    float: right;
    clear: right;
}

.afonCopy{
    display: block;
    width: 90%;
    margin: 0 auto;
}

.afonCopy img{
    display: block;
    width: 40%;
    max-width: 140px;
    margin: 30px auto 0;
}

.afonCopy a{
 margin: 30px auto 10px;
 text-align: center;
 position: relative;
}

.afonSlideCopyCont a{
    margin-top: 0;
}

.afonCopy h2{
    float: left;
    width: 100%;
    height: 50px;
    margin-top: 30px;
}

.afonSlideCopyCont h2{
    height: 70px;
}

.afonSlideCopyCont span{
    height: 155px;
    float: left;
}

.afonSlideContOuter{
    position: relative;
    float: left;
}

.afonSlideCont{
    position: relative;
    display: block;
    width: 70%;
    clear: both;
    margin: 0 auto;
    padding-bottom: 1px;
}

.afonPrevNextCont{
    position: relative;
    display: block;
    clear: both;
    width: 95%;
    margin: 0 auto;
    top: 300px;
}

.afonPrevNextCont .prev, .afonPrevNextCont .next{
    color: #fff;
    background: #00583C;
    padding: 7px 10px 7px 13px;
    border-radius: 35px;
    cursor: pointer;
    margin: 0 0 0 -6px;
}

.afonPrevNextCont .next{
    float: right;
    position: relative;
    padding: 7px 10px 7px 16px;
    margin: 0 -6px 0 0;
}

.afonLowerTitleCont{
    display: block;
    width: 100%;
    float: left;
    border-bottom: 1px solid #ccc;
    margin: 50px 0;
}

.afonLowerTitleCont h3{
    padding: 0 0 0 5%;
    text-align: center;
}

.afonSlide{
    position: relative;
    display: block;
    width: 100%;
    float: left;
    margin: 0 auto 30px;
    background: #fff;
}

.afonSlideVidImgCont{
    cursor: pointer;
}

.signupAfonPage{
    display: block;
    position: relative;
    top: 0;
    left: 0;
    transform: translate(0,0);
    margin: 0 auto 5%;
}


.signupAfonPage .popupClose{
    display: none;
}

/* end  mobile afon page */


/* mobile search page */

.allContOuter, .prodContOuter, .artContOuter{
    display: block;
    float: left;
    width: 100%;
    position: fixed;
}

.prodContOuter, .artContOuter, .slideInfo, .searchPagerCont, .searchPagerContProd, .searchPagerContArt{
    display: none;
}

.searchMessage{
    display: block;
    width: 80%;
    margin: 0 auto;
}

.searchMessage h2{
    text-align: center;
}

.slideInfo{
    display: none;
    float: left;
    width: 100%;
    clear: both;
}

.searchSlideCont, .searchSlideContProd, .searchSlideContArt{
    display: block;
    float: left;
    clear: both;
    width: 100%;
}

/* end mobile search page */


/* mobile store finder page */

form.map{
    margin-top: 40px;
}

#mapCanvas{
    width: 100%;
    height: 500px;
    margin: 15px 0 0;
}

.mapInfoRowsCont{
    display: block;
    width: 100%;
    float: left;
}

.mapInfoRow{
    position: relative;
    display: block;
    float: left;
    width: 100%;
    padding: 20px;
    border-bottom: 1px solid #d4f1ea;
}

.countCont{
    position: relative;
    display: block;
    float: left;
    width: 15%;
}

.mapinfoRowCopyCont{
    display: block;
    float: left;
    width: 85%;
}

.mapInfoRow span{
    font-size: 16px;
    font-weight: bold;
}

.countCont span{
    position: relative;
    font-size: 20px;
    text-align: center;
}

.mapResultCount{
    display: none;
    width: 100%;
    background: #00583C;
    color: #fff;
    clear: both;
    margin: 30px auto 10px;
    height: 50px;
}

.mapResultCount span{
    display: block;
    float: left;
    padding: 15px;
    font-size: 17px;
}

.mapResultCount span.count{
    float: right;
    font-size: 15px;
    font-style: italic;
}



.invalidWarn{
    display: none;
    color: red;
}


/* end  mobile store finder page */

/* mobile contact us popup */

.contactUsPopup{
    position: fixed;
    display: none;
    background: #fff;
    width: 100%;
    max-width: 650px;
    height: 514px;
    padding: 20px 30px 0;
    top: 53%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 1px solid #f8f8f8;
    z-index: 1001;
    overflow-y: auto;
}

.contactUsPopup h3{
    text-align: center;
    margin: 0;
    padding: 0 0 15px;
}

.contactUsPopup .formRow{
    position: relative;
    padding: 2px 0;
    float: left;
    clear: both;
    width: 100%;
}

.contactUsPopup .formSubmitRow{
    padding: 27px 0 0 0;
}

.contactUsPopup label{
    display: block;
    color: #00583C;
    width: 100%;
    float: left;
    padding: 5px 0 0;
    font-size: 16px;
    font-weight: bold;
}

.contactUsPopup label[for=optIn]{
    position: absolute;
    top: 10px;
    left: 40px;
    padding: 5px 0 0;
    font-size: 12px;
    width: 90%;
}

.contactUsPopup input[type=text], .contactUsPopup textarea{
    color: #00583C;
    float: left;
    clear: left;
    width: 100%;
    margin: 5px 0 0;
    padding: 6px 0;
    font-size: 16px;
    border: 1px solid #00583C;
}

.contactUsPopup textarea{
    width: 100%;
}

.contactUsPopup input[type=checkbox]{
    width: 30px;
    height: 30px;
    margin: 10px 0 0;
}

.contactUsPopup input[type=submit]{
    position: relative;
    display: block;
    clear: both;
    width: 100%;
    margin: 0px auto 0;
    color: #fff;
    background: #00583C;
    border-radius: 4px;
    padding: 8px 0;
    text-align: center;
    text-transform: uppercase;
    cursor: pointer;
    max-width: 350px;
    font-size: 16px;
    letter-spacing: 1px;
}

.contactUsPopupThankCont{
    display: none;
    position: fixed;
    width: 100%;
    top: 44%;
    z-index: 1001;
    text-align: center;
    font-size: 25px;
}


/* end mobile contact us popup */

/* mobile 404 page */

body.error404 h2{
    text-align: center;
    padding-bottom: 30px ;
}

/* end mobile 404 page */


span.bannerWarn{
    color: #fff;
    position: absolute;
    bottom: 1px;
    font-size: 12px;
    text-align: center;
    width: auto;
}

p.artPubDate{
    text-align: center;
}

.allIngredCont {
    padding-top: 10px;
}

.allIngredCont span ul {
    padding: 0;
}


.allIngredCont span ul > * .fa {
    margin-top: 0;
}

}/* end 1px */

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

    /* mobile product detail page */

    .relProdRow{
        width: 50%;
        padding: 20px;
    }

    .relProdImgCont{
     height: auto;
     margin: 0 0 20px;
 }

 .relProdImgCont img{
    height: 150px;
}

/* end mobile product detail page */

/* mobile category page */

.prodArtTileCont{
    display: block;
    width: 100%;
    height: auto;
    padding: 10px;
    float: left;
}

.prodTile{
    margin: 0px 1.5% 3% 1.5%;
    float: left;
    width: 47%;
    height: auto;
    min-height: 500px;
    display: block;
}

.prodTile:nth-child(even){
    /*margin-right: 0;*/
}

/* end mobile category page */

/* mobile A to Z page */

body.category-all-products .aTozRow .prodTile:last-child {
    margin-right: 0;
}

/* end mobile A to Z page */


/* mobile our story page */

.byNatureSlideCont .cycle-slide img{
    height: 100px
}

.byNatureSlideCont .cycle-slide-active img{
    height: 120px;
}

.byNatureSlideBtns{
    top: -149%;
}

.byNatureSlideCont .cycle-slide span{
    font-size: 16px;
}

/* end mobile our story page */


}/* end 480px */

@media only screen and (min-width:768px) {

    form.mobile, img.mobileBanner, .sourceToShelfBtns, .sourceToShelfSlideCont, .bannerImg img.mobileBannerPackshot, .bannerSection img.leafBG{
        display: none;   
    }

    .bs p.white, .newsletterColRight p.white{
      bottom: 0px;
  }

  .GApartnership .newsletterColRight p.white{
    bottom: 0px;
}

body .GApartnership .headerPartnership {
    position: relative;
    bottom: 10px;
    left: 0px;
    width: auto;
    float: left;
}

/* structure */

main{
    padding-top: 60px;
}

.wrapper {
    max-width: 1140px;
    width: 100%;
    margin: 0 auto;
}

.bannerSection .wrapper{
    position: relative;
}



li{
    margin: 0px 0 0px 2em;
    padding: 5px 0;
}

.breadCrumbCont{
    position: absolute;
    display: block;
    width: 100%;
    margin: 75px 0 0 15px;
    height: 22px;
    z-index: 2;
}

body.category-forces-of-nature .breadCrumbCont{
    display: none;
}

p#breadcrumbs, p#breadcrumbs a, p#breadcrumbs span{
    display: inline-block;
    padding: 0;
    text-transform: capitalize;
    color: #00583C;
    font-size: 12px;
    margin: 0;
}

p#breadcrumbs span.breadcrumb_last{
    position: relative;
    padding: 5px 0 3px;
    font-weight: bold;
    top: 0px;
    line-height: 1.5;
}

body.single-product p#breadcrumbs {
    background-color: #FFF;
    padding: 0 0 0 10px;
}

body.single-product p#breadcrumbs span.breadcrumb_last{
    background: transparent;
}

p#breadcrumbs span.breadcrumb_last:before, p#breadcrumbs span.breadcrumb_last:after{
    content: "";
    display: inline-block;
    /*background: url('<?php echo get_template_directory_uri(); ?>/img/breadcrumbStart.png') no-repeat;*/
    background-size: 10px;
    width: 10px;
    height: 20px;
    position: absolute;
    top: 0;
    left: 0;
}

p#breadcrumbs span.breadcrumb_last:after{
    /*background: url('<?php echo get_template_directory_uri(); ?>/img/breadcrumbEnd.png') no-repeat;*/
    left: inherit;
    right: 0;
}

body.page p#breadcrumbs span.breadcrumb_last, body.search-results p#breadcrumbs span.breadcrumb_last{
    background: transparent;
}

p#breadcrumbs a:hover{
    text-decoration: underline;
}

/* end structure */

/* fonts */

.type-product h1{
    display: block;
    text-align: left;
    margin-top: 15px;
    font-size: 24px;
}

h1{
    font-size: 30px;
    margin-top: 85px;
}

h2{
    font-size: 18px;
}

/* end fonts */

/* tablet and desktop header */

.mobileHeader, .mobFooter, .prodDetSocCont, form.mobile{
    display: none;
}

.headerBG{
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 60px;
    background: #00583C;
    z-index: 160;
}

.headerCont{
    position: fixed;
    top: 0px;
    width: 100%;
    max-width: 1140px;
    z-index: 170; 
}

header{
    position: relative;
    display: block;
    height: 70px;
}

.logo{
    margin: 13px 0 0 10px;
    float: left;
    width: 65px;
}

.logo img{
    width: 100%;
    height: auto;
}

.nav{
    float: right;
    width: 85%;
    right: 0px;
}

.nav a{
    float: left;
    font-size: 11px;
    padding: 25px 4.3% 22px;
    color: #fff;
    transition: all .2s;
}

.nav a.search:after{
    content: "";
    display: inline-block;
    background: url('data:img/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUBAMAAAB/pwA+AAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAKlBMVEUAAACavbWavbWavbWavbWavbWavbWavbWavbWavbWavbWavbWavbUAAADzpBTgAAAADHRSTlMAVbsiqjNEZsyZd+7lQc+4AAAAAWJLR0QAiAUdSAAAAAlwSFlzAAALEgAACxIB0t1+/AAAAIFJREFUCNdjYAACRp1DAgxgwOxz5syRADAz51BpuM4xsOCZAgYG9jMGQCbTcZCAjAKQiGkAMZkOAomaAhCT/RCQmAPWzHoGlYmkAEkbC9iwGgeQFMIKmTMnSsN7QBYznjkOdM4hiKAAa+V0kIFsZw4yQMHqMwIwps42GIvBogDGAgAxgydWx0OsCAAAAABJRU5ErkJggg==') no-repeat;
    background-size: 10px;
    width: 10px;
    height: 10px;
    margin: 0 0 0 8px;
}

.nav .subMenu a{
    color: #444;
    width: 100%;
    padding: 10px 5px;
    margin: 0 5% 0 0;
}

.nav .logo a{
    padding: 0;
}

.nav a:hover, .nav a.hover{
    color: #00583C;
    background: #fff;
}

.headerCTAStrip{
    height: 35px;
    top: 0;
}

.headerCTAStripCopyCont{
    display: block;
    margin: 0 auto;
    width: 90%;

}

.headerCTAStrip span{
    width: auto;
    float: left;
    font-size:  9px;
    margin-top: 10px;
}

.headerCTAStrip span.ctaBtn{
    display: block;
    border: 1px solid #fff;
    border-radius: 20px;
    margin: 6px 0 0 20px;
    padding: 3px 10px;
    width: 100px;
}

    /*.nav a.hasDropDown:after{
        content: url('<?php echo get_template_directory_uri(); ?>/img/navDownArrow.png');
        margin: 0 0 0 7px;
        }*/

        .withDropDown:hover{
            background: #fff;
        }

        .nav .subMenu{
            position: absolute;
            top: 60px;
            left: 0px;
            width: 100%;
            background: #fff;
            border-left: 1px solid #ccc;
            border-right: 1px solid #ccc;
            border-bottom: 1px solid #ccc;        
            padding: 20px 0;
            z-index: 1;
        }

        .nav .subMenuInner{
            width: 93%;
            max-width: 900px;
            margin: 0 auto;
            height: 100%;
        }

        .nav .subMenuCol{
            display: block;
            float: left;
            width: 25%;
            border-left: 1px solid #ccc;
            padding: 0 0 0 20px;
            height: auto;
        }

        .nav .subMenuCol:first-child{
            border-left: none;
        }

        .nav .subMenuCol span{
            padding: 10px 5px;
            font-size: 12px;
        }

        .nav .lowerNavBtnCont{
            display: block;
            clear: both;
        }

        .nav a.subWideLink{
            color: #fff;
            border: 1px solid #00583C;
            border-radius: 20px;
            background: #00583C;
            width: 30%;
            float: left;
            text-align: center;
            padding: 10px 0;
            margin:15px 3% 0 0;
            transition: all .2s;
        }

        .nav a.subWideLink:hover{
            color: #00583C;
            background: #fff;
            border: 1px solid #00583C;
        }

        .healthLivingSubMenu{
            display: flex;
            justify-content: space-between;
        }

        .nav a.HLLink{
            width: 110px;
            text-align: center;
            padding: 20px 0;
            margin: 0;
        }

        .desktopSearchCont{
            display: none;
            position: absolute;
            width: 100%;
            top: 60px;
        }

        .desktopSearchBG{
            position: absolute;
            left: 0px;
            width: 100%;
            height: 110px;
            background: #00583C;
            opacity: .9;
        }

        form.desktop{
            display: block;
            position: relative;
            float: left;
            width: 100%;
        }

        form.desktop .search-submit{
           float: right;
           border: none;
           background: #fff;
           padding: 15px 40px;
           color: #00583C;
           font-weight: bold;
           cursor: pointer;
           margin-right: 22px;
       }

       form.desktop span{
        display: block;
        color: #fff;
        font-size: 12px;
        padding: 30px 0 0 15px;
    }

    form.desktop input, form.desktop input:-webkit-autofill, form.desktop textarea:-webkit-autofill, form.desktop select:-webkit-autofill{
        border: none;
        background: none;
        color: #9ABDB5;
        font-size: 26px;
        margin: 10px 0 0 15px;
    }

    a.nav-forces-of-nature:before, a.nav-health-advice:before, a.nav-news:before, a.nav-recipes:before, a.nav-wellbeing-tips:before{
        content: '';
        height: 130px;
        position: relative;
        display: block;
    }

    a.nav-forces-of-nature:before{
        background: url('<? echo get_template_directory_uri(); ?>/img/afonNavIcon.png') no-repeat;
    }

    a.nav-health-advice:before{
       background: url('<? echo get_template_directory_uri(); ?>/img/healthAdviceNavIcon.png') no-repeat;
   }

   a.nav-news:before{
       background: url('<? echo get_template_directory_uri(); ?>/img/newsNavIconInvert.png') no-repeat;
   }

   a.nav-recipes:before{
       background: url('<? echo get_template_directory_uri(); ?>/img/recipesNavIcon.png') no-repeat;
   }

   a.nav-wellbeing-tips:before{
    background: url('<? echo get_template_directory_uri(); ?>/img/wellBeingTipsNavIcon.png') no-repeat;
}

/* end tablet and desktop header */

/* desktop footer */

.footer{
    clear: both;
}

.desktopFooter{
    position: relative;
    left: 0px;
    display: block;
    height: auto;
    padding: 40px 0;
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    float: left;
    width: 100%;
    background: #00583C;
    color: #fff;
}

.desktopFooterInner{
    display: block;
    width: 100%;
}

.footerLinkCont{
    width: 95%;
    margin: 0 auto;
    padding: 20px 0 30px;
}

.footerLinkCol{
    width: 25%;
    float: left;
    border-left: 1px solid #9ABDB5;
    padding-left: 3%;
}

.footerLinkCol:first-child{
    border: none;
    padding: 0px;
}

span.footerSub{
    display: block;
    float: left;
    text-align: left;
    color: #fff;
    font-size: 12px;
    padding: 18px 0 0;
}

.footerLinkCol span.footer {
    font-weight: bold;
}

.footerLinkCol a, p.footerSub{
    font-size: 12px;
    float: left;
    clear: left;
    padding: 20px 20px 0 0;
    color: #fff;
}

.footerLinkCol .footerSocialCont {
    clear: both;
}

.footerLinkCol a.footerSocialIcon {
    float: none;
    display: inline-block;
    padding-right: 8px;
}

.footerLinkCol a.footerSocialIcon img {
    height: 25px;
}

.lowerDeskFooter{
    display: block;
    clear: both;
    width: 100%;
    height: 150px;
    border-top: 1px solid #ccc;
}

.lowerFootCol{
    position: relative;
    display: block;
    width: 33.33%;
    float: left;
    height: 100%;
}

.lowerFootCol p, .lowerFootCol a{
    position:relative;
    top: 50%;
    transform: translateY(-50%);
}

.lowerFootCol a{
    position: relative;
    display: inline-block;
    margin: 0 auto;
    width: 100%;
    text-align: center;
}

.desktopContactPopup{
    position: fixed;
    bottom: -130px;
    left: 0px;
    display: block;        
    height: 170px;
    width: 100%;
    color: #fff;
    font-size: 15px;
    z-index: 101;
}

.desktopAskTab{        
    position: relative;
    right: 0px;
    width: 220px;
    height: 40px;
    clear: both;
    float: right;
    z-index: 1;
}

.desktopAskTab span{
    background: #fff;
    color: #00583C;
    display: block;
    font-size: 16px;
    padding: 10px 0 10px 43px;
    width: 220px;
    right: 0px;
    bottom: -1px;
    position: absolute;
    cursor: pointer;
    border-left: 1px solid #cdcdcd;
    border-top: 1px solid #cdcdcd;
}

.desktopAskTab span:after{
    content: '+';
    margin: 0 0 0 7px;
}

.plus span:after{
    content:'-';
    margin: 0 0 0 7px;
}

.desktopAskOptCont{
    position: absolute;
    display: block;
    width: 100%;
    height: 130px;
    bottom: 0px;
    background: #fff;
    color: #00583C;
    border-top: 1px solid #cdcdcd;
}

.desktopAskOpt{
    position: relative;
    display: block;
    padding: 10px 20px;
    width: 25%;
    height: 100%;
    float: left;
}

.desktopAskOpt p{
    font-size: 13px;
    line-height: 1.3;
}

.desktopAskOpt a{
    position: absolute;
    bottom: 10px;
    display: block;
    color: #fff;
    background-color: #00583C;
    width: 80%;
    border-radius: 15px;
    text-align: center;
    padding: 5px 0;
}

img.footerLogo{
    margin: 0 0 20px;
}

p.disclaimer{
    font-size: 12px;
    font-weight: normal;
    width: 80%;
    margin:0;
}

p.copyright{
    font-size: 12px;
    font-weight: normal;
    margin:0;
    padding-top: 0;
    border-top: none;
}

a.footerFB:before, a.footerINSTA:before, a.footerYT:before, span.footerSub:before{
    content: "";
    display: inline-block;
    background: url('<?php echo get_template_directory_uri(); ?>/img/facebookIcon.png') no-repeat;
    background-size: 15px;
    width: 15px;
    height: 15px;
    margin: 0 8px -3px 0;
}

a.footerINSTA:before{
    background: url('<?php echo get_template_directory_uri(); ?>/img/instagramIcon.png') no-repeat;
    background-size: 15px;
}

a.footerYT:before{
    background: url('<?php echo get_template_directory_uri(); ?>/img/youtubeIcon.png') no-repeat;
    background-size: 15px;
}

span.footerSub:before{
    background: url('<?php echo get_template_directory_uri(); ?>/img/newspaper.png') no-repeat;
    background-size: 15px;
}

/* end desktop footer */

/* desktop front page */

.frontPageBanner{
    /*background: #0D5C45;*/
    /*margin: 3px 0;*/
}

.bannerSection{
    padding: 0;
    overflow: hidden;    
    float: none;
    margin: 0 auto;
}

.home .bannerSection{
    margin: 0 auto
}

.bannerSection img{
    width: 100%;
    height: auto;
}

.bannerPackAndCopyCont{
    display: block;
    max-width: 860px;
}

.bannerImgBG{
    width: 100%;
    height: 100%;
    max-height: 330px;
    /* background: linear-gradient(to right bottom, #00AA5D 50%, #fff 50.2%); */
}

.bannerSection img.leafBGdesktop{
    display: block;
    margin: 115px 0 0;
    max-width: 790px;
    position: absolute;
    z-index: 2;
    right: 150px;
}

.bannerImg img.desktopBannerPackshot{
    display: block;
}

.bannerCopyBG{
    display: block;
    position: absolute;
    width: 50%;
    top: 0;
    left: 0;
    height: 100%;    
    /*background:url("<?php echo get_template_directory_uri(); ?>/img/runningFrontpage2.jpg") no-repeat;*/
    background-size: cover;
}

.bannerImg{
    display: block;  
    width: 40%;
    height: 317px; 
}

.bannerImg img, .bannerImg svg{
    margin: 0;
    max-width: 290px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.bannerCopy{
    width: 30%;
    float: right;
    background: none;
    right: 28%;
}

body.category-forces-of-nature .bannerSection img.desktopBanner{
    width: auto;
    max-width: none;
    height: 100%;
    transform: translateX(-17%);
}

img.desktopBanner{
    display: block;
}

.bannerCopyCont{
    min-width: 290px;
    margin: 93px auto 0 -5px;
}

.healthSection .bannerSection{
    overflow: auto;
}

.healthSection .bannerCopyCont, .category-articles .bannerCopyCont{
    position: relative;
    z-index: 1;
    float: left;
    min-width: 0;
    width: 310px;
    margin: -25% 10px 10px;
}

.healthSection span.bannerTitle{
    margin-top: 0px;
}


span.bannerTag, h1.bannerTag{
    /*color: #fff;*/
    float: left;
    font-size: 18px;
    margin: -50px 0 0 3%;
    text-align: left;
}

span.bannerTag p{
    float: left;
    font-size: 10px;
    margin: 30px 0 5px 0;
}

img.leg{
    display: block;
}

img.leg, img.legWide{
    width: auto;
    float: right;
    position: relative;
    z-index: 0;
    max-height: 360px;
}


.legImgCont{
    position: absolute;
    right: 0;
}

.bannerCopyCont a.bannerBtn{
    margin: 0;
}

.category-articles .bannerCopyCont{
    width: 400px;
}

.category-articles .bannerCopyCont p.bannerCopy{
    width: 100%;
    right: 0%;
    margin: 20px 0;
}

.bannerCopyContInner{
    margin: 0;
    padding: 0; 
}

.bannerCopy span.bannerTitle{
    text-align: left;
    font-size: 25px;
}

.bannerCopy p{
    text-align: left;
    margin: 5px 0;
    padding: 0;
    width: 80%;
    font-size: 21px;
}

.home .bannerBtn{
    width: auto;
    float: right;
    padding: 8px 35px;
    margin: -50px 9% 0 0;
    /*color: #00583C;
    background: #fff;*/
}

.home .prodDetTop{
    margin: 0;
}

.home .prodDetPackCont img{
    margin: 55px auto 0;
    width: auto;    
    height: auto;
    max-height: 280px;
}

.home .prodDetTopCopyCont{
    margin: 45px 0 0 0;
    width: 50%;
    position: relative;
}

.home .prodDetTopCopyCont h1{
    text-align: left;
    font-size: 30px;
}

.home .prodDetTopCopyCont p{
    text-align: left;
    margin: 0 0 80px;
    max-width: 400px;
}

.bannerProdBtn{
    float: left;
    width: 40%;
}

.healthSection a.bannerBtn:last-child, .qualitySection a.bannerBtn{
    float: none;
    clear: both;
    display: block;
    margin: 0 auto;
    width: 200px;
}

.qualitySection a.bannerBtn{
    margin: 0 auto 40px;
}

a.bannerBtn:after, .prodHideShow span:after{
    background: none;
}

.home .prodArtTileCont{
    padding: 0;
    background: #5484A4;
}

.home .healthSection .prodArtTileCont{
    background: none;
    padding-bottom: 10px;
}

.prodArtTileContInner{
    display: block;
    width: 100%;
    float: left;
    background: #F5F5F5;
}

.home .prodTile{
 width: 32%;
 margin: 0 .5% 0 .8%;
}

.home .healthSection .prodTile{
    padding: 0 10px;
}

.home .prodTile:nth-child(3n+0){
    margin-right: 0;
}

.home .hiddenTiles .prodTile{
  margin-top: 15px;
}



.prodTileCopyCont{
    min-height: 215px;
}


.qualitySection p{
    font-size: 16px;
}

span.prodSectTitle, .healthSection span, span.qualSectTitle{
    font-size: 21px;
}

/* end desktop front page */


/* desktop article category page */

.featuredArtCont{
    padding-top: 3%;
}

.featuredArtCont img{
    display: block;
    position: relative;
    z-index: 1;
}

.featArtCopyCont{
    position: absolute;
    width: 55%;
    float: left;
    margin: 0;
    top: 50%;
    transform: translateY(-50%);
}

.featArtCopyCont h2{
    font-size: 25px;
}

.featArtCopyCont p{
    font-size: 17px;
}

.featArtImgCont{
    display: inline-block;
    width: 45%;
    float: right;
}

.artTileCont{
    float: left;
    width: 70%;
    margin: 25px 0 0 0;
}

.artDetailRelArtCont{
    width: 100%;
    padding:2%;
    margin: -40px 0 0;
}

.artDetailRelArtCont .artTile{
    width: 50%;
    float: left;
}

.artDetailRelArtCont .artTileImgCont{
    width: 50%;
}

.artDetailRelArtCont .artTileCopyCont{
    width: 50%;
    line-height: 1.2;
    font-size: 12px;
}

.artDetailRelArtCont .artTile p{
    line-height: 1.4;
    font-size: 13px;
    min-height: 165px;
}

.artDetailRelArtCont h2.relArtTileTitle{
    text-align: left;
    font-size: 27px;
}

.artTileImgCont{
    width: 180px;
    position: relative;
    z-index: 1;
}

.artTileTitleCont{
    width: 100%;
    float: left;
    margin-top: 10px;
}

.artTile{
    margin: 0 0 1.5%;
    transition: all .2s;
    padding: 0 0 5%;
    background: none;
}

.artTileCopyCont{
    width: 75%;
    float: right;
    background: #fff;
    padding: 20px 0;
    margin: -25px 0 0 -10%;
    position: relative;
    z-index: 0;
    min-height: 190px;
}

.artTileCopyContInner{
    width: 80%;
    float: left;
    margin: 0 0 0 15%;
}

.artTile h2, .artTile p {
    margin: 5px 0;
    padding: 0;
    clear: none;   
    line-height: 1.3; 
}

.artTile h2{
    min-height: 50px;
}

.artTile p{
    line-height: 1.5;
}

.artRecTitle{
    width:  100%;    
}

.mustReadCont, .trendingCont{
    float: right;
    width: 29%;
    background: #fff;
    padding: 2%;
}

.artRecRow{
    position: relative;
    clear: both;
    padding: 9px 0;
    margin: 0;
    float: left;
    border-top: 1px solid #F1F7F7;
}

.artRecRow:hover{
    cursor: pointer;
    box-shadow: 3px 3px 6px #ccc;
}

.artRecTitle, .trendingCont .artRecTitle{
    font-weight: bold;
    background: #fff;
    color: #245EAC; 
    margin: 0;
}

.trendingCont .artRecTitle{
    color: #D21F3C;
}


.artRecTitleCont span{
    float:  left;
}

.category-joint-bones-muscles .bannerSection{
    background: #1D5741;
    margin-bottom: 40px;
}

.category-joint-bones-muscles .bannerSection span.bannerTag{
    color: #fff
}

.category-joint-bones-muscles .bannerSection .bannerCopy p{
    font-size: 25px;
}

.artDetailRelArtCont span{
    float: left;
}


/* end desktop article category page */

/* desktop article page */



img.postArtImg, img.article{
    width: 100%;
    top: 130px;
    max-width: 1100px;
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
}

.single-post h1, .single-recipe h1, .single-ingredient h1{
    background: #fff;
    margin: 48% auto 0;
    padding: 30px;
    z-index: 10;
    position: relative;
    width: 50%;
}


.single-post .artCopyCont, .single-recipe .artCopyCont, .single-ingredient .artCopyCont{
    width: 80%;
    max-width: 850px;
    clear: both;
    border: none;
    padding: 0 25px;
}

.single-post .artCopyLast, .single-recipe .artCopyLast, .single-ingredient .artCopyLast{
    border-bottom: 1px solid #00583C;
    padding-bottom: 40px;
}

.prodDetLowerCopyContOuter{
    margin-top: 40px;
}

.artSocContDeskTop{
    display: block;
    width: 100px;
    float: right;
    margin: -1% 13% 1.5% 0;
}

.prodDetSocLinks{
    display: none;
}

.artSocContMob{
    display: none;
}

.socLinksDesktop{
    width: 100px;
    margin: 0 auto;
    display: block;
}

.socLinksDesktop span{
    float: left;
    padding: 5px;
}

.artVidCont{
    background: #00583C;
    width: 85%;
    float: right;
    padding: 0 5% 33% 0;
    margin: 30px 0 110px;
}

.single-post .vidCont, .single-recipe .vidCont, .single-ingredient .vidCont{
    width: 77%;
    padding-bottom: 46%;
    margin-left: 4%;
}


.single-post .artCopyCont a.button{
    margin: 30px 0;
}

article p.artLearn{
    text-align: left;
}

/* end desktop article page */



/* desktop product detail page */

.prodDetTopCopyCont, .prodDetMidCopyCont, .prodDetLowerCopyCont, .prodDetMainInfoCont, .prodDetFeatureCont{
    width: 100%;
    float: left;
}

.prodDetMainInfoCont, .prodDetFeatureCont{
    background: #F0F5F4;
    padding: 70px 0 100px;
}

.single-product main {
    padding-top: 29px;
}

.prodDetMidCopyCont{
    position: relative;
    z-index: 1;
    margin-top:0px;
}

.prodDetMainInfoCont .prodDetInfoRow:first-child{
    border-right: 1px solid #adc8c1;
}

.type-product{
    width: 100%;
}

.type-product h4{
    margin: 0;
    padding: 10px 0;
}

.prodDetTop{
    display: block;
    clear: both;
    float: left;
    width: 100%;
    padding-bottom: 20px;
    margin-top: 15px;
    min-height:565px;
}
@media only screen and (min-width:1024px)
{
    .prodDetTop{
        min-height: unset;
    }
}
@media only screen and (min-width:1440px)
{
    .prodDetTop{
        min-height: unset;
    }
}
@media only screen and (min-width:1800px)
{
    .prodDetTop{
        min-height: unset;
    }
}
@media only screen and (min-width:1920px)
{
    .prodDetTop{
        /*padding-bottom: 299px;*/
        min-height: unset;
    }
}

.prodDetTopCopyCont{
    width: 56%;
    float: right;
    margin-top: 112px;
}

.prodDetPackCont{
    position: absolute;
    left: 0;
    display: block;
    float: left;
    width: 40%;
    max-width: none;
    height: auto;
    background: linear-gradient(to right bottom, <?=  isset($catColorList[$contentCatId]) ? $catColorList[$contentCatId] : '#1A705B' ?> 48%, #fff 48.2%);
}

.home .prodDetPackCont{
    width: 50%;
}

.prodIconCont{
    width: 24%;
}

.howToBuyCont span{
    width: 200px;
}

a.bannerBtn:after, .prodHideShow span:after, .howToBuyCont span:after{
    background: none;
}

.type-product .prodIconCont img{
    width: auto;
    height: 16px;
}

.type-product .prodDetPackCont img{
    margin: 110px auto 0;
    height: 250px;
}

.relProdRow a{
    display: block;
}

.howToBuyCont {
    display: inline-block;
    float: left;
    width: auto;
}

.prodDetLowerCopyCont{
    display: block;
    width: 100%;
    clear: both;
}

.relProdAndArtContInner{
    display: block;
    width: 90%;
    margin: 0 auto;
}

.prodDetIngCont{
    display: block;
    float: left;
    width: 100%;
}

.activeIngredRow{
    position: relative;
    width: 30%;
    float: left;
    margin-right: 5%;
    height: 270px;
}



.activeIngredRow img{
    height: 270px;
}

.activeIngredRow:last-child{
    margin-right: 0;
}

.allIngredCont h4{
    width: 100%;
}

.prodDetKeyIngMobileCont{
    display: none;
}

.prodDetKeyIngDesktopCont{
    display: block;
    position: relative;
    perspective: 800px;
    height: 280px;
}

.frontActIngCont, .backActIngCont{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transition: -webkit-transform .7s;
  transition: transform .7s;
}

.prodDetKeyIngDesktopCont .activeIngredRow{
  display: block;
  width: 30%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  background: none;
}

.frontActIngCont{
    display: block;
}

.backActIngCont{
    display: block;
    background: #fff;
    height: 270px;
    box-shadow: 3px 3px 6px #ccc;
    -webkit-transform: rotateY(-180deg);
    transform: rotateY(-180deg);
}

.prodDetKeyIngDesktopCont .activeIngredRow:hover .frontActIngCont{
  -webkit-transform: rotateY(-180deg);
  transform: rotateY(-180deg);
}

.prodDetKeyIngDesktopCont .activeIngredRow:hover .backActIngCont{
  -webkit-transform: rotateY(0);
  transform: rotateY(0);
}

.flipBtnCont{
    display: block;
    width: 100%;
}

.frontActIngCont .activeIngredImgCont{
    height: auto;
}

.activeIngredRow span.prodDetKeyIngFlipBtn{
    display: block;
    margin: 120px auto 0;
    font-size: 9px;
    text-transform: none;
    background: #fff;
    color: #444;
    padding: 10px;
    width: 50%;
    float: none;
    text-align: center;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 25px;
}

.allIngredCont span ul{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
}

.allIngredCont span ul > *{
    display: flex;
    flex: 1 1 50%;
    max-width: 50%;
    padding: 0 10px;
    align-items: center;
}

.allIngredCont{
    display: block;
    clear: both;
    padding: 20px 0 0 0;
}

.activeIngredRow span{
    text-align: center;
    padding: 0;
    margin-top: 60px;
}

.backActIngCont span{
    margin-top: 30px;
    top: 0;
}

p.keyIngCopy{
    margin-top: 80px;
}

.activeIngredRow img.openIcon{
    display: none;
}

.prodDetIngCont .prodDetInfoRow{
    width: 100%;
    margin-top: 60px;
}

h4.keyIng{

}

.type-product .lowerPromoMobImg{
    display: none;
}

.type-product .lowerPromoImg{
    display: block;
    width: 100%;
    height: auto;
}

h4.prodDetArrowDown{
    cursor: inherit;
    font-size: 16px;
}

h4.prodDetArrowDown:after{
    display: none;
}

.prodDetAccHide{
    display: block;
}

.leftStickyNav{
    display: block;
    position: relative;
    width: 18%;
    float: left;
    padding: 15px 0 50px;      
}

.leftStickyNav a{
    display: block;
    padding: 10px 0 10px 10px;
}

.prodDetInfoRow{
    display: block;
    width: 50%;
    float: left;
    padding: 0 20px;
}

.relProdCont{
    display: inline-block;
    width: 70%;
}

.relProdCont .prodIconCont, .prodTile .prodIconCont{
    width: 33%;
}

.relArtCont{
    width: 27%;
    float: right;
}

.prodDetDivider{
    display: none;
}

.lowerPromoCont{
    margin: 50px 0 0 0;
}

.lowerPromoCopyCont{
    width: 40%;
    max-width: 310px;
    float: right;
    margin: -22% 3% 0;
    padding: 20px;
}

.prodDetQualityCont{
    margin: 10% 0 0 0;
}

.prodDetQualityTile{
    width: 70%;
    max-width: 620px;
    height: 150px;
    margin: 0 auto;
    float: none;
}

.prodDetQualityCont img{
    float: left;
}

.prodDetSectionTitle img{
    float: none;
}

.prodDetQualityTile.second img{
    float: right;
}

.prodDetQualityTile span, .prodDetQualityTile p{
    text-align: left;
    margin: 20px 0 0px 140px;
}

.prodDetQualityCont .first span:before, .prodDetQualityCont .second span:before, .prodDetQualityCont .third span:before{
    font-size: 120px;
    left: -10px;
}

.prodDetQualityCont .second span, .prodDetQualityCont .second p{
    float: right;
    width: auto;
    margin: 20px 40px 0 0;
}

.prodDetQualityCont .second span:before{
    left: inherit;
    right: -30px;
}

.prodDetFeatVidCont{
    width: 90%;
    float: right;
}

.vidCont{
    display: inline-block;
    padding-bottom: 33%;
    width: 50%;
    margin: 0 0 -8% 5%;
}

.featVidCopyCont{
    display: inline-block;
    float: right;
    width: 40%;
    margin: 3% 2% 0 0;
}

.prodDetQuestionCont{
    display: block;
    clear: both;
    padding: 70px 0;
}

.prodDetQuestionCopy{
    width: 90%;
    margin: 0 auto;
}

.relProdCont h4, .relArtCont h4{
    margin-bottom: 20px;
    font-size: 15px;
}

/* end desktop product detail page */

/* desktop product category page */


.prodArtTileCont{
    padding-top: 30px;
}

.archive-meta{
    margin: 0 0 70px 30%;
}

.prodTileImgCont{
    min-height: 220px;
    margin: 30px 0;
}

.prodTileImgCont img{
    height: 220px;
}

.prodArtTileContOuter, .artCatContOuter{
    padding: 0 0 50px;
}

.prodTileCopyCont h2{
    height: 50px;
}

body.category .prodSelect{
    padding-bottom: 30px;
}

/* end desktop product category page */

/* desktop A - Z page */

.aTozLetBtnCont{
    display: block;
    float: left;
    width: 100%;
    background: #fff;
    margin-bottom: 40px;
}

.aTozLetBtnCont a{
    display: block;
    padding: 1.25%;
    float: left;
    transition: all .2s;
}

.aTozLetBtnCont a:hover{
    background: #9ABDB5;
}

.aTozLetBtnCont a.active{
    background: #00583C;
    color: #fff;       
}

.aTozRow{
    display: block;
}

.aTozLetterCont{
    display: block;
    width: 95%;
    max-width: 1140px;
    float: none;
    clear: both;
    text-transform: uppercase;
    color: #fff;
    font-size: 8px;
    margin: 0 auto 20px;
    border-bottom: 1px solid #00583C;
    background: none;   
    padding: 0;
}

.aTozLetterCont span{
    background: #00583C;
    padding: 2px 6px;
    margin: 1px 0 0 0;
    font-size: 12px;
    float: left;
    clear: both;
}

.aTozLetterCont:first-child span:first-child{
    display: none;
}

.aTozLetterCont span:last-child:before{
    content: '';
}

/* end desktop A - Z page  */

/* desktop search page */

.searchTitleCont{
    display: block;
}

form.resultsSearch input, form.map input{
    width: 80%;
    float: left;
    margin: 0;
    height: 45px;
    vertical-align: -webkit-baseline-middle;
    text-align: left;
}

.search-submit{
    width: 20%;
    border-radius: 0;
}

form.resultsSearch span, form.map span{
    font-size: 16px;
}

.searchSlideContOuter{
    width: 75%;
    clear: right;
    position: relative;
}

.allContOuter{
    display: block;
}

.searchSlideContAll, .searchSlideContProd, .searchSlideContArt{
    width: 100%;
    float: right;
}

.searchSlideContInner{
    display: block;
    float: left;
    width: 100%;
}

.searchRow{
    border-top: none;
    border-bottom: 1px solid #00583C;
    float: none;
    height: 150px;
}

.searchRowImgCont{
    float: right;
    width: auto;
}

.serachRowCopyCont{
    width: 72%;
}

.searchPagerCont, .searchPagerContProd, .searchPagerContArt{
    float: left;
    margin: 20px 0;
    clear: both;
    overflow-x: hidden;
}

.searchPager{
    width: 85%;
}

.prodOrArtBtnCont{
    display: block;
    float: left;
    clear: left;
    width: 20%;
    max-width: 200px;
}

.prodOrArtBtnCont span{
    padding: 20px 0;
    width: 100%;
    color: #00583C;
    background: #fff;
    outline: 1px solid #00583C;
    text-align: center;
    margin: 0 0 10px;
    cursor: pointer;
    transition: all .2s;
    font-family: "Futura Std Bold";
}

.prodOrArtBtnCont span.active{
    color: #fff;
    background: #00583C;
}

.searchSlideContOuter h3{
    text-align: left;
}

/* end desktop search page */


/* desktop health advice page */

.heaLivRowBGColor{
    z-index: 1;
}

.heaLivTileCont{
    position: relative;
    z-index: 1;
}

.heaLivTileTitleCont h2{
    font-size: 14px;
    min-height: 30px;
}

.heaLivTile{
    width: 31%;
    float: left;
    margin: 0 0 0 1.8%;
}

.heaLivTile:last-child{
    margin-right: 0;
}

.heaLivTileCopyCont{
    min-height: 240px;
}

body.category-articles .trendingCont{
    width: 100%;
}

.heaLivRowTitleCont{
    width: 95%;
    float: none;
    margin: 0 auto 20px;
}

.heaLivSlideCont{
    float: none;
    width: 100%;
    margin: 0 auto;
}

.heaLivRowTitleCont img{
    bottom: 10px;
}

.heaLivStories .heaLivRowTitleCont img {
    bottom: 10px;
}

.heaLivRecipes .heaLivRowTitleCont img {
    bottom: 20px;
}

.heaLivNews .heaLivRowTitleCont img {
    bottom: 0px;
}

/* end desktop health advice page */

/* desktop our story page */

.underline {
    text-decoration: underline;
}

.ourStoryTop{
    height: 0;
    padding: 0px 0 50%;
    position: relative;
}

.ourStoryTop .vidCont{
    width: 53%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -55%);
}

img.ourStoryTopLeft{
    display: block;
    width: 30%;
    margin: 5%;
}

img.ourStoryTopRight{
    display: block;
    float: right;
    width: 30%;
    margin: -11% 5% 5% 0;
}

.history{
    padding: 60px 0 50px;
}

.cycle-2BG{
    width: 80%;
}

#cycle-2 span.prev{
    left: 0;
}

#cycle-2 span.next{
    right: 0;
}

.histSlideCopy p{
    width: 100%;
}

p.whyWeDoCopyCont{
    width: 40%;
    margin-left: 5%;
    float: left;
}

.ourStoryLeft{
    float: left;
    width: 50%;
}

img.manAndBoat{
    float: right;
    width: 27%;
    margin-right: 10%;
}

p.sourceToShelfCopy{
    text-align: center;
    max-width: 800px;
}

.sourceToShelfDeskCont{
    position: relative;
    display: block;
    width: 90%;
    max-width: 675px;
    height: 700px;
    margin: 0 auto;
    background: url(<?php echo get_template_directory_uri(); ?>/img/ourStoryInfographic.png)no-repeat;
    background-size: 90%;
    background-position: 50% 50px;
}

p.sourceOne, p.sourceTwo, p.sourceThree, p.sourceFour, p.sourceFive, p.sourceSix, p.sourceSeven{
    position: absolute;
    width: 25%;
    text-align: center;
    line-height: 1.1;
    font-size: 11px;
}

p.sourceOne{
    top: 150px;
}

p.sourceTwo{
    top: 150px;
    left: 260px;
}

p.sourceThree{
    top: 235px;
    right: 0;
}

p.sourceFour{
    top: 335px;
    left: 260px;
}

p.sourceFive{
    top: 430px;
}

p.sourceSix{
    top: 530px;
    left: 255px;
}

p.sourceSeven{
    top: 530px;
    right: 0;
}

.byNatureSlideCont{
    height: 210px;
    max-width: 900px;
}


.byNatureSlideCont .cycle-slide img{
    height: 140px;
}

.byNatureSlideCont .cycle-slide-active img{
    height: 190px;
}


.byNatureSlideBtns{
    top: -63%;
}

.evidence p{
    width: 500px;
}

.ourStoryLowerInner{
    width: 602px;
}

.ourStoryLower a{
    width: 270px;
    margin: 0 2.5%;
    background-image: none;
    display: inline-block;
}

.ourStoryLower a.white{
    float: right;
}

.ourStoryLower a:after, .ourStoryLower a.white:after{
    background: none;
}

.whatWeDo, .sourceToShelf{
    padding: 50px 0;
}

.whatWeDo{
    padding-bottom: 0;
}

/* end desktop our story page */

/* desktop contact us page */

.contactTilesCont{
    display: block;
    width: 90%;
    max-width: 930px;
    height: 480px;
    clear: both;
    margin: 0 auto;
}

.contactTile{
    position: relative;
    width: 30%;
    float: left;
    margin: 0 1.6%;
}

.contactTile img{
    position: absolute;
    top: 45%;
    left: 50%;
    transform: translate(-50%, -50%);
}


.contactTile span{
    position: relative;
    bottom: -190px;
}

/* desktop afon page */

.afonTopBG{
    position: absolute;
    display: block;
    float: left;
    width: 100%;
    background: #F1F7F7;
    height: 1550px;
    z-index: -1;
}

.afonLowerBG{
    position: absolute;
    display: block;
    width: 100%;
    background: #E2EDEB;
    top: 1500px;
    height: 200%;
    padding-bottom: 220%;
}

.afonRowsCont{
    max-width: 768px;
    float: none;
    margin: 30px auto 0;
    padding: 30px 0 0 0;
}

.afonRow{
    background: #fff;
}

body.category-forces-of-nature .bannerSection{
    height: 340px;
}

body.category-forces-of-nature .bannerCopyCont {
    width: 400px;
    float: left;
    margin: -290px 0 0 -5px;
}

body.category-forces-of-nature .bannerCopyCont span{
    float: left;
}

body.category-forces-of-nature .bannerCopyContInner, body.category-articles .bannerCopyContInner{
    background: #fff;
    padding: 15px;
    margin: 0 0 20px;
    float: left;
}

body.category-forces-of-nature p.bannerCopy{
   /* width: 100%*/
}

.afonRowVidImgCont, .afonRowCopyCont{
    width: 50%;
}

.afonSlideContOuter{
    width: 100%;
    display: block;
}

.afonSlideCont{
    width: 90%;
    padding-bottom: 550px;
    max-width: 768px;
    margin-bottom: 40px;
}

.afonSlide{
    width: 30%;
    margin: 0 1.6% 3.4%;
}

.afonCopy span{
    height: 75px;
    float: left;
}

.afonSlideCopyCont span{
    height: 155px;
}

.afonPrevNextCont{
    display: none;
}

.afonCopy a {
    max-width: 150px;
}

.afonCopy h2{
    height: 70px;
    font-size: 25px;
}

.afonSlideCopyCont h2{
    font-size: 16px;
}

.afonSlideCopyCont span{
    font-size: inherit;
}

.afonRowCopyCont a{
    float: left;
    left: 55%;
    bottom: -114px;
}

.afonSlideCopyCont a{
    margin: 20px auto 35px;
    left: 0;
    transform: inherit;
}

.signupAfonPage{
    margin-top: 50px;
}

.afonVidContOuter{
    background: none;
}

.afonVidContOuter .vidCont{
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
}

.popupClose{
    top: -40px;
    right: -25px;
}

.contactUsPopup .popupClose{
    top: -26px;
    right: -9px;
    color: black !important;
}

.afonRowCopyCont .afonCopy{
    position: relative;
    height: 370px;
}

.afonCopy img{
    margin: 0 13% 0 0;
    width: 90px;
    float: left;
    bottom: 0px;
    position: absolute;
}



/* end desktop afon page */



/* desktop store finder page */

.mapContOuter{
    display: block;
    width: 100%;
    float: left;
    clear: both;
    margin: 50px 0;
}

.mapInfoRowsContOuter{
    width: 35%;
    float: left;
}

.mapInfoRowsCont{
    float: left;
    height: 700px;
    /*overflow-y: scroll;*/
}

.mapResultCount{
    margin: 0;
}

#mapCanvas{
    width: 65%;
    float: left;
    height: 750px;
    margin: 0;
}


/* end desktop store finder page */


/* desktop healthy living page */

.heaLivRowBGColor{
    display: block;
}

/* end  desktop healthy living page */

body .bs .prodArtTileCont h3{
    min-height: 65px;
}

.faqli > div {
    height: 70px;
}

}/* end 768px */
@media only screen and (min-width:1024px) {

    /* global nav */

    .nav{
        width: 90%;
    }

    .nav a{
        padding: 25px 5.6% 22px;
        font-size: 12px;
    }

    /* end global nav */

    /* desktop category page */

    .prodTile{
        width: 31.3%;
        margin: 0 1% 2% 1%;
    }


    /* end desktop category page */

    /* desktop article category page */

    .artTileImgCont{
        width: 230px;
    }

    .artTileCopyCont{
        min-height: 210px;
    }

    .artTileCopyContInner{
        width: 85%;
        margin: 0 0 0 12%;
    }

    /* end desktop article category page */

    /* desktop product details page */

    .prodDetLowerCopyCont .prodTile{
        width: 48%;
    }

    /* end desktop product details page */


    /* desktop article page*/

    .artSocContDeskTop{
        margin-right: 15%;
    }

    /* end desktop article page */

    /* desktop afon page */

    .signupAfonPage {
        margin-top: 10%;
    }

    body.category-forces-of-nature .bannerSection img.desktopBanner{
        transform: translateX(-5%);
    }

    .afonLowerBG{
        padding-bottom: 180%;
    }


    /* end  desktop afon page */

    /* desktop front page */

    img.leg{
        display: none;
    }


    img.legWide{
        display: block;
        max-height: 410px;
    }

    .bannerCopy{
        width: 35%;
    }

    .bannerCopyCont{
        width: 100%;
        margin: 98px 0 0 20px;
    }

    .bannerCopy p{
        font-size: 25px;
    }

    span.bannerTag, h1.bannerTag{
        font-size: 25px;
        margin: -8px 0 30px 3%;
        height: 48px;
    }

    span.bannerTag{
        margin: -60px 0 30px 3%;
    }

    .bannerSection img.leafBG{

    }

    .bannerCopy span.bannerTitle{
        font-size: 32px;
    }

    .bannerImg img.desktopBannerPackshot{
        max-width: 370px;
    }

    .bannerPackAndCopyCont{
        max-width: 1010px;
    }

    .home .bannerBtn{
        margin: -79px 14% 0 0;
    }

    .bannerSection img.leafBGdesktop{
        display: block;
        max-width: 990px;
        right: 230px;
    }

    .frontPageBanner{
        height: 500px;
    }

    span.bannerTag p{

    }

    /* page desktop front page */

    span.bannerWarn{
        text-align: left;
    }


    .headerCTAStripCopyCont{
        display: block;
        margin: 0 auto;
        width: 80%;

    }

    .headerCTAStrip span{
        width: auto;
        float: left;
        font-size:  10px;
        margin-top: 10px;
    }


    }/* end 1024px */
    @media only screen and (min-width:1140px) {

        /* global nav */

        /* emd global nav */

        /* desktop article category page */

        .artTileImgCont {
            width: 240px;
        }

        .artTileCopyCont {
            min-height: 225px;
        }

        .artTileCopyContInner {
            margin: 0 0 0 10%;
        }

        /* end desktop article category page */

        /* desktop product detail page */

        .lowerPromoCopyCont{
            margin-right: 10%;
        }

        /* end desktop product detail page */


        /* desktop article page */

        .artTitleBG{
            display: block;
            position: absolute;
            top: 130px;
            width: 100%;
            height: 50%;
            background: #F1F7F7;
        }

        img.postArtImg, img.article{
            top: 170px;
            margin: 0;
        }

        .single-post h1, .single-recipe h1, .single-ingredient h1{
            margin: 560px auto 0;
            max-width: 600px;
        }


        .artVidCont{
            width: 90%;
            max-width: 1290px;
            padding-bottom: 360px;
        }

        .single-post .vidCont, .single-recipe .vidCont, .single-ingredient .vidCont{
            width: 57%;
            padding-bottom: 33%;
            margin-left: 30px;
        }

        /* end desktop article page */

        /* desktop our story page */

        .ourStoryTop{
            padding-bottom: 560px;
        }

        .ourStoryTop .vidCont{
            width: 670px;
            padding-bottom: 400px;
        }

        /* end desktop our story page */

        /* desktop afon page */

        .afonCopy span{
            height: 90px;
        }

        .afonTopBG{
            height: 2000px;
        }

        .afonLowerBG{
            padding-bottom: 160%;
            top: 1850px;
            max-height: 2000px;
        }

        .afonRowsCont, .afonSlideCont{
            max-width: 1000px;
        }

        .afonSlideCont{
            margin-bottom: 70px;
        }

        .afonRowVidImgCont img{
            margin: 0;
        }

        .afonRowCopyCont .afonCopy{
            height: 480px;
        }

        .afonCopy img{
            width: 130px;
        }

        .afonRowCopyCont a{
            bottom: -207px;
        }

        .afonLowerTitleCont h3{
            text-align: left;
            font-size: 23px;
        }

        body.category-forces-of-nature .bannerSection{
            height: 400px;
        }

        body.category-forces-of-nature .bannerSection img.desktopBanner{
         float: left;
         width: auto;
         height: 100%;
     }

     .afonSlideCopyCont span{
        height: 110px;
    }


    /* end desktop afon page */

    /* desktop front page */

    .bannerImg{
        height: 400px;
    }

    .bannerImg img, .bannerImg svg{
        max-width: 350px;
    }

    .bannerCopyCont{
        margin: 123px auto 0;
    }

    .bannerImgBG{
        max-height: 410px;
        background-position: -540px;
    }

    img.legWide{
        max-height: 470px;
    }

    .bannerSection img.leafBGdesktop{
        margin: 140px 0 0;
        right: 260px;
    }

    span.bannerTag, h1.bannerTag{
        margin: -48px 0 30px 3%;
    }

    .bannerCopy{
        margin-right: -80px;
    }

    .home .bannerBtn{
        margin: -89px 14% 0 0;
    }

    /* end desktop front page */



    }/* end 1140px */
    @media only screen and (min-width:1280px) {

        /* desktop global nav */

        .nav a{
            padding: 24px 5.8% 23px;
            font-size: 13px;
        }


        /* end desktop global nav */


        .home .prodDetPackCont img{
         margin: 55px 30% 0 0;
         float: right;
     }

     /* desktop product detail page */

     .lowerPromoCopyCont{
        margin-right: 25%;
    }

    .prodDetQualityCont {
        margin: 6% 0 0 0;
    }

    .type-product .prodDetPackCont img{
/*        float: right;
margin-right: 150px;*/
}

.prodDetPackCont{
    /*height: 70%;*/
}

.ps-map-pushpin-select > div > div > .ps-seller > div > span > img.ps-logo,
.ps-map-pushpin-select > div > div > .ps-seller > div > div > img{
    height:  auto;
}

/* end desktop product detail page */

/* desktop afon page */

.afonLowerBG{
    height: 2000px;
    padding-bottom: 0;
}

/* end desktop afon page */


/* desktop front page */


.bannerGreyStrip{
    display: block;
    width: 30%;
    background: #EAE9E9;
    position: absolute;
    left: 0;
    top: 140px;
    height: 120px;
}

.headerCTAStripCopyCont{
    width: 985px;
}

.headerCTAStrip span{
    font-size: 14px;
}


/* end desktop front page */

}/* end 1280px */

@media only screen and (min-width:1600px) {

    body.category-forces-of-nature .bannerSection img.desktopBanner{
        width: 100%;
        height: auto;
        transform: translateX(0);
    }

    body.category-forces-of-nature .bannerCopyContInner{
        margin-top: -110px;
    }

    }/* end 1600px */


    /* MS EDGE FIXES */

    @media only screen and (min-width:1px) and (-ms-high-contrast: none), (-ms-high-contrast: active){

        .single-post h1, .single-recipe h1, .single-ingredient h1{
            margin: 55% auto 3% auto;
        }

        .centeredTitle h1{
            margin:60px 0 0;
        }

        .prodDetPackCont{
            top: 45px;
        }

        span.footer{
            color: #fff;
            float: left;
            text-align: left;
        }

        .prodDetPackCont .type-product img{
            margin: 60px auto 20px;
        }

        .home .bannerSection{
            margin-top: 40px;
        }

    }


    @media only screen and (min-width:768px) and (-ms-high-contrast: none), (-ms-high-contrast: active){

        .bannerSection{
            margin: 60px 0 0;
        }

        h1{
            margin-top: 125px;
        }

        .centeredTitle h1{
            margin:150px 0 0;
        }

        body.help-me-choose .prodSelect{
            margin-top: 60px;
        }



    }

    @media only screen and (min-width:1140px) and (-ms-high-contrast: none), (-ms-high-contrast: active){

        .single-post h1, .single-recipe h1, .single-ingredient h1{
            margin: 605px auto 0;
            max-width: 600px;
        }

    }

    @media only screen and (min-width:1280px) and (-ms-high-contrast: none), (-ms-high-contrast: active){

        .bannerGreyStrip{
            top: 180px;
        }

    }

    /* END MS EDGE FIXES */ 



    /* IE 10 FIXES */

    html[data-useragent*='MSIE 10.0'] body.help-me-choose .prodSelect {
       margin-top: 60px;
   }

   html[data-useragent*='MSIE 10.0'] .home .bannerSection{
    margin-top: 40px;
}

/* END IE 10 FIXES */

@media (min-width: 1px){

    .gdprFooterPopup{
        position: fixed;
        bottom: 0px;
        display: block;
        width: 100%;
        background: #00583C;
        padding-bottom: 30px;
        z-index: 100;
    }

    .gdprFooterPopup p{
        color: #fff;
        display: block;
        margin: 20px auto;
        width: 90%;
        font-size: 12px;
        line-height: 1.3;
    }

    .gdprFooterPopup p a{
        text-decoration: underline;
        color:  #fff;
        font-size: 12px;
        line-height: 1.3;
    }

    .gdprFooterPopup span{
        background: #fff;
        color: #00583C;
        padding: 5px;
        font-size: 15px;
        text-align: center;
        float: none;
        width: 90%;
        max-width: 310px;
        display: block;
        clear: both;
        margin: 0 auto;
        cursor: pointer;
    }

    .gdprFooterPopup span:hover{
        text-decoration: underline;
    }
}

/* Holiday Giveaway Footer Popup */

/* Mobile */
.holidayGiveawayPopup {
    background: url(/wp-content/themes/naturesown/img/seedsFooterPopup-Mobile.jpg) top / cover no-repeat;    
    /*background: #00583C;*/
    position: fixed;
    bottom: 0px;
    height: auto;
    width: 100%;
    z-index: 200;
    box-shadow: 0px -6.787876605987549px 20.363630294799805px 0px rgba(0, 0, 0, 0.40);
}

.holidayGiveawayPopup .popupCloseBtn {
    background-color: transparent;
    border: none;
    position: absolute;
    right: 20px;
    top: 20px;
    cursor: pointer;
}

.holidayGiveawayPopup .popupContContainer {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    gap: 20px;
    height: 100%;
    padding: 20px 0 0 0;
}

.holidayGiveawayPopup .copyCont{
    padding: 0 15%;
}


.holidayGiveawayPopup .copyCont p{
    color: #fff;
    text-align: center;
    font-weight: bold;
    font-size: 23px;
    line-height: 1.3;
    margin: 0;
    filter: drop-shadow(3px 3px 2px black);
}

.holidayGiveawayPopup .popupContContainer .winHolidayImg {
    width: 260px;
    filter: drop-shadow(2px 4px 6px black);
}

footer .holidayGiveawayPopup .popupContContainer .btnWhite {
    margin: 0 auto 20px;
    padding: 18px;
}

/* Desktop */
@media (min-width: 768px) {
    .holidayGiveawayPopup {
        background: url(/wp-content/themes/naturesown/img/seedsFooterPopup-Desktop.jpg) center / cover no-repeat;
        background-color: #00583c;
        background-size: auto;
        /*background: #00583C;*/
        height: 130px;
    }

    .holidayGiveawayPopup .popupContContainer {
        max-width: 1140px;
        flex-direction: row;
        /*justify-content: space-between;*/
        margin: 0 auto;
        padding: 0 15px;
    }

    .holidayGiveawayPopup .copyCont{
        padding: 0 3%;
        width: 50%;
    }

    .holidayGiveawayPopup .copyCont p{
        font-size: 23px;
        text-shadow: #000 5px ;
    }

    .holidayGiveawayPopup .popupContContainer .winHolidayImg {
        width: 350px;
    }

    footer .holidayGiveawayPopup .popupContContainer .btnWhite {
        margin: 0;
        float: right;
    }
}

@media (min-width: 1140px) {
    .holidayGiveawayPopup .popupContContainer {
        padding: 0;
    }

        .holidayGiveawayPopup .copyCont p{
        font-size: 26px;
    }
}


/*@media (min-width: 1024px){

    .gdprFooterPopup{
        padding: 0;
    }

    .gdprFooterPopup p{
        float: left;
        width: 63%;
        margin: 15px 0 10px 10px;
    }

    .gdprFooterPopup span{
        float: right;
        margin: 20px;
        clear: none;
    }
}

@media (min-width: 1140px){

    .gdprFooterPopup p{
        width: 67%;
    }
}

@media (min-width: 1280px){

    .gdprFooterPopup p {
        width: 71%;
    }
    }*/

    </style>


    <!--[if IE 9]>
    <style>

    .backActIngCont{
        display: none;
    }

    .nav a.HLLink{
        margin: 0 9.5% 0 0;
    }

    .nav a.HLLink:last-child{
        margin: 0;
    }

    .bannerSection{
        margin: 60px 0 0;
    }

    h1{
        margin-top: 125px;
    }

    .prodDetPackCont{
        position: relative;
        top: 45px;
    }

    .single-post h1, .single-recipe h1, .single-ingredient h1{
        margin: 610px auto 0;
    }

    .popupClose {
        position: relative;
        top: -44px;
        float: right;
        right: -27px;
    }

    body.help-me-choose .prodSelect{
        margin-top: 60px;
    }

    .home .bannerSection{
        margin-top: 40px;
    }

    .bannerGreyStrip{
        top: 180px;
    }




    </style>
    <![endif]-->


