@media only screen{
	
@charset "UTF-8";

html { margin:0; padding:0;  background-color:#FFF; /*width:100%; height:100%;*/  }

body{
	margin:0; padding:0; /*width:100%; height:100%;*/
	font: normal 100% 'Verb', Helvetica, Arial, sans-serif;
	color : #003e5d; font-size:16px;
}

a.dontunderline { text-decoration: none;}

img, embed, object, video { width:100%; max-width: 100%; border:0 ; margin:0; padding:0; display:block; }

#main {
	position: relative; width:100%; max-width:1000px; height:100%; margin:auto;
	background: url(../images/background-triangles.jpg) 0px -70px repeat-y; background-size: 100% auto;
}

.largeur { position:relative; width: 88%; margin:0 6%; height:auto;}

.hide{display:none}

/* --------------------------------- TOP --------------------------------- */

#top {
	position:relative;
	width:100%;
	height: 419px;
	background: url(../images/background-top.png) 0 0 no-repeat; background-size: 100% auto;
}

#logo {
	float:left; position:relative; 
	width:23.75%;
}

#header {
	float:left;
	position:relative; 
	width:100%;
}

h1 { float:left; position:relative; color:#FFF; text-transform: uppercase; font-size:34px; font-weight: normal; line-height:1.2em; margin:0; padding:0; width:73%; margin-top:80px;}
h1 b { font-size:48px; font-weight: bold; }

/* --------------------------------- INTRO --------------------------------- */

.intro{
	float:left;
	position: relative;
	width:100%;
}

.photo{
	float:left;
	position: relative;
	width:15%; margin-right:5%; margin-top:16px;
}
.textintro{
	float:left;
	position: relative;
	width:80%;
}


/* --------------------------------- BOUTONS DON --------------------------------- */

.boutondon{
	float:left;
	position: relative;
	width:100%; background-color:#e21d1c; text-align: center; padding: 10px 0; 
	font-size:20px; color:#FFF; font-weight: bold; text-transform: uppercase; text-decoration: none;
	-webkit-transition:all 0.4s ease;
	-moz-transition:all 0.4s ease;
	-o-transition:all 0.4s ease;
	transition:all 0.4s ease;
}

.boutondon:hover{ background-color:#5d5d5d; }

.boutonhome{ position: absolute; right:0; top:120px; width:27%;}
.boutonpart1{ float:left; position: relative; width:240px; margin: 6px 0 10px 0; background-color:#FF0;}
.boutonpart2{ float:left; position: relative; width:240px; margin: 6px 0 20px 0; background-color:#FF0;}

/* --------------------------------- BOUTONS TEMOIGNAGE --------------------------------- */

.boutontemoins{
	float:left;
	position: relative;	
	text-align: center; padding: 10px 70px 10px 20px; 
	font-size:14px; color:#003e5d; font-weight: bold; text-decoration: none;
	-webkit-transition:all 0.2s ease;
	-moz-transition:all 0.2s ease;
	-o-transition:all 0.2s ease;
	transition:all 0.2s ease;
	height:20px; max-height:20px;
}


#entretienpierrefrecon .boutontemoins, #decouvrprojets .boutontemoins{
	background: url(../images/pierre-frecon-bouton.gif) bottom right no-repeat;
	background-position:bottom right; background-repeat:no-repeat; background-color:#FFF;
}

#bourses .boutontemoins{
	background: url(../images/bourse-capelle-bouton.gif) bottom right no-repeat;
	background-position:bottom right; background-repeat:no-repeat; background-color:#FFF;
}

#bourses .boutonlecture{
	background: url(../images/bourses-bouton-lecture.gif) bottom right no-repeat;
	background-position:bottom right; background-repeat:no-repeat; background-color:#FFF;
}


#boursegberger .boutontemoins, #temrichier .boutontemoins{
	background: url(../images/bourse-gberger-bouton.gif) bottom right no-repeat;
	background-position:bottom right; background-repeat:no-repeat; background-color:#FFF;
}

#bourses .boutontemoins:hover, #boursegberger .boutontemoins:hover, #entretienpierrefrecon .boutontemoins:hover, #decouvrprojets .boutontemoins:hover{
	background-position:top right;
}

#bourses .boutontemoins.on{
	background: url(../images/bourse-capelle-bouton-on.gif) bottom right no-repeat;
	background-position:top right; background-repeat:no-repeat; background-color:#FFF;
}

#boursegberger .boutontemoins.on, #temrichier .boutontemoins.on{
	background: url(../images/bourse-gberger-bouton-on.gif) bottom right no-repeat;
	background-position:top right; background-repeat:no-repeat; background-color:#FFF;
}

#entretienpierrefrecon .boutontemoins.on,  #decouvrprojets .boutontemoins.on{
	background: url(../images/pierre-frecon-bouton-on.gif) bottom right no-repeat;
	background-position:top right; background-repeat:no-repeat; background-color:#FFF;
}


