.hamburger {
	position: relative;
	height: 100%;
	width: 3rem;
	background-color: #313133;
	cursor: pointer;
	overflow: hidden;
}

.menu__icon {
	position: absolute;
	width: 30px;
	height: 20px;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.menu__line {
	position: absolute;
	left: 0;
	background-color: white;
	height: 3px;
	width: 100%;
	border-radius: 3px;
	pointer-events: none;
}

.menu__line--1 { top: 0 }
.menu__line--2 {
	top: 0;
	bottom: 0;
	margin: auto;
}

.menu__line--3 { bottom: 0 }

.hamburger .menu__icon {
	transition: transform 0s ease-in-out;
}

.hamburger .menu__line--1 {
	transition: transform .2s ease-in-out .3s, opacity 0s ease-in-out .4s;
}

.hamburger .menu__line--2 {
	transition: transform .2s ease-in-out;
}

.hamburger .menu__line--2:before {
	content: '';
	position: absolute;
	width: 100%;
	height: 3px;
	background-color: white;
	border-radius: 3px;
	transition: transform .2s ease-in-out;
}

.hamburger .menu__line--3 {
	transition: transform .2s ease-in-out .3s, opacity 0s ease-in-out .4s;
}

.hamburger.open .menu__icon {
	transform: translate(-50%, -50%) rotate(90deg);
	transition: transform .2s ease-in-out;
}

.hamburger.open .menu__line--1 {
	opacity: 0;
	transform: translate3d(0, 8.5px, 0);
	transition: transform .2s ease-in-out .2s, opacity 0s ease-in-out .4s;
}

.hamburger.open .menu__line--2 {
	transform: rotate(45deg);
	transition: transform .2s ease-in-out .5s;
}

.hamburger.open .menu__line--2:before {
	transform: rotate(-90deg);
	transition: transform .2s ease-in-out .5s;
}

.hamburger.open .menu__line--3 {
	opacity: 0;
	transform: translate3d(0, -8.5px, 0);
	transition: transform .2s ease-in-out .2s, opacity 0s ease-in-out .4s;
}