@charset "utf-8";
/* CSS Document */

@import url('https://fonts.googleapis.com/css?family=Heebo:100,300,400,500,700');
		
		
		body {
	font-family: 'Heebo', sans-serif;
	font-size:16px;
	line-height:1.2em;
	background-color:#FFF;
	margin : 15px;
	-webkit-hyphens: auto;
 	-moz-hyphens: auto;
 	-ms-hyphens: auto;
 	-o-hyphens: auto;
	 hyphens: auto;
}



#content {
	width:1170px;
	
	margin-left:auto;
	margin-right:auto;
	margin-top:15px;
	margin-bottom:0px;
	padding:15px;
	background-color:#FFF;
	
	
	
}
		
.vignette {
	width: 360px;
	padding: 15px;
	position: relative;
	display: inline-block;
	float:left;
}

.vignette2{
	
	
	padding: 0px;
	margin: 0px;
	position: relative;
	display: inline-block;
	float:left;
}

.vignette .img-top {
        display: none;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 99;
    }
    .vignette:hover .img-top {
        display: inline;
    }

.vignette2 .img-top {
        display: none;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 99;
    }
    .vignette2:hover .img-top {
        display: inline;
    }


.texteVignette1 {
	
	
	height:120px;
	overflow-y: scroll;
}
		
h2 {
	font-family: 'Heebo', sans-serif;
	text-align:left;
	font-weight:300;
	font-size:21px;
	color:black;
	margin: 0px;
	margin-bottom:5px;
	
	}
	
h1 {
	font-family: 'Heebo', sans-serif;
	font-weight:300;
	font-size:28px;
	text-align: center;
	margin-top:5px;
	margin-bottom:5px;
	color:#AA0002;
	
	}


h3 {
	font-family: 'Heebo', sans-serif;
	font-weight:300;
	font-size:24px;
	text-align: center;
	margin-top:5px;
	margin-bottom:5px;
	color:#AA0002;
	
	}
	
.big {
	font-size:32px;
	text-align:center;
	margin-top: 50px;
}

.big1{
	font-size: 28px;
}

.big2{
	font-size: 36px;
}

h4 {
	font-family: 'Heebo', sans-serif;
	text-align:right;
	font-weight:500;
	font-size:12px;
	color:#444;
	margin-top:5px;
	margin-bottom:5px;
	
	}

p {
	font-family: 'Heebo', sans-serif;
	font-size:18px;
	line-height:1.3em;
	font-weight:300;
	margin-top:0em;
	margin-bottom: 0;
	text-align:justify;
	
	}

.bold {
		font-weight:500;
}

.boldFin {font-weight:500;
}



#content a {
	color:#517331;
	text-decoration:none;
}

#content a:hover {
	animation: color-change4 1s;
	color: rgb(0,0,0,1);
	font-weight:500;
}

.small1 {
	font-size: 80%;
	font-weight:300;
}

.small2 {
	font-size: 16px;
	font-weight:300;
	text-align: right;
}

.small3 {
	font-size: 16px;
	font-weight:300;
	line-height: 1 em;
}

.small3c {
	font-size: 16px;
	font-weight:300;
	line-height: 1 em;
	text-align: center;
}

.small4 {
	
	font-size : 12px;
}


.small4c {
	
	font-size : 12px;
	text-align: center;
}


.hidden {
	display: none;
	position: absolute;
	width:320px;
	top: 240px;
	left: 15px;
	background-color: white;
	padding: 20px;
	line-height: 1.1em !important; 
	box-shadow: 0 0 3px 2px rgba(0, 0, 0, 0.25);
	animation: color-change5 0.5s;
}

.hidden2 {
	display: none;
	position: absolute;
	width:320px;
	top: 260px;
	left: 15px;
	background-color: white;
	padding: 20px;
	line-height: 1.1em !important; 
	box-shadow: 0 0 3px 2px rgba(0, 0, 0, 0.25);
	animation: color-change5 0.5s;
}

.hidden3 {
	display: none;
	position: absolute;
	width:460px;
	top: 260px;
	left: -55px;
	background-color: white;
	padding: 20px;
	line-height: 1.1em !important; 
	box-shadow: 0 0 3px 2px rgba(0, 0, 0, 0.25);
	animation: color-change5 0.5s;
	

}

.hidden4 {
	display: none;
	position: absolute;
	width:460px;
	top: 240px;
	left: -55px;
	background-color: white;
	padding: 20px;
	line-height: 1.1em !important; 
	box-shadow: 0 0 3px 2px rgba(0, 0, 0, 0.25);
	animation: color-change5 0.5s;

}

.hidden5 {
	display: none;
	position:absolute;
	width:460px;
	
	left: -55px;
	background-color: white;
	padding: 20px;
	line-height: 1.1em !important; 
	box-shadow: 0 0 3px 2px rgba(0, 0, 0, 0.25);
	animation: color-change5 0.5s;
	

}







.show1:hover .hidden {
		
		display: block;
		
		z-index: 100;
		

	}

.show1:hover .hidden2 {
		
		display: block;
		
		z-index: 100;
		

	}

.show1:hover .hidden3 {
		
		display: block;
		
		z-index: 100;
		

	}

