/* #MENU
================================================== */
#nav-menu	{
 position:fixed;
 top:0; left:0;
 z-index:3000;
	width:100%; background: rgba(255, 255, 255, 0.95);
}

a, li    	{
 -webkit-tap-highlight-color: #A38C71;
}



.nav ul 	{ width: 100%; margin: 0;padding: 0; list-style: none; font-size: 1em; align-items: center; font-weight: bold;}
.nav li span 	{ display: block;}
.nav a 		{ display: block; color: #C7B299; text-decoration: none;
		  -webkit-transition: color .5s, background .5s, height .5s;
 		  -moz-transition: color .5s, background .5s, height .5s; -o-transition: color .5s, background .5s, height .5s;
 		  -ms-transition: color .5s, background .5s, height .5s; transition: color .5s, background .5s, height .5s;}
.nav i{
	/* Make the font smoother for Chrome */
	-webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0);
 	-o-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);
}

/* Hover effect for the whole navigation to make the hovered item stand out */
.no-touch .nav ul:hover a { color: #C7B299;}
.no-touch .nav ul:hover a:hover { color: #A38C71;}

/* Styling the toggle menu link and hiding it */
.nav .navtoogle{
	display: none; width: 100%;
	font-weight: normal; text-align: center; color: #A38C71; font-size: 1.2em;
 	background: #FFFFFF; border: none;
 	border-bottom: 2px solid #C7B299;
 	cursor: pointer;
}

/* For screen bigger than 1088px */
/********************************************/
@media (min-width: 68em) 
{
   /* Transforms the list into a horizontal navigation */
   .nav li { float: left; font-size: 0.8em;  padding: 6px 0 0 0;
             width: 10%; text-align: center; -webkit-transition: border .5s;
 	     -moz-transition: border .5s; -o-transition: border .5s;
 	     -ms-transition: border .5s; transition: border .5s; }

}

/* For screen between 550px */
/* CSS specific to the 3 columns version */
/********************************************/
@media (min-width:34.375em) and (max-width:68em)
{
   /* Creating the 2 column layout using floating elements once again */
   .nav li {display: block; text-align: center; float: left; width: 25%; font-size: 0.8em; padding: 6px 0 0 0;}
}

/* For screen less than 550px */
@media (max-width: 34.375em) 
{
   /* Unhiding the styled menu link */
   .nav .navtoogle{ margin: 0;  display: block;}
   .nav li { padding: 6px 0 0 0; text-align: center; font-size: 1em;}
	
   /* When JavaScript is disabled, we hide the menu */
   .no-js .nav ul { max-height: 25em; overflow: hidden;}
	
   /* When JavaScript is enabled, we hide the menu */
   .js .nav ul { max-height: 0em; overflow: hidden;}
		
    /* Displaying the menu when the user has clicked on the button*/
    .js .nav .active + ul { max-height: 25em;
	overflow: hidden;
 	-webkit-transition: max-height .4s;
 	-moz-transition: max-height .4s;
 	-o-transition: max-height .4s;
	-ms-transition: max-height .4s;
 	transition: max-height .4s; }

}