.container .menu {
  cursor: pointer;
}
#close{ font-size:3vh; display:inline-block; color:#FFFFFF; margin-top:3vh; margin-right:7vh;}
.over-lay {
  position: fixed;
  right: 0; left:0px;
  top: -100%; z-index:999999999999999999;
  width: calc(100%);
  height: calc(100%);
  transform-origin: top; background-color:#b20219; background-image:url(../images/menubg.jpg);background-size: cover;
  transition: all .6s ease-in-out;
}
.over-lay .cross {
  float: right;
  cursor: pointer;
}


.show {
  transition: all .2s  ease-in-out;
  display: block;
  opacity: 1;
  visibility: visible;
  top: 0;
}
.show li:nth-of-type(1) {
  animation: show-list .5s forwards .5s ease-out;
}
.show li:nth-of-type(2) {
  animation: show-list .5s forwards .5s ease-out;
}
.show li:nth-of-type(3) {
  animation: show-list .5s forwards .5s ease-out;
}
.show li:nth-of-type(4) {
  animation: show-list .5s forwards .5s ease-out;
}
.show li:nth-of-type(5) {
  animation: show-list .5s forwards .5s ease-out;
}
.show li:nth-of-type(6) {
  animation: show-list .5s forwards .5s ease-out;
}
.show li:nth-of-type(7) {
  animation: show-list .5s forwards .5s ease-out;
}
.show li:nth-of-type(8) {
  animation: show-list .5s forwards .5s ease-out;
}
.show dd:nth-of-type(1) {
  animation: show-list .6s forwards .6s ease-out;
}

@keyframes show-list {
  0% {
    opacity: 0;
    transform: translateY(200px);
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}