$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;

.clear{
  clear:both;
}

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

 
  text-align:left;
  font-weight:300;
  padding:0;
  margin:0;

  background:white;
  font-size: 19px;
  line-height: 1.2em;
  color: #1A1A1A;

  


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




#home{
  background:url('/heylium-home.jpg') no-repeat center center;
  background-size:100%;
  background-size:cover;
  //height:850px;
  color:white;
  text-align:center;
  font-size:25px;
  #logo{
    height:63px;
    margin:70px 0;
    
   
    
  }
  .links{
    margin:70px 0;
  }
  padding:150px 20px;
  
  

}


.links{
  a{
    
    display:inline-block;
    padding:10px;
    
    img{
      
      height:47px;
    }
    
    
  }
  
}

.tips{
  margin:0 20px;
  margin-top:40px;
  color:#979797;
  font-size:0.8em;
  
  img{

    height:63px;
    margin-right:20px;
    max-width:1000px;
  }
}


.decor{
  
  fill: white;



  display: block;
  position: relative;
  margin: 0 auto;
  
  position: absolute;
  width: 100%;
  height: 30px;
  left: 0;
  top:-29px;
  
}

#intro{
  
  .decor2{
    left: 0;
    bottom:-29px;
    top:auto;
  }
  
  text-align:center;
  padding:100px 20px;
  padding-bottom:130px;
  position:relative;
  p{
    max-width:680px;
    margin:0.62em auto;
  }
  img{
    max-width:570px;
    margin-top:30px;

  }
}

#nearbys, #balons{
  .left, .right{
    height:500px;
  }
  .second{
    font-size: 0.9em;
  }
  .inner{
    max-width:550px;
    p{
      //max-width:450px;
    }
    margin:auto;
    padding:40px 20px;
  }
  
}

#nearbys{
  background:#F2F2F2;
  
  .left{
    width:50%;
    float:left;


    position:relative;
    .decor{
      fill:#F2F2F2;
      height:15px;
      top:auto;
      bottom:-15px;
    }
    
    .inner{
      
      padding-top:70px;
    }
  }
  
  .right{
    width:50%;
    float:right;

    background:url('/heylium-nearbys.jpg') no-repeat center center;
    background-size:100%;
    background-size:cover;
    
    
  }


}

#balons{
  background:white;
  
  .left{
    width:50%;
    float:right;
    
    position:relative;
    .decor{
      fill:white;
      height:15px;
      top:-15px;
    }
    
  }
  
  .right{
    width:50%;
    float:left;

    background:url('/heylium-balons.jpg') no-repeat center center;
    background-size:100%;
    background-size:cover;
    
    
    
  }


}


#contact{
  
  position:relative;

  .decor{
  
    fill: #2388B8;
  }
  background:#2388B8;
  color:white;
  text-align:center;
  padding:100px 20px;
  padding-bottom:130px;
  h2{
    margin:0;
    padding:0;
    margin-bottom:30px;
    color:white;
  }

}

h2{
  font-family: 'Montserrat', sans-serif;
  font-weight:700;
  font-size:1.15em;
  
  color:#1A1A1A;
  margin-bottom:1.4em;
  
}
p{
  margin-bottom:0.8em;
}


@media screen and (max-width:1080px) {
  body{
    font-size:17px;
  }
  
  #nearbys, #balons{
    .left, .right{
      height:400px;
      
      .inner{
        max-width:500px;
      }
    }
  }
}
.decor-mobile{
  display:none;
  
}
@media screen and (max-width:900px) {
  body{
    font-size:17px;
  }
  
  #nearbys, #balons{
    .left, .right{
      float:none;
      width:100%;
      height:400px;
      .decor{
        height:30px;
      }
      .inner{
        max-width:500px;
      }
    }
  }
  
  
  #balons{
    
  
    .left{
      
      .decor{
        

        top:-29px;
      }
    
    }
  


  }
  
  #nearbys{
    
    
  
    .left{
      
      .decor{
        

        bottom:-29px;
      }
      
      .decor-mobile{
        display:block;
        bottom:auto;
        top:-29px;
      }
    
    }
  


  }
  
  #intro{
    img{
      max-width:90%;
    }
  }
  
}

@media screen and (max-width:620px) {
  #home{
    background:url('/heylium-home.jpg') no-repeat left center;
    background-size:100%;
    background-size:cover;

    #logo{
      height:63px;
      margin:40px 0;
    
   
    
    }
    .links{
      margin:40px 0;
    }
    padding:70px 20px;
  
  

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

.mobile_only{
  
  display:none;
  
  
}

.desktop_only{
  font-family: 'Montserrat', sans-serif;
  display:block;
  
  
}



.bottom_social{
  margin:1em 0;
  text-align:center;
  margin-top:2em;
  display:none;
  
  a, .top_link{
    display:inline-block;
    padding:10px 0px;
    width:43px;
    margin:0 5px;
    text-align:center;
    cursor:pointer;
    font-size:1.2em;
    background:$blue;
    color:white;
    
    &:hover{
      background:darken($blue, 10);
    }
    
  }
}

#nous-bloc{
  .gallery_for_mobile{
    display:none;
    
    img{
      margin-bottom:20px;
      
    }
  }

  .rea-gal.gallery{
    
  }
}



@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{
    padding:0;
    #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;
  }
  .heylium_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;
  }
  
  


}
.mobile-no-margin-top{
  margin-top: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;
    }




  }
}


.center{
  
  padding: 0 20px;
}


}


.bottom_mobile_only{
  display:none;
}
.bottom_desktop_only{
  display:inline;
  
}


@media screen and (max-width:600px) {
  .bottom_mobile_only{
    display:block;
  }
  .bottom_desktop_only{
    display:none;
  
  }
  #nous-bloc{
    .gallery_for_mobile{
      display:block;
    
    }

    .rea-gal.gallery{
      display:none;
    }
  }
  
  
  
  .bottom_social{
    display:block;
  }
  
  .socials_links, .contact_links{
    
    display:none;
  }
  
}