* {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
}

body {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  touch-callout: none;
}

html, body {
  height: 100%;
}

.page {
  background-size: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  left: 0;
  top: 0;
}

.page.hide {
  opacity: 0;
  z-index: -100;
}

/*==================================*/
.page.inTop {
  -webkit-animation: ShowTop .5s ease-out both;
  animation: ShowTop .5s ease-out both;
}

.page.outTop {
  -webkit-animation: HideTop .5s ease-out both;
  animation: HideTop .5s ease-out both;
}

.page.inDown {
  -webkit-animation: ShowDown .5s ease-out both;
  animation: ShowDown .5s ease-out both;
}

.page.outDown {
  -webkit-animation: HideDown .5s ease-out both;
  animation: HideDown .5s ease-out both;
}

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

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

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

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

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

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

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

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