*{padding: 0; margin: 0; position: relative;}
body{width: 100%; height: 100%; zoom: 1; min-width: 1000px; /*overflow: hidden; /*background: url(../img/bg.jpg) repeat top left; background-size: 100%;*/}
p, a, li, h2{font-family: "helvetica_regular", sans-serif; font-size: 13px; letter-spacing: 1px;}

ul{list-style-type: none; display: block; overflow: hidden;}
a{text-decoration: none; color: inherit;}
a img{border: none; outline: none;}

::selection {
	background: #c9f2f9; /* Safari */
	}
::-moz-selection {
	background: #c9f2f9; /* Firefox */
}

.two-cols, .three-cols, .five-cols{display: block; /*overflow: hidden;*/}
.col-one, .col-two, .col-three, .col-four, .col-five{float: left; overflow: hidden;}

.loader{position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #81d2dd; z-index: 10; overflow: hidden;}
.loader .progress_bar{position: absolute; top: 50%; left: 0; width: 0%; height: 1px; background: #fff;}
.loader p{font-family: "helvetica_ultralight", sans-serif; font-size: 42px; position: absolute; top: 50%; left: 50%; margin-top: 107px; margin-left: -275px; background: #81d2dd; padding: 0 20px; color: #fff;}
.loader img{position: absolute; top: 50%; left: 50%; margin-top: -53px; margin-left: -150px; background: #81d2dd; padding: 0 20px; width: 300px;}
.loader span{font-family: "helvetica_ultralight", sans-serif; font-size: 24px; font-style: italic; position: absolute; top: 50%; left: 50%; margin-top: 156px; margin-left: -66px; color: #fff; padding: 0 20px;}

#languette{width: 18.9%; position: absolute; top: -1000px; left: 50%; margin-left: -9.45%; z-index: 2;}

#menu{line-height: 68%; padding-top: 11.1%; z-index: 1;}
#menu .absolute{top: auto; bottom: 2%;}
#menu ul{width: 100%; height: 100%;}
#menu ul li{float: left; width: 21.5%; display: block; text-align: center;}
#menu ul li.middle{width: 14%;}
#menu ul li a{color: #fff; font-family: "helvetica_light", sans-serif;}

.absolute{position: absolute; top: 0; left: 0; width: 100%;}
.bg{width: 100%; height: auto;}

#content{display: block; overflow: hidden; position: relative;}
#content, #footer .content{width: 88.6%; margin: auto;}
#content .three-cols{margin: auto;}
#content .three-cols .col-one, #content .three-cols .col-three{width: 39.24%;}
#content .three-cols .col-two{width: 21.52%;}
#content .three-cols h2{font-family: 'Arial', sans-serif; font-size: 30px; color: #000; text-align: center; text-transform: uppercase; line-height: 18px; height: 82px;}
#content .three-cols .col-one h2, #content .three-cols .col-three h2{padding-top: 12%;}
#content .three-cols .col-two h2{padding-top: 22%;}
#content .three-cols h2 span{font-family: 'helvetica_light', sans-serif; font-size: 10px; color: #000; text-align: center;}

#content .three-cols .col-one .nav .two-cols p, #content .three-cols .col-three .nav .two-cols p{font-family: "helvetica_light", sans-serif; font-size: 20px;}
#content .three-cols .col-one .nav .two-cols p span, #content .three-cols .col-three .nav .two-cols p span{font-family: "helvetica_ultralight", sans-serif;}
#content .three-cols .col-one .nav .col-one, #content .three-cols .col-one .nav .col-two, #content .three-cols .col-three .nav .col-one, #content .three-cols .col-three .nav .col-two{cursor: pointer;}
#content .three-cols .col-one .nav .col-one .bg, #content .three-cols .col-one .nav .col-two .bg, #content .three-cols .col-three .nav .col-one .bg, #content .three-cols .col-three .nav .col-two .bg{width: 36.6%;}

#content .three-cols .col-one .two-cols, #content .three-cols .col-three .two-cols{width: 100%; margin: 0 auto;}
#content .three-cols .col-three .two-cols{margin: 40px auto 0 auto;}
#content .three-cols .col-one .two-cols .col-one, #content .three-cols .col-one .two-cols .col-two, #content .three-cols .col-three .two-cols .col-one, #content .three-cols .col-three .two-cols .col-two{width: 50%; text-align: center; background: transparent;}
#content .three-cols .col-one .picto .three-cols, #content .three-cols .col-three .three-cols{width: 63%;}
#content .three-cols .col-one .picto .three-cols .col-one, #content .three-cols .col-one .picto .three-cols .col-two, #content .three-cols .col-one .picto .three-cols .col-three, #content .three-cols .col-three .three-cols .col-one,  #content .three-cols .col-three .three-cols .col-two,  #content .three-cols .col-three .three-cols .col-three{width: 33%; background: transparent; text-align: center;}
#content .three-cols .col-one .picto .two-cols, #content .three-cols .col-three .picto .two-cols{width: 40%; margin: 0 auto;}
#content .three-cols .col-one .picto .two-cols .col-one, #content .three-cols .col-one .picto .two-cols .col-two, #content .three-cols .col-three .picto .two-cols .col-one,  #content .three-cols .col-three .picto .two-cols .col-two{width: 50%; background: transparent; text-align: center;}
#content .three-cols .col-one .picto, #content .three-cols .col-three .picto{margin: 2% 0 4% 0;}

#content .three-cols .col-two h2{height: 55px;}

#content .xavier p{text-align: center; font-family: 'helvetica_regular', sans-serif; font-size: 13px; margin: 5px 0;}
#content .xavier img{display: block; margin: auto;}
#content .xavier img.picto_xavier{width: 5.9%; margin: 0 auto 2% auto;}
#content .xavier img.logo{width: 23.8%;}
#content .xavier img.schema, #content .xavier img.formations{width: 81.1%;}

#content .list-mission li{color: #424242; font-family: "helvetica_light", sans-serif; font-size: 27px; text-align: center; width: 100%; background: #f5f7f8; margin: 9% 0 0 0; line-height: 27px;}

.slide{width: 200%; display: block; overflow: hidden;}
.slide .slide-one, .slide .slide-two{width: 50%; float: left;}

.desc{width: 70%; margin: auto;}
.desc p{font-family: 'helvetica_regular', sans-serif; font-size: 17px; color: #424242; padding: 10% 0;}
.desc .two-cols .col-one, .desc .two-cols .col-two{width: 40% !important;}
.desc .two-cols .col-one{margin-right: 20%;}
.desc .two-cols p{font-family: 'helvetica_light', sans-serif; font-size: 14px; color: #424242; text-align: left;}

.nav_interne .two-cols{width: 5% !important; margin: 10% auto 0 auto !important;}
.nav_interne .two-cols .col-one, .nav_interne .two-cols .col-two{width: 40% !important;}
.nav_interne .two-cols .col-one img, .nav_interne .two-cols .col-two img{cursor: pointer;}
.nav_interne .two-cols .col-one{margin-right: 20%;}
.xavier_in #bloc2{display: none; width: 76%; margin: 5% auto 0 auto;}

.partenaires .two-cols{width: 70% !important; margin: 0 auto 5% auto !important; overflow: hidden;}
.partenaires .col-one{width: 5% !important; margin-right: 10%;}
.partenaires .col-two{width: 85% !important; text-align: left !important; overflow: hidden !important;}
.partenaires .col-two p{font-family: "helvetica_ultralight", sans-serif; font-size: 18px; color: #000; line-height: 36px;}
.partenaires .col-two p span{font-family: "helvetica_regular", sans-serif;}
.partenaires .col-two p.italic{font-family: "helvetica_light", sans-serif; font-style: italic; font-size: 14px; line-height: 14px;}

.five-cols{height: 71.88%; display: block; overflow: hidden;}
.five-cols .col-one, .five-cols .col-two, .five-cols .col-three, .five-cols .col-four, .five-cols .col-five{width: 20%; height: 95.1%; padding-top: 4.9%;}
.five-cols .col-one, .five-cols .col-three, .five-cols .col-five{background: #f5f7f8;}
.five-cols .col-two, .five-cols .col-four{background: #fff;}
.five-cols .bloc_picto{width: 76.7%; margin: auto;}
.five-cols .bloc_picto_grey{border-bottom: 2px solid #8a8a8a;}
.five-cols .bloc_picto_blue{border-bottom: 2px solid #81d2dd;}
.five-cols .pictos{width: 100%;}
.five-cols h3{font-family: "helvetica_light", sans-serif; font-size: 24px; color: #000; text-align: center; width: 85%; margin: 10% auto; height: 135px;}
.five-cols ul li{height: 100px;}
.five-cols ul li .two-cols .col-one{width: 10%; background: transparent;}
.five-cols ul li .two-cols .col-two{width: 80%; background: transparent; margin-left: 5%; font-size: 18px; font-family: 'helvetica_light', sans-serif;}

.slideupdown #bloc2{display: none;}
.arrow_projet{width: 26.2%; margin: 0 auto 10% auto; display: block;}
#stats_mathilde{width: 100% !important; margin: 0 !important; padding: 0 !important;}
#stats_mathilde .col-one, #stats_mathilde .col-two{width: 50% !important; margin: 5% 0 0 0 !important;}
#stats_mathilde .col-one p, #stats_mathilde .col-two p{width: 80% !important; margin: 0 auto 5% auto !important; text-align: center; font-family: 'helvetica_regular', sans-serif; font-size: 14px; line-height: 14px; height: 20px;}
#myfirstchart, #mysecondchart{width: 100%; margin: 0; padding: 0; height: 180px;}

.title{padding: 80px 0;}
.title ul{margin: auto;}
.title ul li{float: left; width: 20%; text-align: center; font-family: 'Arial', sans-serif; font-size: 24px; line-height: 24px; font-weight: bold; color: #000; cursor: pointer;}
.title ul li:hover, .title ul li.on{color: #81d2dd;}
.title ul li.separator{color: #81d2dd; font-weight: normal; cursor: default;}
.competences{position: relative; margin: 0 auto 40px auto; display: block; overflow: hidden;}
.competences .competence_one{width: 16%; height: 160px; float: left; position: relative; background: #f5f7f8; margin-right: 6px; margin-bottom: 6px;}
.competences .competence_one p{font-size: 13px; color: #000; text-align: center; width: 80%; margin: auto;}
.competences .competence_one .hover{width: 100%; height: 93px; background: url(../img/bg-traits.jpg) repeat top left; position: absolute; top: 0; left: 0; display: none;}
.competences .competence_one .hover p{font-family: 'helvetica_regular', sans-serif; font-size: 24px; color: #8a8a8a; background: #f5f7f8; display: inline; margin: auto; text-align: center; padding: 5px;}
.voile{width: 100%; height: 100%; background: #eaeaea; position: absolute; top: 0; left: 0; display: none;}

.langue{position: absolute; bottom: 20%; right: 6%; z-index: 2;}
.langue a{font-family: "helvetica_light", sans-serif; font-size: 14px; color: #000;}
.langue a.on{font-family: "helvetica_regular", sans-serif; color: #81d2dd;}
.langue a:hover{color: #81d2dd;}

.credit .three-cols{width: 100%;}
.credit .three-cols .col-one, .credit .three-cols .col-two, .credit .three-cols .col-three{width: 23% !important; padding: 100px 5%;}
.credit .three-cols .col-one, .credit .three-cols .col-three{background: #f5f7f8;}
.credit h3:hover{color: #81d2dd;}
.credit h3 .prenom{font-family: 'helvetica_ultralight', sans-serif; font-size: 24px; margin: 0; line-height: 30px;}
.credit h3 .nom{font-family: 'helvetica_regular', sans-serif; font-size: 24px; margin: 0; line-height: 30px;}
.credit h3 .metier{font-family: 'helvetica_light', sans-serif; font-size: 16px; margin: 0; line-height: 22px; font-style: italic;}
.credit ul{margin-top: 30px;}
.credit ul li{font-family: 'helvetica_light', sans-serif; font-size: 13px; margin: 10px 0; text-indent: 20px;}

#footer{height: 1.8%; background: #8a8a8a;}
#footer .left{float: left;}
#footer .left p{line-height: 20px;}
#footer .left p:hover{color: #81d2dd;}
#footer .right{float: right;}
#footer .right .three-cols .col-one, #footer .right .three-cols .col-two, #footer .right .three-cols .col-three{float: right; width: 18%; margin-left: 13%;}

.popup{position: fixed; top: 50%; left: 50%; padding: 20px; background: #fff; border: 10px solid #81d2dd; z-index: 21; display: none;}
.popup img{width: 200px; margin: auto; display: block; margin-bottom: 20px;}
.popup_cross{position: fixed; top: 50%; left: 50%; z-index: 22; display: none; cursor: pointer;}
.overlay{position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 20; background: url(../img/overlay.png) repeat top left; display: none;}

p.bgi{float: left; margin-right: 5%;}
img.bgi{float: left; height: 21px;}

@media (min-width: 1531px) and (max-width: 1620px) {
	.desc p{
		font-size: 17px;
		padding: 10% 0;
	}
	.desc .two-cols p{
		font-size: 15px;
	}
	#content .three-cols .col-three .two-cols{
		margin: 20px auto 0 auto;
	}
	#content .three-cols .col-one .nav .two-cols p, #content .three-cols .col-three .nav .two-cols p{
		font-size: 17px;
	}
}

@media (min-width: 1355px) and (max-width: 1530px) {
	.desc p{
		font-size: 15px;
		padding: 7% 0;
	}
	.desc .two-cols p{
		font-size: 13px;
	}
	#content .three-cols .col-three .two-cols{
		margin: 20px auto 0 auto;
	}
	#content .three-cols .col-one .nav .two-cols p, #content .three-cols .col-three .nav .two-cols p{
		font-size: 17px;
	}
	.partenaires .col-two p{
		font-size: 15px;
		line-height: 16px;
	}
	.partenaires .col-two p.italic{
		font-size: 12px;
		line-height: 12px;
	}
	img.bgi{
		height: 16px;
	}
}

@media (min-width: 1200px) and (max-width: 1354px) {
	.desc p{
		font-size: 14px;
		padding: 6% 0;
	}
	.desc .two-cols p{
		font-size: 12px;
	}
	#content .three-cols .col-three .two-cols{
		margin: 10px auto;
	}
	#content .three-cols .col-one .nav .two-cols p, #content .three-cols .col-three .nav .two-cols p{
		font-size: 15px;
	}
	.partenaires .col-two p{
		font-size: 15px;
		line-height: 16px;
	}
	.partenaires .col-two p.italic{
		font-size: 12px;
		line-height: 12px;
	}
	#content .three-cols h2{
		font-size: 25px;
	}
	#stats_mathilde .col-one p, #stats_mathilde .col-two p{
		font-size: 12px;
		line-height: 12px;
		height: 0px;
	}
	img.bgi{
		height: 16px;
	}
	#myfirstchart, #mysecondchart{
		height: 160px;
	}
	#content .list-mission li{
		font-size: 22px;
	}
}

@media (min-width: 1000px) and (max-width: 1199px) {
	#menu ul{
		height: 12px;
	}
	#menu ul li a{
		font-size: 12px;
		line-height: 12px;
	}
	.desc p{
		font-size: 12px;
		padding: 6% 0;
	}
	.desc .two-cols p{
		font-size: 11px;
	}
	#content .three-cols .col-three .two-cols{
		margin: 5px auto;
	}
	#content .three-cols .col-one .nav .two-cols p, #content .three-cols .col-three .nav .two-cols p{
		font-size: 13px;
	}
	.partenaires .col-two p{
		font-size: 14px;
		line-height: 15px;
	}
	.partenaires .col-two p.italic{
		font-size: 11px;
		line-height: 11px;
	}
	#content .three-cols h2{
		font-size: 20px;
		height: 62px;
	}
	#stats_mathilde .col-one p, #stats_mathilde .col-two p{
		font-size: 12px;
		line-height: 12px;
		height: 0px;
	}
	img.bgi{
		height: 16px;
	}
	#myfirstchart, #mysecondchart{
		height: 130px;
	}
	#content .list-mission li{
		font-size: 18px;
		margin: 6% 0 0 0;
	}
	.desc .two-cols .col-one, .desc .two-cols .col-two{
		width: 46% !important;
	}
	.desc .two-cols .col-one{
		margin-right: 8%;
	}
}
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
	#menu ul{
		height: 12px;
	}
	#menu ul li a{
		font-size: 12px;
		line-height: 12px;
	}
	.desc p{
		font-size: 12px;
		padding: 6% 0;
	}
	.desc .two-cols p{
		font-size: 11px;
	}
	#content .three-cols .col-three .two-cols{
		margin: 5px auto;
	}
	#content .three-cols .col-one .nav .two-cols p, #content .three-cols .col-three .nav .two-cols p{
		font-size: 13px;
	}
	.partenaires .col-two p{
		font-size: 14px;
		line-height: 15px;
	}
	.partenaires .col-two p.italic{
		font-size: 11px;
		line-height: 11px;
	}
	#content .three-cols h2{
		font-size: 20px;
		height: 62px;
	}
	#stats_mathilde .col-one p, #stats_mathilde .col-two p{
		font-size: 12px;
		line-height: 12px;
		height: 0px;
	}
	img.bgi{
		height: 16px;
	}
	#myfirstchart, #mysecondchart{
		height: 130px;
	}
	#content .list-mission li{
		font-size: 18px;
		margin: 6% 0 0 0;
	}
	.desc .two-cols .col-one, .desc .two-cols .col-two{
		width: 46% !important;
	}
	.desc .two-cols .col-one{
		margin-right: 8%;
	}
}