/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}


/* =========== TEMPLATE CORAL =========== */

html { font-size: 20px; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
body { margin:0; padding:0; text-align:left; background: #fff; font: 1em "Montserrat", Arial, sans-serif; color: #474747; overflow-x: hidden;}

h1, h2, h3, h4, h5, h6 { margin: 20px 0; padding: 0; font-size: 1.55em; color: #000; font-family: "Montserrat", Arial, sans-serif;font-weight: 700 }

h2{color: #447f9f;}
h3{color: #69a1bf;font-size: 1.3rem;}
h4{color: #69a1bf;font-size: 1.2rem;}
h5{color: #69a1bf;font-size: 1.1rem;}
h6{color: #69a1bf;font-size: 1rem;}

ul, ol { margin: 10px; padding: 0; list-style-position: inside; }

a {
  -webkit-transition: all 0.2s linear;
  -moz-transition: all 0.2s linear;
  -ms-transition: all 0.2s linear;
  -o-transition: all 0.2s linear;
  transition: all 0.2s linear;
}
a:hover { text-decoration: none; }
a:focus { outline: 0; }
a img { border: 0 }

a[href$='.pdf'] { padding: 10px 0 10px 30px; background: url(../images/pdf.png) no-repeat 0 50% transparent }

blockquote { margin: 30px 0; padding: 5px 15px; border-left: 4px solid #eee; font-family: "Montserrat", Arial, sans-serif; font-style: italic}
em { font-family: "open_sansitalic", Arial, sans-serif; font-style: italic }
strong {
  font-family: "open_sansbold", Arial, sans-serif;
  /* ou (suivant la font utilisée)
  font-weight: bold;
  */  
}

.overflow { overflow: hidden}

#scrollToTop { position: fixed; bottom: 20px; right: 20px; cursor: pointer; z-index: 1000000; display: none }
#scrollToTop span.glyphicon { left: 50%; top: -15px; color: grey; }


.btn{border-radius: 0;font-size: 1rem;font-weight: 200;text-transform: uppercase; padding: 10px 4%;white-space: normal;}

/* 
**Default
*/
.btn-default {background: #447f9f; border: 0;color: #fff; box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);}
.btn-default:hover, .btn-default:focus, .btn-default:active, .btn-default.active{background: #0BA1B8;color: #fff;  box-shadow: none  }


/* 
**Primary
*/
.btn-primary {background: #98c4dc;border: 0; box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active {box-shadow: none ;background: #447f9f;;border: 0;}



/* PERSO
================================================== */

.dibm{display: inline-block;vertical-align: middle}
.dibt{display: inline-block;vertical-align: top}
.dibb{display: inline-block;vertical-align: bottom}
.shadow-1{  box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);}
.shadow-2{  box-shadow: 0 32px 40px -20px rgba(0, 0, 0, 0.25);}
.shadow-3{  box-shadow: 0 0 40px rgba(0, 0, 0, 0.3);}
.shadow-4{  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);}
.m30-a{margin: 30px auto}

.blue-1{color:#009dbc}
.blue-2{color:#447f9f}


span.icon-plus{
    margin-top: -3px;
    margin-left: 5px;
    display: inline-block;
    vertical-align: middle;
}
/* #HEADER
================================================== */
header { background: #fff; padding: 10px 1%}

#logo{
    width: 20%;
    text-align: center
}

#reseau{
    width: 6%;
    height: 50px;
    padding: 4px 0;
    text-align: center;

}

#reseau span{font-size: 2rem;margin: 0.5%}

 
a.currentLang { font-weight: bold}

/* #MENU
================================================== */
#menu {
    text-transform: uppercase;
    width:73%; 
    text-align: right ;
}

#menu ul {}
#menu li { }
#menu li#page-accueil,
#menu li#page-13
{ display: none}

#menu a {     font-size: 0.8rem; }
#menu a:hover, #menu .active a { }

.navbar-default,
.navbar-default .navbar-collapse, 
.navbar-default .navbar-form {
    border: none;
    background: #fff}

.navbar{margin-bottom: 0}

.navbar-nav{float: none}

.navbar-nav>li {
    float: none;
    display: inline-block;
    vertical-align: middle;
}

.navbar-default .navbar-nav > li > a{color:#447f9f}

.navbar-default .navbar-nav > li > a:focus, 
.navbar-default .navbar-nav > li > a:hover,
.dropdown-menu .open,
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .active > a{
    background-color: #447f9f !important;
    color: #fff;
}

.navbar-default .navbar-nav > .active > a:focus, 
.navbar-default .navbar-nav > .active > a:hover{
    background-color: #0BA1B8 !important;;
    color: #fff;
}

.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus {
  color: #fff !important;
  background-color: #447f9f !important;
}
.dropdown-menu{
    width: 500px;
    padding: 20px 10px;
    background-color:  #447f9f
}

ul.dropdown-menu li div{   padding: 10px 0}

ul.dropdown-menu li div a{color:  #fff;}




/* BREADCRUMB
================================================== */
ol.breadcrumb { margin: 20px 0 }
.breadcrumb {
    padding: 8px 15px;
    margin-bottom: 20px;
    list-style: none;
    background-color: transparent;
    border-radius: 0;
}

/* #CONTENT
================================================== */
.container{width: 80%;margin-left:10%;}

#content { padding-bottom: 80px }

.page{position: relative; padding-bottom:40px}
.page .container{position: relative;z-index: 10000; }

.page .border-3 {
    position: absolute;
    width: 90%;
    margin-left: 5%;
    border: 1px solid #cce5f2;
    min-height: 102.3%;
    top: -1%;
    z-index: 10;
}

.page .img-page{margin: 50px auto;text-align: center;position: relative;}
.page .img-page a{position: relative;display: block;}
.page .img-page a img{
  -webkit-transition: all 0.2s linear;
  -moz-transition: all 0.2s linear;
  -ms-transition: all 0.2s linear;
  -o-transition: all 0.2s linear;
  transition: all 0.2s linear;}
.page .img-page a:hover img{box-shadow: none}
.page .img-page a em{
    min-height: 74px;
    display: block;
    position: absolute;
    bottom: 0;
    z-index: 10000;
    background: rgba(255, 255, 255, 0.9);
    width: 100%;
    padding: 1%;
}
.page .img-page a em:before {
  content: "\e90c";
    font-family: 'icomoon';
    speak: none;
        font-style: normal;
    display: block;
}

.page .img-page .block-img{width: 45%;margin: 1%;box-shadow: none}
.page .img-page .block-img h3{color: #69a1bf;
    font-size: 1rem;}
.page .img-page .block-img.img-3{width: 31%;}
.page .img-page .block-img img{margin-bottom: -5px; box-shadow: 0 0 40px rgba(0, 0, 0, 0.3);}
 
.page ul {
    padding-left: 20px
}

.page ul li{
    list-style: none;
    padding: 5px 0 
}

.page ul li:before {
    content: '\ed3b';
    font-family: 'icomoon';
    speak: none;
    color:#69a1bf;
    font-weight: 300;
    padding-right: 5px
}
.page ul li.link-page:before {
    content: '\e903';
    font-family: 'icomoon';
    speak: none;
    color:#69a1bf;
    font-weight: 300;
    padding-right: 5px
}


.page-title{
    position: relative;
    z-index: 100;
    background: #69a1bf;
    margin: 30px 2% 50px;
    min-height: 390px
}
.page-title h1{
    text-align: center;
    color: #fff;
    padding:5%
}


.page-title h1:before {
    font-family: 'icomoon';
    speak: none;
    color:#fff;
    font-size:5rem;
    font-weight: 300;
    display: block;
    margin-bottom: 50px
    
}


.page-1 .page-title,
.page-13 .page-title
{
    background: url(../img/bg-entreprise.jpg) no-repeat center center;
    background-size: cover;
}
.page-1 .page-title h1:before,
.page-13 .page-title h1:before { content: '\e975';}


.page-4 .page-title {
    background: url(../img/bg-expertise-eau.jpg) no-repeat left center;
    background-size: cover;
}
.page-4 .page-title h1:before { content: '\e9f7';}

.page-5 .page-title  {
    background: url(../img/bg-expertise-urbain.jpg) no-repeat left center;
    background-size: cover;
}
.page-5 .page-title h1:before { content: '\ea11';}



.page-6 .page-title h1:before,
.page-7 .page-title h1:before,
.page-8 .page-title h1:before,
.page-9 .page-title h1:before
{ content: '\e9f7';}

.page-14 .page-title h1:before
{ content: '\ea14';}

.page-6 .page-title{
    background: url(../img/bg-metier-eau.jpg) no-repeat center center;
    background-size: cover;
}

.page-7 .page-title  {
    background: url(../img/bg-metier-etude.jpg) no-repeat center center;
    background-size: cover;
}

.page-8 .page-title{
    background: url(../img/bg-metier-faune-flore.jpg) no-repeat center center;
    background-size: cover;
}

.page-9 .page-title{
    background: url(../img/bg-metier-paysage.jpg) no-repeat center center;
    background-size: cover;
}


.page-10 .page-title h1:before,
.page-11 .page-title h1:before,
.page-12 .page-title h1:before
{ content: '\ea11';}


.page-10 .page-title  {
    background: url(../img/bg-metier-amenagement.jpg) no-repeat center center;
    background-size: cover;
}

.page-11 .page-title{
    background: url(../img/bg-metier-genie.jpg) no-repeat center center;
    background-size: cover;
}

.page-12 .page-title{
    background: url(../img/bg-metier-urbanisme.jpg) no-repeat center center;
    background-size: cover;
}


.page-14 .page-title{
    background: url(../img/bg-recherche-developpement.jpg) no-repeat center center;
    background-size: cover;
}




/**
EQUIPE
**/




.block-team{
    position: relative;
    z-index: 1000;
    text-align: center;
    margin: 80px 2% 40px;
    padding: 40px 0;
    background: #eaeaea;
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.3);
}

.block-team h3{
color: #447f9f;
    background: #eaeaea;
    padding: 10px;
    position: relative;
    z-index: 1000;
    width: 70%;
    margin-left: 15%
}

.block-team .border-5{
position: absolute;
    width: 90%;
    margin-left: 5%;
    border: 1px solid #69a1bf;
    min-height:80%;
    top: 90px;
    z-index: 100;
    
}

.team{width: 15%;position: relative;z-index: 10000; margin: 0.3%;   box-shadow: 0 0 10px rgba(0, 0, 0, 0.1)}

.team-member .team-img {
       margin-bottom: -5px;
}

.team-member, .team-member .team-img {
    position: relative;
}

.team-member {
    overflow: hidden;
}
.team-member, .team-member .team-img {
    position: relative;
}

.team-hover {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: 0;
    border: 20px solid rgba(68, 127, 159, 0.4);
    background-color: rgba(255, 255, 255, 0.90);
    opacity: 0;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
}
.team-member:hover .team-hover .desk {
    top: 45%;
}
.team-member:hover .team-hover, .team-member:hover .team-hover .desk{
    opacity: 1;
}
.team-hover .desk {
    position: absolute;
    top: 0%;
    width: 100%;
    opacity: 0;
    -webkit-transform: translateY(-55%);
    -ms-transform: translateY(-55%);
    transform: translateY(-55%);
    -webkit-transition: all 0.3s 0.2s;
    transition: all 0.3s 0.2s;
    padding: 0 10px;
}


.team-member:hover .team-hover, .team-member:hover .team-hover .desk{
    opacity: 1;
}

.desk h5{
    text-align: center;
    color: #447f9f;
    margin-bottom: 5px;
    font-size: 0.8rem;
}

.desk p{
    text-align: center;
    color: #474747;
    font-size: 0.7rem;
}


.light-txt {
    color: #fff !important;
}
.team-member .team-intro.light-txt h4 {
    color: #fff;
    font-size: 0.8rem;
}

.team-member, .team-member .team-img {
    position: relative;
}
.team-member .team-intro.light-txt p {
    color: rgba(255, 255, 255, .7);
    font-size: 0.7rem;
    text-transform: uppercase
}

.team-member .team-intro {
    right: 0;
    bottom: 15px;
    background: rgba(68, 127, 159, 0.7);
    padding: 10px;
    width: 100%;
    text-align: right;
    min-height: 95px;
}

.team-member .team-intro h4{margin: 0}

/* #HOME
================================================== */

#poles{
    text-align: center;
    position: relative;
}


#poles .block-top{
    width: 46%;
    margin: 1%;
    position: relative;  
    background: transparent;
}

#poles .block-top a.btn-img-top{
    display: block;

}

.scale-in-center {
	-webkit-animation: scale-in-center 2s cubic-bezier(0.250, 0.460, 0.450, 0.940) 1s both;
	        animation: scale-in-center 2s cubic-bezier(0.250, 0.460, 0.450, 0.940) 1s both;
}

@-webkit-keyframes scale-in-center {
  0% {
    -webkit-transform: scale(0);
            transform: scale(0);
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 1;
  }
}
@keyframes scale-in-center {
  0% {
    -webkit-transform: scale(0);
            transform: scale(0);
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 1;
  }
}




#poles .block-top img{
    width: 100%;
    margin-bottom: -5px;
    opacity: 1;
    -webkit-transition: all 1s linear;
    -moz-transition: all 1s linear;
    -ms-transition: all 1s linear;
    -o-transition: all 1s linear;
    transition: all 1s linear;
}

#poles .block-top a.btn-img-top:hover img{opacity: 0.5}

#poles .title-block-top{
    width: 80%;
    position: absolute;
    background: #fff;
    left: 0;
    right: 0;
    bottom: -180px;
    margin: auto;
    padding: 0 15px;
}

#poles .title-block-top h2{
    color:#009dbc;
    font-size: 1.2rem;
    font-weight: 700;
}

#poles .title-block-top p{
    min-height: 150px
}

#poles .btn-block-top{
    margin: 20px auto 10px;
}


#presentation {
    text-align: center;
    padding: 20px 0;
    color: #fff;
    background: url('../img/bg-home-intro.jpg')no-repeat center center;
    background-size: cover;
    margin: 80px auto;
}

.presentation h1{
    font-size: 1.5rem;
    font-weight: 700;
    color: #447f9fff;
    margin-bottom: 60px

}

#presentation h2{
    font-size: 1.5rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 60px

}


#chiffre{
    background: url(../img/bg-chiffre.jpg)no-repeat center center;
    background-size: cover;
    padding: 40px 0;
    margin: 220px auto 80px;
    text-align: center;
}

#chiffre .block-chiffre{
    width: 30%
}

