#fixed-menu {
  position: fixed;
  top: 0rem;
  left: 0rem;
  z-index: 1000;
  
  display: block;
}
#fixed-menu a {
  width: 4.5rem;
  height: 4.5rem;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 3.5rem 3.5rem;
  cursor: pointer;
  display: block;
}
#fixed-menu.close {
  top: calc(-4.5rem * 6);
}
#fixed-menu.open {
  top: 0;
}
.menu-key {
  width: 4.5rem;
  height: 2rem;
  cursor: pointer;
  display: block;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 3.5rem 3.5rem;
}

.menu{
  background-color: #eae3ae;
}

.menu-key.upward {
  background-image: url("/res/img/svg/upward.svg");
  
  background-color: #eae3ae;
}
.menu-key.downward {
  background-image: url("/res/img/svg/downward.svg");
}

.fm-owl {
  background-image: url("/res/img/svg/owl.svg");
}
.fm-cards {
  background-image: url("/res/img/svg/cards.svg");
}
.fm-battery-0 {
  background-image: url("/res/img/svg/battery-0.svg");
}
.fm-battery-1 {
  background-image: url("/res/img/svg/battery-1.svg");
}
.fm-battery-2 {
  background-image: url("/res/img/svg/battery-2.svg");
}
.fm-battery-3 {
  background-image: url("/res/img/svg/battery-3.svg");
}
.fm-battery-4 {
  background-image: url("/res/img/svg/battery-4.svg");
}
.fm-energy {
  background-image: url("/res/img/svg/energy.svg");
}
.fm-tron {
  background-image: url("/res/img/svg/tron.svg");
}
.fm-tether {
  background-image: url("/res/img/svg/tether.svg");
}
.fm-help {
  background-image: url("/res/img/svg/help.svg");
}
.fm-treasury {
  background-image: url("/res/img/svg/treasury.svg");
}
.fm-string-of-secret {
  background-image: url("/res/img/svg/string-of-secret.svg");
}
.fm-eye-of-ra {
  background-image: url("/res/img/svg/eye-of-ra.svg");
}
.fm-public-key {
  background-image: url("/res/img/svg/public-key.svg");
}
.fm-artx {
  background-image: url("/res/img/svg/artx.svg");
}
.menu:hover{
  background-color: #eae3ae77 !important;
}
.menu-close {
  animation: mclose ease-in-out 0.5s;
  -moz-animation: mclose ease-in-out 0.5s;
  -webkit-animation: mclose ease-in-out 0.5s;
}
@keyframes mclose {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, -2rem);
  }
  75% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, calc(-100% + 2rem));
  }
}
.menu-open {
  animation: mopen ease-in-out 0.5s;
  -moz-animation: mopen ease-in-out 0.5s;
  -webkit-animation: mopen ease-in-out 0.5s;
}
@keyframes mopen {
  0% {
    transform: translate(0, calc(-100% + 2rem));
  }
  50% {
    transform: translate(0, 0);
  }
  75% {
    transform: translate(0, -1rem);
  }
  100% {
    transform: translate(0, 0);
  }
}