.navLink {
  padding-left:    0;
  margin-bottom:   0;
  list-style:      none;
  transition:      all .5s ease;
  text-decoration: none;

}

.navLink, .nestLink {

  display:          inline-block;
  position:         relative;
  width:            100%;
  letter-spacing:   .1rem;
  margin-left:      2rem;
  padding-top:      $navHeight /8;
  padding-bottom:   $navHeight /8;
  background-color: transparent;
  border-radius:    2rem;
  border-width:     .2rem;
  border-style:     solid;
  border-color:     transparent;
  vertical-align: middle;

  // indicate current page
  &[aria-current], &:active, &:focus {

    @include media-breakpoint-up($navBreak) {

      color:            white;
      background-color: $brand-secondary;

    }

  }

  color:            white;
  font-family:      $font-family-serif;
  font-weight:      300;
  @include fontSizer(1.5, 1.3);

  line-height:      1.25;

  @include media-breakpoint-up($navBreak) {

    padding:     0 1rem;
    color:       $brand-primary;
    margin-left: 0;

    &:focus, &:active {
      text-decoration: none;
      color:           $brand-primary-dark;
    }
  }

  transition:       all .5s ease;

}

.nestLink {
  position:        relative;
  left:            0;
  right:           0;
  list-style:      none;
  transition:      all .25s ease;
  text-decoration: none;
  &:after {

    content:             '';
    @include media-breakpoint-up($navBreak) {
      content: none;
    }
    height:              $size;
    width:               $size;
    position:            absolute;
    top:                 50%;
    transform:           indicator() rotate(45deg);
    border-style:        solid;
    border-width:        $size/2;
    border-top-color:    transparent;
    border-right-color:  transparent;
    border-left-color:   $brand-secondary;
    border-bottom-color: $brand-secondary;
    transition:          transform .5s ease;

  }
  & > i {
    margin-left: 1rem;
  }

}

.portal {
  order:            -2;
  text-align:       center;
  background-color: $brand-primary;
  color:            white;
  letter-spacing:   .1rem;
  @include fontSizer(1.8, 1.4);
  padding:          .5rem 1rem;
  transition:       all .5s ease;
  box-shadow:       0 .1rem .1rem $brand-primary-dark;
  @include media-breakpoint-up($navBreak) {
    order:         0;
    border-radius: 2rem;
    box-shadow:    none;
  }
  &:hover {
    background-color: $gray;
  }
  a {
    color: inherit !important;
    i {
      margin-right: .5rem;
    }
    &:hover {
      //color: inherit;
    }
  }

}