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

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

body
{
width: 100%;
margin: 0;
padding: 0;
z-index: 1;
font-family: quicksandbook;
color: rgb(235,235,235);
background-color: rgb(35,35,39);
font-size: 17px;
}

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

}
h1
{
position: fixed;	
width: 100%;
text-align: center;
top: 120px;
font-family: 'Cisgender';
font-size: 80px;
font-weight: 100;
}
h2
{
margin-top: 10px;	
text-align: right;
font-weight: 10;
font-size: 17px;
}


h3
{
font-family: quicksandbook;
color: rgb(235,235,235);
width: 250px;
text-align: right;
font-size: 17px;
font-weight: 10;
}

h4
{
font-family: quicksandbook;
color: rgb(235,235,235);
text-align: right;
font-size: 17px;
font-weight: 10;
}

/*élargir width quand on rajoute du contenu 200px par vide + 300px portrait ou 533 paysage format 4/3* !!!!! mais approximatif à vérifier avec background-color: black*/

#carousel-1
{
margin-top: 417px;	
margin-bottom: 50px;
height: 500px;
font-family: quicksandbook;
font-weight: 1px;
list-style-type: none;	
display: flex;
overflow: visible;
padding-left: 150px;
width : 20300px;
}

.videos
{
flex-grow: 0;
flex-shrink: 0;
height: 520px;
margin-right: 100px;
margin-top: 25px;
text-align: right;

}

.videos video
{
border-style: solid;
border-width: 2px;
border-color: rgb(235,235,235);	
height: 412px;	
}

.livre object
{
flex-grow: 0;
flex-shrink: 0;	
height: 520px;	
width: 800px;
margin-right: 100px;
margin-top: 34px;
border-style: solid;
border-width: 2px;
border-color: rgb(235,235,235);
}

.livre h3
{
width: 800px;	
text-align: right;	
}

.photo
{
flex-grow: 0;
flex-shrink: 0;	
margin-right: 100px;
margin-top: 35px;
height: 500px;	
}

.photo img
{
height: 400px;	
border-style: solid;
border-width: 2px;
border-color: rgb(235,235,235);
}

.photo-fin
{
flex-grow: 0;
flex-shrink: 0;	
padding-right: 100px;
margin-top: 35px;
height: 500px;	
}

.photo-fin img
{
height: 400px;	
}

.bio
{
flex-grow: 0;
flex-shrink: 0;	
height: 75%;
margin-right: 100px;
margin-top: 20px;
width: 400px;
border-style: solid;
border-width: 2px;
border-color: rgb(235,235,235);
padding: 20px;
}

.bio p
{
font-family: quicksandbook;
color: rgb(235,235,235);
text-align: justify;
font-size: 17px;
margin-bottom: 12%;

}

.texte
{
flex-grow: 0;
flex-shrink: 0;	
height: 50%;
margin-right: 100px;
margin-top: 145px;
padding: 20px;
width: 400px;
border-style: solid;
border-width: 2px;
border-color: rgb(235,235,235);
}

.texte p
{
font-family: quicksandbook;
color: rgb(235,235,235);
text-align: justify;
font-size: 17px;
margin-bottom: 12%;
}

.texte h3
{
font-family: quicksandbook;
color: rgb(235,235,235);
text-align: center;
font-size: 17px;
font-weight: normal;
}

#vide-final
{
width: 100px;	
color: white;
}


#menu ul
{
	
height: 200px;
padding-top: 105px;
position: fixed;
text-align: center;
top: 1050px;
width: 100%;
z-index: 1;
}

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

li a
{
text-decoration: none;
color: rgb(235,235,235);

}

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