@charset "utf-8";
/* CSS Document */
*{
	padding: 0px;
	margin: 0px;
	text-decoration: none;
	border: none;
	}
#wrapper{
	width: 100%;
	float: left;
	}

/***** header *****/
#header{
	padding: 14px 0px 8px 0px;
	width: 100%;
	float: left;
	}
.logo{
	float: left;
	}
.nav{
	float: right;
	}
.nav ul{
	text-align: right;
	list-style: none;
	}
.nav ul li{
	display: inline-block;
	padding: 20px 20px 2px 10px;
	}
.nav ul li a{
	color: #575757;
	font-size: 14px;
	font-family: 'Raleway', sans-serif;
	font-weight: 700;
	}
.nav ul li a: hover{
	color: #97be22;
	}

/***** photo sections *****/
#photosection{
	width: 100%;
	float: left;
	padding: 40px 0px;
	}

.hero{
	background: url(../imgs/distressed_wood.png) no-repeat;
	background-size: 100% 98%;
	padding: 20px 0px 0px;
	width: 100%;
	float: left;
	text-align: center;
}
.sup{
	font-size:6px;
	vertical-align: super;
	}


/***** grey sections *****/
#greysection{
	width: 100%;
	float: left;
	background: #f3f3f3;
	padding: 40px 0px;
	}
.sectionbordertop{
	width: 100%;
	float: left;	
	padding-top: 125px;
	}
.sectionbordertop img{
	width: 100%;
	}
.sectionborderbotm{
	width: 100%;
	float: left;		
	padding-bottom: 125px;
	}
.sectionborderbotm img{
	width: 100%;
	}


/***** full column width sections *****/
#fullwidth{
	width: 100%;
	padding-bottom: 140px;
	float: left;
	}
.story{
	width: 80%;
	margin: auto;
	}
.about{
	width: 100%;
	float: left;
	}
.about h1{
	color: #575757;
	font-size: 28px;
	font-family: 'Raleway', sans-serif;
	font-weight: 400;
	}
.about p{
	padding-top: 15px;
	line-height: 26px;
	color: #575757;
	font-size: 14px;
	font-family: 'Raleway', sans-serif;
	font-weight: 400;
	}
.headingemph{
	font-family: 'Raleway', sans-serif;
	font-weight: 900;
	}
.illus{
	width: 100%;
	float: left;
	text-align: center;
	padding-top: 80px;
	}


/*****video*****/
.video{
	text-align: center;
	}


/***** three column sections *****/
#3colsection{
	width: 100%;
	padding-top: 20px;
	padding-bottom: 20px;
	float: left;
	}
.infosection{
	width: 80%;
	margin: auto;
	}
.col-left{
	width: 32%;
	float: left;
	}
.col-left img{
	width: 100%;
	}
.col-middle-heading{
	width:98%;
	float:left;
	padding-left:2%;
	}
.col-middle-heading h1{
	padding-top: 40px;
	color: #575757;
	font-size: 28px;
	font-family: 'Raleway', sans-serif;
	font-weight: 400;
	}
.col-middle{
	padding-left: 2%;
	width: 48%;
	float: left;
	}
.col-middle p{
	color: #575757;
	line-height: 26px;
	font-size: 14px;
	padding-top: 20px;
	font-family: 'Raleway', sans-serif;
	font-weight: 400;
	}
.col-right{
	padding-left: 2%;
	width: 48%;
	float: left;
	}
.col-right p{
	padding-top: 20px;
	color: #575757;
	font-size: 14px;
	line-height: 26px;
	font-family: 'Raleway', sans-serif;
	font-weight: 400;
	}
.col-right-data{
	width:68%;
	float:left;
	}


/***** benefits sections *****/
#fullwidthgraphic{
	width: 100%;
	float: left;
	background: #f3f3f3;
	margin-top:-5px;
	}
.healthbenefits{
	width: 100%;
	float: left;
	padding-top: 50px;
	text-align: center;
	}
.healthbenefits h1{
	padding-top: 30px;
	color: #575757;
	font-size: 28px;
	font-family: 'Raleway', sans-serif;
	font-weight: 400;
	}
#infographic-inner{
	width: 90%;
	margin: auto;
	position: relative;
	}
.infographic{
	width: 100%;
	padding-top: 45px;
	padding-bottom: 45px;
	float: left;
	text-align: center;
	}
.infographic img{
	width: 100%;
	display:block;
	margin:auto;
	}
.resources{
	width: 80%;
	float: left;
	padding-left: 12%;
	}
