@charset "utf-8";
/* CSS Document */
@font-face {
	font-family: 'Raleway';
	src: url('Raleway-SemiBold.eot');
	src: url('Raleway-SemiBoldd41d.eot?#iefix') format('embedded-opentype'),  url('Raleway-SemiBold.woff') format('woff'),  url('Raleway-SemiBold.ttf') format('truetype');
	font-weight: 600;
	font-style: normal;
}
@font-face {
	font-family: 'Berthold Akzidenz-Grotesk';
	src: url('AkzidenzGroteskBE-MdCn.eot');
	src: url('AkzidenzGroteskBE-MdCnd41d.eot?#iefix') format('embedded-opentype'),  url('AkzidenzGroteskBE-MdCn.woff') format('woff'),  url('AkzidenzGroteskBE-MdCn.ttf') format('truetype');
	font-weight: 500;
	font-style: normal;
}
@font-face {
	font-family: 'Raleway';
	src: url('Raleway.eot');
	src: url('Ralewayd41d.eot?#iefix') format('embedded-opentype'),  url('Raleway.woff') format('woff'),  url('Raleway.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'Univers LT Std';
	src: url('UniversLTStd-LightUltraCn.eot');
	src: url('UniversLTStd-LightUltraCnd41d.eot?#iefix') format('embedded-opentype'),  url('UniversLTStd-LightUltraCn.woff') format('woff'),  url('UniversLTStd-LightUltraCn.ttf') format('truetype');
	font-weight: 300;
	font-style: normal;
}
@font-face {
	font-family: 'GaramondUltra';
	src: url('GaramondUltra.eot');
	src: url('GaramondUltrad41d.eot?#iefix') format('embedded-opentype'),  url('GaramondUltra.woff') format('woff'),  url('GaramondUltra.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'Garamond';
	src: url('Garamond-Bold.eot');
	src: url('Garamond-Boldd41d.eot?#iefix') format('embedded-opentype'),
		url('Garamond-Bold.woff') format('woff'),
		url('Garamond-Bold.ttf') format('truetype');
	font-weight: bold;
	font-style: normal;
}

@font-face {
	font-family: 'Garamond';
	src: url('GaramondBook.eot');
	src: url('GaramondBookd41d.eot?#iefix') format('embedded-opentype'),
		url('GaramondBook.woff') format('woff'),
		url('GaramondBook.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'Garamond';
	src: url('Garamond.eot');
	src: url('Garamondd41d.eot?#iefix') format('embedded-opentype'),
		url('Garamond.woff') format('woff'),
		url('Garamond.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'Garamond';
	src: url('GaramondLight.eot');
	src: url('GaramondLightd41d.eot?#iefix') format('embedded-opentype'),
		url('GaramondLight.woff') format('woff'),
		url('GaramondLight.ttf') format('truetype');
	font-weight: 300;
	font-style: normal;
}

@font-face {
	font-family: 'Bariol';
	src: url('Bariol-Light.eot');
	src: url('Bariol-Lightd41d.eot?#iefix') format('embedded-opentype'),
		url('Bariol-Light.woff') format('woff'),
		url('Bariol-Light.ttf') format('truetype');
	font-weight: 300;
	font-style: normal;
}
/*/// GENERAL ////*/
*{
margin:0;
padding:0;
}
 
body, html{height:100%;}

body {
	background-color: white;
	font-family: 'Raleway';
	color: #172639;
}

/*body.lire .intro {
	color: #172639;
	background-color: #36d8d8;
}*/
#container {
	margin: 0 auto;
	max-width: 100%;
	position: relative;
	min-height: 100%;
	display:flex;	
}

#content {
	width: 1200px;
	margin:60px auto 0px;
	text-align: center;
	overflow:hidden;
	z-index:10;
	position:relative;
}

/*/// CONTENT///*/

/*/ MENU /*/
/*#header{
	position:absolute;
	top:70px;
	left:70px;
	width:900px;
	}*/
/*/ LIRE/*/
body.lire .accueil{
	background-color:#36d8d8;
	}
body.lire {
	color: #172639;
	background-color: #bce4e4;
}
.mobile{
	display:none !important;
	}
.menu {
    text-align: left;
    margin: 40px 0 70px 90px;

}
.accueil .menu{
	margin:0px 0 60px 120px
	}
.enseignement #header{
	margin:0 auto;
	max-width:1200px;
	}
.enseignement .menu{
	margin:8px 0 60px -22px;
	}
.menu .item {
	display: inline-block;
	vertical-align: middle;
	text-decoration:none;	
	text-align:left;
	margin-right:10%;
	}
.menu .item.long {
	width:45%;
}
.menu .item a{
	text-decoration:none;
	color:#172639;
	font-size:16px;
	font-family: 'Berthold Akzidenz-Grotesk';
	letter-spacing:3px;
	text-transform:uppercase;
	}

.menu .item a:hover{
	text-decoration:underline;
	color:#fff;
	}
.menu .item.active a{
	color:#fff;
	}
.menu .item.active a:hover{
	color:#172639;
	}
.num_slide{
	position:fixed;
	top:90px; 
	right:1.5%;	
	z-index:99;	
}
.num_slide span {
	font-size:40px;
	line-height:35px;
	height:35px;
	width:20px;
	display:block;
	}
.num_slide span a{
	color:inherit;
	text-decoration:none;
	}
.num_slide span.active{
	color:#ddd930;
	}
p.cadre{ 
	width:92%;
	border: solid 1px #15244f;
	padding:40px;
	margin:0 auto;
	text-align:center;
	display:block;

}
.text_temp{
		font-family: 'Berthold Akzidenz-Grotesk';
		font-size:2.5vw;
		color:#fff;
		text-transform:uppercase;
		text-align:center;
		margin:auto;	
		max-width:100%;
		line-height:1.4;
	}
.text_temp span{
	color:#15244f;
	display:block;
}
.show{
	display:none;
	}
/*/////  MENTIONS   ///*/
.accueil.mentions{
	color:#fff;	
	padding-top:5%;
	}
.accueil.mentions .texte{
		color:#fff;	
		font-family: 'Garamond';
		font-size:17px;
		display:inline-block;
		vertical-align: bottom;
		width:430px ;
		margin-top:155px;
		text-align: left;
		line-height:1.3;
	}
.accueil.mentions .texte strong{
	color:#36d8d8;	
}
.accueil.mentions .grand.texte{
		color:#36d8d8;	
		font-family: 'Berthold Akzidenz-Grotesk';
		text-transform:uppercase;
		font-size:38px;
		display:inline-block;
		vertical-align:top;
		width:360px;
		margin:0;
		line-height:1.3;
	}
.accueil.mentions .grand.texte span{
		color:#fff;	
}
.accueil.mentions .texte.petit{
		color:#fff;	
		font-family: 'Garamond';
		display:inline-block;
		vertical-align:top;
		width:185px;
		margin-top:5px;
	}
.accueil.mentions .logo{
	position:relative;
	width:300px;
	margin:40px auto;
	text-align:center;	
	}
/*/// PAGE VISIONNER ///*/
body.visionner{
	background-color:#15244f;
	}

.visionner .menu .item a{
	color:#36d8d8;
	}
.visionner .menu .item.active a{
	color:#fff;
	}
.accueil_visionner {
		width:900px;
		margin:auto;
		}
.accueil_visionner .item{
	display:inline-block;
	width:248px;
	height:175px;
	margin:0 auto;
	color:#172639;
	font-size:30px;
	font-family: 'Berthold Akzidenz-Grotesk';
	text-transform:uppercase; 
	text-align:left;
	cursor:pointer;
	background-size:contain;
	position:relative; 
	}
.accueil_visionner .item p{
	display:block;
	position:absolute;
	bottom:20px;
	left:20px;
}
.visionner .accueil_visionner .item{
	color:#c5d22d;
	font-size:14px;
		font-family: 'Raleway';
		font-weight:600;
	}
.visionner .accueil_visionner .item span{
	color:#fff;
	text-transform:uppercase;
	font-size:30px;
	font-family: 'Univers LT Std';
	font-weight:500;
	}
.visionner .accueil_visionner .item:hover{
	color:#15244f;
	background-color:#36d8d8;
	}
.visionner .accueil_visionner .item:hover span{
	color:#15244f;
	}
.visionner .titre_video {
    color: #fff;
    text-transform: uppercase;
    font-size: 30px;
    font-family: 'Univers LT Std';
    font-weight: 500;
	margin-bottom:20px;
	width:100%;
	text-align:left;	
}
.visionner .fleches{
	position:relative;
	margin:20px auto;
	width:100%;	
	text-align:center;
	}
.visionner .fleches .next, .visionner .fleches .prev{
	display:inline-block;
	vertical-align:middle;
	margin:0 20px;
	padding: 10px;
}
.visionner .fleches .retour{
	display:inline-block;
	vertical-align:middle;
	padding:10px;
	font-size:22px;
	margin:-5px auto 0;
	text-transform: uppercase;
	text-decoration:none;
	color:#ffffff;
	font-family: 'Univers LT Std';
    font-weight: 500;
	
}
.visionner .fleches .next:hover, .visionner .fleches .prev:hover{
	opacity:0.5;
	
}
.visionner .filigramme{
	opacity:0.1;
	-webkit-user-select: none; 
	-khtml-user-select: none;
	-moz-user-select: none; 
	-o-user-select: none;
	user-select: none;
	}
iframe.video{
	margin: auto;
	width:1200px !important;
	height:675px !important;
	}
/*/// PAGE PARCOURIR ///*/
body.parcourir {
	color: #172639;
	background-color: #bce4e4;
}
.parcourir .menu .item a{
	color:#172639;
	}
.parcourir .menu .item.active a{
	color:#fff;
	}
.accueil_parcourir {
		width:900px;
		margin:auto;
		}
.accueil_parcourir .item{
	display:inline-block;
	width:248px;
	height:175px;
	margin:0 auto;
	color:#172639;
	font-size:30px;
	font-family: 'Berthold Akzidenz-Grotesk';
	text-transform:uppercase; 
	text-align:left;
	cursor:pointer;
	background-size:contain;
	position:relative; 
	}
.accueil_parcourir .item p{
	display:block;
	position:absolute;
	bottom:20px;
	left:20px;
}
.parcourir .accueil_parcourir .item{
	color:#c5d22d;
	font-size:14px;
		font-family: 'Raleway';
		font-weight:600;
	}
.parcourir .accueil_parcourir .item span{
	color:#fff;
	text-transform:uppercase;
	font-size:30px;
	font-family: 'Berthold Akzidenz-Grotesk';
	}
.parcourir .accueil_parcourir .item:hover{
	color:#15244f;
	background-color:#36d8d8;
	}
.parcourir .accueil_parcourir .item:hover span{
	color:#15244f;
	}
.parcourir .filigramme{
	opacity:0.1;
	}
/*/ PAGE LIRE /*/
.accueil_lire{ 
	text-align:center;
	}
.preface{
	display:inline-block;
	vertical-align:middle;
	margin:0;
	font-family: 'Berthold Akzidenz-Grotesk';
	color:#172639;
	font-size:12px;
	letter-spacing:2px;
	text-transform:uppercase; 
	text-align:left;
	position:relative; 
	}
.preface p{
	color:#172639;
	font-size:22px;
	font-family: 'Berthold Akzidenz-Grotesk';
	text-transform:uppercase; 
	font-weight:normal;
	display:inline-block;
	vertical-align:middle;
	}
.preface p span{
	color:#fff;
	}
.preface p:hover{
	color:#fff;
	}
.preface p:hover span{
	color:#172639;
	}
.accueil_lire .item{
	display:inline-block;
	width:248px;
	height:175px;
	margin:0 auto;
	color:#172639;
	font-size:30px;
	font-family: 'Univers LT Std';
	text-transform:uppercase; 
	text-align:left;
	cursor:pointer;
	background-size:contain;
	position:relative; 
	}
.accueil_lire .item p{
	display:block;
	position:absolute;
	bottom:20px;
	left:20px;
}
.accueil_lire .item span{
	color:#ffffff; 
	}
.accueil_lire .item:active{
		color:#36d8d8;
		}

.accueil_lire .item:hover p{
		display:none;
		}
	.accueil_lire .chap_01:hover{	
		background:url(../images/btn_chap_01_on.png) no-repeat;			
	}
.accueil_lire .chap_02:hover{	
		background:url(../images/btn_chap_02_on.png) no-repeat;			
	}
.accueil_lire .chap_03:hover{	
		background:url(../images/btn_chap_03_on.png) no-repeat;			
	}
.accueil_lire .chap_04:hover{	
		background:url(../images/btn_chap_04_on.png) no-repeat;			
	}
.accueil_lire .chap_05:hover{	
		background:url(../images/btn_chap_05_on.png) no-repeat;			
	}
.accueil_lire .chap_06:hover{	
		background:url(../images/btn_chap_06_on.png) no-repeat;			
	}
.accueil_lire .chap_07:hover{	
		background:url(../images/btn_chap_07_on.png) no-repeat;			
	}
.accueil_lire .chap_08:hover{	
		background:url(../images/btn_chap_08_on.png) no-repeat;			
	}
.accueil_lire .chap_09:hover{	
		background:url(../images/btn_chap_09_on.png) no-repeat;			
	}
.accueil_lire .chap_10:hover{	
		background:url(../images/btn_chap_10_on.png) no-repeat;			
	}
.accueil_lire .chap_11:hover{	
		background:url(../images/btn_chap_11_on.png) no-repeat;			
	}
.accueil_lire .chap_12:hover{	
		background:url(../images/btn_chap_12_on.png) no-repeat;			
	}

.accueil_lire .item:hover span{
		color:#fff;
		}
.accueil_lire .chap_01:active{	
		background:url(../images/btn_chap_01.png) no-repeat;			
	}
.accueil_lire .chap_02:active{	
		background:url(../images/btn_chap_02.png) no-repeat;			
	}
.accueil_lire .chap_03:active{	
		background:url(../images/btn_chap_03.png) no-repeat;			
	}
.accueil_lire .chap_04:active{	
		background:url(../images/btn_chap_04.png) no-repeat;			
	}
.accueil_lire .chap_05:active{	
		background:url(../images/btn_chap_05.png) no-repeat;			
	}
.accueil_lire .chap_06:active{	
		background:url(../images/btn_chap_06.png) no-repeat;			
	}
.accueil_lire .chap_07:active{	
		background:url(../images/btn_chap_07.png) no-repeat;			
	}
.accueil_lire .chap_08:active{	
		background:url(../images/btn_chap_08.png) no-repeat;			
	}
.accueil_lire .chap_09:active{	
		background:url(../images/btn_chap_09.png) no-repeat;			
	}
.accueil_lire .chap_10:active{	
		background:url(../images/btn_chap_10.png) no-repeat;			
	}
.accueil_lire .chap_11:active{	
		background:url(../images/btn_chap_11.png) no-repeat;			
	}
.accueil_lire .chap_12:active{	
		background:url(../images/btn_chap_12.png) no-repeat;			
	}




.filigramme{
	font-size:16vw;
	font-family: 'Univers LT Std';
	color:#fff;
	opacity:0.2;
	position:fixed;
	top:37%;
	left:0;
	z-index:2;
	width:100%;
	text-align:center;
	letter-spacing:30px !important;
	-webkit-user-select: none; 
	-khtml-user-select: none;
	-moz-user-select: none; 
	-o-user-select: none;
	user-select: none;
	}

.chiffres{
	font-family: 'Garamond';;
	font-size:1.15vw;
	color:#fff;
	text-decoration:none;
	text-align:left;
	line-height:1.3;
	position:fixed;
	top:59%;
	left:20%;
	z-index:4;
	letter-spacing:1px;

	}	

.filigramme.preface{
	font-size: 17vw;
	letter-spacing: 130px !important;
	top: 34	%;
	}
.filigramme.chap_01{
	font-size:15vw;
	}
.filigramme.chap_02{
	font-size:16vw;
	}
.filigramme.chap_03{
	font-size:15vw;
	}
.filigramme.chap_04{
	font-size:13vw;
	}
.filigramme.chap_05{
	font-size:13.7vw;
	}
.filigramme.chap_06{
	font-size:13.1vw;
	}	
.filigramme.chap_07{
	font-size:14.8vw;
	}	
.filigramme.chap_08{
	font-size:14.5vw;
	}	
.filigramme.chap_09{
	font-size:12.9vw;
	}	
.filigramme.chap_10{
	font-size:17vw;
	top:35% ;
	letter-spacing:45px !important;
	}	
.filigramme.chap_11{
	font-size:15vw;
	}	
.filigramme.chap_12{
	font-size:17.8vw;
	}		
	
	
.texte {
	font-family: 'Raleway';
	font-size : 16px;
	text-align: left;
	line-height: 1.6;
	text-align: justify;
	text-justify: inter-word;
	width: 900px;
	display: inline-block;
	vertical-align: top;
	margin-bottom:60px;
}
.texte p.lettrine:first-letter {
	font-family: 'Berthold Akzidenz-Grotesk';
	font-size : 126px;
	color : #ffffff;
	padding: 8px 5px 0px 0px;
	float : left;
	display: inline-block;
	vertical-align: top;
	line-height: 0.75;
}
.texte p {
	margin: 17px 0 20px 0;
	}
.texte .bas img{
	margin:0 auto;
	display:block;
	
	}
.titre.entete {
	font-family: 'Berthold Akzidenz-Grotesk';
	font-size: 60px;
	width: 55%;
	margin-right:20px;
	text-align: left;
	display: inline-block;
	vertical-align: top;
	position:absolute;
	top:18%;
	left:50%;
	margin-left:-25%;	
}
.titre.entete span {
	font-size: 37px;
	width: 100px;
	height: 100px;
	line-height: 100px;
	margin-bottom:20px;
}
.titre {
	font-family: 'Berthold Akzidenz-Grotesk';
	font-size: 16px;
	width: 105px;
	margin-right:20px;
	text-align: left;
	display: inline-block;
	vertical-align: top;
	line-height:1.3;
}
.titre span {
	display: block;
	background-color: #ddd930;
	font-size: 10px;
	width: 20px;
	height: 20px;
	text-align: center;
	text-decoration: none !important;
	line-height: 20px;
	font-family: 'GaramondUltra';
}
.titre p {
	text-transform: uppercase;
	text-decoration: underline;
	margin-top: 5px;
}
/*/// PAGE ENSEIGNEMENT ///*/
body.enseignement{
	background:#36d8d8;	
	}
.enseignement .lire #container{
	width:100%;
	height:100%;
	background:#36d8d8;

}
.enseignement .num_slide span.active {
    color: #36d8d8;
}
.enseignement .menu .item.active a{
	color:#36d8d8;
	}
