/************************************************************************************
*	Menu
************************************************************************************/
body { 
	margin:0px;
	padding:0px;
	font-family: Arial;
}

nav {
	min-width: 240px;
	padding: 0px;
	margin-top: 56px;
	width: 240px;
	background-color:#333333;
	position:fixed;
	height: 100%;
	max-height:100%;
	z-index:1002;
}

nav > ul {
	margin: 0px;
	padding: 0px;
	border-top: 1px #666 solid;
	border-bottom: 1px #666 solid;
}

nav li {
	list-style-type: none;
	position: absolute ,static;
	
}

nav > ul > li {
	float: left;
	position:relative;
}

/* nav > ul > #menu-logiciel-ETTWIN {
	height:100%;
	transition: height 1s 0.5s;
}

nav > ul > #menu-logiciel-ETTWIN:hover {
	height:38.1px;
	transition: height 1s 0.5s;
} */


nav > ul::after {
	content:"";
	display:table;
	clear: both;
}

.submenu {
	/*display: none;*/
	/*opacity: 0;*/
	/* margin-top:-20px; */
	/*transition: margin-top 1s;*/
	width:100%;
}

/*chaque li de menu doivent être ajustés*/
/* .menuETT{
	opacity: 0;
	margin-top:-1.4px;
	z-index:-1;
	height:0px;
	transition: margin-top 1s 1.1s, height 1s 1.1s;	
}
 */

#menuEtt1{
	opacity: 0;
	margin-top:-1.4px;
	z-index:-1;
	height:0px;
	transition: opacity 0.8s 1.1s, margin-top 1s 1.1s, height 1s 1.1s;
	
}

#menuEtt2 {
	opacity: 0;
	margin-top:-1.35px;
	z-index:-1;
	height:0px;
	transition: opacity 0.8s 1.1s, margin-top 1s 1.1s, height 1s 1.1s;
	
}

#menuEtt3 {
	opacity: 0;
	margin-top:-1.3px;
	z-index:-1;
	height:0px;
	transition: opacity 0.8s 1.1s, margin-top 1s 1.1s, height 1s 1.1s;
	
}

#menuEtt4{
	opacity: 0;
	margin-top:-1.25px;
	z-index:-1;
	height:0px;
	transition: opacity 0.8s 1.1s, margin-top 1s 1.1s, height 1s 1.1s;
	
}

#menuEtt5 {
	opacity: 0;
	margin-top:-1.2px;
	z-index:-1;
	height:0px;
	transition: opacity 0.8s 1.1s, margin-top 1s 1.1s, height 1s 1.1s;
	
}

#menuEtt6 {
	opacity: 0;
	margin-top:-1.15px;
	z-index:-1;
	height:0px;
	transition: opacity 0.8s 1.1s, margin-top 1s 1.1s, height 1s 1.1s;
	
}

#menuEtt7 {
	opacity: 0;
	margin-top:-1.1px;
	z-index:-1;
	height:0px;
	transition: opacity 0.8s 1.075s, margin-top 1s 1.1s, height 1s 1.1s;
	
}

#menuEtt8 {
	opacity: 0;
	margin-top:-1.05px;
	z-index:-1;
	height:0px;
	transition: opacity 0.8s 1.05s, margin-top 1s 1.1s, height 1s 1.1s;
	
}

#menuEtt9 {
	opacity: 0;
	margin-top:-1px;
	z-index:-1;
	height:0px;
	transition: opacity 0.8s 1.025s, margin-top 1s 1.1s, height 1s 1.1s;
	
}

#menuEtt10 {
	opacity: 0;
	margin-top:-0.98px;
	z-index:-1;
	height:0px;
	transition: opacity 0.8s 1s, margin-top 1s 1.1s, height 1s 1.1s;
	
}

#menuEtt11 {
	opacity: 0;
	margin-top:-0.97px;
	z-index:-1;
	height:0px;
	transition: opacity 0.8s 0.975s, margin-top 1s 1.1s, height 1s 1.1s;
	
}

#menuEtt12 {
	opacity: 0;
	margin-top:-0.96px;
	z-index:-1;
	height:0px;
	transition: opacity 0.8s 0.95s, margin-top 1s 1.1s, height 1s 1.1s;
	
}

#menuEtt13 {
	opacity: 0;
	margin-top:-0.95px;
	z-index:-1;
	height:0px;
	transition: opacity 0.8s 0.925s, margin-top 1s 1.1s, height 1s 1.1s;
	
}

