.container ul {
  list-style: none;
  border-bottom: #e0e0e0 solid 2px;
  margin: 0px 50px;
  padding: 0px;
}
.container ul li {
  padding: 10px;
  margin: 0.5em 0px;
  font-family: "montserrat";
  font-size: 20px;
  font-weight: 200;
  line-height: 24px;
  cursor: pointer;
}
.container ul li:hover {
  color: gray;
}

.toggle-menu {
  width: 50px;
  height: 50px;
  display: block;
  position: absolute;
  z-index: 100;
}

.toggle-menu i {
  position: absolute;
  z-index: 100;
  display: block;
  height: 2px;
  background: #32363e;
  width: 30px;
  left: 0px;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}

.toggle-menu i:nth-child(1) {
  top: 16px;
}

.toggle-menu i:nth-child(2) {
  top: 24px;
}

.toggle-menu i:nth-child(3) {
  top: 32px;
}

.toggle-menu.active i:nth-child(1) {
  top: 24px;
  -webkit-transform: rotateZ(45deg);
  transform: rotateZ(45deg);
}

.toggle-menu.active i:nth-child(2) {
  background: transparent;
}

.toggle-menu.active i:nth-child(3) {
  top: 25px;
  -webkit-transform: rotateZ(-45deg);
  transform: rotateZ(-45deg);
}

.close {
  right: 0px;
  transition: right linear 0.2s;
}

/* menu tag area */
menu {
  background: #fff;
  bottom: 0;
  margin: 0;
  padding: 0;
  position: fixed;
  right: -100%;
  top: 0;
  width: 30%;
  min-width: 300px;
  z-index: 70;
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}

menu .container {
  height: 100%;
  margin: 70px auto 0;
  overflow: hidden;
  position: relative;
  -webkit-transform-origin: 0% 50% 0px;
  -moz-transform-origin: 0% 50% 0px;
  transform-origin: 0% 50% 0px;
  -webkit-transform: matrix(0.8, 0, 0, 0.9, 40, 0);
  -moz-transform: matrix(0.8, 0, 0, 0.9, 40, 0);
  transform: matrix(0.8, 0, 0, 0.9, 40, 0);
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}
html.active menu .container {
  -webkit-transform-origin: 0% 50% 0px;
  -moz-transform-origin: 0% 50% 0px;
  transform-origin: 0% 50% 0px;
  -webkit-transform: matrix(1, 0, 0, 1, 0, 0);
  -moz-transform: matrix(1, 0, 0, 1, 0, 0);
  transform: matrix(1, 0, 0, 1, 0, 0);
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}
html.active menu {
  right: 0;
  z-index: 99;
}
/* Overlay Area */
#overlay {
  background: #32363e;
  bottom: 0;
  height: 100%;
  left: 0;
  opacity: 0;
  overflow: hidden;
  position: fixed;
  right: 0;
  top: 0;
  visibility: hidden;
  width: 100%;
  z-index: 55;
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}
html.active #overlay {
  opacity: 0.5;
  visibility: visible;
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}