@charset 'UTF-8';
@import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,900);
@font-face { 
    font-family: 'georgia';
    src: url('georgiai.ttf') format('truetype');
	font-weight:normal;
	font-style:normal;
	}
@font-face {
    font-family: 'FuturaBK';
    src: url('FtraBk__0.ttf') format('truetype');
	font-weight:normal;
	font-style:normal;
	
}
/*-------------------page d'accueil---------------------*/
html
{
	background-color:white;
}

h1
{
color: #3e3e3e;
}

body
{
	margin:0px;
	padding:0px;
	height:100%;
	width:100%;
	font-family:'FuturaBK';
	font-size:100%;
    color: black; /* Le texte de la page sera noir */
	/*border: 2px solid blue;*/
}


header
{
	/*border: 5px solid #1be62e;*/
}

#titre
{
	font-family: 'georgia';
	font-size: 3em;
}

#zone_du_haut
{
	display: normal;
	margin:0px;
	padding:0px;
	vertical-align:top;
	width:100%;
	height:100%;
	/*border: 2px solid blue;*/
}


#zone_du_haut img
{
	width:100%;
	z-index:2;
}


	
#logo
{
	/*width:100%;*/
	/*position:absolute;*/
	/*padding-top:-200px;*/
	vertical-align:middle;
	text-align: center;
	top:-200px;
	/*border: 3px solid red;*/
	z-index:1;
}


/* ------ Navigation -------- */

nav
{
	font-family:'FuturaBK',sans-serif;
	color: #81b687;
	display: inline-block;
	Font-Weight: Bold;
	/*position:absolute;
	text-align:left;
	top: 260px;
	right: 1380px;
	border: 6px solid red;*/
}

nav ul
{
	margin:5px;
	padding:5px;
	list-style-type: none;
}

nav li
{
	display: inline-block;
	color: #81b687;
}

nav a
{
	color: #81b687;
    text-decoration: none;
}
nav a:hover
{
    color: #949494;
}



/*------------------- site ---------------------*/

section
{
	background:white;
	margin:0px;
	padding:0px;
	display:inline-block;
	vertical-align:top;
	width:100%;
	height:auto;
	/*border: 3px solid #760001;*/
	
}

#bienvenue
{

	/*background-image:url(images/bar.jpg);
	background-repeat:no-repeat;
	background-size: 100%;*/
	width:100%;
	
	/*border: 3px solid #760001;*/
}
div.bordure {
border-bottom:1px solid black;
}

#imgdistances
{

text-align:center;

margin: 0px auto;
	padding:0px;
max-width: 600px;
	height: 100%;
	
}

#centre_text
{
	margin:0px;
	padding:0px;
	text-align: center;
	
	}

#menu_photos
{

	margin:30px 0 0 0;
	padding:0px;
	display:flex;
	/*border: 3px solid #f10fb9;*/
	}
	
#recommandation
{
	text-align: center;
	}
p
{
	margin:0px;
	padding:0px;
	text-align: center;
    text-decoration: none;
	font-size: 0.9em;
}


a.in_link img 
{
	display:inline;
	max-width:100%;
	left:0;
	right:0;
	text-decoration: none;
}

a.in_link:hover img 
{
	display:none;
	text-decoration: none;
}

a.in_link img + img 
{
	display:none;
	text-decoration: none;
}

a.in_link:hover img + img 
{
	display:inline;
	text-decoration: none;
}

/*--------------------------------------------------------------------*/

#mosaic {
  /* Prevent vertical gaps */
 line-height: 0;

  -webkit-column-count: 3;
  -webkit-column-gap:   0px;
  -moz-column-count:    3;
  -moz-column-gap:      0px;
  column-count:         3;
  column-gap:           0px;  
}

#mosaic img {
  /* Just in case there are inline attributes */
  width: 100% !important;
  height: auto !important;
}


@media (max-width: 1200px) {

  #mosaic {
  -moz-column-count:    4;
  -webkit-column-count: 4;
  column-count:         4;
  }
}
@media (max-width: 1000px) {
  #mosaic {
  -moz-column-count:    3;
  -webkit-column-count: 3;
  column-count:         3;
  }
}
@media (max-width: 800px) {

  #mosaic  {
  -moz-column-count:    2;
  -webkit-column-count: 2;
  column-count:         2;
  }
}


@media (max-width: 400px) {
#titre
{
	font-family: 'georgia';
	font-size: 2em;
}

  #mosaic  {
  -moz-column-count:    1;
  -webkit-column-count: 1;
  column-count:         1;
  }
  #imgdistances
{
text-align:center;

margin: 0px auto;
	padding:0px;
max-width: 400px;
	height: 100%;

}
}