html, body {
    max-width: 100%;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased !important;
}
/*WHERE TO BUY*/
.prod_wrap{
	width:33%;
	float:left;
	display:block;
	height: auto;
	position:relative;
}

.prod_wrap:nth-child(1){
	background-color:#b4407d;
}
.prod_wrap:nth-child(2){
	background-color: #FFE000;
}
.prod_wrap:nth-child(3){
	background-color: #0186bb;
}
img.prod_img{
	width:40%;
	margin:0 auto;
	text-align: center;
	display: block;
}
.cart_ico{
	float:right;
	margin:0.7em 1em;
	padding:0 0 0 1em;
}
.add_confirm_1{
display:block;
padding:1em;
position:absolute;
top:50px;
left:50%;
}

/*INGREDIENTS PAGE*/
	.ing_bg{
		width:100%;
		background: url('ing_hero_web.jpg') no-repeat scroll 10% 0% #fff;
		position:inherit;
		background-size: cover;
		height:90%;
		display: block;

	}
	.ing_wrap{
		width:100%;
		background:rgba(255,255,255,0.94);
		padding:2em 1em 0 1em;
		position:relative;
		margin:1em auto;
		display:block;
	}
	.ing_contain{
	width:60%;
	display:block;
	position:relative;
	margin:1em auto;
	}
@font-face {
font-family: "proxima_nova";
src: url("ProximaNova-RegWeb.woff") format("woff");
}
@font-face {
font-family: "proxima_nova_bold";
src: url("ProximaNova-BoldWeb.woff") format("woff");
}
.clearIt{
clear:both;
}
a.no_link{
	text-decoration: none;
}
.top_nav{
position:relative;
height:40px;
width:100%;
background-color: #FFE000;
display: block;
}
body{
background-color: #fff;
position:relative;
display:block;
margin:0;
padding:0;
}
h1{
font-family: "proxima_nova_bold", helvetica, sans-serif;
font-size:2em;
line-height: 120%;
letter-spacing: .1em;
color:#fff;
margin:0 auto;
text-align: left;
padding:1em 0 0.3em 0;
text-shadow: 4px 4px 4px rgba(0, 0, 0, 0.9);
}
h2{
font-family: "proxima_nova_bold", helvetica, sans-serif;
font-size:2em;
line-height: 120%;
letter-spacing: .01em;
color:#000;
margin:0 auto;
text-align: left;
}
p{
font-family: "proxima_nova", helvetica, sans-serif;
font-size:1em;
line-height: 140%;
letter-spacing: .01em;
color:#555;
margin:0 auto;
text-align: left;
}
.horiz_rule{
	width:100%;
	height:1px;
	background-color: #e1e1e1;
	display:block;
	position:relative;
	margin:0 auto;
	text-align: center;
}
h3 {
  color: #1e1e1d;
  font-family: "proxima_nova",helvetica,sans-serif;
  font-size: 0.8em;
  letter-spacing: 0.03em;
  margin: 1em auto;
  text-align: left;
}
.pads{
	padding:2em 0;
	width:100%;
}
iframe.iframe_width{
	width:100%;
	position: relative;
	margin:1em auto;
	text-align: center;
	display: block;
}
.seperate{
	height:5px;
	width:75px;
	background-color: #FFE000;
	margin:0.3em 0;
}
.blackout{
	background-color: rgba(0,0,0,0.5);
	margin:1em;
	height:auto;
	width:auto;
}
.headline, .headline1, .subline{
font-family: "proxima_nova_bold", helvetica, sans-serif;
line-height: 100%;
letter-spacing: .08em;
margin:0 auto;
text-shadow: 4px 4px 9px rgba(0, 0, 0, 0.4);
text-transform: uppercase;
text-align: center;
}
.headline1{
	font-size: 3em;
	color:#FFE000;
}
.headline{
	font-size: 5em;
	color:#fff;
}
.social_header{
font-family: "proxima_nova", helvetica, sans-serif;
font-size:2em;
line-height: 150%;
letter-spacing: .1em;
color:#fff;
margin:0 auto;
text-align: center;
padding:2em 0 0.5em 0;
}
.social_hero{
font-family: "proxima_nova_bold", helvetica, sans-serif;
font-size:4em;
letter-spacing: .1em;
color:#FFE000;
margin:0 auto;
text-align: center;
padding:0 0 0.5em 0;
}
.subline{
	font-size: 1.5em;
	color:#fff;
	padding: 0.5em 0;
}
.subline_2{
	font-size: 0.8em
}
.ah2{
font-family: "proxima_nova", helvetica, sans-serif;
font-size:1em;
line-height: 150%;
letter-spacing: .1em;
color:#fff;
margin:0 auto;
text-align: left;
padding: 0.5em 0 0;

}
.support_content{
width:100%;
background: url('slate_background.jpg') no-repeat scroll 90% 10% #000000;
position:inherit;
background-size:cover;
}
.support_content_2{
width:100%;
background: url('box_prod_blur_2.jpg') no-repeat scroll 50% 90% #fff;
position:inherit;
background-size: cover;
}
.support_content_4{
width:100%;
background:#000;
margin:0 auto;
display:block;
position: relative;
overflow-x:hidden;
}
.support_content_5{
width:100%;
background: #FFE000;
position:inherit;
}
.support_content_6{
width:100%;
background: url('about_hero-1.jpg') no-repeat scroll 50% 90% #fff;
position:inherit;
background-size: contain;
}

