/* Tablets Mobile ----------------------*/
@media only screen and (max-width: 767px) {
	
	div.container {
  padding-right: 20px;
  padding-left: 20px;
}



/* Slider ---------------------------------------------------------------- */

	.slider, .slide1, .slide2, .slide3  {
	height: 400px;
	}
	
	.banner-recipes, .banner-products, .banner-ordering {
	height: 400px;
	}
	
	button.slick-prev:before, button.slick-next:before {
	display: none;
	
}


	

/* Header
------------------------------------------------------------------------------*/


div.header-section h1 {
	font-size: 24px;
	line-height: 26px;
}

.header-section {
	top: 135px;
}

.header-banner img {
	width: 220px;
	height: auto;
}

.header-banner-container img {
	width: 220px;
	height: auto;
}


.header-heading {
	position: static;
	z-index: 100;            /* 2 */
	background: rgba(34, 44, 91, 1.0);
	width: 100%;
	height: auto;
}

.header-banner .header-heading h1 {
	font-size: 23px;
	line-height: 26px;
	padding-top: 18px;
	padding-bottom: 18px;
	
   } 


.basket {
display: none;
}




/* About
----------------------------------------------------*/

  .about-content {
	color: #fff;
	position: static;
	transform: none;
	max-width: 650px;
	text-align: center;
	margin-right: auto;
	margin-left: auto;
	padding-top: 20px;
	padding-right: 10px;
	padding-bottom: 50px;
	padding-left: 10px;
  }
  
  .about-container {
	position: static;
	min-height: 100%;
	width: 100%;

  }
  
  .about-img {
	height: 400px;
	
 }


/* purpose
----------------------------------------------------*/

  #purpose h2, #purpose p  {
	max-width: 100%;
	margin-right: auto;
	margin-left: auto;
	
  }


   #purpose {
	   padding-top: 10px;
	padding-bottom: 50px;	 
	 }
	 
	#purpose .tagline {
	position: static;
	bottom: 15%;
	right: 7%;
	width: 150px;
	height: auto;
	opacity: 0.4;
}

  
 /* Stockists
----------------------------------------------------*/ 
  
   #stockists .col-lg-4 img {
	position: static;
	transform: none;
 }
 
  #stockists .col-lg-4 {
	height: auto;
 }
 
  #stockists .col-lg-4 img {
	padding: 20px;
	max-width: 220px;
	height: auto;
 }
 
  #stockists  {
		padding-top: 40px;
	padding-bottom: 50px;  
 }
 
  #stockists  h2 {
	padding-top: 30px;
	font-size: 24px;
	line-height: 26px;
 }
 
  /* Header Recipes
------------------------------------------------------------------------------*/

.header-recipes {
	height: 220px;
}
 
.recipes .col-lg-4:first-of-type img {
	margin-top: 0px;	
}


/* Products
------------------------------------------------------------------------------*/

.products {
	padding-top: 0px;
	padding-bottom: 30px;
 }
 
  .products .product-info img {
	  float: none;
	  width: auto;
	  padding-right: 3%;
  }
  
  .product-info-container {
	float: none;
	width: 100%;
	padding-top: 20px;
  }

/* Recipe More Info
------------------------------------------------------------------------------*/

.recipe-more-info img {
	margin-top: 20px;
}

 

}





/* Tablets Desktop -------------------*/
@media only screen and (min-width: 768px) and (max-width: 989px) {

/* Slider ---------------------------------------------------------------- */

	.slider, .slide1, .slide2, .slide3  {
	height: 500px;
	}
	
	.banner-recipes, .banner-products, .banner-ordering {
	height: 400px;
	}
	
	
/* Header
------------------------------------------------------------------------------*/	

.header-heading {
	position: static;
	z-index: 100;            /* 2 */
	background: rgba(34, 44, 91, 1.0);
	width: 100%;
	height: auto;
}

.header-banner .header-banner h1 {
	font-size: 28px;
	line-height: 30px;
	padding-top: 30px;
	padding-top: 15px;
	padding-right: 20px;
	padding-bottom: 15px;
	padding-left: 20px;
	
   } 

.basket {
display: none;
}



/* About
----------------------------------------------------*/

  .about-content {
	color: #fff;
	position: static;
	transform: none;
	max-width: 650px;
	text-align: center;
	margin-right: auto;
	margin-left: auto;
	padding-top: 20px;
	padding-right: 20px;
	padding-bottom: 50px;
	padding-left: 20px;
  }
  
  .about-container {
	position: static;
	min-height: 100%;
	width: 100%;

  }
  
  .about-img {
	height: 600px;
	
 }



/* purpose
----------------------------------------------------*/

  #purpose h2, #purpose p  {
	max-width: 100%;
	margin-right: auto;
	margin-left: auto;
	
  }


   #purpose {
	padding-bottom: 50px;	 
	 }
	 
	 
	 #purpose .tagline {
	position: static;
	bottom: 15%;
	right: 7%;
	width: 150px;
	height: auto;
	opacity: 0.4;
}

  
/* Stockists
----------------------------------------------------*/ 
  
   #stockists .col-lg-4 img {
	position: static;
	transform: none;
 }
 
  #stockists .col-lg-4 {
	height: auto;
 }
 
  #stockists .col-lg-4 img {
	padding: 20px;
 }
 
   #stockists  {
		padding-top: 40px;
	padding-bottom: 50px;  
 }
 
 /* Header Recipes
------------------------------------------------------------------------------*/

