/*
	 CSS-Tricks Example
	 by Chris Coyier
	 http://css-tricks.com
*/

* { 
    margin: 0; 
    padding: 0; 
	
}

html, body {
 
    height: 100%;
    margin: 0;
  /*  min-width: 1000px;*/
    padding: 0;
}
#page, #home{
    margin: auto;
    min-height: 100%;
    position: relative;
    width: 100%;
	font-size:1.1em;
	line-height:1.4em;
}



.content{
	/*height:300px;*/
	 /*padding-bottom: 229px;*/}


body{font-family: Helvetica, Arial, sans-serif;
position:relative;
 font-size: 80%;
 color:#343232;
 
 }
 
.home{
background:#4b79b4 url("/images/home.jpg")  fixed  no-repeat center top; 
background-size:auto;
background-size:cover;}
 
#bg { position: fixed; top: 0; left: 0; }

.bgwidth { width: 100%; }

.bgheight { height: 100%; }
		
.container { 
position: relative;
 width: 100%; 
 margin: 0;
 
 }
 
 #logo{
	margin: auto;
     padding: 44px 0 36px 0;
    text-align: center;
    width: 90%;}
	

	
	#logo h1{
		margin:0;
		padding:0;}

	  
 

h1, h2, h3{
	font-family: "proxima-nova",Helvetica, Arial, sans-serif;
	font-weight:normal;}
	
.sub_header{
	background-color: rgba(5, 69, 151, 0.6);
	color:#ffffff;
	padding: 0 0 18px 0;
	
	}
	
.sub_header a{
	background: url("../images/fleche.png") no-repeat scroll left top rgba(0, 0, 0, 0);
    color: #ffffff;
    display: block;
    float: left;
    font-size: 1.1em;
    font-weight: bold;
    margin:0;
	
    padding: 0 0 0 25px;
    text-align: left;
    text-decoration: none;
    width: 171px;
       }
	   
	   .sub_header a:hover, .sub_header a.actif{
		   color:#bccf00;
		   background: url("../images/fleche_verte.png") no-repeat  left top ;}
	
	.sub_header h2{
		display:block;
		  font-size: 3em;
		  line-height: 2em;
		width:980px;
		margin:auto;
		text-align:center;}
		
nav{
	width:980px;
	margin:auto;}
	
	nav ul{
		margin:15px 0 0 0;
		padding:0;}
		
		nav li{
			list-style:none;}
		

	
	#footer {
    background-color: rgba(5, 69, 151, 0.72);
    color: #ffffff;
	
   
    padding: 0;
    
  
    width: 100%;
}
.home #footer{ bottom: 0;
  
    left: 0;position: absolute;}


#footer em {
    font-style: normal;
}
#footer p {
    margin: 0 10px;
}

#footer article{
	width:780px;
	margin: 0 auto;
	padding:0 100px;
	}
	
	#footer h1{
		float:left;
		font-size:2.2em;
		margin:25px 10px;
		
		}
			#footer h2{
			float:right;
			font-size:2.2em;
			margin:25px 10px;}
		#footer p{
			width:500px;
			float:left;
			
			}
			
	#footer .contact{
	background: none repeat scroll 0 0 #bccf00;
    color: #04326d;
    display: block;
    float: right;
    font-size: 1.2em;
   -webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
    padding: 20px 0;
    text-align: center;
    text-decoration: none;
    width: 190px;
margin: 0 10px;}
	
	#footer .contact:hover{
		background:#ffffff;}
	
	
.bottom{
	background: none repeat scroll 0 0 #054597;
   margin: 20px 0 0;
    padding: 20px 0;}
	
#footer .bottom p{
	/*width:100%;*/
	width:780px;
	/*padding:0 100px;*/
	display:block;
	float:none;
margin: auto;}
	
.adresse{
	float:left;
	width:300px;
	font-size:0.9em;}
	
.bottom a{
		color:#ffffff;}
		
.bottom a:hover{
	color:#bccf00;}
	
.about{
	background:url(../images/bg_valeurs.jpg) no-repeat center left #227501;
	 height: 391px;}
	 
 .tertiaire{
	background:url(../images/bg_tertiaire.jpg) no-repeat center left #e2e5e8;
	 height: 391px;}
	 
 .public{
	background:url(../images/bg_public.jpg) no-repeat center left #f5fafe;
	 height: 391px;}
	 
 .industrie{
	background:url(../images/bg_industrie.jpg) no-repeat center left #f1f1e7;
	 height: 391px;}
	 
	 
.services{
	background:url(../images/bg_services.jpg) no-repeat center left #ebe8e4;
	 height: 391px;}
	 
#main{
	width:865px;
	margin:auto;
	padding:40px 15px 0 100px;
min-height: 28vh;}
	
	#main .colonne_50_50{
		width:382px;
		padding:0;
		margin:0;}
		
#main h1{
	 line-height: 1.1em;
	margin-bottom:50px;
	}
		
#main H2{
	background:url(../images/fleche_grise.png) no-repeat left top;
	padding:0 0 0 30px;
	margin:0 0 20px 0;}
	
#main .content{
	padding-bottom:60px;
	 padding: 0 0 60px 35px;}
	
.colonne_droite{
	float:right;}
	
	.colonne_gauche{
		float:left;}
		
		
figure img{
	margin:0 0 0 10px;}
	
