heylium_app/app/assets/stylesheets/public.scss

$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{
      .inner{
      
        padding-top:30px;
      }
      .decor{
        

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


  }
  
  #intro{
    padding:60px 20px;
    .center{
      padding:0px;
    }
    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;
  
  

  }
  
  #nearbys, #balons{
    .left{

      height:inherit;
     
    }
  }
  
   #balons{
    .left{

      padding-bottom:30px;
     
    }
  }
  
  
}