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

/*Bannière et parallax logo*/

	#banniere {
		height:80vw;
		background-image: url(Images/illustration.jpg); 
		background-repeat:no-repeat;
		background-position:50% 60%;  
		background-size:auto 145%;
		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
		}

/* Section principale */
	
section nav {
	padding-top:53px;
	display:flex;
	flex-direction:column;
	justify-content:center;
	align-items:center;}
section nav h4 {
	margin:0 10px 0 10px;
	color:rgb(120,180,216)}
section nav h4:hover {
	color:rgb(217,222,138);
	cursor:pointer}
.selection {
	color:rgb(217,222,138);
	}	
	
	
section div {
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
	padding:0 30px 0 30px;
	margin-top:20px
	}
figure {
	margin:2vw;
	height:90vh;
	max-height:90vw;
	width:66vh;
	max-width:66vw;
	overflow:hidden;
	border-radius:1vw 1vw;
	display:block;
	transition:all ease 500ms
	}
.hidden {
	display:none}
figure img {
	height:100%;
	}
#selectionT {
	}


figure h2 {
		color:rgb(105,91,64);
		background-color:rgba(255,255,255,0.6);
		width:100%;
		position:relative;
		top:-60px;
		font-size:18px;
		line-height:20px;
		height:60px;
		margin:0;
		padding-left:1.6vw;
		padding-top:10px;}

/* Processus du projet*/

#process {
	display:none;
	background-color:rgba(255, 255, 255, 0.9);
	background-color:rgba(0,0,0,0.9);
	width:100%;
	height:100%;
	overflow:auto;
	position:fixed;
	top:0;
	left:0;
	z-index:20}	
	
#hautfixe {
	margin-top:4vw;}
#bases {
	padding:20px 40px 20px 40px;
	text-align:justify;
	background-color:rgb(238,241,196);
	box-shadow:3px 3px 3px black inset}
#bases h2 {
	margin:0;
	margin-bottom:10px}
#bases ul {
	font-size:0.8em}
#contact {
	box-shadow:3px 3px 3px black;
	background-color:rgb(120,180,216);
	width:70vw;
	border-radius:5px;
	border:none;
	text-align:center;
	margin:auto;
	margin-top:30px;
	margin-bottom:30px;
	display:block;
	cursor:pointer
}
#contact h2 {margin:10px}

#visuels {
	display:flex;
	flex-direction:column}


#visuels div {
	background-size:90%;
	background-position:0% 0%;
	background-repeat:no-repeat;
	width:100%;
	height:70vw;
	display:flex;
	flex-direction:column;
	justify-content: flex-end;
	text-align:center;
	transition: background ease-in-out 1s
}
#visuels div p {
	display:flex;
	flex-direction:column;
	justify-content: flex-end;
	text-align:justify;
	padding:0px 40px 0px 40px;
	margin:auto;
	flex:5;
	color:white;
	font-size:0.8em;
	opacity:1}
#visuels div h2 {
	color:rgb(217,222,138);
	font-size:1.2em}
#modelisation {
	background-image:url(Images/modelisation.png);
	z-index:4}
#modelisation:hover p {
	opacity:1;
	}
#reglages {
	background-image:url(Images/montage.png);
	z-index:3}
#reglages:hover p {
	opacity:1
	}
#calcul {
	background-image:url(Images/dessin.png);
	z-index:2}
#calcul:hover p {
	opacity:1
	}
#postprod {
	background-image:url(Images/postprod.png);
	z-index:1}
#postprod:hover p {
	opacity:1
	}
	
#contact_process {display:none;
align-items:flex-start;
flex-direction:column;}

#coo {
	display:none;
	box-shadow:3px 3px 3px black;
	background-color:rgb(217,222,138);
	width:70vw;
	border-radius:5px;
	border:none;
	text-align:center;
	margin:auto;
	margin-top:30px;
	font-size:1em;
	padding-bottom:2px
}
#coo p {margin:10px;}

#coordonnees {
	margin-left:6vw;
	width:80vw;
	height:5vw;
	padding:0vw 40px 20px 40px;
	color:rgb(120,180,216);
	font-size:0.8em
	}
#coordonnees:hover {
	cursor:pointer}
	
#formulaire {width:80vw;
	margin:auto;
	padding-top:0px;
	margin-bottom:50px;
	color:white
	}
form > div {
	display:flex;
	flex-direction:column;

	margin-bottom:1vw}
label {display:block;
	margin-bottom:0.5vw}
input { width:80vw;
	height:30px;
	margin-bottom:10px}
form .prenom{display:none}
textarea {width:80vw;
	height:20vw}
#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;}
#submit:hover {
	cursor:pointer;
	box-shadow: 2px 2px 2px rgb(105,91,64) inset;}
#valider {align-items:center}

#fermeture {
	background-image:url(Images/close.png);
	background-size:100%;
	background-position:center;
	background-repeat:no-repeat;
	width:15vw;
	height:20vw;
	position:fixed;
	top:0;
	right:0;
	opacity:0.4;
	cursor:pointer;
	z-index:30}

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


#banniere {
	background-attachment:fixed;
	height:32vw;
	background-position:center -19vw;
	background-size:125%;
	padding:0 36vw 0 0;}
