@import url("../../fonts/Roboto/roboto.css");
/*@import url(https://fonts.googleapis.com/css?family=Roboto:300);*/

.login-page {
  /*width: 360px;*/
  padding: 8% 0% 23% 0%;
  margin: auto;
  
}
/* contenedor para la imagen del logo de la empresa, en este tambien se establecen los parametros para el animation y los diferentes paquetes de navegadores */
.logo-contain img{
  /* width: 45px; */
  height:3rem;
  /* animation-name: animaLogo;
  -moz-animation-name: animaLogo;
  -o-animation-name: animaLogo;
  -webkit-animation-name: animaLogo;
  animation-duration: 0.6s;
  -moz-animation-duration: 0.6s;
  -o-animation-duration: 0.6s;
  -webkit-animation-duration: 0.6s;
  animation-timing-function: ease-in-out;
  -moz-animation-timing-function: ease-in-out;
  -o-animation-timing-function: ease-in-out;
  -webkit-animation-timing-function: ease-in-out;
  animation-delay: 0.1s;
  -moz-animation-delay: 0.1s;
  -o-animation-delay: 0.1s;
  -webkit-animation-delay: 0.1s;
  animation-iteration-count: 1;
  -moz-animation-iteration-count: 1;
  -o-animation-iteration-count: 1;
  -webkit-animation-iteration-count: 1;
  animation-fill-mode: forwards;
  -o-animation-fill-mode: forwards;
  -webkit-animation-fill-mode: forwards; */
}
/*los diferentes kayframes para los navegadores antiguos y modernos */
/* @keyframes animaLogo {
  0%{width: 45px;height:30px;}
  25%{width: 70px;height:40px;}
  50%{width: 90px;height:50px;}
  75%{width: 120px;height:60px;}
  100%{width: 260px;height:60px;}
  
}
@-moz-keyframes animaLogo {
  0%{width: 45px;height:30px;}
  25%{width: 70px;height:40px;}
  50%{width: 90px;height:50px;}
  75%{width: 120px;height:60px;}
  100%{width: 260px;height:60px;}
  
}
@-o-keyframes animaLogo {
  0%{width: 45px;height:30px;}
  25%{width: 70px;height:40px;}
  50%{width: 90px;height:50px;}
  75%{width: 120px;height:60px;}
  100%{width: 260px;height:60px;}
  
}
@-webkit-keyframes animaLogo {
  0%{width: 45px;height:30px;}
  25%{width: 70px;height:40px;}
  50%{width: 90px;height:50px;}
  75%{width: 120px;height:60px;}
  100%{width: 260px;height:60px;}
  
} */

.form {
  position: relative;
  z-index: 1;
  background: rgb(119,67,68);
background: -moz-linear-gradient(0deg, rgba(119,67,68,1) 0%, rgba(142,79,80,1) 30%, rgba(149,81,81,1) 46%, rgba(155,85,86,1) 71%, rgba(192,102,103,1) 100%);
background: -webkit-linear-gradient(0deg, rgba(119,67,68,1) 0%, rgba(142,79,80,1) 30%, rgba(149,81,81,1) 46%, rgba(155,85,86,1) 71%, rgba(192,102,103,1) 100%);
background: linear-gradient(0deg, rgba(119,67,68,1) 0%, rgba(142,79,80,1) 30%, rgba(149,81,81,1) 46%, rgba(155,85,86,1) 71%, rgba(192,102,103,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#774344",endColorstr="#c06667",GradientType=1); 
  backdrop-filter: blur(20px) ;
  max-width: 360px;
  margin:  auto ;
  padding: 55px;
  text-align: center;
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
  /* overflow: hidden; */
  /* border:1px solid rgba(255,255,255,0.5); */
  border-radius: 5px;
}
.form input {
  /* font-family: "Roboto", sans-serif; */
  outline: 0;
  background: #cac5c5;
  width: 100%;
  border: 0;
  margin: 0 0 15px;
  padding: 15px;
  box-sizing: border-box;
  font-size: 14px;
}
.lineaGuia1{
  border: 1px solid black;
}
.form .btn-login {
  /* font-family: "Roboto", sans-serif; */
  text-transform: uppercase;
  outline: 0;
  /* background: rgb(200,200,200  ); */
  background-color: #505356;
  width: 100%;
  border: 0;
  border-radius: 5px;
  padding: 15px;
  color:white;
  font-size: 14px;
  -webkit-transition: all 0.3 ease;
  transition: all 0.3 ease;
  cursor: pointer;
}
.form .btn-login:hover,.form .btn-login:active,.form .btn-login:focus {
  /* background: #fc5454; */
  background-color: rgba(0, 0, 0, 0.8);
  box-shadow: 0 5px 10px 2px rgba(0, 0, 0, 0.5);
  border-radius: 5px;
  color:rgba(255, 255, 255, 0.8);
  

}

.btn-login2 {
  /* font-family: "Roboto", sans-serif; */
  /* text-transform: uppercase; */
  outline: 0;
  border: 0;
  border-radius: 5px;
  background-color: transparent;
  /* background: #857071; */
  padding: 5px;
  color:white;
  font-size: 14px;
  -webkit-transition: all 0.3 ease;
  transition: all 0.3 ease;
  cursor: pointer;
  color: #ffff;
  width: 100%;
  text-decoration: underline;
}

.btn-login2:hover,.form .btn-login2:active,.form .btn-login2:focus {
  /* background: #70230a; */
  background-color:transparent;
  box-shadow: 0 5px 10px 2px rgba(0, 0, 0, 0.5);
  color:rgba(255, 255, 255, 0.8);
  
  
}

.form .message {
  margin: 15px 0 0;
  color: #b3b3b3;
  font-size: 12px;
}
.form .message a {
  color: #f49651;
  text-decoration: none;
}
.form .register-form {
  display: none;
}
.container {
  position: relative;
  z-index: 1;
  max-width: 300px;
  margin: 0 auto;
}
.container:before, .container:after {
  content: "";
  display: block;
  clear: both;
  
}
.container .info {
  margin: 50px auto;
  text-align: center;
}
.container .info h1 {
  margin: 0 0 15px;
  padding: 0;
  font-size: 36px;
  font-weight: 300;
  color: #1a1a1a;
  
}
.container .info span {
  color: #4d4d4d;
  font-size: 12px;
}
.container .info span a {
  color: #000000;
  text-decoration: none;
}
.container .info span .fa {
  color: #EF3B3A;
}
body {
/* background: linear-gradient(#9b5556,#c06667);  */
background: rgb(119,67,68);
background: -moz-linear-gradient(180deg, rgba(119,67,68,1) 0%, rgba(142,79,80,1) 30%, rgba(149,81,81,1) 46%, rgba(155,85,86,1) 71%, rgba(192,102,103,1) 100%);
background: -webkit-linear-gradient(180deg, rgba(119,67,68,1) 0%, rgba(142,79,80,1) 30%, rgba(149,81,81,1) 46%, rgba(155,85,86,1) 71%, rgba(192,102,103,1) 100%);
background: linear-gradient(180deg, rgba(119,67,68,1) 0%, rgba(142,79,80,1) 30%, rgba(149,81,81,1) 46%, rgba(155,85,86,1) 71%, rgba(192,102,103,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#774344",endColorstr="#c06667",GradientType=1); 
/* font-family: "Roboto", sans-serif; */
font-family: Arial, Helvetica, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;    
background-repeat: no-repeat;  
/* background-size: contain; */
height:auto;

  
}