body
{
width: 100%;
background-color: rgb(235,235,235);
margin: 0;
padding: 0;
z-index: 0;
}

@font-face
 {
 font-family: quicksandbook;
 src: url("quicksand_book-webfont.ttf");
 src: url("quicksand_book-webfont.eot");
 src: url("quicksand_book-webfont.woff"); 
}

@font-face
 {
 font-family: 'Juergen';
 src: url('Juergen.ttf');
}

@font-face
 {
 font-family: 'GeosansLight';
 src: url('GeosansLight.ttf');
 }

@font-face
 {
 font-family: 'Cisgender';
 src: url('Cisgender.otf');
}

#site
{
position: fixed;	
left: 15px;
top: 0px;	
font-family: quicksandbook;	
font-weight: bold;
color: rgb(204,102,0);
font-size: 16px;
}

.photo-bonhomme
{ 
position: fixed;	
top: 203px;
left: 45px;

}

.photo-bonhomme img
{
width: 105px;	
}

h1
{

position: fixed;	
width: 100%;
text-align: center;
top: 30px;
font-family: 'Cisgender';
color: black;
font-size: 50px;
font-weight: 100;
}

h2
{
margin-top: 60px;	
font-family: quicksandbook;
font-size: 14px;
color: white;
text-align: center;
font-weight: 10;
}


.objet
{

position: fixed;
top: 150px;
font-family: quicksandbook;
font-size: 15px;
color: black;
text-align: justify;
column-count: 4;
column-gap: 36px;
-webkit-column-count: 4;
-webkit-column-gap: 36px;
-moz-column-count: 4;
-moz-column-gap: 36px;
padding-left: 180px;
padding-right: 60px;
}

#carousel
{
margin-top: 345px;	
margin-bottom: 38px;
/*élargir les % quand on rajoute du contenu + modifier css .tout*/
width: 564%;
z-index: 2;

background-color: black;

font-family: quicksandbook;
font-weight: 1px;
color: white;

list-style-type: none;	

display: flex;
overflow: visible;
flex-grow: 0;
flex-shrink: 0;
}

.videos
{
padding-top: 100px;	
width: 400px;
margin-right: 0px;
padding-left: 200px;
margin-bottom: 40px;
z-index: 4;
}

.videos video
{
width: 348px;
}

.photo-couv1
{
height: 400px;
z-index: 5;
padding-top: 50px;
padding-bottom: 50px;
padding-left: 0px;
}

.photo-couv1 img
{
height: 100%;
z-index: 6;
-webkit-transition:1s ease-in-out;
transition:1s ease-in-out;
}
.photo-couv1 img:hover
{
-webkit-transform:scale(2);
transform:scale(2);
margin-top: -120px;
padding-bottom: 0px;
padding-left: 90px;
}

.photo
{
height: 400px;
z-index: 5;
padding-top: 50px;
padding-bottom: 50px;
}
.photo2
{
height: 400px;
z-index: 5;
padding-top: 50px;
padding-bottom: 50px;
}

.photo3
{
height: 400px;
z-index: 5;
padding-top: 50px;
padding-bottom: 50px;
}

.photo img
{
height: 100%;
z-index: 6;
-webkit-transition:1s ease-in-out;
transition:1s ease-in-out;
}
.photo2 img
{
height: 100%;
z-index: 6;
-webkit-transition:1s ease-in-out;
transition:1s ease-in-out;
}

.photo3 img
{
height: 100%;
z-index: 6;
-webkit-transition:1s ease-in-out;
transition:1s ease-in-out;
}

.photo-fin
{
height: 400px;
z-index: 5;
padding-top: 50px;
padding-bottom: 50px;
padding-left: 75px;
}

.photo-fin img
{
height: 100%;
margin-left: 100px;
margin-right: 100px;
margin-top: 0px;
z-index: 6;
-webkit-transition:1s ease-in-out;
transition:1s ease-in-out;
}
.photo img:hover
{
-webkit-transform:scale(2);
transform:scale(2);
padding-bottom: 0px;
margin-top: -120px;
}

.photo2 img:hover
{
-webkit-transform:scale(2);
transform:scale(2);
padding-bottom: 0px;
margin-top: -120px;
}

.photo3 img:hover
{
-webkit-transform:scale(2);
transform:scale(2);
padding-bottom: 0px;
margin-top: -120px;
}

.photo-fin img:hover
{
-webkit-transform:scale(2);
transform:scale(2);
padding-bottom: 0px;
padding-right: 50px;
margin-top: -120px;
}

.tout
{
width: 8290px;
margin-top: -350px;
margin-bottom: -250px;
margin-left: -8143px;
height: 1000px;
-webkit-transition:1s ease-in-out;
transition:1s ease-in-out;
z-index: 2;
}

.photo-couv1:hover ~ .tout
{
background-color: rgb(235,235,235);
z-index: 4;
}

.photo:hover ~ .tout
{
background-color: rgb(235,235,235);
z-index: 4;	
}


.photo2:hover ~ .tout
{
background-color: rgb(235,235,235);
z-index: 4;	
}


.photo3:hover ~ .tout
{
background-color: rgb(235,235,235);
z-index: 4;	
}

.photo-fin:hover ~ .tout
{
background-color: rgb(235,235,235);
z-index: 4;
}

.texte
{
padding-left: 100px;
}

#intro
{

font-size: 18px;
font-weight: 400;
height: 270px;
width: 290px;	
text-align: justify;
margin-top: 100px;
margin-right: 100px;
padding-top: 80px;	
z-index: 2;

}
.texte1
{

padding-left: 100px;
width: 1800px;
margin-top: 0px;
padding-top: 60px;
padding-right: 100px;
font-size: 18px;
color: white;
text-align: justify;
column-count: 3;
column-gap: 55px;
-webkit-column-count: 4;
-webkit-column-gap: 6px;
-moz-column-count: 4;
-moz-column-gap: 55px;
z-index: 2;
}

#complet1
{

height: 330px;
width: 800px;
margin-top: 0px;	
margin-right: -50px;
padding-top: 130px;
padding-right: 150px;
font-size: 18px;
color: white;
text-align: justify;
column-count: 3;
column-gap: 55px;
-webkit-column-count: 3;
-webkit-column-gap: 6px;
-moz-column-count: 3;
-moz-column-gap: 55px;
z-index: 2;
}

#complet2
{
height: 280px;
width: 480px;
margin-top: 70px;	
margin-right: -50px;
padding-top: 100px;
padding-right: 100px;
padding-left: 80px;
font-size: 18px;
color: white;
text-align: justify;
z-index: 2;
}

#complet3
{
height: 400px;
width: 800px;
margin-top: 0px;	
margin-right: -0px;
padding-top: 60px;
padding-right: 150px;
font-size: 18px;
color: white;
text-align: justify;
column-count: 2;
column-gap: 55px;
-webkit-column-count: 2;
-webkit-column-gap: 6px;
-moz-column-count: 2;
-moz-column-gap: 55px;
z-index: 2;
}

em
{
font-weight: bold;
color: rgb(204,102,0);
font-size: 18px;
font-style: normal;
}

#menu ul
{
position: fixed;
text-align: center;
top: 850px;
width: 100%;
color: black;
z-index: 3;
}

#menu li
{	
display: inline;
font-family: quicksandbook;
color: rgb(204,102,0);
font-size: 16px;
margin: 3%;
}

li a
{
text-decoration: none;
color: black;
}

li a:hover
{
color: rgb(204,102,0);
}