/*
*
 {
	border: solid 1px red;
	opacity: 0.8;
}
*/

@font-face {
    font-family: 'Roboto-Thin';
    src: url('Roboto-Thin.ttf');
}

@font-face {
    font-family: 'Roboto-ThinItalic';
    src: url('Roboto-ThinItalic.ttf');
}

@font-face {
    font-family: 'Roboto-Light';
    src: url('Roboto-Light.ttf');
}



@font-face {
    font-family: 'Roboto-Regular';
    src: url('Roboto-Regular.ttf');
}



html, body {
	margin: 0;
	padding: 0;	

}


a {
 
	text-decoration: none;
 
}


#header {

	height: 140px;
	
	background: linear-gradient(45deg, rgba(064,070,090,1), rgba(064,080,090,0.8), rgba(064,080,090,0.6));
	
	padding: 0;
	margin: 0;
	
	padding-left: 20px;
	padding-right: 0px;
	
	border-bottom: solid 4px white;

}




@media only screen and (max-width:1000px) {
	
	#home {
		background-image: url("media/P8201449low.jpg"), url("media/P8201449llow.jpg");
		
	}
}

@media only screen and (min-width:1000px) {
	
	#home {
		background-image: url("media/P8201449high.jpg"), url("media/P8201449llow.jpg");

	}
}





#home {

	height: auto;

	min-height: calc( 100vh - 164px );
	
	
	background-position:center center;
	background-size: cover;
	
	background-color: white;
	
	margin: 0;
	padding: 0;
	padding-top: 0;
	

		
	
	border-top: 1px solid white;
	
}



#logo {
	
	
	margin-top: 20px;
	float: left;
	margin-left: 80px;
	
}

#logo img {
	
	
	height: 100px;
	

}




/* Responsive Navigation styles begin here */


nav > input,
.nav-button {
 
	display: none; /* hidden on large screens */
	
}

 .nav-inner {
	  
	float: right;
	width: 614px; 
	
	margin-top: 40px;
   
  }

.menu {
	
	width: 180px;
	height: 50px;
	border-radius: 10px;
	border: solid 1px rgba(229,58,24,1);
	

	font-size: 22px;
	font-family:'Roboto-Thin', sans-serif;
	
	/*color: rgba(064,070,090,1);*/
	color: white;
	
	margin-right: 20px;
	
	line-height: 52px;
	
	text-align: center;
	
	display: inline-block;	
	
	
}


.menu:hover {
	
	background-color: rgba(255,255,255,0.2);
	
}



#telmail {
	

	height: 40px;

	
	background: linear-gradient(90deg, rgba(064,070,090,1), rgba(064,090,090,0.1), rgba(064,090,090,0.1));
	
	
	color: rgba(064,070,090,1);
	
	
	
	line-height: 40px;
	text-align: right;
	
	font-family: 'Roboto-Regular', sans-serif;
	font-size: 18px;
	
	padding-right: 50px;

	
}



#cadrevp {
	
	text-align: center;
	
	
	width: 480px;
	height: 140px;

	margin-top: 200px;
	
	margin-left: auto;
	margin-right: auto;
	

	padding-top: 20px;
	padding-bottom: 20px;
	

	
}


#vp {
	
	width: 460px;
	height: 40px;
	line-height: 40px;
	background-color: rgba(255,255,255,0.6);
	
	font-size: 26px;
	
	border-radius: 2px;
	
	
	font-family: 'Roboto-Regular', sans-serif;
	
	color: rgba(064,070,090,1);
	
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	
	padding-top: 10px;
	padding-bottom: 10px;
		
	margin-bottom: 10px;
}

#demanderundevis {
	
	
	color: white;
	
	background-color: rgba(66,133,244,0.8);
	
	font-family: 'Roboto-Light', sans-serif;
	
	font-size: 30px;
	

	line-height: 80px;
	

	padding: 10px;
	padding-left: 40px;
	padding-right: 40px;
	
	text-align: center;
	
	border-radius: 40px;
	
	

	
}




#demanderundevis:hover {
	
	
	background-color: rgba(66,133,244,0.9);
	
}




#section0 {
	
	height: auto;
	min-height: 0;
	
	
	background: linear-gradient(135deg, rgba(064,070,090,1), rgba(064,080,090,0.6));
	
	margin: 0;
	padding-top: 2%;
	padding-right: 10%;
	padding-left: 10%;
	padding-bottom: 40px;
	
	border-top: solid 1px white;
	border-bottom: solid 1px white;
	
}

#section0 h1 {
	
	text-align: center;
	
	color: white;
	font-size: 30px;
	font-family:'Roboto-ThinItalic', sans-serif;
	
	margin-bottom: 40px;
	
}

