@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:30px;
  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: 180px;height:95px;}
  
}
@-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: 180px;height:95px;}
  
}
@-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: 180px;height:95px;}
  
}
@-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: 180px;height:95px;}
  
}

.form {
  position: relative;
  z-index: 1;
  background-color:  rgba(255,255,255,0.2);
  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;
}
.form .btn-login {
  font-family: "Roboto", sans-serif;
  text-transform: uppercase;
  outline: 0;
  /* background: rgb(200,200,200  ); */
  background-color: rgba(0, 0, 0, 0.4);
  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: rgba(0, 0, 0, 0.4);
  /* background: #857071; */
  padding: 5px;
  color:white;
  font-size: 14px;
  -webkit-transition: all 0.3 ease;
  transition: all 0.3 ease;
  cursor: pointer;
}

.btn-login2:hover,.form .btn-login2:active,.form .btn-login2:focus {
  /* background: #70230a; */
  background-color: rgba(0, 0, 0, 0.8);
  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: rgb(27,49,68); /*fallback for old browsers  */
 background: -moz-linear-gradient(190deg, rgba(27,49,68,1) 0%, rgba(31,160,167,1) 23%, rgba(9,23,91,1) 75%);
 background: -webkit-linear-gradient(190deg, rgba(27,49,68,1) 0%, rgba(31,160,167,1) 23%, rgba(9,23,91,1) 75%);
 background: linear-gradient(190deg, rgba(27,49,68,1) 0%, rgba(31,160,167,1) 23%, rgba(9,23,91,1) 75%);
 background: -o-linear-gradient(190deg, rgba(27,49,68,1) 0%, rgba(31,160,167,1) 23%, rgba(9,23,91,1) 75%);
 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#1b3144",endColorstr="#09175b",GradientType=1);
  font-family: "Roboto", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;    
  background-repeat: no-repeat;  
  /* background-size: contain; */
  height:auto;

  
}