.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;
}

}