.more{
	height:700px;
}
.row{
width:1000px;
height:auto;
margin:0 auto;
display: block;
position:relative;
}
.row_4{
width:90%;
height:auto;
margin:0 auto;
display: block;
position:relative;
}
.y_border{
	border-top:solid 12px #FFE000;
}
.mid_col{
display:block;
position: relative;
float:left;
width:50%;

}
.mid_col_60{
display:block;
position: relative;
float:left;
width:60%;

}
.mid_col_10{
display:block;
position: relative;
float:left;
width:20%;
box-sizing: border-box;
padding:0 0 0 1em;
margin-top: -2px;
}
.mid_col_90{
display:inline-block;
position: relative;
float:left;
width:100%;

}
.mid_col_40{
display:block;
position: relative;
float:left;
width:40%;
box-sizing: border-box;
padding:0 0 0 1em;
margin-top: -2px;
}
.breakout_handmade {
  background-image: url("handmade_bagde_divide.png");
  background-repeat: no-repeat;
  background-size: 100% auto;
  height: 120px;
  margin: 0 auto -57px auto;
  position: relative;
  top: -72px;
  width: 120px;
}
ul.no_bullet{
  list-style-type: none;
}
select {
  /* 16px is the break */
font-size: 1em !important;
  font-family: "proxima_nova", helvetica, sans-serif;
}
.mastHead{
top:0;
left:0;
margin:0 ;
position:relative;
display:block;
}
.top_share{
float:right;
}
img.social_icons{
margin:0 auto;
text-align: center;
padding:0.5em 1em;
}
img.ico{
margin:0 auto;
text-align: center;
display:block;
}
p.dropDown, .dropDown{
margin:1em auto;
text-align: center;
display:block;
position: relative;
padding:0 1em;
}
.footer{
position:relative;
left:0;
bottom:0;
width:100%;
padding:1em;
height:50;
display:block;
background-color: #FFE000;
}
.ah3{
font-family: "proxima_nova", helvetica, sans-serif;
font-size:0.8em;
color:#FFE000;
text-align: center;
letter-spacing: .1em;

}
.gradation{
background-image: url('gradient.png');
background-repeat: no-repeat;
background-position:50% 20%;
}
.payPal {
padding: 3em 0 2em;
margin: 0 auto;
text-align: center;
display: block;
}
img.hero{
width:auto;
height:auto;
display: block;
margin:0 auto;

}
img.hotspot_img{
	width:100%;
	display:block;
	margin:0 auto;
	padding:5px 0 0 0;
}
.shop_button:hover{
background-color: #232222;
}
.shop_button_wht:hover{
background-color: #fff;
}
.shop_button_yl:hover{
background-color: #ffe000;
}
.stamp{
margin:0 auto;
text-align: center;
padding:1em;
}
.margs{
margin:3em 0 0 0 ;
}
.toggle_footer{
display:none;
}
.svg_logo{
height:164px;
width:100px;
}
.ico_wrap{
box-sizing: border-box;
display: inline-block;
float: left;
height: auto;
padding: 1em;
width: 25%;
-moz-box-sizing: border-box;
}
.company_wrap{
box-sizing: border-box;
display: inline-block;
float: left;
height: auto;
padding: 1em;
width: 33%;
-moz-box-sizing: border-box;
}
.learn_cta{
height:auto;
width:170px;
margin:2em auto;
padding:1em;
background-color: #FFE000;
color:#000;
font-family: "proxima_nova_bold", helvetica, sans-serif;
font-size:1em;
text-align: center;
letter-spacing: .1em;
display: block;
position:relative;
text-transform: uppercase;
}
.learn_cta:hover{
color:#FFE000;
background: #000;
}
.learn_cta_blk{
height:auto;
width:170px;
margin:2em auto;
padding:1em;
background-color: #000;
color:#FFE000;
font-family: "proxima_nova_bold", helvetica, sans-serif;
font-size:1em;
text-align: center;
letter-spacing: .1em;
display: block;
position:relative;
text-transform: uppercase;
}
.learn_cta_blk:hover{
color:#000;
background: #fff;
}
img.soc_feed{
	width:15%;
	height:auto;
	float:left;
	display:block;
	margin:2px;
}
@media screen and (max-width: 767px) {
.prod_wrap{
	width:100%;
	float:left;
	display:block;
	height: auto;
	position:relative;
}
.cart_ico{
	float:left;
	margin:0.7em 0 0 1em;
	padding:0;
}
.social_hero{
	font-size: 3em;
}
p.paddings{
	padding:0 0.8em;
}
.company_wrap{
	width:100%;
}
.svg_logo{
height:auto;
width:30%;
}
.toggle_header{
display:none;
}
.row, .row_4{
width:100%;
padding:0em;
}
.mastHead{
width:100%;
height:auto;
text-align: center;
margin:0 auto;
}
.mid_col{
width:100%;
}
img.soc_feed{
	width:48%;
	height:auto;
	float:left;
	display:block;
	margin:2px auto;
}
h1{
font-size: 1.5em;
text-align: center;
padding:1em 0 0 0 ;
line-height: 190%;
}
h2{
font-size: 1.5em;
text-align: center;
padding:1em 0 0 0 ;
line-height: 190%;
}
.subline{
	font-size: 1em;
	margin:0 0 1em 0;
}
.headline{
	font-size: 1.9em;
}
.headline1{
	font-size: 1.9em;
}
.ah2{
padding:1em;
}
.mid_col_10, .mid_col_60, .mid_col_40, .mid_col_90{
width:100%;
padding:0;
}
.payPal{
margin:0 auto;
text-align: center;
padding:1em 0 0 0;
position:relative;
display: block;
}
.footer{
padding:5em 0 2em 0 ;
margin: 0em 0 0 0 ;
}
.toggle_footer{
display:block;
}
.toggle_header{
display:none;
}
.bottom_share {
margin: 0 auto;
display: block;
position: relative;
text-align: center;
float:none;
}
.image_width{
margin:0 auto;
width:70%;
}
.support_content{
	background-position: -421px 4px;
}
.support_content_2{
	background: url('box_prod_mobile.jpg') no-repeat scroll 50% 90% #fff;
	background-position: 70% 50%;
}
.support_content_3{
	background:#fff;
}
.ico_wrap{
	width:50%;
	margin:0em;
}
.pads{
	padding:1em;
}

.seperate{
	height:5px;
	width:75px;
	background-color: #FFE000;
	margin:0.3em auto;
}
.ing_bg{
	height:auto;
}
.ing_contain{
	width:90%;
}
}