#chiffre .block-chiffre,  
#chiffre .block-chiffre p{
    text-align: center;
    color: #fff;font-size: 1.250rem;
    font-weight: 400
}

#chiffre .block-chiffre span.icon{font-size:7rem;}

#chiffre .block-chiffre span.counter{font-weight: 700;}



h2.title-home{
    font-size: 3.000em;
    font-weight: 700;
   /* color:#6aa0bf;*/
    color:#009dbc;
    text-transform: uppercase
}

h2.title-home:after{
    content: url('../img/logo_ouest-am-2.svg');
    position: relative;
    top: -2rem;
}

h2.title-home span.little{
    font-weight: 300}

.big-block-metiers{
    position: relative;
    text-align: center;
    width: 90%;
    margin:10px 0 80px 5%;
    padding-bottom: 1%;
}


#metiers .title-metier{
    position: absolute; 
    left: -252px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 100;

}

#metiers h3{
    color: #cce5f2;
    margin: 0;
    font-size: 1.8rem;
    width: 500px;
    font-weight: 700;
    text-transform: uppercase;
    background: #fff;
    transform: rotate(-90deg);
}

#metiers span.chiffre{
    position: absolute;
    right: -50px;
    top: 50%;
    transform: translateY(-50%);
    color: #fff;
    font-size: 5rem;
    background: #fff;
    font-weight: 700;
     z-index: 100;
    text-shadow: 0px 0px 30px rgba(0, 0, 0, 0.1);

}

