#menu {
	width:100%;
	height:60px;
	background:rgba(255,255,255,0.35);
	}

.lt-ie9 #menu { background:transparent url(../../IMG/bg_menu.png) repeat left top;}

#menu:hover{background:#FFF;}

#header-container.down #menu {
	-webkit-box-shadow: 0px 1px 3px 2px rgba(0,0,0,0.1);
    box-shadow: 0px 1px 3px 2px rgba(0,0,0,0.1);
	background:#FFF;
	}

.lt-ie9 #header-container.down #menu { border-bottom:1px solid #DDDDDD;}


.picto-cl {display:none;}
.down .picto-cl  {display:block;}
.down #nav .picto-cl a {padding:0 17px 0 15px;}
 
/* -----------------------------------------
	First Level
----------------------------------------- */
#nav {float:left; width:100%;}

#nav ul {list-style: none;}
	
#nav li {float: left;}
	
#nav ul.menu-liste > li.menu-entree a,
#nav ul.menu-liste > .soin a,
#nav ul.menu-liste > .cadeau a {	
	display:block;
	padding:0 15px;
	font:700 0.688em/5.455em 'Montserrat', Arial, Helvetica, sans-serif;
	text-transform:uppercase;
	text-align:left;
	text-shadow:0 1px rgba(255,255,255,0.25);
	color:#3c2313;
	-webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
	-ms-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
	}

#nav ul.menu-liste > li.on a {
	color:#b1895e;
	background:#F5F5F5;
	}

#nav ul.menu-liste > li:hover a {
	background:#EEE;
	color:#b1895e;
	}

/*#nav ul.menu-liste > li.active a {color:#b1895e;}*/
		
#nav ul.menu-liste > .soin,
#nav ul.menu-liste > .cadeau {float:right;}

#nav ul.menu-liste > .soin a,
#nav ul.menu-liste > .cadeau a {color:#b1895e !important;}

#nav ul.menu-liste > .soin a {padding-left:30px !important;}
#nav ul.menu-liste > .cadeau a {
	padding-left:35px !important;
	padding-right:25px !important;
	}
	
#nav ul.menu-liste > .cadeau {background: transparent url(../../IMG/picto_cadeau.png) no-repeat scroll left bottom ;}
#nav ul.menu-liste > .soin {background: transparent url(../../IMG/picto_soin.png) no-repeat scroll left bottom ;}

#nav ul.menu-liste > .soin:hover {background-position: left top;}
#nav ul.menu-liste > .cadeau:hover {background-position: left top;}

#nav ul.menu-liste > .soin a:hover,
#nav ul.menu-liste > .cadeau a:hover {
	background:transparent;
	color:#3c2313;
	}
	
/* -----------------------------------------
	SS-Menu First lvl
----------------------------------------- */
#nav li .menu-liste {
	position:absolute;
	display: none;
	background:#f2706d;
	list-style:none;
	left:0.9375em;
	right:0.9375em;
	padding:0 15px;
	background:#EEE;
	z-index:50;
	}

#header-container.down #nav li .menu-liste {
	left:0;
	right:0;
	}

#nav li.menu-entree:hover ul {display: block;} 
		
#nav li .menu-liste li.menu-entree a {	
	display:block;
	padding:10px 15px;
	font:normal 0.813em/1.5em Georgia, serif;
	text-align:left;
	color:#666;
	text-transform:none;
	/* ANIMATION */
	-webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
	-ms-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
	}
	
#nav li .menu-liste li.menu-entree a strong {font-weight:normal;}
	
#nav li .menu-liste li.menu-entree {float:left;}

#nav li .menu-liste li.menu-entree a:hover {
	background:#DDD;
	color:#333;
	}

#nav li .menu-liste li.on a {color:#000;}




		
/* -----------------------------------------
	Media Queries
----------------------------------------- */
	/* Widescreen landscape */
	@media screen and (max-width: 1280px) and (min-width: 1024px) and (orientation: landscape) {
		}
	
	/* Ipad Landscape */
	@media screen and (max-width: 1024px) and (min-width: 768px) and (orientation: landscape) {
	}
	
	/* Ipad Portrait / Standard 960 (devices and browsers) / Small tablet Landscape 800x600 */
	@media only screen and (max-width: 960px) and (min-width: 768px) {
		#nav ul.menu-liste > li.menu-entree a,
		#nav ul.menu-liste > .soin a,
		#nav ul.menu-liste > .cadeau a {
  			padding-top:16px;
			padding-bottom:16px;
			line-height:1.25em;
			}
		#nav ul.menu-liste > li.menu-entree .texte_libre a {
			padding-top:0;
			padding-bottom:0;
			}
		#nav li .menu-liste li.menu-entree a {padding:7px 8px 8px;}
	}
	

	/* All Mobile Sizes (devices and browser) */
	@media only screen and (max-width: 767px) {
	}

	/* Small Tablet 800x600 Portrait (devices and browsers) / Mobile Landscape */
	@media only screen and (min-width: 480px) and (max-width: 767px) {
	}

	/* Mobile Portrait */
	@media only screen and (max-width: 479px) {
	}



/* -----------------------------------------
   RETINA Display
----------------------------------------- */

/* ---------------------------------------------------------- */
/* */
/* A media query that captures: */
/* */
/* - Retina iOS devices */
/* - Retina Macs running Safari */
/* - High DPI Windows PCs running IE 8 and above */
/* - Low DPI Windows PCs running IE, zoomed in */
/* - Low DPI Windows PCs and Macs running Firefox, zoomed in */
/* - Android hdpi devices and above */
/* - Android tvdpi devices, including Google Nexus 7 */
/* - Chrome running on high DPI Macs and PCs */
/* - Opera running on high DPI Macs, PCs and mobile devices */
/* */
/* Please note that that this code assumes you'll swap a */
/* 2× version of your images. If you'd like to supply */
/* finer increments, other thresholds might be appropriate. */
/* */
/* A test for CSS pixel densites can be found here: */
/* http://bjango.com/articles/min-device-pixel-ratio/ */
/* */
/* @marcedwards from @bjango */
/* */
/* ---------------------------------------------------------- */
 
@media	only screen and (-webkit-min-device-pixel-ratio: 1.3),
		only screen and (-o-min-device-pixel-ratio: 13/10),
		only screen and (min-resolution: 120dpi)
		{ 
		#nav ul.menu-liste > .cadeau {
			background-image:url(../../IMG/picto_cadeau-2x.png);
			background-size:30px 120px;
			}
		#nav ul.menu-liste > .soin {
			background-image:url(../../IMG/picto_soin-2x.png);
			background-size:30px 120px;
			}
		}