#side-menu-icon{
	float: right;
    padding-top: 20px;
	top: 0px;
	right:30px;
	height: 40px;
	width: 40px;
	z-index: 120;position: absolute;
}
#menu {
  cursor: pointer;
  padding: 22px 35px 16px 0px;
}

#menu span, #menu span:before, #menu span:after {
  cursor: pointer;
  height: 2px;
  width: 35px;
  background: #fff;
  position: absolute;
  display: block;
  content: '';
  -webkit-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}

#menu span:before {
  -webkit-animation: undo-top .5s forwards;
          animation: undo-top .5s forwards;
}

#menu span:after {
  bottom: -10px;
  -webkit-animation: undo-bottom .5s;
          animation: undo-bottom .5s;
}

#menu.active span {
  background-color: transparent;
}
 #menu.active span:before, #menu.active span:after {background:#131032;}


#menu.active span:before {
  top: 0;
}

#menu.active span:before {
  -webkit-transform: translateY(0px);
          transform: translateY(0px);
  -webkit-animation: top-x .5s forwards;
          animation: top-x .5s forwards;
}

#menu.active span:after {
  -webkit-transform: translateY(0px);
          transform: translateY(0px);
  -webkit-animation: bottom-x .5s forwards;
          animation: bottom-x .5s forwards;
}

@-webkit-keyframes top-x {
  0% { -webkit-transform: translateY(-10px) rotate(0); transform: translateY(-10px) rotate(0); }
  50% { -webkit-transform: translateY(0px) rotate(0); transform: translateY(0px) rotate(0); }
  100% { -webkit-transform: translateY(0px) rotate(45deg); transform: translateY(0px) rotate(45deg); }
}

@keyframes top-x {
  0% { -webkit-transform: translateY(-10px) rotate(0); transform: translateY(-10px) rotate(0); }
  50% { -webkit-transform: translateY(0px) rotate(0); transform: translateY(0px) rotate(0); }
  100% { -webkit-transform: translateY(0px) rotate(45deg); transform: translateY(0px) rotate(45deg); }
}

@-webkit-keyframes bottom-x {
  0% { transfrom: translateY(0) rotate(0); }
  50% { -webkit-transform: translateY(-10px) rotate(0); transform: translateY(-10px) rotate(0); }
  100% { -webkit-transform: translateY(-10px) rotate(-45deg); transform: translateY(-10px) rotate(-45deg); }
}

@keyframes bottom-x {
  0% { transfrom: translateY(0) rotate(0); }
  50% { -webkit-transform: translateY(-10px) rotate(0); transform: translateY(-10px) rotate(0); }
  100% { -webkit-transform: translateY(-10px) rotate(-45deg); transform: translateY(-10px) rotate(-45deg); }
}

@-webkit-keyframes undo-top {
  0% { -webkit-transform: translateY(0px) rotate(45deg); transform: translateY(0px) rotate(45deg); }
  50% { -webkit-transform: translateY(0px) rotate(0); transform: translateY(0px) rotate(0); }
  100% { -webkit-transform: translateY(-10px) rotate(0); transform: translateY(-10px) rotate(0); }
}

@keyframes undo-top {
  0% { -webkit-transform: translateY(0px) rotate(45deg); transform: translateY(0px) rotate(45deg); }
  50% { -webkit-transform: translateY(0px) rotate(0); transform: translateY(0px) rotate(0); }
  100% { -webkit-transform: translateY(-10px) rotate(0); transform: translateY(-10px) rotate(0); }
}

@-webkit-keyframes undo-bottom {

  0% { -webkit-transform: translateY(-10px) rotate(-45deg); transform: translateY(-10px) rotate(-45deg); }
  50% { -webkit-transform: translateY(-10px) rotate(0); transform: translateY(-10px) rotate(0); }
  100% { transfrom: translateY(0px) rotate(0); }
}

@keyframes undo-bottom {

  0% { -webkit-transform: translateY(-10px) rotate(-45deg); transform: translateY(-10px) rotate(-45deg); }
  50% { -webkit-transform: translateY(-10px) rotate(0); transform: translateY(-10px) rotate(0); }
  100% { transfrom: translateY(0px) rotate(0); }
}

#side-menu{
	display: block;
	position: fixed;
	top: 0px;
	right: 0px;
	bottom: 0px;
	width: 250px;
	    max-width: 300px;
	background-color: #fff;
	z-index: 110;
	box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.3);
	transform: translate(610px,0px);
	transition: 0.3s ease-in-out;
}
#side-menu.active{	transform: translate(0px,0px);	transition: 0.3s ease-in-out;}
#side-menu ul{margin-top:100px;    list-style: none;    padding: 0px;}
#side-menu li a {    color: #131032;    text-decoration: none;    padding: 10px 20px 20px 20px;    display: block;    text-transform: uppercase;  
    letter-spacing: 0.5px;    font-size: 14px;font-weight:400;transition: 0.5s;}
#side-menu li a:hover {    }
#side-menu li a:hover {color: #f9d035; }
#side-menu p {
        padding: 40px 20px 0px 20px;
    text-align: center;
    font-size: 14px;
}
#overlay{
	position: fixed;
	top: 0px;
	left: 0px;
	bottom: 0px;
	right: 0px;
	background-color: rgba(0, 0, 0, 0.2);
	z-index: 105;
	display: none;
	transition: 0.3 ease-in-out;
}
#overlay.active{
	display: block;
	transition: 0.3 ease-in-out;
}