body, html {
	height: 100%;
	width:100%;
	margin: 0;
	padding: 0;
	background-size: cover;
  	background-position: center;
	background-repeat: no-repeat;
	font-family: 'Josefin Sans', sans-serif;
	background-image:none;
}

H1 {display: block;font-size: 2em;margin: 0;}
H2 {display: block;font-size: 1.6em; color: grey;margin: 0;}
H3 {color: grey;font-size: 1.3em;text-align: center;font-style: italic;}
H4 {color: grey;font-size: 1.3em;text-align: center;}
.red{color: #990000;}
.grey{color: grey;}
p{display: block;font-weight: 100;margin: 0;}

.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-top: 5%;
  width: 70%;
}
.legendePrincipale {
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-top: 0;
  width: 70%;
}
.cadreParent {
	margin-top:6%;
	display: flex;
	justify-content: center;
	align-items: center;
}
.contenu {
  position: relative;
  width: 60%;
  height: 60%;
}
.aspect-ratio {
  width: 60%;
  height: 60%;
}
.legende{
width: 60%;
height: 24px;
line-height: 24px;
margin-left: 20%;
text-align: center;
}
.contenuBio{
width: 50%;
font-size: 1.7em;
text-align: justify;
}

.nom{
	position: fixed;
	z-index: 90;
	height: 50px;
	line-height: 50px;
	width: 50%;
	margin-left: 25%;
	text-align: center;
	top: 0;
	background: none;
}
#caption{
	position: fixed;
	z-index: 90;
	height: 36px;
	line-height: 36px;
	width: 50%;
	margin-left: 25%;
	color: grey;
	text-align: center;
	top: 0;
	background: none;
}
.flecheDroite{
	position: fixed;
	top: 48%;
	left: 92%;
	color: #B0BEC5;
	z-index: 100;
}
.flecheGauche{
	position: fixed;
	top: 48%;
	left: 8%;
	color: #B0BEC5;
	z-index: 100;
}

.flecheDroite:hover{
color: red;
cursor: pointer;
}

.flecheGauche:hover{
color: red;
cursor: pointer;
}

#bottom_line{
	position: fixed;
	z-index: 90;
	height: 36px;
	line-height: 36px;
	width: 100%;
	color: black;
	text-align: center;
	font-size: 1em;
	bottom: 0;
	background: none;
	opacity: 0.65;
}

/* The sidepanel menu */
.sidepanel {
  height: 100%; /* Specify a height */
  width: 0; /* 0 width - change this with JavaScript */
  position: fixed; /* Stay in place */
  z-index: 100; /* Stay on top */
  top: 0;
  left: 0;
  background-color: #111; /* Black*/
  opacity: 76%;
  overflow-x: hidden; /* Disable horizontal scroll */
  padding-top: 60px; /* Place content 60px from the top */
  transition: 0.5s; /* 0.5 second transition effect to slide in the sidepanel */
}

/* The sidepanel links */
.sidepanel a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
  transition: 0.4s;
}

/* When you mouse over the navigation links, change their color */
.sidepanel a:hover {
  color: #f1f1f1;
}

/* Position and style the close button (top right corner) */
.sidepanel .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}

/* Style the button that is used to open the sidepanel */
.openbtn {
  font-size: 20px;
  cursor: pointer;
  background-color: #595059;
  color: white;
  padding: 10px 15px;
  border: none;
}

.openbtn:hover {
  background-color: #444;
}


/* Hide the images by default */
.mySlides {
  display: none;
}

/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 2s;
  animation-name: fade;
  animation-duration: 2s;
}

@-webkit-keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}