/* Navigation bars. */
.topnav {

  background-color: $dark-gray;

  .breadcrumb {
    background-color: $dark-gray;
    padding: 8px 0px;
    margin: auto;
    color: $white;

    .asf-logo {
      margin-right: 4px;
      margin-top: -4px;
      margin-bottom: -8px;
      height: 30px;
    }
  }

  a {
    color: $white;
    &:hover, &:focus {
      color: $yellow;
      text-decoration: none;
    }
  }

  .navbar {
    background-color: $green;
    min-height:120px;
    z-index: 0;
    margin-bottom: 0px;

    .navbar-brand {
      min-height:120px;

      img { float: left; }
    }

    .nav {
      padding: 30px 0 0 0;
      color: #fff;

      li a {
        text-align: center;
        font-size: 24px;
        padding: 5px 0 5px 5px;
        margin: 0 10px;
        color: $white;

        &:hover {
          color: $yellow;
          background: none;
        }
      }
    }

    .navbar-header {
      height:120px;
    }

    .navbar-toggle {
      position: relative;
      top: 50%;
      transform: translateY(-50%);
      margin-top:0;

      .icon-bar         { background-color:#FFF; }
      &:focus .icon-bar { background-color:#000; }
    }

    .navbar-collapse {
      border-color: rgba(0, 0, 0, 0);
      box-shadow: none;
    }
  }
}

@media (min-width: 768px) and (max-width: 1024px) {
  .navbar .nav li a {
    padding: 8px 0 15px 8px;
  }
}