@home-intro-bg: url(img/background-intro.jpg);
@home-colored-section-bg: @gray-lighter;
@home-colored-section-color: black;

.home-layout
{
  nav.navbar
  {
    background: darken(#fff, 50%);
    width: 100%;
    z-index: 1000;
    .link
    {
      color: white;
      &:hover
      {
        background: inherit;
        color: white;
        text-decoration: none;
      }
      &.btn-hollow
      {
        padding-top: 5px;
        padding-bottom: 5px;
        margin-top: 5px;
      }
    }
    ul.nav
    {
      list-style: none;
      padding-top: 2px;
      > li
      {
        padding-left: 10px;
        display: inline-block;
        padding-right: 5px;
      }
      > .dropdown
      {
        padding-right: 0;
      }
      .open .dropdown-toggle
      {
        background: none;
        color: white;
      }
    }
  }
  section
  {
    padding-top: 50px;
    padding-bottom: 100px;
    &.colored
    {
      background: @home-colored-section-bg;
      color: @home-colored-section-color;
    }
  }
  section#intro
  {
    background: @home-intro-bg;
    color: white;
    h1
    {
      padding-top: 10px;
      @media (max-width: 768px) {
        padding-top: 10px;
      }
    }
    a.btn
    {
      margin-top: 10px;
      color: white;
    }
  }
  section#how-it-works 
  {
    .fa 
    {
      margin-top: 60px;
      margin-bottom: 30px;
    }
    .icntitle
    {
      font-size: 14px;
    }
  }
  section#ipad 
  {
    padding-bottom: 0 !important;
    overflow-x: hidden;
    h3
    {
      padding-top: 100px;
      @media (max-width: 768px) {
        padding-top: 0;
      }
    }
    .btn
    {
      margin: 20px auto 30px;
    }
  }
  section#final 
  {
    padding-bottom: 0;
    .btn 
    {
      margin: 20px auto 30px;
    }
  }
}