/*** ESSENTIAL STYLES ***/
#navigation .sf-menu, #navigation .sf-menu * {
	margin: 0;
	padding: 0;
	list-style: none;
}
#navigation .sf-menu li {
	position: relative;
}
#navigation .sf-menu ul {
	position: absolute;
	display: none;
	top: 100%;
	left: 0;
	z-index: 99;
}
#navigation .sf-menu > li {
	float: left;
}
#navigation .sf-menu li:hover > ul,
#navigation .sf-menu li.sfHover > ul {
	display: block;
}
#lien4{
	    width: 113px;
}

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

#lien2{
    width: 280px;
    padding: 8px 16px !important;
}



/*** DEMO SKIN ***/
#navigation .sf-menu {
	display: -webkit-flex;
	display: flex;
	
}
#navigation .sf-menu li {
	-webkit-flex: 1 auto;
	flex: 1 auto;
    background: url(../images/separateur.png) right center no-repeat;
}
#navigation .sf-menu a {
    position: relative;
    color: #fff;
    font-family: arial;
    font-size: 18px;
    text-decoration: none;
         padding: 19px 22px;
    text-align: center;
	font-family: 'Arial-Black';
    text-transform: uppercase;
}
/*#navigation .sf-menu a::after {
	content: '';
	display: block;
	position: absolute;
	left: 50px;
	right: 50px;
	bottom: 1px;
	height: 0;
	transition: all .4s;
}*/
#navigation .sf-menu a:hover, #navigation .sf-menu > li.selected > a {
	background: #19a2f9;
	margin-bottom: 1px;
}

#navigation .sf-menu ul {
	background: #10a2bd;
	min-width: 100%;
}
#navigation .sf-menu ul li {
	border-top: 1px solid #fff;
}
#navigation .sf-menu ul li:first-child {
	border-top: 0;
}
#navigation .sf-menu ul a {
	text-align: left;
	padding: 10px;
	font-size: 12px;
	margin: 0;
	background: #9e2e2d;
}
#navigation .sf-menu ul a:hover {		
	border-bottom: none;
}
#navigation .sf-menu ul a::after {
	content: none;
}
#navigation .sf-menu ul li a:hover, #navigation .sf-menu ul li.sfHover > a,
#navigation .sf-menu ul li.active > a, #navigation .sf-menu ul li.selected > a {
	background: #244595;
}

        
      
        

/* styling for right-facing arrows */
.sf-arrows .sf-with-ul:after {
	/*-------------------------------------------position flèche-------------------------------------------------*/
	content: "\f078";
	position: absolute;
	top: 55%;
	right: 45%;
	font-family: "FontAwesome";
	font-size: 11px;/*--------------------------------------------------------------------------------------------*/
}
.sf-arrows > li > .sf-with-ul:focus:after, .sf-arrows > li:hover > .sf-with-ul:after, .sf-arrows > .sfHover > .sf-with-ul:after {
	content: "\f078";
	font-family: "FontAwesome";
}
/* styling for right-facing arrows */
.sf-arrows ul .sf-with-ul:after {
	content: "\f078";
	font-family: "FontAwesome";
}
.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 {
	content: "\f078";
	font-family: "FontAwesome";
}