/*
autheur : Jimmy Paré
courriel : jimmypare@gmail.com
site url : www.souduredufutur.com
droit d'autheur : ne pas utiliser sans ma permission écrite.
*/

html, body {
			background: #252525 url('../images/background.jpg') no-repeat top center; 
			}
			
p {
	font-family: arial, sans-serif;
	font-size: 14px;
	line-height: 16px;
	color:white;
	padding-top: 20px;
	width:50%;
}	

a  {
			font-weight: bold;
			text-decoration: underline;
			color: #F89B1D;
			}

a:hover {
			text-decoration: none;
			}			
		

/*
			classes
*/	
		
h2 {
	font-family: arial, sans-serif;
	font-size: 20px;
	line-height: 25px;
	color: white;
	display: block;
	padding:10px;
	width: 40%;
	font-weight: 400;
	font-style: italic;
}	
input, textarea {
	font-family: arial, sans-serif;
}
.orange {
			color: #f04323;
			}						
				
				
.left-box {
	width: 65%;
	float: left;
	margin-bottom:20px;
}
		
.right-box {
		width: 35%;
		float: right;
		}	

.text-center{
	text-align:center;
	font-weight:bold;
	line-height: 18px;
}		
				
/*
			end classes
*/	
				

#Accueil{
	background-image:url(../images/image01.jpg);
	background-size:100% 100%;
}

#Accueil h2{
	text-align:center;
	background-color:#f04323;
	width: 75%;
	padding-right: 30px;
	padding-left: 30px;
	font-weight: normal;
	font-style: normal;
}

#Accueil .text-center{
	width:65%;
	margin-left: 10%;
	font-size:16px;
}

#Accueil span{
	font-size:20px;
	font-family: arial, sans-serif;
	display:block;
		margin-bottom:20px;
}

#Accueil > p:last-child{
	padding-right:10%;
	width: 25%;
	display: inline-block;

}

#Services{
	background-image:url(../images/image02.jpg);
	background-size:100% 100%;
	margin-left: -1px;
}

#Services h2{
	background-color:#fac322;
}

#percementachaud{
	background-image:url(../images/image03.jpg);
	background-size:100% 100%;
}

#percementachaud h2{
	background-color:#f99a22;
}

#lacompagnie{
	background-image:url(../images/image05.jpg);
	background-size:100% 100%;
}

#lacompagnie h2{
	background-color:#f46c22;
	width: 50%;
}

#sondedetemperature{
	background-image:url(../images/image04.jpg);
	background-size:100% 100%;
}

#sondedetemperature h2{
	background-color:#f57722;
	width: 50%;
}

#nousjoindre{
	background-image:url(../images/image06.jpg);
	background-size:100% 100%;
}

#nousjoindre h2{
	background-color:#676661;
	width: 50%;
}

#layout {
			width: 940px;
			margin: 0 auto;
			}	

#banner {
			width: 940px;
			height: auto;
			}
			
						
#banner .img-responsive  {
	max-width: 100%;
	height: auto;
}			
	
			
/*
			navigation
*/
			
#navigation {
			width: 940px;
			height: 50px;
			background-size:cover;
			background-image:url(../images/nav_background.jpg);
			background-repeat:no-repeat;
			}
				
#navigation ul{
	text-align: center;
}

#navigation li {display:inline-block;} 			
			
#navigation li a {
			font-family: tahoma, arial, sans-serif; 
			font-size: 14px;
			font-weight: normal;
			text-decoration: none;
			text-align: left;
			color: #272727;
			display: block;
			height: 35px;
			padding: 18px 1em 0 1em;
			text-align: center;
			}			

#navigation li a:hover {
			text-decoration : none;
			color: #fff;
			background: url('../images/nav_hover.jpg') repeat-x 0 0;
			}		

#navigation li a.nav_on {
			text-decoration : none;
			color: #fff;
			background: url('../images/nav_hover.jpg') repeat-x 0 0;
			}			

/*
			end navigation
*/		

#header .img-responsive  {
					max-width: 100%;
					height: auto;
				}	
				 	

#main {
			width: 940px;
			background: #fff;
			 
			}
			
#main ul {
	list-style-type: disc;
	padding: 10px 15px;
}
			
#main > div{
	min-height:250px;
	padding:5%;
	padding-top: 15%;
	padding-bottom: 10%;
}
			
#main li {
	font-family: arial, sans-serif;
	font-size: 14px;
	color: white;
	line-height:16px;
}			

#main img { 
			margin: 20px 40px;
			float:right;
			}
			
#main #top-bar {
			width: 940px;
			height: 35px;
			background: url('../images/top-bar.jpg');
			background-size:cover;
			padding:0;
			min-height:inherit;
			}		
			
#footer {
			width: 940px;
			height: auto;
			
			background-image:url('../images/footer_background.jpg');
			background-repeat:no-repeat;
			background-position:80% 0%;			
			
	 
			padding-bottom:40px;
			padding-top:20px;
			}	
			
#footer p {
			color: #fff;
			 
			
			}	

			
#copy{
			width: 940px;
		
			 
			}	
#copy p {
			width:100%;
			font-size: 12px;
			text-align: center;
			color: #fff;
			padding-bottom:20px;
			margin-bottom:0;
			}	
			
#copy a {
			text-decoration: none;
			color: #fff;
			}			

