<style type="text/css">

/*-------------------------------------------------------------------------- Defaut ---------------------------------------------------------------------------*/
.reset {
	
}
@font-face {
    font-family: 'typo1';
    src: url('../font/edmond.eot');
    src: url('../font/edmond.eot?#iefix') format('embedded-opentype'),
         url('../font/edmond.woff') format('woff'),
         url('../font/edmond.ttf') format('truetype'),
         url('../font/edmond.svg#edmond') format('svg');
}

@font-face {
    font-family: 'typo2';
    src: url('../font/roboto_b.eot');
    src: url('../font/roboto_b.eot?#iefix') format('embedded-opentype'),
         url('../font/roboto_b.woff') format('woff'),
         url('../font/roboto_b.ttf') format('truetype'),
         url('../font/roboto_b.svg#Roboto') format('svg');
}
* {
   margin:0;
   padding:0;
   font-family:Verdana, Geneva, sans-serif;
   outline: 0;
   border: 0;
   font-family:'typo1', Arial, sans-serif;
   font-size:14px;
   box-sizing: border-box;	
}
.menu_couleur {
position:fixed;
height:70px;
width:70px;
background:#FFF;
overflow:hidden;
opacity:0;
right:0;
top:0;
-webkit-transition: all 0.3s ease; 
-moz-transition: all 0.3s ease; 
-o-transition: all 0.3s ease; 
padding:10px;
}

.effet_menu_couleur {
height:250px;
width:200px;
opacity:1;
}
.typo1 {
  font-family: 'typo1', arial;
  font-size: 2rem;
  color: #000;
  position: absolute;
  right: 10px;
  top: 10px;
}

.typo2 {
  font-family: 'typo2', arial;
  font-size: 2rem;
  color: #000;
  position: absolute;
  right: 10px;
  top: 70px;
}

.typo3 {
  font-family: 'typo3', arial;
  font-size: 2rem;
  color: #000;
  position: absolute;
  right: 10px;
  top: 130px;
}
.clearer {
	clear:both;
	height:0px;
}

h1 {
	font-size:0px;
	text-indent:-9999px;
	position:absolute;
}

.carrer_couleur {
width:30px;
height:25px;
border:#ccc 1px solid;
position:relative;
z-index:100;
}

#carrer0 {
background:#FFFFFF;
text-align:center;
color:#FFFFFF;
text-shadow:2px 2px #000;
display:block;
margin:0 0 10px 0;
}

#carrer1 {
background:#1a161b;
text-align:center;
color:#FFFFFF;
text-shadow:2px 2px #000;
display:block;
margin:0 0 10px 0;
}

#carrer2 {
background:#a2a5a5;
text-align:center;
color:#FFFFFF;
text-shadow:2px 2px #000;
display:block;
margin:0 0 10px 0;
}

#carrer3 {
background:#a1a1a1;
text-align:center;
color:#FFFFFF;
text-shadow:2px 2px #000;
display:block;
margin:0 0 10px 0;
}

#carrer4 {
background:#e9e9e9;
text-align:center;
color:#FFFFFF;
text-shadow:2px 2px #000;
display:block;
margin:0 0 10px 0;
}

#carrer5 {
background:#333;
text-align:center;
color:#FFFFFF;
text-shadow:2px 2px #000;
display:block;
margin:0 0 10px 0;
}

#carrer6 {
background:;
text-align:center;
color:#FFFFFF;
text-shadow:2px 2px #000;
display:block;
margin:0 0 10px 0;
}

#carrer7 {
background:;
text-align:center;
color:#FFFFFF;
text-shadow:2px 2px #000;
display:block;
margin:0 0 10px 0;
}

.bt_nav {
display:none;
}

/*-------------------------------------------------------------------------- Structure ---------------------------------------------------------------------------*/


h2 {
font-size:3em;
margin:0 0 10px 15px;
}

h3 {
font-size:2em;
}

