/* !Colors */

/* Default all headers to Lactiful Pink */
h1, 
h2, 
h3, 
h4, 
h5, 
h6 { color: #79365d	}

/* Set up for fluid images and embedded videos */
img, 
object { max-width: 100%; }
	
p.indent { text-indent: 3rem; }
p.box-margin { margin-left: 5%; margin-right: 5% }

/* Align images to the right or left with appropriate padding */
img.align-right	{ float:right; margin: 0 0 1.5rem 1.5rem; }
img.align-left	{ float:left; margin: 0px 1.5rem 1.5rem 0px; }
img.center 		{ display: block; margin: 0 auto; }

.center { text-align: center; }

.container {
	position: relative;
	width: 100%;
	max-width: 960px;
	margin: 0 auto; }
	
a 		{ color: #79365d; }/* Override skeleton's link color to a brighter version of Lactiful Pink */
a:hover { color: #de92bf; }/* Override skeleton's link hover color to Lactiful Dark Pink */

a.footer { font-size: .8em;}
p.footer { font-size: .8em; color:#868686;}

p.disclaimer { font-size: .8em; }
 
 .homepageHeroBox {
 	background: url("/images/homepage-hero-box-bg-922.jpg") no-repeat center center; 
	background-size: cover;
	padding: 5%; }
 

.button.buy-button { /* Overrides for skeleton's default button */
	height: 60px;
	padding: 0 40px;
	font-size: 1.8em;
	line-height: 2.2em;
	color: #FFF;
	background-color: #c7719e;
	border-color: #79365d }
	
.button.buy-button-purple { /* Overrides for skeleton's default button */
	height: 60px;
	padding: 0 40px;
	font-size: 1.8em;
	line-height: 2.2em;
	color: #FFF;
	background-color: #79365d;
	border-color: #4A223C; }	

.button.button-red { /* Used for the Sold Out buy button when out of inventory */
  color: #FFF;
  background-color: red;
  border-color: darkred; }
button.button-red:focus {
  color: #FFF;
  background-color: red;
  border-color: darkred; }

.article { font-size: 1.4rem; }

.website { visibility: hidden; /* This prevents spam submissions to forms */
		   display: none;
} 
	


/*============= SCREENSIZE STYLES ===============*/

/* When the mobile menu activates (at 780px and below) apply the following styles. Note I should slipstream a mobile first design because skeleton is mobile first, but truck navigation is desktop first. */
@media only screen and (max-width: 780px) {
	.box-margin,
	.form { margin-left: 5%; margin-right: 5% }
	.homepageHeroBox { margin-top: 60px; } /* Once the mobile header bar is displayed, bump the Hero box down 60px, which is the height of the header */
	.homepageHeroAdditoinalText { display: none; }
	.firstrow { margin-top: 60px; }
}


@media (max-width: 550px) {
	.mobile-column-padding { margin-top: 20px; } /* On pages where a right column exists, this adds margin once the skeleton grid disables and there is only a single column */
}




/*============= FORMS ===============*/

.form {
/* 	background-color: silver; */
	background-image:url('/images/homepage-bokeh-bg.jpg'); background-repeat:repeat;
	padding: 3%;
	padding-bottom: 0;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    border-color: #79365d;
    border: 2px solid #79365d;
}




/*============= DISCLOUSURE & WINDOWSHADE ===============*/
.windowshade { 	margin-top: 20px; }
	div .windowshade:first-child {	margin-top: 0px; }
	
.disclosure-unit { margin-top: 20px; }
	div .disclosure-unit:first-child {	margin-top: 0px; }
	
.disclosure-unit .disclosure-title {
	width: 100%;
	position: relative;
	cursor: pointer;
	overflow: hidden; 
	font-size: 1.2em;  }
	
.disclosure-unit .disclosure-title .disclosure-icon .fa {
	color: #c7719e;
	float: left;
	top: 5px;
	position: relative; }
	
.disclosure-icon   .fa-plus 		{ display: block; }
.disclosure-icon   .fa-caret-down  	{ display: none;  }
.disclosure-active .fa-plus 		{ display: none;  }
.disclosure-active .fa-caret-down  	{ display: block; }
		
.disclosure-unit .disclosure-title .disclosure-title-name {
	float: left;
	margin: 0 0 0 20px; }
	
.disclosure-unit .disclosure-title:hover .disclosure-icon .fa,
.disclosure-unit .disclosure-active .disclosure-icon .fa { color: #c7719e !important; }
	
.disclosure-title:hover { color: #c7719e; }

.disclosure-title em { font-size: 0.8em; }

.disclosure-active { color: #c7719e; }

.disclosure-unit .disclosure-body {
	padding-top: 18px;
	display: none;
	margin-left: 5%; }



/*============= INGREDIENTS PAGE ===============*/
.ingredient-plus {
	float: left;
	color: #c7719e;
	margin-top: 4px;
}

.ingredient-info-box {
	margin-left: 45px;
}

.ingredient-name {
	color: #c7719e;
	font-size: 1.5em;
	font-weight: bold;
	text-transform: uppercase;

}

.ingredient-nickname {
	font-style: italic;
	color: #c7719e;
}



/*============= TESTIMONIALS PAGE ===============*/

.testimonials-box {
	border-radius:10px;
	background: #edd3e3; /* Old browsers */
	background: -moz-linear-gradient(180deg,rgba(228, 177, 204, 1)#f2e1eb 0%, #edd3e3 39%, #edd3e3 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, bottom, top, color-stop(0%,#f2e1eb), color-stop(39%,#f2e1eb), color-stop(100%,#edd3e3)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(180deg,  #f2e1eb 0%,#f2e1eb 39%,#edd3e3 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(180deg,  #f2e1eb 0%,#f2e1eb 39%,#edd3e3 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(180deg,  #f2e1eb 0%,#f2e1eb 39%,#edd3e3 100%); /* IE10+ */
	background: linear-gradient(180deg,  #f2e1eb 0%,#f2e1eb 39%,#edd3e3 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2e1eb', endColorstr='#edd3e3',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */ }

.testimonial-p { padding: 20px; }

.testimonial-quote {
	font-family: "Handlee", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size:1.2em; }

.testimonial-commentary { color:#c7719e; }