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; }

}