#metiers .border-1{
    position: absolute;
    width: 80%;
    border: 1px solid #cce5f2;
    min-height: 100%;
    top: 0;
    z-index: 10;}


#metiers .border-2{
    position: absolute;
    width: 18%;
    border: 1px solid #cce5f2;
    min-height: 100%;
    right: 0;
    top: 0;
    z-index: 10;}



#metiers .block-metiers {
    position: relative;
    width: 40%;
    margin: 2%;
    z-index: 10000;
    background: #447f9f
}

#metiers .block-metiers a{display: block;    position: relative;}

#metiers .block-metiers img{
    width: 100%;
    margin-bottom: -5px;
    opacity: 1;
    -webkit-transition: all 0.5s linear;
    -moz-transition: all 0.5s linear;
    -ms-transition: all 0.5s linear;
    -o-transition: all 0.5s linear;
    transition: all 0.5s linear;}

#metiers .block-metiers .title-metiers{
    position: absolute;
    width: 80%;
    margin: auto;
    left: 0;
    right: 0;
    background: #fff;
    z-index: 1000;
    bottom: -28px;
    padding: 10px;
}

#metiers .block-metiers h4{
    color: #2b6a8b;
    font-weight: 400;
    font-size: 1.25rem;
    text-transform: uppercase
}