#section0 p {
	
	text-align: center;
	
	width: 90%;
	margin-left: auto;
	margin-right: auto;
	margin-top: 40px;
	
	color: white;
	font-size: 20px;
	font-family:'Roboto-Thin', sans-serif;
	
}

#section0 a {
	
	color: white;
	
	
}

#section1 {
	
	height: auto;
	min-height: 100vh;

	background-color: rgba(064,070,090,0.1);
	
	margin: 0;
	padding: 2%;
	padding-bottom: 0;
	
}


h2 {
	
	text-align: center;
	
	color: rgba(064,070,090,1);
	font-size: 30px;
	font-family:'Roboto-ThinItalic', sans-serif;
	
	margin-bottom: 45px;
	
	
}

	

.article {

	width: 92%;
	
	/*max-width: 400px;*/

	/*min-height: 400px;*/

	background-color: white;
	
	margin-bottom: 2%;
	padding: 4%;
	
	
	
	display: inline-block;

}	

h3 {
	
	color: rgba(064,070,090,1);
	font-size: 20px;
	font-family:'Roboto-Thin', sans-serif;
	

}


.article p {
	
	color: rgba(064,070,090,1);
	font-size: 18px;
	font-family:'Roboto-Thin', sans-serif;
	


}

.portfolio {
	
		width: calc( 25% - 3px );
	
}


.machine {
	
	width: 90%;
	max-width: 800px;
	display: block;
	margin-left: auto;
	margin-right: auto;
	
}




#formulaire {
	
	background-color: rgba(064,080,090,0.8);
	
	padding-right: 10%;
	padding-left: 10%;
	padding-top: 25px;
	
	text-align: center;
	border-bottom: 1px solid white;
	
}


#formulaire h4 {
	
	text-align: center;
	
	color: white;
	font-size: 30px;
	font-family:'Roboto-Light', sans-serif;
	
	
}




#pseudo {
	
	
	width: 500px;
	height: 20px;

	
	
	font-size: 15px;
	font-family: 'Roboto-Light', sans-serif;
	color: rgba(064,070,090,1);
	
	
}

#mailcontact {
	
	
	width: 500px;
	height: 20px;

	
	
	font-size: 15px;
	font-family: 'Roboto-Light', sans-serif;
	color: rgba(064,070,090,1);
	
	
}

#sujet {
	
	
	width: 500px;
	height: 20px;

	
	
	font-size: 15px;
	font-family: 'Roboto-Light', sans-serif;
	color: rgba(064,070,090,1);
	
	
}


#textmessage {
	
	height: 200px;
	width: 500px;
	
	font-size: 15px;
	font-family: 'Roboto-Light', sans-serif;
	color: rgba(064,070,090,1);
	
}


#boutonEnvoi {
	
	width: 250px;
	height: 45px;
	cursor: pointer;
	margin-bottom: 50px;
	
	font-size: 20px;
	font-family: 'Roboto-Light', sans-serif;
	color: rgba(064,070,090,1);
	color: white;
	background-color: rgba(66,133,244,0.8);
	
	border: 1px solid white;
	border-radius: 5px;
	
}





#footer {

	height: auto;
	
	background: linear-gradient(0deg, rgba(064,070,090,1), rgba(064,080,090,0.8));
	
	margin: 0;
	
	
	font-size: 18px;
	font-family: 'Roboto-Thin', sans-serif;
	color: white;
	
	
}





.adresse {

	height: 150px;
	width: calc( ( 94% - 100px ) / 3 );
	min-width: 250px;

	text-align: center;

	display: inline-block;
	
	margin-left: 1%;
	margin-right: 1%;
	margin-top: 60px;
	margin-bottom: 40px;	
	
	
}



#nav-back {

	width: 64px;
	height: 64px;
	display: inline-block;
	
	
	
	

}


#back {
	
	width: 60px;
	height: 60px;
	
	border: 2px solid white;
	border-radius: 32px;
	
	background-color: rgba(064,070,090,1);
	opacity: 0.5;
	
	display: inline-block;	
	
	
	
		
}


/* small screens styles */

@media only screen and (max-width: 1400px) {

.portfolio {
		
		width: calc( 34% - 11px );
		
	}
}


