.visually-hidden {
    position: absolute;
    overflow: hidden;
    clip: rect(0 0 0 0);
    height: 1px;
    width: 1px;
    margin: -1px;
    padding: 0;
    border: 0
}

.nav {
    position: relative;
    overflow-x: auto;
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: center;
    justify-content: center;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: none
}

.nav::-webkit-scrollbar {
    display: none
}

.nav--content-overflow {
    -webkit-box-pack: start;
    justify-content: flex-start
}

.nav .link {
    font-size: .9rem;
    letter-spacing: .02rem;
    text-transform: uppercase;
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
    -webkit-box-align: center;
    align-items: center
}

.nav .link:active,
.nav .link:focus,
.nav .link:hover,
.nav .link:link,
.nav .link:visited {
    color: #fff;
    text-decoration: none
}

.nav .link .text {
    text-align: center;
    white-space: nowrap
}

.nav .link svg path {
    stroke: #fff
}

.nav .link--active {
    margin: 1rem 2rem 1.5rem;
    color: #fff;
    text-decoration: none;
    text-transform: uppercase;
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
    -webkit-box-align: center;
    align-items: center
}

.nav .link--active .icon {
    height: 50px
}

.nav .link--active:after {
    height: .25rem;
    width: 100%;
    margin-top: .5rem;
    background: #60cff6;
    content: ""
}

.nav.LightGray,
.nav.White {
    color: #000;
    border-bottom: 1px solid #d8d9da
}

.nav.LightGray .link:active,
.nav.LightGray .link:focus,
.nav.LightGray .link:hover,
.nav.LightGray .link:link,
.nav.LightGray .link:visited,
.nav.White .link:active,
.nav.White .link:focus,
.nav.White .link:hover,
.nav.White .link:link,
.nav.White .link:visited {
    color: #000
}

.nav.LightGray .link svg path,
.nav.White .link svg path {
    stroke: #000
}

.nav.LightGray .link--active,
.nav.White .link--active {
    color: #fff;
    text-decoration: none;
    text-transform: uppercase;
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
    -webkit-box-align: center;
    align-items: center
}

.nav.LightGray .link--active .icon,
.nav.White .link--active .icon {
    height: 50px
}

.nav.LightGray .link--active:after,
.nav.White .link--active:after {
    height: .25rem;
    width: 100%;
    margin-top: .5rem;
    background: #60cff6;
    content: ""
}

.nav.White {
    background: #fff
}

.nav.LightGray {
    background: #eee
}

.nav.DarkGray {
    background: #222
}

.nav.Black {
    background: #000
}

.icon-nav {
    padding: 1rem 0
}

.icon-nav .link {
    margin: 0;
    padding: 1rem 2rem 1.5rem
}

.icon-nav .link .icon {
    height: 50px
}

.base-nav .link {
    margin: 1rem 0 0;
    padding: 0 2rem
}

.base-nav .link .text {
    padding-bottom: 1rem
}

.base-nav .link--active {
    margin-top: 1rem
}

.base-nav .link--active .text {
    padding-bottom: .5rem
}

.base-nav.White .link--active:after {
    background: #000
}

.base-nav.Black .link--active:after,
.base-nav.Gray .link--active:after {
    background: #fff
}