/*
@styleguide
@title Navs


<div class="sub-section">
  <h3 class="psg-h3">Nav Tabs</h3>
  <div class="psg-bg">
    <div class="psg-article">
      <ul class="nav nav-tabs">
        <li class="nav-item">
          <a class="nav-link active" href="#">Active</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Another link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#">Disabled</a>
        </li>
      </ul>
    </div>
  </div>
</div>

<div class="sub-section">
  <h3 class="psg-h3">Loader</h3>
  <div class="loader">Loading...</div>
</div>


*/




/*Theme style starts--------------------------------------------------------*/


/* Navigation
// ============ */

.nav {
  list-style: none;
  margin-left: 0;
  > li, li > a {
    display: inline-block;
    *display: inline;
    zoom: 1;
  }
}

.nav--tabs, .nav-tabs {
  /*border-bottom: 1px solid $borders;*/
  margin-bottom: 0;
  clear: fix;
  background: $lightgreyblue;

  > li {
    float: left;
    position: relative;
    display: block;
    margin-bottom: -1px;
    font-family: $primaryfont;
    text-transform: uppercase;
    font-size: 0.8em;
    letter-spacing: 1px;

    .nav-link {
      border: none;
      border-bottom: 0;
      color: $black;
      font-size: 1rem;
      font-family: $primaryfontbold;
      display: block;
      padding: 1em 1.2em 0.5em;
      border-radius: $borderradius $borderradius 0 0;
      transition: 0.3s all;

      &:hover {
        color: $black;
        background: $white;
      }
      &.active {
        color: $primarycolour;
        font-weight: 400;
        margin-bottom: 0;
        border-color: $borders;
        border-bottom: 0;
        /*@mixin gradient-3stop-vertical $lightgrey, $white, $white, 30%;*/
      }
    }
  }
}

.tab-pane {
  display: none;
  padding: 2em 0;

  &.active {
    display: block;
  }
}

.nav-pills{
    text-transform: uppercase;
    font-size: 0.75em;
    font-family: $regularweight;
    .nav-link{
        padding: 0.25em 1.05em 0.15em;
        transition: 0.3s all; 
        &:active, &:link{
          color: $primarycolour;
        }
        &.active, &.active:focus{
          background: $highlightcolour;
          color: $white !important;
            &:hover{
                background: $primarycolour;
            }  
        }
        
        &:hover{
          background: $lightgrey;   
        }
    }
}

/*.dropdown-menu{
    border-radius: $borderradius;
    border: none;
    margin-top: -1px;
    background: $darkgreyblue;
    box-shadow: 0 0 4px rgba(0,0,0,0.14);
    font-family: $regularweight;
    font-size: .875rem; 
    padding: 0;

    .dropdown-item{
        color: $white;
        padding: 0.5em 1em;

        &:hover{
            background: $blue;
        }
        a{
            color: $darkgrey;
        }
    }
    
}*/

.divider{
  height: 1px;
  overflow: hidden;
  background-color: ;
  margin: 0;
}