#menuEtt14 {
	opacity: 0;
	margin-top:-0.94px;
	z-index:-1;
	height:0px;
	transition: opacity 0.8s 0.9s, margin-top 1s 1.1s, height 1s 1.1s;
	
}

#menuEtt15 {
	opacity: 0;
	margin-top:-0.93px;
	z-index:-1;
	height:0px;
	transition: opacity 0.8s 0.875s, margin-top 1s 1.1s, height 1s 1.1s;
	
}

#menuEtt16 {
	opacity: 0;
	margin-top:-0.92px;
	z-index:-1;
	height:0px;
	transition: opacity 0.8s 0.85s, margin-top 1s 1.1s, height 1s 1.1s;
	
}

#menuEtt17 {
	opacity: 0;
	margin-top:-0.91px;
	z-index:-1;
	height:0px;
	transition: opacity 0.8s 0.825s, margin-top 1s 1.1s, height 1s 1.1s;
	
}

#menuEtt18 {
	opacity: 0;
	margin-top:-0.9px;
	z-index:-1;
	height:0px;
	transition: opacity 0.8s 0.8s, margin-top 1s 1.1s, height 1s 1.1s;
	
}

/*chaque li de menu doivent être ajustés*/
/* .menuProp{
	opacity: 0;
	margin-top:-1.1px;
	z-index:-1;
	height:0px;
	transition: margin-top 1s 1.1s, height 1s 1.1s;
} */

#menuProp1{
	opacity: 0;
	margin-top:-1.1px;
	z-index:-1;
	height:0px;
	transition: opacity 0.8s 1.1s, margin-top 1s 1.1s, height 1s 1.1s;
}

#menuProp2{
	opacity: 0;
	margin-top:-1.1px;
	z-index:-1;
	height:0px;
	transition: opacity 0.8s 1.1s, margin-top 1s 1.1s, height 1s 1.1s;
}

#menuProp3{
	opacity: 0;
	margin-top:-1.1px;
	z-index:-1;
	height:0px;
	transition: opacity 0.8s 1.1s, margin-top 1s 1.1s, height 1s 1.1s;
}

#menuProp4{
	opacity: 0;
	margin-top:-1.1px;
	z-index:-1;
	height:0px;
	transition: opacity 0.8s 1.1s, margin-top 1s 1.1s, height 1s 1.1s;
}

#menuProp5{
	opacity: 0;
	margin-top:-1.1px;
	z-index:-1;
	height:0px;
	transition: opacity 0.8s 1.1s, margin-top 1s 1.1s, height 1s 1.1s;
}

#menuProp6{
	opacity: 0;
	margin-top:-1.1px;
	z-index:-1;
	height:0px;
	transition: opacity 0.8s 1.1s, margin-top 1s 1.1s, height 1s 1.1s;
}

#menuProp7{
	opacity: 0;
	margin-top:-1.1px;
	z-index:-1;
	height:0px;
	transition: opacity 0.8s 1.075s, margin-top 1s 1.1s, height 1s 1.1s;
}

#menuProp8{
	opacity: 0;
	margin-top:-1.1px;
	z-index:-1;
	height:0px;
	transition: opacity 0.8s 1.05s, margin-top 1s 1.1s, height 1s 1.1s;
}

#menuProp9{
	opacity: 0;
	margin-top:-1.1px;
	z-index:-1;
	height:0px;
	transition: opacity 0.8s 1.025s, margin-top 1s 1.1s, height 1s 1.1s;
}

#menuProp10{
	opacity: 0;
	margin-top:-1.1px;
	z-index:-1;
	height:0px;
	transition: opacity 0.8s 1.0s, margin-top 1s 1.1s, height 1s 1.1s;
}

#menuProp11{
	opacity: 0;
	margin-top:-1.1px;
	z-index:-1;
	height:0px;
	transition: opacity 0.8s 0.975s, margin-top 1s 1.1s, height 1s 1.1s;
}

#menuProp12{
	opacity: 0;
	margin-top:-1.1px;
	z-index:-1;
	height:0px;
	transition: opacity 0.8s 0.95s, margin-top 1s 1.1s, height 1s 1.1s;
}



.aide{
	position:relative;
	opacity:0;
	padding-top: 4px;
	margin-top:0px;
	margin-left:50px;
	/* font-size:14px; */
	font-size:8px;
	color: #FFFFFF;
	transition:opacity 1s 1.1s;
}

nav input[type=checkbox]{
	display: none;
}

