$orange: rgba(251,163,58,1);

@import "jquery.bxslider";

@import "fontawesome/font-awesome";
@import "qi_grids";
@import "popover";

@import "public/menu_item_link_contents";
@import "public/menus";
@import "public/slippry";
@import "public/timeline";
@import "public/articles";
@import "public/bottom";
@import "public/dons";
@import "public/press_release";

@import "public/flexslider";
@import "public/label";
@import "public/animated.min";
@import "public/hover";

@import "shared/formtastic";
@import "bootstrap/bootstrap";

$blue :#2dadb1;
.real_gal_link img {
  max-width: 100%;

  -moz-transition: all 0.3s;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}


.real_gal_link:hover{
  position:relative;
}
.real_gal_link:hover img {
  -moz-transform: scale(1.1);
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
  opacity:0.6 !important;
}
.real_gal_link:hover:before {


    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    background-position:black;

 }

.real_gal_link:hover{

}
.real_gal_link{
  background-color:black;
}




.real_gal_link{
  overflow:hidden;
}


.popup_overlay{
  display:none;
  background:rgba(0,0,0,0.7);
  position:fixed;
  top:0;
  left:0;
  right:0;
  bottom:0;
  z-index:3;
}
.popup_container{
  display:none;
  z-index:4;
  position:fixed;
  top:0;
  left:0;
  right:0;
  bottom:0;
  .close_popup{
    z-index:6;
    position:absolute;
    top:-20px;
    left:-20px;
    width:40px;
    cursor:pointer;

  }
  #popup_content{
    background:white;

    margin:auto;
    max-width:850px;

    position:relative;

    .inner{
      padding:0px;
      overflow:auto;
      position:absolute;
      top:0;
      left:0;
      right:0;
      bottom:0;
      z-index:5;
    }




  }

}
.row {
    margin-left: 0px;
    margin-right: 0px;
}

.no-padding{

.center{
  padding:0;
}


}

#nous-bloc{
  .center{
    max-width:1250px;
  }
}
#services-bloc{
  background: rgba(112,112,112,1);
  background: -moz-radial-gradient(center, ellipse cover, rgba(112,112,112,1) 0%, rgba(56,56,56,1) 100%);
  background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(112,112,112,1)), color-stop(100%, rgba(56,56,56,1)));
  background: -webkit-radial-gradient(center, ellipse cover, rgba(112,112,112,1) 0%, rgba(56,56,56,1) 100%);
  background: -o-radial-gradient(center, ellipse cover, rgba(112,112,112,1) 0%, rgba(56,56,56,1) 100%);
  background: -ms-radial-gradient(center, ellipse cover, rgba(112,112,112,1) 0%, rgba(56,56,56,1) 100%);
  background: radial-gradient(ellipse at center, rgba(112,112,112,1) 0%, rgba(56,56,56,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#707070', endColorstr='#383838', GradientType=1 );

  img{
    margin-top:20px;
  }
  
  .center{
    max-width:1200px;
  }

  // p{
  //   max-width:500px;
  // }

}

#service_more{
  h4{
    font-size:22px;
  }
  .center{
    max-width:950px;
  }
  .service-inner{
    max-width:290px;
    margin:auto;
    font-size:14px;
    img{
      margin-bottom:10px;
    }

  }
}
#images_agence{
  text-align:center;
  .hvr-skew{
    
    max-height:190px;
  }
}



#agence_text{

  h2,h3{text-transform:none;
    margin:0;}

    // p{
    //   max-width:600px;
    // }
}

.clear{
  clear:both;
}

body{
  font-family:'Open Sans', Helvetica, Arial, sans-serif;

  line-height:1.4em;
  text-align:left;
  font-weight:400;
  padding:0;
  margin:0;

  background:white;
  font-size: 16px;
  line-height: 22px;
  color: black;

  


}
a{
  color:black;
}
.center{
  max-width:1100px;
  padding:0 70px;
  margin:auto;
}

h1,h2,h3{
  text-transform:uppercase;
  font-weight:300;
  color:black;

}
h2{
  margin-top:10px;
  font-size:33px;
  padding-bottom:35px;
}
h3{
  text-transform:none;
}
.top{


  background:white;

  z-index:2;

  .center{
    position:relative;
  }
  #logo{
    margin:23px 0px;
    height:107px;
  }
  .menu{
    position:absolute;
    right:0;
    bottom:23px;
    
    


    text-transform:uppercase;
    font-size:20px;
    padding-right:15px;
    font-weight:300;
    a{
      color:black;
      text-decoration:none;
      text-transform:uppercase;
      display:inline-block;
      padding:0 10px;
      //line-height:100px;

      &.active, &:hover{
        color:$blue;

      }

    }
    ul{
      margin-bottom:0px;
      li{
        display:inline;
      }
    }


  }
}


