body,
h1,
h2,
h3,
p,
{
	/* A simple page reset */
  margin:0px;
  padding:0px;
}

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

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

@font-face {
	font-family: 'Georgia';
	src: url('../Georgia.ttf')format('truetype');
}

html{
  height:100%
}

body{
  min-height:100%;
  color: #646464;
  font-size:1.2em;
  background: url('fond1.jpg');
  background-attachment: fixed;
  font-family: 'GE Inspira', sans-serif;
}

#gallery{
	/* The pics container */
  width:90%;
  min-height:100%;
  margin:30px auto 30px auto;
  padding-top:20px;
  padding-bottom: 50px;
  display: flex;
  flex-wrap: wrap;
  justify-content:center;
  position:relative;
  overflow:hidden;
}

.pic, 
.pic a{
	/* Each picture and the hyperlink inside it */
  float:left;
  width:180px;
  height:180px;
  margin:10px;
}

.pic{
	/* Styles specific to the pic class */
  border:3px solid #eeeeee;
  box-shadow:8px 8px 10px #807a7a;
}

.pic a{
	/* Specific styles for the hyperlinks */
  text-indent:-999px;
  display:block;
	/* Setting display to block enables advanced styling for links */
}

.info{
  width: 40px;
  height: 40px;
  float:left;
}

h1{
  color:#5b5b5b;
  font-family:'Georgia', sans-serif;
  font-size:38px;
  font-weight: normal;
}

hr{
  background-color:#707070;
  border:none;
  color:#696969;
  margin-top:10px;
  margin-bottom:0px;
  height:1px;
  width:100%;
}

#main{
  min-height:100%;
  margin-left:60px;
  margin-right:60px;
  margin-top:30px;
  margin-bottom:30px
}

a{
  color: red;
  text-decoration:none;
  font-size:0.9em;
}

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

a.retour{
  float:right;
}