﻿/*=========raleway font css====================*/

@import url('https://fonts.googleapis.com/css?family=Raleway:400,400i,600,600i,700,700i,900');
body{
	font-family: 'Raleway', Arial, sans-serif!important;
	font-weight: 400!important;
	font-size: 18px!important;
}

#s4-bodyContainer, #s4-bodyContainer H1, #s4-bodyContainer H2, #s4-bodyContainer H3, #s4-bodyContainer .ms-h1, #s4-bodyContainer .ms-h2, #s4-bodyContainer .ms-h3, #s4-bodyContainer .ms-headerFont, #s4-bodyContainer .ms-core-navigation {
    font-family: 'Raleway', Arial, sans-serif!important;
}

#pm-menu {
    font-family: 'Raleway', Arial, sans-serif!important;
}


.pm-band .text {
    font-family: 'Raleway', Arial, sans-serif!important;
}

#footer-menu UL>LI A{
    font-family: 'Raleway', Arial, sans-serif!important;
}


.band-title H1 {
    font-family: 'Raleway', Arial, sans-serif!important;
    letter-spacing: 0; 
    font-weight: 700;
}

/*====new banner css start here===================*/

.imageContainer{
	    display: flex;
    flex-direction: column;
    position: relative;
	
}


	.imageDiv{
	height: 520px;
    width: 100%;
    background-image: url("../images/rebranding/main-banner.jpg");
	background-repeat:no-repeat;
	background-position:center top; 
    -ms-background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    position: relative;
		}	
		

.imageDiv img{

	display:none;
	
}







.purpleBG {
    background-color: #702B84;
    padding: 40px;
    text-align: left;
    position: absolute;
    left: 0;
    top: 0;
    width: 670px;
    box-shadow: 0 5px 25px #333;
    bottom: 0;
    height: 265px;
    right: 0;
	margin: auto 0;
    z-index: 1;
	
}

.purpleBG.spanishhght{height:280px;}