.enseignement .menu .item:hover a{
	color:#36d8d8;
	}
.enseignement .lire #content{
	position:absolute;
	overflow-y: auto;
	top:2%;
	left:1%;
	height:92%;
	width:78%;
	background:#ffffff;	
	margin:0;
	padding: 2% 10%;
	}
/* hack Chrome / Safari */
@media screen and (-webkit-min-device-pixel-ratio:0) {
	.enseignement .lire #content{
	height:90%;
	}
}
.enseignement .pretitre{
	font-family: 'Garamond';
	font-weight:bold;
	color:#172639;
	font-size:18px;

	}
.enseignement .entete.titre{
	width:100%;
	margin-left:-50%;
	text-align:center;
	
	}
.enseignement .entete.titre p{
	font-family: 'Bariol';
	color:#36d8d8;
	font-size:110px;
	text-align:center;
	text-decoration:none !important;
	margin: 60px auto 0;
		max-width:1100px;
	}
.enseignement .texte{
	display:inline-block;
	width:75%;

}
.enseignement .texte p{
	margin: 0 auto 30px;

}
.enseignement .titre span{
	background:#36d8d8;
}
.enseignement .texte p.lettrine:first-letter {
	color:#36d8d8;
}
.enseignement #footer{
	bottom:20px;
	}	

