.header {
  display: flex;
  justify-content: flex-end;
}

.menu-icon {
  display: flex;
  position: fixed;
  /* position: relative; */
  top: 48px;
  right: 32px;
  height: 24px;
  width: 24px;
  cursor: pointer;
  z-index: 3;
}

.bar, .bar:before, .bar:after {
  height: 2px;
  position: absolute;
  transition: all 250ms ease-in-out;
  background-color: #A8ABAE;
  content: '';
}
.bar {
  width: 24px;
  top: 13px;
}
/* .bar:before {
  width: 30px;
  top: -10px;
} */
.bar:after {
  width: 24px;
  top: 10px;
}

.menu-icon:hover .bar, .menu-icon:hover .bar:before, .menu-icon:hover .bar:after {
  /* background-color: #FF530D; */
  background-color: #fff;
}
.menu-icon:hover .bar {
  width: 24px;
}
.menu-icon:hover .bar:after {
  width: 24px;
}

.bar--active, .bar--active:before, .bar--active:after {
  /* background-color: #FF530D; */
  background-color: #fff;
}
.bar--active {
  transform: translate(0px, 5px) rotate(45deg);
  width: 24px;
}
/* .bar--active:before {
  transform: translate(14px, 4px) rotate(45deg);
  width: 20px;
} */
.bar--active:after {
  transform: translate(0px, -10px) rotate(-90deg);
  width: 24px !important;
  /* background-color: red !important; */
}
  
.overlay {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: left;
  position: fixed;
  background-color: #3A3F46;
  z-index: 2;
  opacity: 0;
  transition: all 300ms ease-in-out;
  transform: translateY(-100%);
}

.overlay--active {
  opacity: 1;
  transform: translateX(0);
}

.list {
  padding: 0 0 72px 24px;
  margin: 0;
  list-style: none;
  text-align: left;
}
.items {
  margin-bottom: 30px;
}
.items a {
  color: #fff;
  font-family: 'DM Serif Display', 'Times New Roman', Times, serif;
  font-size: 32px;
  font-weight: 400;
  line-height: 40px;
}