#metiers .block-metiers span{
    position: absolute;
    top: 50%;
    left: 50%;
    font-size:  5rem;
    color: #fff;
    width: 104px;
    height: 104px;
    line-height: 104px;
    background: transparent;

    -webkit-transform: translate(-50%, -50%) scale(0);
    transform: translate(-50%, -50%) scale(0);
    transition: all 300ms 0ms cubic-bezier(0.6, -0.28, 0.735, 0.045);
}


#metiers .block-metiers:hover span,
#metiers .block-metiers.hover span {
  -webkit-transform: translate(-50%, -50%) scale(1);
  transform: translate(-50%, -50%) scale(1);
  transition: all 300ms 100ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

#metiers .block-metiers:hover img{opacity: 0.3}

#actu-home{
    position: relative;
    margin:10px 0 80px}

#actu-home .border-3 {
    position: absolute;
    width: 90%;
    margin-left: 5%;
    border: 1px solid #cce5f2;
    min-height: 80%;
    top: 120px;
    z-index: 10;
}

#recrut-home{position: relative}

#recrut-home .border-3 {
    position: absolute;
    width: 90%;
    margin-left: 5%;
    border: 1px solid #cce5f2;
    min-height: 80%;
    top: 120px;
    z-index: 10;
}


#presentation2 {
    text-align: center;
    padding: 20px 0;
    color: #fff;
    background: url('../img/bg-home-presentation.jpg')no-repeat center center;
    background-size: cover;
    margin: 80px auto;
}

