body
{

	padding:0;
	overflow-x: hidden;
	margin:0;
}

*,
*:before,
*:after {
  box-sizing: inherit;
  padding: 0;
  margin: 0;
  list-style: none;
  text-decoration: none;
}

#logo{
	margin:0;
	padding:0;
}


nav {

  z-index: 1;
}


nav #menu {
  float: right;
	widows: 200px;
	margin-top:30px;
	margin-bottom:10px;
	text-align:right;
}

nav #menu li {
  display: inline-block;
  padding: 0px 30px;
  cursor: pointer;
  position: relative;
  transition: all 0.3s ease-out;
	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
}

nav #menu li a {
  color: #fff;
}

nav #menu li:hover {
  background: #333;
}

#toggle {
  position: absolute;
  right: 20px;
  top: 14px;
  z-index: 999;
  width: 40px;
  height: 40px;
  cursor: pointer;
  float: right;
  transition: all 0.3s ease-out;
  visibility: hidden;
  opacity: 0;
}

#toggle .span {
  height: 7px;
  background: grey;
  margin: 5px auto;
  backface-visibility: hidden;
}

#toggle.on #one {
  transform: rotate(45deg) translateX(6px) translateY(6px);
}

#toggle.on #two {
  opacity: 0;
}

#toggle.on #three {
  transform: rotate(-45deg) translateX(10px) translateY(-12px);
}

#resize {
  z-index: 1;
  position: absolute;
  top: 0px;
  background: #ddd;
  width: 100%;
  height: 100%;
  visibility: hidden;
  opacity: 0;
  transition: all 0.3s ease-out;
  display: table;
}

#resize #menu {
  height: 50px;
  display: table-cell;
  vertical-align: left;
}

#resize #menu li {
  display: block;
  text-align: center;
  padding: 20px 0;
  text-align: center;
  font-size: 17px;
  min-height: 50px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease-out;
	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
	font-size:14px;
}

#resize #menu li:hover {
  background: #212121;
}

#resize #menu li:hover a {
  color: #fff;
  transition: all 0.3s ease-out;
}

#resize #menu li a {
  color: #212121;
}

#resize.active {
  visibility: visible;
  opacity: 0.99;
}

@media (max-width: 900px) {
  #toggle {
    visibility: visible;
    opacity: 1;
  }
  nav #menu {
    display: none;
  }
}

@media (min-width: 900px) {
  #resize {
    visibility: hidden !important;
  }
}

#headerLine
{
	
	width:100%;
	height:100px;
	background-color: white;
  position: fixed;
  top: 0;
	border-bottom: 5px green solid;
	
}

#headerRight
{
	width:100%;
}

#headerLeft
{
	float:left;
	margin:25px;
	padding:0px;
}


@media only screen and (min-width: 768px) {

#hero{ 
	width:100%;
	height:300px;
	background-image: url("../../hero.png");
  background-repeat: no-repeat;
	margin-top:75px;
 
}

	
#hero h1
{color:white;
text-align: center;
padding-top:15px;
	font-size:70px;
	margin-bottom:0;
	font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif";

}
	
		#hero h2
{color:white;
text-align: center;
text-transform: uppercase;
padding-top:50px;
font-size: 50px;
		font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif";


}


#hero p
{color:white;
text-align: center;
text-transform: uppercase;
	margin:0px;
	font-size: 40px;
}
}

/* Hero Responsive */	

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

#hero{ 
	width:100%;
	height:200px;
	padding-top:100px;
		 background-image: url("../../smallHero.png");
  background-repeat: no-repeat;
 
}

#hero h1
{color:white;
text-align: center;
text-transform: uppercase;
padding-top:0;

}
	
	#hero h2
{color:white;
text-align: center;
text-transform: uppercase;
padding-top:5%;

}

#hero p
	
{color:white;
text-align: center;
text-transform: uppercase;
	margin:0px;
	font-size: 16px;
}
	
}


/* Body Responsive */

@media only screen and (max-width: 768px){
	#body{
	
height:715px;
	width:100%;
	background-image: url("../../b&wImage.png");
	background-repeat: no-repeat;
	margin:auto;
}
	
}

/* Body Desktop */

@media only screen and (min-width: 768px){
	
#body{
	
height:650px;
	width:100%;
	background-image: url("../../b&wImage.png");
	background-repeat: no-repeat;
	margin:auto;
}
	
	}

/* Buttons */