.imageContainer .purpleBG h2{     font-size: 2.778rem;
    font-weight: 900;
    color: #fff;
   text-transform: inherit;
    margin: 0!important;
    padding: 0!important;}
	.imageContainer .purpleBG p{ font-size: 1.111rem; font-weight: 600; color: #fff;}

	
.pm-band .text .text-inner{
	    transform: translate(-50%, -55%);
	
	
}
	
	
	
	
	
	


/*=============two banner css start from here=============*/
.home-recipe { height: 460px;}
.home-recipe.yellowbg{ 
     background-image: url("../images/rebranding/home-reciepe-1.png");
	background-color: #F8D311;
	background-repeat:no-repeat;
	background-position:right top; 
    -ms-background-size: contain;
    -webkit-background-size: contain;
    -moz-background-size: contain;
    background-size: contain;

}




.home-recipe.greenbg{ background-image: url("../images/rebranding/home-reciepe-2.png");
	background-color: #59D3C7;
	background-repeat:no-repeat;
	background-position:right 75px; 
    -ms-background-size: contain;
    -webkit-background-size: contain;
    -moz-background-size: contain;
    background-size: contain;
	
	
	

}


.home-recipe .content-receipe{
    width: 340px;
    text-align: left;
    position: absolute;
    left: 25px;
    top: 0;
    bottom: 0;
    height: 248px;
    margin: auto 0;	
}


	
	
	.home-recipe h3 {
    font-size: 1.778rem;
    font-weight: 900;
    color: #451B52;
    text-transform: inherit;
    margin: 0!important;
    padding: 0!important;
}
	
	
	
	
.home-recipe p{ font-size: 1rem; font-weight: 400; color: #451B52; margin-bottom: 20px;}


a.purpleRoundbtn{  background: -webkit-linear-gradient(bottom, rgb(112, 43, 132) 0%, rgb(145, 61, 169) 100%);
background: -o-linear-gradient(bottom, rgb(112, 43, 132) 0%, rgb(145, 61, 169) 100%);
background: -ms-linear-gradient(bottom, rgb(112, 43, 132) 0%, rgb(145, 61, 169) 100%);
background: -moz-linear-gradient(bottom, rgb(112, 43, 132) 0%, rgb(145, 61, 169) 100%);
background: linear-gradient(to top, rgb(112, 43, 132) 0%, rgb(145, 61, 169) 100%);
    box-shadow: 0 0 15px #a19d9d;
    color: #fff!important;
    border-radius: 50px;
    min-width: 250px;
    padding: 10px;
    text-align: center;
    font-size: 1.1rem;
    display: inline-block;}

a.purpleRoundbtn:hover{ text-decoration: none;}

.mrgntop20{ margin-top: 20px;}

.green-mobile-image, .yellow-mobile-image{ display: none;}

#pm-menu UL>LI[data-nav-color=Purple]>A, #footer-menu UL>LI[data-nav-color=Purple]>A {
    color: #702B84;
}

.textBtnWrapper p{ display:block!important;}

.textBtnWrapper p, .customVideoBand p, .customSection5 p{color: #451B52!important; font-size: 1rem;}



.pm-band.purple H1, .pm-band.purple H2, .pm-band.purple A, .pm-band.purple A:link, .pm-band.purple A:visited, .pm-band.purple A:active, .pm-band.purple A:hover, .pm-band.purple A:focus {
    color: #702B84;
}




.band-3imagetext.alignright .images .img1, .band-3imagetext.alignright .images .img2, .band-3imagetext.alignright .images .img3 {
    border-right: solid 0px #fff;
}

.band-3imagetext.alignleft .images .img1, .band-3imagetext.alignleft .images .img2, .band-3imagetext.alignleft .images .img3 {
    border-left: solid 0px #fff;
}


.customAboutus{ text-align:left; width: auto;    margin-top: 30px;}

.customAboutus a, .customAboutus h2{color:#702B84;}


/*========changes for spanish language============*/

html:lang(es-US) .band-recipe UL.recipe-stats LI{
     padding: 3px;
}


.customClassSection2 H2, .customSection5 H2, .customVideoBand h2{
    text-transform: inherit;
    font-size: 1.778rem;
    font-weight: 900;;
	color: #451B52!important;
}

.custom-innerpage-header h1{
	font-weight: 800;
}


.drinks-desktop-image{display: block;}
.drinks-mobile-image{display:none;}

.custom-innerpage-header img{ width:100%;}

.green.greencustom{background:#00944D!important;}


/*.pm-band.band-recipe.content .col-sm-half h3{color: #702B84!important;}*/

.band-recipe h3.purple {
    color: #702B84;
}


/*=====bold heading====*/

.headingBld{  font-weight: 600!important;}
.headingPurpleClr{ color: #702B84;}
.servHeading {font-family: 'Raleway', sans-serif!important; font-size: 1.14rem!important;
font-weight: 600;
}

.servHeadingIng {font-family: 'Raleway', sans-serif!important; font-size: 1.14rem!important;
font-weight: 700;
}

	.planImg-desktop{ display: block;}
	.planImg-mobile{ display: none;}


.customVideoBand .embed-responsive-16by9 img{ width:100%;}

.youTubeIcon {
    position: absolute;
    z-index: 1;
    top: 0;
    height: 59px;
    width: 82px;
    background-image:url("../images/youtube-icon-1.png");
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
	cursor: pointer;
}

.product-Also-Like-Cls{
	-webkit-display: flex; 
	-moz-display: flex; 
	-ms-display: flex; 
	-o-display: flex;
	display: flex;}

.product-Also-Like-Cls h4{
	margin-top:0!important; 
	font-family: 'Raleway', sans-serif!important;
	font-size: 1em; 
	font-weight: 700;

}



/*=======================kanchan added css=========================*/

.to-iframe iframe {
width: 300px;
    height: 100%;
    position: absolute;
    bottom: 0;
    top: 0;
}

.to-iframe{
    text-align:left;
    line-height:0.1rem;
}
/*
.ingredientInfo ul li:first-child em{
    font-family: 'Raleway', sans-serif!important;
    font-size: 1.14rem!important;
    font-weight: 600;
}
*/

.ingredientInfo em{
    font-family: 'Raleway', sans-serif!important;
    font-size: 1.125rem!important;
    font-weight: 600;
}

.prepInfoP p{
    font-family: 'Raleway', sans-serif!important;
    font-size: 1.125rem!important;
    font-weight: 600;
}


.nutriInfo3 {
 margin-top:10px;
}

/************************************1. Latest8/4-HP Page *************************************/

.trackerImageContainer.healthyCommunityContainer {margin-top: 0;}

.trackerImageContainer.healthyCommunityContainer .trackerPurpleBG h2 {width: auto;}

.trackerImageContainer.healthyCommunityContainer .trackerPurpleBG { 
    padding: 66px 14px 56px 6px;
}

.leftGrayArea.healthyCommunityBG.trackerPageContainer {
background: white;
padding: 40px 60px;
}

.leftGrayArea.healthyCommunityBG.trackerPageContainer h2 {
    margin-left: 0!important;margin-bottom: 20px!important;
}

.healthyCommunityFaqCustomLink{
    color: #702B84;
    text-decoration: underline;
    font-weight: 700;
}

.leftGrayArea.healthyCommunityBG.trackerPageContainer .trackerPageInner p{ font-size: 18px;}

li.myLink a.fontResizeDownloadHereLink {
    font-size: 18px;
}

.leftGrayArea.healthyCommunityBG.trackerPageContainer {
    background: white;
    padding: 40px 60px 40px 0px;
}

.communityTips{ padding-left:20px;}

/************************************Latest8/4-HP Page*************************************/


@media screen and (min-width: 768px){
#pm-menu {
    font-size: 1.389rem;
    font-weight: 900;
}

	.lang-menu{margin-top: 1px;}
	#pm-mainmenu .global-nav{margin-top: 10px;}
	ul.tips li{ padding-bottom:15px}
}

/*=========raleway font css end here====================*/


/*============*/

	.f-text	{    
    display: flex;
    justify-content: center;
    align-items: center;
	border-bottom: 25px solid #8BC53F;
}
		
		.btn-purple{ background: #923EAA; border-radius: 30px; min-width: 200px; color: #fff; padding: 10px; display: inline-block; text-align: center;}
		
		.text-con{ padding: 0 50px; text-align: center;}
		
		
		.btn-purple{ background: #923EAA; border-radius: 30px; min-width: 200px; color: #fff!important; padding: 10px; display: inline-block; text-align: center;}
		
		.btn-purple:hover, .btn-purple:focus{ color: #fff; text-decoration: none; background:#842D9C; }
		.dflex{ display: flex;}

.text-con h2{ color: #451b52; font-size:1.778rem; font-weight: 900;    text-transform: unset;}


/*===about us page banner css============*/

.aboutImageContainer{
	    display: flex;
    flex-direction: column;
    position: relative;
	
}


		.aboutImageDiv{     height: 520px;
    width: 100%;
        background-image: url("../images/rebranding/Aboutuscalfreshlogo.jpg");
	background-repeat:no-repeat;
	background-position:33px top; 
    -ms-background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    position: relative;
		}



.aboutPurpleBG {
    background-color: #702B84;
    padding: 40px 6px;
    text-align: left;
    position: absolute;
    left: 0;
    top: 0;
    width: 581px;
    box-shadow: 0 5px 10px #333;
    bottom: 0;
    height: 200px;
    right: 0;
    margin: auto 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}


.aboutImageContainer .aboutPurpleBG h2{     font-size: 2.7rem;
    font-weight: 800;
    color: #fff;
    text-transform: inherit;
    margin: 0!important;
    padding: 0!important;}




/*===tracker page css============*/

.trackerImageContainer{
    display: flex;
    flex-direction: column;
    position: relative;
    margin-top: 20px;
	
}


		.trackerImageDiv{     height: 520px;
    width: 100%;
        background-image: url("../images/rebranding/tracker-banner-image.jpg");
	background-repeat:no-repeat;
	background-position:bottom; 
    -ms-background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    position: relative;
		}	


/************************************2. Latest8/4-HP Page *************************************/
.trackerImageDiv.tracker1ImageDiv{
    background-image: url(../images/rebranding/CF_HP_Header-01.jpg);
    background-position: top!important;
}
/************************************Latest8/4-HP Page *************************************/





.trackerPurpleBG {
    background-color: #702B84;
    padding: 66px 105px 56px 56px;
    text-align: left;
    position: absolute;
    left: 0;
    top: 0;
    width: 578px;
    box-shadow: 0 5px 10px #333;
    bottom: 0;
    height: 228px;
    right: 0;
    margin: auto 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}


.trackerImageContainer .trackerPurpleBG h2{     font-size: 2.7rem; width:420px;
    font-weight: 800;
    color: #fff;
    text-transform: inherit;
    margin: 0!important;
    padding: 0!important;}



.customTracker{text-align: left; width: auto; margin-top: 30px;}
.customTracker h2{font-size:1.8888888888888888rem!important;  	font-weight: 900; color: #702B84;     text-transform: none;}
.paragraphTracker{ margin-bottom: 60px;}
.paragraphTracker p{ font-size: 1em; }



.dflex-custom{ -webkit-display: flex;
-moz-display: flex;
-ms-display: flex;
-o-display: flex;
display: flex;
	
	
-webkit-flex-direction: row;
-moz-flex-direction: row;
-ms-flex-direction: row;
-o-flex-direction: row;
flex-direction: row;	

}


.trackerPageContainer h2{font-size:1.8888888888888888rem;  	font-weight: 900; color: #702B84;    text-transform: none;    margin: 0!important; margin-bottom: 35px!important;margin-left: -20px!important;}
ul.tips{margin: 25px 0 0 0; padding: 0;}
li.myLink{ list-style: none; margin-left: -20px;}
li.myLink a{ color: #702B84; font-size: 0.8888888888888888rem; text-decoration:underline; font-weight:700 }

.rightIframeArea .myIframe{ width:100%; height: 500px;}

	.trackerPageContainer {
    text-align: left;
    background: #F5F2F2;
    border-top: 25px solid #702B84;
    padding: 70px 60px;
    margin-right: 20px;
   
}

.rightIframeArea img{ width: 100%;}









/*=======================Header related css changes start from here=========================*/

/************************************3. Latest8/4-HP Page *************************************/
@media (min-width:768px) and (max-width:799px) {
.trackerImageContainer.healthyCommunityContainer .trackerPurpleBG {
width: 480px; 
padding: 66px 6px 56px 6px; 
}
.leftGrayArea.healthyCommunityBG.trackerPageContainer {
padding: 30px 0px 60px 0px;

}
}
/************************************Latest8/4-HP Page *************************************/

@media (min-width:800px) and (max-width:1024px) {

/************************************4. Latest8/4-HP Page *************************************/
.leftGrayArea.healthyCommunityBG.trackerPageContainer {
padding: 30px 0px 60px 0px;
}
/************************************Latest8/4-HP Page *************************************/

    .recipe-stats-label {
        font-size: 1rem;
    }

    .band-recipe UL.recipe-stats LI {
        float: left;
        padding: 15px 8px;
    }

    #pm-menu {
        bottom: 6px;
    }
}

@media (min-width:768px) and (max-width:1024px) {

/************************************5. Latest8/4-HP Page *************************************/
	.trackerImageContainer.healthyCommunityContainer .trackerPurpleBG {
     width: 480px;
	padding: 66px 6px 56px 6px;
}
/************************************Latest8/4-HP Page *************************************/
    #pm-mainmenu {
        display: block;
        position: absolute;
        top: 0;
        right: 50px;
        left: 210px;
    }


        #pm-mainmenu .lang-menu, #pm-mainmenu .social-media {
            float: right;
        }


        #pm-mainmenu .global-nav {
            position: absolute;
            right: 0;
            top: 30px;
            /*left: 100px;*/
        }

    .global-nav UL A, .global-nav UL A:link {
        padding: 2px 0 0px 5px;
    }

    #pm-menu {
        bottom: 12px;
    }
}

@media (min-width: 768px) and (max-width:800px) {

    #pm-menu UL > LI > A {
        padding-left: 15px;
    }

    .band-recipe UL.recipe-stats LI .recipe-stats-num {
        font-size: 25px;
    }

    .recipe-stats-label {
        font-size: .8125rem;
    }

    .band-recipe UL.recipe-stats LI {
        float: left;
        padding: 5px 1px;
    }

    #pm-menu {
        bottom: 6px;
    }
}

@media screen and (min-width: 768px) {
    #pm-top {
        padding: 15px 50px 0;
        height: 150px;
       /* margin-top: 10px;*/
       padding: 30px 50px 0;
    }


    #pm-logo {
        width: 247px;
        height: 130px;
	    margin-top: -3px;
    }


    .lang-menu > A {
        border-top: 1px solid #702b84;
    }


    FOOTER .footer-logo {
        margin-top: 60px;
    }


    #pm-menu {
        bottom: 9px;
        left: 315px;
    }


    FOOTER {
        font-size: 1rem;
    }
}

#footerDisclaimer a {
    text-decoration: none;
}