#top_bar{
  
  position:fixed;
  top:0;
  left:0;
  right:0;
  #toggle-menu{

    position:absolute;
    color: $blue;
    right:10px;
    top:10px;
    font-size:30px;
  }
  #logo-min{
    display:none;
  }

  &.move_top{
    #logo{
      display:none;
    }
    
    #logo-min{
      display:block;
      float:left;
      padding:10px 0;
    }



    .menu{

      padding:16px 0;
      position:static;
      text-align:right;
    }
  }

}






#home_top{
  
  #home_top_image{
    background:url('/Image-home.jpg') no-repeat center center;
      background-size:100%;
      background-size:cover;
    height:850px;
    
    
  }
  padding-top:120px;
  
  position:relative;
  color:white;
  .inner_t{
    margin-top:270px;
    position:absolute;
    top:0;
    left:0;
    right:0;
  
    h1{
      text-transform:none;
      font-weight:600;
      font-size:30px;
      color:black;
      span{
        display:block;
        margin-top:5px;
        margin-bottom:20px;
        font-weight:700;
        font-size:40px;
        color:black;

      }
    }
    p{
      max-width:550px;
      color:black;
    }


  }

}

.contact_container{
  background-color: #EBEBED;
  padding:1px;
  padding: 40px 0;

  table{
    margin-right:20px;
    float:right;
    
    td{
      padding:0 10px;
    }

  }
  .row{
    margin:0;
  }

  h3{
    color:$blue;
    margin-bottom:50px;
    font-size:30px;
    text-align:center;
    padding-bottom:20px;
  }

  .idn_sign{
    margin-top:100px;

  }


}
.bottom{
  text-align:center;
  padding: 20px 10px;
  background-color: #979797;

  position:relative;
  #certif{
    width:300px;
    position:absolute;
    bottom:0;
    right:0;

  }
  .logo{
    height:50px;
  }
  #contact_card{

    height:150px;
  }
  p{
    margin-top:0;
    color:white;
  }
}

.menu_item_top{
  background:center center no-repeat;
  background-size:100%;
  background-size:cover;
  min-height:450px;
  position:relative;
  h1{
    color:white;
    position:absolute;
    bottom:50px;
    right:20px;
    left:20px;
    text-align:center;


  }
  &.principal{

    //min-height:600px;
  }
}

#home_slider{


  .inner{
    background:black center center no-repeat;
    background-size:100%;
    background-size:cover;
    overflow:hidden;


  }
}

.socials_links{
  text-align:right;

  position:fixed;

  left:0px;
  top:300px;
  a, .top_link{
    background:$blue;
    display:block;
    padding:10px 0px;
    text-align:center;
    width:45px;
    color:white;

    margin:0;
    cursor:pointer;
    &:hover{

      color:white;

    }
  }
  .top_link{

    //display:inline;
  }
}



.contact_links{
  text-align:right;
  transition: all ease 0.5s;
  position:fixed;

  right:-150px;
  top:300px;


  .right_td
  {
    padding-left:5px;
    text-align:left;
    display:table-cell;

  }


  a, .top_link{

    background:$blue;
    display:block;
    padding:5px 0px;
    text-align:center;
    width:210px;

    color:white;




    margin:0;
    cursor:pointer;


    table{
      width:100%;
      td{
        padding:0;
      }

    }
    .left_td{
      width:60px;
    }







  }

  &:hover{
    right:0px;
    a{
      width:210px;
      color:white;

      .right_td
      {

        display:table-cell;
      }
    }
  }


  .top_link{

    //display:inline;
  }
}

.tag-gal{
  .element{
    float:left;
    width:16%;
    margin:2%;
    text-align:center;
    min-height:230px;
  }
  img{
    width:100%;
    border-radius:50%;

  }
  p{
    margin:0;
  }

}
.realisation_list{
  padding-left:0px;

  margin-right:-25px;
  margin-bottom:-25px;
.realisation{
  padding-right:25px;
  padding-bottom:25px;
    width:33%;
    float:left;
    box-sizing: border-box;

  .img{
    height:250px;
    overflow:hidden;
    width:100%;
    background: no-repeat center center;
    background-size:100%;
    background-size:cover;
  }
  color:#8d8d8d;
}}