#bourses .boutontemoins.on:hover, #boursegberger .boutontemoins.on:hover, #entretienpierrefrecon .boutontemoins.on:hover,  #decouvrprojets .boutontemoins:hover, , #temrichier .boutontemoins:hover{
	background-position:bottom right;
}

.btnmajdi{float:left;}

/* --------------------------------- PART --------------------------------- */

#contenu{ position:relative; width: 100%; background-color: rgba(255, 255, 255, 0.8); margin-top:-35px;}
.part{ position: relative; padding-top:25px; padding-bottom:25px; }
.interieur{ position: relative; width:94%; padding: 0 3% 30px 3%; clear:both; height:auto;  display:inline-block; }
.francbord{ padding-top:30px; }
.bleu{ background-color:#003e5d; color:#FFF;}
.gris{ background-color:#e6e6e6; color:#003e5d;}
.blanc{ background-color:#FFFFFF; color:#003e5d;}
h2{ font-size:32px; margin:0; padding:0; }


/* --------------------------------- PART 2 --------------------------------- */

#bourses{margin-top:-20px;}
.boutontemoignage{ float:left; position:relative; width:100%; margin-right:0%; margin-top:15px;}
.boutontemoignagemajdi{margin-right:0; width:100%;}

.imgbourse{ position: absolute; top:0 ; width:26%; /*background-color:#FF0;*/ }
.icone{ float:left; position: relative; width:7%; height:auto; }
.icone img{ max-width:40px; }

h3{ font-size:16px; font-weight:bold; margin:0; padding:0; line-height:18px; margin-top:2px;}
h3 b{ font-size:20px; text-transform: uppercase;}

.textebourse{ float:left; position: relative; width:100%; height:auto; }
h4{ margin:0; padding:0; }
.textebourse h4{ margin:0; padding:0; color:#f18047; font-size:14px}
.textebourse p{ font-size:14px}
.textebourse a{ text-decoration:none; }
.textebourse a:hover{ text-decoration: underline; }

.colbourses{ float:left; position: relative;/* background-color:#FF0;*/ width:22%; margin-right:4%; text-align:center; font-size:14px; margin-bottom: 15px;}
.colbourses:last-child{ margin-right:0%; }

.colbourses img{ max-width:100%; margin:auto; margin-bottom:10px;}

#boursegberger {margin-top:20px;}
#boursegberger .imgbourse{left:0;}
#boursegberger .textebourse a{color:#f18047;}
#boursegberger .icone{ margin-left:26%; }

.temoignage-alexandra, .temoignage-majdi, .temoignage  {float:left; position:relative; width:92%;
overflow: hidden; margin-top: 3px; color:#003e5d; background:#FFF; padding:10px 4%; /*transition: height .4s ease;*/
}

.temoignage-chalou hr {
	height: 1px;
	border: 0;
	color: #003e5d;
	background-color: #003e5d;
}

.contenutem, .contenutemmajdi{float:left; position:relative; width:100%; height:auto;}


#chiffrescle{ text-align:center; margin-top:25px;}
.colchiffres{ float:left; position: relative; /*background-color:#FF0;*/ width:14%; padding:0 2%; margin-right:2.5%; text-align:center; font-size:14px; background-color:#003e5d; color:#FFF;}
.colchiffres b{ font-size:36px;}
.ligne1, .ligne2{margin-top:20px;}
.ligne2 .colchiffres:last-child{ margin-right:0%; }

/* --------------------------------- PART 3 --------------------------------- */

p.legende{ margin:3px 0 0 0; padding:0; font-size:12px; }
#entretienpierrefrecon { padding-bottom:0;}
#entretienpierrefrecon.off { height:36px; max-height:36px;}
#entretienpierrefrecon.on { height:auto; max-height: none;}
#entretienpierrefrecon h3{ margin:0 0 30px 0px; padding:0 2% 0 0 ; width:100%;}


#entretienpierrefrecon .btnpfrecon{ position: absolute; right:3%; top:30px;}
.contenutempfrecon{ float:left; position:relative; margin-top:0px; display:block;}

/*.texteportraits{float:left; position:relative; width:65%;}

.photopfrecon{ float:left; position:relative; width:25%; margin-right:10%;}
.photopfrecon img{ float:left; position:relative; width:45%; margin-right:5%;}*/

#sebastien{ margin-bottom:15px; }
#karine{ margin-bottom:30px; }
.temoignage p, .temoignage li { float:left; font-size: 14px; width:85%; }
.temoignage img { float:left; width:12%; margin-right:3%; margin-top:14px; }
.temoignage li { margin-top:14px; width:95%; margin-left:15px; }
.temoignage li:last-child { margin-bottom:14px; }

.temoignage-pfrecon{
	float:left; position:relative;
	margin-bottom:30px;
	font-size:14px;
	-webkit-columns: 3;
	-moz-columns: 3;
	columns: 3;
	
	-webkit-column-gap:  40px ;
	-moz-column-gap: 40px ;
	column-gap:  40px ;
	
	-webkit-column-rule: 1px solid rgba(0,0,0);
	-moz-column-rule: 1px solid rgba(0,0,0);
	column-rule: 1px solid rgba(0,0,0);
}

.temoignage-pfrecon li{
	margin:0 0 0 15px;
}
.temoignage-pfrecon br{
	margin-bottom:5px;
}

/*#encartFIE{ margin-top:30px; font-size:14px;}
.colencartFIE{ float:left; position: relative; width:28%; padding:0 4%; margin:0; border-right: 1px solid #003e5d; border-left: 1px solid #003e5d;}
.colencartFIE:first-child{ padding-left:0px; border:0; margin-right:-5px;}
.colencartFIE:last-child{ padding-right:0px; border:0; margin-left:-1px;}

.colencartFIE h4{ font-size:18px;}
.colencartFIE li{ margin:5px 0 0 15px; padding:0; letter-spacing:-0.05em}
.colencartFIE p{ font-size:18px; font-weight:bold; margin-top:35px;}*/

/* --------------------------------- SUITE PART 3 --------------------------------- */

.suitepart3{margin-top:20px;}

.contenutemprojets, .contenutemrichier{ float:left; position:relative; width: 100%; height: auto; clear:both;}



#merci p b, .suitepart3 p b{ font-size:18px; font-weight:bold; }
#merci p.enquete, .suitepart3 p.enquete{ margin-bottom:0; }
#mercie li, .suitepart3 li{ margin-left:15px;}

#portraitchinois{ text-align: center;}
#portraitchinois h4{ font-size:16px; font-weight:bold; margin-bottom:40px;}
#portraitchinois h4 b{ font-size:20px; font-weight:bold; text-transform:uppercase;}

.colportrait{ float:left; position: relative; /*background-color:#FF0;*/ width:19%; margin-right:8%; text-align:center; font-size:14px;}
.colportrait:last-child{ margin-right:0%; }

.colportrait img{ max-width:108px; margin:auto; margin-bottom:20px;}

/* --------------------------------- PART 4 --------------------------------- */

.colsoutien{ float:left; position: relative; /*background-color:#FF0;*/ width:48%; margin-right:4%; margin-top:15px;}
.colsoutien:last-child{ margin-right:0%; }
.colsoutien p{ margin-top:0;}
.colsoutien li{ margin-bottom:12px; margin-left:15px;}

.exemplededuc{padding:15px 25px;}
.exemplededuc img{margin:15px 0;}

.boutonpart4{width:60%;}

/* --------------------------------- FOOT --------------------------------- */

#foot{
	float:left; position: relative;  width:100%; font-size:14px;
}

#contenufoot{ float:left; position: relative; background: url(../images/trianglerouge.gif) left bottom no-repeat;  padding-top:50px; padding-bottom:75px;  }
.col1{float:left; position: relative; width:15%; margin-right:4%;}
.col2{float:left; position: relative; width:28%; margin-right:3%;}
.col3{float:left; position: relative; width:50%;}

.col3 a{color:#003E5D; text-decoration:none;}
.col3 a:hover{text-decoration:underline;}

span.texteequipe{display:none;}

}

@media screen and (max-width: 900px) {
	/*.interieur{background-color:#F0F;}*/
	
	h1 { margin-top:60px; width:65%; }
	.boutonhome{ position: absolute; right:0; top:100px; width:35%;}
	#top { height: 380px; }
	
	.boutontemoignage{ width:100%; margin-right:0%; margin-top:15px;}
	
	.btnmajdi{float:left;}
	
	#entretienpierrefrecon .btnpfrecon{ float:left; position:relative; width:100%; top:0; left:0; margin-bottom:30px;}
	
	/*.imgbourse{ width:20%;}
	.icone{ width:10%; }
	.textebourse{ float:left; position: relative; width:70%; height:auto; }
	#boursegberger .icone{ margin-left:20%; }*/
	
	.ligne1, .ligne2{float:left; /*background-color:#FF0;*/ position:relative; display:flex; justify-content: space-around; }	
	.ligne2{ /*background-color:#F0F;*/ width:100%;}
	
	.colchiffres{width:26%; margin-right:0;}
	.ligne2 .colchiffres:first-child{margin-left:15%;}
	.ligne2 .colchiffres:last-child{margin-right:15%;}
	
	.col3 br.saut{ display:none;}
	
		
	
}

@media screen and (max-width: 700px) {	
	#main {
	background: url(../images/background-triangles.jpg) 0px -50px repeat-y; background-size: 100% auto;
	}
	
	
	#top { height: 340px; }
	
	.photo { width: 20%; margin-right: 5%; }
	.textintro { width: 75%; }
	
	.temoignage img { width: 17%; margin-right: 5%; }
	.temoignage p { width: 78%; }
	
	
	/*.interieur{background-color:#0F0;}*/
	.imgbourse{ display:none; }
	.icone{ width:12%; }
	/*.textebourse{ width:100%; background-color:#FF0;}*/
	#boursegberger .icone{ margin-left:0%; }
	
	#entretienpierrefrecon { height:auto; max-height: none;}
	#entretienpierrefrecon .btnpfrecon{ float:left; position: relative; right:0; top:0; left:0; margin-left:0px; margin-bottom:30px;}
	
	h1 { font-size:30px}
	
	.contenutempfrecon{margin-top:0px;}

	
	span.coupe2{display:none;}
	
	.colencartFIE{ width:100%; padding:0; border: 0;}
	.colencartFIE:last-child img{ display:none;}
	.colencartFIE:first-child{ margin-bottom:20px;margin-right:0;}
	.boutonpart2{ width:50%;}
	
	#portraitchinois h4{ margin-bottom:20px;}
	.colbourses{ width:48%; margin-right:4%; margin-top:20px}
	.colbourses:nth-child(2n+1){ margin-right:0%; }
	
	.colsoutien{ width:100%; margin-right:0%; margin-top:15px;}
	.exemplededuc{margin-top:15px;}
	
	.col1{ width:15%; margin-right:5%;}
	.col2{ width:80%; margin-right:0%;}
	.col3{ width:80%; margin-left:20%;}
	
	.col3 br.saut{ display:block; margin-top:5px;}
	
	#contenufoot{ background: url(../images/trianglerouge.gif) left bottom no-repeat; background-size: 50%;}
}


@media screen and (max-width: 480px) {
	#main {
	background: url(../images/background-triangles.jpg) 0px -30px repeat-y; background-size: 100% auto;
	}
	
	.textebourse{display:flex; justify-content: center; flex-direction:column; align-items : center;}
	.boutontemoignage {width: 100%; display:flex; justify-content: center; flex-direction:column; align-items : center;}
	/**/
	
	.ligne1, .ligne2{flex-direction:column; }
	.ligne2 {  margin-top: 0px; }
	
	.ligne2 .colchiffres:first-child{margin-left:10%;}
	.ligne2 .colchiffres:last-child{margin-right:10%;}
	.colchiffres{width:76%; margin: 0 10%; margin-top:20px;}
	
	.photo { width: 25%; margin-right: 5%; }
	.textintro { width: 70%; }
	
	.temoignage img { width: 20%; margin-right: 5%; }
	.temoignage p { width: 75%; }
	
	.photopfrecon{ display:none; }
	#entretienpierrefrecon h3{ margin:0 0 30px 0px; padding:0 0 0 2%; width:100%;}
	
	#top { height: 280px; }
	
	h1 { float:left; position:relative; color:#FFF; text-transform: uppercase; font-size:25px; font-weight: normal; line-height:1.2em; margin:0; padding:0; margin-top:40px; width:65%;}
	h1 b { font-size:34px;}
	
	.icone{ display:none;}
	.textebourse{ width:100%;}
	
	.btnchalou span{ display:none; }
	
	#entretienpierrefrecon .btnpfrecon{ margin-left:0px;}
	
	.col1{ width:25%; margin-right:0%; margin-bottom:10px;}
	.col2{ width:100%; margin-right:0%;}
	.col3{ width:100%; margin-left:0%; margin-bottom:10px;}
	
	.colbourses{ width:100%; margin-right:0%;}
	
	.boutonhome{ position: relative; right:0; top:15px; width:70%;}
	.boutonpart1, .boutonpart2, .boutonpart4{ width:70%;}
	.btnalexandra span, .btnmajdi span, .btnpfrecon span, .btnprojets span, .btnrichier span{ display:none; }
	span.texteequipe{display:block;}	
	#entretienpierrefrecon h3 span{ display:none;}
}

@media screen and (max-width: 380px) {
	#main { background: url(../images/background-triangles.jpg) 0px -150px repeat-y; background-size: 100% auto; }
	
	.photo { display:none }
	.textintro { width: 100%; }
	
	.temoignage img { width: 25%; margin-right: 5%; }
	.temoignage p { width: 100%; }
	
	#top { height: 230px; }
	
	h1 { float:left; position:relative; color:#003e5d; text-transform: uppercase; font-size:13px; font-weight: normal; line-height:1.2em; margin:0; padding:0; margin-top:70px; width:100%;}
	h1 b { font-size:34px;}
	
	/*.interieur{background-color:#F0F;}*/
		
	.boutonhome, .boutonpart1, .boutonpart2, .boutonpart4{ width:100%;}
}