/*** ESSENTIAL STYLES ***/
.sf-menu, .sf-menu * {
	margin: 0;
	padding: 0;
	list-style: none;
}
.sf-menu li {
	position: relative;
}
.sf-menu ul {
	position: absolute;
	display: none;
	top: 100%;
	left: 0;
	z-index: 99;
 
/*	background:#3a4351 !important;*/
}
.sf-menu > li {
	float: left;
}
.sf-menu li:hover > ul,
.sf-menu li.sfHover > ul {
	display: block;
}

.sf-menu a {
	display: block;
}
.sf-menu ul ul {
	top: 0;
	left: 100%;
}


/*** DEMO SKIN ***/
.sf-menu {

}
.sf-menu ul {
	box-shadow: 2px 2px 6px rgba(0,0,0,.2);
	 /* allow long menu items to determine submenu width */
	 /* no auto sub width for IE7, see white-space comment below */
	background:#003060;
	margin-top:2px;
	min-width:200px;
	
}
.sf-menu a {
  color: #fff;
  font-size: 19px;
   font-family: 'futura_lt_btlight';
  text-decoration: none;
  padding: 14px 20px;
  display: block;
  font-weight: normal;
  text-align: center;
  line-height: 22px;
  width: 84px;
}

.sf-menu li a:hover, .sf-menu li.selected a, .sf-menu li.active a, .sf-menu li.focus a, .sf-menu li.sfHover a {
	color: #fff;
	background: url(../../images/images-new/puce-menu.png) top center no-repeat, url(../../images/images-new/hover-menu.png) repeat-x;
 -moz-transition: all .8s; 
-webkit-transition: all .8s; 
-o-transition: all .8s; 
transition: all .8s;
  margin-top: -2px;



}

#btn{
	line-height: 72px;
  padding: 0 20px;}	
.sf-menu li {
	
	-webkit-transition: background .2s;
	transition: background .2s;
	margin-right:1px;
	background:url(../../images/images-new/seperateur.png) right top 5px no-repeat;
}





.sf-menu ul li {

	color:#cc1111;
	margin-right: 0px;
	background:none;
	
}




.sf-menu ul li a {
	background:none !important;
	color:#fff!important;
	display: block;
 padding:0 8px 0 8px !important;
 text-align:left !important;
 max-width:inherit !important;
 font-size:16px !important;
 line-height: 32px !important;
 text-transform:none !important;
 border-bottom:1px dotted #fff !important;
 width:inherit;
 height:inherit;
}

.sf-menu ul li a:hover, .sf-menu ul li.selected a, .sf-menu ul li.active a, .sf-menu ul li.focus a, .sf-menu ul li.sfHover a {

	background:#ebebeb!important;
 color:#000 !important;
 border-bottom:1px solid #343434!important;

	}



.sf-menu li:hover,
.sf-menu li.sfHover {
	/*background: #453b2b;*/
	/* only transition out, not in */
	-webkit-transition: none;
	transition: none;

}


/*** arrows (for all except IE7) **/
.sf-arrows .sf-with-ul {
	/*padding-right: 2.5em;*/
	*padding-right: 1em; /* no CSS arrows for IE7 (lack pseudo-elements) */
}
/* styling for both css and generated arrows */
.sf-arrows .sf-with-ul:after {
	content: '';
	position: absolute;
top: 77%;
right: 37%;
	height: 18px;
	width: 21px;
	/* order of following 3 rules important for fallbacks to work */
	background:url(../../images/images-new/indicateur.png) no-repeat;
	overflow:hidden;
}
.sf-arrows > li > .sf-with-ul:focus:after,
.sf-arrows > li:hover > .sf-with-ul:after,
.sf-arrows > .sfHover > .sf-with-ul:after {
	border-top-color: #fff; /* IE8 fallback colour */
}
/* styling for right-facing arrows */
.sf-arrows ul .sf-with-ul:after {
	margin-top: -5px;
	margin-right: -3px;
	border-color: transparent;
	border-left-color: #fff; /* edit this to suit design (no rgba in IE8) */
	border-left-color:#fff;
}
.sf-arrows ul li > .sf-with-ul:focus:after,
.sf-arrows ul li:hover > .sf-with-ul:after,
.sf-arrows ul .sfHover > .sf-with-ul:after {
	border-left-color: #fff;
}

 /* Effect 17: move up fade out, push border */


.cl-effect-17 a::before {
	color: #fff;
	text-shadow: 0 0 1px rgba(255,255,255,0.3);
	content: attr(data-hover);
	position: absolute;
	-webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
	-moz-transition: -moz-transform 0.3s, opacity 0.3s;
	transition: transform 0.3s, opacity 0.3s;
	pointer-events: none;
}

.cl-effect-17 a::before {
	content: '';
	position: absolute;
	left: 0;
	top: -2px;
	width: 100%;
	height:1px;
	background: #feeba1;
	opacity: 0;
	-webkit-transform: translateY(5px);
	-moz-transform: translateY(5px);
	transform: translateY(5px);
	-webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
	-moz-transition: -moz-transform 0.3s, opacity 0.3s;
	transition: transform 0.3s, opacity 0.3s;
	pointer-events: none;
}

.cl-effect-17 a:hover::before,
.cl-effect-17 a:focus::before {
	opacity: 0;
	-webkit-transform: translateY(-2px);
	-moz-transform: translateY(-2px);
	transform: translateY(-2px);
}

.cl-effect-17 ul li a:hover::before,
.cl-effect-17 ul li a:focus::before {
	left: 0;
	width: 0;
	background:none;
	opacity: 0;
	height:0;

}

.cl-effect-17 li.selected a::before, .cl-effect-17 li.active a::before, .cl-effect-17 li.focus a::before, cl-effect-17 li.sfHover a::before  {
	opacity: 1;
	-webkit-transform: translateY(0px);
	-moz-transform: translateY(0px);
	transform: translateY(0px);}



.cl-effect-17 ul li.selected a::before, .cl-effect-17 ul li.active a::before, .cl-effect-17 ul li.focus a::before, cl-effect-17 ul li.sfHover a::before  {
	opacity: 0;
	-webkit-transform: translateY(0px);
	-moz-transform: translateY(0px);
	transform: translateY(0px);
left: 0;
	width: 0;
	background:none;
	opacity: 0;
	height:0;}




.cl-effect-17 a:hover::before,
.cl-effect-17 a:focus::before {
	opacity: 1;
	-webkit-transform: translateY(0px);
	-moz-transform: translateY(0px);
	transform: translateY(0px);
}