/* default */
body,
html {
   background-color: #FFFFFF;
   margin: 0;
   padding: 0;
   position: relative;
   width: 100%;
   height: 100%;
}

/* title login */
.title-login {
   font-size: 26px;
}

/* estilo div login */
.div-form-login {
   background-color: rgb(248, 248, 246);
   border-radius: 10px;
   letter-spacing: 0;
   left: 50%;
   line-height: 1.3;

}

/* responsive */
/* pantallas moviles */
@media (orientation: portrait) {
   /* default */
   body,
   html {
      height: 100%;
   }

   /* h1 */
   .title-login {
      font-size: 26px;
   }

   .div-form-login {
      width: auto;
   }
}

/* pntalla xs */
@media screen and (min-width: 0px) and (max-width: 576px) and (orientation: portrait) {
   /* h1 */
   .title-login {
      font-size: 20px;
   }
}

/* responsive pantallas de notebook */
@media (orientation: landscape) {
   /* estilo div login */
   .div-form-login {
      left: 50%;
      position: static;
      transform: translate(-0%, -0%);
   }

   footer {
      position: static;
   }
}

/* pntalla xs */
@media screen and (min-width: 0px) and (max-width: 576px) and (orientation: landscape) {
   .title-login {
      font-size: 20px;
   }
   /* estilo div login */
   .div-form-login {
      width: 100%;
      height: auto;
   }
}

/* pntalla sm */
@media screen and (min-width: 577px) and (max-width: 768px) and (orientation: landscape) {
   /* estilo div login */
   .div-form-login {
      width: 90%;
   }
}

/* pntalla md */
@media screen and (min-width: 769px) and (max-width: 992px) and (orientation: landscape) {
   /* estilo div login */
   .div-form-login {
      width: 90%;
   }
}

/* pntalla lg */
@media screen and (min-width: 993px) and (max-width: 1200px) and (orientation: landscape) {
   /* estilo div login */
   .div-form-login {
      width: 50%;
   }
}

/* pntalla xl */
@media screen and (min-width: 1201px) and (max-width: 1400px) and (orientation: landscape) {
   /* estilo div login */
   .div-form-login {
      width: 60%;
   }
}

/* pntalla xll */
@media screen and (min-width: 1401px) and (orientation: landscape) {
   /* estilo div login */
   .div-form-login {
      width: 70%;
   }
}