#presentation2 h2{
    font-size: 1.5rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 60px

}

#presentation2 .btn-block-bottom{
    margin: 40px auto

}



#contact h1{
    text-align: center;
    color: #69a1bf;
    font-size: 1.3rem;}

/* #FOOTER
================================================== */
footer {position: relative;    z-index: 1000;background: #69a1bf;     padding: 70px 0 30px;border-bottom: 10px solid  #447f9f}
#logo-footer{
    position: absolute;
    left: 0;
    right: 0;
    top: -40px;
    background: #fff;
    text-align: center;
    width: 306px;
    margin: auto;
    padding: 0.4% 1%;;
    
}

.coor-footer, .coor-footer a{color: #fff}
.coor-footer div{margin: 15px 6%}
#reseau-footer span{
    font-size: 3rem;
    color: #2b6a8b;
}

#reseau-footer .fb,
#reseau-footer .tw{ margin: 30px 1%}

#footer-menu { text-align: center; }
#footer-menu li { list-style: none; float: left; margin: 0 10px }
#footer-menu a, #footer-admin a { color: #000; text-decoration: none; }
#footer-menu a { font-size: 0.9em; }
#footer-menu a:hover, #footer-menu li.active a { color: grey}

#footer-admin, #footer-admin a, #footer-realisation  {color:#fff }
#list-footer { list-style: none }
#list-footer li { margin: 0 10px 0 0 } 
 
/* pictos en png */  
#list-footer a#administration, #list-footer a#mentions {
  /* si picto */ 
  /* display: block; text-indent: -9999px; background: url(../img/pictos.png) no-repeat 0 -31px transparent; width: 28px; height: 28px; */    
}
#list-footer a#mentions { cursor: pointer; background-position: 0 0 }

#footer-realisation { }
#footer-realisation a img { border: 0}
#footer-realisation a:hover { background: none}

