/* ====================== Gestion couleur ======================== */




/* ======================== GENERAL =============================*/
*,
*:after,
*::before {

    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

html,body {
    margin:0;
    padding:0;
    height:100%; /* needed for container min-height */
    font-family:"Source Sans Pro",arial,sans-serif;
    font-size:16px;
    color:#808080;
    background:#fff;

}

a { text-decoration:none;}
a, p, li, input,.bouton, .bouton_clic{ font-family:"Source Sans Pro",arial,sans-serif;    
-webkit-transition: all .2s ease-in;
    -moz-transition: all .2s ease-in;
    -o-transition: all .2s ease-in;
    transition: all .2s ease-in;}
button {
cursor:pointer;
}
img {
	max-width:100%;
}


@font-face {
	font-family: 'icomoon';
	src:url('../fonts/icomoon.eot?-xgy8fw');
	src:url('../fonts/icomoon.eot?#iefix-xgy8fw') format('embedded-opentype'),
		url('../fonts/icomoon.woff?-xgy8fw') format('woff'),
		url('../fonts/icomoon.ttf?-xgy8fw') format('truetype'),
		url('../fonts/icomoon.svg?-xgy8fw#icomoon') format('svg');
	font-weight: normal;
	font-style: normal;

}
[class^="icon-"], [class*=" icon-"], .icone {
	font-family: 'icomoon';
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	font-size:2em;

	/* Better Font Rendering =========== */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

i:before {
    font-size: 0.6em;
    vertical-align: bottom;
}
.icon-tel:before {
	content: "\e974";
}
.icon-fax:before {
	content: "\e921";
}
.icon-mail:before {
	content: "\ea11";
}

.wrapper { display: block; height: 100%; width:100%;}



#sidebar{ width:200px;float:left;}
#sidebar img {
	max-width:100%;
	display:block;
	margin:auto;
}

#content {
    min-height: 100%;
    margin: auto;
    position: relative;
    background: #fff;
    padding-top:119px;
}
}
#content img { max-width:100%;}
#content > img { display:block;}
.fond-blanc {
	background:#fff;

}
b { font-weight:400;}
.miseenvaleur { font-weight:bold;}
h1 {
	font-size:3em;
	margin-bottom:10px;
	font-weight:lighter;
}
h1 {
color:#808080;
}
h2 {
	font-size:1.6em;
	padding:0 0 10px 0;
	position:relative;
	margin-bottom:30px;
	font-weight:300;
}
h2:after {
	height:3px;
	width:50%;
	position:absolute;
	bottom:0;
	right:0;
	content:"";
	display:block;
}
h3 {
	font-size:1.5em;
	font-weight:300;
	margin-top:15px;
}
p {
	margin:10px 0;
	line-height:1.4em;
}

h3.titrepage {margin-bottom:30px;margin-top:30px;}

/* ==================================== GESTION DES TITRE  ==================================== */

.titre {
	font-size:2em;
	font-weight:300;
	margin-bottom:20px;
	color:#808080;
}

.texte {
	font-size:1.3em;
	font-weight:lighter;
}



.titre .icone {
	vertical-align:middle;
	margin-right:15px;
}



/* ======= NAv -Left ==============*/
.nav-left ul{
	margin-left:0;
	padding-left:0;
}
.nav-left li {
	display:block;
	color:#fff;
	text-align:left;
	position:relative;
}
.nav-left li:hover  {
transform:scale(1.03);
-webkit-transform:scale(1.03);
-moz-transform:scale(1.03);
	}
