* {
  	margin: 0;
  	padding: 0;
  	box-sizing:border-box;
	font-family: 'Barlow Condensed', sans-serif;
        }

/*----------elements d'habillage---------*/

#color, #gradient, #pale, #dark {
	padding: 0;
	margin:0;
	position:fixed;
	top:0px;
	bottom:0;
	height:100%;
	left:0;
	width:120px;
	overflow:visible;
	z-index:9;
	border:none;
	}

#pale {
	background: rgb(255,255,255);
background: -moz-linear-gradient(180deg, rgba(255,255,255,1) 8%, rgba(240,240,240,0.65) 100%);
background: -webkit-linear-gradient(180deg, rgba(255,255,255,1) 8%, rgba(240,240,240,0.65) 100%);
background: linear-gradient(180deg, rgba(255,255,255,1) 8%, rgba(240,240,240,0.65) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff",endColorstr="#f0f0f0",GradientType=1);
	}

#dark {
	background:rgba(50,60,55,0.45)
	}

#color {
	background: rgba(133,70,90,.9);
	}

#gradient {
background: rgb(50,60,55);
background: -moz-linear-gradient(0deg, rgba(50,60,55,0.5) 37%, rgba(45,90,70,0.5) 72%, rgba(55,180,233,0.5) 100%);
background: -webkit-linear-gradient(0deg, rgba(50,60,55,0.5) 37%, rgba(45,90,70,0.5) 72%, rgba(55,180,233,0.5) 100%);
background: linear-gradient(0deg, rgba(50,60,55,0.5) 37%, rgba(45,90,70,0.5) 72%, rgba(55,180,233,0.5) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#323c37",endColorstr="#37b4e9",GradientType=1);
	}

@keyframes gradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}

.logo {
	position:absolute;
	width:120px;
	z-index:999;
	border-style: none;
	opacity:1;
	mix-blend-mode:normal;
	top:10px;
	padding: 0px 10px;
}

.menuline{
	width:70px;
	height:4px;
	background:#333;
	opacity:.2;
	border-radius: 99px;
	margin: 10px 30px 15px 10px;
}
.menuline2{
	width:70px;
	height:4px;
	background:#333;
	opacity:.2;
	border-radius: 99px;
	margin: 10px 15px 15px 25px;
}

.bandeau {
	background: rgba(200, 200, 200, 0);
	padding: 0;
	margin:0;
	list-style-type: none;
	text-align: center;
	position:fixed;
	top:0px;
	bottom:0;
	height:100%;
	left:0;
	width:120px;
	overflow:visible;
	box-shadow: 2px 0px 16px 0px rgba(0, 0, 0, 0.3);
	z-index:10;
	border:none;
	
}

/*----------MENU DEROULANT --------*/


.notselected{
	opacity:1;
	-webkit-filter: blur(4px); /* Safari 6.0 - 9.0 */
 	filter: blur(4px);

}

.notselected:hover{
	opacity:1;
	-webkit-filter: blur(0px); /* Safari 6.0 - 9.0 */
 	filter: blur(0px);
}

.dropdown {
	background:none;
	z-index:90;
	color:#333;
	opacity:1;
	width:120px;
	border:none;
	padding-top:150px;
}

.dropdown ul {
	overflow: visible; 
	list-style-type: none;
	text-align: center;
	border:none;
	padding:0px;
	font-size: 1em;
}


/* texte sous icone */
.dropdown li {
	margin: 0px 15px;
   	border:none;
	background-color: none;
	opacity:1;
	font-style: italic;
	font-size: 1.4em;
	font-weight: 500;
	color: #333;
	line-height: 1em;
}	  

.dropdown li li{
	height: 0em;
   	overflow: hidden;
  	transition: height .3s;
   	border-radius:0;
   	margin:0;
	text-align: center;
	font-style: italic;
	font-size: 1em;
	font-weight: 500;
	color: #333;
}

.dropdown a {
  	display:block;
  	text-decoration: none;
  	padding: 5px 20px;
	border:none;
}


/* texte sous l'icone */
.dropdown li:hover {
   	background: none;
	opacity:1;
	font-style: italic;
	font-weight: 500;
	color:#333;
	line-height: 1em;
}

/* look des icones de depart */