.contact_form{

  padding-bottom:2em;
#form{
h3, p{
text-align:left;
}

}
.label{
  font-weight:normal;
width:120px;
float:left;

}
input{
  background:transparent;
  border-radius:0;
  border: 1px solid #363031;
  &:focus{
    border-color:$blue;
    background:white;
  }
}
textarea{
  background:transparent;
  border-radius:0;
  border: 1px solid #363031;
  padding:6px 12px !important;
  height:220px !important;
  &:focus{
    border-color:$blue;
    background:white;
  }
}
.inner{
  position:absolute;
  bottom:0;
  left:0;
  right:0;
}
.btn{
width:auto;
background:$blue;
border:2px solid $blue;
border-radius:5px;
color:white;

text-transform:uppercase;
padding:5px 8px;
&:hover{
  color:$blue;
  background:white;




}


}
}

.article_large{

  .date{
    width:25%;
    float:left;
    border-right:1px solid #8d8d8d;
    text-align:right;
    margin-top:20px;
    box-sizing:border-box;
    padding-right:20px;
    min-height:240px;
  }
  .description{

    margin-left:25%;
    padding-left:20px;
    p{
      max-width:70%;
    }
  }
}

#articles{
  margin-bottom:100px;
  margin-top:40px;
}


@media screen and (min-width:880px) {
  #toggle-menu{
    display:none;
  }
  .top{
    .menu{
      display:block !important;
    }
  }
}

.mobile_only{
  
  display:none;
  
  
}

.desktop_only{
  
  display:block;
  
  
}


@media screen and (max-width:880px) {
  
  .socials_links, .contact_links{
    
    top:150px;
  }
  
  .desktop_only{
    
    display:none;
    
    
  }
  
  .mobile_only{
    
    display:block;
    
    
  }
  #services-bloc{
    img{
      margin-top:40px;
    
    }
  }
  
  
  body{
    padding-top:0px;
  }
  div,h1,h2,h3,h4,h5,h6,p,.row-fluid,.row{
    text-align:center;
  }
  
  #home_top{
    
    #home_top_image{
      height:400px;
    }
    
    
    
    
    .inner_t{
      
      h1{

        font-size:20px;
      
        span{
        
          font-size:24px;
        

        }
      }
      
      position:static;
      padding:30px 0;
      margin:0;
      background:#F6F6F6;
    
    }
  }

  #embarquez{

      margin:0px !important;


  }

  .top{
    min-height:50px;

    #toggle-menu{
      display:block;
    }
    position:relative !important;
    display:block;
    #logo{

      display:none;
    }
    #logo-min{

      position:absolute;
      left:10px;
      top:8px;

      display:block !important;
    }
    overflow:visible;
    .menu{
      display:none;
      position:static;
      text-align:center;
      padding-top: 50px;

      a{
        display:block;
        margin:15px auto;

      }
    }

  }
.contact_container{
  
  
  text-align:center;
  .tel_panel{
    display:inline-block;

    width:200px;
    text-align:center;
  }
  .idn_sign{
    margin:20px auto;
  }
  .button_container{
    height:auto !important;

    .inner{
      position:static;
    }

  }

}

.columns{
  display:block !important;
  width:auto !important;
  float:none !important;
}

.gallery .real_gal_link{
  width:50%;
}

#images_agence{
  img{
    display:block !important;

    margin:10px auto !important;
  }

  .fleche-sep{

    -ms-transform: rotate(90deg); /* IE 9 */
        -webkit-transform: rotate(90deg); /* Safari */
        transform: rotate(90deg);
        margin:40px auto !important;
  }


}

.resp-no-margin{
  margin:0 !important;
}


#agence_bloc{
  h2,h3{
    text-align:center !important;
  }

}


#services-bloc{

  .span_6{

    padding:0 !important;
  }


}





.popup_container{
  #popup_content{

    margin:30px;
    

    .inner{
      padding:0px;
      overflow:auto;
      position:absolute;
      top:0;
      left:0;
      right:0;
      bottom:0;
      z-index:5;
    }
    
    
    .center{
      
      padding:30px;
    }




  }
}




}