_nav.scss

/*
NAV

*/

.site-title, .nav--cross, .nav--primary {
  @include outer-container();
  padding: $gutter/2;

  @include media($xl) {
    padding: $gutter 0;
  }
}

@include media($md) {
  .nav__site-title,
  .nav--cross .nav__list {
    @include span-columns(6);
  }
  .nav--cross .nav__site-title {
      float: left;
  }
  .nav--cross .nav__list {
    text-align: right;
    float: right;
    margin-right: 0;
  }
  .nav__item--withrightpadding {
    padding-right: $gutter;
  }
}

.nav--cross .nav__list {
  font-size: modular-scale(-1);
  line-height: 24px;

  @include media($sm) {
    font-size: modular-scale(0);
  }
}

.nav__list {
  list-style-type: none;
  margin: 0;
}

.nav--cross .nav__link:link,
.nav--cross .nav__link:visited,
.nav--primary .nav__link:link,
.nav--primary .nav__link:visited {
  color: $primary;
  text-decoration: none;
}

.nav__item {
  font-family: "Graphik Web", sans-serif;
  display: inline-block;
  vertical-align: top;
  margin-right: $gutter/4;
}

.nav__item--withseparator:after {
  content: "|";
  display: inline-block;
  padding-left: $gutter/4;
  color: $background;
}

.nav__item--icon {
  float: right;
  line-height: 20px;
}

.nav__item--last {
  margin-right: 0;
}

.nav__item--active {
  font-weight: 800;
}

.nav__link:hover,
.nav__link:active {
  text-decoration: underline !important;
  color: $primary;
}

.nav__link--about {
  @include hide-text;
  display: block;
  width: 20px;
  height: 20px;
  background: url(/uploads/about.svg);
  background-size: cover;
}

.nav__icon {
  fill: $primary;
  width: 20px;
  height: 20px;
}

.nav--page {
  clear: both;
  @include row;
  margin: 0 $gutter;
}

.nav--page .nav__item {
  display: block;
  @include pad;
  @include span-columns(6);
  background: $accent;
  color: $background;
  text-decoration: none;
  margin-top: 75px;
}

.nav--page .nav__item--next {
  text-align: right;
}

@include media($md) {

  .nav--cross .nav__list {
    font-size: modular-scale(-1);
  }

  .nav--primary .nav__list {
    font-size: modular-scale(1);
  }

}