.nav-left .bouton_clic {
    position: absolute;
    right: 20px;
    top: 50%;
    color: #fff;
    border: 1px solid #fff;
    margin-top: -15px;
    font-size: 1em;
}
.nav-left li a {
	display:block;
	padding:20px 45px 20px 20px;
	background: #f71615; /* Old browsers */
background: -moz-linear-gradient(top,  #f71615 0%, #b40000 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #f71615 0%,#b40000 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #f71615 0%,#b40000 100%);
color:#fff;
}
.nav-left li.active .bouton_clic {display:none;}
.nav-left li.active a {
background: #515051; /* Old browsers */
background: -moz-linear-gradient(top,  #515051 0%, #1A1A1A 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #515051 0%,#1A1A1A 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #515051 0%,#1A1A1A 100%);
}
/* ==================================== GESTION DES BLOCS  ==================================== */

.bas_article{display:none;
}

.bloc {
	padding:40px 30px;
	border-radius:3px;
	display:block;
}
.rouge.bloc,
.rouge.cercle {
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#f71615+0,b40000+100 */
background: #f71615; /* Old browsers */
background: -moz-linear-gradient(top,  #f71615 0%, #b40000 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #f71615 0%,#b40000 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #f71615 0%,#b40000 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
color:#fff;
}
.noir.bloc,
.noir.cercle  {
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#f71615+0,b40000+100 */
background: #515051; /* Old browsers */
background: -moz-linear-gradient(top,  #515051 0%, #1A1A1A 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #515051 0%,#1A1A1A 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #515051 0%,#1A1A1A 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
color:#fff;
}
.rouge.bloc:hover {
background: #f71615; /* Old browsers */
background: -moz-linear-gradient(top,  #f71615 0%, #f71615 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #f71615 0%,#f71615 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #f71615 0%,#f71615 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
.noir.bloc:hover {
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#f71615+0,b40000+100 */
background: #515051; /* Old browsers */
background: -moz-linear-gradient(top,  #515051 0%, #515051 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #515051 0%,#515051 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #515051 0%,#515051 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}

.cell_30 .bloc {
	text-align:center;
	margin-top:20px;
}
.cell_30 .bloc:first-child {
margin-top:0;
} 

/*  ====================================  Couleurs  ====================================  */ 


.mailto {
	font-weight:bold;
	text-decoration:none;
	color:#f59620;
}
#map {padding:0;}

.noir {

}


.green .bouton,
.green2 .bouton,
.orange .bouton  {
background:#fff;
}
.green .bouton:before,
.green2 .bouton:before,
.orange .bouton:before,  {
background:#dedede;
}
.green .bouton { color:#008d5a;}
.green2 .bouton { color:#83ba3b;}
.orange .bouton { color:#f59620;}
/* ============================= UI  ================== */

.bouton_clic {
    width: 30px;
    height: 30px;
    display: block;
    margin: 20px auto auto auto;
    color: rgba(0,0,0,0.3);
    border: 2px solid rgba(0,0,0,0.2);
    text-align: center;
    text-decoration: none;
    border-radius: 50%;
    padding-top: 4px;
    padding-left: 2px;
    font-weight: bold;
}
.bouton_clic:hover {
	transform:scale(1.1);
	-webkit-transform:scale(1.1);
	-moz-transform:scale(1.1);
}
.icon-right {
	
vertical-align: top;
	}
.bouton_clic .icon-right:before {
	font-size:15px;
}


/* === bouton txt =========*/

.bouton, .form_contact input[type="submit"]{
	background: #f71615; /* Old browsers */
background: -moz-linear-gradient(top,  #f71615 0%, #b40000 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #f71615 0%,#b40000 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #f71615 0%,#b40000 100%);
	text-align:center;
	padding:15px 30px;
	color:#fff;
	font-weight:normal;
	-webkit-transition:  color 0.3s;
	transition:  color 0.3s;
	-webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
	transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
	-webkit-backface-visibility: hidden;
	-moz-osx-font-smoothing: grayscale;
	 overflow: hidden;
	display:inline-block;
	min-width:120px;
	position:relative;
	z-index:5;
	margin:20px auto;
	cursor:pointer;
	border-radius:3px;
}

.bouton:before, .form input[type="submit"]:before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 150%;
	height: 100%;
	z-index: -1;
	background:#f71615;
	-webkit-transform: rotate3d(0, 0, 1, -45deg) translate3d(0, -3em, 0);
	transform: rotate3d(0, 0, 1, -45deg) translate3d(0, -3em, 0);
	-webkit-transform-origin: 0% 100%;
	transform-origin: 0% 100%;
	-webkit-transition: -webkit-transform 0.3s, opacity 0.3s, background-color 0.3s;
	transition: transform 0.3s, opacity 0.3s, background-color 0.3s;
}


.bouton:hover::before, .form input[type="submit"]:hover::before {
	opacity: 1;
	-webkit-transform: rotate3d(0, 0, 1, 0deg);
	transform: rotate3d(0, 0, 1, 0deg);
	-webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
	transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
}
.separate {
	background:#c5c5c5;
	height:1px;
	margin:20px 0;
}

#bloc_connexion {
	max-width:500px;
	margin:auto;
	padding:40px;
} 
#bloc_connexion input {
width:100%;
}
/*================== FORM ============*/
.form_champ {
    border-bottom: 1px solid #dedede;
    padding: 10px 0px;
}
.form_champ {
    display: table;
    width: 100%;
    padding: 20px 0;
}
.form_label, .form_valeurs {
    display: table-cell;
    vertical-align: middle;
}
.form_label {
    width: 40%;
    padding-right: 15px;
}
.form_champ input[type="text"], .form_champ input[type="email"], .form_champ select, .form_champ textarea , .form_champ input[type="password"]{
    padding: 8px 10px;
    width: 400px;
}
.form_envoyer_container {
text-align:center;
margin:10px auto;
}

.inline_checkbox, .inline_checkbox input, .inline_checkbox p {
    display: inline-block;
}
.form_envoyer_container input,
#bloc_connexion .form_envoyer_container input {
	width:200px;
	border:none;
	display:inline-block;
}

/*  ====================================  Slider  ====================================  */ 

#slider {

}
.slide {
	width:100%;
	height:auto;
	background-size:cover;
	color:#fff;
	min-height:450px;

}
.slide .contenu-slide {
padding:80px;
}

/* ====================== HEADER ======================== */

header {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 97;
	   -webkit-transition: all .3s ease-in;
    -moz-transition: all .3s ease-in;
    -o-transition: all .3s ease-in;
    transition: all .3s ease-in;
    text-align:center;
        margin:auto;
        text-align:left;
        padding-top:10px;
        background:#fff;
}

.header-wrapper {
margin:auto;
}        
.txt-header {
    position: absolute;
    right: 30px;
    bottom: 30px;
    color:#fff;
    text-align:right;
}
.txt-header h1 {
	margin-bottom:0px;
	color:#f9b72e;
}
.txt-header h1 span {font-weight:lighter;}
.sub-title { font-size:1.3em;
font-style:italic;}
#logo {
    display: inline-block;
    position: absolute;
    color: #fff;
    width: 300px;
    left: 50%;
    margin-left: -150px;
    top: -1px;
    z-index: 99;
}
#logo img { width:100%;display:block;}
#nav_header {
    width: 100%;
    font-size: 13px;
    margin: 0 0;
    text-align: center;
    position: relative;
    transition: all .5s ease;
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -ms-transition: all .5s ease;
    -o-transition: all .5s ease;
    background: #268262;
}

.menu-droit {
    text-align: left;
}

.menu-gauche {
    text-align: right;
    margin-right: 300px;
    width:400px;
}
.menu {
    display: inline-block;
    padding-left: 0;
    width:450px;
}

.menu > li {
    display: inline-block;
    vertical-align: middle;
    padding-left: 30px;
    padding-right: 30px;
    padding: 30px 10px;
}
.menu > li > a {
    display: block;
    padding: 0 2px 6px;
    font-size: 15px;
    color: #fff;
    font-family: 'Source Sans Pro';
    -webkit-font-smoothing: subpixel-antialiased !important;
}



/* ====================================================== NAV mobile ================================================== */
/* ================================== BOUTON MENU RESPONSIVE ===========================*/
#menu_button {
	height: 60px;
	width:60px;
	position: fixed;
	right:20px;
	top:0;
	z-index: 999;
	cursor:pointer;
	display:none;
}
#menu_button:before {

transform: translateY(-10px);
-webkit-transform: translateY(-10px);
-moz-transform: translateY(-10px);
-ms-transform: translateY(-10px);
-o-transform: translateY(-10px);
}
#menu_button:after {
	transform: translateY(10px);
	-webkit-transform:translateY(10px);
	-moz-transform:translateY(10px);
	-ms-transform:translateY(10px);
	-o-transform:translateY(10px);
}
#menu_button span {
display:block;
}
#menu_button.active span {
opacity:0;
}