.logo {
	left:15px;
	top:15px;
	height:340px;
	width:151px;
	display:block;
	font-size:0px;
	letter-spacing: -100px;
	text-indent:-9999px;
	position:absolute;
	background: url(../images/bouton/logo.png) no-repeat left top ;
}

.logo:hover {
	opacity:0.7;
}

.lang_fr {
	height:35px;
	width:50px;
	display:block;
	background: url(../images/bouton/drapeau_fr.png) top left no-repeat;
	text-indent:-9999px;
	font-size:0px;
	z-index:500;
	position:absolute;
	right:40px;
	top:10px;
}

.lang_en {
	height:35px;
	width:50px;
	display:block;
	background: url(../images/bouton/drapeau_en.png) top left no-repeat;
	text-indent:-9999px;
	font-size:0px;
	z-index:500;
	position:absolute;
	right:40px;
	top:10px;
}

.lang_fr:hover, .lang_en:hover  {
	background-position: bottom left;
}

.slogan {
color:#FFFFFF;	
  font-size: 3em;
  display: block;
  top: 200px;
  margin: auto;
  position: relative;
  background: #ccc;
  width: auto;
  text-align: center;
}


header, .contenu, footer  {
width:100%;
}

header  {
background:#FFFFFF;
min-height:355px;
margin-bottom:30px;
padding:0 15px;
}

.header_image {
height:260px;
background-repeat:no-repeat;
background-size:cover;
background-position:center center;
width:calc(70% - 30px);
right:15px;
position:absolute;
top:100px;
}

.contenu  {
background:#FFFFFF;
margin-bottom:30px;
}

footer  {
background:#1a161b;
clear:both;
}

p {
font-size:1.3rem;	
margin:0 0 10px 0;
text-align:justify;
}
p b {
	font-size:1.3rem;	
}


section {
max-width:1270px;
min-width:700px;
display:block;
margin:auto;
position:relative;
}

header section  {
height:300px;
background-size:cover;
}

footer section  {
height:110px;
text-align:center;
}

footer section li {
display:inline-block;
color:#FFFFFF;
line-height:110px;
font-size:1.2rem;
}

footer section li a {
color:#FFFFFF;
text-align:center;
text-transform:uppercase;
text-decoration:none;
font-size:1.2rem;
}

footer section ul span {
color:#FFFFFF;
}

footer section li a span {
font-size:1.2rem;
text-transform:lowercase;
}





.contenu section {
background:#FFFFFF;
min-height:450px;
}

.colonne1 .bloc {
width:calc(100% - 30px);
}

.colonne2 .bloc {
width:calc(50% - 30px);
}


.colonne3 .bloc {
width:calc(33% - 30px);
}

.colonne3 .bloc:last-child {
width:calc(34% - 30px);
}

.colonne4 .bloc {
width:calc(25% - 30px);
}

.colonne5 .bloc {
width:calc(20% - 30px);
}

.colonne6 .bloc {
width:calc(17% - 30px);
}

.colonne6 .bloc:last-child {
width:calc(15% - 30px);
}




/*-------------------------- Navigation --------------------------*/


nav {
height:65px;
width:calc(70% - 30px);
position:absolute;
right:10px;
top:0;
right:15px;
background:#1a161b;
padding:0 20px;
}

nav li {
float:left;
list-style:none;
text-align:center;
text-decoration:none;
color:#FFF;
margin:0 10px;
}

nav li a {
text-decoration:none;
color:#FFFFFF;
display:block;
line-height:60px;
font-size:1.2rem;
text-transform:uppercase;
border-bottom:3px solid #1a161b;
font-weight:bold;
}
#menu span{
	float:left;
	line-height:65px;
	color:#FFFFFF;
}

nav#menu li a span {
text-transform:lowercase;
float:none;
line-height:60px
}

nav li a:hover, .nav_select {
border-bottom:5px solid #FFFFFF;
}

.subnav {
display:none;
}




/*-------------------------- Bande Spécifique --------------------------*/

.contenu_spe {
background:#a2a5a5;
}