ul{
	margin:0 0 0 10px;}
	
li{
	margin:5px 0;}
	   
	/*------------------------------------------------------------------------
CH9 	MEDIAQUERIES SMART PHONE ET TABLETTE
------------------------------------------------------------------------*/
/*------------------------------------------------------------------------
CH91 		 SMART PHONE ET TABLETTE < 1024px de large
------------------------------------------------------------------------*/

 @media only screen and (max-width: 1023px) {
	 
.home{
	background:#4b79b4 url(/images/home_1023.jpg)no-repeat fixed center top; 
background-size:auto;
background-size:cover;
	}
#page {
/* max-width: 768px;*/
}
header#top {
/* width: 716px;*/
}

.sub_header h2 {
    line-height: 1.2em;
    width: 768px;
}

nav {
   
    width: 768px;
}

.sub_header a {
    background: none;
    border-left: 1px solid #ffffff;
  
    margin: 0 0 0 24px;
    padding: 0 0 0 10px;
	width:inherit;}
	
.sub_header a:hover, .sub_header a.actif {
    background: none;
   }	
	
	#footer article {
  
    padding: 0;
    width: 768px;
}

#footer .bottom p {
   
    padding: 0 ;
    width: 500px;
}

#main {
    padding: 20px 15px 0 20px;
    width: 728px;
}

#main .colonne_50_50 {
   
    width: 45%;
}
    

}

/*------------------------------------------------------------------------
CH92 		 480px de large < SMART PHONE ET TABLETTE < 768px de large
------------------------------------------------------------------------*/

@media only screen and (min-width: 480px) and (max-width: 767px) {
.home{
	background:#4b79b4 url(/images/home_768.jpg)no-repeat  fixed  center top; 
background-size:auto;
background-size:cover;
/*font-size:1em;*/
	}
#page {
/* max-width: 500px;*/
}
header#top {
/* width: 460px;*/
}

.sub_header h2 {
    line-height: 1.2em;
    width: 460px;
}

.industrie, .tertiaire, .public, .services, .about {
    height: 200px;
	background-size:auto 100%;
}

nav {
   
    width: 460px;
}

.sub_header a {
    background: none;
    margin: 10px 0 0 10px;
	width: 132px;
	font-size: 1em;}
	
#item4, #item5{
	/* width: 209px;*/
	}
	
.sub_header a:hover, .sub_header a.actif {
    background: none;
   }	
   
   #main h1 {
    font-size: 1.6em;
   
}

#main H2 {
   
    font-size: 1.4em;
  
}
	
	#footer article {
  
    padding: 0;
    width: 460px;
}

#footer .bottom p {
   
    padding: 0 ;
    width: 460px;
}

#footer h1 {
    float: none;
    line-height: 1.2em;
    text-align: center;
}

#footer h2 {
    float: none;
 
    text-align: center;
}

#footer p {
    float: none;
    width: inherit;
}

#footer .contact {
   
    float: none;
   
    margin-top: 20px;
  
    text-align: center;

    width: inherit;
}

.content {
   padding-bottom: 478px;
}

#main {
    padding: 10px 15px 0 10px;
    width: 440px;
}

#main .colonne_50_50 {
    width: 100%;
}
    

}

@media only screen and (min-width: 768px) {
nav > .sf-menu {
	display: block !important;
}
}

/*------------------------------------------------------------------------
CH93 		 SMART PHONE ET TABLETTE < 480px de large
------------------------------------------------------------------------*/

@media only screen and (max-width: 480px) {
	
	
html {
 -webkit-text-size-adjust:100%;
}

.home{
	background:#4b79b4 url(/images/home_480.jpg)no-repeat  fixed center top; 
background-size:auto;
background-size:cover;
/*font-size:1em;*/
	}

#page {
/* max-width: 480px;*/
}
header#top {
/* width: 300px;*/
}

.sub_header h2 {
    line-height: 1em;
    width: 300px;
	 font-size: 1.8em;
}

.services, .about {
    background-position: left bottom;
    background-size: auto 30%;
    height: 210px;
}

.industrie, .tertiaire, .public {
    background-position: left bottom;
    background-size: auto 30%;
    height: 245px;
}


nav {
   
    width: 300px;
}

.sub_header a {
    background: none;
	font-size:1em;
  
    margin: 10px 0 0 10px;
  
	width:125px;}
	
	
	
.sub_header a:hover, .sub_header a.actif {
    background: none;
   }	
   
     #main h1 {
    font-size: 1.2em;
   
}

#main H2 {
   
    font-size: 1.1em;
  
}

figure img {
    margin: 0 45px;
}
	
	#footer article {
  
    padding: 0;
    width: 300px;
}

#footer .bottom p {
   
    padding: 0 ;
    width:300px;
}

#footer h1 {
    float: none;
    line-height: 1.2em;
    text-align: center;
	font-size:1.6em;
}

#footer h2 {
    float: none;
 
    text-align: center;
}

#footer p {
    float: none;
    width: inherit;
}

#footer .contact {
   
    float: none;
   
    margin-top: 20px;
  
    text-align: center;

    width: inherit;
}

.home .content {
    padding-bottom: 560px;
}

#logo img{
	width:70%;
	height:auto;}
	
	#main {
    padding: 10px 15px 0 10px;
    width: 300px;
}

#main .colonne_50_50 {
    width: 100%;
}
   

}