@import url(http://fonts.googleapis.com/css?family=Roboto:400,700);

*{ 
  margin: 0;
  padding: 0; 
 }

.clear { clear: both  }

.header { 
          background: none repeat scroll 0 0 #ffffff;
          }

.container {
             margin: 0 auto;
             padding-left: 15px;
             padding-right: 15px;
             max-width: 1280px
}

.header .container { height: 80px }

.footer { 
          padding: 15px 0;
          background: #222;
          color: #fff
          }

.footer .box h3  { text-align: left;
                  color: #fff
                  }

.footer .box { 
               border-left: 1px solid #333333;
               display: table-cell;
               vertical-align: top
               }

@media ( min-width:768px )  { 

  .header .container { height: 100px }
 }

.logo {
        box-sizing: border-box;
        float: left;
        height: 70%;
        margin: 5px 5px 0 0
        }


@media (min-width:560px) { 
.logo {
        margin: 15px 15px 0 0;
        }
}

.titre { float: left }

.logo a { display: block;
          height: 100%
          }


body {
    background-color: #ffffff;
    color: #333333;
    font-family: 'Roboto', sans-serif;
    font-size: 12px;
    line-height: 1.42857;
}

@media (min-width: 1100px) { 
  body { font-size: 14px; }
 }

a { text-decoration: none }

ul {
    list-style: outside none none;
}

h2 { border-bottom: 1px solid #e5e5e5;
    font-size: 22px;
    font-weight: 300;
    height: 70px;
    margin: 35px 0 25px;
    text-align: center;
 }

@media ( min-width: 1100px ){ 
  h2 {   font-size: 28px; }
 }


.header h1 { 
             color: #666666;
             font-size: 19px;
             font-weight: 400;
             text-transform: uppercase;
             text-align:right;
             padding-top: 15px;
             }

@media ( min-width:640px )  { 

  .header h1 { font-size: 21px }
 }

@media ( min-width:768px )  { 

  .header h1 { font-size: 24px }
 }

h3 { text-align: center }


.logo img { width: auto;
            height: 100%;
            }


/* menu */
.navbar {
          background-color: #585858;
          background-image: -moz-linear-gradient(center top , #585858, #3d3d3d);
          height: 70px

          }

.navbar ul { 
             float: right;
             color: #fff;
             text-transform: uppercase;
             
             }

.navbar ul li { 
               display: inline;
               float: left
                }

.navbar  li  a {
    border-bottom: 4px solid rgba(0, 0, 0, 0);
    color: #ffffff;
    font-weight: 700;
    font-size: 16px;             
    padding: 25px 20px 30px;
    position: relative;
    text-transform: uppercase;
    transition: all 0.17s ease-in-out 0s;
    display: block;
    cursor: pointer;             
}

.navbar  li  a:hover { 
                                      color: #4597e5;
                                      }

.navbar  li  a.item-active{ 

                            color: #4597e5;

 }

/* slider */
#full-width-slider {
    color: #000000;
    text-align: center;
    width: 100%;
}

.infoBlockLeftBlack {
     color: #ffffff;
    left: 60%;
}



.rsABlock {
    max-width: 29%;
    position: absolute;
    top: 25%;
    z-index: 15;
    text-align: left;        
}



.rsABlock h2 { 
               font-size: 15px;
               text-transform: uppercase;
               font-weight: 100;
               height: 10px;
               border: none;

               }

@media (min-width: 600px ){ 
.rsABlock h2 { 
               font-size: 25px;
               height: 20px;
               }
 
}


@media (min-width: 700px ){ 
.rsABlock h2 { 
               font-size: 35px;
               height: 20px;
               }
 
}


@media (min-width: 980px ){ 

.rsABlock h2 { 
               font-size: 50px;
               height: 40px;
               }

.rsABlock { font-size: 22px }

 }

/* front-box */

.overlay_content {}

.overlay_content a { position:relative;
                     display: block;
                     line-height: 0;
                   }


.box { box-sizing: border-box;
       display: inline-block;
       width: 33.3333%;
       padding: 0 18px;
       }

.box img { width: 100% }

.overlay { 
           position:absolute;
           top: 0;
           left: 0;
           height: 100%;
           width: 100%;
           background-color: #585858;
           opacity: 0.6;
           display: block;

 }

a.box_link_active > div { display: none }

a.box_link:hover > div { display:none; }

.box h3 {
    height: 50px;
    color: #888;      
}

.box h3.active {
    background: url("../img/index.png") no-repeat scroll center bottom rgba(0, 0, 0, 0);
    color: #333;
}


/* front-box detail */

.front-box-detail{  
                   background: none repeat scroll 0 0 #01519b;
                   color: #ffffff;
                   padding: 35px 0;
                   }

.front-box-detail .container > div { display: none; }

.front-box-detail div.active { display: block }

.detail_info{
              box-sizing: border-box;
              padding: 0 20px;
              }

@media ( min-width: 800px) { 
  .detail_info{
                float: left;
                max-width: 33.3%;
                }
 }

.detail_info h3 { height: 60px;
                  text-align: left;
                  text-transform: uppercase;
                  }
.detail_info p { margin-bottom: 20px  }

/* actu */

#actu img { float: left; 
            width: 33.33%;
            height: auto;
            margin-right: 20px }

#actu p { margin-bottom: 20px }

#actu h3 { margin-bottom: 20px }

/* references */


#references{   clear: both }

#references img {  }

#references li { box-sizing: border-box;
                 display: block;
                 float: left;
                 padding: 20px;
                 
                 }

/* contact */

.contact { 
           background: #444;
           color: #fff;
           padding: 1px 15px}

p.adresse {  
    color: #ffffff;
    font-size: 20px;
    margin: 0 0 25px;
    padding: 7px 5px;
    text-align: center;
}

p.tel { text-align: center }