/* FONDO */
.img-background {
  position: fixed;
  height: 100%;
  width: 100%;
  bottom: 0;
}
/* * * * * */

/* SECCION */
section {
  justify-content: center;
  align-items: center;
  padding-left: 2rem;
}
/* * * * * * */

/* LOGIN */
.button {
  padding: 1rem;
}

#login.hide {
  position: absolute;
  opacity: 0;
  transform: translateY(8px);
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 0.4s ease,
    transform 0.4s ease,
    visibility 0s linear 0.4s;
}

#p-password,
#button-login,
#button-recover {
  margin-top: 2rem;
}

#pass,
#pass2 {
  width: 100%;
}

.p-sub {
  margin-top: 1rem;
}

.p-pointer {
  cursor: pointer;
  color: #459398;
}
/* * * * * * */

/* RECOVER */
#recover {
  position: absolute;
  opacity: 0;
  transform: translateY(8px);
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 0.4s ease,
    transform 0.4s ease,
    visibility 0s linear 0.4s;
}

#recover.show {
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
  pointer-events: all;
  transition:
    opacity 0.4s ease,
    transform 0.4s ease,
    visibility 0s linear 0s;
}
/* * * * * * * * */

/* MOVIL */
@media (max-width: 1024px) and (orientation: portrait) {
  .img-background {
    width: auto;
  }

  .section-content-panel {
    width: 90%;
  }

  #recover {
    width: 80%;
  }
}
/* * * * * * */