/*/// FOOTER ///*/
#footer{
	position:fixed;
	width:100%;
	height:24px;
	bottom:0;
	z-index:9999;
	}
#footer .retour{
	position:absolute;
	left:5%;
	bottom:10px;
	}
#footer .fermer{
	position:absolute;
	left:8%;
	bottom:10px;
	}
#footer .bas{
	position:absolute;
	left:50%;
	margin-left:-16px;
	bottom:10px;
	display:none;
	}
#footer .mentions{
	position:absolute;
	right:5%;
	bottom:10px;
	}
/*//// GALERIE  ///*/
.galerie{
	position:relative;
	margin:auto;
	height: auto;
	overflow:hidden;
	}
#rg-gallery{
	max-width:92%;
	margin:0 auto;
	}
.fond_slide{
	position:absolute;
	top:140px;
	height:125px;
	left:0;
	width:100%;
	background:#172639;
	
	}
.rg-image-wrapper{
	position:relative;
	padding: 0;
	background:transparent;
	min-height:20px;
	background:#172639;
	margin-bottom:40px;
}
.rg-image{
	position:relative;
	text-align:left;
	line-height:0px;
	overflow:hidden;
	max-width:50%;
	height:100%;

}
.rg-caption-wrapper{
		position:absolute;
		top:0;
		left:50%;
		margin:20px;
		z-index:999;
		color:#fff;
		font-family: 'Raleway';
	font-size : 16px;
	text-align:left;
	height:100%;
	width:46.5%;	
	}