/* make keyframes that tell the start state and the end state of our object */
@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-webkit-keyframes fadeRight { from {opacity:0;right:-100px; } to { right:0px;opacity:1;} }
@-moz-keyframes fadeRight { from { opacity:0;right:-100px;} to { right:0px;opacity:1;} }
@keyframes fadeRight { from { opacity:0;right:-100px;} to { right:0px;opacity:1;} }

.fade-in {
	opacity:0;  /* make things invisible upon start */
	-webkit-animation:fadeIn ease-in 1;  /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
	-moz-animation:fadeIn ease-in 1;
	animation:fadeIn ease-in 1;

	-webkit-animation-fill-mode:forwards;  /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
	-moz-animation-fill-mode:forwards;
	animation-fill-mode:forwards;

	-webkit-animation-duration:1s;
	-moz-animation-duration:1s;
	animation-duration:1s;
}

.fade-in.one {
-webkit-animation-delay: 0.7s;
-moz-animation-delay: 0.7s;
animation-delay: 0.7s;
}
.fadeRight {
	opacity:0;
	right:-100px;  /* make things invisible upon start */
	-webkit-animation:fadeRight ease-in 1;  /* call our keyframe named fadeRight, use animattion ease-in and repeat it only 1 time */
	-moz-animation:fadeRight ease-in 1;
	animation:fadeRight ease-in 1;

	-webkit-animation-fill-mode:forwards;  /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
	-moz-animation-fill-mode:forwards;
	animation-fill-mode:forwards;

	-webkit-animation-duration:1s;
	-moz-animation-duration:1s;
	animation-duration:1s;
}

.fadeRight.one {
-webkit-animation-delay: 0.7s;
-moz-animation-delay: 0.7s;
animation-delay: 0.7s;
}