@font-face {
font-family: GE Inspira;
src: url('GE_Inspira.ttf')format('truetype');
}

@font-face {
font-family: Times New Roman;
src: url('Times_New_Roman.ttf')format('truetype');
}

body {
  margin-left: 100px;
  margin-right: 100px;
  margin-top: 40px;
  font-family: GE Inspira, verdana, serif;
  color: Black;
  font-size: 18px;
  background: url('fond1.jpeg') repeat;
}

#photos {
	margin-top: 0px;
	margin-left: auto;
	margin-right: auto;
	float: left;
}

/* Various */

.small {
	margin-top: -25px;
	font-size: 50%;
}

.large {
  font-size: 200%;
}

.center {
  text-align: center;
}

h1 {
	/* The title of the page */
	font-family: 'Times New Roman',Helvetica,sans-serif; 
	font-size:1.65em; 
	font-weight: normal;
	color:black; 
	text-decoration:underline; 
	text-underline-position:under;
}

p1 {
  color: #ff0000;
  font-weight: Bold;
}

a{
	color: blue;
	text-decoration:none;
	font-size:0.8em;
}

a:hover{
	color:green;
	text-decoration:none;
}

/* positionnement de la table de l'ensemble des miniatures */

.center table {
  margin-left: auto;
  margin-right: auto;
 position: relative;
}

/*pour espacer miniatures et textes les uns des autres*/
table.index td {
        padding-left: 0px;
        padding-right: 10px;
	padding-bottom: 20px;
}

/*mouvement et ombre sous les images*/
table.index td.thumb img {
  	border: 3px solid #ede5e5;
	position: relative;
	top: 0;
	transition: all 0.3s ease-in;
}

table.index td.thumb a {
	position: relative;
	top: 0;
	transition: all 0.3s ease-in;
}
/*faire changer la couleur de la bordure au passage de la souris*/
table.index td.thumb:hover img {
transform: translate(0px, -8px);
  border: 3px solid #d2d2d2;
}

/*masque ellipse*/
table.index td.thumb a:before {
	content: ' ';
	position: absolute;
	bottom: 0px; 
	left: 0px;
	width: 98%;
	height: 8px;
	background: #909090;
	border-radius: 70% / 80%;
	box-shadow: 0 0 4px #727272;
	z-index: -1;
	transition: all 0.3s ease-in;
}

/*apparition et mouvement du titre sur les images*/
table.index div {
background-color: rgba(0, 0, 0, 0.3);
	top: 100px;
	width: 306px;
	height: 0;
font-family: GE Inspira;
font-size: 16px;
font-weight: bold;
visibility: hidden;
position: absolute;
color: #e6e6e6;
}

table.index td.thumb:hover div {
visibility: visible;
height: auto;
  -webkit-animation-duration: 2s;
  -moz-animation-duration: 2s;
  animation-duration: 2s;
  -webkit-animation-name: glisser;
  -moz-animation-name: glisser;
  animation-name: glisser;
}
@-webkit-keyframes glisser {
  from {
    top: 0px; 
  }
  to {
    top: 100px;
  }
}
@-moz-keyframes glisser {
  from {
    top: 0px;
  }
  to {
    top: 100px;
  }
}
@keyframes glisser {
  from {
    top: 0px; 
  }
  to {
    top: 100px;
  }
}
/*---------FIN------------*/

.desc {
	margin-top: 0px;
		font-family: 'GE Inspira', serif;
		white-space: pre-line;
		text-align: left;
		font-size: 18px;
}