$toogle-size: 48px
$toggle-span-height: 3px

.mnu-toggle
	position: relative
	float: right
	display: block
	width: $toogle-size
	height: $toogle-size
	margin-left: 30px
	cursor: pointer

.mnu-toggle span
	position: absolute
	display: block
	left: 0
	right: 0
	top: $toogle-size * 0.5 - $toggle-span-height * 0.5

.mnu-toggle span:after,
.mnu-toggle span:before
	content: ""
	position: absolute
	left: 0
	top: - $toogle-size * 0.25

.mnu-toggle span:after
	top: $toogle-size * 0.25

.mnu-toggle span,
.mnu-toggle span:after,
.mnu-toggle span:before
	width: $toogle-size * 0.8
	margin: 0 auto
	height: $toggle-span-height
	background-color: #fff
	transition: all 0.3s
	backface-visibility: hidden
	border-radius: $toggle-span-height * 0.5

.mnu-toggle.on span
	background-color: transparent

.mnu-toggle.on span:before
	transform: translate(0px, 12px) rotate(45deg)

.mnu-toggle.on span:after
	transform: translate(0px, -12px) rotate(-45deg)