header.header {
  width: 100vw;
  
  background: #FFBB00;

  padding: 24px;

  position: fixed;

  z-index: 1000;
}

header.header nav.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

header.header nav.navbar div.header__logo {
  display: flex;
  flex-direction: column;
}

header.header nav.navbar div.header__logo img {
  width: 160px;
}

header.header nav.navbar div.header__logo p {
  color: #743618;
  font-size: 1rem;
  font-family: Roboto, sans-serif;
  font-weight: 500;
  text-align: start;
  text-transform: uppercase;
  letter-spacing: 2px;

  margin-top: 24px;
}

header.header nav.navbar input.menu__btn {
  display: none;
}

header.header nav.navbar input.menu__btn:checked ~ .menu__icon span.navicon {
  background: transparent;
}

header.header nav.navbar input.menu__btn:checked ~ .menu__icon span.navicon:before {
  transform: rotate(-45deg);
}

header.header nav.navbar input.menu__btn:checked ~ .menu__icon span.navicon:after {
  transform: rotate(45deg);
}

header.header nav.navbar input.menu__btn:checked ~ .menu__icon:not(.steps) span.navicon:before,
header.header nav.navbar input.menu__btn:checked ~ .menu__icon:not(.steps) span.navicon:after {
  top: 0;
}
  
header.header nav.navbar label.menu__icon {
  cursor: pointer;
  /* display: inline-block; */
  /* float: right; */
  padding: 28px 20px;
  position: relative;
  user-select: none;
}

header.header nav.navbar label.menu__icon span.navicon {
  width: 18px;
  height: 2px;

  background: #FFFFFF;

  position: relative;

  display: none;
  
  transition: background .2s ease-out;
}

header.header nav.navbar label.menu__icon span.navicon:before,
header.header nav.navbar label.menu__icon span.navicon:after {
  content: '';

  width: 100%;
  height: 100%;

  background: #FFFFFF;

  position: absolute;

  display: block;

  transition: all .2s ease-out;
}

header.header nav.navbar label.menu__icon span.navicon:before {
  top: 5px;
}

header.header nav.navbar label.menu__icon span.navicon:after {
  top: -5px;
}

header.header nav.navbar ul.header__menu {
  display: flex;
}

header.header nav.navbar ul.header__menu li.header__menu__item {
  color: #FFFFFF;
  font-size: 0.875rem;
  font-family: Roboto, sans-serif;
  font-weight: 700;
  text-align: start;
  text-transform: uppercase;
  letter-spacing: 0px;

  padding: 24px;
}

header.header nav.navbar ul.header__menu li.header__menu__item a {
  color: #FFFFFF;
  text-decoration: none;
}