.lang-menu > A {
    /*display: block;
    font-weight: bold;
    text-transform: uppercase;
    padding: 0 6px;
    border: 1px solid #702b84;
    color: #0f9a57;
    font-size: 0.7222222222222222rem;
    height: 40px;
    line-height: 40px;*/

   display: block;
    font-weight: 500;
    text-transform: none;
    padding: 6px;
    border: 0px solid #702b84;
    color: #000;
    font-size:0.88rem;
    height: 40px;
    line-height: 35px;
}


.social-media .fa {
    color: #0f9a57;
	 font-size: 20px;
}


.social-media A {
  border: 0px solid #702b84; width:auto; height: auto;
}


.social-media A.header-tw:before, .social-media A.header-pn:before {
    top: 10px;
    left: 10px;
}

.social-media A.header-fb:before{
    top: 10px;
    left: 13px;
	
	
}
.social-media A.header-yt:before{
    top: 10px;
    left: 8px;
	
	
}


    .social-media A:hover {
        background-color: transparent!important;
    }



.social-media ul{
  margin:0;
  padding:0;
  list-style-type: none;
}
.social-media ul li{
  display:inline-block
}
.social-media ul li a img{ 
  width:40px;
  height: 40px;
  margin-left:15px;
}




FOOTER {
    border-top: 2px solid #00944d;
}