@media only screen and (max-width: 1000px) {
	
		
		
		
	#logo {
	
	
		margin-left: 0;
	
	}
		

	#telmail{
	
		text-align: center;
		padding-right: 0;

		background: linear-gradient(90deg, rgba(064,070,090,1), rgba(064,090,090,0.1), rgba(064,090,090,0.1), rgba(064,090,090,0.1));
	
	
	}

	
	
	#cadrevp {
	
		margin-top: 150px;
	}
	
	
	

	
	
	
 .nav-inner {
	  
	
	transform: translateX(-200%);
	will-change: transform;
	 
   position: absolute;
   width: calc(100% - 40px);
   margin-top: 170px;
   padding-bottom: 20px;
   background-color: transparent;
    
  }
  

 
 input:checked ~ .nav-inner {
	
    transform: translateX(0px);
	transition: transform .2s;
	
  }
 

  
  /* Button deco hamburger */
  .nav-button {
	 
	display: block;
	position: absolute;
	margin-top: 22px;/*28px*/
    width: 50px;
	height: 50px;
	right: 30px;
	
	background-color: transparent;
	
    cursor: pointer;
	
}
  
 
  
.ham{
	width: 50px;
	height: 8px;
	/*background-color: rgba(064,070,090,1);*/
	background-color: rgba(255,255,255,0.8);
	
	margin-bottom: 10px;
	border-radius: 4px;
	  
	  
  }
  
  /*mise en forme menu block*/
.menu {
	width: 100%;
	height: 50px;
	border-radius: 10px;
	
	margin-top: 20px;
	

	background: linear-gradient(45deg, rgba(064,070,090,1), rgba(064,080,090,0.8), rgba(064,090,090,0.4));

	font-size: 25px;
	
	margin-right: 0;
	margin-left: 0px;
	
	line-height: 50px;
	
	text-align: center;
	
	color: white;
	
	
}

.menu:hover {
	
	background-color: rgba(255,255,255,0.9);
	
	
}


.portfolio{
	
	width: calc( 50% - 2px );
	
}



.adresse {

	height: 50px;
	width: 100%;
	min-width: 250px;

	text-align: center;

	display: inline-block;
	
	margin-left: 0%;
	margin-right: 0%;
	margin-top: 60px;
	margin-bottom: 40px;	
	
	
}


#nav-back {

	width: 100%;
	height: 64px;
	display: inline-block;
	text-align: center;
	
	margin-bottom: 60px;	
	

}



}


@media only screen and (max-width: 600px) {
	
	
	
#pseudo {
	
	
	width: 90%;
	
}

#mailcontact {
	
	
	width: 90%;


}

#sujet {
	
	
	width: 90%;


}

#textmessage {
	
	
	width: 90%;
	
	
}
	
	
	

}



@media only screen and (max-width: 500px) {
	
	
	    .nav-button {
	 
		right: 10px;
	
  }
  
	
	#telmail {
		
		font-size: 14px;
		
	}
	
	
	#cadrevp {
	
	
		width: calc( 100% - 50px);

		margin-top: 120px;

		padding: 20px;
		

	
	}


	#vp {
		
		width: 310px;
		
		font-size: 20px;
		
		margin-left: auto;
		margin-right: auto;
		
		
	}


	
	#demanderundevis {
	
		padding-left: 20px;
		padding-right: 20px;
		
		
	}

	#logo{
		
		/*margin-left: -45px;
		*/
	}
	
	
	#telmail{
	
	
		background: linear-gradient(90deg, rgba(064,070,090,1), rgba(064,070,090,0.1), rgba(064,070,090,0.1), rgba(064,070,090,0.1), rgba(064,070,090,0.1), rgba(064,070,090,0.1));
	
	
	}
	

	
#section0 h1 {
	

	font-size: 25px;

	
}

#section0 p {
	
	width: 100%;
	font-size: 18px;
	text-align: justify;
	
	
}
	
.portfolio {
	
	width: 100%;
	
}
	
	h3 {
	
	text-align: justify;


}

	.article p {
	
	text-align: justify;


}



#formulaire {
	
	padding-right: 5%;
	padding-left: 5%;
	
}
	
#formulaire h4 {
	
	
	font-size: 25px;
	
	
}



#pseudo {
	
	
	width: 90%;
	
}

#mailcontact {
	
	
	width: 90%;


}

#sujet {
	
	
	width: 90%;


}

#textmessage {
	
	
	width: 90%;
	
	
}
	
	
	
	
	
}


#back1 {
	
	width: 25px;
	height: 2px;
	
	background-color: white;
	position: absolute;
	
	transform: translateX(26px) translateY(28px) rotate(45deg);
		
}

#back2 {
	
	
	width: 25px;
	height: 2px;
	
	background-color: white;
	position: absolute;
	
	transform: translateX(9px) translateY(28px) rotate(135deg);
	
}

#back:hover {
	
	opacity: 0.8;
	
}