/* ----- Réseaux sociaux ----- */
#rs_link { list-style: none; }
#rs_link li { float: left; margin: 0 4px 4px 0}
#rs_link a { background: url(../img/icones-reseaux-sociaux.png) no-repeat transparent; display: block; width: 32px; line-height: 32px; text-indent: -9999px; outline: 0}
#rs_link a.twitter { background-position: 0 -32px }
#rs_link a.google { background-position: 0 -64px }
#rs_link a.youtube { background-position: 0 -128px }
#rs_link a.linkedin { background-position: 0 -160px }
#rs_link a.viadeo { background-position: 0 -256px }
#rs_link a.dailymotion { background-position: 0 -288px }


/* ------ mentions légales ----- */

#mentions-bloc {
  /* Custom styling */
  max-width: 80%;
  border-radius: 4px; 
  color: #000;
  font-size: 0.8em;
  /* Custom transition - slide from top*/
  transform: translateY(-50px);
  transition: all .33s;
}

.fancybox-slide--current #hidden-content-b {
  transform: translateY(0);
}


/* ------ WIDGET CONTACT ------ */
.widget_contact {  }
.widget_contact h3 {  }
.vcard { }
.vcard .org { text-transform: uppercase; }
.vcard .nickname { display: none; }
.vcard .adr { }
.vcard .adr .street-address { }
.vcard .adr .postal-code {}
.vcard .adr .locality {text-transform: uppercase;}
.vcard .adr .country-name { display: none; }
.vcard .tel { }
.vcard abbr.type { }
.vcard abbr {border: 0}
.vcard .tel .value {} 
.vcard .telnumber { }
.vcard .telnumber a { color: #fff; text-decoration: none }
.vcard .telnumber .type {}
.vcard .telnumber .value { }
.vcard .cellnumber {}
.vcard .cellnumber .type {}
.vcard .cellnumber .value {}
.vcard .faxnumber {display: none;}
.vcard .faxnumber .type {}
.vcard .faxnumber .value {}
.vcard .email_container { margin: 20px 0}
#contact .vcard .email_container { display: none}
.vcard a.email { text-decoration: underline; display: none; }
.vcard a.email:hover { text-decoration: none; }

a.button_email { }
a.button_email:hover {  }


/* ----- NOTIFICATIONS -----*/
.result_error { color: #fff; line-height: 40px; text-align: center; background: #e57c7c }
.result_success { color: #fff; line-height: 40px; text-align: center; background: #78ca71 }
#flashMessage { background: #fff; color: #337ab7; line-height: 40px; text-align: center }


/* ----- COOKIE BAR ----- */
#cookie-bar {position: relative;background:#111111; height:auto; line-height:24px; color:#eeeeee; text-align:center; padding:3px 0; font-size: 0.8em;z-index:1000000}
#cookie-bar.fixed {position:fixed; top:0; left:0; width:100%;}
#cookie-bar.fixed.bottom {bottom:0; top:auto;}
#cookie-bar p {margin:0; padding:0;}
#cookie-bar a {color:#ffffff; display:inline-block; border-radius:3px; text-decoration:none; padding:0 6px; margin-left:8px;}
#cookie-bar .cb-enable {background:#3AC976;}
#cookie-bar .cb-enable:hover {background:#009900;}
#cookie-bar .cb-disable {background:#990000;}
#cookie-bar .cb-disable:hover {background:#bb0000;}
#cookie-bar .cb-policy {background:#0033bb;}
#cookie-bar .cb-policy:hover {background:#0055dd;}


/* ----- DEMO ASSETS ----- */
.bs-component .modal { 
    position: relative;
    top: auto;
    right: auto;
    left: auto;
    bottom: auto;
    z-index: 1;
    display: block;
}
.bs-component .modal-dialog {
    width: 90%;
}


/* ----- Message de consentement RGPD ----- */
.mentionRGPD {
  font-size: 0.8em;
} 


#contact .form-control{border-radius: 0} 

@media (max-width:1680px) {
    header{padding: 10px 0.1%}
    #menu { width: 76%;} 
    #menu a { font-size: 0.7rem;}
    #reseau {width: 3%;height: 70px;}
    #reseau .fb, #reseaux .tw{display: block}
    #reseau span { font-size: 1.5rem;}
    #poles .title-block-top { width: 90%; bottom: -170px;}
    #chiffre{    margin: 180px auto 80px;}
    #chiffre .block-chiffre span.icon {font-size: 5rem;}
    #chiffre .block-chiffre, #chiffre .block-chiffre p{font-size: 1rem;}
} 

@media (max-width:1580px) {
    .team { width: 19%;}
} 

@media (max-width:1380px) {
    #logo { width: 50%; text-align: center;}
    #menu { width: 100%; text-align: center;}
    #reseau {width: 49%;height: 70px;position: absolute;top: 10px;right: 10px;    padding: 15px 0; text-align: right}
    #reseau .fb, #reseaux .tw{display: inline-block;margin: 0 10px;}
    #reseau span{font-size: 2rem;}
    #poles .title-block-top h2{min-height:64px}
    #metiers .block-metiers h4{font-size: 1rem;}
    #metiers h3{font-size: 1.5rem;}
    .team {  width: 24%;}
    .page .img-page .block-img.img-3 {width: 45%;}
}

@media (max-width:1280px) {
    #poles .block-top {    width: 80%; max-height: 400px; margin-bottom: 70px;}
    #poles .block-top img{height: auto;max-width: 100%} 
    #poles .title-block-top { width: 90%; bottom: -50px;}
    #poles .block-top a.btn-img-top { overflow: hidden; max-height: 400px;}
    #poles .title-block-top h2, #poles .title-block-top p { min-height: inherit; }
    #chiffre { margin: 0 auto 40px;}

    
}


@media (max-width:1080px) {
    .page .img-page .block-img{width: 96%;}
    #chiffre .container{width: 100% !important;margin: 0 auto}
    #chiffre{margin: 40px auto}
    .team { width: 31%;}
}


@media (max-width:980px) {
    #metiers .block-metiers{width: 84%;    margin: 4% 2%;}
    #metiers h3{   width: 85%;  margin: auto;   transform: rotate(0deg);}
    #metiers .title-metier { position: relative; left: 0; right: 0; top: 0; transform: translateY(0); z-index: 100;}
    .coor-footer div {  margin: 10px auto;  display: block;}
    .page-title h1{font-size: 1.3rem;}
    .page h2{font-size: 1.2rem;}
    .page h3{font-size: 1.1rem;}
    #metiers span.chiffre { right: -21px; font-size: 3rem;}
    .presentation h1{font-size: 1.2rem;}
    #presentation h2{font-size: 1.2rem;}

}


@media (max-width:880px) {
    li#page-2 ul.dropdown-menu{left: -200px}
    .page .img-page .block-img.img-3 {width: 95%;}
}




@media (max-width:767px) {
   #menu li { display: block;    text-align: left;  margin-left: 5%;}
    .dropdown-menu { position: relative !important; float: none !important; width: 80% !important;margin-left: 0;    border-left: 1px solid #447f9f; background-color: #ffffff; text-align: left;}
    #menu ul { display: block;}
    ul.dropdown-menu li div a {color: #447f9f;}   
    #reseau { width: 29%; height: inherit; }
    #logo {  width: 68%;}
    #poles .block-top { padding:0;max-height: inherit}
    #poles .title-block-top { width: 100%; bottom: 0; position: relative; padding: 15px;}
    h2.title-home { font-size: 2em;}
    #presentation2 h2 { font-size: 1.2rem;}
   .team {  width: 48%;}
    .navbar-toggle .icon-bar { background-color: #447f9f;}
    #metiers span.chiffre { right: -21px; font-size: 3rem;}
     li#page-2 ul.dropdown-menu{left: 0}
    .presentation h1{font-size: 1rem;}
    #presentation h2{font-size: 1rem;}
}

@media (max-width:580px) {
    #chiffre .block-chiffre span.icon {font-size: 3rem;}
    #chiffre .block-chiffre, #chiffre .block-chiffre p{font-size: 0.8rem;}
    #metiers .block-metiers {margin: 4% 2% 30px;}
} 


@media (max-width:480px) {
    #chiffre .block-chiffre { width: 100%;}
    #chiffre .block-chiffre p {    margin: 10px 0 20px;}
    #logo { width: 100%;}
    #reseau{    width: 120px;  top: 90px; left: 10px; padding: 0; text-align: left;}
    #reseau span { font-size: 1.5rem;}
    .team { width: 100%;}
}