.social-media-footer .fa {
    color: #00944d;
}

.social-media-footer A {
    border-right: 1px solid #702b84;
    border-left: 1px solid #702b84;
    border-bottom: 1px solid #702b84;
    border-top: 1px solid #702b84;
    color: #00944d;
}


    .social-media-footer A:hover {
        background-color: #00944d !important;
    }

.social-media-footer {
    margin-top: 60px;
}






/*----------ipad pro secific----------- */

/* Portrait */

@media only screen and (min-device-width: 834px) and (max-device-width: 834px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2) {


    #pm-mainmenu {
        display: block;
        position: absolute;
        top: 0;
        right: 50px;
        left: 210px;
        text-align: right;
    }



    .social-media {
        display: inline-block;
    }

        .social-media .fa {
            text-align: left;
        }

    .lang-menu {
        display: inline-block;
    }

    #pm-mainmenu .global-nav {
        position: absolute;
        right: 0;
        top: 40px;
    }

    .global-nav UL A, .global-nav UL A:link {
        padding: 5px 0 5px 5px;
    }

    #pm-mainmenu .lang-menu, #pm-mainmenu .social-media, #pm-mainmenu .global-nav, #pm-mainmenu .system-search {
        float: none;
    }


    .band-recipe UL.recipe-stats LI .recipe-stats-num {
        font-size: 25px;
    }

    .recipe-stats-label {
        font-size: .8125rem;
    }

    .band-recipe UL.recipe-stats LI {
        float: left;
        padding: 5px 1px;
    }

    #pm-menu {
        bottom: 6px;font-size: 1.1rem;  left:270px;
    }

    #pm-mainmenu .global-nav {
        left: 50px;
        width: 100%;
    }

    .global-nav UL LI {
        float: left;
        padding-right: 7px;
    }
	
	#pm-top{ padding: 15px 15px 0; }
	
	.lang-menu {
    margin-right: 0;
    margin-left: 5px;
	    margin-top: 0px;
		top:7px;
}

	.imageDiv {
    height: 313px;
	}

	.home-recipe .content-receipe{left:20px;}
	.imageContainer .purpleBG h2 {
    font-size: 2.0rem;
	}
	
	
	html:lang(es-US) .purpleBG{padding:20px; height: 200px; width:480px; }
	.purpleBG{width:500px; height:200px;}
	.textBtnWrapper .mrgntop20{margin-top:5px!important;}
	.textBtnWrapper p{
	font-size: 1rem!important;
    display: block!important;
    line-height: 1rem!important; margin-top:-10px!important; margin-bottom:0!important;
	}
	
	a.purpleRoundbtn{padding:5px;}
	
	.pm-band .text {
    font-size: 1rem;
	}



	
	
	.home-recipe .content-receipe {
    width: 240px;
    left: 20px;

}
	
	
	
	a.purpleRoundbtn{min-width:215px;}
	
	.home-recipe h3{ width:80%;}
