Swipebox, Hero Area, Navigation, Font

- replaced Lightbox with Swipebox for better responsiveness
- fixed navigation brand alignment
- changed hero area appearance and improved responsiveness
- added missing lato font

_includes/hero_area.html

@@ -4,14 +4,14 @@
   <div class="container">
     <div class="row">
       <div class="col-md-12">
-        <div class="col-md-6 col-sm-6 col-xs-12 animated fadeInLeft delay-0-5 hero-text">
+        <div class="col-md-6 col-xs-12 animated fadeInLeft delay-0-5 hero-text">
           <h1 class="title">{{site.title}}</h1>
           <h2 class="subtitle">{{site.subtitle}}</h2>
           <p>{{ site.description }}</p>
           <a href="#download" class="btn btn-primary btn-lg blue-bg">Download Now!</a>
           <a href="#about" class="btn btn-common btn-lg">Learn More</a>
         </div>
-        <img class="col-md-6 col-sm-6 col-xs-12 animated fadeInRight" src="{{site.baseurl}}/img/screenshot_sing.png" alt="">
+        <img class="col-md-6 col-xs-12 animated fadeInRight" src="{{site.baseurl}}/img/notes.png" alt="">
       </div>
     </div>
   </div>