@media screen and (max-width:600px) {
	

	
	#conteneur {
		max-width:320px;
		margin:0 auto;
		margin-top:10px;
		margin-bottom:10px;		

	}

	#bloc_page {
		width:320px;
	}

	nav {
		max-width:300px;
	}


	header {
		max-width:164px;
		
	}
	 
	#banniere img {
		display:none;
	}




	nav li,nav .orange ,nav .enfant,nav .green,nav .soutien,nav .blue
	{  

 	margin:10px 18px; 

 
  
	}

	nav .offre, nav #syntax {
	  margin:10px 90px;
	}

	

	#boxorange {
	width:290px;	
	height: 40px;
	top:-10px;	
	left:15px;
	
	}

	#boxorange h2 {
	transform:none;
	margin-top:10px;
	font-size:20px;	
	letter-spacing: 8px;
	margin:auto;
	left:10px;
	width:290px;	
}

  	#orangevertleft{
		width:10px;	
		height: 1300px;		
		top:40px;
		left:10px; 
	}

	#orangevertright {	
		width:10px;
		height:1300px;		
		top:40px;
		left:300px;
	}

	#greenhortop {
		
	width:280px;	
	top:60px;
	left:20px;
	height:10px;
	}


	#greenhorbottom {
		
	width:280px;	
	top:1295px;
	left:20px;
	height:10px;
	}



	#texte {
	width: 285px;
	height:200%;	/* 596px */
	margin:auto;
	margin-left:-275px;
	margin-top:60px;		
	background-color: rgb(183,235,255); /* couleur de base (183,221,255)*/
	letter-spacing: 0.5px;
	


	}

	#texte p {
		
		padding-top:10px;
		font-size:15px;


	}
	#texte .pindex {
	padding-left:10px;
	}


	#texte #top {
		top:72px;
		left:270px;
		width:30px;
		height:30px;
		display:none;
	}


	#texte #bottom {
		width:30px;
		height:30px;
		top:980px;
		left:30px;
		display:none;
	}


footer {
	

	width:280px;
	margin-top:170px;
	padding: 4px 5px;
	font-size:10px;

	
	
	}

	footer p {
		font-size:11px;
		width:290px;
	}

	#fil {
		width:290px;

	
	}




	/* page asso */

	

	#orangevertmiddle,#orangevertmiddle2, #greenhortop1, #greenhormiddle, #greenhormiddle1 {
		display:none;
	}

	#container ,#subcontainer1,#subcontainer2,#subcontainer3{
	display:flex;
	flex-direction:column;	
	margin-left:0;
	margin-top:0;



	}


	
	.presentation, .cadremilieu ,.plan{
	
	height:175px;
	width:290px;
	}

	.cadredroit {
	height:175px;
	width:290px;
	}

	.cadremilieu {
		margin-top:-110px;
		width:290px;
		height: 175px;

	}

	.cadremilieu h3 {
		padding-top: 60px;
	}

	.cadretelechargement {
		margin-top:0px;
		width:290px;
		
	}


	/* .ressources {
		max-width:350px;
		margin-top:-10px;
	}
	*/

	.plan {
		width:290px;
		height:95px;
		margin-top:10px;
	}

	.plan h3 {
		margin-top:5px;
	}

	.cadredroit h3{
		margin-top:30px;
	}



	.image {
	background: none;
	width:290px;
	height:430px;
	margin-top:0px;
	
	}

	.image img {
	width:100%;
	height:80%;
	}


	.videgauche {
		display:none;
	} 



	.dropbtn ,.mainnav ,.dropdown-content {
		display:none;
	}



	/* page asso_valeurs */


	#texte h1 {
		font-size:20px;
	}

	#texte h2 {
		font-size:19px;
		text-align:center;
	}

	#texte span {
		text-align:left;
		font-size:15px;
	}

	.ribbon{ 
 	 padding: 0 0.05em;  
 	 margin: 0 0 0 -5px;
  	line-height:35px;
}

	.blueribbon{
  position:relative;
  top:20px;
  padding: 0 0.05em;  
  margin: 0 0 0 -5px;
  line-height: 15px;
  color: blue;  
  background: rgb(63,165,235);
  box-shadow: -1px 2px 3px rgba(0,0,0,0.5);


}

	

 /* page asso_role */