.home-recipe.greenbg {
        background-position: 220px top;
}

.home-recipe.yellowbg {
    
    background-position: 220px top;
}

.home-recipe .content-receipe{
height: 320px;	
	
	
}


.aboutImageDiv {
    height: 310px;
    background-position: right top;
}

.trackerImageDiv{
    height: 310px;
    background-position: right top;
}



.aboutPurpleBG {
    padding: 10px;
    width: 350px;
	height: 156px;
}


.trackerPurpleBG{
    padding: 20px;
    width: 350px;
	height: 156px;

}
	
	
	
.trackerPageContainer {
        padding: 30px;
	}
	
ul.tips li {
    padding-bottom: 0;
}	
	
.aboutImageContainer .aboutPurpleBG h2 {
    font-size: 1.7rem;
	
}

.trackerImageContainer .trackerPurpleBG h2 {
    font-size: 2.2rem;
	
}




	
	
	

#pm-logo {
    width: 175px;
    height: 130px;
    margin-top: 10px;
}


	.customAboutus{ margin-left:0!important; padding: 0 50px;} 
	#footer-menu UL > LI A {
    font-size: .7em;
		padding: 5px 0px;
}
	
	
	.textBtnWrapper p, .customSection5 p {
    display: none!important;
}
	
	
	.customClassSection2 H2 {

    margin-bottom: 15px!important;
} 

    #footer-menu UL>LI A{padding: 5px 8px;}

	.green.greencustom{font-size:4rem;}
	
	html:lang(es-US) .band-recipe UL.recipe-stats LI{
     padding: 0px;
}
	
	
	    .tipsEating .rightIframeArea{
        margin-right:20px;
    }
    ul.tips li {
        padding-bottom: 5px;
    }
	
	
	
}

/* Landscape */

@media only screen and (min-width: 1112px) and (max-width: 1112px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 2) {

    #pm-mainmenu {
        display: block;
        position: absolute;
        top: 0;
        right: 50px;
        left: 300px;
        text-align: right;
    }



    .social-media {
    display: inline-block; 
    }

        .social-media .fa {
            text-align: left;
        }


		

    #pm-mainmenu .global-nav {
        position: absolute;
        right: 0;
        top: 40px;
		left:0;
    }

    .global-nav UL A, .global-nav UL A:link {
        padding: 5px 0 5px 5px;
    }

    #pm-mainmenu .lang-menu, #pm-mainmenu .social-media, #pm-mainmenu .global-nav, #pm-mainmenu .system-search {
        float: none;
    }



    .recipe-stats-label {
        font-size: 1rem;
    }

    .band-recipe UL.recipe-stats LI {
        float: left;
        padding: 15px 8px;
    }

    #pm-menu {
        bottom: 6px;
    }
	
	
	
  .lang-menu {
        display: inline-block; top:7px;
    }

	
		.home-recipe .content-receipe {
    width: 240px;
    left: 20px;

}
	
	
	
	a.purpleRoundbtn{min-width:215px;}
	
		.home-recipe h3{ width:90%;}


#pm-logo {
    width: 225px;
    height: 130px;
    margin-top: 0px;
}

.home-recipe.yellowbg {
    
    background-position: 280px top;
}


.aboutImageDiv {
    height: 410px;
    background-position: right top;
}

.trackerImageDiv {
    height: 410px;
    background-position: right top;
}

	
	
	

.aboutImageContainer .aboutPurpleBG h2 {
    font-size: 2.2rem;

}

.trackerImageContainer .trackerPurpleBG h2 {
    font-size: 2.7rem;

}


.aboutPurpleBG {
    padding: 40px 10px;
    width: 450px;
}

.trackerPurpleBG {
    padding: 40px 30px;
    width: 450px;
}

.customAboutus{ margin-left:0!important; padding: 0 50px;} 

	
}



/* Large screens ----------- */

@media (min-width:1400px){
		
			.imageDiv{    
        background-image: url("../images/rebranding/main-banner-big.jpg");
	    background-position: center bottom;
		}
	
	
	
	
}

@media (min-width:1400px) and (max-width:2000px) {
    #pm-mainmenu .global-nav {
        max-width: 825px;
    }

    #pm-mainmenu {
        top: 10px;
    }
	

}

























/* Desktops and laptops ----------- */
@media (min-width:1201px) and (max-width:1399px) {
	
	 #pm-mainmenu .global-nav {
        max-width: 680px;
    }

	
	
    html:lang(es-US)   #pm-mainmenu .global-nav {
        max-width: 586px;
    }

    #pm-mainmenu {
        top: 10px;
    }
}



/*=============footer related change===============*/

#footer-menu{clear:both;}


#footer-menu UL {
    display: table;
    width: 100%;
    margin: 50px 0;
}

    #footer-menu UL li {
        display: table-cell;
        width: auto;
        float: none;
    }

    #footer-menu UL > LI A {
        font-size: 1em;
		font-weight: 700;
    }

		
@media(min-width:1200px) {
#footer-menu UL {
       width: 90%;
    margin: 50px auto;
}	

html{
	font-size: 18px!important;
}


}
	