.show1:hover .hidden4 {
		
		display: block;
		
		z-index: 100;
		

	}


.show1:hover .hidden5 {
		
		display: block;
		
		z-index: 100;
		

	}

.smallCaps {
	font-variant: small-caps;
	font-size:120%;
}

.right {text-align: right;}

.center{
	
	text-align: center;
}

.diapCenter {
	
	margin-left: auto;
	margin-right: auto;
	width: 800px;
}

.diapCenter640 {
	
	margin-left: auto;
	margin-right: auto;
	width: 480px;
}

.approche {
	letter-spacing: 0.15em;
	color: #333; 
}

.approche2 {
	letter-spacing: 0.05em;
	color: #333; 
}

#menu a {
	color:#A6B598;
	text-decoration:none;
}

#menu a:hover {
	animation: color-change3 1s;
	color: #363636;
}

#menu li.cv {
	
	font-size: 20px;
	font-weight:300;
	padding-left: 10px;
}




#menu {
	position: fixed;
	right:20px;
	
}

#menu li {
margin: 0;
padding: 0;
float: left;
}

#menu ul {
	list-style-type: none;
	margin: 0;
	padding: 0;

}



#menu2 {
	position: fixed;
	
	background-color: white;
	z-index: 1000;
	box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.2);
	font-size: 14px;
}

#menu2 li {
list-style: none !important;
margin: 0;
padding: 0;
padding-left: 15px;
padding-right: 15px;
}

#menu2 ul {
	list-style-type: none;
	margin: 0;
	padding: 0;

}

#menu2 ul li {
	float: left;
	
}

#menu2 ul li a {
	color:black;
	text-decoration: none;
}

#menu2 li a:hover {
	animation: color-change2 0.5s;

	color:#517331;
}

#menu2 ul li ul { 
	
	display:none;
}

#menu2 ul li:hover ul { 
z-index:99999;
display:list-item !important;
position:absolute;
	background-color: white;

	box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.2);
	
	
}

#menu2 ul li:hover ul li {
float:none;
	padding: 1px;
	margin-left: 6px;
	margin-right: 6px;
	margin-bottom: 4px;
}

#menu2 ul ul a:hover {
	

	background-color:#A6B598;
}


#divcenter {
	margin-left: auto;
	margin-right: auto;
}

@keyframes color-change2 {
  0% { color: rgb(0,0,0,1); }
  100% { color:#517331; }
		}

@keyframes color-change3 {
  0% { color:#A6B598; }
  100% { color: #363636; }
		}

@keyframes color-change4 {
  0% { color:#517331; }
  100% { color: #363636; }
		}

@keyframes color-change5 {
  0% { filter:alpha(opacity=0); 
	opacity:0; }
  100% { filter:alpha(opacity=100); 
	opacity:1; }
		}

.current {
	background-color: #A6B598;
}

.clearfloat { /* cette classe doit être placée pour un élément div ou break et doit être l'élément final avant la balise de fin d'un conteneur qui doit contenir entièrement un élément flottant */
	clear:both;

        height:0;

        font-size: 1px;

        line-height: 0px;
    }


.fas {
	margin-left: 10px;
	font-size: 21px;
}





       /* jssor slider bullet navigator skin 01 css */

        /*

        .jssorb01 div           (normal)

        .jssorb01 div:hover     (normal mouseover)

        .jssorb01 .av           (active)

        .jssorb01 .av:hover     (active mouseover)

        .jssorb01 .dn           (mousedown)

        */

        .jssorb01 {

            position: absolute;

        }

        .jssorb01 div, .jssorb01 div:hover, .jssorb01 .av {

            position: absolute;

            /* size of bullet elment */

            width: 12px;

            height: 12px;

            filter: alpha(opacity=70);

            opacity: .7;

            overflow: hidden;

            cursor: pointer;

            border: #000 1px solid;

        }

        .jssorb01 div { background-color: gray; }

        .jssorb01 div:hover, .jssorb01 .av:hover { background-color: #d3d3d3; }

        .jssorb01 .av { background-color: #fff; }

        .jssorb01 .dn, .jssorb01 .dn:hover { background-color: #555555; }



        /* jssor slider arrow navigator skin 03 css */

        /*

        .jssora03l                  (normal)

        .jssora03r                  (normal)

        .jssora03l:hover            (normal mouseover)

        .jssora03r:hover            (normal mouseover)

        .jssora03l.jssora03ldn      (mousedown)

        .jssora03r.jssora03rdn      (mousedown)

        */

        .jssora03l, .jssora03r {

            display: block;

            position: absolute;

            /* size of arrow element */

            width: 55px;

            height: 55px;

            cursor: pointer;

            background: url('../img/a03.png') no-repeat;

            overflow: hidden;

        }

        .jssora03l { background-position: -3px -33px; }

        .jssora03r { background-position: -63px -33px; }

        .jssora03l:hover { background-position: -123px -33px; }

        .jssora03r:hover { background-position: -183px -33px; }

        .jssora03l.jssora03ldn { background-position: -243px -33px; }

        .jssora03r.jssora03rdn { background-position: -303px -33px; }