body {
	background-color: white; /* Overall background color */
	color: black; /* default font color */
	text-rendering: optimizelegibility;
	
	-webkit-tap-highlight-color:rgba(0,0,0,0);
	-webkit-text-size-adjust: none;
	-webkit-font-smoothing: antialiased;
	
	-moz-tap-highlight-color:rgba(0,0,0,0); 
	-moz-text-size-adjust: none;
	-moz-font-smoothing: antialiased;
	
	-ms-tap-highlight-color:rgba(0,0,0,0); 
	-ms-text-size-adjust: none;
	-ms-font-smoothing: antialiased; }

a { text-decoration: none; }

.container {
	overflow: hidden;
	background-color: white;  /* Overall background of the container when in desktop mode */

	/*  Prevents Flickering  */
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	-ms-backface-visibility: hidden; }

header {
	height: 60px;
	position: relative;
	background-color:  white; } /* Background color of the desktop navbar */

/* Currently not used because we are using an image logo */
header h1 {
	color: #9ba7b0;
	text-align: left;
	font-size: 27px;
	line-height: 60px;
	font-weight: bold;
	padding-left: 20px; }

.heartLogo {
	position: absolute;
	top: 10px;
	left: 18px;
	display: block; }

.navCartIcon {
	position: relative;
	float: right;
	top: 8px;
	right: 18px;
	display: block; }

/* The burger is the 3 lines that indicate the mobile menu */
.burger {
	position: absolute;
	float: left;
	padding: 10px;
	top: 4px;
	left: 10px;
	display: none; }

.burger li {
	width: 30px;
	height: 4px;
	background-color: #79365d;  /* The color of the 3 bars when the menu is closed (Lactiful Dark Pink) */
	border-radius: 3px;
	margin: 5px 0;
	list-style-type: none; }