#menu_button.active:after {
width: 70%;
left:10%;
}
#menu_button.active:after,#menu_button.active:before,#menu_button.active span {
background:#268262;
}

#menu_button:before,#menu_button span, #menu_button:after {
  content: "";
  height: 3px;
  left: 10%;
  margin-top: -1px;
  pointer-events: none;
  position: absolute;
  top: 50%;
  transition: all 0.3s ease 0s;
  -webkit-transition: all 0.3s ease 0s;
-moz-transition: all 0.3s ease 0s;
-ms-transition: all 0.3s ease 0s;
-o-transition: all 0.3s ease 0s;
  width: 70%;
  background:#fff;
}
#menu_button:after {
width: 70%;
left:10%;
}


#menu_button.active:before {
    transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	
}
#menu_button.active:after {
    transform: rotate(-45deg);
	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
}



/* ===================================  HOME BLOC =============================== */
#home-bloc {
	height:800px;
}
#home-bloc .cell {
	position:relative;
	text-align:center;
	vertical-align:middle;
	color:#fff;
overflow:hidden;
}
#home-bloc .bg_img {
	background-size:cover;
	background-position:center center;
	position:absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
	z-index:0;
	  transition: all 0.3s ease 0s;
  -webkit-transition: all 0.3s ease 0s;