.header-recipes {
	height: 280px;
}

/* Recipe More Info
------------------------------------------------------------------------------*/
.recipe-more-info img {
	margin-top: 30px;
}



/* Products
------------------------------------------------------------------------------*/
  .products .product-info img {
	  float: none;
	  width: auto;
	  padding-right: 3%;
  }
  
  .product-info-container {
	float: none;
	width: 100%;
	padding-top: 20px;
  }
  




}


/* Desktop ------------------------ */

@media only screen and (min-width: 990px) and (max-width: 1199px) {

/* Slider ---------------------------------------------------------------- */

	.slider, .slide1, .slide2, .slide3 {
	height: 600px;
	}
	
	.banner-recipes, .banner-products, .banner-ordering {
	height: 500px;
	}
	


/* Header Recipes
------------------------------------------------------------------------------*/

.header-recipes {
	height: 320px;
}


  
  /* Stockists
----------------------------------------------------*/ 
  
     #stockists  {
		padding-top: 40px;
	padding-bottom: 50px;  
 }
 
 /* Products
------------------------------------------------------------------------------*/
  .products .product-info img {
	  float: none;
	  width: auto;
	  padding-right: 0%;
  }
  
  .product-info-container {
	float: none;
	width: 100%;
	padding-top: 20px;
  }
  
    #purpose .tagline {
	position: absolute;
	bottom: 15%;
	right: 3%;
	width: 200px;
	height: auto;
	opacity: 0.4;
}
 

 
}
	



/* Desktop ------------------------ */

@media (min-width: 1200px) {


 

}



/* Nav/Menu
=============================================================================*/


@media (min-width: 1200px) {
	
	

 /* Menu Desktop
------------------------------------------------------------------------------*/

.overlay {
	display: inline-block;
}
.button_container {
	display: none;
}

.overlay-menu {
	display: inline-block;
	/*width: 1100px;*/
	z-index: 6000;
	font-family: LacrimaMG-SenzaBold;
	font-size: 22px;
	position: relative;
}

.overlay-menu ul {
	list-style: none;
	padding: 0px;
	margin: 0px;

}

.overlay-menu li {
	float: left;
}

.overlay-menu ul li a {
	color: #fff;
	text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.3);
	padding-top: 20px;
	padding-right: 12px;
	padding-bottom: 18px;
	padding-left: 12px;
	border-radius: 0px;
	text-transform: uppercase;
}

.overlay-menu ul li a:hover {
	background: rgba(0, 0, 0, 0.2);
	
}



.shop .overlay-menu ul li a {
	color: #000;
	text-shadow: 2px 2px 2px rgba(255, 255, 255, 0.8);
	padding-top: 6px;
	padding-right: 12px;
	padding-bottom: 8px;
	padding-left: 12px;
	border-radius: 4px;
}

.shop .overlay-menu ul li a:hover {
	background-color:  #f27074;
	text-shadow: none;
	color: #fff;
	
}

}


