body {
	padding:0;
	margin:0;
	overflow: hidden;
}

.bg {
	position: absolute;
	width:100%;
	height:100%;
	background: #ff017f; /* Old browsers */
	background: -moz-linear-gradient(top,  #ff017f 0%, #ff2628 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ff017f), color-stop(100%,#ff2628)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #ff017f 0%,#ff2628 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #ff017f 0%,#ff2628 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #ff017f 0%,#ff2628 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #ff017f 0%,#ff2628 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff017f', endColorstr='#ff2628',GradientType=0 ); /* IE6-9 */
}

span.menu {
	position: absolute;
	left: 150%;
	top: 7px;
	font-size: 22px;
	font-family: 'Comfortaa', cursive, sans-serif;
	letter-spacing: 1px;
	color: #fafafa;
}

.container {
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -20px 0 0 -65px; 
	width: 130px;
	height: 40px;
}

.container input {
	display: none;
}

.container label {
	position: relative;
	width: 40px;
	height: 40px;
	display: block;
	cursor: pointer;
	background: transparent;
}

/* Exit Icon */

.container label:before,
.container input:checked + label:before {
	content: '';
	position: absolute;
	top: 50%;
	margin-top: -2px;
	width: 40px;
	height: 4px;
	border-radius: 2px;
	background: #fafafa;
}

.container label:before {
	-webkit-animation: animationOneReverse 1s ease forwards;
	animation: animationOneReverse 1s ease forwards;
}

@-webkit-keyframes animationOneReverse {
	0% { -webkit-transform: rotate(315deg); }
	25% { -webkit-transform: rotate(360deg); }
	50%, 100% { -webkit-transform: rotate(0deg); }
}
@keyframes animationOneReverse {
	0% { transform: rotate(315deg); }
	25% { transform: rotate(360deg); }
	50%, 100% { transform: rotate(0deg); }
}

.container input:checked + label:before {
	-webkit-animation: animationOne 1s ease forwards;
	animation: animationOne 1s ease forwards;
}

@-webkit-keyframes animationOne {
	0%, 50% { -webkit-transform: rotate(0deg); }
	75% { -webkit-transform: rotate(360deg); }
	100% { -webkit-transform: rotate(315deg); }
}
@keyframes animationOne {
	0%, 50% { transform: rotate(0deg); }
	75% { transform: rotate(360deg); }
	100% { transform: rotate(315deg); }
}

.container label:after,
.container input:checked + label:after {
	content: '';
	position: absolute;
	top: 50%;
	margin-top: -2px;
	width: 40px;
	height: 4px;
	border-radius: 2px;
	background: #fafafa;
}

.container label:after {
	-webkit-animation: animationTwoReverse 1s ease forwards;
	animation: animationTwoReverse 1s ease forwards;
}

@-webkit-keyframes animationTwoReverse {
	0% { -webkit-transform: rotate(405deg); }
	25% { -webkit-transform: rotate(450deg); }
	50%, 100% { -webkit-transform: rotate(0deg); }
}
@keyframes animationTwoReverse {
	0% { transform: rotate(405deg); }
	25% { transform: rotate(450deg); }
	50%, 100% { transform: rotate(0deg); }
}

.container input:checked + label:after {
	-webkit-animation: animationTwo 1s ease forwards;
	animation: animationTwo 1s ease forwards;
}

@-webkit-keyframes animationTwo {
	0%, 50% { -webkit-transform: rotate(0deg); }
	75% { -webkit-transform: rotate(450deg); }
	100% { -webkit-transform: rotate(405deg); }
}
@keyframes animationTwo {
	0%, 50% { transform: rotate(0deg); }
	75% { transform: rotate(450deg); }
	100% { transform: rotate(405deg); }
}

/* Burger Icon */

.container label .burger:before {
	content: '';
	position: absolute;
	top: 6px;
	width: 40px;
	height: 4px;
	border-radius: 2px;
	background: #fafafa;
	-webkit-animation: animationBurgerTopReverse 1s ease forwards;
	animation: animationBurgerTopReverse 1s ease forwards;
}

@-webkit-keyframes animationBurgerTopReverse {
	0%, 50% { -webkit-transform: translateY(12px); opacity: 0; }
	51% { -webkit-transform: translateY(12px); opacity: 1; }
	100% { -webkit-transform: translateY(0px); opacity: 1; }
}
@keyframes animationBurgerTopReverse {
	0%, 50% { transform: translateY(12px); opacity: 0; }
	51% { transform: translateY(12px); opacity: 1; }
	100% { transform: translateY(0px); opacity: 1; }
}

.container input:checked + label .burger:before {
	-webkit-animation: animationBurgerTop 1s ease forwards;
	animation: animationBurgerTop 1s ease forwards;
}

@-webkit-keyframes animationBurgerTop {
	0% { -webkit-transform: translateY(0px); opacity: 1; }
	50% { -webkit-transform: translateY(12px); opacity: 1; }
	51%, 100% { -webkit-transform: translateY(12px); opacity: 0; }
}
@keyframes animationBurgerTop {
	0% { transform: translateY(0px); opacity: 1; }
	50% { transform: translateY(12px); opacity: 1; }
	51%, 100% { transform: translateY(12px); opacity: 0; }
}

.container label .burger:after {
	content: '';
	position: absolute;
	bottom: 6px;
	width: 40px;
	height: 4px;
	border-radius: 2px;
	background: #fafafa;
	-webkit-animation: animationBurgerBottomReverse 1s ease forwards;
	animation: animationBurgerBottomReverse 1s ease forwards;
}

@-webkit-keyframes animationBurgerBottomReverse {
	0%, 50% { -webkit-transform: translateY(-12px); opacity: 0; }
	51% { -webkit-transform: translateY(-12px); opacity: 1; }
	100% { -webkit-transform: translateY(0px); opacity: 1; }
}
@keyframes animationBurgerBottomReverse {
	0%, 50% { transform: translateY(-12px); opacity: 0; }
	51% { transform: translateY(-12px); opacity: 1; }
	100% { transform: translateY(0px); opacity: 1; }
}

.container input:checked + label .burger:after {
	-webkit-animation: animationBurgerBottom 1s ease forwards;
	animation: animationBurgerBottom 1s ease forwards;
}

@-webkit-keyframes animationBurgerBottom {
	0% { -webkit-transform: translateY(0px); opacity: 1; }
	50% { -webkit-transform: translateY(-12px); opacity: 1; }
	51%, 100% { -webkit-transform: translateY(-12px); opacity: 0; }
}
@keyframes animationBurgerBottom {
	0% { transform: translateY(0px); opacity: 1; }
	50% { transform: translateY(-12px); opacity: 1; }
	51%, 100% { transform: translateY(-12px); opacity: 0; }
}