@media screen and (max-width:1100px){
	div.branches ul{
		width:100%;
	}
	div.branches ul li{
		margin-right:1em;
		height:40px;
		margin-bottom:1em;
	}
	
	
	#promotion{		
		border-radius:0px 0px 0px 0px;
		border:none;
		width:auto;
	}
	
	#promotion>h1{
		text-align:center;
		margin-left:auto;
		margin-right:auto;
		
	}
	#promotion>h1+p{
		width:90%;
		margin-left:auto;
		margin-right:auto;
		text-align:center;
	}
	
	#promotion section{
		justify-content:space-between;
		margin-left:auto;
		margin-right:auto;
		width:90%;
	}
	#promotion a{
		margin-right:1.5em;
		width:30%;
	}
	#promotion div:first-child{
		width:66%;
	}
	#promotion div:last-child{
		width:34%;
		
	}	
	
	section.vacation{
		width:95%;
	}	
	
		
	div.team p{
		width:80%;
	}
	div.website{
		margin-top:0px;		
	}
	
	div.website article.description{
		width:50%;
	}	
	div.team ul{
		width:100%;
		flex-wrap:wrap;
	}
	div.team h2{
		width:90%;
	}
	
	
	div.recors{
		margin-bottom:0px;
		padding:1.5em 0px;
	}
	div.recors ul{
		flex-wrap:wrap;
	}
	div.recors ul li.title{
		width:100%;
		padding-bottom:0.1em;		
		margin-bottom:0.5em;
	}	
	
	div.parteners ul{
		justify-content:space-between;		
	}
	div.parteners ul li{
		margin:auto 1em;
		margin-bottom:1em;
	}
}

@media screen and (max-width:1000px){
	/*div.banner section article{
		width:200px;
		height:200px;
	}*/
	section.vacation div.illustration{
		height:250px;
		
	}
	section.vacation div.description{
		width:500px;
		flex-wrap:wrap;
		
	}
	section.vacation div.description ul li span:first-child{
		width:150px;
	}
}

@media screen and (max-width:900px){
	#grade div:first-child{
		width:55%;
	}
	#grade .grade_illustration{
		width:30%;
	}
	#grade .grade_illustration li.first,#grade .grade_illustration li.third{
		display:none;
	}
	#grade .grade_illustration li.center{
		height:200px;
		width:200px;
		background:url("/public/image/secondaire/option.png") center;
		background-size:cover;
		border-radius:300px;
	}
	#grade .grade_illustration li.second{
		position:absolute;
		right:20px;
		top:-10px;
	}
	#grade .grade_illustration li.fourth{
		position:absolute;
		right:20px;
		bottom:-10px;
	}
	/*div.banner section div h1{
		display:flex;
		flex-direction:column;
		font-size:3em;
	}
	div.banner section div{
		margin:0px;
		width:500px;
	}
	div.banner section article{
		width:200px;
		height:200px;
	}*/
	
	/*
	section.center_presentation div{
		width:80%;
		padding:0.5em 4em;
	}
	section.center_presentation{
		justify-content:center;
	}
	*/
	
	div.branches h1{
		font-size:2.5em;
	}
	div.branches ul li{
		margin-right:1em;
		height:40px;
		width:25%;
	}
	
	
	#promotion>h1{
		font-size:2.5em;
	}
	#promotion>h1+p{
		/width:70%;
	}
	#promotion a{
		margin-right:1em;
	}
	
	
	#option>h1{
		font-size:2.5em;
	}
	#option>h1+p{
		width:70%;
	}
	#option a{
		margin-right:1em;
	}
	
	
	section.vacation{
		align-items:center;
	}
	section.vacation div.illustration{
		height:300px;
		width:300px;		
	}
	
	div.spaces h1{
		font-size:1.8em;
		margin-bottom:0px;
	}
	div.spaces p{
		width:90%;
		margin-top:0.5em;
		line-height:1.2em;
		margin-bottom:0.8em;
	}
}


@media screen and (max-width:850px){
	/*section.mission_history{
		flex-wrap:wrap;
	}
	div.mission{
		width:80%;
	}*/
	section.admission_inscription{
		flex-wrap:wrap;
		width:80%;
	}
	section.admission_inscription section{
		width:100%;
		margin:1.5em 0px;
	}
	
	
	#promotion a{
		margin-right:1em;
		width:45%;
	}
	#promotion div:first-child{
		width:66%;
	}
	#promotion div:last-child{
		width:34%;
		
	}
	
	
	section.vacation div.description{
		width:90%;
		margin-left:auto;
		margin-right:auto;
	}
	section.vacation div.illustration{
		margin-left:auto;
		margin-right:auto;
		height:250px;
	}
	
	div.website article.description{
		width:70%;
		margin-left:auto;
		margin-right:auto;
	}
	/*
	section.admission_inscription{
		flex-wrap:wrap;
		width:80%;
	}
	section.admission_inscription section{
		width:100%;
		margin:1.5em 0px;
	}
	section.admission_inscription section h1 em:first-child{
		position:relative;
		top:0px;
		left:0px;
	}
	section.admission_inscription section h1{
		padding-left:0px;
	}
	*/
	
}