.contenu_spe .colonne1 .bloc {
background:#a2a5a5;
}

.contenu_spe .colonne1 h2 {
color:#FFFFFF;
}

.contenu_spe .colonne1 p {
color:#FFFFFF;
}

.contenu_spe section {
background:#a2a5a5;
min-height:200px;
}


.bt_plus {
float:right;
background:#1a161b;
color:#FFFFFF;
text-align:center;
display:block;
text-decoration:none;
padding:5px;
width:auto;
font-size:1.3em;
}

.bt_plus:hover {
background:#a2a5a5;
}


.colonne1 .bloc_sans_bg {
background:none;
}

/*------------------------------------ FORMULAIRE -------------------------------------*/

.bloc_form {
position:relative;
display:block;
float:left;
margin:30px 0 20px 0;
line-height:30px;
text-align:left;
width:50%;
padding-right:20px;
}

.bloc_form_grand {
width:100%;
}

.bloc_form label {
font-size:1.2em;
position:absolute;
-webkit-transition: all 0.3s ease; 
-moz-transition: all 0.3s ease; 
-o-transition: all 0.3s ease; 
top:0;
left:10px;
}

.bloc_form label.effet_label {
top:-35px;
}

.bloc_form input, .bloc_form select, .bloc_form textarea  {
border:1px solid #a2a5a5;
width:100%;
color:#333;
font-size:1.2em;
height:35px;
-webkit-transition: all 0.3s ease; 
-moz-transition: all 0.3s ease; 
-o-transition: all 0.3s ease; 
transition: all 0.3s ease; 
text-indent:10px;
}


.bloc_form input.valid_input {
border:1px solid #090;
}



#case1, #case2 {
width:25px;
height:25px;
float:left;
display:block;
margin: 0 10px 20px 0;
}


.bloc_form textarea {
width: 100%;
height: 200px;
clear: both;
}




.bloc_form p, .bloc_form_grand p {
font-size:16px;
margin:0 0 10px 0;
}

.bouton_envoyer {
display:block;
width:120px;
padding:10px;
margin:20px auto;
background:#a1a1a1;
color:#FFFFFF;
font-size:20px;
text-align:center;
cursor:pointer;
opacity:0;
visibility:hidden;
-webkit-transition: all 0.3s ease; 
-moz-transition: all 0.3s ease; 
-o-transition: all 0.3s ease; 
}

.bouton_envoyer:hover {
color:#a2a5a5;
background:#FFFFFF;
}

.affiche_envoyer {
opacity:1;
visibility:visible;
}

.message_form {
color:#1a161b;
text-align:center;
font-size:18px;
}


#map {
height:100%;
background:#999;
display:block;
}




.bg_image_bloc {
background-position:center center;
background-repeat:no-repeat;
background-size:cover;
}

.colonne2 .bloc_home_image {
height:550px;
width:calc(30% - 30px);
}

.colonne3 .bloc_pourquoi_image2 {
height:740px;
width:calc(30% - 30px);
}


.colonne3 .bloc_pourquoi_image {
height:550px;
width:calc(30% - 30px);
}

.colonne2 .bloc_home_txt {
width:calc(70% - 30px);
}

.bloc h2 {
font-size:3rem;
margin:0 0 10px 0;
text-transform:uppercase;
}

.bloc h3 {
text-transform:uppercase;
}

.colonne3 h2 span {
font-size:2.4rem;
}

.colonne3 h2 {
text-transform:uppercase;
text-align:center;
font-size:2.4rem;
}

.bloc_pourquoi p {
margin-bottom:40px;
}

.bloc_pourquoi h3 {
font-size:1.5rem;
}

.bloc_pourquoi h2, .bloc_pourquoi h2 span {
font-size:2.5rem;
font-weight:bold;
margin-bottom:30px;
}

h2 span {
font-size:3rem;
text-transform:lowercase;
}

.bloc {
padding:0;
margin:0 0 30px 0;
float:left;
display:block;
margin:0 15px;
min-height:100px;
position:relative;
}


