@media screen and (max-width: 960px) { 

    .container {
      width: 100%;
    }

	.center {
	       width: 96%;
	     }
	 
	 #nav{
	 	margin-top: 0;
	 	padding-bottom: 20px;
	 }
	     
	 #nav li{
	 	float: left;
	 	text-align: center;
	 	width: 23.4042553%;
	 	margin-left: 2.1276596%;
	 }
	 
	 #nav li:nth-child(3){
	 	margin-left: 2.1276596%;
	 }
	 
	 #promotions h2{
	 	line-height: 1.5;
	 	margin-bottom: 0;
	 	padding: 20px 0;
	 }
	 
	 #content h2{
	 	font-size: 1.6em;
	 }
	 
	 #contact-bar{
	 	letter-spacing: .1em;
	 
	 }
	 
	 #header h1 {
	    text-align: center;
	    width: 100% !important;
	}
	 
	 #mission-statements li h2:before{
	 	content: none;
	 }
	 
	 #mission-statements li h2:after, #hero-ingredients li h2:after{
	 	content: none;
	 }
	 
	 #specials ul li.special-cards{
	 	height: 376px;
	 }
	 
	 #side-content:before{
	 	content: url(../img/aside-flourish-top-tablet.png);
	 
	 }
	 
	 #side-content:after{
	 	content: url(../img/aside-flourish-bottom-tablet.png);
	 }
	 
	 #twitter a.group img, #social-links a.group img{
	 	display: none;
	 }
	 
	 #gallery {
	   float: left;
	   display: block;
	   width: 90%;
	   margin-top: 20px !important;
	   clear: both;
	}
	 
	.mantra {
	   margin-bottom: 10px;
	} 

     
}

@media screen and (max-width: 500px) { 

	.center {
	       width: 90%;
	}
	
	.header-image{
		display: none;
	}


	
	#gallery {
	   float: left;
	   display: block;
	   width: 90%;
	   margin-top: 20px !important;
	   clear: both;
	}
	
	
	 .container {
      width: 100%;
    }
    
	
	#header #logo{
		text-align: center !important;
		float: none;
		padding: 0px;
	}
	
	#logo img {
		margin-bottom: 20px;
	}
	
	
	#header-inner{
		width: 100%;
		float: left;
		margin-top: 0;
		padding-top: 20px !important;
		text-align: center !important;
	}
	
	#nav {
	    width: 100%;
	    padding: 0;
	    margin: 0;
	}
	     
	#nav li{
		float: none;
		text-align: center;
		width: 100%;
		margin: 0;
		margin-bottom: 10px;
		display: block;
	}
	
	#nav li:nth-child(3){
		margin-left: 0;
	}
	
	#nav li:last-child{
		margin-bottom: 0;
	}
	
	#nav li a{
		display: block;
		padding-bottom: 5px;
		padding-top: 3px;
		background-color: rgba(0,0,0, .02);
	}
	
	#promotions{
		margin-top: 30px;
	}
	
	
	#contact-bar{
		padding: 10px 20px 10px 20px;
		text-align: center;
	}

	
	#contact-bar li a {
	    font-size: 16px;
	    margin-right: 20px;
	}
	
	#mission-statements {
	    float: left;
	    display: block;
	    margin-bottom: 20px;
	    width: 100%;
	}
	
	#mission-statements li, #hero-ingredients li{
		width: 100%;
		margin-left: 0;
		margin-bottom: 20px;
		float: none;
		text-align: center;
	}
	

	
	#hero-ingredients h2:before{
		content: none;
	}
	
	#hero-ingredients h2:after{
		content: none;
	}
	
	#hero-ingredients h3{
		background: none;
		padding-left: 0;
	}

	
	#content #specials{
		width: 100%;
		float: none;
	}
	
	#specials ul li.special-cards, #specials ul li.special-cards:first-child{
		width: 95%;
		margin-left: 0;
		float: none;
		margin-bottom: 30px;
		margin-left: 1%;
		min-height: 0;
	}
	
	#specials ul li.special-cards:last-child{
		margin-bottom: 0;
	}
	
	.slidecontrols{
		display: none;
	}
	
	.slidewrap .carousel-tabs {
	   padding-top: 20px;
	}
	
	.slidewrap .carousel-tabs li {
	    display: inline-block; 
	    padding: 0 5px;
	}
	.slidewrap .carousel-tabs a {
	    background: #ddd;
	    display: inline-block;
	    height: 20px;
	    text-indent: -9999px;
	    width: 20px;
	    border-radius: 10px;
	}
	
	#content #promotions{
		width: 100%;
		float: none;
	}
	
	
	#contact-panel-inner ul.contact-details{
		float: none;
		width: 100%;
	}
	
	#menu-filters{
		display: block;
		float: none;
		width: 100%;
		margin-bottom: 20px;
	}
	
	#content #menu-filters h2{
		padding-bottom: 0;
	}
	
	#content #menu-filters li{
		float: none;
		display: inline;
		margin-right: 10px;
		margin-top: 15px;
	}
	
	
	#menu{
		display: block;
		float: non;
	}
	
	.menu-col{
		display: block;
		float: none;
		width: 100%;
		margin-left: 0;
	}
	
	.intro{
		margin-left: 0;
		margin-bottom: 20px;
		width: 100%;
	}
	
	#main-content, #main-content.suppliers{
		float: none;
		width: 100%;
		margin-right: 0;
	}
	
	#side-content, #side-scroll {
		float: none;
		width: 95%;
		margin-top: 20px;
		padding: 3%;
	}
	
	.supplier{
		float: none;
		width: 100%;
		margin-top: 20px;
	}
	
	#side-content:before, #side-scroll:before{
		content: none;
	
	}
	
	#side-content:after, #side-scroll: after {
		content: none;
	}
	
	#corporateHolder{
		clear: both;
		width: 100%;
	}
	
	#gallery{
		float: none;
		width: 97.8%;
		margin-left: 0;
	}
	
	.flex-direction-nav{
		display: none;
	}
	
	h2 a{
		display: block;
		margin: 5px 0;
	}
	
	#twitter{
		margin-bottom: 30px;
	}
	
	#twitter, #social-links{
		width: 100%;
		float: none;
	}
	
	#twitter a.group img, #social-links a.group img{
		display: inline;
	}
	
	#footer-nav{
		border-left: none;
		padding-left: 0;
		padding-top: 10px;
		float: none;
		width: 100%;
		clear: both;
		margin-top: 30px;
	}
	
	.newleaf h1, .newleaf h4, .newleaf .foodItem,  .nutrional_key, .newleaf .footer, .newleaf .first, .newleaf .second, .voucher {
	    clear: both;
	    width: 100%;
	    height:auto;
	    margin-bottom: 15px;
	    margin-top: 10px;
	    overflow: auto;
	    padding: 0px;
	}
	
	.button-holder {
	    text-align: center;
	}
	
	.button-holder a {
	    margin-bottom: 10px;
	    text-align: center;
	}
	

	.leafformholder, .function-puff, .sidebar, .functions, #main-content, #corporate #main-content.first-step {
	    width: 100%;
	    margin-right: 0;
	    padding: 0;
	    border: 0;
	    margin-bottom: 20px;
	    text-align: center;
	}
	
}