.nav-open nav {
border-bottom: 1px dotted rgba(255, 255, 255, .2); padding: 10px 0; a { display: block; } @media #{$mid-point} { border: 0; padding: 0 20px; a { display: inline; } }
}
nav {
text-transform: uppercase; font-size: .8em; width: 100%; @media #{$mid-point} { text-align: right; position: absolute; top: 13px; right: 0; padding: 0 20px; } a { margin: 0 3px; padding: 20px 10px; border-bottom: 1px solid rgba(255,255,255,0); color: rgba(255,255,255,.8); transition: .2s ease-in-out; display: none; @media #{$mid-point} { display: inline; padding: 10px; } &.nav-toggle { display: inline; position: absolute; right: 10px; top: -22px; font-size: 1.9em; border: 0; @media #{$mid-point} { display: none; } &:hover { border: 0; } } } a:hover { border-bottom: 1px solid rgba(255,255,255,.3); color: #fff; } @media #{$mid-point} { a.highlight { border: 1px #ccc solid; border-radius: 5px; &:hover { background: #fff; color: $brand-color; } } } a.active { color: #fff; }
}