@media only screen and (min-width: 768px){

#buttonBox
{
	align:center;
	width:1300px;
	height:150px;
	margin: 25px 0px 100px 200px;
	
}
	
	#button1{
	width: 280px;
	height:100px;
	margin-left: 30px;
  border: 3px solid green;
		 background-image: url('wrapsIcon.png');
background-color:yellow;
	float:left;
	outline: 5px solid #84bd56;
box-shadow: 10px 10px #677C5C;
}
	
	#button1 h1
{
	color:black;
	padding-top:125px;
	text-align:center;
	text-transform:uppercase;
}
	
	#button2{
	width: 280px;
	height:100px;
	margin-left: 30px;
  border: 3px solid green;
		 background-image: url('hotBowlIcon.png');

	float:left;
	outline: 5px solid #84bd56;
box-shadow: 10px 10px #677C5C;
}
	
	#button2 h1
{
	color:black;
	padding-top:125px;
	text-align:center;
	text-transform:uppercase;
}
	
	#button3{
	width: 280px;
	height:100px;
	margin-left: 30px;
  border: 3px solid green;
		 background-image: url('wrapsIcon.png');
background-color:yellow;
	float:left;
	outline: 5px solid #84bd56;
box-shadow: 10px 10px #677C5C;
}
	
		#button3 h1
{
	color:black;
	padding-top:125px;
	text-align:center;
	text-transform:uppercase;
}
	
		#button4{
	width: 280px;
	height:100px;
	margin-left: 30px;
  border: 3px solid green;
		 background-image: url('wrapsIcon.png');
background-color:yellow;
	float:left;
	outline: 5px solid #84bd56;
box-shadow: 10px 10px #677C5C;
}
	
		#button4 h1
{
	color:black;
	padding-top:125px;
	text-align:center;
	text-transform:uppercase;
}
	
}

/* Buttons Responsive */

@media only screen and (max-width: 768px){
	
	#buttonBox
{
	width:365px;
	height:100%;
margin:auto;	
	
}
	
		#buttons
{
	width:365px;
	height:100%;
	margin:auto;
	
	
}
	
	#button1{
	width: 125px;
	height:125px;
	margin-left: 130px;
	padding:0;
  border: 3px solid green;
	 background-image: url('coolSaladIcon.png');
  background-repeat: no-repeat;
	float:left;
	outline: 5px solid #84bd56;
box-shadow: 10px 10px #677C5C;

}

	#button1 h1
{
	color:black;
	padding-top:125px;
	text-align:center;
	text-transform:uppercase;
}
	
		#button2{
	width: 125px;
	height:125px;
	margin-left: 130px;
	padding:0;
  border: 3px solid green;
	 background-image: url('coolSaladIcon.png');
  background-repeat: no-repeat;
	float:left;
	outline: 5px solid #84bd56;
box-shadow: 10px 10px #677C5C;

}

	#button2 h1
{
	color:black;
	padding-top:125px;
	text-align:center;
	text-transform:uppercase;
}
	
	#button3{
	width: 125px;
	height:125px;
	margin-left: 130px;
	padding:0;
  border: 3px solid green;
	 background-image: url('coolSaladIcon.png');
  background-repeat: no-repeat;
	float:left;
	outline: 5px solid #84bd56;
box-shadow: 10px 10px #677C5C;

}

	#button3 h1
{
	color:black;
	padding-top:125px;
	text-align:center;
	text-transform:uppercase;
}
	
		#button4{
	width: 125px;
	height:125px;
	margin-left: 130px;
	padding:0;
  border: 3px solid green;
	 background-image: url('coolSaladIcon.png');
  background-repeat: no-repeat;
	float:left;
	outline: 5px solid #84bd56;
box-shadow: 10px 10px #677C5C;

}

	#button4 h1
{
	color:black;
	padding-top:125px;
	text-align:center;
	text-transform:uppercase;
}

}



/* Information Box */

@media only screen and (min-width: 768px){
	
#information
	{
width:100%;
height:150px;
		background-color:white;
outline: 5px solid #84bd56;
box-shadow: 10px 10px #5a78bb;
 margin: 20px 0 30px 200px;
  width: 75%;
	padding-top:0;
	padding-left:3px;
}
	
	
#logoMain{
	float:left;
	width:200px;
}
	#mission h1
{
	color: #617C59;
	width: 1100px;
	padding-top:20px;
	margin:12px;;
	text-transform:uppercase;
	font-size:24px;
}
	
	#mission p
	
	{
	color: grey;
	width: 1100px;
	padding-top:10px;
	margin:0;
	text-transform:uppercase;
	font-size:26px;
		margin-bottom: 15px;
}
	
	
	#mission ul {
  position: absolute;
 margin-left:175px;
 
}
	
	 #mission li {
    display: inline-block;
    margin-left: 1em;
		 font-size: 22px;
    font-weight: bold;
    text-transform: uppercase;
		 color:#70263d;
  }
	
	
	
}

