$topnav: '.navbar';
$hero: '.hero';
$homepage: '.homepage';

@include mobile {
  .visible-phone {
    display: block;
  }

  .visible-desktop {
    display: none;
  }
}

#{$homepage} {

  @include mobile {
    /*
    * Layout
    *
    */

    .container {
      padding: $unit * 2;
      width: auto;
    }

    @for $i from 1 through 10 {
      .span#{$i} {
        width: auto;
      }
    }


    #{$topnav} {
      .container {
        padding: 0 $unit;
      }
    }

    /*
    * Top Navigation
    *
    */

    #navbar-main {
      #{$topnav}-inner {
        height: $unit * 5;
      }

      .brand {
        margin: 6px 0 0 0;

        a {
          margin: 0;
        }
      }

      .nav {
        margin: 0;

        .dropdown-toggle {
          font-size: 12px;
          line-height: $unit * 5;
          padding: 0 $unit;
        }
      }
      .dropdown-menu {
        a {
          padding: 0 $unit;
        }
      }

      .navbar-search  {
        background: $topnav-main-bgcolor;
        border-bottom: 1px solid $topnav-main-bgcolor;
        left: 0;
        right: 0;
        top: 100%;

        i {
          left: $unit + 4;
          top: $unit - 1;
        }

        .search-query {
          border-radius: 0;
          height: $unit * 4;
        }
      }
    }

    #navbar-notice {
      top: $unit * 5;

      .site-notice {
        font-size: 11px;
      }
    }

    /*
    * Hero
    *
    */

    #{$hero} {
      padding: ($unit * 10) ($unit * 4) ($unit * 4) ($unit * 4);

      h2 {
        background-size: 230px 60px ;
        height: 60px;
        width: 230px;
      }
    }
  }
}
