.responsive { display: none } .desktop { display:inherit }

/* desktop responsive */
@media screen and (max-width: 1070px) {
	header { padding-bottom:0 }
    .content { width:100% }
	.actu { padding-top:20px }
	.actu h3 { margin: 10px 0; padding: 10px 0; font-size: 1.9em}
	.actu p {font-size:1.4em}
	
	body { background: none}
	main {width: 100%; background:#fff url(../img/bk-site-resp.jpg) no-repeat bottom left }
	footer { padding: 1%}
}
@media screen and (max-width: 1050px) {
	main { margin-top: 0; }
	main aside a { width: 47%; display: inline-block}
	main aside a img { max-width: 100%}
	
}
@media screen and (max-width: 980px) { 
	main.vins .col3 h3, main.vins .col2 h3 { font-size:1.7em }
	main.vins .col3 p { height: 200px}
	.contact form { width: 58%}
}
@media screen and (max-width: 900px) { 
	header a img { width: 40%; margin-left: 1%}
	header .header-title {margin-top: 10px;}
	header { padding-bottom:10px }
	
	footer .col3.alpha { display: none }
	footer .col3.lambda { width:30%}
	footer .col3.omega { width: 70%}
}
@media screen and (max-width: 795px) {
	header nav { clear: both; width: 100%; text-align: center;}
	main.vins .col3 p {height: auto}
}

/* tablette portrait et mobile */
@media screen and (max-width: 768px) {
    .responsive {display: block} .desktop { display:none !important; }
	
	#dp_pays { width: 100%}
    
    footer {padding: 10px 0; }
    footer .col { width: 90% !important; margin:3% !important; padding: 0;box-sizing: border-box; float:none; text-align: left;}
	footer a { display: inline-block; padding: 5px; font-size: 1.3em; background: #202020; border-radius: 5px; margin: 5px 10px 5px 0;}
	footer p { margin-top: 15px;}
	
	.home .col3, .vin .col3, .vin .col2, main.contact .alignleft, main.contact form { float: none; width: 100%; clear: both}
			
	main aside a { opacity: 1}
	main.vins .col3 img { float: left; margin:0 10%; width: 13%}
	
	.col4 { width: 50%}
	
	.contact .alignleft a { margin: 10px 0 0 0; padding: 5px; display: inline-block}
	
}

@media screen and (max-width: 660px) {
	header .header-title { width: 90%; float: none; margin: 10px auto}
	header a img { float: none !important; width: 60%; display: block; margin: auto}
	
	.actu {width: 50%}
	
	.vins p.alignright {float: none}
}

@media screen and (max-width: 500px) {
	header a img { width: 80%; }
	.actu { display: none}
	main aside a {width:100%; margin-bottom: 20px}
	
	main.vins .col3 img { width:auto; float: none; margin: auto}
}

@media screen and (max-width: 440px) {
	header nav li { width:50%; padding: 5px 0}
}