/* CSS Document */

body 	{ font-size:150%; }
a 		{ outline:none; }
a img 	{ border:none; }

html, body 	{ margin:0; padding:0; position: relative; font-family: 'Barlow Condensed', sans-serif; }
.nowrap	 	{ white-space: nowrap; }
.center		{ text-align: center; }

.grecaptcha-badge { z-index:10; }

.content-loader { display:none; bottom:0; left:0; margin:auto; position:fixed; right:0; top:0; z-index:600;
					background-color: rgba(255,255,255,.7); }
.content-loader:after { border:12px solid #9ac881; border-top:12px solid #006800; border-radius:50%; width:50px; height:50px; content:' ';
						animation:spin 1500ms linear infinite; position:absolute; top:calc(50% - 15px); left:0; right:0;  margin:auto; z-index:1600; }

@keyframes spin {
  0% {
    transform: rotate(0deg); }
  100% {
    transform: rotate(360deg); } }


body 	{ background:#006800 url("/img/strilles_vert_fonce.png") top left; }
body {
  background-color:#006800;
  background-image: url("/img/vignes3.jpg"), url("/img/vignes3.jpg");
  background-position: left top, left bottom -200px;
  background-repeat: no-repeat, no-repeat;
  background-size: 100vw, 100vw;
}
section, header, footer 	{ padding:2.5vw 15vw; }

section 	{ transform: skewY(-3deg); }
section>div { transform: skewY(3deg); }

section.commande 	{ background:white; }
section.vignerons 	{ background:#8cc63f url("/img/strilles_vert_fonce.png") top left; }
section.contact 	{ background:white; }


header, footer 	{ text-align:right; color:white; }
h1 	{ font-size:72px; margin-top:0; margin-bottom:0.3em; }
h2 	{ font-size:40px; border-bottom:1px solid black; display:inline-block; margin-left:-15vw; padding-left:15vw; 
		padding-right:1vw; padding-bottom:0px; }
h2 span { font-size:0.8em; display:block; font-weight:normal; }
h3 	{ font-size:24px; }
p 	{ font-size:20px; }
.small p		{ font-size:18px; }
a 	{ color:#006800; text-decoration:none; }
a:hover { border-bottom:1px #006800 dotted; }

header p 					{ font-size:24px; }
.contact p, .contact ul 	{ font-size:24px; }
footer p 					{ font-size:14px; }

.commande .cartons 			{ overflow:auto; margin-bottom:2em; }
.commande .carton 			{ float:left; width:25%; margin:0 2%; border:1px solid black; border-radius:10px; padding:2%; 
								height:6em; position:relative; }
.commande .carton h3 		{ margin:0 0 1em; font-size:20px; }
.commande .carton h3 span	{ white-space:nowrap; }
.commande .carton p 		{ margin:0 0 1em; font-size:17px; max-width:198px; }
.commande .carton .price	{ position:absolute; bottom:0.5em; font-weight:bold; }

.commande form				{ font-size:14px; }
.commande label 			{ float:left; width:300px; }
.commande input,
.commande textarea 			{ display:block; width:300px; padding:4px 5px; border-width:1px; border-radius:3px; 
								box-sizing:content-box; }
.commande .submit>div 		{ display:none; }

.commande .error 			{ background-color:#ff0000; color:white; text-align:center; padding:15px; }
.commande .success 			{ background-color:#27b200; color:white; text-align:center; padding:15px; }

.vignerons img 					{ width:60%; box-shadow:5px 5px 20px rgb(0 0 0 / 50%); margin:0 auto 3em auto; display:block; }
.vignerons .vigs 				{ overflow:auto; }
.vignerons .vig 				{ width:33%; float:left; font-size:20px; margin-bottom:1em; }
.vignerons .vig:nth-child(3n+1) { clear:left; }
.vignerons .vig p 				{ margin:0.6em 0; }

.contact ul 					{ margin-bottom:2em; }
footer 							{ padding-top:1.5vw; padding-bottom:0.5vw; }

@media (max-width:1200px) {
	h1 	{ font-size:60px; }
}
@media (max-width:990px) {
	h1 				{ font-size:48px; }
	header p 		{ font-size:20px; }
	h2 				{ font-size:32px; }
	.commande .carton 			{ height:auto; width:auto; float:none; padding-bottom:2em !important; margin-bottom:1em; }
	.commande .carton p 		{ max-width:none; }
	.commande .carton .price	{ bottom:0; }
	.commande form label		{ font-size:18px; }
	.vignerons .vig p			{ font-size:16px; }
	.contact p, .contact ul 	{ font-size:20px; }
}
@media (max-width:880px) {
	.commande label 		{ display:block; width:auto; margin-bottom:5px; }
}
@media (max-width:768px) {
	h1 				{ font-size:44px; }
	header p 		{ font-size:18px; }
	h2 				{ font-size:30px; }
	section, header, footer 	{ padding:2.5vw 10vw; }
	.vignerons .vig p			{ font-size:14px; }
	footer { text-align:center; padding-top:2vw; padding-bottom:1vw; }
	footer p 						{ font-size:12px; }
}
@media (max-width:600px) {
	body 			{ background-size: 120vw, 100vw; background-position: center top, center bottom -70px; }
	h1 				{ font-size:40px; }
	header p 		{ font-size:16px; }
	h2 				{ font-size:27px; }
	section, header, footer 		{ padding:2.5vw 7vw; }
	.vignerons .vig					{ width:50%; }
	.vignerons .vig:nth-child(3n+1) { clear:none; }
	.vignerons .vig:nth-child(2n+1) { clear:left; }
	.vignerons .vig  p				{ font-size:18px; }
	section.vignerons 				{ background-color:#c1e589; }

}
@media (max-width:500px) {
	body 	{ background-position: center top, center bottom -40px; }
	h1 	{ font-size:32px; }
	header 	{ padding:4vw 7vw; }
	.commande .carton 			{ padding:5%; }
	.vignerons .vig  p			{ font-size:16px; }
}
@media (max-width:435px) {
	header br 	{ display:none; }
}
@media (max-width:400px) {
	body { background-size: 140vw, 100vw; }
	.vignerons .vig  p		{ font-size:14px; }
	.commande .offre_title 	{ font-size:24px; }
	.commande input 		{ width:95%; }
	.contact p, .contact ul 	{ font-size:18px; }
}
@media (max-width:350px) {
	body { background-size: 170vw, 100vw; }
}