@keyframes H1Animation {
    from { }
    40%  { opacity: 0; }
    75%  { opacity: 1; }
    to   { opacity: 1; }
}

/* Firefox < 16 */
@-moz-keyframes H1Animation {
    from { }
    40%  { opacity: 0; }
    75%  { opacity: 1; }
    to   { opacity: 1; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes H1Animation {
    from { }
    40%  { opacity: 0; }
    75%  { opacity: 1; }
    to   { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes H1Animation {
    from { }
    40%  { opacity: 0; }
    75%  { opacity: 1; }
    to   { opacity: 1; }
}

/* Opera < 12.1 */
@-o-keyframes H1Animation {
    from { }
    40%  { opacity: 0; }
    75%  { opacity: 1; }
    to   { opacity: 1; }
}

#main
{	position: relative;
}

#home
{	position: relative;
}

#diaporama
{	/*margin: 5px;*/
	clear: both;
	float: left;
	position: relative;
	width: 100%;
	height: 100%;
	padding: 0px;
	list-style: none;
	overflow: hidden;
}	

#diaporama li
{	clear: both;
	float: left;
	position: relative;
	width: 100%;
	height: 100%;

	background-repeat: no-repeat;
	background-position: center center; 
	background-size: cover;
}

#diaporama li .legende
{	position: absolute;
	bottom: 200px;
	left: 20px;
	width: 100%;
	color: white;
	font-size: 10px;
	letter-spacing: 1px;
	z-index: 10;

	transform: rotate(-90deg);
	transform-origin: left top 0;
	text-align: left;

}

#home header
{	opacity: 1;
	position: absolute;
	display: flex;
	justify-content: space-between;
	top: 0px;
	left: 0px;

	width: 100%;
	height: 140px;
	background: white;
	z-index: 10;

	color: #ED1A3B;
	/*color: #EA002A;*/
/*
	-webkit-animation: H1Animation 3s; 
	-moz-animation: H1Animation 3s; 
	-ms-animation: H1Animation 3s; 
	-o-animation: H1Animation 3s; 
	animation: H1Animation 3s;

	-webkit-animation-fill-mode: forwards;
	-moz-animation-fill-mode: forwards;
	-ms-animation-fill-mode: forwards;
	-o-animation-fill-mode: forwards;
	animation-fill-mode: forwards;	
*/

}

#home header > a
{	float: left;
	margin-top: 20px;
	margin-left: 40px;
}

#home header > a > img
{	/*width: 400px;*/
}

#home header > ul
{	display: flex;
	width: 100%;
	justify-content: space-between;
	/*
	float: right;
	display: table;
	*/
	margin-top: 49px;
	margin-left: 40px;
}

#home header > ul li
{	/*
	display: table-cell;
	padding-right: 40px;
	text-align: right;
	vertical-align: bottom;
	*/
}

#home header > ul > li:first-child
{	text-align: left;
}

#home header > ul > li:last-child
{	text-align: right;
	margin-right: 50px;
}

#home header > ul > li h1
{	font-family: "Montserrat-Medium";
	font-weight: normal;
	font-size: 18px;
}

#home header > ul > li h1 strong
{	font-weight: normal;
	display: block;
}


#home header > ul a
{	font-family: "Montserrat-Medium";
	color: #ED1A3B;
	font-size: 18px;
	/*text-decoration: underline;*/
}

#home header > ul a:hover
{	/*text-decoration: none;*/
	text-decoration: underline;
}

#home header > ul a strong, #home header > ul a span
{	display: block;
} 

#home header > ul a strong
{	font-family: "Montserrat-Medium";
	font-weight: normal;
}

#home h2
{	display: none;
	position: absolute;
	bottom: 120px;
	z-index: 10;
	width: 100%;
	min-height: 70px;
	/*line-height: 70px; */
	padding: 25px 0px;
	font-size: 15px;
	letter-spacing: 1px;
	font-weight: normal;
	color: white;
	text-align: center;
	text-transform: uppercase;
	background: #282626;
	filter: alpha(opacity=80);
	opacity: 0.8;	
}

#home h2 strong
{	font-family: "Montserrat-Bold";
	font-size: 22px;
}

#home h2 a
{	display: block;
	color: white;
}

#home-menu-top
{	display: none;
	position: absolute;
	top: 160px;
	right: 30px;
	z-index: 10;
}

#home-menu-top > ul
{	display: inline-block;
}

#home-menu-top > ul > li
{	display: inline-block;
	vertical-align: middle;
	padding: 0px 10px;
	border-right: 2px solid white;
}

#home-menu-top > ul > li:last-child
{	border: none;
}

#home-menu-top > ul > li a
{	font-size: 18px;
	color: white;
	text-transform: uppercase;
}

#home-menu-top > ul > li > a:hover
{	background: white;
	color: #ED1A3B;
}

#language-top 
{	text-align: right;
}

#language-top ul
{	display: flex;
	justify-content: flex-end;
}

#language-top ul li
{	margin-right: 3px;
}

#language-top ul li:last-child
{	margin-right: 0;
}


/* Switch */	   
#switch
{	float: right;
	text-align: left;
	margin-top: 10px;
}
	  
#switch a
{	display: block;
	text-decoration: none;
}

#switch ul
{	margin: 0px;
	padding: 0px;				
	list-style: none;
}

#switch_connexion
{	clear: both;
	float: left;
	position: relative;
}

#switch_connexion ul
{	display: none;
	position: absolute;
	top: 20px;
	clear: both;
	float: left;
	background-color: #ED1A3B;
}

#switch_connexion:hover ul
{	display: block;
}

#switch_connexion ul li
{	clear: both;
	float: left;
	width: 100%;
	margin: 0px;
	padding: 0px;
}

#switch_connexion ul li a
{	display: block;
	color: #FFFFFF;
	white-space: nowrap;
	padding: 2px 10px;
	text-transform: none;
	text-align: left;
}

#switch_connexion ul li a:hover
{	color: #ED1A3B;
	background-color: #FFFFFF;
}

#identifiez_vous
{	clear: both;
	float: left;
	display: block;
	height: 20px;
}

#identifiez_vous:hover
{	color: #ED1A3B;
	background-color: #FFFFFF;
}

#language
{	clear: none;
	float: left;
	width: auto;
}

#english a, #francais a
{	display: block;
}
	 
#english a:hover, #francais a:hover
{	font-weight: bold;
	letter-spacing: 1px;
} 

#language ul
{	float: right;
	margin: 0px;
	padding: 0px;				
	list-style: none;
}

#language ul li
{	float: left;  
	margin-left: 10px;
	color: white;
}					   
	
#language ul li.active a
{	color: white;
	background-color: #ED1A3B;
	padding: 0px 3px;
} 
	


#identifiez_vous 
{	color: white;
	padding: 3px 5px;
}

#switch_connexion ul
{	width: auto;
}

#language ul li
{	margin: 0px;
	margin-right: 10px;
}

#language ul li.active a
{	background: none;
	font-family: "Montserrat-Bold";
}


#home-menu
{	clear: both;
	position: absolute;
	bottom: 0px;
	z-index: 10;

	width: 100%;
	height: 110px;
	padding-bottom: 10px;
	background: #ED1A3B;
	/*background: #EA002A;*/
}

#home-menu > div
{	width: 1000px;
	margin: 0px auto;
	margin-bottom: 5px;
}

#home-menu ul.menu-left
{	position: absolute;
	top: 20px;
	left: 50px;
}

#home-menu ul.menu-left li a
{	display: block;
	margin: 0px 15px;	
	font-size: 18px;
	height: 30px;
	line-height: 30px;
	padding-top: 1px;
	color: white;
	letter-spacing: 2px;
	text-transform: uppercase;
}

#home-menu ul.menu
{	display: inline-block;
}

#home-menu ul.menu li
{	display: inline-block;
	height: auto;
	border-right: 1px solid white;
	margin: 20px 0px;
}

#home-menu ul.menu li:last-child
{	border: none;
}

#home-menu ul.menu li a
{	display: block;
	margin: 0px 15px;
	font-size: 18px;
	height: 30px;
	line-height: 30px;
	padding-top: 1px;
	color: white;
	letter-spacing: 2px;
	text-transform: uppercase;
}

#home-menu ul.menu li:last-child a
{	/*
	border-top: 1px solid white;
	border-bottom: 1px solid white;
	*/
}

#home-menu ul.social
{	/*float: right;
	display: inline-block;*/
	position: absolute;
	top: 0px;
	right: 50px;
}

#home-menu ul.social li
{	display: inline-block;
	margin: 20px 3px;
}




#home-menu-accordeon
{	position: relative;
	z-index: 10;
	/*
	margin-bottom: 20px;
	padding-bottom: 40px;
	background: url("../pictures/fleche-noir.png") no-repeat bottom center
	*/
}


#home-menu-accordeon > ul
{	display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
	display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
	display: -ms-flexbox;      /* TWEENER - IE 10 */
	display: -webkit-flex;     /* NEW - Chrome */
	display: flex;   
	flex-flow: row wrap;
}


#home-menu-accordeon > ul > li
{	background-position: center center;
	background-size: cover;

	-webkit-box-flex: 1;      /* OLD - iOS 6-, Safari 3.1-6 */
	-moz-box-flex: 1;         /* OLD - Firefox 19- */
	width: 25%;               /* For old syntax, otherwise collapses. */
	-webkit-flex: 1;          /* Chrome */
	-ms-flex: 1;   	
	flex: 1 1 0;

	height: 640px;
	max-height: 640px;
	overflow: hidden;
	text-align: center;
	transform: translate3d(0px, 0px, 0px);
	transition: flex 500ms ease-in-out 0s;
	/*width: 100%;*/
}

#home-menu-accordeon > ul > li:before
{	/*background-color: rgba(0, 0, 0, 0.2);*/
	content: "";
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	transition: background-color 0.5s ease-in-out 0s;
	width: 100%;
	z-index: 1;
}

#home-menu-accordeon > ul > li:hover
{	flex: 2 1 0;
	-webkit-box-flex: 2 1 0;      /* OLD - iOS 6-, Safari 3.1-6 */
	-moz-box-flex: 2 1 0;         /* OLD - Firefox 19- */
	-webkit-flex: 2 1 0;          /* Chrome */
	-ms-flex: 2 1 0;   	
}

#home-menu-accordeon > ul > li:hover:before
{	background-color: rgba(0, 0, 0, 0.5);
}


#home-menu-accordeon > ul > li > div
{	position: relative;
	width: 100%;
	margin-top: 300px;
	z-index: 2;
}

#home-menu-accordeon > ul > li > em
{	position: absolute;
	width: 100%;
	left: 15px;
	bottom: 10px;
	z-index: 2;
	color: white;
	font-style: normal;
	font-size: 10px;
	text-align: left;
	letter-spacing: 1px;

	transform: rotate(-90deg);
	transform-origin: left top 0;
}

#home-menu-accordeon > ul > li h3
{	font-family: "Montserrat-Light";
	font-size: 24px;
	font-weight: normal;
	letter-spacing: 4px;
	color: white;
	padding-bottom: 15px;
	/*background: url("../pictures/home/tiret.png") no-repeat bottom center;*/
}

#home-menu-accordeon > ul > li h3 a, #home-menu-accordeon > ul > li h4 a
{	color: white;
}

#home-menu-accordeon > ul > li > div > div, #home-menu-accordeon > ul > li > div > a > div
{	position: relative;
	opacity: 0;
	max-height: 0;
	overflow: hidden;
	transition: max-height 500ms ease-in-out 0s, opacity 500ms ease 0s;
	z-index: 3;
}

#home-menu-accordeon > ul > li:hover > div > div, #home-menu-accordeon > ul > li:hover > div > a > div
{	max-height: 500px;
	opacity: 1;
	transition: max-height 1000ms ease-in-out 0s, opacity 1000ms ease-in-out 0s;

}


#home-menu-accordeon > ul > li h4
{	font-family: "Montserrat-Light";
	font-size: 15px;
	font-weight: normal;
	color: white;
	width: 80%;
	margin: 0px auto;
	margin-top: 20px;
}

#home-menu-accordeon > ul > li ul
{	display: inline-block;
	margin-top: 20px;
}

#home-menu-accordeon > ul > li ul li
{	display: inline-block;
	margin-right: 5px;
	margin-bottom: 10px;
}

#home-menu-accordeon > ul > li ul li:last-child
{	margin-right: 0px;
}

#home-menu-accordeon > ul > li ul li a
{	display: block;
	font-family: "Montserrat-Light";
	font-size: 10px;
	line-height: 16px;
	color: white;
	border: 1px solid white;
	text-transform: uppercase;
	padding: 5px 10px;
	letter-spacing: 2px;
}

#home-menu-accordeon > ul > li ul li a:hover
{	font-family: "Montserrat-Bold";
	background: white;
	color: #ED1A3B;
}



#visite-virtuelle
{	display: none;
	height: 200px;
	background-position: center center;
	background-size: cover;
	background-image: url("../pictures/home/visite-virtuelle.jpg");
}

#visite-virtuelle a
{	display: block;
	line-height: 200px;
}

#visite-virtuelle h3
{	height: 200px;
	width: 100%;
	line-height: 200px;

	font-size: 24px;
	font-weight: normal;
	letter-spacing: 6px;
	text-transform: uppercase;
	color: white;
}

#visite-virtuelle h4
{	display: none;
	height: 200px;
	width: 100%;
	line-height: 200px;
	font-size: 24px;
	color: white;
}

#visite-virtuelle h4 ul
{	display: inline-block;
}

#visite-virtuelle h4 ul li
{	display: inline-block;
	line-height: 90px;
	vertical-align: middle;
}

#visite-virtuelle h4 ul li img
{	margin: 35px 10px 0px 10px;
}

#blank
{	position: relative;
	z-index: 10;
	height: 60px;
	background: white;
}

#sound_mute
{	position: absolute;
	z-index: 100;
	bottom: 150px;
	right: 50px;
	width: 50px;
	height: 50px;
	background: transparent url("../pictures/home/mute.png") no-repeat center;
	border: none;

	outline: 0;
}

#sound_mute.mute
{	background: transparent url("../pictures/home/unmute.png") no-repeat center;
}

#footer
{	position: relative;
	z-index: 10;
}