.resources p{
	color: #575757;
	line-height: 18px;
	font-size: 10px;
	padding-top: 14px;
	font-family: 'Raleway', sans-serif;
	font-weight: 400;
	}
.resources a{
	color: #575757;
	font-size: 10px;
	font-family: 'Raleway', sans-serif;
	font-weight: 400;
	}


/***** shopping *****/
#shopnow{
	width: 80%;
	margin: auto;
	}
.productshot{
	width: 30%;
	float: left;
	clear: left;
	}
.productshot img{
	padding-top: 80px;
	width: 100%;
	}
.productbody{
	width: 70%;
	float: left;
	}
.productdescription{
	width: 100%;
	float: left;
	}
.productdescription h1{
	padding-top: 100px;
	color: #575757;
	font-size: 28px;
	font-family: 'Raleway', sans-serif;
	font-weight: 400;
	}
.productdescription p{
	font-family: 'Raleway', sans-serif;
	font-weight: 400;
	color: #575757;
	font-size: 14px;
	line-height: 26px;
	padding-bottom: 45px;
	padding-top: 20px;
	}
.productrow{
	width: 100%;
	float: left;
	text-align: center
	}
.addtocart{
	width: 100%;
	float: left;
	padding-top: 50px;
	padding-bottom: 150px;
	text-align: center;
	}
.addtocart a{
	border: 1px solid #97be22;
	font-family: 'Raleway', sans-serif;
	font-weight: 700;
	padding: 10px 50px;
	border-radius: 2px;
	font-size: 13px;
	color: #97be22;
	}
.checkout{
	width: 100%;
	float: left;
	padding: 80px 0px;
	text-align: center;
	}
.checkout a{
	color: #fff;
	font-family: 'Raleway', sans-serif;
	font-weight: 700;
	border-radius: 2px;
	background: #97be22;
	padding: 11px 55px;
	font-size: 13px;
	}



/***** recipes *****/
.ingredients{
	padding-left: 2%;
	width: 30%;
	float: left;
	}
.ingredients p{
	color: #575757;
	line-height: 18px;
	font-size: 12px;
	padding-top: 14px;
	font-family: 'Raleway', sans-serif;
	font-weight: 400;
	}
.ingredients ul{
	padding-left: 8%;
	padding-top: 14px;
	}
.ingredients ul li{
	line-height: 18px;
	color: #575757;
	font-size: 12px;
	font-family: 'Raleway', sans-serif;
	font-weight: 400;
	list-style: none;
	}
.reciperight{
	padding-left: 2%;
	width: 66%;
	float: left;
	}
.reciperight p{
	padding-top: 26px;
	padding-bottom: 120px;
	color: #575757;
	font-size: 14px;
	line-height: 26px;
	font-family: 'Raleway', sans-serif;
	font-weight: 400;
	}




/***** grey dividers *****/
#angledivider{
	width: 100%;
	float: left;
	padding-bottom: 150px;
	}
#angledivider img{
	width: 100%;
	}

/***** contact *****/
#contactleft{
	width: 80%;
	margin: auto;
}
.contactmsg{
	width: 50%;
	float: left;
	}
.contactmsg h1{
	color: #575757;
	font-size: 28px;
	font-family: 'Raleway', sans-serif;
	font-weight: 300;
	}
.contactmsg p{
	color: #575757;
	font-size: 14px;
	font-family: 'Raleway', sans-serif;
	font-weight: 400;
	line-height: 26px;
	padding-top: 15px;
	}
#contactright{
	width:44%;
	padding:0px 3%;
	float:left;
}
.contact-form{
	width:100%;
	float:left;
}
.first-last-name{
	width:100%;
	float:left;
}
.first-name{
	width:48%;
	padding-right:2%;
	float:left;
}
#fields{
	width:98%;
	height:28px;
	padding-left:2%;
	font-size:0.875em;
	color:#bababa;
	border:none;
}
.email{
	width:100%;
	padding-top:10px;
	float:left;
}
.last-name{
	width:48%;
	padding-left:2%;
	float:left;
}
.text-comment{
	width:100%;
	float:left;
	padding-top:10px;
}
#textarea{
	width:96%;
	height:50px;
	padding:0px 2%;
	font-size:0.875em;
	color:#bababa;
	border:none;
}
.submit{
	width: 100%;
	float: left;
	padding: 25px 0px;
	text-align: center;
	}
