#container{
	width:100%;
	margin:0;
	border:none; /* Gets rid of the excess 1px that causes horizontal scrolling */
}

/* Header */
#logo{
	width:25%;
}
#logo img{
	width:100%;
	height:auto;
}
nav{
	padding:0;
	margin:0 0 0 45%;
	width:68%;
}
nav ul{
	width:100%;
	margin: 5% 0 0 0;
}
nav ul li{
	width:30%;
	padding-right:0;
	display:block;
	float:left;
}
nav#subnav{
	width:68%;
	margin:0 0 0 45%;
}
nav#subnav ul li{
	padding: 2px 0px 5px 2%;
	display: block;
	float: left;
}
nav#subnav ul li:nth-child(2){
	width:50%;
}

/* Home */
.home-block{
	width:96%;
	padding:2%;
	margin:0;
}
#sustainability-module.home-block{
	background-color:#9FDE63;
	border:none;
}
#testimonial-module.home-block{
	background-color:#F7E26E;
	border:none;
}
#home-banner{
	width:100%;
}
#home-banner #banner{
	width:70%;
}
#home-banner #banner-description{
	width:30%;
	
}
#home-banner #banner-description h1{
	padding:0;
}
#home-banner #banner img{
	width:70%;
	height:auto;
	padding:0;
	margin:0;
}
#menu-callout{
	top:150px;
	width:35%;	
	height:90px;
	background-size:100% 100%;
}
#menu-callout span{
	margin-right: 1em;
	margin-top: .8em;
}


/* Sidebar */
#sidebar{
	width:100%;
}
#sidebar aside{
	border:0;
	margin: 0;
	padding-bottom: 35px;
}
#sidebar aside:first-child{
	margin: 0;
	padding-bottom: 35px;
}

/* Page content */
#content{
	padding:0;
	width:100%;
}
#page-content{
	width:100%;
	margin-left:15px; /* Simulate padding */
}
.menu-item{
	width: 48%;
	margin: 0 2% 2% 0; /* Every Other take off a certain % */
}
#page-content:nth-child(odd){ /* Every other menu item */
	padding-right:0;
}

/* Footer */
footer aside{
	width: 30%;
	padding: 2% 0 2% 2%;
	margin: 0;	
}

/* 
Anything below 4 columns 
630px(4 cols + padding) + 30px(padding on both sides of container)
*/
@media screen and (max-width:660px){ 
	#container{
		background-image:url(../img/grain.jpg);
		background-repeat:repeat-x;
		background-position:0px -40px;
	}
	#page-content{
		margin-left:2%;
	}
	nav ul{
		margin: 2% 0 0 0;
	}
	nav ul li{
		width:40%;
	}
	nav#subnav ul li, nav#subnav ul li:nth-child(2){
		width:100%;
	}
	
	/* Home */
	#menu-callout{
		position:static;
		width:100%;	
		height:70px;
		margin-bottom:15px;
		background-image:none;
		background-color:#e2b94c;
	}
	#menu-callout span{
		padding-top:1em;
		margin:0;
	}
	/* Make callout one line */
	#menu-callout span p{
		display:inline;
	}
	#home-banner #banner{
		overflow: hidden;
		position: relative;
		width: 95.5%; /* Leave some room for the border */
		height: 120px;
		margin: 0 2%;
		padding: 0;
		border: 1px solid #333;
	}
	#home-banner #banner img{
		position: relative;
		top: 0px;
		right:20%;
		width: auto;
	}
	
	#home-banner #banner-description{
		width: 98%;
		clear: both;
		margin: 0 2% 15px 2%;
	}
	
	
	/* Menu */
	.menu-item{
		width:96%; /* 2% margin on each side*/
		height:auto;
		margin-bottom:15px;
		clear:both;
	}
	.menu-item img{
		height:auto;
		width:100%;
	}
	
	/* Footer */
	footer aside{
		width:100%;
		clear:both;
		padding:0;
	}
	footer aside h4{
		padding:2% 0 2% 2%;
	}
	footer aside ul li{
		width:100%;
		margin:0;
		border-bottom: 1px solid #251302;
	}
	footer aside ul li:first-child{border-top:1px solid #251302;}
	footer aside ul li.inside-page{
		margin:0;
	}
	/* Clickable Area */
	footer aside ul li a{
		display:block;
		width:100%;
		padding: 10px 0 10px 30px;
	}
	footer aside ul li.inside-page a{
		padding: 10px 0 10px 50px;
	}
	
	/* Off canvas */
	#logo{
		float:none;
		margin: .25em .25em 0 .25em;
	}
	#header{
		background-image:url(../img/grain.jpg);
		overflow:visible;
		position:relative;
		border-bottom:1px solid #6a83b1;
		padding-top:0.01em; /* Fixes an issue with non-declared padding on the top of the page */
	}
	nav.off-canvas-navigation{
		display:block;
		height:auto;
		margin:0;
		width:50%;
		float:right;
		border:none;
		margin-top:5%; /* Vertically align the icon */
	}
	nav.off-canvas-navigation ul{
		width:80%
		height:auto;
		margin:0;
	}
	nav.off-canvas-navigation li{
		float:right;
		height:auto;
		width:auto;
		margin:0;
		width:100%;
	}
	nav.off-canvas-navigation li a{
		display:block;
		padding: 0 10%;
		width:1em;
		float:right;
		text-align:center; /* Center the Image in the clickable area */
	}
	
	/* Show the sidebar nav */
	nav#primary-nav a, nav#primary-nav a:visited{
		color:#fff;
	}
	#primary-nav, #header #subnav{
		position:absolute;
		left:100%;
		margin: 0;
		padding: 0;
		background-color:#a69;
		width: 0%;
		margin-top: 1.05em;
		border:none;
	}
	/* Chance position on click */
	body.active-sidebar #primary-nav, body.active-sidebar  #header #subnav{
		display:block;
		left:54%;		
		width: 46%;
	}
	#primary-nav ul{
		margin:0;
	}
	#primary-nav ul:first-child{
		border-top:1px solid #333;
	}
	#primary-nav li{
		clear:both;
		padding:3%;
		border-bottom:1px solid #333;
		border-left:1px solid #333;
		width:100%;
	}
	#header.inner-page #primary-nav li:nth-child(2){
		padding-top:5.5em;
	}
	#header #subnav{
		margin-top:5.5em;
	}
	#header #subnav li{
		border-bottom:1px solid #333;
		border-left:1px solid #333;
		padding: .3em 0 .6em 2em;
	}
	#header, #content, #primary-nav, #subnav{
		-webkit-transition: .5s all ease;
		-moz-transition: .5s all ease;
		-o-transition: .5s all ease;		
		-ms-transition: .5s all ease;
		transition: .5s all ease;	
	}
	/* content of the page */
	/* Push the content over to the left */
	body.active-sidebar [role="main"]{
		width:100%
		float:left;
		margin-left:-50%;
	}
	
	/* Nutrition Information Popup */
	ul.nutrition-info{
		padding: 0 3%;
		width:94%;
		top:82%;
	}
}
@media screen and (max-width:450px){ 

	/* Home banner image scaling*/
	#home-banner #banner img{
		right: 40%;
	}
	/* Nutrition Information Popup */
	ul.nutrition-info{
		top:76%;
	}
}
@media screen and (max-width:349px){
		/* Nutrition Information Popup */
	ul.nutrition-info{
		top:65%;
	}
}