html, body {
  padding: 3%;
  }

body {
 background-color: #fff; 
 font-family: 'Open Sans', sans-serif;
 text-transform: uppercase;
 font-size: 75%;
 color: #000;
  }

h1 {
 font-size: 200%; 
 color: #000; 
 text-align: center;
 }

h2 {
 font-size: 120%; 
 }

p,ul,li,td {
 font-weight: 400;
 outline-style:none;
 }

a:link {
 color: #000;
 text-decoration: none;
 outline-style:none;
 }

a:visited {
 color: #000;
 outline-style:none;
 }

a:hover {
 color: #a00;
 text-decoration: none;
}

a:active, a:focus {
 color: gray;
 outline-style:none;
}

#infos {
  margin-right: auto;
  font-size: 100%;
  padding-bottom: 1%;
}

.bouton
{
color:#000;
font-size:24px;
cursor:pointer;
}
.bouton:hover
{
text-decoration:underline;
}

#menu
{
height: 60px;
width:1200px;
background:#fff;
border-bottom: solid 0px gray;
}

#texte
{
position: fixed;
top:100px;
left:10px;
width:300px;
background:#fff;
color: #000;
padding: 10px;
}

#identite
{
float: left;
width:250px;
padding: 10px;
padding-left: 60px;
}

#blocImage
{
padding: 10px;
}

#navig
{
float: right;
width:300px;
padding: 10px;
}


#retour
{
display: flex;
justify-content: center;
align-items: center;
//display: inline-block;
//display: block;
//position: absolute;
//top: 50%; 
//left: 40%;
//margin-left: auto;
//margin-right: auto;
background:#fff;
//padding: 5px;
//display: inline-block;
//border: 1px dotted #000;
//visibility: hidden;
opacity: 0;
z-index: 6;
}


.cadreThumb
{
background-size: cover;
background-position: center;
background-repeat: no-repeat; 
display: inline-block;
//border: 1px dotted #000;
margin: 0.4%; 
//max-height: 300px;
//height: 230px;
//width: 330px;
vertical-align: bottom;
}

.thumb
{
//display: inline-block;
//border: 1px solid #ccc;
//margin: 40px;
//padding: 30px;
//height: 250px;
//max-width: auto;
//vertical-align: baseline;
//box-shadow: 10px 10px 30px #eee;
//filter: grayscale(100%);
}


.thumb:hover
{
opacity: 1;
//filter: grayscale(100%);
}



.titreThumb
{
display: inline-block;
visibility: hidden;
height: 130px;
width: 290px;
background-color: #eee;
//border: 1px solid #ccc;
//padding-top: 60px;
padding: 100px 20px 0 20px;
font-size: 120%;
text-align: center;
vertical-align: middle;
//position: relative;
//top: -200px;
opacity: 0;
//max-width: 200px;


}

.titreThumb:hover
{
-webkit-animation-name: example; /* Safari 4.0 - 8.0 */
-webkit-animation-duration: 3s; /* Safari 4.0 - 8.0 */
-webkit-animation-direction: alternate;
animation-name: example;
animation-duration: 1s;
animation-iteration-count: 2;
animation-direction: alternate;

}


/* Safari 4.0 - 8.0 */
@-webkit-keyframes example {
  from {opacity: 0;}
  to {opacity: 1;}
}

/* Standard syntax */
@keyframes example {
  from {opacity: 0;}
  to {opacity: 1;}
}


.fadeOut
{
-webkit-animation-name: fadeout; /* Safari 4.0 - 8.0 */
-webkit-animation-duration: 7s; /* Safari 4.0 - 8.0 */
-webkit-animation-direction: normal;
animation-name: fadeout;
animation-duration: 7s;
animation-iteration-count: 1;
animation-direction: normal;
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes fadeout {
  from {opacity: 0.8;}
  to {opacity: 0;}
}

/* Standard syntax */
@keyframes fadeout {
  from {opacity: 0.8;}
  to {opacity: 0;}
}





//LightBox

.row > .column {
  padding: 0 8px;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Create four equal columns that floats next to eachother */
.column {
  float: left;
  width: 25%;
}

/* The Modal (background) */
.modal {
  display: none;
  position: fixed;
  z-index: 1;
  padding-top: 100px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: #fff;
}

/* Modal Content */
.modal-content {
  position: relative;
  background-color: #fff;
  margin: auto;
  padding: 7%;
  //max-width: 800px;
  //max-height: 800px;
  //max-width: 1200px;
  text-align: center;
}

.modal-content img{
  margin-bottom: 10%;
  margin-bottom: 10%;
  margin-right: auto;
  margin-left: auto;	
  //max-width: 400px;
  max-width: 60%;
  max-height: 30%;
  //border: solid 1px #eee;
  //max-width: 1200px;
  //box-shadow: 10px 10px 30px #ddd;
  //filter: saturate(90%);
}



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

.mySlides img {
display: block;
margin: auto;
width: 536px;
}