nav label {
	display: none;
}

nav a {
	display:inline-block;
	text-decoration: none;
}

nav > ul > li >	#menuAccueil {
	padding: 12px 60px 12px 26px;
	color: #FFF;
	/*font-size: 16px;*/

}

nav > ul > li >	#menuETTWIN {
	padding: 12px 60px 12px 26px;
	color: #FFF;
	/*font-size: 16px;*/
}

nav > ul > li >	#menuApropos {
	padding: 12px 60px 12px 26px;
	color: #FFF;
	/*font-size: 16px;*/
	
}

nav > ul > li >	#menuContact {
	padding: 12px 60px 12px 26px;
	color: #FFF;
	/*font-size: 16px;*/

}

nav > ul > li:hover #menuAccueil {
	padding: 8px 138px 12px 26px;
}

nav > ul > li:hover #menuETTWIN {
	padding: 8px 60px 12px 26px;
}

nav > ul > li:hover #menuApropos {
	padding: 8px 80px 12px 26px;
}

nav > ul > li:hover #menuContact {
	padding: 8px 84px 12px 26px;
}

nav > ul > li {
	z-index:10000;
}

nav li:active .submenu {
	width:100%;
	/*display: inline-block;*/
	position: absolute;
	/* top: 100%; */
	left: 0px;
	padding: 0px;
   /* margin-top:-4px;*/
	opacity: 1;
	/*height: 100%;*/
	transition: opacity 1s 1.3s, margin-top 1s 1.3s, height 1s 1.3s;
	/* z-index:1000; */
}

/*2eme part chaque li de menu doivent être ajustés*/
/* nav li:hover .submenu >.menuEtt{
	margin-top:-0px;
	height:36px;
	opacity: 1;
	transition: opacity 1s 1.3s, margin-top 1s 1.3s, height 1s 1.3s;
	z-index:-1;
} */

nav li:hover .submenu >#menuEtt1{
	margin-top:-0px;
	height:36px;
	opacity: 1;
	transition: opacity 1s 1.3s, margin-top 1s 1.3s, height 1s 1.3s;
	z-index:-1;
}
nav li:hover .submenu >#menuEtt2{
	margin-top:-0px;
	height:36px;
	opacity: 1;
	transition: opacity 1s 1.3s, margin-top 1s 1.3s, height 1s 1.3s;
	z-index:-1;
}
nav li:hover .submenu >#menuEtt3{
	margin-top:-0px;
	height:36px;
	opacity: 1;
	transition: opacity 1s 1.3s, margin-top 1s 1.3s, height 1s 1.3s;
	z-index:-1;
}
nav li:hover .submenu >#menuEtt4{
	margin-top:-0px;
	height:36px;
	opacity: 1;
	transition: opacity 1s 1.3s, margin-top 1s 1.3s, height 1s 1.3s;
	z-index:-1;
}
nav li:hover .submenu >#menuEtt5{
	margin-top:-0px;
	height:36px;
	opacity: 1;
	transition: opacity 1s 1.3s, margin-top 1s 1.3s, height 1s 1.3s;
	z-index:-1;
}
nav li:hover .submenu >#menuEtt6{
	margin-top:-0px;
	height:36px;
	opacity: 1;
	transition: opacity 1s 1.3s, margin-top 1s 1.3s, height 1s 1.3s;
	z-index:-1;
}
nav li:hover .submenu >#menuEtt7{
	margin-top:-0px;
	height:36px;
	opacity: 1;
	transition: opacity 1s 1.3s, margin-top 1s 1.3s, height 1s 1.3s;
	z-index:-1;
}
nav li:hover .submenu >#menuEtt8{
	margin-top:-0px;
	height:36px;
	opacity: 1;
	transition: opacity 1s 1.3s, margin-top 1s 1.3s, height 1s 1.3s;
	z-index:-1;
}
nav li:hover .submenu >#menuEtt9{
	margin-top:-0px;
	height:36px;
	opacity: 1;
	transition: opacity 1s 1.3s, margin-top 1s 1.3s, height 1s 1.3s;
	z-index:-1;
}
nav li:hover .submenu >#menuEtt10{
	margin-top:-0px;
	height:36px;
	opacity: 1;
	transition: opacity 1s 1.3s, margin-top 1s 1.3s, height 1s 1.3s;
	z-index:-1;
}
nav li:hover .submenu >#menuEtt11{
	margin-top:-0px;
	height:36px;
	opacity: 1;
	transition: opacity 1s 1.3s, margin-top 1s 1.3s, height 1s 1.3s;
	z-index:-1;
}
nav li:hover .submenu >#menuEtt12{
	margin-top:-0px;
	height:36px;
	opacity: 1;
	transition: opacity 1s 1.3s, margin-top 1s 1.3s, height 1s 1.3s;
	z-index:-1;
}
nav li:hover .submenu >#menuEtt13{
	margin-top:-0px;
	height:36px;
	opacity: 1;
	transition: opacity 1s 1.3s, margin-top 1s 1.3s, height 1s 1.3s;
	z-index:-1;
}
nav li:hover .submenu >#menuEtt14{
	margin-top:-0px;
	height:36px;
	opacity: 1;
	transition: opacity 1s 1.3s, margin-top 1s 1.3s, height 1s 1.3s;
	z-index:-1;
}
nav li:hover .submenu >#menuEtt15{
	margin-top:-0px;
	height:36px;
	opacity: 1;
	transition: opacity 1s 1.3s, margin-top 1s 1.3s, height 1s 1.3s;
	z-index:-1;
}
nav li:hover .submenu >#menuEtt16{
	margin-top:-0px;
	height:36px;
	opacity: 1;
	transition: opacity 1s 1.3s, margin-top 1s 1.3s, height 1s 1.3s;
	z-index:-1;
}
nav li:hover .submenu >#menuEtt17{
	margin-top:-0px;
	height:36px;
	opacity: 1;
	transition: opacity 1s 1.3s, margin-top 1s 1.3s, height 1s 1.3s;
	z-index:-1;
}
nav li:hover .submenu >#menuEtt18{
	margin-top:-0px;
	height:36px;
	opacity: 1;
	transition: opacity 1s 1.3s, margin-top 1s 1.3s, height 1s 1.3s;
	z-index:-1;
}

 /*2eme part chaque li de menu doivent être ajustés*/
 /*nav li:hover .submenu >.menuProp{
	margin-top:-0px;
	height:36px;
	opacity: 1;
	transition: opacity 1s 1.3s, margin-top 1s 1.3s, height 1s 1.3s;
	z-index:-1;
}*/

