@font-face {
    font-family: 'd_day_stencilregular';
    src: url('fonts/d_day_stencil-webfont.eot');
    src: url('fonts/d_day_stencil-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/d_day_stencil-webfont.woff2') format('woff2'),
         url('fonts/d_day_stencil-webfont.woff') format('woff'),
         url('fonts/d_day_stencil-webfont.ttf') format('truetype'),
         url('fonts/d_day_stencil-webfont.svg#d_day_stencilregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'ciclegordita';
    src: url('fonts/cicle_gordita-webfont.eot');
    src: url('fonts/cicle_gordita-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/cicle_gordita-webfont.woff2') format('woff2'),
         url('fonts/cicle_gordita-webfont.woff') format('woff'),
         url('fonts/cicle_gordita-webfont.ttf') format('truetype'),
         url('fonts/cicle_gordita-webfont.svg#ciclegordita') format('svg');
    font-weight: normal;
    font-style: normal;

}


/* Custom CSS
 * --------------------------------------- */
body{
	font-family: arial,helvetica;
	color: #333;
	color: rgba(0,0,0,0.5);
}
.wrap{
	margin-left: auto;
	margin-right: auto;
	width: 960px;
	position: relative;
}
h1{
	font-size: 6em;
}
p{
	font-size: 1em;
}
.intro {
	width: 30%;
	margin: 0 auto;
	font-size: 1em;
	text-align:justify;
	float:left;
	margin-left:20%;}


.section{
	text-align:center;
}
#menu li {
	display:inline-block;
	margin: 10px;
	color: #fff;
	background:#333;
	background: rgba(0,0,0, 0.5);
	-webkit-border-radius: 10px;
            border-radius: 10px;
}
#menu li.active{
	background:#fff;
	background: rgba(255,255,255, 0.5);
	color: #fff;
}
#menu li a{
	text-decoration:none;
	color: #fff;
}
#menu li.active a:hover{
	background:#fff;
	background: rgba(255,255,255, 0.5);
	color: #fff;
}
#menu li:hover{
	background: rgba(0,0,0, 0.8);
}
#menu li a,
#menu li.active a{
	padding: 9px 18px;
	display:block;
}
#menu li.active a{
	color: #333;
}
#menu{
	position:fixed;
	top:0;
	left:0;
	height: 40px;
	z-index: 70;
	width: 40%;
	padding: 0;
	margin:0;
}

h1{
		font-family:ciclegordita;
		font-size:5em;
		color:#333;}

#section0 {background: url(img/fond2.png) no-repeat center;}		
#section2 {background: url(img/fond3.png) no-repeat center;}		
#section1 {background: url(img/fond4.png) no-repeat bottom right;}		

.logo {width:271px;height:75px;margin-left:auto; margin-right:auto;top:0%;}
		
#section0 .auteur {
		margin-top:2%;
		margin-left:auto;
		margin-right:auto;
		width:50%;}		
		
#section0 .auteur h3{
		font-family:d_day_stencilregular;
		font-size:3em;
		color:rgba(255, 255, 255, 0.5);
		border-bottom: 3px dashed rgba(255, 255, 255, 0.5);
		border-top: 3px dashed rgba(255, 255, 255, 0.5);
		}

#section0 .titre {
		width:50%;
		margin-left:3%;
		margin-top:10%;
		text-align:left;
		float:left;}

.edito {
		font-size:1.4em; 
		background-color:#869e6d; 
		padding: 5px 20px 5px 10px; 
		color:#fff;}


.sommaire	{
		width:20%;
		margin-left:3%;
		float:right;}	

.titre {
		width:80%;
		margin-left:10%}

.titre  h1{
		font-size:4em;
		color:#333;
		line-height:0.1;}
		
.titre  h3{
		font-family:d_day_stencilregular;
		font-size:4em;
		color:red;
		}		
		
.contenu-haut {
		width:80%;
		margin-top:3%;
		margin-left:16%;}
	
.liensdivers {
		text-align:left;
		}
	
.liensdivers a{
		color:#333;
		}
		
.liensdivers img{
		float:left;
		margin:5px;
		margin-right:15px;	
		margin-left:35px;	
		width:40px;
		}
	

.coord p{
	width: 50%;
	margin: 0 auto;
	font-size: 1.2em;
	text-align:justify;;
}


#section3 a { 
		text-decoration:underline;
		color:rgba(0, 0, 0, 0.5);
		text-align:justify;
		}
		
