.loading {
  opacity: 0;
}

.hide {
  opacity: 0;
}

.show {
  opacity: 1;
}

.close-text,
.open-text {
  -webkit-transition: .6s;
  transition: .6s;
}

.nav-icon {
  width: 80px;
  height: 80px;
  background-color: #bdbdbd;
  position: fixed;
  top: 0;
  right: 0;
  z-index: 1000;
}

.nav-icon p {
  position: absolute;
  bottom: 5px;
  left: 50%;
  -webkit-transform: translate(-50%, 0);
          transform: translate(-50%, 0);
  color: #fff;
}

.nav-icon span {
  width: 30px;
  height: 1px;
  position: relative;
  left: 50%;
  -webkit-transform: translate(-50%, 0);
          transform: translate(-50%, 0);
  display: inline-block;
  -webkit-transition: all .5s;
  transition: all .5s;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.nav-icon span:nth-child(1) {
  position: absolute;
  top: 20%;
  background-color: #fff;
}

.nav-icon span:nth-child(2) {
  position: absolute;
  top: 35%;
  background-color: #fff;
}

.nav-icon span:nth-child(3) {
  position: absolute;
  top: 50%;
  background-color: #fff;
}

.nav-menu {
  background-color: #9b9b9be1;
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  right: 0;
  z-index: 999;
  -webkit-transition: all 1s;
  transition: all 1s;
}

.menu-close {
  display: none;
  -webkit-transition: all 1s;
  transition: all 1s;
}

#menuBtn.active span:nth-of-type(1) {
  -webkit-transform: translateY(20px) rotate(315deg);
  transform: translateY(20px) rotate(315deg);
  left: 30%;
  top: 10%;
}

#menuBtn.active span:nth-of-type(2) {
  opacity: 0;
}

#menuBtn.active span:nth-of-type(3) {
  -webkit-transform: translateY(-20px) rotate(-315deg);
  transform: translateY(-20px) rotate(-315deg);
  left: 30%;
  top: 60%;
}
/*# sourceMappingURL=animation.css.map */