@media(max-width:767px) {
	
		html, body{
		font-size: 16px!important;
}

/************************************8. Latest8/4-HP Page *************************************/

.trackerImageContainer.healthyCommunityContainer .trackerPurpleBG {
padding: 20px 14px 20px 6px;
}

.communityTips {
    padding-left: 17px;
    margin-left: -2px;
}

li.myLink {
    list-style: none;
    margin-left: -15px;
}

li.myLink a.fontResizeDownloadHereLink {
    font-size: 16px;
}
    .leftGrayArea.healthyCommunityBG.trackerPageContainer .trackerPageInner p { font-size: 16px;} 
/************************************Latest8/4-HP Page *************************************/	
	.servHeading {font-size: .8125rem!important;}
    	
    #footer-menu UL {
        display: block;
        width: 100%;
    }

        #footer-menu UL li {
            display: block;
        }

    #pm-logo {
        /*width: 140px;
        height: 70px;*/
        width: 240px;
        height: 70px;
    }

    #pm-menu-toggle A IMG{
        width:32px;
        height: 32px;
    }
    .social-media-footer a.hidden-xs {
        display: inline-block !important;
    }

    .pm-public-master HEADER.fixedHeader {
       /* position: absolute !important;*/
    }

    .band-recipe UL.recipe-stats LI {
        padding: 3px;
    }

        .band-recipe UL.recipe-stats LI .recipe-stats-num {
            font-size: 23px;
        }

        .band-recipe UL.recipe-stats LI .recipe-stats-label {
            font-size: .7125rem;
        }
	
	.purpleBG {
    padding: 20px;
    position: static;
    width: 100%;
    height: auto;
    text-align: center;
}
	.purpleBG.spanishhght{height:auto;}
	
	.imageDiv {
    /*height: 190px;*/
    height: 243px;
    background-image: url(../images/rebranding/main-banner-mobile.png);
	}
	
	.imageDiv img{ position: static;}
	
	
	.imageContainer .purpleBG h2 {
    font-size: 1.3rem;
    font-weight: 900;
}
	
	.imageContainer .purpleBG p {
    font-size: 0.7rem;
    font-weight: 600;
}
	
	
	
	.home-recipe.yellowbg {
    background:#F8D311;
		
}
	
	.yellow-mobile-image{
	 position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%; display: block;
	max-height:200px;
}

	
	
	
	
	.home-recipe {
    height: 430px;
}
	
	
	.home-recipe .content-receipe {
    width: 100%;
    position: static;
    text-align: center;
    padding: 30px;
}
	
	
	
	
	
	.home-recipe.greenbg {
    background: #59D3C7;

}
	
	.green-mobile-image{
	 position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    width: 60%; display: block;
		    margin: 0 auto;
			    max-height: 200px;
}

	
	
	
	
	
	#footer-menu UL{ margin: 20px 0;}	
	.social-media-footer {
    margin-top: 18px;
}
	FOOTER .footer-logo {
    margin-top: 6px;
}
	#s4-bodyContainer .main-content{ clear:both;}
	header #pm-menu ul li{ width:32%; text-align:center;}
	header #pm-menu ul li:last-child{ width:35%;}
	
html:lang(es-US) header #pm-menu ul li:nth-child(1){  width:40%;}
html:lang(es-US) header #pm-menu ul li:nth-child(2){ width:25%;}
html:lang(es-US) header #pm-menu ul li:nth-child(3){ width:35%;}
	
html:lang(es-US) header.mobile #pm-menu ul li{ width:100%; text-align:left;}
	
	header.mobile #pm-menu ul li{ width:100%; text-align:left;}
	#pm-menu ul li a{
	
        font-size: 1.11rem;
        font-weight: 700;
        margin-left: 0px;
        padding: 4px 0;
    }}
	
	#pm-menu UL>LI>A {
    padding: 5px 0 5px 0px;
}
	
	
	#pm-menu-toggle A {
    height: 32px;
    border: solid 0px #451B52;
    color: #773488;
    font-size: .875rem;
    padding: 9px;
}
	
	.mobile #pm-mainmenu{ top: 270px;background: #EDF5D4; height:150px;}
.mobile #pm-menu UL>LI{
border-top:0;
}


	
	

	.home-recipe.yellowbg a.purpleRoundbtn{min-width: 210px; }
	.home-recipe.greenbg a.purpleRoundbtn{min-width: 210px; }
	a.purpleRoundbtn{    
	min-width: 150px;
    padding: 3px;
    margin-bottom: 14px;font-weight: 700;}
		
	.pm-band H2{ margin-top: 15px!important; font-size: 1.35rem;}

	.mobile #pm-menu {
    	margin-top:20px;
	background: url("../images/rebranding2024/cdph-HealthierFutureStripBg.jpg") no-repeat bottom left #00944D;
        padding:10px 10px 30px 10px;
	}

.mobile #pm-menu ul li a{color:#fff!important;}
	
	.home-recipe h3 {
    width: 100%;
}


.textBtnWrapper p {
    display: none!important;
    margin-bottom: 0;
    margin-top: 0!important;
    line-height: inherit;
}

.aboutImageDiv{ height:280px;
	background-image: url("../images/rebranding/Aboutuscalfreshlogo-mobile.jpg");

}

.aboutPurpleBG{ padding: 20px; position: static; width: 100%; height: auto; text-align: center;}
.aboutImageContainer .aboutPurpleBG h2	{font-size: 1.3rem; font-weight: 900;}