nav li:hover .submenu >#menuProp1{
	margin-top:-0px;
	height:36px;
	opacity: 1;
	transition: opacity 1s 1.3s, margin-top 1s 1.3s, height 1s 1.3s;
	z-index:-1;
}

nav li:hover .submenu >#menuProp2{
	margin-top:-0px;
	height:36px;
	opacity: 1;
	transition: opacity 1s 1.3s, margin-top 1s 1.3s, height 1s 1.3s;
	z-index:-1;
}

nav li:hover .submenu >#menuProp3{
	margin-top:-0px;
	height:36px;
	opacity: 1;
	transition: opacity 1s 1.3s, margin-top 1s 1.3s, height 1s 1.3s;
	z-index:-1;
}

nav li:hover .submenu >#menuProp4{
	margin-top:-0px;
	height:36px;
	opacity: 1;
	transition: opacity 1s 1.3s, margin-top 1s 1.3s, height 1s 1.3s;
	z-index:-1;
}

nav li:hover .submenu >#menuProp5{
	margin-top:-0px;
	height:36px;
	opacity: 1;
	transition: opacity 1s 1.3s, margin-top 1s 1.3s, height 1s 1.3s;
	z-index:-1;
}

nav li:hover .submenu >#menuProp6{
	margin-top:-0px;
	height:36px;
	opacity: 1;
	transition: opacity 1s 1.3s, margin-top 1s 1.3s, height 1s 1.3s;
	z-index:-1;
}

nav li:hover .submenu >#menuProp7{
	margin-top:-0px;
	height:36px;
	opacity: 1;
	transition: opacity 1s 1.3s, margin-top 1s 1.3s, height 1s 1.3s;
	z-index:-1;
}

nav li:hover .submenu >#menuProp8{
	margin-top:-0px;
	height:36px;
	opacity: 1;
	transition: opacity 1s 1.3s, margin-top 1s 1.3s, height 1s 1.3s;
	z-index:-1;
}

nav li:hover .submenu >#menuProp9{
	margin-top:-0px;
	height:36px;
	opacity: 1;
	transition: opacity 1s 1.3s, margin-top 1s 1.3s, height 1s 1.3s;
	z-index:-1;
}

nav li:hover .submenu >#menuProp10{
	margin-top:-0px;
	height:36px;
	opacity: 1;
	transition: opacity 1s 1.3s, margin-top 1s 1.3s, height 1s 1.3s;
	z-index:-1;
}

