html,
body {
	height:100%;
	margin:0;
	color:#e2e2e2;
	font-size:100%;
	font-size:14px;
	font-weight:400;
	font-family:"Open sans", serif;
	-moz-osx-font-smoothing:grayscale;
	-webkit-font-smoothing:antialiased;
}
body {
	min-width:440px;
}
body.memoires {
	background:#202020 url('images/tapisserie.jpg') 0 0 repeat;
}
#texture {
    position:fixed;
	top:0;
	right:0;
	bottom:0;
	left:0;
	z-index:-2;
	background:#000000;
	/*
	background-size:cover;
	background-repeat:no-repeat;
	background-image:url('images/texture.jpg');
	*/
}

body.memoires #texture {
	z-index:100000;
}
#fond {
    position:fixed;
	top:50%;
	right:0;
	bottom:0;
	left:50%;
	width:auto;
	height:auto;
    min-width:100%;
    min-height:100%;
    z-index:-1;
	background-size:cover;
	opacity:0.72;
	transition:1s opacity;
	transition:opacity 1s ease 0s;
    transform:translateX(-50%) translateY(-50%);
}
#intro {
	width:100%;
	height:100%;
	text-align:center;
}
#seuil {
	padding:16% 0;
	padding:16vh 0;
	text-align:center;
}
h1 {
	margin:0;
	padding:0 3.2rem;
	font-size:4.2em;
	line-height:1em;
	font-weight:700;
	text-transform:uppercase;
	font-family:'Spectral', serif;
}
h2 {
	margin:0;
	font-size:1.6em;
	font-weight:400;
	text-transform:uppercase;
}
h3 {
	padding:3.2rem 1.6rem 0;
    font-size:3.2em;
    font-weight:600;
	line-height:1.2;
	font-family:Spectral;
    text-transform:uppercase;
}
h3 small {
	margin:0;
	font-size:1.6rem;
	font-weight:400;
	font-family:"Open sans", serif;
	text-transform:uppercase;
}
h4 {
	margin:0;
	padding:3.2rem 1.6rem;
	font-size:1.6rem;
	font-weight:400;
	text-transform:uppercase;
}
.go {
	display:inline-block;
	border:0;
	outline:0;
	cursor:pointer;
	margin:8% 0 4%;
	padding:0.6rem 1.2rem;
	color:#e2e2e2;
	font-size:1.12em;
	font-weight:700;
	text-decoration:none;
	text-transform:uppercase;
	border:1px solid #fff;
	background:rgba(255,255,255,0.08);
}
.go:hover {
	background:rgba(255,255,255,0.04);
}
.bas {
	display:inline-block;
	position:absolute;
	bottom:4.6rem;
	z-index:1001;
	height:56px;
	margin-left:-43px;
	cursor:pointer;
	font-size:1rem;
	background-size:56%;
	background-repeat:no-repeat;
	background-position:bottom center;
	background-image:url("images/bas.png");
}
#retour {
	position:absolute;
	cursor:pointer;
	opacity:0.4;
	z-index:100000;
	top:1rem;
	left:1rem;
	height:36px;
	line-height:36px;
	background-size:16px;
	background-repeat:no-repeat;
	background-position:center left;
	background-image:url("images/retour.png");
}
#retour a,
#retour a:visited {
	padding-left:1.6rem;
	opacity:0;
	outline:0;
	color:#e2e2e2;
	text-decoration:none;
	text-transform:uppercase;
	
}
#retour a:hover,
#retour a:active {
	opacity:1;
}