html:lang(es-US) .purpleBG{
  height:auto;
}


.customAboutus {
    width: auto;
    margin-left: 15px;
    margin-right: 15px;
}

#s4-bodyContainer .main-content.fixedHeader {
    margin-top: 107px;
}

.drinks-desktop-image{display: none;}
.drinks-mobile-image{display:block;}
	
.customClassSection2 H2, .customSection5 H2 {
    font-size: 1.36rem;
}	
	
	
	
		.aboutImageDiv{    
	background-position:right top; 

		}		
	
	.custom-innerpage-header h1 {
    font-size: 2.5rem;
    line-height: 100px;
}
	
	
	.custom-innerpage-header IMG {
    margin: 0 auto 100px auto;
	}

	
	
	
.trackerImageDiv{ height:234px;
	background-image: url("../images/rebranding/tracker-banner-image-mobile.jpg");
    background-position: 0 top;
}

/************************************6. Latest8/4-HP Page *************************************/
.trackerImageDiv.tracker1ImageDiv{ height:234px;
	background-image: url("../images/rebranding/CF_HP_Header-01_mobile.jpg");
    background-position: 0 top;
}
/************************************Latest8/4-HP Page *************************************/


.trackerPurpleBG{ padding: 20px; position: static; width: 100%; height: auto; text-align: center;}
.trackerImageContainer .trackerPurpleBG h2	{font-size: 2.25rem; font-weight: 900;}

	
	
	.trackerPageContainer {
    margin-right: 0;
    height: auto;
    margin-bottom: 15px;
    order: 1;
    border-top: 0;
    padding: 50px 40px;
		background:transparent;
}

	.trackerPageContainer h2{
	font-size: 1.8888888888888888rem!important;
    text-align: center;
    z-index:9;
    position:relative;

	}	

.trackerPageContainer:before{
position:absolute;
background:#fff;
content:"";
width:100%;
height:150px;
left:0;
top:0;
z-index:-1;
}
	
	
	.mobileTip{ display: block!important; font-size: 1.888888888888rem; color: #68287A;    font-weight: 900;}
	
	ul.tips {
     margin: 25px -55px 0 -55px;
    padding: 0;
    list-style: none;
    font-weight: 700;
    font-size: 1.2rem;
    color: #68287A;
}
	
	ul.tips li {
    padding: 15px 40px;
    border-top: 15px solid #68287A;
    margin-top: -14px;
    margin-bottom: 15px;
    border-bottom: 15px solid #fff;
	    line-height: 25px;
		    background: #f5f5f5;
	}
	
	
	ul.tips li.myLink{ background:#fff;    border-top: 0;}
	
	
	
	
	
	.dflex-custom{ -webkit-display: flex;
-moz-display: flex;
-ms-display: flex;
-o-display: flex;
display: flex;
	
	
-webkit-flex-direction: column;
-moz-flex-direction: column;
-ms-flex-direction: column;
-o-flex-direction: column;
flex-direction: column;	

}
	
		.customTracker, .dflex-custom {
    margin-left: 15px;
    margin-right: 15px;
}
	
	.customTracker h2 {
    font-size: 1.8888888888888888rem!important;
    color: #451B52;
	text-align: center;
}
	
	
.paragraphTracker {
    margin-bottom: 35px;
}	
	.planImg-desktop{ display: none;}
	.planImg-mobile{ display: block;}	
	
	
	.to-iframe{ text-align: center;}
	
	.to-iframe iframe {
    width: 300px;
    height: 600px;
    position: relative;
    bottom: 0;
    top: 0;
}
	
/************************************7. Latest8/4-HP Page *************************************/
.leftGrayArea.healthyCommunityBG.trackerPageContainer {
    padding: 30px 0px 60px 0px;
}
.leftGrayArea.healthyCommunityBG.trackerPageContainer h2 {
    text-align: center;
	margin-top: 0!important;

}
/************************************Latest8/4-HP Page *************************************/
	
}


@media (min-width:300px) and (max-width:400px) {
#pm-menu ul li a {
    font-size: 0.7rem;
}
	
	.aboutImageDiv {
    height: 220px;
	}

   .customClassSection2 H2, .customSection5 H2 {
    font-size: 1rem;
}
	a.purpleRoundbtn{font-size:.9rem;}
	
	.mobile #pm-mainmenu {
    top: 150px;
}
	
	
	
}


.lang-menu UL#selectlang, .band-search .form-dropdown {
    text-transform: uppercase;
    font-size: 13px;
}

@media screen and (min-width: 768px){
.lang-menu UL.show#selectlang, .band-search .show.form-dropdown {
    z-index: 9999;
}
	
	html:lang(es-US) .textBtnWrapper .mrgntop20 {
    margin-top: 10px;
}
.customAboutus {

    margin-left: 50px;
    margin-right: 50px;
}

	
	.customTracker, .dflex-custom {
    margin-left: 50px;
    margin-right: 50px;
}
	

	
	
}


.global-nav UL A, .global-nav UL A:link {
   	/* color: #00944d;
	font-weight: 700;
	font-size: 0.7777777777777778rem;*/
  	color: #000;
	font-weight: 500;
	font-size: 16px;
}



    .global-nav UL A:hover, .global-nav UL A:link:hover {
        color: #000;;
    }

    .global-nav UL A:visited, .global-nav UL A:link:visited {
        color: #000;
    }

