@media screen and (max-width:1150px){
	#mail_banner article h1{
		font-size:3em;
	}
	#mail_banner div{
		border:4px solid rgba(255,255,255,1);
		height:300px;
		width:300px;
	}
	#mail_banner div:before,#mail_banner div:after{
		height:100px;
		width:100px;
		left:-100px;
	}
	
	
	#offert p.introduction{
		/width:100%;
	}
	
	#offert article{
	/border:1px solid red;
		/width:100%;
	}
	
	#offert article div{
		width:300px;
	}
}

@media screen and (max-width:1000px){
	#mail_banner article h1{
		font-size:2.5em;
	}
	#mail_banner div{
		border:4px solid rgba(255,255,255,1);
		height:250px;
		width:250px;
	}
	#mail_banner div:before,#mail_banner div:after{
		height:70px;
		width:70px;
		left:-70px;
	}
	#mail_banner article h2{
		font-size:1em;
	}
	
	
	#offert p.introduction span{
		width:90%;
		padding-right:10%;
	}
	#offert p.introduction{
		/width:90%;
	}
	
	#offert article{
		flex-wrap:wrap;
	}
	#offert article div{
		margin-left:1em;
		margin-bottom:2em;
		width:320px;
	}
	#offert article div.poster{
		background:url("/public/image/mail/back.jpg") center;
		background-size:cover;
		width:320px;
		display:flex;
	}
}

@media screen and (max-width:850px){
	#mail_banner article h1{
		font-size:2em;
	}
	#mail_banner div{
		border:4px solid rgba(255,255,255,1);
		height:200px;
		width:200px;
	}
	#mail_banner div:before,#mail_banner div:after{
		height:50px;
		width:50px;
		left:-50px;
	}
	#mail_banner article h2{
		padding:0.2em 2em;
	}
	
	#offert p.introduction strong{
		font-size:1.8em;
	}	
	#offert article div{		
		width:300px;
		margin-left:0px;
		margin-right:0px;
	}
	#offert article div.poster{
		width:300px;
	}
}


@media screen and (max-width:700px){
	#mail_banner div:before,#mail_banner div:after{
		height:50px;
		width:50px;
		right:-30px;
		left:auto;
	}
	#mail_banner article h1{
		font-size:1.7em;
	}
	#mail_banner div{
		border:4px solid rgba(255,255,255,1);
		height:180px;
		width:180px;
	}
	#mail_banner article h2{
		font-size:0.9em;
		padding:0.2em 0.8em;
	}
	
	#offert p.introduction strong{
		font-size:1.5em;
		font-weight:normal;
	}
	
	#offert article div{		
		width:290px;
		padding-bottom:1em;
	}
	#offert article div.poster{
		width:280px;
	}
	#offert article div p.link{
		text-align:center;
		margin-top:1em;
	}
}

@media screen and (max-width:650px){
	
	#offert article div{		
		width:290px;
		position:relative;
		margin-left:1em;
	}
	#offert article div:after{
		content:"";
		width:210px;
		display:block;
		position:absolute;
		right:-220px;
		top:0px;
		bottom:0px;
		/border:1px solid red;
		border-radius:0px 150px 150px 0px;
		background:url("/public/image/mail/pre.png") center;
		background-size:cover;
	}
	
	#offert article div:first-child:after{
		background:url("/public/image/mail/back.jpg") center;
		background-size:cover;
	}
	#offert article div:nth-child(3):after{
		background:url("/public/image/mail/back.jpg") center;
		background-size:cover;
	}
	#offert article div.poster{
		display:none;
	}
	
	
	#contact{
		display:flex;
		flex-direction:column;
		width:85%;
	}
	#contact div{
		width:90%;
	}
	#contact .tags{
		width:90%;
		height:200px;
		margin-top:2em;
	}
	#contact div p{
		margin-bottom:1em;
		font-size:0.95em;
	}
	#contact h1{
		margin-top:1em;
	}
}

@media screen and (max-width:550px){
	#mail_banner article{
		width:90%;
	}
	#mail_banner div{
		position:absolute;
		bottom:-50px;
		right:5px;
		height:140px;
		width:140px;
	}
	#mail_banner div:after{
		display:none;
	}
	#mail_banner div:before{
		top:-40px;
		
	}
	
	#offert p.introduction{
		margin-top:3em;
	}
	#offert p.introduction strong{
		margin-bottom:0.1em;
		font-size:1.4em;
	}
	#offert p.introduction span{
		width:100%;
		padding-right:0px;
		font-size:0.8em;
	}
	
	#offert article div:after{
		content:"";
		width:150px;
		display:block;
		position:absolute;
		right:-160px;
		top:0px;
		bottom:0px;
		/border:1px solid red;
		border-radius:0px 150px 150px 0px;
		background:url("/public/image/mail/pre.png") center;
		background-size:cover;
	}
}


@media screen and (max-width:500px){
	#offert article{
		overflow:hidden;
		padding-top:1em;
	}
	#offert article div:after{
		content:"";
		width:210px;
		display:block;
		position:absolute;
		right:-220px;
		top:0px;
		bottom:0px;
		/border:1px solid red;
		border-radius:0px 150px 150px 0px;
		background:url("/public/image/home/pre.png") center;
		background-size:cover;
	}
}
@media screen and (max-width:450px){
	#mail_banner article{
		width:100%;
	}
	
	#mail_banner{
		padding-top:0px;
		padding-bottom:0px;
	}
	#mail_banner article{
		/border:1px solid red;
		padding-bottom:0em;
		padding-top:0em;
	}
	#mail_banner div{
		position:absolute;
		bottom:-70px;
		right:-25px;
		height:100px;
		width:100px;
	}
	#mail_banner div:before,#mail_banner div:after{
		height:30px;
		width:30px;
		right:0px;
		left:auto;
		top:-30px;
	}
	#mail_banner article h1{
		margin:15px;
	}
	#mail_banner article h2{
		margin-left:15px;
	}
	#offert p.introduction{
		margin-top:3.5em;
	}
}