#menu {
     z-index: 2;
}
 #menu-bar {
     width: 40px;
     height: 40px;
     margin: 30px 0 0px 20px;
     cursor: pointer;
}
 .bar {
     height: 5px;
     width: 100%;
     background-color: #DC052D;
     display: block;
     border-radius: 5px;
     transition: 0.3s ease;
}
 #bar1 {
     transform: translateY(-4px);
}
 #bar3 {
     transform: translateY(4px);
}
 .nav {
     transition: 0.3s ease;
     display: none;
}
 .nav ul {
     padding: 0 22px;
}
 .nav li {
     list-style: none;
     padding: 6px 0;
}
 .nav li a {
}
 .nav li a:hover {
}
 .menu-bg, #menu {
     top: 0;
     left: 0;
     position: absolute;
}
 .menu-bg {
     z-index: 1;
     width: 0;
     height: 0;
     margin: 0px 0px 20px;
     background: radial-gradient(circle, #DC052D, #DC052D);
     border-radius: 30%;
}
 .change {
     display: block;
}
 .change .bar {
     background-color: white;
}
 .change #bar1 {
     transform: translateY(4px) rotateZ(-45deg);
}
 .change #bar2 {
     opacity: 0;
}
 .change #bar3 {
     transform: translateY(-6px) rotateZ(45deg);
}
 .change-bg {
     width: 205px;
     height: 390px;
     transform: translate(-60%,-25%);
}