.rg-image img{
	max-height:100%;
	width:100%;
}
.rg-image-nav a{
	position:absolute;
	top:0px;
	left:-34px;
	background:transparent url(../images/nav.png) no-repeat -20% 50%;
	width:28px;
	height:100%;
	text-indent:-9000px;
	cursor:pointer;
	opacity:0.3;
	outline:none;
	-moz-border-radius: 10px 0px 0px 10px;
	-webkit-border-radius: 10px 0px 0px 10px;
	border-radius: 10px 0px 0px 10px;
}
.rg-image-nav a.rg-image-nav-next{
	right:-34px;
	left:auto;
	background-position:115% 50%;
	-moz-border-radius: 0px 10px 10px 0px;
	-webkit-border-radius: 0px 10px 10px 0px;
	border-radius: 0px 10px 10px 0px;
}
.rg-image-nav a:hover{
	opacity:0.8;
}
.rg-caption {
	text-align:left;
	position:absolute;
	bottom:60px;
	max-width:96%;
}
.rg-caption h2{
	color:#bce4e4;
	font-family: 'Berthold Akzidenz-Grotesk';
	font-size: 42px;
	text-transform:uppercase;
	text-decoration:underline;
	margin-bottom:50px;

}
.rg-caption span{
	font-size:9px;
	display:block;
	font-style:italic;
	margin-top:40px;
	font-weight:300;
}
.rg-view{
	height:30px;
	display:none;
}
.rg-view a{
	display:block;
	float:right;
	width:16px;
	height:16px;
	margin-right:3px;
	background:#464646 url(../images/views.png) no-repeat top left;
	border:3px solid #464646;
	opacity:0.8;
}
.rg-view a:hover{
	opacity:1.0;
}
.rg-view a.rg-view-full{
	background-position:0px 0px;
}
.rg-view a.rg-view-selected{
	background-color:#6f6f6f;
	border-color:#6f6f6f;
}
.rg-view a.rg-view-thumbs{
	background-position:0px -16px;
}
.rg-loading{
	width:46px;
	height:46px;
	position:absolute;
	top:50%;
	left:50%;
	background:#000 url(../images/ajax-loader.gif) no-repeat center center;
	margin:-23px 0px 0px -23px;
	z-index:100;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
	opacity:0.7;
}


@media screen and (min-width: 1025px) and (max-width: 1660px) {	
.accueil.mentions{
	padding-top:3%;
	}
.accueil.mentions .logo{
	margin: 20px auto;
	}
.accueil.mentions .texte{
	margin-top:155px;
}
.titre.entete {
	top:19%;
}
.enseignement .titre.entete {
	top:22%;

}
.enseignement .titre.entete p{
	font-size:92px;
	line-height:1.1;
	width:84%;
}
}

