// Partials / Page Nav

.page-nav{
  position:relative;
  font-size:15px;
  line-height:21px;
  color:$blue-grey;
  border-bottom:1px solid $line-color;
  background-color:$white;
  box-shadow:0 3px 10px 0 rgba(0,0,0,0.025);

  &.is-sticky{
    position:-webkit-sticky;
    position:sticky;
    top:0;
    z-index:9;
  }

  & > .inner{
    max-width:$desktop-max-width;
    margin-left:auto;
    margin-right:auto;
  }

  a:not(.button),
  a:not(.pill-button){
    display:block;
    color:$blue-grey;
    padding:25px 10px;
    text-decoration:none;
    &:hover{
      color:$blue;
    }
  }

  ul{
    display:inline-flex;
    width:100%;
    padding:0 80px;
    justify-content:space-around;
    align-items:center;
    flex-wrap:wrap;
    margin-left:0;
    margin-right:0;
    max-width:100%;
  }

  li{
    max-width:20%;
    flex:0 0 20%;
    text-align:center;

  }

}

@include breakpoint($laptop){
  .page-nav{
    ul{
      padding:0;
    }
  }
}

@include breakpoint($tablet-landscape){
  .page-nav{
    font-size:14px;
    line-height:19px;

    a:not(.button),
    a:not(.pill-button){
      padding:20px 10px;
    }
  }
}

@include breakpoint($tablet-portrait){
  .page-nav{
    ul{
      padding:0 40px 0 0;
    }
  }
}

@include breakpoint($phone){
  .page-nav{
    display:none;
  }
}