-moz-transition: all 0.3s ease 0s;
-ms-transition: all 0.3s ease 0s;
-o-transition: all 0.3s ease 0s;
height:800px; /* IE */
}


#home-bloc .titre {
  transition: all 0.3s ease 0s;
  -webkit-transition: all 0.3s ease 0s;
-moz-transition: all 0.3s ease 0s;
-ms-transition: all 0.3s ease 0s;
-o-transition: all 0.3s ease 0s;
transform:translateY(-100px);
-webkit-transform:translateY(-100px);
-ms-transform:translateY(-100px);
-o-transform:translateY(-100px);
-moz-transform:translateY(-100px);
position:relative;
opacity:0;
z-index:2;
color:#fff;
}
#home-bloc .titre img{
display:block;
margin: auto;
margin-bottom:40px;
}
#home-bloc  .bouton_clic {
	z-index:3;
	position:absolute;
	left:50%;
	bottom:100px;
	margin-left:-15px;
}


.bg_opacity {
	position:absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
	opacity:0;
		background:rgba(38,130,98,0.8);
	z-index:1;
	  transition: all 0.3s ease 0s;
  -webkit-transition: all 0.3s ease 0s;
-moz-transition: all 0.3s ease 0s;
-ms-transition: all 0.3s ease 0s;
-o-transition: all 0.3s ease 0s;
}

#home-bloc .bg_opacity {
height:800px; /* IE */
}
#home-bloc .bouton_clic {
    color: #fff;
    border: 2px solid #fff;
}


#home-bloc .cell:hover .titre {
	transform:translateY(0);
-webkit-transform:translateY(0);
-ms-transform:translateY(0);
-o-transform:translateY(0);
-moz-transform:translateY(0);
opacity:1;
}
#home-bloc .cell:hover .bg_opacity {
opacity:1;
}
#home-bloc .cell:hover .bg_img {
  -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
  filter: blur(5px);
}