@media screen and (min-width: 1281px) and (max-width: 1920px) {	
.filigramme{
	letter-spacing:40px;
	}		
.enseignement .menu{
	margin:24px 0 60px 120px;
	}
}
@media screen and (min-width: 1921px) {	
.filigramme{
	letter-spacing:50px;
	}		
iframe.video{

	}	
}

@media screen and (min-width: 1024px) and (max-width: 1279px)  {	
#content{
	max-width:1000px;
	margin: 40px auto 0;
	left:inherit;
	position:relative;	
	}
.fond_slide{
	top:90px;
	}
.menu{
	margin: 70px 0 70px 75px;
	}
.menu .item {
	margin-right:6%;
	}
.titre.entete {
	top:11%;
}
.texte{
	width:73%;
	}
.filigramme.preface {
    font-size: 34vw;
    letter-spacing: 50px !important;
    top: 32%;
}
.filigramme{
	font-size:9vw;
	letter-spacing:20px;
	top:38%;
	}		
.accueil_lire .item {
	width:215px;
	height:152px;	
	}
iframe.video{
	margin: auto;
	width:1000px !important;
	height:563px !important;
	}
.enseignement .titre.entete {
	top:25%;
}
.enseignement .titre.entete p{
	font-size:88px;
	line-height:1.1;
	width:84%;
}	
}
@media screen and (min-width: 768px) and (max-width: 799px)  {	

.fond_slide{
	top:90px !important;
	}
.filigramme.preface {
    font-size: 28vw;
    letter-spacing: 50px !important;
    top: 41%;
}
}
@media screen and (max-width: 1023px) {	
.num_slide {
    top: 85px;
    right: 14px;
}
#content{
	max-width:86%; 
	margin:30px auto 0;
	left:inherit; 
	position:relative;
	text-align:left;
	}
.fond_slide{
	top:70px;
	}
.chiffres {
    font-size: 16px;
    top: 50%;
    left: 12%;
}
.text_temp{
		font-family: 'Berthold Akzidenz-Grotesk';
		font-size:4.5vw;
}
.show{
	display:block;
	}
.menu .item {
	margin-right:5.5%;
	}
.accueil .menu {
    margin: 0px 0 20px 80px;
}
.accueil_lire .item {
	width:215px;
	height:152px;
	}
.texte{
	width:75%;
	}
.titre.entete {
	top:11%;
}
.accueil.mentions {
    color: #fff;
    padding-top: 15%;
    text-align: center;
}
.accueil.mentions .texte	 {
	margin-top:40px;
}
.titre {
	font-size: 15px;
	width: 95px;
	margin-right:10px;
}
.filigramme.preface {
    font-size: 18vw !important;
    letter-spacing: 30px !important;
    top: 41%;
}
.filigramme{
	
	letter-spacing:17px !important;
	top:44%;
	}
.filigramme.chap_10{
	font-size:15vw;
	top:40% ;
	letter-spacing:30px !important;
	}
#footer .retour{
	left:10px;
	}
#footer .fermer{
	left:50px;
	}
#footer .mentions{
	right:20px;
	}
.visionner .titre_video {
	margin: 25% 0 20px 0;
	
}
iframe.video{
	margin: auto;
	width:640px  !important;
	height:360px !important;
	}
.enseignement .pretitre{
	width:100%;
	text-align:center;
	}		
.enseignement .titre.entete {
	top:20%;
}
.enseignement #header{
	max-width:100%;
	}
.enseignement .menu {
    text-align: left;
    margin: -10px 0 70px 40px;
}
.enseignement .titre.entete p{
	font-size:92px;
	line-height:1.1;
	width:84%;
	margin: 20px auto 0;
}
/*//// GALERIE  ///*/

#rg-gallery {
    max-width: 82%;
    margin: 0 auto;
}
.rg-image {
    position: relative;
    text-align: left;
    line-height: 0px;
    overflow: hidden;
    max-width: 100%;
    height: 50%;
}
.rg-caption-wrapper {
    position: relative;
    top: inherit;
    left: 0%;
    margin: 20px;
    z-index: 999;
    color: #fff;
    font-family: 'Raleway';
    font-size: 16px;
    text-align: left;
    min-height:200px;
    width: 90%;
}	
.rg-caption {
	text-align:left;
	position:absolute;
	bottom:30px;
	max-width:96%;
}
.rg-caption h2{
	color:#bce4e4;
	font-family: 'Berthold Akzidenz-Grotesk';
	font-size: 42px;
	text-transform:uppercase;
	text-decoration:underline;
	margin-bottom:25px;

}
.rg-caption span{
	font-size:9px;
	display:block;
	font-style:italic;
	margin-top:20px;
	font-weight:300;
}
}

@media screen and (max-width: 420px) {	
.desktop{
	display:none !important;
	}	
.mobile{
	display:block;
}
.menu .item.long{
	width:inherit;
}

#content{
	max-width:96%; 
	margin:0 auto; 
	left:inherit; 
	position:relative;
	text-align:left;
	}
.lecteur #content{
	text-align:center;
	}
.fond_slide{
	top:124px !important;
	
	}
.text_temp{
		font-size:6.5vw;
}
.titre.entete {
	top:4%;
	font-size:30px;
}
.titre.entete span {
	height:40px;
	width:40px;
	line-height:40px;
	font-size:18px;
}
.accueil.mentions div{ 
	margin: 0px auto 40px !important;
	width: 100% !important;

}
.accueil.mentions {
    padding-top: 10%;
    text-align: center;
	width:90%;
	margin:0 auto;
}
.accueil.mentions .texte{
	margin-top:0px;
}
.accueil.mentions .texte.grand{
	margin-top:0px;
	font-size:30px;
}
.texte{
	width:76%;
	display:block;
	margin: 0 auto 40px;
	font-size:16px;
	}
.titre {
display:none;
}
.filigramme {
    font-size: 14vw !important;
    letter-spacing: 7px !important;
    top: 49%;	
}
.filigramme.chap_10{
	font-size:14vw;
	top:46% ;
	letter-spacing:15px !important;
	}
.chiffres {
    font-size: 14px;
    top: 55%;
    left: 12%;
}
.menu{
	margin:20px 0 10px 10px !important;
	}		
.menu .item{
	font-size:12px;
	margin:0;
	width: inherit;
	margin:20px 0 0;
	text-align:center;
	}