#cadre_logo {
	height:32vw;
	background-size:80%;
	}
	
figure {
	height:45vh;
	max-height:45vw;
	width:33vh;
	max-width:33vw;
	}
#coordonnees {
	margin-left:6vw;}
#bois {width:32vw;}

#titre {
	width: 48.5vw;}

#phrase {width:80vw;}

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

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


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


	
figure {
	height:45vw;
	width:33vw;}
section nav {
	flex-direction:row;}
.selection {
	color:rgb(217,222,138);
	}
#selectionT {
	height:4px;
	width:30px;
	background-color:rgb(217,222,138);
	margin:30px 0 0 0;
	padding:0;
	position:relative;
	right:580px;
	transition:all ease 500ms}


	
#coordonnées {
	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) {
	
	
figure {
	height:30vw;
	width:22vw;}
.flou {
	filter: blur(2px);
	opacity:0.7}
section div {
	margin-top:50px
	}

figure h2 {
		top:-8vw;
		left:-110%;
		font-size:1.7vw;
		line-height:2vw;
		height:9vw;
		padding-left:0.8vw;
		padding-top:2vw;
		transition:all ease-out 200ms}

figure:hover h2 {
		left:0%;}
		
/* Processus du projet*/

#process {
	display:none;
	background-color:rgba(255, 255, 255, 0.9);
	background-color:rgba(0,0,0,0.9);
	width:100%;
	height:100%;
	position:fixed;
	top:0;
	left:0;
	z-index:20}	
	
#hautfixe {
	margin-top:4vw;
	display:flex;
	align-items:center}
#bases {
	width:30vw;
	padding:20px 40px 20px 40px;
	text-align:justify;
	margin-left:6vw;
	box-shadow:3px 3px 3px black inset}
#bases h2 {
	font-family: 'Trebuchet MS', Helvetica, sans-serif;
	color:rgb(105,91,64);
	margin:0;
	margin-bottom:10px}
#contact {
	box-shadow:3px 3px 3px black;
	background-color:rgb(120,180,216);
	width:25vw;
	border-radius:5px;
	border:none;
	text-align:center;
	margin:auto;
	display:block;
	cursor:pointer
}
#contact h2 {margin:10px}

#visuels {display:flex;
	flex-direction:row;
position:fixed;
bottom:1.5vw;}


#visuels div {
	display:block;
	background-size:100%;
	background-position:50% 100%;
	background-repeat:no-repeat;
	width:25vw;
	height:20vw;
	max-width:50vh;
	transform:scale(1.2);
	position:relative;
	text-align:center;
	margin-top:-30px;
	transition: background ease-in-out 1s
}
#visuels div:hover {
	background-image:url(Images/fondcarres.png);
	cursor:pointer;}
#visuels div p {
	text-align:justify;
	width:18vw;
	margin:auto;
	transform:translateX(-1vw);
	margin-top:3vw;
	color:white;
	font-size:0.8em;
	opacity:0}
#visuels div h2 {
	position:absolute;
	bottom:-0.6vw;
	left:50%;
	transform:translateX(-50%);
	font-size:1em;
	color:black;
	font-family: 'Trebuchet MS', Helvetica, sans-serif;}
#modelisation {
	
	left:15vw;
	z-index:4}
#modelisation:hover p {
	opacity:1;
	}
#reglages {
	
	left:10vw;
	z-index:3}
#reglages:hover p {
	opacity:1
	}
#calcul {
	
	left:5vw;
	z-index:2}
#calcul:hover p {
	opacity:1
	}
#postprod {
	
	z-index:1}
#postprod:hover p {
	opacity:1
	}


#contact_process {display:none;
align-items:flex-start;
flex-direction:row;
position:fixed;
bottom:1.5vw;}

#coo {
	display:none;
	box-shadow:3px 3px 3px black;
	background-color:rgb(217,222,138);
	width:50vw;
	border-radius:5px;
	border:none;
	text-align:center;
	margin:auto;
	font-size:1.8em;
}
#coo p {margin:10px;}

#coordonnees {
	margin-left:6vw;
	width:30vw;
	height:10vw;
	padding:5vw 40px 20px 40px;
	color:rgb(120,180,216);
	}
#coordonnees:hover {
	cursor:pointer}
	
	

#formulaire {width:50vw;
	margin:auto;
	margin-left:calc(( 14vw - 80px ) / 2);
	color:white
	}
	
form > div {
	display:flex;
	flex-direction:row;
	justify-content:space-between;
	margin-bottom:0.8vw}
label {display:block;
	margin-bottom:0.5vw}
input { width:23vw;
	height:2vw}
textarea {width:50vw;
	height:7vw}
#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}

#fermeture {
	background-image:url(Images/close.png);
	background-size:80%;
	background-position:center;
	background-repeat:no-repeat;
	width:15vw;
	height:15vw;
	position:fixed;
	opacity:0.2;
	cursor:pointer;
	z-index:30}

}

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

#visuels div p {
	font-size:1em;
	width:10vw}
#visuels div h2 {
	font-size:1vw;
	bottom:1vw;}

}