.informations {
	overflow:hidden;
	width:100%;
	margin:0 auto;
	text-align:center;
}
.informations:last-child {
	padding-bottom:6rem;
}
.informations p {
	max-width:720px;
	margin:0 auto 1.6rem;
	padding:0 3.2rem;
	font-size:1.12rem;
	font-weight:500;
}
.informations p em {
	font-size:1rem;
	font-weight:600;
	font-style:italic;
	letter-spacing:0.02em;
}
.informations p a,
.informations p a:visited {
	padding:0.6rem 0.8rem;
	color:#e2e2e2;
	font-size:1rem;
	font-weight:700;
	text-decoration:none;
	outline:0;
	border:1px solid #e2e2e2;
	background:rgba(255,255,255,0.08);
}
.informations p a:hover,
.informations p a:active {
	background:rgba(255,255,255,0.04);
}
.informations ul {
	margin:0;
	padding:0;
	list-style:none;
}
.logos {
	position:relative;
	bottom:1.4rem;
}
.logos li {
	display:inline-block;
	width:240px;
	padding:0 1.6rem 0.6rem;
}
.logos li img {
	max-width:100%;
	height:auto;
}
.logos li a,
.logos li a:visited {
	color:#e2e2e2;
	padding:0;
	text-decoration:none;
}
.logos li a:hover,
.logos li a:active {
	font-weight:700;
}
.logos li span {
	position:relative;
	bottom:0.6rem;
	font-size:1rem;
}
span.diffusion {
	position:relative;
	bottom:3.2rem;
	font-size:1.12rem;
	text-transform:uppercase;
}
#equipe {
	text-align:center;
}
.equipe {
	display:inline-block;
	max-width:520px;
	margin:0;
	padding:0;
}
.equipe li {
	display:inline-block;
	width:100%;
	max-width:480px;
	padding:0 3.2rem;
	font-weight:700;
	line-height:1.6;
	text-align:left;
}
.equipe li span {
	font-weight:400;
}



/*
*			-------
*			LECTEUR
*			-------
*/

#sequence {
	position:relative;
	left:-50%;
	opacity:0;
	border-right:1px solid #424242;
	border-left:1px solid #424242;
}
.centre {
	position:fixed;
	top:0;
	left:50%;
	z-index:2;
}
#menu li.lecture,
#menu li.sourdine {
	float:left;
	clear:none;
	font-size:1.8em;
}
#menu li.lecture.fa-pause {
	font-size:1.3em;
}


/*
*			--------------------
*			CONSOLE DE DƒBUGGAGE
*			--------------------
*/

#console {
	position:absolute;
	bottom:6rem;
	min-width:72px;
	max-width:320px;
	padding:8px 16px;	
	color:#808080;
	font-weight:400;
	font-size:1em;	
	font-family:'Open sans', sans-serif;
	font-weight:400;
	background:#202020;
	border-top:1px solid #2b2b2b;
	border-right:1px solid #2b2b2b;
	border-bottom:1px solid #2b2b2b;
}
#console ul {
	margin:0;
	padding:0;
	list-style-type:none;
}


/*
*			-----
*			OMBRE
*			-----
*/

#ombre {
	position:fixed;
	top:0;
	right:0;
	bottom:0;
	left:0;
	background:linear-gradient(to bottom,  rgba(0,0,0,0) 0%,rgba(0,0,0,0) 33%,rgba(0,0,0,0.65) 99%,rgba(0,0,0,0.66) 100%);
	background:-moz-linear-gradient(top,  rgba(0,0,0,0) 0%, rgba(0,0,0,0) 33%, rgba(0,0,0,0.65) 99%, rgba(0,0,0,0.66) 100%);
	background:-webkit-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,0) 33%,rgba(0,0,0,0.65) 99%,rgba(0,0,0,0.66) 100%);
}


/*
*			-----------
*			LES CAHIERS
*			-----------
*/