.submit a{
	color: #fff;
	font-family: 'Raleway', sans-serif;
	font-weight: 700;
	border-radius: 2px;
	background: #97be22;
	padding: 11px 55px;
	font-size: 13px;
	}


/***** social *****/
#social{
	width: 80%;
	margin: auto;
	}
.socialleft{
	width: 50%;
	float: left;
	}
.socialleft h1{
	color: #575757;
	font-size: 28px;
	font-family: 'Raleway', sans-serif;
	font-weight: 300;
	}
.socialleft p{
	color: #575757;
	font-size: 14px;
	font-family: 'Raleway', sans-serif;
	font-weight: 400;
	line-height: 26px;
	padding-top: 15px;
	}
.socialright{
	width: 40%;
	padding-top: 20px;
	padding-left: 10%;
	float: left;
	}
.socialright ul{
	text-align: center;
	list-style: none;
	}
.socialright ul li{	
	display: inline-block;
	padding: 10px 15px;
    }
.socialright ul li a{	
	color: #cfe19a;
	}
	


/***** legal pages *****/
.greenlink{
	color:#97be23 ;
	font-weight:bold;
	text-decoration:underline;
	}


.contractual{
	position:relative;
	width:100%;
	float:left;
	}
.contractual h2{
	color: #575757;
	padding-top:22px;
	font-size: 20px;
	font-family: 'Raleway', sans-serif;
	font-weight: 400;
	}
.contractual p{
	line-height: 26px;
	color: #575757;
	font-size: 16px;
	font-family: 'Raleway', sans-serif;
	font-weight: 400;
	}
.contractual ul{
	padding-left:3%;
	padding-top:20px;
	list-style-image:url(../imgs/bullet.png) ;
	}
.contractual ul li{
	line-height: 26px;
	color: #575757;
	font-size: 16px;
	font-family: 'Raleway', sans-serif;
	font-weight: 400;
	}
.top_padding{
	padding-top:20px;
	}



/***** footer *****/
#footer{
	width: 100%;
	float: left;
	padding: 0px 0px;
	background: #97be22;
	margin-top:-5px;
	}
.footernav{
	width: 100%;
	float: left;
	text-align: center;
	}
.footernav ul{
	list-style: none;
	text-align: center;
	}
.footernav ul li{
	display: inline-block;
	padding: 20px 20px;
	}
.footernav ul li a{
	color: #1d1d1f;
	font-family: 'Raleway', sans-serif;
	font-weight: 700;
	font-size: 14px;
	}
.footernav ul li a:hover{
	color: #ffffff;
	}
.footernav ul li a:focus{
	color: #ffffff;
	}

/***** copyright *****/
#copyright{
	width: 100%;
	float: left;
	text-align: center;
	padding: 30px 0px 100px 0px;
	}
#copyright p{
	color: #bfbfbf;
	font-family: 'Open Sans', sans-serif;
	font-size: 14px;
	}
#copyright a{
	color: #97be22;
	font-family: 'Raleway', sans-serif;
	font-weight: 400;
	font-size: 14px;
	}
	


/***** media queries *****/
@media screen and (max-width: 768px) {
.logo {
    float: left;
	text-align: center;
    width: 100%;
	}
.nav {
    float: right;
    width: 100%;
    padding-top: 10px;
	}
.nav ul{
	text-align: center;
	}
.nav ul li{
	display: list-item;
	padding-top: 20px;
	}
.col-left {
    width: 100%;
    float: left;
	}
.col-middle {
    padding-left: 0%;
    width: 100%;
    float: left;
	}
.col-right {
    padding-left: 0%;
    width: 100%;
    float: left;
	}
.productshot {
    width: 100%;
    float: left;
	text-align: center;
	padding-top: 40px;
    }
.productshot img {
	width: 70%;
    }
.socialleft {
    width: 100%;
    float: left;
    }
.socialright {
    width: 100%;
    padding-top: 30px;
    padding-left: 0;
    float: left;
    }
.productdescription {
    width: 100%;
    float: left;
    }
#infographic-inner{
	width:100%;
	margin:auto;
	position:relative;
	}	
.infographic img {
	width: 95%;
	height: 95%;
    }		
#contactmsg {
    width: 94%;
    padding: 0px 3%;
    float: left;
}
#contactright {
    width: 94%;
    padding: 0px 3%;
    float: left;
}
}

	
@media screen and (max-width: 320px) {
.productpurchase {
    float: left;
    width: 100%;
    }
.control{
	padding-left: 0px;
    }
.productoption {
    float: left;
    width: 100%;
    }
}