.header-logo {
display: inline-block; padding: 1em 0 0.7em; font-size: 1.8em; color: $color_font_inverse_light;
}
.header-nav {
float: right; label, #hamburger { display: none; }
}
.header-navItems {
display: flex; justify-content: flex-end; a { box-sizing: border-box; margin: 0; font-size: 1.5rem; padding:0.6rem 1rem; font-family: $font_decoration; color: $color_font_inverse; text-transform: uppercase; font-weight:400; text-align: center; text-decoration: none; border-radius: 50px; margin: 3.6rem 0.2rem 0; &:hover { background-color: $color_primary; color: $color_font_inverse_light; } &.active { color: $color_font_inverse_light; cursor: default; } }
}
@media screen and (max-width: 1024px){
.header-nav { width: auto; height: 1.4em; margin: 15px 0 0 0; label { display: inline-block; font-style: normal; font-size: 2.3em; line-height: 1em; padding: 10px; } } .header-navItems { display: none; position: fixed; width: 100%; left: 0; top: 89px; z-index: 1; a { display: block; box-sizing: border-box; background: $color_background_inverse; width: 100%; padding: 20px 0; border-top: 1px solid $color_font_dark; color: $color_font_inverse_light; font-size: 1.1em; font-weight: 400; border-radius: 0; margin: 0; &:hover, &:active { color: $color_font_inverse_light; background-color: $color_primary; } } } .header-nav input:checked ~ .header-navItems { display: block; }
}