.bloc_spe {
min-height:50px;
}

.photo {
margin:0 0 20px 0;
width:100%;
}

/* ------------ Home -----------*/	
.bloc_home_gris p, .bloc_home_gris p a {
text-align:center;
color:#FFFFFF;
font-size:1.7rem;
}

header section.header_home {
height:520px;
}

header section.header_home .header_image {
height:400px;
}

header section.header_home p {
text-transform:uppercase;
font-size:1.3rem;
width:calc(33% - 30px);
padding:15px;
position:absolute;
bottom:0;
margin-right:30px;
text-align:left;
line-height:25px;
}

.colonne2 .bloc_accueil_image {
width:calc(30% - 30px);
}

.bloc_accueil_image {
height:200px;
}

.bloc_home_gris {
background:#a1a1a1;
height:200px;
margin-bottom:30px;
padding-top:40px;
}

.logo_accueil_image {
margin-bottom:30px;
height:150px;
background-size:contain;
}



/* ------------ Entreprise -----------*/
.colonne3 .bloc_entreprise {
margin-bottom:30px;
}

.colonne3 .bloc_entreprise .bloc_gris {
padding:30px 30px;
}

.bloc_gris {
background:#a2a5a5;
height:390px;
}



.trait {
width:30px;
height:15px;
background:#1a161b;
position:absolute;
top:0;
}

.trait_gauche {
left:0;
}

.trait_droite {
right:0;
}

.bloc_entreprise .bloc_noir  {
border-bottom:1px solid #1a161b;
padding-bottom:20px;
margin-bottom:10px;
}

.bloc_entreprise .bloc_blanc  {
margin-bottom:20px;
padding-bottom:15px;
border-bottom:1px solid #1a161b;
}

.bloc_entreprise .bloc_blanc p {
color:#FFFFFF;
margin-bottom:2px;
}

.bloc_entreprise .bloc_noir p {
color:#1a161b;
margin-bottom:2px;
}

.bloc_entreprise a {
color:#1a161b;
text-decoration:none;
font-size:1.4rem;
}

.bloc_entreprise a:hover {
text-decoration:underline;
}

.bloc_entreprise .logo_entreprise {
height:80px;
background-size:contain;
}

.colonne3 .bloc_entreprise_image, .colonne3 .bloc_entreprise_image:last-child  {
width:calc(67% - 30px);
height:470px;
}

/* --------- Ralisation -------------*/
.bloc_realisation h2 {
background:#a2a5a5;
width:100%;
color:#FFFFFF;
font-size:1.5rem;
padding:10px;
margin:0;
}

.bloc_realisation .bg_image_bloc {
height:250px;
}

.bloc_realisation .bg_image_bloc img {
opacity:0;
-webkit-transition: all 0.3s ease; 
-moz-transition: all 0.3s ease; 
-o-transition: all 0.3s ease; 
transition: all 0.3s ease; 
width:100%;
height:100%;
}

.bloc_realisation .bg_image_bloc:hover  {
cursor:pointer;
}

.bloc_realisation .bg_image_bloc:hover img  {
opacity:1;
}

.bloc_realisation .bloc_gris {
height:150px;
padding:15px;
}
 
 
.bloc_realisation .bloc_gris a {
color:#FFFFFF;
font-size:1.2rem;
}
 
.bloc_realisation .bloc_gris a:hover {
color:#000;
}
 
.bloc_realisation .bloc_gris p {
color:#FFFFFF; 
}

.colonne3 .bloc_realisation {
margin-bottom:30px;
}




@media (max-width: 1250px) {
header section.header_home p {
font-size:1rem;
line-height:19px;
}
nav li a {
font-size:.95rem;
}
}