/* ===================================  bloc_center =============================== */


.bloc_center {
	padding:60px 10%;
	text-align:center;
}




.bloc_center .titre{
margin-bottom:30px;
}





/* =============================== ACTU =========================*/


.list-actu {
	padding:0;
	text-align:center;
}
.list-actu li {
	display:inline-block;
	margin:1%;
	width:31%;
	max-width:400px;
	
	-moz-box-shadow: 0px 2px 5px 0px #656565;
-webkit-box-shadow: 0px 2px 5px 0px #656565;
-o-box-shadow: 0px 2px 5px 0px #656565;
box-shadow: 0px 2px 5px 0px #656565;
text-align:left;
color:#808080;
position:relative;
}
.list-actu li a{
color:#808080;
}
.titre-actu {
	font-size:1.2em;
	padding:20px;
	height:90px;
}
.texte-actu {
	height:200px;
	padding:20px;
	padding-top:0px;
	padding-bottom:50px;
}
.bouton-plus {
    display: block;
    position: absolute;
    right: 0;
    bottom: 0;
    border-top: 90px solid transparent;
    border-left: 90px solid transparent;
    border-right: 90px solid green;
    /* padding: 10px; */
    width: 90px;
    height: 90px;
    margin: 0;
}
.bouton-plus .icon-plus {
    position: absolute;
    bottom: 9px;
    right: 0;
    color:#fff;
    margin-right: -78px;
    font-size:1.9em;
}


.image-actu {
	height:200px;
	background-size:cover;
	background-position:center center;
}

.list-actu li:first-child .bouton-plus {
	border-right: 90px solid #1484ac;
}
.list-actu li:nth-child(6n) .bouton-plus {
	border-right: 90px solid #29a8df;
}
.list-actu li:nth-child(6n+1) .bouton-plus {
	border-right: 90px solid #00b1ba;
}

.list-actu li:nth-child(6n+2) .bouton-plus {
	border-right: 90px solid #00b966;
}

.list-actu li:nth-child(6n+3) .bouton-plus {
	border-right: 90px solid #268262;
}

.list-actu li:nth-child(6n+4) .bouton-plus {
	border-right: 90px solid #f4901e;
}



/* =================================== Search / On vous rapelle ===================== */
input, .textarea {
    background: #fff;
    height: 60px;
    line-height: 60px;
    display: block;
    transition: 0.2s ease-out;
    color: darken(#dedede, 30%);
}
#search_container {
	text-align:right;
}
#search_home {
	margin-top:80px;
	max-width:600px;
}

#search_home input{
  width:calc(100% - 140px);
}
#search_home .submit {
  float:right;
  width:160px;
  margin-left:-20px;
      min-width: 100px;
    border-radius: 30px;
        font-weight: normal;
        background:#00b966;
    padding: 0 20px;
    display:inline-block;
    color:#fff;
    position:relative;
    z-index:2;

}

#search_left {
  border-radius:25px 0 0 25px;
  color:#666;
  display:inline-block;
}

#search_home input {
    clear: none;
   background: #dedede; 
    color: #666;
    height: 50px;
    line-height: 50px;
    display: inline-block;
    padding: 0 20px;
    font-size: 1em;
    border:none;

}
 
#search_home input::-moz-focus-inner { /* remove extra button spacing for Mozilla Firefox */
    border: 0;
    padding: 0;
}    
#search_home input:active,
#search_home input:focus{   
    background: #fff;
    outline: 0;   
}

/* ===================================  Graphique animé =============================== */
.circle-chart{
    margin: 1rem auto 0;
    display: block;
}
.circle-chart__circle {
	animation: circle-chart-fill 2s reverse;
	transform: rotate(-90deg);
	transform-origin: center;
}
.circle-chart__info {
	animation: circle-chart-appear 2s forwards;
	opacity: 0;
	transform: translateY(0.3em);
}
  