.burger.open li { background-color: #79365d; } /* The color of the 3 bars when the menu is open (Also Lactiful Dark Pink) */

nav {
	position: absolute;
	top: 0; }

nav li {
	float: left;
	display: inline-block; }

nav li a {
	font-size: 1em; /* 10px; */
/* 	color: #de92bf */; /* The color of the nav names, both in the desktop nav and in the mobile drawer (Lactiful Pink) */
	color: #79365d; /* The color of the nav names, both in the desktop nav and in the mobile drawer (Lactiful Pink) */
	padding: 24px 15px;
	font-weight: bold;
	display: block; }

nav li a:hover {
/* 	color: #79365d; */ /* The roll over color of the nav names in the desktop nav (Lactiful Dark Pink) */
	color: #de92bf; /* The roll over color of the nav names in the desktop nav (Lactiful Dark Pink) */
	font-weight: bold;  }  


/* backgroundLayer is styling for a div that sits under the visible page, but on top of the mobile nav menu. The original Trunk code allows the user to peak at the mobile menu if they pull the page down below the top, this layer covers up that menu so the user can't see it anymore. backgroundLayer is set up here, and is hidden or made visible in naviagtion.js as well as in the @media queries below. */
.backgroundLayer {
	background-color: white;
	visibility: visible;
	z-index: 0;
	position: fixed;
	left: 0px;
	top: 0px;
	height: 100%;
	line-height: 90em;
	padding: 300em; }
.backgroundLayer.open { visibility: hidden; } 
.backgroundLayer.close { visibility: visible; } 


/* The next 3 media querries adjust the navbar in desktop mode for various widths and also hide the backgroundLayer. Comments from first querry apply to all three. */
@media (min-width: 750px) { /* Larger 750px wide */
	.backgroundLayer { display: none; }	/* If the page has grown from mobile to desktop, hide the backgroundLayer, because we don't need it in desktop mode. */
	
	nav { right: 75px; } /* Leave room for the shopping cart icon */

	nav li a {
	font-size: 0.8em; /* 8 px */
	padding: 24px 18px; /* Distance between the desktop nav link and the top/bottom, left/right of neighbor link */
	}
	
	nav li a.active { color:  #c7719e;	}
}

@media (min-width: 870px) { 
	nav { right: 58px; } 	

	nav li a {
	font-size: 1em; /* 10 px */
	padding: 24px 20px; 
	}
}

@media (min-width: 950px) { 
	nav { right: 65px; } 

	nav li a {
	font-size: 1.15em; /* 15 px; */
	padding: 24px 21px; /* Distance between the desktop nav link and the top/bottom, left/right of neighbor link */
	}
}


/* Activate mobile menu when screen size is below 780px */
@media only screen and (max-width: 780px) {

	/* If the page has shrunk so that we need a mobile menu, be sure to show the backgroundLayer */
	.backgroundLayer { display: block; }
	
	/* Centers the heart logo in the mobile navbar */
	.heartLogo {
		margin-left: auto;
		margin-right: auto;
		left: 0;
		right: 0; }
	
	.container { background-color: black; } /* Change container background to black when in mobile mode so the menu rounded corners look good */
	
	header {
		height: 60px;
		z-index: 3;
		background-color: #ceaabf;  /* The background color of the top bar in mobile mode. It contains the burger, the centered heart logo and the shopping cart icon */
		position: fixed;
		top: 0;
		right: 0;
		left: 0;
		
		/* annimation starting point */
		-webkit-transform: translate3d(0,0,0);
		-moz-transform: translate3d(0,0,0);
		transform: translate3d(0,0,0);	}
		
	header h1 { /* This is the name (Typically Lactiful) that would appear at the top center of the mobile screen. Currently not used. */
		color:  #ffffff; 
		text-align: center;
		padding-left: 0;
		display: block; }
		
	.burger { display: block; }
	
	/*  Nav Drawer Layout  */
	nav { position: relative; }
	
	nav ul {
		height: 100%;
		overflow-y: auto; }
		
	nav li {
		display: block;
		float: none; }
		
	nav li a {
		padding: 22px 25px;
		letter-spacing: 3px; 
		font-size: 1.1em; /* 11px; */
		color:  #fff; } /* The color of the navigational text links in mobile mode */ 
		
	nav li a.logo { display: none; }
	
	nav li a.active {
		color:  #fff;  /* Part 1/2 of the fix for the hover code so that it doesn't select odd cells when scrolling the mobile nav drawer */
		background-color: #c7719e; } /* The background color of the entire cell that contains the link associated with the active (currently displayed) page. So if we're on Ingredient page, the "Ingredients" background cell would be this color */	
	
	/* Part 2/2 of the fix for the hover code so that it doesn't select odd cells when scrolling the mobile nav drawer */
	nav li a:hover { color:  #fff; } 

	nav li:first-child a.active, nav li:first-child a:hover { border-radius: 10px 0 0 0; }
	
	/* Mobile Naviation Drawer Annimation */
	nav {
		width: 93%;
	  	height: 100%; 
		position: fixed;
		left: 0;
		top: 0;
		margin: 0;
		background-color: #79365d;  /* Background color of the mobile drawer */
		border-radius: 8px;
		
		/* annimation starting point */
		opacity: .3;
		-webkit-transform: translate3d(5%,0,0)scale(.97);
		-moz-transform: translate3d(5%,0,0)scale(.97);
		transform: translate3d(5%,0,0)scale(.97); }
	
	/*Nav Expanding Open Effect*/
	nav.open {
		opacity: 1;
		-webkit-transform: translate3d(0,0,0)scale(1);
		-webkit-animation: slideIn .35s ease-in-out;
		-moz-transform: translate3d(0,0,0)scale(1);
		-moz-animation: slideIn .35s ease-in-out;
		transform: translate3d(0,0,0)scale(1);
		animation: slideIn .35s ease-in-out; }
		
	@-webkit-keyframes slideIn {
		0%    { opacity: .3; -webkit-transform: translate3d(5%,0,0)scale(.97); }
		100%  { opacity:  1; -webkit-transform: translate3d(0,0,0)scale(1); }
	}
	@-moz-keyframes slideIn {
		0%    { opacity: .3; -moz-transform: translate3d(5%,0,0)scale(.97); }
		100%  { opacity:  1; -moz-transform: translate3d(0,0,0)scale(1); }
	}
	@keyframes slideIn {
		0%    { opacity: .3; transform: translate3d(5%,0,0)scale(.97); }
		100%  { opacity:  1; transform: translate3d(0,0,0)scale(1); }
	}
	
	/*Nav Shrinking Closed Effect*/
	nav.close {
		opacity: .3;
		-webkit-transform: translate3d(5%,0,0)scale(.97);
		-webkit-animation: slideOut .3s ease-in-out;
		-moz-transform: translate3d(5%,0,0)scale(.97);
		-moz-animation: slideOut .3s ease-in-out;
		transform: translate3d(5%,0,0)scale(.97);
		animation: slideOut .3s ease-in-out; }
		
	@-webkit-keyframes slideOut {
		0%    { opacity:  1; -webkit-transform: translate3d(0,0,0)scale(1); }
		100%  { opacity: .3; -webkit-transform: translate3d(5%,0,0)scale(.97); }
	}
	@-moz-keyframes slideOut {
		0%    { opacity:  1; -moz-transform: translate3d(0,0,0)scale(1); }
		100%  { opacity: .3; -moz-transform: translate3d(5%,0,0)scale(.97); }
	}
	@keyframes slideOut {
		0%    { opacity:  1; transform: translate3d(0,0,0)scale(1); }
		100%  { opacity: .3; transform: translate3d(5%,0,0)scale(.97); }
	}
	
	
	/* Content Annimation */
	.content {
		/* content annimation starting point */
		-webkit-transform: translate3d(0,0,0);
		-moz-transform: translate3d(0,0,0);
		transform: translate3d(0,0,0);
		z-index: 2;
 		background-color: white; }  /* Prvents the black color of the mobile drawer background from showing through the content */
	
	/*Content Sliding Open Effect*/
	/* To change the width of the drawer to accomodate longer text naviagational names, change  240px and 260px in both header.open/.content.open and header.close,.content.close to new values. Use with caution: 300 and 320 are probably too large. */
	header.open,
	.content.open {   
		-webkit-transform: translate3d(240px,0,0);
		-webkit-animation: open .5s ease-in-out;
		-moz-transform: translate3d(240px,0,0);
		-moz-animation: open .5s ease-in-out;
		transform: translate3d(240px,0,0);
		animation: open .5s ease-in-out; }
		
	@-webkit-keyframes open {
		0%    { -webkit-transform: translate3d(0,0,0); }
		70%   { -webkit-transform: translate3d(260px,0,0); }
		100%  { -webkit-transform: translate3d(240px,0,0); }
	}
	@-moz-keyframes open {
		0%    { -moz-transform: translate3d(0,0,0); }
		70%   { -moz-transform: translate3d(260px,0,0); }
		100%  { -moz-transform: translate3d(240px,0,0); }
	}
	@keyframes open {
		0%    { transform: translate3d(0,0,0); }
		70%   { transform: translate3d(260px,0,0); }
		100%  { transform: translate3d(240px,0,0); }
	}
	

	/*Content Sliding Closed Effect*/
	header.close,
	.content.close {
		-webkit-transform: translate3d(0,0,0);
		-webkit-animation: close .3s ease-in-out;
		-moz-transform: translate3d(0,0,0);
		-moz-animation: close .3s ease-in-out;
		transform: translate3d(0,0,0);
		animation: close .3s ease-in-out;
	}
	@-webkit-keyframes close {
		0%    { -webkit-transform: translate3d(240px,0,0); }
		100%  { -webkit-transform: translate3d(0,0,0); }
	}
	@-moz-keyframes close {
		0%    { -moz-transform: translate3d(240px,0,0); }
		100%  { -moz-transform: translate3d(0,0,0); }
	}
	@keyframes close {
		0%    { transform: translate3d(240px,0,0); }
		100%  { transform: translate3d(0,0,0); }
	}

} /* END mobile drawer styling and annimation when screen size is below 780px */