#nav-hamburger-menu input ~ .icon span {
	background: #eeeeee;
}
#nav-hamburger-menu input ~ .text {
	color: #eeeeee;
}

#nav-hamburger-menu {
	background: transparent;
	border: none;
	cursor: pointer;
	outline: none;
}
#nav-hamburger-menu > div {
	display: block;	/* allows children to have height 100% */
	position: relative;
}
#nav-hamburger-menu input {
	box-sizing: border-box;
	margin: 0;
	display: block;
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;

	cursor: pointer;

	opacity: 0;
	z-index: 2;
}
#nav-hamburger-menu .icon, #nav-hamburger-menu .text {
	display: inline-block;
	vertical-align: middle;
}
#nav-hamburger-menu .icon span {
	border-radius: 3px;
	display: block;
	width: 33px;
	height: 4px;
	margin: 5px 0;
	position: relative;

	z-index: 1;

	transition: transform 0.5s
		cubic-bezier(0.77,0.2,0.05,1.0),
		background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
		opacity 0.55s ease;
}
#nav-hamburger-menu .icon span:first-child {
	transform-origin: 6px 7px;
}
#nav-hamburger-menu .icon span:last-child {
	transform-origin: 6px -4px;
}
#nav-hamburger-menu input:checked ~ .icon span {
	opacity: 1;
	transform: rotate(45deg)
		translate(0, 0);
}
#nav-hamburger-menu input:checked ~ .icon span:nth-last-child(2) {
	opacity: 0;
	transform: rotate(0deg)
		scale(0.2, 0.2);
}
#nav-hamburger-menu input:checked ~ .icon span:last-child {
	transform: rotate(-45deg)
		translate(0, 0);
}

@media screen and (max-width: 700px) {
	#nav-hamburger-menu ~ ul {
		background: inherit;
		border-color: inherit;
		position: absolute;
		width: 100%;
	}
	#nav-hamburger-menu ~ ul:hover,
	#nav-hamburger-menu ~ ul li:hover {
		border-color: #ffffff;
	}
	
	#nav-hamburger-menu:not(.open) ~ ul,
	#nav-hamburger-menu ~ ul li {
		height: 0px;
		overflow: hidden;
		transition: height 0.5s ease;
	}
	#nav-hamburger-menu.open ~ ul li {
		border-color: inherit;
		height: 2.8rem;
		transition: height 0.5s ease;
	}
}