/*----- */
/* https://codepen.io/designcouch/pen/Atyop */
/*----- */

#burger {
	width             : 50px;
	height            : 45px;
	position          : relative;
	margin            : 10px auto;
	-webkit-transform : rotate(0deg);
	-moz-transform    : rotate(0deg);
	-o-transform      : rotate(0deg);
	transform         : rotate(0deg);
	cursor            : pointer;
}

#burger span {
	display            : block;
	position           : absolute;
	height             : 1px;
	width              : 100%;
	background         : #F07D00;
	border-radius      : 9px;
	opacity            : 1;
	left               : 0;
	-webkit-transform  : rotate(0deg);
	-moz-transform     : rotate(0deg);
	-o-transform       : rotate(0deg);
	transform          : rotate(0deg);
	-webkit-transition : .25s ease-in-out;
	-moz-transition    : .25s ease-in-out;
	-o-transition      : .25s ease-in-out;
	transition         : .25s ease-in-out;
}

#burger span:nth-child(1) {
	top : 0px;
}

#burger span:nth-child(2), #burger span:nth-child(3) {
	top : 14px;
}

#burger span:nth-child(4) {
	top : 28px;
}

#burger.open span:nth-child(1) {
	top   : 14px;
	width : 0%;
	left  : 50%;
}

#burger.open span:nth-child(2) {
	-webkit-transform : rotate(45deg);
	-moz-transform    : rotate(45deg);
	-o-transform      : rotate(45deg);
	transform         : rotate(45deg);
}

#burger.open span:nth-child(3) {
	-webkit-transform : rotate(-45deg);
	-moz-transform    : rotate(-45deg);
	-o-transform      : rotate(-45deg);
	transform         : rotate(-45deg);
}

#burger.open span:nth-child(4) {
	top   : 14px;
	width : 0%;
	left  : 50%;
}

@media (max-width : 575px) {
	#burger {
		margin : 0;
	}
}