@keyframes circle-chart-fill {
	to { stroke-dasharray: 0 100; }
}
  
@keyframes circle-chart-appear {
	to {
	  opacity: 1;
	  transform: translateY(0);
	}
}


/* ===================================  List et List color =============================== */


.list {
	    -webkit-box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 1px 4px 0 rgba(0, 0, 0, 0.24);
    -moz-box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 1px 4px 0 rgba(0, 0, 0, 0.24);
    box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 1px 4px 0 rgba(0, 0, 0, 0.24);
    background:#fff;
}
.list li {
	display:block;
	padding:10px;
	border-bottom:1px solid #dedede;
	background:#fff;
}
.list li a {
	color:#666;
	display:block;
}

.list-color {
	text-align:center;
	padding:0;
}

.list-color li{
 display:inline-block;
 margin:5px;
	width:200px;
	height:200px;
 vertical-align:top;
 padding:50px 20px;
 color:#fff;
 font-weight:lighter;
 border-radius:5px;
}
.list-color li .titre {
	font-size:1.5em;
	color:#fff;
}
.list-color li:hover {
	transform:scale(1.02);
	-webkit-transform:scale(1.02);
	-ms-transform:scale(1.02);
	-o-transform:scale(1.02);
	-moz-transform:scale(1.02);
}
.list-color li .nombre {
	margin-bottom:10px;
	font-size:4em;
}

.list-color li:first-child { background:#1484ac; }
.list-color li:nth-child(2n) { background:#29a8df; }
.list-color li:nth-child(2n+1)  { background:#00b1ba; }
.list-color li:nth-child(2n+2) { background:#00b966; }
.list-color li:last-child { background:#268262; }

.list-contact li{
padding-top:20px;
height:265px;
}
.list-contact .texte {
	font-size:1.2em;
}

.form_contact input[type="text"], .form_contact input[type="email"], .form_contact select, .form_contact textarea, .form_contact input[type="password"] {
	padding: 5px 10px;
	margin:5px ;
	border:1px solid #ddd;

	width: 100%;
}
.form_contact input[type="submit"]
{
	padding: 5px 0px;
	margin: 5px;
	border: 1px solid #ddd;
	background: green;
	color: #fff!important;
	border-radius: 30px;
	line-height: 30px;
	min-width: 150px;
	/* height: 30px; */
}

/* ====================== Footer ======================== */
#footer {
    text-align: left;
    padding: 50px 10%;
    color: #fff;
    width: 100%;
    background-image:url(../images/distribution-home.jpg);
    background-size:cover;
    background-position:center center;
    position:relative;
	color:#fff;
    left: 0;
}
#footer .bg_opacity {
	background:rgba(38,130,98,0.8);
	opacity:1;
	z-index:0;
}
#footer-content {
	position:relative;
	z-index:2;
}
#footer a {
	color:rgba(255,255,255,0.5);
}

#infos-bottom {
    position: absolute;
    width: 100%;
    left: 0;
    text-align: center;
    color: rgba(255,255,255,0.5);
}
/* ====================== Icones ======================== */
.icon-twitter:before {
	content: "\e618";
}
.icon-calendrier:before {
	content: "\e80b";
}
.icon-plus:before {
	content: "\e80c";
}
.icon-brief:before {
	content: "\e800";
}
.icon-relevant:before {
	content: "\e801";
}
.icon-interest:before {
	content: "\e802";
}
.icon-technical:before {
	content: "\e803";
}
.icon-overview:before {
	content: "\e804";
}
.icon-right:before {
	content: "\e805";
}
.icon-left:before {
	content: "\e806";
}
.icon-business:before {
	content: "\e807";
}
.icon-bottom:before {
	content: "\e808";
}
.icon-top:before {
	content: "\e809";
}

/* ======== GRILLE TABLEAU ============*/
.table {
display:table;
width:100%;
}
.cell {
display:table-cell;
vertical-align:top;
z-index:2;
position:relative;
}



