body.is-menu-open {
	overflow: hidden;
}

.menu-button {
	width:      32px;
	height:     32px;
	margin:     0;
	padding:    0;
	background: transparent;
	border:     none;
	position:   relative;
	outline:    none;
}

.menu-button-bar {
	width:              100%;
	height:             4px;
	background:         #333;
	position:           absolute;
	left:               0;
	transform:          rotate(0deg);
	-webkit-transition: top 500ms, transform 500ms, opacity 500ms;
	transition:         top 500ms, transform 500ms, opacity 500ms;
}

.menu-button-bar.is-top {
	top: 4px;
}

.menu-button-bar.is-middle {
	top: 14px;
}

.menu-button-bar.is-bottom {
	top: 24px;
}

body.is-menu-open .menu-button-bar.is-top {
	top:       14px;
	transform: rotate(45deg);
}

body.is-menu-open .menu-button-bar.is-middle {
	opacity: 0;
}

body.is-menu-open .menu-button-bar.is-bottom {
	top:       14px;
	transform: rotate(-45deg);
}