@charset "utf-8";
/* CSS Document */


h2 {
	font-family: 'Trebuchet MS', Helvetica, sans-serif;
	font-weight:lighter}

/*Bannière et parallax logo*/

	#banniere {
		height:80vw;
		background-image: url(Images/contact.jpg); 
		background-repeat:no-repeat;
		background-position:95%;  
		background-size:auto 100%;
		padding:0 0 0 0;
		}
	#cadre_logo {
		height:80vw;
		background-image:
			url(Images/welcome/logo-w.png),
			url(Images/welcome/gauche40.png), 
			url(Images/welcome/haut40.png), 
			url(Images/welcome/droite40.png), 
			url(Images/welcome/bas40.png)
			;
		background-repeat:no-repeat;
		background-position:50% 50%;
		background-size:100%;
		display:flex;
		flex-direction:column;
		align-items:center;
		justify-content:flex-end
		}

/*Coordonnées*/
	
#coordonnées {display:flex;
	/*width:80vw;*/
	margin:auto;
	padding:0;
	text-align:right;
	margin-top:15px;
	background-color:white;
	overflow:hidden;
	}
#bois {width:0vw;
	/*height:40px;
	background-image:url(Images/bois-h.png);*/
	}
/*#vert_logo {height:100%;
	background-color:rgb(217,222,138);
	background-image:url(Images/logo_full.png);
	background-size:80%;
	background-repeat:no-repeat;
	background-position:50% 30%;
	}*/
#titre {
	background-color: rgb(120,180,216);
	height: 40px;
	width: 90vw;
	color: rgb(105,91,64);
	padding-top: 0;
	padding-right:10vw; 
}
#titre h2 {
	padding:0;
	margin:0;
	
	line-height:40px}
#bleu {color:rgb(120,180,216);
	margin-bottom:2px;
	padding-right:10vw;
	font-size:1.6em}
#blocdroite {
	min-height:22vw;
	display:flex;
	flex-direction:column;
	justify-content:center;}
#droite p {margin-bottom:20px;
	padding-right:10vw}
#phrase {width:80vw;
	margin:auto;
	color:white;
	margin-bottom:50px;
	margin-top:50px}

/* Formulaire */

#formulaire {width:80vw;
	margin:auto;
	padding:15px 10vw 0 10vw;
	margin-bottom:50px;
	color:white;
	background-color: rgb(217,222,138)
	}
form > div {
	display:flex;
	flex-direction:column;
	margin-bottom:1vw}
label {display:block;
	margin-bottom:0.5vw}
input { width:80vw;
	border:none;
	height:30px;
	margin-bottom:10px;
	}
form .prenom{display:none}
textarea {width:80vw;
	height:20vw;
	border:none;}
#submit {width:120px;
	height:37px;
	background-color:rgba(120,180,216,1);
	border-radius:5px;
	border:none;
	box-shadow: 2px 2px 2px black;
	margin-top:20px;
	margin-bottom:30px;
	font-weight:bold}
#submit:hover {
	cursor:pointer;
	box-shadow: 2px 2px 2px rgb(105,91,64) inset;}
#valider {align-items:center;
}

@media screen and (min-width: 480px) {


#banniere {
	background-attachment:fixed;
	height:32vw;
	background-size:118%;
	background-position:top right;
	padding:0 36vw 0 0;}
#cadre_logo {
	height:32vw;
	background-size:80%;
	}
	
#coordonnées {
	width:calc(80vw );
	min-height:22vw}
	
#bois {width:32vw;
	height:40px;
	background-image:url(Images/bois-h.jpg);
	}
#vert_logo {height:100%;
	background-color:rgb(217,222,138);
	background-image:url(Images/logo_full.png);
	background-size:80%;
	background-repeat:no-repeat;
	background-position:50% 30%;
	}

#titre {
	width: 43vw;
	}
#titre h2, #bleu, #droite p {
	margin-right:3vw}

#phrase {width:80vw;}

form > div {
	flex-direction:row;
	justify-content:space-between;}

#formulaire {width:80vw;
background-color:transparent;
	}
input { width:38vw;}
textarea {width:80vw;
	height:20vw}
#valider {justify-content:center}
}

@media screen and (min-width: 768px) {

	
#coordonnées {
	margin-top:85px;
	width:60vw;}
#bois {width:24vw;}

#titre {
	width: 36.5vw;}

#phrase {width:60vw;}

#formulaire {width:60vw;
	}
input { width:28vw;}
textarea {width:60vw;
	height:20vw}
	
}

@media screen and (min-width: 1024px) {

#coordonnées {display:flex;
	width:50vw;
	margin:auto;
	padding:0;
	text-align:right;
	margin-bottom:5vw;
	margin-top:85px;
	background-color:white;
	overflow:hidden
	}
#bois {width:20vw;
	height:40px;
	}
#vert_logo {height:100%;
	background-color:rgb(217,222,138);
	background-image:url(Images/logo_full.png);
	background-size:15vw;
	background-repeat:no-repeat;
	background-position:50% 30%;
	}
#titre h2, #bleu, #droite p {
	margin-right:0}
#titre {
	background-color: rgb(120,180,216);
	height: 40px;
	width: 30.5vw;
	color: rgb(105,91,64);
	padding-top: 0;
	padding-right:0vw; 
}
#titre h2 {
	padding:0;
	margin:0;
	margin-right:2vw;
	font-size:1.8em;
	line-height:40px}
#bleu {color:rgb(120,180,216);
	margin-bottom:2px;
	padding-right:2vw}
#droite p {margin-bottom:2vw;
	padding-right:2vw}
#phrase {width:50vw;
	margin:auto;
	color:white}

/* Formulaire */

#formulaire {width:50vw;
	margin:auto;
	padding-top:5vw;
	margin-bottom:7vw;
	color:white
	}
form > div {
	display:flex;
	flex-direction:row;
	justify-content:space-between;
	margin-bottom:1vw}
label {display:block;
	margin-bottom:0.5vw}
input { width:23vw;
	height:3vw}
textarea {width:50vw;
	height:10vw}
#submit {width:120px;
	height:37px;
	background-color:rgba(120,180,216);
	border-radius:5px;
	border:none;
	box-shadow: 2px 2px 2px black;
	margin-top:2vw;}
#submit:hover {
	cursor:pointer;
	box-shadow: 2px 2px 2px rgb(105,91,64) inset;}
#valider {justify-content:center}
	
}