@media only screen and (max-width: 1199px) {
	
	
.site-cart {
	float: right;
    margin-top: -3px;
	position: static;
	right: 20px;
}

/* Responsive Menu
------------------------------------------------------------------------------*/

.menu {
  position: absolute;
  width: 100%;
  heigh: 100%;
  text-align: center;
  left: 0;
  margin: 0 auto;
 font-family: "LacrimaMG-SenzaBold";
 
}
/*

.menu a {
	display: inline-block;
	position: relative;
	text-align: center;
	color: #fff;
	text-decoration: none;
	overflow: visible;
	top: 5px;
	padding-left: 15px;
	padding-right: 15px;
	font-weight: 700;
}*/

.menu a:after {
  content: '';
  position: absolute;
  background: #73be44;
  height: 2px;
  width: 0%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  left: 50%;
  bottom: 0;
  -webkit-transition: .35s ease;
  transition: .35s ease;
}
.menu a:hover:after, .menu a:focus:after, .menu a:active:after {
  width: 100%;
}

.button_container:before {
	content: '';
	border-radius: 4px;
	padding-top: 24px;
	padding-right: 26px;
	padding-bottom: 22px;
	padding-left: 24px;
	margin-left: -9px;
	position: fixed;
	margin-top: -13px;

}

.button_container {
  position: absolute;
  top: 16px;
  right: 20px;
  height: 27px;
  width: 32px;
  cursor: pointer;
  z-index: 6000;
  -webkit-transition: opacity .25s ease;
  transition: opacity .25s ease;
}
.button_container:hover {
  opacity: .7;
}
.button_container.active .top {
  -webkit-transform: translateY(7px) translateX(0) rotate(45deg);
          transform: translateY(7px) translateX(0) rotate(45deg);
  background: #fff;
}
.button_container.active .middle {
  opacity: 0;
  background: #fff;
}
.button_container.active .bottom {
  -webkit-transform: translateY(-11px) translateX(0) rotate(-45deg);
          transform: translateY(-11px) translateX(0) rotate(-45deg);
  background: #fff;
}
.button_container span {
  background: #fff;
  border: none;
  height: 3px;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  -webkit-transition: all .35s ease;
  transition: all .35s ease;
  cursor: pointer;
}
.button_container span:nth-of-type(2) {
  top: 9px;
}
.button_container span:nth-of-type(3) {
  top: 18px;
}

.overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 0%;
	opacity: 0;
	visibility: hidden;
	-webkit-transition: opacity .6s, visibility .6s, height .6s;
	transition: opacity .6s, visibility .6s, height .6s;
	overflow: hidden;
	background-color: #303f82;
	z-index: 3400;
}
.overlay.open {
  opacity: .9;
  visibility: visible;
  height: 100%;
}
.overlay.open li {
  -webkit-animation: fadeInRight .5s ease forwards;
          animation: fadeInRight .5s ease forwards;
  -webkit-animation-delay: .35s;
          animation-delay: .35s;
}
.overlay.open li:nth-of-type(2) {
  -webkit-animation-delay: .4s;
          animation-delay: .4s;
}
.overlay.open li:nth-of-type(3) {
  -webkit-animation-delay: .45s;
          animation-delay: .45s;
}
.overlay.open li:nth-of-type(4) {
  -webkit-animation-delay: .50s;
          animation-delay: .50s;
}
.overlay nav {
	position: relative;
	height: 70%;
	top: 55%;
	left: -10px;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	 font-family: "LacrimaMG-SenzaBold";
	text-align: center;
	font-size: 38px;
		text-transform: uppercase;
}


.overlay ul {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  display: inline-block;
  position: relative;
  height: 100%;
}
.overlay ul li {
  display: block;
  height: 100%;
  height: calc(100% / 5);
  min-height: 119px;
  position: relative;
  opacity: 0;
}



/*Updated*/
.overlay ul li a {
	display: inline-block;
	position: relative;
	color: #FFF;
	text-decoration: none;
	padding-bottom: 10px;
	overflow: visible; /*for mobile*/
	-webkit-user-select: none;
	user-select: none;
	-webkit-touch-callout: none;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
}

.overlay ul li a:hover {
	text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
 
}
.overlay ul li a:hover:after, .overlay ul li a:focus:after, .overlay ul li a:active:after {
  width: 100%;
}
.overlay ul li a:after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 50%;
  width: 0%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  height: 3px;
  background: #FFF;
  -webkit-transition: .35s;
  transition: .35s;
}

@-webkit-keyframes fadeInRight {
  0% {
    opacity: 0;
    left: 20%;
  }
  100% {
    opacity: 1;
    left: 0;
  }
}

@keyframes fadeInRight {
  0% {
    opacity: 0;
    left: 20%;
  }
  100% {
    opacity: 1;
    left: 0;
  }
}



.menu-cart {
	display: table;
	margin-top: 0;
	margin-right: 0px;
	margin-bottom: 0;
	margin-left: auto;	
	padding-right: 80px;
}



}