#copy a:hover {
			text-decoration: underline;
			}			
			
/*
			formulaire de contact
*/			

form{
	margin-top:10%;
	padding:0;
	display:block;
	margin-left:2%;
}

input, textarea { width:98%;     font-size:12px;
   line-height:20px;
	font-style:normal;
   font-weight:normal;
   resize:none;}

   textarea{padding-right:0;}
   
input.button{
	background: #f46c22;
	color:white;
	border: 1px solid #000;
	margin-top:5px;
	width:48%;
	margin-right: 2%;
	cursor:pointer;
}

input.button:last-child{
	margin-right:0;
}
			
.button:hover {
	background: #000;
	color: #f46c22;
}
			
.inline-error{ 
	float: none;
	clear: both;
	color: #f04323;
	display: block; 
	font-weight:bold;
	font-family: arial, sans-serif;
	font-size:14px;
}			
			
::-webkit-input-placeholder {
   color:#676661;
   font-size:12px;
   line-height:20px;
   font-style:normal;
   font-weight:normal;
}

:-moz-placeholder { /* Firefox 18- */
   color:#676661;
   font-size:12px;
   line-height:20px;
   font-style:normal;
   font-weight:normal;
}

::-moz-placeholder {  /* Firefox 19+ */
   color:#676661;
   font-size:12px;
   line-height:20px;
	font-style:normal;
   font-weight:normal;
}

:-ms-input-placeholder {  
   color:#676661;
   font-size:12px;
   line-height:20px;
	font-style:normal;
   font-weight:normal;
}
/* =======================    Media css  ================================================ */


/*----Start-mediaquries-for-1024px-----*/

@media (max-width:992px) {


#layout, #banner, #navigation, #header, #main, #top-bar, #bottom-bar, #footer, #copy  {
			max-width: 100%;
			}	

}


@media(max-width:885px){
	#navigation li a{
		font-size: 12px;
		padding: 20px 1em 0 1em;
	}
}


/*----Start-mediaquries-for-768px-----*/
@media(max-width:768px){
#top-bar{
	margin-top: 235px;
}

#navigation {
	width: 940px;
}
				
#navigation li {float: none; display:block;} 			
			
#navigation li a {
			background: url('../images/nav.jpg') repeat-x 0 0;
			font-family: tahoma, arial, sans-serif; 
			font-size: 18px;
			font-weight: normal;
			text-decoration: none;
			text-align: left;
			color: #272727;
			display: block;
			text-align:center;
			padding: 10px 1em 0 1em;
			line-height:25px;
			margin-right: 1px;
			border-bottom:#0D0101 solid;
			}			

 		#footer p {
			width:50%;
			}		
#main #Accueil{
	background-image:url(../images/image01.jpg);
	background-size: cover;
	background-position:right top;
}

#Accueil .text-center {
width: 65%;

}

#Accueil p:last-child{
	width:95%;
	margin:0;
}

#Services{
	background-image:url(../images/image02.jpg);
	background-size: cover;
	background-position:right top;
}


#percementachaud{
	background-image:url(../images/image03.jpg);
	background-size: cover;
	background-position:right top;
}


#lacompagnie{
	background-image:url(../images/image04.jpg);
	background-size: cover;
	background-position:right top;
}

#sondedetemperature{
	background-image:url(../images/image05.jpg);
	background-size: cover;
	background-position:right top;
}

#nousjoindre{
	background-image:url(../images/image06.jpg);
	background-size: cover;
	background-position:right top;
	background-position:right top;
}

.left-box {
	width: 100%;
	float: none;
	margin-bottom:20px;
}
		
.right-box {
		width: 100%;
		float: none;
		}	

.text-center{
	text-align:center;
	font-weight:bold;
	line-height: 18px;
}		

#Accueil h2{
	width: 100%;
	text-align:center;
	padding-left:0;
	padding-right:0;
}

#Services h2{
	width: 100%;
	text-align:center;
	padding-left:0;
	padding-right:0;
}


#percementachaud h2{
	width: 100%;
	text-align:center;
	padding-left:0;
	padding-right:0;
}

#lacompagnie h2{
	width: 100%;
	text-align:center;
	padding-left:0;
	padding-right:0;
}


#sondedetemperature h2{
	width: 100%;
	text-align:center;
	padding-left:0;
	padding-right:0;
}


#nousjoindre h2{
	width: 100%;
	text-align:center;
	padding-left:0;
	padding-right:0;
}

p {
	width:100%;
}	
input.button{
	height: 40px;
}

}
/*----//End-mediaquries-for-768px-----*/



/*----Start-mediaquries-for-640px-----*/
@media(max-width:640px){

.left-box {
		width: 100%;
		float: left;
		}
		
.right-box {
		width: 100%;
		float: right;
		}	
}
/*----//End-mediaquries-for-640px-----*/


/*----Start-mediaquries-for-480px-----*/
@media(max-width:480px){
	h2{
	font-size:16px;
	}
	
	#Accueil .text-center{
		font-size:12px;
	}
	
	p{
		font-size:12px;
	}
	
	#copy{
		font-size:10px;
	}
	
	#navigation li a{
		font-size:14px;
	}
}
/*----//End-mediaquries-for-480px-----*/

/*----Start-mediaquries-for-320px-----*/
@media(max-width:320px){
	.map-responsive		{ width:95%}
	

}