nav li:hover .submenu >#menuProp11{
	margin-top:-0px;
	height:36px;
	opacity: 1;
	transition: opacity 1s 1.3s, margin-top 1s 1.3s, height 1s 1.3s;
	z-index:-1;
}

nav li:hover .submenu >#menuProp12{
	margin-top:-0px;
	height:36px;
	opacity: 1;
	transition: opacity 1s 1.3s, margin-top 1s 1.3s, height 1s 1.3s;
	z-index:-1;
}


nav li:hover .aide {
	position:relative;
	opacity:1;
	padding-top: 4px;
	margin-top:0px;
	z-index:1001;
	margin-left:50px;
	transition: margin-top 1s 1.3s, opacity 1s 1.3s;
}

.submenu li a {
	padding: 10px 0px 10px 0px;
	font-size: 16px;
	padding-left:40px;
	padding-top:8px;
	color: #EEE;
	width:100%;
	z-index:100;
}


#menu-accueil {
	
}

#menu-logiciel-ETTWIN {
	
}

#menu-a-propos{

}

#menu-nous-contacter{
	
}


#menu-accueil:hover {
	border-top: 4px solid #666666;
	background-color: RGBa(102, 102, 102, 0.60);
}

#menu-logiciel-ETTWIN:hover {
	border-top: 4px solid #666666;
	background-color: RGBa(102, 102, 102, 0.60);
}

#menu-a-propos:hover {
	border-top: 4px solid #666666;
	background-color: RGBa(102, 102, 102, 0.60);
}

#menu-nous-contacter:hover {
	border-top: 4px solid #666666;
	background-color: RGBa(102, 102, 102, 0.60);
}

#menu-accueil .submenu{
	margin-bottom:10px;
}

#menu-logiciel-ETTWIN .submenu {
	background-color: #666666;
    /* margin-top:38.5px; 
	transition: margin-top 1s;  */
}

/* #menu-logiciel-ETTWIN .link-menu{
	margin-bottom:40px;
}
#menu-logiciel-ETTWIN .link-menu:hover{
	margin-bottom:0px;
}
 */

#menu-a-propos .submenu {
	background-color: #666666;
}

#menu-a-propos .submenu a {

}

#menu-logiciel-ETTWIN .submenu:hover {
	background-color: #666666;
	margin-top:0px;
	transition:margin-top 1s 0.5s;
}

#menu-a-propos .submenu:hover {
	background-color: #666666;
}

.submenu li:hover a {
	color: #EEE;
	font-weight: bold;
	font-size: 18px;
	border-left: 4px solid #666666;
	width:100%;
}

#menu-logiciel-ETTWIN .submenu li:hover{
	background-color: RGBa(255, 0, 51, 0.60);
}

#menu-a-propos .submenu li:hover{
	background-color: RGBa(255, 0, 51, 0.60);
}

.menu-mobile{
	display: none;
}

.submenu li {
	border-bottom: 1px solid #666666;
}


nav i {
	margin-right:6px;
}

nav li:hover .submenu {
	position: static;
}

nav li:hover .submenu li a {
	padding:8px 0px 8px 40px;
	font-size:16px;
}


#menu-accueil {
	width: 240px;
}

#menu-logiciel-ETTWIN {
	width: 240px;
}

#menu-a-propos {
	width: 240px;
}

#menu-nous-contacter {
	width: 240px;
}

.submenu li:hover .images_menu  {
	padding-left: 0px;
	max-width: 4%;	
}

.submenu li a:hover .images_menu  {
	padding-left: 0px;
	max-width: 4%;	
}

#icon{
	vertical-align:top;
	margin-right:4px;
}

.images_menu {
	padding-left: 4px;
	padding-right: 8px;
	max-width: 4%;
}

.images_menu_2 {
	padding-left: 6px;
	padding-bottom: 0px;
	width: 10%;
	vertical-align: top;
}

/* responsive menu */

nav #menu-mobile[type=checkbox]:checked ~ ul{
	display: block;
}

#menu-ettwin-check:checked ~ #menu-logiciel-ETTWIN {
	display: block;
}

#menu-services-check[type=checkbox]:checked ~ #menu-services-check{
	display: block;
} 

@media screen and (max-width: 3200px){
	nav > ul > li >	a {
		font-size: 16px;
	}
	
	.aide{
		font-size:14px;
	}
}

