@font-face {
	font-family: 'CLOV7';
    src:url(../font/Moon%20Flower.ttf);
    font-weight: normal;
    font-style: normal;
}
@font-face {
	font-family: 'typo';
	src:url(../font/fonnts.com-Kefa-Regular.ttf);
	font-weight:normal;
	font-style:normal;
}
@font-face {
	font-family: 'titre';
	src:url(../font/Moon%20Flower.ttf);
	font-weight:lighter;
}
a {
	text-decoration:none;
	color:#000;
	font-weight:bold;
}
#body {
	position: relative;
	font-weight: 400;
	padding: 1em;
	float: right;
	height: auto;
	width: 100%;
}
h1 {
	font-family: "CLOV7", sans-serif;
	font-size: 3em;
	line-height: 0.8em;
	color: rgb(0,60,80);
	padding-bottom: -1em;
	text-decoration: none;
	font-weight:lighter;
}
h2 {
	font-family: "titre", sans-serif;
	font-size: 3em;
    font-style: ;

	line-height: 1em;
}
h3 {
	font-family: "typo", sans-serif;
	font-size: 1.2em;
	font-weight:900;
	line-height: 1.1em;
	font-weight:lighter;
	color: rgb(0,60,80);
}
h4 {
	font-family: "typo", sans-serif;
	font-size: 1.1em;
	line-height: 1.1em;
	color: rgb(245,142,118);
}
h5 {
	font-family: "typo", sans-serif;
	font-size: 1em;
	font-weight:900;
	line-height: 1.1em;
	font-weight:lighter;
	color: rgb(245,142,118);
}
h6 {
	font-family: "typo", sans-serif;
	font-size: 1.1em;
	line-height: 1.1em;
	color: rgb(0,119,177);
	font-weight:lighter;
}
h7 {
	font-family: "typo", sans-serif;
	font-size: 1.1em;
	font-weight:900;
	line-height: 1.1em;
	font-weight:lighter;
	color: rgb(245,142,118);
}
h8 {
	font-family: "typo", sans-serif;
	font-size: 1em;
	font-weight:900;
	line-height: 1.3em;
	font-weight:lighter;
	color: rgb(0,60,80);
}

.centrer {
	display: grid; /* contexte sur le parent */
  place-items: center
}
.champs {
height: 100px;
width: 500px;
border: 0.8; 
font-family: 'typo', sans-serif;
font-size: 0.9em; 
color:#333; 
}
.champs2 {
height: 20px;
width: 500px;
border: 0.8; 
font-family: 'typo', sans-serif;
font-size: 0.9em; 
color:#333; 
}
#clov7 {
	height: auto;
	position: relative;
	top: 0.4em;
	width: 100%;
	text-align: center;
}
	  #clov7 a:link {
		  color: rgb(0,60,80);
		  font-family: "CLOV7",sans-serif;
		  font-size: 2em;
		  position: relative;
		  text-align: center;
		  text-decoration: none;
	  }
	  #claire a:visited {
		  color: rgb(0,60,80);
		  font-family: "CLOV7",sans-serif;
		  text-decoration: none;
	  }
#zone_menu {
	float: left;
	height: 100%;
	position: relative;
	top: 80px;
	width: 240px;
	z-index: 20;
	text-align: left;
}
	.menu li{
		display:inline;
		list-style-type:none;
		margin-right: 15px;
		margin-left: 50px;
		line-height: 2;
	}
	.menu a {
		color: rgb(248,176,178);
		font-family: "CLOV7",sans-serif;
		font-size: 2.3em;
		font-weight: 400;
		text-align: left;
		text-decoration: none;
	}
	.menu a:hover {
		color: rgb(0,119,177);
	}