.dropdown #dropmenu li a{
	margin: 0 5px;
	padding:15px;
	font-style: italic;
	font-weight: 500;
	color: #333;
	opacity:1;
	-webkit-filter: blur(4px); /* Safari 6.0 - 9.0 */
 	filter: blur(4px);
}

.dropdown #dropmenu li:hover a{
	-webkit-filter: blur(0px); /* Safari 6.0 - 9.0 */
 	filter: blur(0px);
}

.dropdown #dropmenu:hover li{
	height: 110px;
	width:100%;
	font-size: 1em;
	font-style: italic;
	font-weight: 500;
	color: #333;
	line-height: 1em;
}

.dropdown li:hover a.retour {
    display: none;
}


/*----------------------*/


.dropdown2{
	background:none;
	z-index:90;
	color:#333;
	opacity:1;
	width:120px;
	border:none;
	padding-top:0px;
}


.dropdown2, ul {
	overflow: visible; 
	list-style-type: none;
	text-align: center;
	border:none;
	padding:0px;
	font-size: 1em;
}


/* texte sous icone */
.dropdown2 li {
	margin: 0px 15px;
   	border:none;
	background-color: none;
	opacity:1;
	font-style: italic;
	font-size: 1.2em;
	font-weight: 500;
	color:#333;
}	  



.dropdown2 li li{
	height: 0em;
   	overflow: hidden;
  	transition: height .3s;
   	border-radius:0;
   	margin:0;
	text-align: center;
	font-style: italic;
	font-size: 1em;
	font-weight: 500;
	color: #333;
	line-height: 1em;


}
.dropdown2 a {
  	display:block;
  	text-decoration: none;
  	padding: 5px 20px;
	border:none;
	
}


/* texte sous l'icone */
.dropdown2 li:hover {
   	background: none;
	opacity:1;
	font-style: italic;
	font-weight: 500;
	color: #333;
	line-height: 1em;
}

/* look des icones de depart */
.dropdown2 #dropmenu2 li a{
	margin: 0 5px;
	padding:15px;
	font-style: italic;
	font-weight: 500;
	color: #333;
	line-height: 1em;
	opacity:1;
	-webkit-filter: blur(4px); /* Safari 6.0 - 9.0 */
 	filter: blur(4px);
}

.dropdown2 #dropmenu2 li:hover a{
	opacity:1;
		-webkit-filter: blur(0px); /* Safari 6.0 - 9.0 */
 	filter: blur(0px);
}

.dropdown2 #dropmenu2:hover li{
	height: 120px;
	width:100%;
	font-size: 1.2em;
	font-style: italic;
	font-weight: 500;
	color: #333;
	line-height: 1em;
}


.dropdown2 li:hover a.retour {
    display: none;
}


/*----------- RETOUR MENU -----------*/


.dropup {
	background: none;
	z-index:99;
	width:120px;
	border:none;
	padding-top:0px;
	font-style: italic;
	font-size: 1.4em;
	font-weight: 500;
	color: #333;
	line-height: 1em;

}

.dropup ul{
	overflow: visible; 
	list-style-type: none;
	text-align: center;
	border:none;
}

.dropup li {
	margin: 0 10px;
   	border:none;
	border-color: black;
	background-color: none;
	opacity:1;
}

.dropup li li{
	height: 0em;
   	overflow: hidden;
   	border-radius:0;
	opacity: 1;
   	box-shadow: none;
   	margin:0;
	font-style: italic;
	font-size: 1em;
	font-weight: 500;
	color: #333;
	line-height: 1em;
	text-align: center;
	transition: height .5s;
}

.dropup li:hover li {
	overflow: visible;
	font-style: italic;
	opacity:1;
	height:3.8em;
}

.dropup a {
  	display:block;
  	text-decoration: none;
  	color: #333;
  	padding: 5px 20px;
	margin-top: 10px;
	border:none;	
}

/* icone et texte */
.dropup li:hover {
   	background: none;
	opacity:1;
	-webkit-filter: blur(0px); /* Safari 6.0 - 9.0 */
  filter: blur(0px);
}

.dropup ul li:last-child {
   border-radius: 0 0;
   border:none;
}

.retour{
	margin-top:10px;
}

.dropup li:hover a.retour {
    display: none;
}