#cahiers {
	position:fixed;
	bottom:-1200px;
	width:100%;
	min-width:100%;
	z-index:300;
}
#cahiers ul {
	position:relative;
	max-width:1600px;
	margin:0 auto;
	padding:0;
	text-align:center;
	list-style-type:none;
}
#cahiers .cahier {
	display:inline-block;
	position:relative;
	overflow:visible;
	width:10%;
	margin:0 1%;
	text-align:center;
	background:#000;
	border-radius:1% 6% 6% 1%;
	-moz-border-radius:1% 6% 6% 1%;
	-webkit-border-radius:1% 6% 6% 1%;
}
#cahiers .cahier:hover {
	cursor:pointer;
}
#cahiers.pasdeclic .cahier:hover,
#cahiers .cahier.absent:hover {
	cursor:default;
}
#cahiers .cahier img {
	border:none;
	outline:none;
	height:auto;
	opacity:0.4;
	width:100%;
	max-width:100%;
	border-radius:1% 6% 6% 1%;
	-moz-border-radius:1% 6% 6% 1%;
	-webkit-border-radius:1% 6% 6% 1%;
	box-shadow:2px 8px 4px 6px rgba(0,0,0,0.2);
	-moz-box-shadow:2px 8px 4px 6px rgba(0,0,0,0.2);
	-webkit-box-shadow:2px 8px 4px 6px rgba(0,0,0,0.2);
}
#cahiers .etiquette {
	white-space:nowrap;
	position:absolute;
	text-align:center;
	display:none;
	top:-60px;
	left:-50%;
	width:200%;
}
#cahiers .etiquette span {
	padding:8px 12px;
	color:#808080;
	font-size:1em;
	font-weight:400;
	font-family:Lora;
	background:rgba(20,20,20,0.92);
	border:1px solid #2b2b2b;
}
#cahiers.position0 .cahier img { opacity:0.8; }
#cahiers.position0 .cahier:hover img  { opacity:1; }
#cahiers.position1 .cahier img { opacity:0.6; }
#cahiers.position2 .cahier img { opacity:0.4; }
#cahiers.position3 .cahier img { opacity:0.4; }
@keyframes glissement {
    from { bottom:0px; }
    to { bottom:10%; }
}
@-webkit-keyframes glissement {
    0% { bottom:0px; }
    100% { bottom:16px; }
}
#cahiers.actifs .cahier:hover {
	animation-name:glissement;
    animation-duration:0.6s;
	animation-fill-mode:forwards;
    animation-timing-function:ease-out;
	-webkit-animation-timing-function:ease-out;
}
#cahiers.actifs .cahier:hover .etiquette {
	display:inline;
}
#cahiers .table {
	display:inline-block;
	position:absolute;
	cursor:pointer;
	bottom:0;
	left:0;
	height:46px;
	width:90%;
	margin:0 5%;	
	background-size:contain;
	background-repeat:no-repeat;
    background-position:center bottom;
	background-image:url("images/table.jpg");
}


/*
*			-----------------
*			CONTENUS CENTRAUX
*			-----------------
*/

.contenus {
	position:fixed;
	bottom:50%;
	width:100%;
	margin:0 auto;
	z-index:1;
}
#cahier {
	position:fixed;
	height:80%;
	max-height:404px;
	cursor:pointer;
	top:40%;
	left:50%;
	padding:0;
	margin:0 auto;
	list-style-type:none;
	text-align:center;
    transform:translateX(-50%) translateY(-40%);
}
#cahier.pasdeclic {
	cursor:default;
}
#cahier li {
	height:100%;
	background:#000;
	border-radius:1% 6% 6% 1%;
	-moz-border-radius:1% 6% 6% 1%;
	-webkit-border-radius:1% 6% 6% 1%;
}
#cahier li img {
	width:auto;
	height:100%;
	min-height:100%;
	border-radius:1% 6% 6% 1%;
	-moz-border-radius:1% 6% 6% 1%;
	-webkit-border-radius:1% 6% 6% 1%;
	box-shadow:6px 8px 4px 6px rgba(0,0,0,0.4);
	-moz-box-shadow:6px 8px 4px 6px rgba(0,0,0,0.4);
	-webkit-box-shadow:6px 8px 4px 6px rgba(0,0,0,0.4);
}
#mini_cahier {
	position:fixed;
	height:26%;
	width:auto;
	max-height:220px;
	cursor:pointer;
	top:16%;
	left:4%;
	padding:0;
	margin:0 auto;
	list-style-type:none;
	text-align:center;
    transform:translateX(-4%) translateY(-16%);
}
#mini_cahier.pasdeclic {
	cursor:default;
}
#mini_cahier li {
	height:100%;
	border-radius:1% 6% 6% 1%;
	-moz-border-radius:1% 6% 6% 1%;
	-webkit-border-radius:1% 6% 6% 1%;
}
#mini_cahier li img {
	width:auto;
	height:100%;
	min-height:100%;
	border-radius:1% 6% 6% 1%;
	-moz-border-radius:1% 6% 6% 1%;
	-webkit-border-radius:1% 6% 6% 1%;
	box-shadow:6px 8px 4px 6px rgba(0,0,0,0.4);
	-moz-box-shadow:6px 8px 4px 6px rgba(0,0,0,0.4);
	-webkit-box-shadow:6px 8px 4px 6px rgba(0,0,0,0.4);
}