@media screen and (max-width:750px){
	#banner em.published{
		justify-content:flex-end;
		padding-right:2em;
		margin-right:2em;
		margin-bottom:1em;
	}
	
	div.parteners article{
		flex-wrap:wrap;
	}
	div.parteners article p{
		width:100%;
	}
	div.parteners article>span{
		height:150px;
		margin:auto;
		width:80%;
	}
	
	
	#promotion section{
		/justify-content:center;
	}
	#promotion>h1{
		text-align:left;
	}
	#promotion>h1+p{
		margin-left:5%;
		text-align:left;
		
	}
	section.admission_inscription{
		flex-wrap:wrap;
		width:90%;
	}
	section.admission{
		width:80%;
	}
	section.admission h1{
		font-size:1.8em;
		margin-bottom:0.5em;
	}
	section.admission div{
		margin-top:0em;
	}
	
	
	div.branches h1{
		font-size:2.2em;
	}
	div.branches ul li{
		margin-right:1em;
		height:40px;
		width:200px;
	}
	
	#option article{
		width:250px;
		margin-left:0.1em;
		margin-right:0.1em;
	}
	#option article p.article_illustration{		
		width:250px;
		height:120px;
	}	
	#option article p.article_illustration span.classNumber{	
		font-size:4em;
	}
	
	/*
	section.admission{
		width:80%;
	}
	section.admission h1{
		font-size:1.8em;
		margin-bottom:0.5em;
	}
	section.admission div{
		margin-top:0em;
	}*/
}


@media screen and (max-width:700px){
	/*section.center_presentation{
			margin-top:3em;
		}
		section.center_presentation div{
			width:95%;
			margin-bottom:3em;
		}*/
		#grade{
			display:flex;
			flex-wrap:wrap;
			justify-content:flex-start;
		}
		#grade div span {
			flex-wrap:wrap;
		}
		#grade div:first-child{
			width:60%;
			margin-left:5%;
			margin-right:0px;
		}
		#grade .grade_illustration{
			width:150px;
		}
		#grade .grade_illustration li.center{
			height:150px;
			width:150px;
		}
}


@media screen and (max-width:650px){
	div.parteners article p span{
		margin-bottom:0px;
		font-size:1.8em;
		
	}
	div.parteners article p em{
		font-size:1em;
	}
	#all_options h1{
		font-size:1.5em;
	}
	section.vacation div.description h1{
		font-size:1.5em;
	}
	section.admission_inscription section h1{
		font-size:1.5em;
	}
	
	div.branches h1{
		font-size:2em;
	}
		
	div.team li span{
		height:120px;
		width:120px;
	}
	div.team li em.name{
		font-weight:bold;
		font-size:0.8em;
	}
	div.team li em:last-child{
		font-size:0.8em;
	}	
	
	div.spaces h1{
		font-size:1.5em;
	}
	div.spaces p{
		margin-bottom:1em;
		font-size:0.9em;
	}	
	div.website article.description{
		width:80%;
	}
	div.website article.description h1{
		font-size:1.4em;
	}
	#promotion_wrapper,div.spaces,div.team,div.website{
		self-align:flex-end;
		align-self:flex-end;
	}
	/*
	section.admission_inscription{
		flex-wrap:wrap;
		width:90%;
	}
	
	section.admission_inscription section h1{
		font-size:1.8em;
	}
	*/
	
	div.recors ul li+li{
		font-size:1em;
	}
	div.recors ul li span{
		font-size:1.5em;
		margin-bottom:0.1em;
	}
	div.team ul{
		justify-content:center;
	}
}

@media screen and (max-width:600px){
	/*div.banner section {
		padding-top:1em;
	}
	div.banner section div h1{		
		font-size:2.5em;
	}
	div.banner section article{
		position:absolute;
		bottom:-70px;
		right:20px;
		height:120px;
		width:120px;
		border:5px solid white;
	}*/
	
	/*
	section.center_presentation div span{
		height:80px;
		width:80px;
	}
	
	section.center_presentation h1{
		font-size:1.3em;
		margin-bottom:0.5em;
	}
	section.center_presentation p{
		margin-top:0px;
	}
	section.center_presentation div section{
		width:70%;
	}
	section.center_presentation div{
		padding:0.5em 1em;
	}
	*/
	
	#option article{
		width:270px;
		margin-left:auto;
		margin-right:auto;
	}
	#option article p.article_illustration{		
		width:270px;
		height:140px;
	}	
	#option article p.article_illustration span.classNumber{	
		font-size:5em;
	}
	
	
	section.vacation{
		margin-top:5em;
	}
	
	
	section.vacation div.illustration{
		display:none;
	}
	
	
	div.recors ul li.title{
		border-bottom:none;
	}	
	div.recors ul li+li{
		margin-bottom:1em;
	}	
	div.recors ul li:last-child{
		margin-bottom:0px;
		margin-top:0px;
	}
}



