@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: 'Cisgender';
 src: url('Cisgender.otf');
}

body
{
width: 100%;

margin: 0;
padding: 0;

z-index: 0;

background-color: white;

font-family: quicksandbook;
color: black;
font-size: 16px;
}



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

h1
{

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

img:hover ~ h1
{
color: white;
}

h2
{
margin-top: 20px;	
text-align: center;
font-weight: 10;
font-size: 16px;
}

img:hover ~ h2
{
color: white;
}

#carousel
{
margin-top: 16%;	
padding-right: -200px;
padding-left: 200px;
/*élargir les % quand on rajoute du contenu 200px par vide + 300px portrait ou 533 paysage format 4/3* !!!!! mais approximatif à vérifier avec background-color: black*/
width : 7700px;
z-index: 2;
list-style-type: none;	
display: flex;
overflow: visible;
flex-grow: 0;
flex-shrink: 0;

}

img
{
height: 400px;
-webkit-transition:1s ease-in-out;
transition:1s;
}

.tableau
{
height: 400px;
z-index: 5;
margin-right: 250px;
}

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

.tableau img:hover
{
-webkit-transform:scale(2);
transform:scale(2);
padding-bottom: 110px;
padding-top: 20px;
margin-right: 150px;
margin-left: 150px;
}


.tout
{
/*ci-dessous à adapter quand on ajoute un tableau +325 sur largeur carousel*/
width: 8160px;
margin-top: -250px;
/*ci-dessous à adapter quand on ajoute un tableau + 175 en valeur absolue sur carousel*/
margin-left: -7960px;
height: 950px;
-webkit-transition:1s ease-in-out;
transition:1s ease-in-out;
z-index: 2;
}

.tableau:hover ~ .tout
{
background-color: white;
z-index: 4;	
}

.tableau img:hover + h2
{
display: none;
}

.texte
{
height: 400px;
z-index:3;	
}

.texte a
{
color: rgb(204,102,0);
}



.texte p
{
width: 380px;
height: 270px;
text-align: justify;
margin-top: 60px;
margin-right: 250px;
margin-bottom: 40px;
}

.texte h3
{
width: 380px;
text-align: right;
font-size: 16px;
font-weight: normal;
}

#menu ul
{
position: fixed;
text-align: center;
top: 842px;
width: 100%;
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);
}