@media (max-width: 1000px) {
header section.header_home p {
font-size:1rem;
line-height:19px;
}
	
.colonne3 .bloc_entreprise {
width:calc(50% - 30px);
}

.colonne3 .bloc_entreprise:last-child {
width:calc(50% - 30px);
}

.colonne3 .bloc_realisation {
width:calc(50% - 30px);
}

.colonne3 .bloc_realisation:last-child {
width:calc(50% - 30px);
}


.colonne3 .bloc_entreprise_image, .colonne3 .bloc_entreprise_image:last-child  {
width:calc(50% - 30px);
}

}


@media (max-width: 1100px) {
header section.header_home .header_image {
height:500px;
margin-bottom:20px;
}

.colonne4 .bg_image_bloc.logo_accueil_image, .colonne3 .bg_image_bloc.logo_accueil_image {
background-size:contain;
}

.colonne3 .bloc_entreprise_image, .colonne3 .bloc_entreprise_image:last-child  {
background-size:cover;
height:390px;
margin-bottom:20px;
}
	
.bloc p {
text-align:justify;
}

.colonne1 .bloc, .colonne2 .bloc, .colonne3 .bloc,.colonne4 .bloc, .colonne5 .bloc, .colonne6 .bloc {
width:100%;
}



header, .contenu {
height:auto;
padding:0 15px;
}

.colonne1 .bg_image_bloc, .colonne2 .bg_image_bloc, .colonne3 .bg_image_bloc, .colonne4 .bg_image_bloc  {
background-size:contain;
margin-bottom:30px;
}

.header_image {	
position:relative;
width:100%;
top:0;
left:0;
right:0;
}

footer section li a {
font-size:.8rem;
}

header section  {
height:auto;
}

section {
width:100%;
min-width:100px;
max-width:850px;
display:block;
margin:auto;
}


.logo {
position:relative;
margin:auto;
top:0;
left:0;
margin:10px auto 20px auto;
}

/*----------------------- Navigation --------------------------*/

.lang_fr, .lang_en {
display:none;
}

.bt_nav {
	right:0px;
	top:0px;
	height:80px;
	width:80px;
	display:block;
	font-size:0px;
	letter-spacing: -100px;
	text-indent:-9999px;
	position:absolute;
	z-index:9999;
	background: url(../images/bouton/nav_mobile.png) no-repeat center center #1a161b ;
}

.bt_nav:hover {
	background-color:#a1a1a1;
}

nav {
height:100%;
width:100%;
position:fixed;
left:-100%;
top:0;
background:#1a161b;
z-index:9000000;
opacity:0;
-webkit-transition: all 0.3s ease; 
-moz-transition: all 0.3s ease; 
-o-transition: all 0.3s ease; 
transition: all 0.3s ease; 
margin:0;
}

.effet_nav {
opacity:1;
left:0;
-webkit-transition: all 0.3s ease; 
-moz-transition: all 0.3s ease; 
-o-transition: all 0.3s ease; 
transition: all 0.3s ease; 
}

.bloc, .colonne3 .bloc:last-child, .colonne6 .bloc:last-child {
width:100%;
border:none;
margin:0 0 30px 0;
}


nav li {
float:left;
list-style:none;
text-align:left;
text-decoration:none;
color:#FFFFFF;
background:#1a161b;
width:100%;
margin:0;
}

nav li a {
text-decoration:none;
text-transform:uppercase;
color:#FFFFFF;
display:block;
line-height:20px;
padding:10px;
font-size:1.3em;
text-indent:20px;
font-family:'typo2', arial;
}

nav li a:hover {
background:#333;
}

footer {
display:none;
}

#menu span{
display:none;
}

header section.header_home {
height:auto;	
}

.bloc_entreprise_image {
display:none;
}


.colonne4 .bg_image_bloc.logo_entreprise, .colonne3 .bg_image_bloc.logo_entreprise {
background-size:contain;
}

header section.header_home p {
position:relative;
width:100%;
font-size:2rem;
line-height:35px;
}

header section.header_home .header_image {
height:300px;
}
.bloc_home_gris p, .bloc_home_gris p a {
text-align:center;
color:#FFFFFF;
font-size:1.7rem;
}

