@charset "utf-8";

#menu {
	width: 100%;
	<!--* max-width: 1000px; *-->
	margin: 0 auto;
	padding: 0;
	font-size:0.9em;
	
}
#menu li{
	display: block;
	float: left;
	width: 16.6666%;
	margin: 0;
	padding: 0;
	border-bottom:#b38850 3px solid;

}
#menu li a {
	display: block;
	padding: 10px 0 10px 0;
	
	color: #000;
	text-align: center;
	text-decoration: none;

}

.back1{background-color: #ffeec6;}
.back2 {background-color: #ffcac8;}
.back3 {background-color: #ff6633;}


#menu li a:hover{
	background-color: #ffdfdf; 
	color:#000;

}

#menu li.back3 a:hover{background-color: #ff6633;}


#toggle {
	display: none;
}
@media only screen and (max-width: 768px) {
	#menu li {
		width: 16.6666%;
		border-bottom: 1px solid #ccc;
	}
}
/*
@media only screen and (max-width: 480px) {
*/
@media only screen and (max-width: 568px) {
	#menu {
		display: none;
	}
	#menu li {
		width: 100%;
	}
	#toggle {
		display: block;
		position: relative;
		width: 100%;
		background: #b29d80;
	
	}
	#toggle a{
		display: block;
		position: relative;
		padding: 10px 0 ;
		border-bottom: 1px solid #ccc;
		color:#FFF;
		text-align: center;
		text-decoration: none;
		
		
	}
	#toggle:before {
		display: block;
		content: "";
		position: absolute;
		top: 50%;
		left: 10px;
		width: 30px;
		height: 29px;
		margin-top: -15px;
		background: #FFF;
	}
	#toggle a:before, #toggle a:after {
		display: block;
		content: "";
		position: absolute;
		top: 50%;
		left: 10px;
		width: 30px;
		height: 6px;
		background: #b29d80;
	}
	#toggle a:before {
		margin-top:-9px;
	}
	#toggle a:after {
		margin-top: 3px;
	}
}