/* @media screen and (max-width: 2000px){
	.submenu {
		width:100%;
	}
	.menuEtt {
		opacity: 0;
		margin-top:-38.5px;
		z-index:-1;
		transition: margin-top 1s;
	}
	.menuProp{
		opacity: 0;
		margin-top:-39.5px;
		z-index:-1;
		transition: margin-top 1s;
	}

	.aide{
		position:relative;
		opacity:0;
		padding-top: 4px;
		margin-top:0px;
		margin-left:50px;
		font-size:14px;
		color: #FFFFFF;
		transition:opacity 0.2s;
	}
	
	nav li:hover .submenu {
		width:100%;
		display: inline-block;
		position: absolute;
		top: 100%;
		left: 0px;
		padding: 0px;
		margin-top:-4px;
		opacity: 1;
		height: 100%;
		transition: opacity 1s, margin-top 1s;
		z-index:1000;
	}


	nav li:hover .submenu >.menuEtt{
		margin-top:-0px;
		opacity: 1;
		transition: opacity 1s, margin-top 1s;
		z-index:-1;
	}

	nav li:hover .submenu >.menuProp{
		margin-top:-0px;
		opacity: 1;
		transition: opacity 1s, margin-top 1s;
		z-index:-1;
	}


	nav li:hover .aide {
		position:relative;
		opacity:1;
		padding-top: 4px;
		margin-top:0px;
		z-index:1001;
		margin-left:50px;
		transition:opacity 1s;
	}

}
 */
@media screen and (max-width: 1080px){
	
	header {
		position: relative;
		text-align: center;
	}	

	.aide{
		display: none;
	}
	
	nav > ul > li > a > #icon{
		margin-left:98px;
		width:2%;
		height:2%;
	}
	
	.submenu li {
		width:100%;
		padding-right:0px;
	}
	
	.submenu li a{
		width:100%;
		padding-right:0px;
	}
	
	.submenu li:hover a {
		color: #EEE;
		font-weight: bold;
		font-size: 18px;
		border-left: 4px solid #666666;
		width:50%;
	}

	.submenu li:hover .images_menu  {
		padding-left: 80px;
		max-width: 2%;	
	}

	.submenu li a:hover .images_menu  {
		padding-left: 80px;
		max-width: 2%;	
	}
    .images_menu  {
		padding-left: 86px;
		max-width: 1%;
	}
	
	.menu-mobile{
		display:block;
		color: #FFF;
		background-color: #333;
		text-align: center;
		padding:12px 0px;
	}
	
	nav{
		margin-top:0px;
		width:100%;
		position:relative;
		
	}

	#ic_nav_menu{
		padding-left: 100px;
	}

	
	#menu-accueil{
		width: 100%;
		text-align: Left;
	}
	
	#menu-logiciel-ETTWIN{
		width: 100%;
		text-align: Left;
	}

	#menu-a-propos{
		width: 100%;
		text-align: Left;
	}

	#menu-nous-contacter {
		width: 100%;
		text-align: Left;
	}
	nav ul{
		display: none;
	}
	
	nav ul li, nav ul li a {
		width: 100%;
	}
	
	nav ul li a, nav ul li:hover a {
		padding: 10px 0px;
	}
	nav li:hover .submenu {
		display:block;
		position: static;
	}
	
		
	#menubar{
		margin-left:-60px;
	}
	
}

/***************************************************************************
* Animation Menu + animate.css
***************************************************************************/
/*
.animated-1 {
  -webkit-animation-duration: 0.6s;
  animation-duration: 0.6s;
  -webkit-animation-fill-mode: backwards;
  animation-fill-mode: backwards;
}

.animated-2 {
  -webkit-animation-duration: 0.8s;
  animation-duration: 0.8s;
  -webkit-animation-fill-mode: backwards;
  animation-fill-mode: backwards;
}

.animated-3 {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: backwards;
  animation-fill-mode: backwards;
}

.animated-4 {
  -webkit-animation-duration: 1.2s;
  animation-duration: 1.2s;
  -webkit-animation-fill-mode: backwards;
  animation-fill-mode: backwards;
}

.animated-5 {
  -webkit-animation-duration: 1.4s;
  animation-duration: 1.4s;
  -webkit-animation-fill-mode: backwards;
  animation-fill-mode: backwards;
}

.animated-6 {
  -webkit-animation-duration: 1.6s;
  animation-duration: 1.6s;
  -webkit-animation-fill-mode: backwards;
  animation-fill-mode: backwards;
}*/