@charset "UTF-8";
/* CSS Document */
body{
	background-color:black;
	font-size:16px;
	}

div{
scrollbar-width:none;
font-family:'ibm_plex_sansregular';
color:white;
}

video{
	height:120%;
	width:auto;
	-moz-transform: scale(-1, 1);
-webkit-transform: scale(-1, 1);
-o-transform: scale(-1, 1);
-ms-transform: scale(-1, 1);
transform: scale(-1, 1);
	}

#thumbnail{
	position:fixed;
	width:50%;
	height:100%;
	top:0;
	right:0;
	overflow:scroll;
	}
#grande{
	position:fixed;
	left:0;
	top:0;
	width:50%;
	height:100%;
	}
	#instrument{
		box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
		position:fixed;
	left:0;
	padding:10%;
	padding-top:200px;
	width:50%;
	height:100%;
	color:wight;
	overflow:scroll;
		}
	#instrumentimg{
		box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
		position:fixed;
		padding:30px;
	width:50%;
	height:100%;
	top:0;
	right:0;
	overflow:scroll;
		}
		p{
		display:block;
		-webkit-transition: opacity 1s;
    -moz-transition: opacity 1s;
    -o-transition: opacity 1s;
    transition: opacity 1s;
	box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
clear:both;
		width:100%;
		height:auto;
		padding:10px;
		margin-top:20px;
		color:white;
		}	
::-webkit-scrollbar { 
    display: none; 
}
header{
	font-family:'ibm_plex_sansregular';
	box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
	position:fixed;
	top:30px;
	left:30px;
	min-height:30px;
	max-height:40px;
	width:500px;
	border:1px solid black;
	border-bottom:none;
	background-color:white;
	color:black;
z-index: 1000;
	}
#headerpage{
	top:0;
	left:0;
	}
section{
		/*padding-top:15px;*/
		font-family:'ibm_plex_sansregular';
	box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
	width:100%;
	height:auto;
	border-bottom:1px solid black;
	float:left;
	padding:6px;
	padding-bottom:9px;
	cursor:pointer;
		background-color:white;
		text-align:left;
	}

	/*nav{
				font-family:'neue_haas_unica_luregular';
		box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
	position:fixed;
	top:5%;
	left:0;
	height:15%;
	width:25%;
	border:0.5px solid black;
	overflow-y:scroll;
	background-color:white;
		}*/

h1{
		/*padding-top:15px;*/
		font-family:'ibm_plex_sansregular';
	box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
	width:100%;
	height:100%;;
	float:left;
	padding:6px;
	cursor:pointer;
		background-color:white;
		text-align:left;
	}
	#tout{
		padding-left:6px;
		}

	
	

#textes a, #documents a, #infos a{
	text-decoration:underline;
	}
footer{
	box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
	position:fixed;
	top:90px;
	left:60px;
	height:90px;
	width:15%;
	background-color:black;
	border:1px solid black;
	z-index:1000;
/*	background-color:rgb(230, 230, 230);
*/	}

img{
	-webkit-transition: opacity 1s;
    -moz-transition: opacity 1s;
    -o-transition: opacity 1s;
    transition: opacity 1s;
		background-color:white;
	float:left;
	box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
	padding:1px;
	border:1px solid black;
	opacity:1;
	}
#thumbnail img{
	height:8%;
	width:auto;
	float:left;
	}
#grande img{
	width:100%;
	margin-top:150px;
	height:auto;
	float:left;
		padding:20px;
		background-color:black;
	}
#instrumentimg img{
	width:100%;
	margin-bottom:30px;
	height:auto;
	float:left;
	border:none;
	background-color:transparent;
	padding:0;
	}
img:hover{
	background-color:black;
	}
	a{
	color:black;
	text-decoration:none;
		}

iframe{display:none}
.iframe{ display:none;}
/*ADDCLASS*/		
.disparition{
	color:transparent;
	font-size:0;
	height:3px;
}
.disparition2{
	display:none;
}
.none{
opacity:0;
display:none;}
.stay{
	opacity:1;
display:block;
	}
.allume{
	text-decoration:underline;
	}
.encoursbtn{
	color:white;
	background-color:black;
	}
.infos{
	display:block;
	}


	
@media screen and (min-width:750px) and (max-width:920px){
body{
	height:100%;
	width:100%;
	}
header{
	position:fixed;
	left:0;
	top:0;
	width:100%;
	}

footer{
	width:40%;
	left:0;
	z-index:200;
	}
	}
@media screen and (min-width:400px) and (max-width:750px){
header{
	width:100%;
	top:0;
	position:fixed;
	left:0;
	}

footer{position:fixed;
top:60px;
height:auto;
	width:100%;
	z-index:1000;
	left:0;
	}

#grande{
	width:100%;
	height:50%;
			z-index:3000;
			padding-top:50px;
	}
#thumbnail{
	top:50%;
	left:0;
	height:50%;
	width:100%;
	}
#thumbnail img{
	width:25%;
	height:auto;
	}
#grande img{
		z-index:3000;
		margin-top:30px;
	}
#instrument{
	top:40px;
	margin-top:0;
	padding-top:30px;
	left:0;
	width:100%;
	height:50%;
	overflow-y:scroll;
	overflow-x:hidden;
	padding:10px;
	padding-top:10px;
		margin-top:0px;
	}
#instrumentimg{
	top:50%;
	left:0;
	width:100%;
	height:50%;
	}
	}
	
@media screen and (max-width:400px){
header{
	width:100%;
	top:0;
	position:fixed;
	left:0;
	}
footer{position:fixed;
top:60px;
height:auto;
	width:100%;
	z-index:1000;
	left:0;
	}
#grande{
	width:100%;
	height:50%;
			z-index:3000;
			padding-top:50px;
	}
#thumbnail{
	top:50%;
	left:0;
	height:50%;
	width:100%;
	}
#thumbnail img{
	width:25%;
	height:auto;
	}
#grande img{
		z-index:3000;
		margin-top:30px;
	}
#instrument{
	top:40px;
	margin-top:80px;
	padding-top:30px;
	left:0;
	width:100%;
	height:50%;
	overflow-y:scroll;
	overflow-x:hidden;
	padding:10px;
	padding-top:10px;
		margin-top:0px;
	}
#instrumentimg{
	top:50%;
	left:0;
	width:100%;
	height:50%;
	}
	}