/*Hover Effect*/
.view {
   width: 200px;
   height: 200px;
   margin: 10px;
   border: 3px solid #fff;
   overflow: hidden;
   position: relative;
   text-align: center;
   -webkit-box-shadow: 1px 1px 2px #e6e6e6;
   -moz-box-shadow: 1px 1px 2px #e6e6e6;
   box-shadow: 1px 1px 2px #e6e6e6;
   cursor: default;
   
}
.view .mask,.view .content {
   width: 200px;
   height: 200px;
   position: absolute;
   overflow: hidden;
   top: 0;
   left: 0;
}
.view img {
   display: block;
   position: relative;
   margin-left:-12px;

}
.view h2 {
   text-transform: uppercase;
   color: #fff;
   text-align: center;
   position: relative;
   font-size: 17px;
   padding: 10px;
   background: rgba(0, 0, 0, 0.8);
   margin: 20px 0 0 0;
}
.view p {
   font-family: Georgia, serif;
   font-style: italic;
   font-size: 12px;
   position: relative;
   color: #fff;
   padding: 10px 20px 20px;
   text-align: center;
}
.view a.info {
   display: inline-block;
   text-decoration: none;
   padding: 7px 14px;
   background: #000;
   color: #fff;
   text-transform: uppercase;
   -webkit-box-shadow: 0 0 1px #000;
   -moz-box-shadow: 0 0 1px #000;
   box-shadow: 0 0 1px #000;
}
.view a.info: hover {
   -webkit-box-shadow: 0 0 5px #000;
   -moz-box-shadow: 0 0 5px #000;
   box-shadow: 0 0 5px #000;
}

.view-fifth img {
   -webkit-transition: all 0.3s ease-in-out;
   -moz-transition: all 0.3s ease-in-out;
   -o-transition: all 0.3s ease-in-out;
   -ms-transition: all 0.3s ease-in-out;
   transition: all 0.3s ease-in-out;
}
.view-fifth .mask {
   background-color: red;
   -webkit-transform: translateX(-200px);
   -moz-transform: translateX(-200px);
   -o-transform: translateX(-200px);
   -ms-transform: translateX(-200px);
   transform: translateX(-200px);
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
   -webkit-transition: all 0.3s ease-in-out;
   -moz-transition: all 0.3s ease-in-out;
   -o-transition: all 0.3s ease-in-out;
   -ms-transition: all 0.3s ease-in-out;
   transition: all 0.3s ease-in-out;
}
.view-fifth h2 {
   background: rgba(255, 255, 255, 0.5);
   color: #000;
   -webkit-box-shadow: 0px 1px 3px rgba(19,158,61,0.6);
   -moz-box-shadow: 0px 1px 3px rgba(19,158,61,0.6);
   box-shadow: 0px 1px 3px rgba(19,158,61,0.6);
}
.view-fifth p {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   color: #fff;
   -webkit-transition: all 0.2s linear;
   -moz-transition: all 0.2s linear;
   -o-transition: all 0.2s linear;
   -ms-transition: all 0.2s linear;
   transition: all 0.2s linear;
}
.view-fifth:hover .mask {
   -webkit-transform: translateX(0px);
   -moz-transform: translateX(0px);
   -o-transform: translateX(0px);
   -ms-transform: translateX(0px);
   transform: translateX(0px);
}
.view-fifth:hover img {
   -webkit-transform: translateX(200px);
   -moz-transform: translateX(200px);
   -o-transform: translateX(200px);
   -ms-transform: translateX(200px);
   transform: translateX(200px);
}
.view-fifth:hover p {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
}


.close {
    float: right;
    font-size: 21px;
    font-weight: bold;
    line-height: 1;
    color: #000;
    text-shadow: 0px 1px 0px #FFF;
    opacity: 0.2;