@media screen and (max-width:1100px){
	h1.web_title{
		width:60%;
		margin-left:7%;
		margin-top:2em;
	}	
	#banner p,#banner h1{
		width:70%;
	}
}

@media screen and (max-width:1000px){
	#banner p,#banner h1{
		width:85%;
	}
	#progress div{
		width:55%;
		margin-left:40%;
	}
	
	#progress section{
		margin:0px auto;
		padding:4em 0px;
	}
	#service_advantage{
		width:95%;
	}
	#service_advantage ul{		
		width:220px;
	}
}

@media screen and (max-width:850px){
	#banner div{
		width:90%;
		text-align:center;
	}	
	#banner p,#banner h1{
		margin-left:auto;
		margin-right:auto;
		width:100%;
	}	
	section.tabs section span.prix{
		position:absolute;
		left:auto;
		right:0px;
		top:-120px;
	}
	h1.web_title{
		margin-left:2em;
	}
	section.tabs section{
		margin-top:5em;
		margin-bottom:5em;
	}
}

@media screen and (max-width:740px){
	#banner{
		padding-top:3em;
		padding-bottom:2em;
	}
	#banner p,#banner h1{
		width:90%;
	}
	section.tabs section{		
		width:80%;
		margin-right:1em;
	}
	section.tabs section span.prix{
		position:absolute;
	}
	h1.web_title{
		font-size:1.7em;
		margin-left:10%;
	}
	
	#subscribe{
		width:80%;
	}
	
	#subscribe article{
		height:170px;
		width:170px;
	}
}

@media screen and (max-width:700px){
	#post_wrapper .all_post_wrapper{
		display:flex;
		flex-wrap:wrap;
		justify-content:center;
	}
}


@media screen and (max-width:650px){
	#banner h1{
		font-size:1.7em;
	}
	#banner p{
		font-size:1em;
	}
	#post_wrapper .all_post_container{
		width:90%;
	}
	#post_wrapper a.article{
		margin-left:0.1em;
		margin-right:0.1em;
	}
	
	#progress section{
		background:-webkit-linear-gradient(right,rgba(0,0,0,0.3),rgba(0,0,0,0.6));
	}
	#progress div{
		width:75%;
		margin-left:15%;
	}
	
	section.tabs section p{
		font-size:1.2em;
		font-weight:bold;
	}
	section.tabs section div{
		display:flex;
		flex-wrap:wrap;
	}
	section.tabs section div ul{
		width:100%;
		display:flex;
		flex-wrap:wrap;
		justify-content:flex-start;
	}
	section.tabs section div li{
		margin:0px;
		margin-right:0.7em;
		margin-bottom:1em;
		font-size:0.8em;
	}
	section.tabs section div li:before{
		content:"";
		height:10px;
		width:10px;
	}
	section.tabs section div p{
		width:400px;
		height:150px;
		margin-left:auto;
		margin-right:auto;
		border-radius:5px;
	}
	section.tabs article{
		margin-top:1em;
	}
	section.tabs article em{
		font-size:0.8em;
	}
	section.tabs section span.prix{
		height:120px;
		width:120px;
		position:absolute;
		left:350px;
		top:-100px;
	}
	section.tabs section span.prix em:nth-child(1){
		font-size:1.2em;
	}
	section.tabs section span.prix em:nth-child(2){
		font-size:2em;
		font-weight:bold;
	}
	h1.web_title{
		font-size:1.7em;
		margin-left:15px;
		width:90%;
		text-align:left;
		justify-content:flex-start;
		display:flex;
	}
	.contact ul{
		width:95%;
	}
	.contact ul li{
		width:210px;
	}
	.contact ul span:first-child{
		height:110px;
		width:210px;
	}
}

@media screen and (max-width:600px){
	
	#recent section{
		justify-content:space-around;
	}
	
	#subscribe{
		padding-left:1em;
		padding-right:1em;
		width:85%;
	}
	#subscribe article{
		height:120px;
		width:120px;
	}
	
	#service_advantage ul{		
		width:240px;
		display:block;
	}
	
	section.tabs section span.prix{
		height:120px;
		width:120px;
		position:absolute;
		right:0px;
		left:auto;
		top:-100px;
	}
	section.tabs section{
		margin-top:5em;
		margin-bottom:5em;
	}
	
	.contact p.text{
		font-size:1.5em;
	}
}

@media screen and (max-width:520px){
	#post_wrapper .all_post_wrapper{
		display:flex;
		flex-wrap:wrap;
		justify-content:center;
	}
	#progress div{
		margin-left:1em;
		border:1px solid red;
		
	}
	section.tabs section p{
		font-size:1em;
		line-height:1.5em;
		font-weight:bold;
	}
	
	section.tabs section{		
		width:70%;
		
	}
	
	section.tabs section span.prix{
		height:100px;
		width:100px;
		position:absolute;
		right:0px;
		left:auto;
		top:-80px;
	}
	section.tabs section span.prix em:nth-child(1){
		font-size:0.8em;
	}
	section.tabs section span.prix em:nth-child(2){
		font-size:1.5em;
		font-weight:bold;
	}
}

@media screen and (max-width:500px){
	#banner h1{
		font-size:1.5em;
	}
	#banner p,#banner h1{
		margin-left:auto;
		margin-right:auto;
		width:100%;
	}
	.contact ul{
		justify-content:center;
	}
	
	.contact ul li{
		width:280px;
	}
	.contact ul span:first-child{
		height:140px;
		width:280px;
	}
	
	#subscribe{
		justify-content:center;
	}
	
	#subscribe article{
		display:none;
	}
	#subscribe div{
		width:100%;
	}
	#subscribe div p:last-child{
		margin-top:0.5em;
	}
	#subscribe div h1{
		margin-bottom:0px;
	}
}


@media screen and (max-width:400px){
	#intro span:last-child{
		display:none;
	}
	#intro span:first-child{
		font-size:0.7em;
	}
	#banner{
		padding-bottom:1em;
		padding-top:2em;
	}
	
	#banner h1{
		font-size:1.2em;
		padding-top:0.3em;
		margin-bottom:0px;
	}
	#banner p{
		font-size:0.9em;
	}
	
	
	#post_wrapper .all_post >p span:first-child em:first-child{
		height:20px;
		width:20px;
		line-height:20px;
		font-size:0.6em;
	}
	#post_wrapper .all_post >p span:first-child em{
		color:rgba(0,0,0,0.8);
		font-size:1.1em;
	}
	#progress div a{
		font-size:0.9em;
	}
	
	
	h1.web_title{
		font-size:1.3em;
		margin-top:1em;
	}	
	section.tabs article em{
		font-size:0.7em;
		border-radius:0.2em;
	}
}
@media screen and (max-width:320px){
	#post_wrapper .all_post_container{
		text-align:right;
		width:85%;
	}	
	
	.contact ul li{
		width:220px;
	}
	.contact ul span:first-child{
		height:110px;
		width:220px;
	}
}