/*------- Go Deeper -------*/
@keyframes currentToLeft {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}
.anm-crt-to-lft {
  animation: currentToLeft 0.6s forwards;
}

@keyframes rightToCurrent {
  0%   { transform: translateX(100%); }
  100% { transform: translateX(0); }
}
.anm-rgt-to-crt {
  animation: rightToCurrent 0.6s forwards;
}

/*------- Go Back -------*/
@keyframes leftToCurrent {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(0); }
}
.anm-lft-to-crt {
  animation: leftToCurrent 0.6s forwards;
}

@keyframes currentToRight {
  0%   { transform: translateX(0); }
  100% { transform: translateX(100%); }
}
.anm-crt-to-rgt {
  animation: currentToRight 0.6s forwards;
}

/*------- Fade -------*/
@keyframes fade-in {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes fade-out {
  0%   { opacity: 1; }
  100% { opacity: 0; }
}

/*------- Show/Hide -------*/
@keyframes show {
  0%   { transform: translateY(0%); }
  100% { transform: translateY(-100%); }
}

.anm-shw {
  animation: show 0.6s forwards;
}

@keyframes hide {
  0%   { transform: translateY(-100%); }
  100% { transform: translateY(0); }
}

.anm-hd {
  animation: hide 0.6s forwards;
}