.ribbon2{
  top:80px;
  left:25px;
  width:290px;
   padding: 0 0.05em;  
  margin: 0 0 0 -0.625em;
  line-height: 35px;
  
}


/* page asso_environnement */




.ribbon{
  position:relative;
  top:20px;
  padding: 0 0.05em;  
  margin: 0 0 0 -03px;
  line-height: 30px;
  color: blue;  
  background: rgb(63,165,235);
  box-shadow: -1px 2px 3px rgba(0,0,0,0.5);

}



.arrow_box {	
	
	width:260px;	
	margin-top:60px;	
	
}

#texte.arrow_box p ,#texte.arrow_box2 p {	
	margin-left:10px;
	font-family:Arial, verdana, sans-serif;
}


.arrow_box:after, .arrow_box:before {
	top: 245px;
	left: 180px;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	z-index:2;

}

.arrow_box:before {
	border-color: rgba(229,255,204,0);
	border-top-color: rgb(229,255,204);
	border-width: 20px;
	margin-left: -20px;

}

#mascottebas{
	position:absolute;
	left:-40px;
	margin-bottom:50px;
	font-size:10px;


}


#texte .mascotte_env {
	margin-left:-520px;
}

/* page asso_developpement */


.arrow_box2 {

	width:260px;	
	margin-top:60px;	
}


.arrow_box2:after, .arrow_box2:before {
	top: 200px;
	left: 100px;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	z-index:2;
}

.arrow_box2:after {
	border-color: rgba(229,255,204,0);
	border-top-color: rgb(229,255,204);
	border-width: 30px;
	margin-left: -30px;
}
.arrow_box2:before {
	border-color: rgba(229,255,204,0);
	border-top-color: rgb(229,255,204);
	border-width: 20px;
	margin-left: -20px;
}



#mascottebas2 {
	position:absolute;
	margin-left:50px;
	margin-bottom:50px;
	font-size:10px;

}

/* page actions */

	#texte button {

	font-size:15px;
}

    div.tab button {  
    
    width:100px;     
}

	.tabcontent {
    float: right;    
    padding: 0px 12px;
    position:absolute;
    width:140px;
    border-left: none;
    height: 590px;
    left:170px;   
    
}

#vie {
	margin-left:-55px;

}

article  {
	width:155px;
	margin-top:200px;
	
}


.logo img {
   width:180px;
   height:auto;
   display:block;
   margin:auto;
   position:absolute;
 
  z-index:0;
 
  top:20px;
}


.audio {
     position:relative;
    top:3px;
    left:-35px;
       
    height:5px;
    display:block;
    margin:auto;
    cursor:pointer;
   
}


.audio audio {
    width:180px;
   

}


#vie h3{
	font-size:18px;
	width:160px;
	margin-left:5px;
	top:100px;
	position: absolute;
}


#psy h3 {
	top:50px;
	font-size:18px;
	width:180px;
	margin-left:5px;	
	position: absolute;
}

#psy h4 {
	font-size:16px;
	margin-top:150px;
}

#psy p {
	width:150px;

}

.description p {
    display:none;


}


#psy h3, #psy h4,#psy p ,#psy span{
	width:180px;
}

#psy h3 {
	margin-left:-10px;
}

#vie, #psy {
	width:160px;
	
}

#dem {
	width:160px;
	margin-left:-50px;
}

#dem a h3 {
	width:165px;	
	margin-left:-8px;
	margin-top:100px;
		
}


/* pages processus , evaluations , qualité */

#processus, #qualite, #evaluation {
     width:160px;
    margin-left:-55px;
    margin-top:5px;

}


#processus h3, #qualite h3 , #evaluation h3{
	font-size:18px;
}

#qualite img {
	width:100px;
	margin-left:-20px;
}

#boxorange .item1 {
	margin-top:5px;
	letter-spacing: 6px;

}

/* page etablissements */

#textscroll {
	width:290px;
	margin-top:60px;
	margin-left:-270px;
	height:900px;
}

.arrow1 ,.arrow2, .arrow3, .arrow4, .arrow5, .arrow6, .arrow7, .arrow8, .arrow9, .arrow10, .arrow11, .arrow12, .CBP , .FBP {
	display:none;
} 