.contenus.devant {
	z-index:200;
	bottom:20%;
}
#ecritaux {
	position:relative;
	z-index:200;
	list-style-type:none;
	margin:0 auto;
	padding:0;
	text-align:center;
    transform:translateY(-40%);
}
.message {
	display:inline-block;
	position:relative;
	margin:0 2%;
	max-width:28%;
	min-width:180px;
	border:1px solid #2b2b2b;
	background:rgba(20,20,20,0.92);
	border-radius:6px;
	-moz-border-radius:6px;
	-webkit-border-radius:6px;
}
.message span {
	max-width:280px;
}
@keyframes survol {
    from { bottom:0px; }
    to { bottom:6px; }
}
@-webkit-keyframes survol {
    0% { bottom:0px; }
    100% { bottom:6px; }
}
.message:hover {
	animation-name:survol;
    animation-duration:0.4s;
	animation-fill-mode:forwards;
    animation-timing-function:ease-out;
	-webkit-animation-timing-function:ease-out;
	background:rgba(19,19,19,0.92);
}
.message:hover span {
	color:#a2a2a2;
	cursor:pointer;
	border-color:#2f2f2f;
}
.message span {
	display:table-cell;
	vertical-align:middle;
	width:calc(100% - 26px);
	margin:4px;
	padding:22px;
	color:#808080;
	line-height:1.3;
	font-size:1.22em;
	font-weight:400;
	font-family:Courgette;
	font-style:normal;
	text-align:center;
	-ms-user-select: none;
	-moz-user-select:one;
	-webkit-user-select:none
}

#periode {
	position:fixed;
	z-index:10;
	top:0;
	width:100%;
	text-align:center;
}
#periode .cadre {
	display:inline-block;
	position:relative;
	top:-56px;
	width:42%;
	min-width:520px;
	background:#000;
	border-radius:0 0 18px 18px;
	-moz-border-radius:0 0 18px 18px;
	-webkit-border-radius:0 0 18px 18px;
	box-shadow:0px 12px 12px rgba(0, 0, 0, 0.6);
}
#periode .cadre img {
	display:block;
	height:auto;
	width:100%;
	min-width:520px;
	max-width:720px;
	opacity:0.6;
	border-radius:0 0 18px 18px;
	-moz-border-radius:0 0 18px 18px;
	-webkit-border-radius:0 0 18px 18px;
}
#periode .inscription {
    position:absolute;
	overflow:hidden;
    width:60.8%;
	height:54.6%;
	top:0;
	left:19.4%;
}
#periode .inscription span {
	position:absolute;
	top:0; left:0;
	width:100%;
	height:100%;
	padding:1.2% 0;
	color:#222;
	font-size:1em;
	line-height:1;
	font-weight:600;
	text-align:center;
	font-style:italic;
	font-family:'Spectral', serif;
	background:url('images/papier.jpg');
	border-bottom:1px solid #666;
}


@media screen and (min-width: 1200px) {
	#periode .inscription {
		font-size:1.12em;
		line-height:1.12;
	}
}
@media screen and (min-width: 1600px) {
	#periode .inscription {
		font-size:1.16em;
		line-height:1.16;
	}
}


#photos {
	position:fixed;
	z-index:100;
	bottom:20%;
	right:10%;
	width:30%;
	height:auto;
	max-width:600px;
}
#photos img {
	width:100%;
	height:auto;
	border:1px solid #828282;
	box-shadow:2px 8px 4px 6px rgba(0,0,0,0.2);
	-moz-box-shadow:2px 8px 4px 6px rgba(0,0,0,0.2);
	-webkit-box-shadow:2px 8px 4px 6px rgba(0,0,0,0.2);
}