.breadcrumb UL LI {
    float: left;
}

    .breadcrumb UL LI:before {
        margin-right: 3px;
        float: left;
    }

#footerDisclaimer p {
    color: #702B84;
}


.lang-menu > A:hover {
    background-color: transparent;
color:#000;
}

.lang-menu UL#selectlang A, .band-search .form-dropdown A {
    color: #000;
   font-size:16px;
font-weight:500;
}


FOOTER A{ font-weight: 400;}

#footer-menu UL>LI{ border-top:0;}



@media print{
.band-recipe .col-sm-half:last-child h3.headingPurpleClr.headingBld{ font-weight:600!important;}
}
/*=======================new css for mobile view=========================*/

@media only screen  and (max-device-width : 767px)
{
	
    .trackerPageContainer{ margin-bottom:-60px;}
	.to-iframe{    text-align:center;    }
	.mobileTip { margin-top: 25px; }
	
    
}


@media (min-width : 768px){
    
    .tipsEating .trackerPageContainer{
        flex: 3;
     }
        
    .tipsEating .rightIframeArea{
        -o-flex-basis: 300px; 
        -webkit-flex-basis: 300px; 
        -ms-flex-basis: 300px; 
        flex-basis: 300px; 

	}
    .trackerImageDiv{
        background-position: bottom !important;

    }

   
    
}

  












/* == iPad/iPhone [portrait + landscape] == */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) @media only screen and (max-device-width: 480px) {
    #s4-workspace {
        overflow-y: scroll;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* == iPhone 6 in portrait & landscape == */
@media only screen and (min-device-width : 375px) and (max-device-width : 667px) { /* STYLES GO HERE */
    #s4-workspace {
        overflow-y: scroll;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* == iPhone 6 Plus in portrait & landscape == */
@media only screen and (min-device-width : 414px) and (max-device-width : 736px) { /* STYLES GO HERE */
    #s4-workspace {
        overflow-y: scroll;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}
/* == iPhone 6 Plus in portrait & landscape == */
@media only screen and (min-device-width : 320px) and (max-device-width : 568px) { /* STYLES GO HERE */
    #s4-workspace {
        overflow-y: scroll;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* == iPhone 2G-4S in portrait & landscape == */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) { /* STYLES GO HERE */
    #s4-workspace {
        overflow-y: scroll;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* == iPad in portrait & landscape == */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) { /* STYLES GO HERE */
    #s4-workspace {
        overflow-y: scroll;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

@media screen and (min-width: 768px){
.newHeaderSpace {
    margin-top: 34px;
    display: block;
}
}

@media screen and (min-width: 768px) {
.global-nav UL LI:last-child{
    border-right: 1px solid #707070;
margin-right:10px;

}
}

.mobile .global-nav UL LI{
border-top:0;
}
.mobile .global-nav UL{
border-bottom:0;}

.mobile .global-nav UL A, .mobile .global-nav UL A:link{
font-size:0.88rem;
}


@media screen and (max-width: 767px) {
#pm-menu{
display:none;
}
.mobile #pm-menu{
display:block;
}
.mobile #pm-mainmenu .global-nav{
  position:absolute !important;
  left:0;
}
.mobile .global-nav UL A, .mobile .global-nav UL A:link{
     text-transform: none;
    padding-top: 0;
    padding-bottom: 0;
}


.mobile .lang-menu{
position:absolute;
  right:0;
z-index:100;
}
.mobile .social-media{
position:absolute;
  right:0;
top:60px;
}
.lang-menu UL.show#selectlang, .band-search .show.form-dropdown{
background:#fff!important;
}
.social-media ul li a img {
    width: 30px;
    height: 30px;
    margin-left: 10px;
}
#pm-top{
    padding: 15px;
}

}

.social-media{
    padding-top:7px;
}
#pm-menu-toggle {
    right: 0px;
}

@media (min-width:768px) and (max-width:991px) {
.social-media ul li a img{
    width:20px;
    height:20px;
}
.lang-menu > A{
    height: auto;
    line-height: normal;
}
.global-nav UL A, .global-nav UL A:link{
    font-size:0.83rem;
}
.global-nav UL LI:last-child{
    border-right:0;
}
#pm-menu {
    font-size:0.88rem;
    font-weight: 600;
    left: 290px;
}
#pm-top{
    padding: 0px 20px 0;
}
#pm-menu UL>LI>A {
    padding: 5px 0 5px 10px;
}
}
@media (min-width:992px) and (max-width:1024px) {
    .social-media ul li a img{
        width:30px;
        height:30px;
    }
    .lang-menu > A{
        height: auto;
        line-height: 33px;
    }
    .global-nav UL A, .global-nav UL A:link{
        font-size:1rem;
    }
    .global-nav UL LI:last-child{
        border-right:0;
    }
    #pm-menu {
        font-size:1.11rem;
        font-weight: 600;
        left: 290px;
    }
    #pm-top{
        padding: 36px 20px 0;
    }
    #pm-menu UL>LI>A {
        padding: 5px 15px 5px 10px;
    }
    }

@media screen and (min-width: 768px) {
   
    #pm-menu ul li:first-child{
		display:none !important;
	}
	 #pm-menu UL>LI>A {
      padding-right: 60px
  }


}