#textscroll img {
    height:100px;
    width:100px;
    border:1px solid white;  
    box-shadow: 5px 5px 5px 2px rgb(128,128,128); 
    border-radius:10px;
}

.container a img {
  width:50px;
}

.container .content {
    position: absolute;
    bottom: 5px;
    background: rgba(0, 0, 0, 0.3);  
    color: #f1f1f1;
    width: 100px;
    height:10px;
    padding-top: 30px;
    box-sizing: border-box;
     border-radius:10px;
    
}


.container .content p {
	margin-top:-30px;
	padding-top:-25px;
	text-align:center;
    font-size:1.1em;
   letter-spacing:-1px;
    transition-duration:0.1s;   
   
}

.siege {
	left:60px;
	top:100px;
}

.chrs {   
    top:300px;
    left:40px;
}

.paj {
  
     top:300px;
     left:180px;   
     
}

.reliance {
	top:420px;
	left:180px;
}

.cpe {
	top:420px;
	left:40px;
}

.carnot {
	top:550px;
	left:180px;
}

.brunpain {
	top:550px;
	left:40px;
}

.flocon {
	top:700px;
	left:40px;
}

.poutrain {
	top:700px;
	left:180px;

}
.bousbecque {
	top:840px;
	left:110px;
}



/* ------------------------------------------*/


/* page FBPmecs */





.ressources div {

margin-top:-17px;


}

#boxorange p {
	transform:none;
	letter-spacing: 1px;
	margin-top:100px;
	position:absolute;
	right:50px;
	
	font-weight:bold;	
	color:white;
	
	font-family:"Comic Sans Ms", serif;
}

#boxorange .flocon {
	font-size:13px;
	margin-top:300px;
	margin-left:70px;
}

#boxorange .floc {
	font-size:13px;
	margin-top:300px;
	margin-left:90px;
}

#boxorange .poutrains {
	font-size:13px;
	margin-top:113px;
	margin-left:155px;
}

#boxorange .bousbecque {
	font-size:13px;
	margin-top:90px;
	margin-left:100px;
}


/* image */

.mySlides img {
 height:325px;
 width:95%;
 position:relative;
 top:2px;
 left:7px;

}

#hidden  {
	text-align:center;
	color:white;
	margin-top:50px;
	margin-left:30px;
}

#hidden a {
	font-size:20px;

}

.cadredroit .show {
	text-align:center;
	margin-top: 20px;	
	margin-left:20px;

}

.cadredroit .show a {
	font-size: 17px;
}


/***********************************************/
/*   Menu deroulant livret accueil             */


.mainnav {
  position:relative;
  margin: 0 auto;
  margin-top:-50px;
  margin-left:11px;

}






.videdroit {

	display:none;
	/*
	background-color:rgb(200,201,25);
	width:290px;
	height:40px;
	margin-top:-45px;
	*/
}

/* dropdown map plan acces */




.mainnavmap {
  margin-top: 100px;
  margin-left:-36px;


}
.mainnavmap li {
  list-style: none;
}
.mainnavmap li a {
  text-decoration: none;
  font-size:17px;
}


.dropdown2 {
  position: absolute;
  width: 200px;
  top: 810px;
  opacity: 0;
  visibility: hidden;
  transition: ease-out 0.35s;
  -moz-transition: ease-out 0.35s;
  -webkit-transition: ease-out 0.35s;
 
  margin-top:90px;
}


.mainnavmap li {
  float: left;
  padding: 15px 69px;
  background: rgb(100,201,25);
  border-left: 1px dotted #fff;

}
.mainnavmap li:first-child {
  border: none;
}
.mainnavmap li a {
  display: block;
  padding: 1px 20px;

  color: #fff;
  font-family: "Comic Sans Ms", sans-serif;
}
.mainnavmap li:hover {
  background: green;
  transition: ease-in 0.35s;
  -moz-transition: ease-in 0.35s;
  -webkit-transition: ease-in 0.35s;
}
.mainnavmap li:hover a {
  color: rgb(163,201,25);
  transition: ease-in 0.35s;
  -moz-transition: ease-in 0.35s;
  -webkit-transition: ease-in 0.35s;

}

.hassub2 {
  width:180px;
  border:12px solid;
 
}



