/* 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;
  > 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: 1px solid transparent;
      border-bottom: 0;
      color: $grey;
      display: block;
      padding: 1em 1.2em 0.5em;
      border-radius: $borderradius $borderradius 0 0;
      transition: 0.3s all;
      &:hover {
        color: $black;
      }
      &.active {
        color: $black;
        font-weight: 400;
        margin-bottom: 0;
        border-color: $borders;
        border-bottom: 0;
        @mixin gradient-3stop-vertical $ultraweak, $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: $ultraweak;   
        }
    }
}

.dropdown-menu{
    border:0;
    border-radius: 0;
    color: $grey;
    margin-top: -1px;
    background: $ultraweak;
    box-shadow: 0 0 4px rgba(0,0,0,0.14);
    font-family: $regularweight;
    border-top: 1px solid $grey;
    border-bottom: 2px solid $grey;
    .dropdown-item{
        color: $darkgrey;
        font-size: 0.95em;
        &:hover{
            color: $highlightcolour;  
            background: $white;
        }
        a{
            color: $darkgrey;
        }
    }
    
}

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