.pres {
	padding-top: -5em;
	width:100%;
	float:right;
	text-align:center;
}
.pres2 {
	padding-top: 5em;
	padding-bottom: 2em;
	width: 80%;
	text-align: right;
	margin-right: auto;
	margin-left: auto;
	display: block;
	vertical-align: middle;
}
.imagepres {
	width:48%;
	margin-right:auto;
	margin-left:auto;
	display:block;
}
.legende {
	width:auto;
	height:auto;
    color: #000;   
}
.legende2 {
	width:100%;
	text-align:center;
	height:auto;
    color: #000;   
}		
.cartel {
	width:50%;
	margin-top:3em;
	float:right;
	height:auto;
	margin-right: 5em;
    color: rgb(0,119,177);
    font-size: 1.1em;
    font-style: normal;
    line-height: 1.2em;
    text-align: left;
}	
.cartel2 {
	width:70%;
	margin-top:10em;
	float:right;
	height:auto;
	margin-right: 5em;
    color: #000;
    font-size: 1.1em;
    font-style: normal;
    line-height: 1.2em;
    text-align: left;
}	
strong {
	font-weight:bold;
}
.logo {
	width:25%;
	margin-right:auto;
	margin-left:auto;
	
}

	
sup { 
   vertical-align: super; 
   font-size: 0.8em; 
   line-height: 1em; 
}
p.indent {     
   text-indent: 3em;      
   text-align: justify;     
} 
span.footnote{
	font-size: 0.8em;
}


#zoom {
	margin-left: 245px;	
	text-align: center;
	margin-right: 2em;
}
	  #zoom img{
		  width: auto;
		  max-width: 100%;
		  margin-bottom: 1em;
	  }
#gallery {
  margin-right: 2em;
  line-height: 1;
   
  -webkit-column-count: 3;
  -webkit-column-gap:   1em;
  -moz-column-count:    3;
  -moz-column-gap:      1em;
  column-count:         3;
  column-gap:           1em;  
}
	  #gallery img {
		/* Just in case there are inline attributes */
		width: 100% !important;
		height: auto !important;
		margin-bottom: 1em;
	  }	  
.photo:hover {
	opacity:0;
}
.texte {
	font-family:"typo";
	text-align:center;
	line-height:1.2em;
	font-size:0.8em;
}
.conteneur .texte {
	position:absolute;
	left:45%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: -1; // texte passe derrière l'image
}
	.conteneur {
	position: relative; 
    height:auto;
    width:auto;
	border:none;
}
#container {
	height: auto;
	position: relative;
	
}
    .wrap {
      overflow: hidden;
    }
    .box {
      float: left;
      position: relative;
      width: 20%;
      padding-bottom: 20%;
	  
    }
	.boxInner {
      position: absolute;
      left: 10px;
      right: 10px;
      top: 10px;
      bottom: 10px;
      overflow: hidden;
    }
    .boxInner img {
      width: 100%;
    }
    .boxInner .titleBox {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	margin-bottom: -100px;
	background: #999;
	background: rgba(0, 0, 0, 0.6);
	color:#FFF;
	padding:10px;
	font-family: "typogras",sans-serif;
	font-size: 0.9em;
	font-style:normal;
	font-weight: 300;
	text-align: center;
	-webkit-transition: all 0s ease-out;
	-moz-transition: all 0s ease-out;
	-o-transition: all 0s ease-out;
	transition: all 0s ease-out;
    }
	   
    body.no-touch .boxInner:hover .titleBox, body.touch .boxInner.touchFocus .titleBox {
      margin-bottom: 0;
    }
    @media only screen and (max-width : 480px) {
      /* Smartphone view: 1 tile */
      .box {
        width: 100%;
        padding-bottom: 100%;
      }
    }
    @media only screen and (max-width : 650px) and (min-width : 481px) {
      /* Tablet view: 2 tiles */
      .box {
        width: 50%;
		padding-bottom: 50%;
      }
    }
    @media only screen and (max-width : 1050px) and (min-width : 651px) {
      /* Small desktop / ipad view: 3 tiles */
      .box {
        width: 33.3%;
        padding-bottom: 33.3%;
      }
    }
    @media only screen and (max-width : 1290px) and (min-width : 1051px) {
      /* Medium desktop: 4 tiles */
      .box {
        width: 25%;
        padding-bottom: 25%;
      }
    }

	  }