/*First Level*/  /* sous menu */  
.subs2 {
  left: -107px;
  position: relative;
  top: 392px;
  width: 140px;
  border-left: none !important;
  border-bottom: 1px dotted #fff !important;

 

}
.subs2:last-child {
  border: none !important;
}
.hassubs2:hover .dropdown2,
.hassubs2 .hassubs2:hover .dropdown2 {
  opacity: 1;
  visibility: visible;
  transition: ease-in 0.35s;
  -moz-transition: ease-in 0.35s;
  -webkit-transition: ease-in 0.35s;
}
.mainnavmap li:hover ul a,
.mainnavmap li:hover ul li ul li a {
  color: white;
}
.mainnavmap li ul li:hover,
.mainnavmap li ul li ul li:hover {
  background: rgb(63,165,235); /* color sous menu */
  transition: ease-in-out 0.35s;
  -moz-transition: ease-in-out 0.35s;
  -webkit-transition: ease-in-out 0.35s;
}
.mainnavmap li ul li:hover a,
.mainnavmap li ul li ul li:hover a {
  color: rgb(163,201,25);
  transition: ease-in-out 0.35s;
  -moz-transition: ease-in-out 0.35s;
  -webkit-transition: ease-in-out 0.35s;
}
/*Second Level*/
.hassubs2 .hassubs2 .dropdown2 .subs2 {
  left: 20px;
  position: relative;
  width: 180px;
  top: 0px;
}
.hassubs2 .hassubs2 .dropdown2 {
  position: absolute;
  width: 150px;
  left: 120px;
  top: 0px;
  opacity: 0;
  visibility: hidden;
  transition: ease-out 0.35s;
  -moz-transition: ease-out 0.35s;
  -webkit-transition: ease-out 0.35s;
}


.dropdown2 .subs2 a {
  padding:2px 35px;
  font-size:18px;

}



h4 {
  text-align:center;
  padding-top:20px;
  font-size:18px;
  color:white;
}

.plan a:hover {
  text-decoration:none;
}


/*--------------------------*/



/* presentation FBPmecs */


   div.tab2 button {  
    
    display: block;
    background-color: lightblue;
    color: black;
    padding: 87px 10px;
    width:100px;
    border: none;
    outline: none;
    text-align: left;
    cursor: pointer;
    transition: 0.5s;
    font-size: 11px;
}
     



.tabcontent2 {
    float: right;    
    padding: 0px 10px;
    position:absolute;
    width:175px;
    border-left: none;
    height: 610px;
    left:110px;    
}


.tabcontent2 h3 {
   display:none;
}

#texte h5 {
    margin-left:20px;
    font-size:16px;
    text-decoration:underline;
}


#texte p {
	padding:5px 2px;
	font-size:10.4px;
	max-width: 240px;


}

#texte .tabcontent2 {
	overflow:scroll;
}


/*-------------------------*/

/* Page partenaires structures */

.greenribbon{
  position:relative;
  


  padding: 0 0.5em;  
  margin: 0 0 0 -0.4em;
  font-size:10px;
 
 
  
  box-shadow: -1px 2px 3px rgba(0,0,0,0.5);

}

.greenribbon:before, .greenribbon:after{
 
  display: none;
}

.greenribbon:before{
 display: none;
}

.greenribbon:after{
  display: none;
}


/*-------------------------*/


/* onglets reglement et livret accueil */



/*General Menu Styling*/

.livret {
	position:absolute;
	margin-top:-270px;
	margin-left:5px;	
	display:block;

}

.livret a {
	display:block;
	font-family:Arial;
	text-decoration:none;
	color:white;
	font-size:18px;
	padding:12px 10px;
	font-weight:bold;	
	text-align: center;
	border-bottom:1px solid white;
	border-top:1px solid white;
	
}

.livret a:hover {
  background: rgb(200,201,25);
  transition: ease-in 0.35s;
  -moz-transition: ease-in 0.35s;
  -webkit-transition: ease-in 0.35s;  
  color:white;
  

}


.bilan {

	position:absolute;
	margin-top:-134px;
	margin-left:5px;	
	display:block;
	background-color: rgb(240,160,7);
	width:280px;
}

.bilan a {
	display:block;
	font-family:Arial;
	text-decoration:none;
	color:white;
	font-size:18px;
	padding:12px 10px;
	font-weight:bold;	
	text-align: center;	
	border-bottom:1px solid white;
	border-top:1px solid white;
	
}