@media screen and (max-width:550px){	
	#grade div h1{
		font-size:1.5em;
	}
	#grade div em.inside_illustration_grade{
		display:flex;
		justify-content:space-between;
		height:150px;
		overflow:hidden;
		flex-wrap:wrap;
	}
	#grade div em.inside_illustration_grade i{
		height:150px;
		width:150px;
		display:flex;
		border-radius:100px;
	}
	#grade div em.inside_illustration_grade i{		
		background:url("/public/image/primaire/one.jpg") center;
		background-size:cover;
		margin-top:0.5em;
		
	}
	#grade div em.inside_illustration_grade i+i{
		background:url("/public/image/primaire/four.jpg") center;
		background-size:cover;
	}	
	#grade div em.inside_illustration_grade i:last-child{
		background:url("/public/image/primaire/two.jpg") center;
		background-size:cover;
	}
	
	#grade div:first-child{
		width:90%;
		margin-left:5%;
		margin-right:0px;
	}
	#grade .grade_illustration{
		width:80%;
		flex-direction:row;
		height:150px;
		flex-wrap:wrap;
		overflow:hidden;
		justify-content:space-around;
	}
	
	
	#grade .grade_illustration li.second{
		position:relative;
		top:0px;
		left:0px
	}
	#grade .grade_illustration li.fourth{
		position:relative;
		top:0px;
		left:0px
	}
		
	div.branches h1,div.team h2{
		font-size:1.8em;
	}	
	div.branches ul li{
		margin-right:1em;
		height:40px;
		width:70%;
	}
	div.branches ul li.symbole{
		display:flex;
		border:1px solid rgba(0,0,0,0.1);
	}
	
	#promotion a{
		margin-right:1em;
		width:250px;
		border:1px solid red;
	}
	#promotion>h1+p{
		width:90%;
		font-size:0.9em;
	}
	
	#promotion>h1{
		font-size:1.8em;
	}
	
	
	#option>h1+p{
		width:90%;
		font-size:0.9em;
	}
	
	#option>h1{
		font-size:1.8em;
	}
	
	#promotion_wrapper:before{
		width:50%;
	}
	#promotion article{
		/width:270px;
	}
	
	div.parteners article>span{
		
		width:100%;
	}
	
	div.website{
		padding-top:2em;
		padding-bottom:2em;
	}
	div.website article.description h1{
		width:80%;
	}
	div.website article.description p em.prix{
		height:80px;
		width:80px;
		position:absolute;
		top:-40px;
		right:0px;
		font-size:1.2em;
		background:none;
		border:1px dashed rgba(255,255,255,0.5);
	}
	div.website article.description p em.prix:before{
		top:10px;
	}
	
	div.website article.description p em.text{
		width:90%;
		margin-left:0em;
	}
	div.website span{
		display:none;
	}
	div.website article.description p.more{
		display:flex;
		justify-content:flex-start;
	}
	div.website article.description p.more em{
		margin-left:0px;
		margin-right:1em;
		font-size:0.8em;
		padding:0.2em 0.5em;
	}
	
	div.team li span{
		height:100px;
		width:100px;
	}
}




@media screen and (max-width:450px){
	div.parteners ul{
		justify-content:center;
	}
	
	div.parteners ul li{
		min-width:50%;
	}
	section.vacation div.description ul{
		justify-content:center;
		flex-wrap:wrap;
	}
	section.vacation div.description ul li span:first-child{
		width:150px;
		font-size:0.9em;
		margin-left:1em;
		margin-right:1em;
		height:18px;
	}
	
}


@media screen and (max-width:350px){
		
	div.branches h1{
		font-size:1.8em;
	}
	
	div.branches ul li{
		margin-right:0.5em;
		height:35px;
		width:200px;
		font-size:0.9em;
	}
	div.branches ul li{
		width:90%;
	}
	div.branches ul li.symbole{
		display:none;
	}
	
	#promotion>h1+p{
		font-size:0.8em;
	}	
	#promotion>h1{
		font-size:1.4em;
	}
	#promotion a{
		margin-right:1em;
		width:90%;
		margin-bottom:0em;
	}
	#promotion div:first-child{
		width:66%;
	}
	#promotion div:last-child{
		width:34%;
	}
	
	
	#option>h1+p{
		font-size:0.8em;
	}	
	#option>h1{
		font-size:1.4em;
	}
	#option article{
		width:250px;
		margin-left:auto;
		margin-right:auto;
		margin-bottom:0.5em;
	}
	#option article p.article_illustration{		
		width:250px;
		height:120px;
	}	
	#option article p.article_illustration span.classNumber{	
		font-size:4em;
	}
	
	
	div.team h2{
		font-size:1.5em;
	}
		
	div.team p{
		width:90%;
		font-size:0.9em;
		line-height:1.3em;
	}
	
	div.website article.description h1{
		font-size:1.2em;
	}
	div.website article.description p.more em{
		margin-bottom:0.5em;
	}
	div.team ul{
		justify-content:center;
	}
	div.team li{
		margin-left:2em;
		margin-right:2em;
	}	
}