.cell_30 { 
width:30%;
}
.cell_33 {
width:33.3%;
}
.cell_60 { 
width:60%;
padding-right:5%;
}
.cell_40 { 
width:40%;
padding-left:5%;
}
.cell_70 { 
width:70%;
}
.cell_25 {
width:25%;
padding:40px 20px;
text-align:center;
}


.cell_50 { 
width:50%;
}

.cell img,.colonne img { max-width:100%;}
/* ======== GRILLE inline-block ============*/
.section {
	clear: both;
	padding: 0px;
	margin: 0px;
}

/*  COLUMN SETUP  */
.colonne {
	display: block;
	float:left;
	margin: 1% 0 1% 1.6%;
}
.colonne:first-child { margin-left: 0; }


/*  GROUPING  */
.group:before,
.group:after {
	content:"";
	display:table;
}
.group:after {
	clear:both;
}
.group {
    zoom:1; /* For IE 6/7 */
    	clear: both;
	padding: 0px;
	margin: 0px;
}

/*  GRID OF THREE  */
.colonne_25 {
    width: 23.8%;
}
.colonne_33 {
	width: 32.2%;
	   text-align:left;
}
.colonne_40 {
   width: 38.2%;
   text-align:left;
   padding-right:15px;
 }
 .colonne_60 {
   width: 60%;
 }
.img_container img{
	width:100%;
}

.colonne_50 {
   width: 49.2%;
 
}
.colonne_50:first-child {
padding-right:10px;
}
.colonne_50:last-child {
padding-left:10px;
}

/* ================================================ PAGE ============================= */
.titre-page,h3 {
	font-size:2em;
	padding:0 0 10px 0;
	color:#666;
	font-weight:300;
	text-align:center;
}
h4{font-weight:250;color:#268262}

.contenu-page {
	padding:40px;
	 -webkit-box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 1px 4px 0 rgba(0, 0, 0, 0.24);
    -moz-box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 1px 4px 0 rgba(0, 0, 0, 0.24);
    box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 1px 4px 0 rgba(0, 0, 0, 0.24);
    min-height:550px;
}
.citation {
	font-style: italic;
	font-size:1.5em;
	margin:10px auto;
	text-align:center;
}
.schema {
	text-align:center;
	margin:20px auto;
}
.cercle:first-child {
	margin-left:0;
}
.cercle:last-child {
	margin-right:0;
}
.cercle {
	border-radius:50%;
	width:200px;
	height:200px;
	margin:10px;
	display:inline-block;
	width:200px;
height:200px;
line-height:200px;
text-align:center;
}
.contenu-cercle {
	width:90%; /* largeur du bloc */
padding:10px; /* aération interne du bloc */
vertical-align:middle;
display:inline-block;

line-height:1.2; /* on rétablit le line-height */
text-align:center; /* ... et l'alignement du texte */
}

@media only screen and (max-width: 900px) {
	.cell_33 {
		display:block;
		height:500px;
		width:100%;
	}
}


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

#content {
	padding-top:60px;
}
header {
background:#268262;
height:60px;
}
#logo {
    left: 20px;
    top: 0;
    width: 200px;
    margin-left: 0;
}
.list-actu li {
max-width:500px;
width:47%;
}
#menu_button { display:block;z-index:99;}
/* NAV */
.nav-menu {
  display: table;
  vertical-align: bottom;
  height: 100%;
  width: 100%;
}

#nav_header {
position:fixed;
  transition: all 0.3s ease 0s;
  -webkit-transition: all 0.3s ease 0s;
-moz-transition: all 0.3s ease 0s;
-ms-transition: all 0.3s ease 0s;
-o-transition: all 0.3s ease 0s;
top:0;
z-index:98;
overflow-y:auto;
overflow-x:hidden;
margin:0;
    background: #fff;
    height: 100%;
    right: 0;
    width: auto;
     padding-top: 80px;
    transform: transformX(110%);
    -webkit-transform: translateX(110%);
    -moz-transform: translateX(110%);
    -ms-transform: translateX(110%);
    -o-transform: translateX(110%);
	-moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.7);
-webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.7);
-o-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.7);
box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.7);
	
}

#nav_header ul{
  display: block;
  width: 100%;
  min-width:200px;
  padding:0;
}
#nav_header ul li {
	border: medium none;
	display: block;
	text-align: center;
	display: block;
    vertical-align: middle;
width:100%;
margin:0;
padding:0;
		}
#nav_header ul li.active a {
	background:#268262;
}
#nav_header ul li.active a {
color:#fff;
}
		
		
#nav_header ul li a {
		  display: block;
		  padding:20px;
		  color:#666;
		  border:none;
		  transition: all 0.5s ease 0s;
		  /* line-height: 2.3em; */
		  /* font-weight: bold; */
		  border-bottom:1px solid rgba(0,0,0,0.2);
		  text-decoration: none;
		  font-size: 1em;
		  text-align: center;
		}
		 
		#nav_header ul li a:hover,
		#nav_header ul li a:focus {
			border-left:none;
			border-right:none;
			border-top:none;
			background: #666;
			color:#FFF;
		}
	
	/* === navigation ouverte ====*/

	#nav_header.active  {
		-webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
	transform: translateX(0);
		}


	#home-bloc .titre img {
    display: block;
    margin: auto;
    margin-top: 90px;
     margin-bottom: 10px;
}
#home-bloc .bouton_clic {
    bottom: 30px;
}

}

#chemin , #chemin a { color:#ccc; font-size:11px;}


#responsive_content{width:1024px;margin:0 auto}

@media only screen and (max-width:900px ) {
	#responsive_content{width:calc(100% - 10px);margin:5px }


.wrapper {
	padding-left:0;
	padding-right:0;
}
	.contenu-page {min-height:auto;}

#container_logo {background:#fff;}
#content {
    width: 100%;
    height: auto;
    padding-bottom:00px;
}
.bloc_texte {text-align:center;}
	.txt-header {
	    position: relative;
	    right: 0;
	    bottom: 0;
	    color: #fff;
	    text-align: center;
	    margin-top: 20px;
	}
	#container_logo {
	    text-align: center;
	}
	.table { text-align:center;}
	.cell {
		width:100%;
		margin:0;
		display:block;
		padding:20px;}
	.cell_25 {
		width:40%;
		display:inline-block;
	}
	.colonne {
		width:100%;
		margin:10px 0;
	}
.left-footer {
    width: 100%;
    display: inline-block;
    text-align: center;
}
.social-media {
    float: none;
    display: block;
    margin: auto;
    text-align: center;
}
#footer {
	position:relative;
	margin-bottom:0;
	bottom:0;
}
#footer p {
	display:block;
	float:none;
	text-align:center;
}
#footer .colonne_50 {
text-align:center;
}
#footer .bouton_container {
	float:none;
	text-align:center;
	display:block;
}
#footer .bouton {
	float:none;

}
.logo_container {
    padding-bottom: 70px;
}
.bloc_couleur {
	border-bottom:1px solid #dedede;
}
.bloc_couleur:last-child {
border-bottom:none;
	}
		.list-color li {
    display: inline-block;
    margin: 1%;
     width: 47.7%;
}
#search_home { float:none;}
}

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

html, body {
    font-size: 14px;
}
h1 {font-size:2.2em;}
.form_champ input[type="text"], .form_champ input[type="email"], .form_champ select, .form_champ textarea, .form_champ input[type="password"] {
    padding: 5px 10px;
    width: 100%;
}
.cell_25 {
display:block;
width:100%;
	}
	.list-color li {
    display: inline-block;
    margin: 10px 0%;
    width: 100%;
    padding: 50px 20px;
    color: #fff;
    font-weight: lighter;
    border-radius: 5px;
}


}

.form_contact{text-align:center}
.form_contact table{margin:0 auto;}
.list-actu li {vertical-align:top }