.header {
	position: sticky;
	top: 0;
	left: 0;
	width: 100%;
  height: 5rem;
	background-color: var(--color-white);
	box-shadow: var(--header-shadow),var(--shadow-inset);
	margin-bottom: -5rem;
	z-index: 10;
}

.header.is-open {
  box-shadow: unset;
}

.header.is-open .header__mobile {
  display: block;
  position: fixed;
}

.header__section {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
  height: 100%;
}

.header__mobile {
  display: none;
  width: 100%;
  height: calc(100% - 4.75rem);
  background-color: var(--color-white);
  z-index: 20;
}

.header__button {
	position: relative;
	border: 0;
	background: transparent;
	padding: 2rem 2rem;
}

.header__button > span{
    display: block;
    position: absolute;
    height: 0.125rem;
    width: 1.625rem;
    background: var(--color-black);
    opacity: 1;
    left: calc(50% - 0.8125rem);
	border-radius: 10rem;
    transform: rotate(0deg);
    transition: all 0.3s ease;
}

.header__button > span:nth-child(1) {
	top: calc(50% - 0.4375rem);
}

.header__button > span:nth-child(2) {
	top: calc(50% - 0.0625rem);
}

.header__button > span:nth-child(3) {
	top: calc(50% - 0.0625rem);
}

.header__button > span:nth-child(4) {
	top: calc(50% + 0.3125rem);
}

.header__button.is-active > span:nth-child(1),
.header__button.is-active > span:nth-child(4) {
  width: 0%;
  left: 50%;
}

.header__button.is-active > span:nth-child(2) {
  transform: rotate(45deg);
}

.header__button.is-active > span:nth-child(3) {
  transform: rotate(-45deg);
}