.menu .item a{
	font-size:14px;
}
#footer .retour{
	left:5px;
	}
#footer .fermer{
	left:30px;
	}
#footer .mentions{
	right:10px;
	}	
iframe.video{
	margin: auto;
	width:340px  !important;
	height:191px  !important;
	}
.accueil_visionner{
	text-align:center;
	max-width:96%;	
}
.accueil_visionner a{
	display:block;
	margin:0 auto;
	}
.enseignement .pretitre {
	margin-top:40px;
}		
.enseignement .titre.entete {
	top:30%;
}
.enseignement .menu {
  
}
.enseignement .lire #content {
    top: 2%;
    left: 2%;
    height: 92%;
    width: 72%;
    padding: 2% 12%;
}
.enseignement .texte {
    display: inline-block;
    width: 96%;
	margin-left:7px;
	margin-top:-20px;
}
.enseignement .titre.entete p{
	font-size:50px;
	line-height:1.1;
	width:88%;
	margin: 20px auto 0;
}
.enseignement #footer .retour{
	left:10px;
	}
.enseignement #footer .fermer{
	left:29px;
	}
.enseignement #footer .mentions{
	right:20px;
	}
/*//// GALERIE  ///*/

#rg-gallery {
    max-width: 82%;
    margin: 20px auto ;
}
.rg-image {
    position: relative;
    text-align: left;
    line-height: 0px;
    overflow: hidden;
    max-width: 100%;
    height: 50%;
}
.rg-caption-wrapper {
    position: relative;
    top: inherit;
    left: 0%;
    margin: 20px;
    z-index: 999;
    color: #fff;
    font-family: 'Raleway';
    font-size: 14px;
    text-align: left;
    min-height:200px;
    width: 90%;
}
}
@media screen and (max-height: 320px) and (max-width: 500px) {	
#content{
	max-width:86%; 
	margin:0 auto ;
	left:inherit; 
	position:relative;
	text-align:left;
	}
.fond_slide{
	top:79px !important;
	}
.menu, .accueil .menu {
    margin: 20px 0 20px 0;
}
.menu .item a{
	font-size:14px;
	width:22%;
	}
.menu .item {
	width:22%;
	}
.intro .filigramme.chap_00 p{
	margin:0 auto;
    letter-spacing: 7px;
    top: 23%;
	font-size:15vw !important	
}
.titre.entete {
	top:20px;
	font-size:30px;
}
.titre.entete span {
	height:40px;
	width:40px;
	line-height:40px;
	font-size:18px;
}
.chiffres {
    font-size: 13px;
    top: 48%;
    left: 12%;
	line-height:1.2;
}
.menu .item.long {
    width: 52% !important;
}	
.preface p {
	font-size: 18px;
	letter-spacing:1px;
}
}
@media screen and (min-height: 360px) and (max-width: 767px) {	
.fond_slide {
    top: 110px;
}

.menu .item {
	margin:20px 20px 0 0;
	}

.menu, .accueil .menu {
    margin: 20px 0 20px 0;
}
.intro .filigramme.chap_00 p{
	margin:0 auto;
    letter-spacing: 7px;
    top: 24%;
	font-size:15vw !important	
}
.titre.entete {
	top:105px;
	font-size:28px;
}
.titre.entete span {
	height:40px;
	width:40px;
	line-height:40px;
	font-size:18px;
}
.texte{
	width:70%;
	
	}
.chiffres {
    font-size: 13px;
    top: 51%;
    left: 12%;
	line-height:1.2;
}
	
.preface p {
	font-size: 20px;
	letter-spacing:1px;
}
.enseignement .menu {
    text-align: left;
    margin: 40px 0 40px 0px;
}
.enseignement .titre.entete p{
	font-size:40px;
	line-height:1.1;
	width:78%;
	margin: 100px auto 0;
}
}
@media screen and (min-height: 320px) and (max-width: 540px) {	
.fond_slide {
    top: 110px;
}

.menu .item {
	margin-right:20px !important;
	letter-spacing:2px;
	margin: 15px 0 0px 0px;
	width:inherit;
	}

.menu, .accueil .menu {
    margin: 10px 0 20px 15px !important;
}
.texte{
	width:70%;
	}
.enseignement .titre.entete p{
	font-size:32px;
	line-height:1.1;
	width:78%;
	margin: 100px auto 0;
}
}

@media screen and (max-width: 320px) {	
.menu{
	margin: 20px 0 30px 10px !important;
	}
.menu .item a{
	letter-spacing:2px;
	}
.menu .item{
	font-size:12px;
	margin:0;
	width: inherit;
	margin:14px 16px 0 0;
	text-align:center;
	}
.menu .item a{
	font-size:14px;

}
.menu .item.centre{
	/*margin: 20px 0px 16px 0px !important;*/
}
.preface{
	font-size:12px;
	margin-left:15px;
	}
.texte{
	font-size:14px;
	}
#rg-gallery {
    max-width: 82%;
    margin: 18px auto !important;
}

.enseignement .titre.entete p{
	font-size:36px;
	line-height:1.1;
	width:78%;
	margin: 70px auto 0;
}
iframe.video{
	margin: auto;
	width:300px !important;
	height:169px !important;
	}
}
@media screen and (min-width: 1024px) and (max-height: 620px) {	
#content{
	margin:0;	
	}
.accueil .menu{
	margin:40px 0 40px 180px
	}
.fond_slide{
	top:70px;
	}
.es-carousel-wrapper{
	margin-bottom:20px;
	}
.accueil_lire {
	max-width:1024px;
	margin:0 auto;
}
.accueil_lire .item {
	width:215px;
	height:152px;	
	}
.menu{
	text-align:left;
	margin:30px 0 70px 90px;

	}