.bilan a:hover {
 background: rgb(200,201,25);
  transition: ease-in 0.35s;
  -moz-transition: ease-in 0.35s;
  -webkit-transition: ease-in 0.35s;
  
  color:white;

}






/*

.main {
  border:1px solid orange;
  width:290px;
  height:100px;
}

.mainnav {
  
  margin: 0 auto;
  margin-top:100px;
  margin-left:-100px;
 
  width:200px;
  height:500px;

}
li {
  list-style: none;
}
li a {
  text-decoration: none;
  font-size:19px;
}
.dropdown {
  position: absolute;
  width: 160px;
  top: 50px;
  left:50px;
  opacity: 0;
  visibility: hidden;
  transition: ease-out 0.35s;
  -moz-transition: ease-out 0.35s;
  -webkit-transition: ease-out 0.35s;
}
.mainnav li {
  float: left;
   width:226px;
  background: orange;
  border-left: 1px dotted #fff;
}
.mainnav li:first-child {
  border: none;
}
.mainnav li a {
  display: block;
  text-align:center;
  padding:15px 10px;
 
  color: white;
  font-family: arial;
}
.mainnav li:hover {
  background: rgb(200,201,25);
  transition: ease-in 0.35s;
  -moz-transition: ease-in 0.35s;
  -webkit-transition: ease-in 0.35s;
}
.mainnav li:hover a {
  color: white;
  transition: ease-in 0.35s;
  -moz-transition: ease-in 0.35s;
  -webkit-transition: ease-in 0.35s;
}


*/
/*First Level*/

/*
.subs {
  left: -10px; 
  position: relative;
  top: -50px;
  width: 162px;
  border-left: none !important;
  border-bottom: 1px dotted #fff !important;
}
.subs:last-child {
  border: none !important;
}
.hassubs:hover .dropdown,
.hassubs .hassubs:hover .dropdown {
  opacity: 1;
  visibility: visible;
  transition: ease-in 0.35s;
  -moz-transition: ease-in 0.35s;
  -webkit-transition: ease-in 0.35s;
}
.mainnav li:hover ul a,
.mainnav li:hover ul li ul li a {
  color: white;
}
.mainnav li ul li:hover,
.mainnav li ul li ul li:hover {
  background: rgb(200,201,25);
  transition: ease-in-out 0.35s;
  -moz-transition: ease-in-out 0.35s;
  -webkit-transition: ease-in-out 0.35s;
}
.mainnav li ul li:hover a,
.mainnav li ul li ul li:hover a {
  color: white;
  transition: ease-in-out 0.35s;
  -moz-transition: ease-in-out 0.35s;
  -webkit-transition: ease-in-out 0.35s;
}

*/

/*Second Level*/

/*
.hassubs .hassubs .dropdown .subs {
  left: 65px;
  position: relative;
  width: 190px;
  top: 0px;
  margin-top:50px;
}
.hassubs .hassubs .dropdown {
  position: absolute;
  width: 150px;
  left: -100px;
  top: 0px;
  opacity: 0;
  visibility: hidden;
  transition: ease-out 0.35s;
  -moz-transition: ease-out 0.35s;
  -webkit-transition: ease-out 0.35s;
}
 

*/




/* ------------------------------------------------*/






/* page flocon map */


#presentation {
	
	height:120px;
	width:290px;
	background-color:rgb(200,201,25);
	
	position:absolute;
	top:150px;
	left:10px;
	display:none;
}


#image {
	height:350px;	
	width:280px;	
	position:absolute;
	top:70px;
	left:20px;

}


#image #map {
	height:350px;	
	width:280px;	
	position:absolute;
	
}



/*-------------------------*/

/* page CBP mecs */

#boxorange .carnot {
	font-size:13px;
	position:absolute;
	margin-top:170px;
	left:110px;
	
	
}

#boxorange .brun {
	font-size:13px;
	margin-top:100px;
	margin-left:100px;
}

#boxorange .pain {
	font-size:13px;
	margin-top:350px;
	margin-left:170px;
}

#boxorange .siege {

}


/***********************/

/* Page postuler */


.emploi , .benevolat{

display:none;
}


}