#mbNextLink {
right:0;
left:30px;
top:-40px;
bottom:0;
}

#mbPrevLink {
right:0;
left:0px;
top:-40px;
bottom:0;
}

}







/* ------------------------------------------------------------------------- MEDIABOX ----------------------------------------------------------------------- */

#mbOverlay {
	position: fixed;
	z-index: 9998;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #000;
	cursor: pointer;
}

#mbOverlay.mbOverlayFF {
	background: transparent repeat;
}

#mbOverlay.mbOverlayIE {
	position: absolute;
}

#mbCenter {
	position: absolute;
	z-index: 9999;
	left: 50%;
	background-color: #000;
	-moz-box-shadow: 0px 10px 40px rgba(0,0,0,0.70);
	-webkit-box-shadow: 0px 10px 40px rgba(0,0,0,0.70);
}

#mbCenter.mbLoading {
	background: #000  no-repeat center;
	-moz-box-shadow: none;
	-webkit-box-shadow: none;
}

#mbImage {
	position: relative;
	left: 0;
	top: 0;
	font-family: Myriad, Verdana, Arial, Helvetica, sans-serif;
	line-height: 20px;
	font-size: 12px;
	color: #fff;
	text-align: left;
	background-position: center center;
	background-repeat: no-repeat;
}

#mbImage a, #mbImage a:link, #mbImage a:visited {
	color: #ddd;
}

#mbImage a:hover, #mbImage a:active {
	color: #fff;
}


#mbBottom {
	font-family: Arial, Helvetica, sans-serif;
	line-height: 20px;
	font-size: 12px;
	color: #999;
	text-align: left;
	padding: 0 10px;
	height:0;
}

#mbTitle {
	font-family:'typo_1', Arial, sans-serif;
	line-height: 20px;
	font-size: 1.5rem;
	background: white;
	display: block;
	width: 100%;
	padding: 20px 10px;
	margin: 0 0 0 -10px;
	color: #1a161b;
	text-indent:10px;
	box-sizing:content-box;
}

#mbTitle span {
	font-family:'typo_1', Arial, sans-serif;
	line-height: 20px;
	font-size: 12px;
	color: #333;
	padding: 0 0 0 10px;
}

#mbNumber {
	display: inline;
	color: #999;
	line-height: 14px;
	font-size: 10px;
	margin: auto 10px;
}

#mbCaption {
	display: block;
	color: #999;
	line-height: 14px;
	font-size: 10px;
}

#mbPrevLink, #mbNextLink, #mbCloseLink {
	display: block;
	float: right;
	height: 20px;
	margin: 0;
	outline: none;
	width: 40px;
	height:40px;
	cursor:pointer;
}

#mbPrevLink {
	background: url(../images/mediabox/precedent.png) no-repeat center #000;
	bottom: -70px;
	position: absolute;
	right: 71px;
}

#mbNextLink {
	background: url(../images/mediabox/suivant.png) no-repeat center #000;
	bottom: -70px;
	position: absolute;
	right: 30px;
}

#mbCloseLink {
	background: url(../images/mediabox/fermer.png) no-repeat center #000;
	position: absolute;
	top: -40px;
	right: 10px;
}
#mbCloseLink:hover, #mbNextLink:hover, #mbPrevLink:hover {
	background-color: #000;
}

/*	Styles for flash version alert	*/

#mbError {
	position: relative;
	font-family: Arial, Helvetica, sans-serif;
	line-height: 20px;
	font-size: 12px;
	color: #fff;
	text-align: center;
	border: 10px solid #700;
	padding: 10px 10px 10px;
	margin: 20px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
}

#mbError a, #mbError a:link, #mbError a:visited, #mbError a:hover, #mbError a:active {
	color: #d00;
	font-weight: bold;
	text-decoration: underline;
}

#mbImage p {
	position: relative;
	margin:0px;
	font-size: 13px;
	color: #FFFFFF;
}

.slogan_home {
width: 67%;
margin-left: 31%;
}
</style>