/* Information Box Responsive */

@media only screen and (max-width: 768px){
	
#information{
		width:90%;
		
height:350px;
outline: 5px solid #84bd56;
box-shadow: 10px 10px #5a78bb;
margin: auto;
	margin-top:0;
	margin-bottom:30px;

}
	
#logoMain{
	float:none;
	width:300px;
margin-top:10px;
	}
		#mission h1
{
	color: #617C59;
	font-size:18px;
	padding-top:10px;
	padding-left:5px;
	margin:0;
	text-transform:uppercase;
	font-size:18px;
}
	
		#mission p
	
	{
	display:none;
}
	
	
#mission ul {
  
 margin-left:10px;
	padding-top:10px;
 
}
	
		 #mission li {
    display: inline-block;
    margin-left: 0;
		 font-size: 14px;
    font-weight: bold;
    text-transform: uppercase;
		 color:#70263d;
	margin-right:5px;
  }
	
	
}

/* topMenu Box */

@media only screen and (min-width: 768px){
	
#topMenu
	{
width:100%;
		height:100%;
clear:both;
}
}




/* bottomMenu Box */

@media only screen and (min-width: 768px){
	
#bottomMenu
	{
width:100%;
clear:both;
}
}

/* Menu Header Responsive */

@media only screen and (max-width: 768px){
	#menuHeader h1
{color: grey;
}
}
/* Menu Header */

@media only screen and (min-width: 768px){

#menuHeader h1
{color: grey;
margin-left:200px;
	margin-bottom:10px;
}

/* Cool Salads Responsive */
	
	@media only screen and (max-width: 768px)
	{
#coolSalads
{
	width:300px;
		height:300px;
	margin:auto;
	padding-right:0;
	margin-right:50px;
	padding-left:0;
}
#coolSalads h1

{
	color: rgb(0, 153, 255);
text-transform: uppercase;
padding-bottom:0px;
	margin:0;
	
}


		
}
	
	/* Specials */
	

#specials h1
	{
			color:grey;
text-transform: uppercase;
padding-bottom:0px;
	margin-left:200px;
		
	}
	
	#specials h2
	{
			color:#70263d;
text-transform: uppercase;
padding-bottom:0px;
	margin-left:200px;
		margin-bottom:10px;
		
	}

	/* Cool Salads */
	
	@media only screen and (min-width: 768px){
#coolSalads
{
	width:600px;
		height:300px;
	float:left;
	padding-right:20px;
	margin-right:50px;
	padding-left:200px;
}
		
		#coolSalads h1

{
	color:#73bf44;
text-transform: uppercase;
padding-bottom:0px;
	margin:0;
	
}
		#coolSalads h2

{
	color:#73bf44;
text-transform: uppercase;
padding:0;
	margin:0;
	font-size:24px;
	font-size:24px;
}

		
		
#coolSalads p3

{
	color:grey;
color:#706f71;
padding:0;
	margin:0;
	font-size:17px;
}
	#cool salads ul{
		margin:0;
		}
		
}
	
	/* WarmBowls Responsive */
@media only screen and (max-width: 768px){

#warmBowls
{
		width:300px;
		height:300px;
	margin:auto;
	padding-right:0;
	margin-right:50px;
	padding-left:0;
	padding-top:150px;
}
	
	#warmBowls h1

{
	color:#DC5595;
text-transform: uppercase;
padding:0;
	margin:0;
}
	
	#warmBowls h2

{
	color:#DC5595;
text-transform: uppercase;
padding:0;
	margin:0;
	font-size:14px;
}
	
}

	

/* WarmBowls */

@media only screen and (min-width: 768px){

#warmBowls
{
	width:600px;
		height:150px;
	float:left;
	padding-left:40px;
}
		#warmBowls h1

{
	color:#DC5595;
text-transform: uppercase;
padding:0;
	margin:0;
}
		#warmBowls h2

{
	color:#DC5595;
text-transform: uppercase;
padding:0;
	margin:0;
	font-size:24px;
}
	
		#warmBowls p3

{
	color:grey;
color:#706f71;
padding:0;
	margin:0;
	font-size:17px;
}
}
	
}