.accueil .menu{
	margin:30px 0 20px 120px
	}
}
@media screen and (min-width: 900px) and (max-width: 1023px) and (min-height: 769px) {	
iframe.video{
	margin:0  auto;
	width:768px !important;
	height:432px !important;
	}
}
/*@media screen and (min-height: 551px) and (max-height: 700px) {	
#content{
	padding-top:1.5%;
	}
}
@media screen and (min-height: 701px) and (max-height: 950px) {	
#content{
	padding-top:4%;
	}
}
@media screen and (min-height: 951px) and (max-height: 1110px) {	
#content{
	padding-top:16%;
	}
	.filigramme{
	top:44%;
	}
}
@media screen and (min-height: 1111px) and (max-height: 1900px) {	
#content{
	padding-top:25%;
	}
}
*/
/*// ANIMATIONS  /*/
.anim_intro{
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
	z-index:1;
	}
.chap_00 .anim_intro{
	background:#15244c url(../images/chap_00.png) no-repeat;
	background-size:cover;
	background-position:50% 50%;	
}
.intro .filigramme.chap_00{
	background-color: transparent;
	top:-10%;
}
body.lire.chap_00{	
	background:#15244c;
	}
.intro .filigramme.chap_00 p{
	color:#36d8d8;
}
.chap_01 .anim_intro{
	background:#95d4d9 url(../images/chap_01.png) no-repeat;
	background-size:cover;
	background-position:50% 50%;	
}
.intro .filigramme.chap_01{
	background-color:#ddde3a;
}
.intro .filigramme.chap_01 p{
	color:#15244c;
}
.chap_02 .anim_intro{
	background:#95d4d9 url(../images/chap_02.png) no-repeat;
	background-size:cover;
	background-position:50% 50%;
}
.intro .filigramme.chap_02{
	background-color:#15244c;
}
.intro .filigramme.chap_02 p{
	color:#e94243;
}
.chap_03 .anim_intro{
	background:#95d4d9 url(../images/chap_03.png) no-repeat;
	background-size:cover;
	background-position:50% 50%;
}
.intro .filigramme.chap_03{
	background-color:#239199;
}
.intro .filigramme.chap_03 p{
	color:#ddde3a;
}
.chap_04 .anim_intro{
	background:#95d4d9 url(../images/chap_04.png) no-repeat;
	background-size:cover;
	background-position:50% 50%;
}
.intro .filigramme.chap_04{
	background-color:#e94243;
}
.intro .filigramme.chap_04 p{
	color:#15244c;
}
.chap_05 .anim_intro{
	background:#95d4d9 url(../images/chap_05.png) no-repeat;
	background-size:cover;
	background-position:50% 50%;
}
.intro .filigramme.chap_05{
	background-color:#bce4e4;
}
.intro .filigramme.chap_05 p{
	color:#15244c;
}
.chap_06 .anim_intro{
	background:#95d4d9 url(../images/chap_06.png) no-repeat;
	background-size:cover;
	background-position:50% 50%;
}
.intro .filigramme.chap_06{
	background-color:#fdc422;
}
.intro .filigramme.chap_06 p{
	color:#15244c;
}
.chap_07 .anim_intro{
	background:#95d4d9 url(../images/chap_07.png) no-repeat;
	background-size:cover;
	background-position:50% 50%;
}
.intro .filigramme.chap_07{
	background-color:#ddde3a;
}
.intro .filigramme.chap_07 p{
	color:#15244c;
}
.chap_08 .anim_intro{
	background:#95d4d9 url(../images/chap_08.png) no-repeat;
	background-size:cover;
	background-position:50% 50%;
}
.intro .filigramme.chap_08{
	background-color:#bce4e4;
}
.intro .filigramme.chap_08 p{
	color:#15244c;
}
.chap_09 .anim_intro{
	background:#95d4d9 url(../images/chap_09.png) no-repeat;
	background-size:cover;
	background-position:50% 50%;
}
.intro .filigramme.chap_09{
	background-color:#e94243;
}
.intro .filigramme.chap_09 p{
	color:#15244c;
}
.chap_10 .anim_intro{
	background:#95d4d9 url(../images/chap_10.png) no-repeat;
	background-size:cover;
	background-position:50% 50%;
}
.intro .filigramme.chap_10{
	background-color:#fdc422;
}
.intro .filigramme.chap_10 p{
	color:#15244c;
}
.chap_11 .anim_intro{
	background:#95d4d9 url(../images/chap_11.png) no-repeat;
	background-size:cover;
	background-position:50% 50%;
}
.intro .filigramme.chap_11{
	background-color:#239199;
}
.intro .filigramme.chap_11 p{
	color:#15244c;
}
.chap_12 .anim_intro{
	background:#95d4d9 url(../images/chap_12.png) no-repeat;
	background-size:cover;
	background-position:50% 50%;
}
.intro .filigramme.chap_12{
	background-color:#15244c;
}
.intro .filigramme.chap_12 p{
	color:#e94243;
}
.intro .filigramme{
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
	z-index:1;
	display:flex;
	}
.intro .filigramme p{
	position:relative;
	margin:auto;
	width:100%;
	text-align:center;
	color: #172639;
	}
.intro .filigramme p span{
	color: #fff;
	}

