@charset "UTF-8";
/* CSS Document */
body{
	}

#mail, .insta{
	color:black;
	text-decoration:none;
	}
	
#mail:hover{
	color:black;
	text-decoration:underline;
	}
.insta:hover{
	color:black;
	text-decoration:underline;
	}
/*.cadre{
	-webkit-box-sizing : border-box;
	-moz-box-sizing : border-box;
	box-sizing: border-box;
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
	border: solid black 20px;
	z-index:500;
	}*/
	#bordG{
	position:fixed;
	top:0;
	left:0;
	width:20px;
	height:100%;
background-color:black;	
z-index:500;
	}
	#bordD{
	position:fixed;
	top:0;
	right:0;
	width:20px;
	height:100%;
background-color:black;	
z-index:2000;
	}
	#bordH{
	position:fixed;
	top:0;
	left:0;
	height:20px;
	width:100%;
background-color:black;	
z-index:2000;
	}
	#bordB{
		-webkit-box-sizing : border-box;
	-moz-box-sizing : border-box;
	box-sizing: border-box;
	position:fixed;
	bottom:0;
	left:0;
	height:20px;
	width:100%;
background-color:black;	
z-index:2000;
	}
.expo{
	font-family: 'Fjalla One', sans-serif;
	font-size:40px;
	position:absolute;
	bottom:30%;
	left:20%;
	z-index:1000;
	color:black;
	text-decoration:none;
	}
.chapeau{
		position:absolute;
		width:100%;
		height:100%;
		top:0;
		left:0;
		z-index:1000;
		overflow:visible;
		}
#fleche{
	transform:none;
	font-size:80px;
	transition:all 3s;
	}
#point{
	position:absolute;
	top:100%;
	left:15%;
	z-index:0;
	opacity:0;
	}	
.toutesimages{
	poistion:absolute;
	top:100%;
	width:200%;
	left:0;
	overflow:scroll;
	overflow-x:hidden;
	}
.toutesimages img{
	overflow-x:hidden;
	position:absolute;
	-webkit-filter:grayscale(1);
	-moz-filter:grayscale(1);
	filter:grayscale(1);
	transition:all 0.5s ;
	box-shadow: 10px 10px 20px black;
	z-index:1000;
	border: solid black 0px;
	transform-origin: 100% 100%;
}
/*
img:hover{
	z-index:1000;
	-webkit-filter:grayscale(0);
	border:solid black 200px;
	height:50%;
	width:auto;
	}*/

img:hover{
	z-index:1000;
	-webkit-filter:grayscale(0);
	-moz-filter:grayscale(0);
	filter:grayscale(0);
	box-shadow: 30px 30px 20px black;
	width:auto;
	}
h1{
	font-family: 'Fjalla One', sans-serif;
	position:absolute;
	left:10%;
	top:10%;
	display:block;
	width:70%;
	font-size:40px;
	transform:none;
	transition:all 2s;
	text-align:left;
	z-index:10000;
	
	}
h2{
	font-family: 'Fjalla One', sans-serif;
	position:absolute;
	left:10%;
	top:10%;
	display:block;
	width:70%;
	font-size:40px;
	-webkit-transform: rotateY(90deg); 
    transform: rotateY(90deg);
	transition:all 2s;
	text-align:left;
	z-index:10000;
	}
	
h3{
	font-family: 'Fjalla One', sans-serif;
	position:absolute;
	left:15%;
	top:25%;
	display:block;
	width:85%;
	font-size:30px;
/*	-webkit-transform: rotateY(0deg); 
    transform: rotateY(0deg);
	transition:all 3s;
	text-align:left;
	z-index:10000;*/
	}
h4{
	font-family: 'Fjalla One', sans-serif;
	position:absolute;
	left:20%;
	top:35%;;
	display:block;
	width:40%;
	font-size:20px;
	z-index:1000;
/*	-webkit-transform: rotateY(90deg); 
    transform: rotateY(90deg);
	transition:all 3s;
	text-align:left;
	z-index:10000;*/
	}
.ligne1{
	height:25%;
	width:auto;
	}
.ligne2{
	height:35%;
	width:auto;
	}
.ligne3{
	height:300px;
	width:auto;
	}
.ligne4{
	height:200px;
	width:auto;
	}
.ligne5{
	height:200px;
	width:auto;
	}
.ligne0{position:absolute;
	width:auto;
	left:50%;
	height:100%;
	z-index:0;
	-webkit-filter:grayscale(1);
	-moz-filter:grayscale(1);
	filter:grayscale(1);
		}


hr{
	color:black;
	width:20%;
	text-align:left;
	margin-top: 0.3em;
    margin-bottom: 0.9em;
    margin-left:0;
    margin-right: auto;
    border-style: solid;
    border-width: 4px;
}

.titres{
	font-family: 'Fjalla One', sans-serif;
	font-size:15px;
	position:fixed;
	bottom:2%;
	right:2%;
	height:auto;
	width:auto;
	color:white;
	background-color:black;
	z-index:15000;
	}

@media only screen and (max-device-width : 810px){
	h1{
		font-size:60px;
		left:8%;
		top:6%;
		}
	h2{
		font-size:60px;
		left:8%;
		background-color:white;
		top:6%;
		}
	h3{
		font-size:40px;
		left:8%;
		top:19%;
		}
	h4{
		font-size:40px;
		left:8%;
		top:30%;
		width:80%;
		}
	hr{
    border-width: 2px;
}
.ligne0{right:0px;
-webkit-filter:grayscale(1);
	-moz-filter:grayscale(1);
	filter:grayscale(1);
	}
	.chapeau{
		position:static;
		width:100%;
		}
	}
	
@media only screen and (max-device-width : 400px){
	h1{
		font-size:60px;
		left:8%;
		top:7%;
		}
	h2{
		font-size:60px;
		left:8%;
		background-color:white;
		top:7%;
		}
	h3{
		font-size:40px;
		left:8%;
		top:25%;
		}
	h4{
		font-size:40px;
		left:8%;
		top:40%;
				width:80%;
		}
	hr{
    border-width: 2px;
}
.ligne0{right:-50%;
-webkit-filter:grayscale(1);
	-moz-filter:grayscale(1);
	filter:grayscale(1);
	}
	}
	
	
@media only screen and (max-device-height:500px){
	h1{top:20%;}
	h2{top:20%;}
	h3{
		top:40%;
		}
	h4{
		top:60%;
		}
		.expo{
	left:100%;
	
	}
	.chapeau{
				position:static;
		height:100%;
		width:100%;
		}
		
		.toutesimages{
			top:200%;
			width:200%;
			}
	}