/* Anim visuel */
     .zoomIn {
  -webkit-animation-name: zoomIn;
  animation-name: zoomIn;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  }
  @-webkit-keyframes zoomIn {
  0% {
  opacity: 0;
  -webkit-transform: scale3d(.3, .3, .3);
  transform: scale3d(.3, .3, .3);
  }
  50% {
  opacity: 1;
  }
  }
  @keyframes zoomIn {
  0% {
  opacity: 0;
  -webkit-transform: scale3d(.3, .3, .3);
  transform: scale3d(.3, .3, .3);
  }
  50% {
  opacity: 1;
  }
  }
 /* Anim texte /*/
   .fadeInRightBig {
	animation-delay: 2.5s;
  -webkit-animation-name: fadeInRightBig;
  animation-name: fadeInRightBig;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  }
  @-webkit-keyframes fadeInRightBig {
  0% {
  opacity: 0;
  -webkit-transform: translate3d(2000px, 0, 0);
  transform: translate3d(2000px, 0, 0);
  }
  100% {
  opacity: 1;
  -webkit-transform: none;
  transform: none;
  }
  }
  @keyframes fadeInRightBig {
  0% {
  opacity: 0;
  -webkit-transform: translate3d(2000px, 0, 0);
  transform: translate3d(2000px, 0, 0);
  }
  100% {
  opacity: 1;
  -webkit-transform: none;
  transform: none;
  }
  }
   /* Anim texte accueil 00/*/
   .fadeInRightBig2 {
	animation-delay: 0s;
  -webkit-animation-name: fadeInRightBig;
  animation-name: fadeInRightBig;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  }
  @-webkit-keyframes fadeInRightBig {
  0% {
  opacity: 0;
  -webkit-transform: translate3d(2000px, 0, 0);
  transform: translate3d(2000px, 0, 0);
  }
  100% {
  opacity: 1;
  -webkit-transform: none;
  transform: none;
  }
  }
  @keyframes fadeInRightBig {
  0% {
  opacity: 0;
  -webkit-transform: translate3d(2000px, 0, 0);
  transform: translate3d(2000px, 0, 0);
  }
  100% {
  opacity: 1;
  -webkit-transform: none;
  transform: none;
  }
  }
 /*  Anim changement couleur de fond /*/
        .CouleurFond {
animation-delay: 3s;
  -webkit-animation-name: fadeIn;
  animation-name: CouleurFond;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  }
  @-webkit-keyframes CouleurFond {
  0% {background-color: #36d8d8;}
  100% {background-color: #bce4e4;}
  }
  @keyframes CouleurFond {
  0% {background-color: #36d8d8;}
  100% {background-color: #bce4e4;}
  } 
/* Anim sortie visuel /*/

      .fadeOutLeftBig {
	animation-delay: 2.5s;
  -webkit-animation-name: fadeOutLeftBig;
  animation-name: fadeOutLeftBig;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  }
  @-webkit-keyframes fadeOutLeftBig {
  0% {
  opacity: 1;
  }
  100% {
  opacity: 0;
  -webkit-transform: translate3d(-2000px, 0, 0);
  transform: translate3d(-2000px, 0, 0);
  }
  }
  @keyframes fadeOutLeftBig {
  0% {
  opacity: 1;
  }
  100% {
  opacity: 0;
  -webkit-transform: translate3d(-2000px, 0, 0);
  transform: translate3d(-2000px, 0, 0);
  }
  }
      .fadeOutLeftBig2 {
	animation-delay: 3s;
  -webkit-animation-name: fadeOutLeftBig;
  animation-name: fadeOutLeftBig;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  }
  @-webkit-keyframes fadeOutLeftBig {
  0% {
  opacity: 1;
  }
  100% {
  opacity: 0;
  -webkit-transform: translate3d(-2000px, 0, 0);
  transform: translate3d(-2000px, 0, 0);
  }
  }
  @keyframes fadeOutLeftBig {
  0% {
  opacity: 1;
  }
  100% {
  opacity: 0;
  -webkit-transform: translate3d(-2000px, 0, 0);
  transform: translate3d(-2000px, 0, 0);
  }
  }
  /*/  arrivée chiffres   /*/
  .fadeInLeft {
 animation-delay: 4s;
  -webkit-animation-name: fadeInLeft;
  animation-name: fadeInLeft;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  }
  @-webkit-keyframes fadeInLeft {
  0% {
  opacity: 0;
  -webkit-transform: translate3d(-100%, 0, 0);
  transform: translate3d(-100%, 0, 0);
  }
  100% {
  opacity: 1;
  -webkit-transform: none;
  transform: none;
  }
  }
  @keyframes fadeInLeft {
  0% {
  opacity: 0;
  -webkit-transform: translate3d(-100%, 0, 0);
  transform: translate3d(-100%, 0, 0);
  }
  100% {
  opacity: 1;
  -webkit-transform: none;
  transform: none;
  }
  } 
 /*///  ENTETE ///*/
  .fadeOut3 {
  animation-delay: 2s;
  -webkit-animation-name: fadeOut;
  animation-name: fadeOut;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  }
  @-webkit-keyframes fadeOut {
  0% {opacity: 1;}
  100% {opacity: 0;}
  }
  @keyframes fadeOut {
  0% {opacity: 1;}
  100% {opacity: 0;}
  } 
   .fadeInLeft2 {
 animation-delay: 3s;
  -webkit-animation-name: fadeInLeft;
  animation-name: fadeInLeft;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  }
  @-webkit-keyframes fadeInLeft {
  0% {
  opacity: 0;
  -webkit-transform: translate3d(-100%, 0, 0);
  transform: translate3d(-100%, 0, 0);
  }
  100% {
  opacity: 1;
  -webkit-transform: none;
  transform: none;
  }
  }
  @keyframes fadeInLeft {
  0% {
  opacity: 0;
  -webkit-transform: translate3d(-100%, 0, 0);
  transform: translate3d(-100%, 0, 0);
  }
  100% {
  opacity: 1;
  -webkit-transform: none;
  transform: none;
  }
  } 
    .fadeInRight2 {
animation-delay: 2.5s;
  -webkit-animation-name: fadeInRight;
  animation-name: fadeInRight;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  }
  @-webkit-keyframes fadeInRight {
  0% {
  opacity: 0;
  -webkit-transform: translate3d(100%, 0, 0);
  transform: translate3d(100%, 0, 0);
  }
  100% {
  opacity: 1;
  -webkit-transform: none;
  transform: none;
  }
  }
  @keyframes fadeInRight {
  0% {
  opacity: 0;
  -webkit-transform: translate3d(100%, 0, 0);
  transform: translate3d(100%, 0, 0);
  }
  100% {
  opacity: 1;
  -webkit-transform: none;
  transform: none;
  }
  } 

  /*/ sortie texte  /*/
 .fadeOut{
  animation-delay: 6s;
  -webkit-animation-name: fadeOut;
  animation-name: fadeOut;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  }
  @-webkit-keyframes fadeOut {
  0% {opacity: 1;}
  100% {opacity: 0;}
  }
  @keyframes fadeOut {
  0% {opacity: 1;}
  100% {opacity: 0;}
  } 
  .fadeOut2 {
  animation-delay: 11s;
  -webkit-animation-name: fadeOut;
  animation-name: fadeOut;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  }
  @-webkit-keyframes fadeOut {
  0% {opacity: 1;}
  100% {opacity: 0;}
  }
  @keyframes fadeOut {
  0% {opacity: 1;}
  100% {opacity: 0;}
  }