@import url('fonts.css');
@-ms-viewport{ width: device-width; } 
@-o-viewport { width: device-width; } 
@viewport { width: device-width; }

body {
  font-family: 'VAGRoundedStd-Light';
  color:#fff;
}
.container-fluid {
  padding-right: 0px; 
  padding-left:  0px; 
}
.posicionab{
  position: absolute;
}
 .cabecera {  
  height: 14em; 
  width: 100%; 
  background: #fff;  
  border-radius: 0px 0px  95% 95%; 
  -moz-border-radius: 0px 0px 95% 95%; 
  -webkit-border-radius: 0px 0px 95% 95%; 
 } 
.css_logo_cabecera{
  margin-top: 1%;
}
.contenedor_logo{
  max-width: 450px;
  width: 100%;
  margin-top: 4%;
  margin-bottom: 2%;
}
.contenedor_logo_paginas {
  max-width: 450px;
  width: 100%;
  margin-top: 0.6%;
}
.logo_bisa{
  margin-left: 41%;
}
.img_logo{
  max-width: 448px;
}
.logo_en_linea{
  position: absolute;
  bottom:76%;
  width: 100%;
}
.contenedor_logo_p, .centrear_elementos{
  display: flex;
  justify-content: center;
  align-items: center;
}
.titulo_login{
  text-align: center;
  width: 100%;
  font-size: 18px;
  color: #bb0447; 
  margin-top: 1%;
  z-index: 1;
  position: relative;
}
.texto{
  font-family: 'VAGRoundedStd-Thin';
  color: #bc0249;
  font-size: 45px;
  text-align: center;
}
.contenedor_login{
  bottom: 0%;
  left: 32%;
  width: 68%;
}
.linea{
  width: 32%;
  height: 1px;
  background: #fff;
  margin-bottom: 6px;
}
.fondo_login{
  background: url('../img/fondo_loguin.png') top left no-repeat;
  width: 437px;
  height: 111px;
  margin-left: 0px;
  padding-top: 3%;
  margin-top: 3%;
}
.formulario, .formulario_clave{
  margin-top: 2%;
  padding-left: 3%;
  width: 68%;
}
.formulario_2{
  width: 68%;
  margin-left: 2%;
}
.datos_fom {
  background: transparent;
  border: 0px;
  width: 91%;
  display: block;
  font-size: 18px;
  color:#fff;
  padding-left: 2%;
}

.datos_fom::placeholder {
  color: white;
  opacity: 0.6;
}

.linea_azul{
  width: 89%;
  height: 2px;
  background: #c14a73;
}
#btn_ingresar{
  margin-top: 4%;
  cursor: pointer;
}
.fondo{
  background-image: linear-gradient( #ffd701 45%,#f73636, #940036);
  width: 100%;
  min-height: 510px;
}
.contenedor_principal{
  bottom: 0%;
  position: absolute;
  width: 100%;
}
/*ventana emergente*/
.popup {
  position: fixed;
  top: 35%;
  left: 38%;  
  background: #dee2e6;
  border-radius: 8px;
  display: none;
  width: 335px;
  min-height: 163px;
  z-index: 1000;
}
.content-popup {
  padding:20px;
}

.popup-overlay {
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background-color: black;
  opacity: 0.7;
  filter: alpha(opacity=70);   
  color: white;
  display: none;
  z-index: 2;
}
#btn_cerrar {
  background: url('../img/btn_cerrar.png') top left no-repeat;
  position: absolute;
  right: 18px;
  top: 13px;
  width: 22px;
  height: 21px;
  cursor: pointer;
}
#texto_mensaje{
  margin-top: 10%;
  text-align: center;
  width: 98%;
  color: #000;
}
/***fin pop-up****/
.left{
  float: left;
}
.clearfix{
  clear: both;
  line-height: 0px;
}
.img_usr{
  display: block;
  margin-right: 1%;
}
.img_usr_restaurar{
  margin-top: 1%;
}
.font_borrar_img{
  color:#000;
}
.font_borrar_img:hover{
  color:#495057;
}

.fondo_block{
  display: block;
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background-color: black;
  opacity: 0.7;
  filter: alpha(opacity=70);   
  color: white;
  z-index: 10;
}
.img_cargando{
  position: absolute;
  top:20%;
  left: 45%;
  width: 10%
}

#link_clave, #link_volver{
  color: yellow;
  cursor: pointer;
}

#div_recuperar_clave, #div_volver_form{
  display: none; 
  margin-left: 10%;
}

#form_recuperar{
  display: none;
  width: 100%;
  padding-top: 3%;
}

#btn_recuperar, #btn_restaurar{
  background-color: #fff;
  color: #c30349;
  border-radius: 5px;
  padding: 5px;
  cursor: pointer;
  width: 81px;
  text-align: center;
  margin-top: 8%;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.usuario_nombre{
  display: none;
  color: #c30349;
}
.css_perdida_total{
  margin-top: 1%;
  margin-left: 1%;
}
.font_icono{
  color: #bb0447 !important;
  margin-left: 3px;
  font-size: 14px;
}
.contenedor_datos{
  width: 25%;
}

/***Responsivo****/
@media screen and (max-width:1200px){
  .contenedor_datos{
    width: 35%;
  }
}
@media screen and (max-width:960px){
  .contenedor_login {
    left: 19%;
    width: 71%;
  }
  .fondo {
    top: 32%;
  }
  .titulo_login {
    margin-top: 2%;
  }
}
@media screen and (max-width:768px){
  .contenedor_login {
    bottom: 4%;
    left: 19%;
    width: 75%;
  }
  .contenedor_datos{
    width: 45%;
  }
}
@media screen and (max-width:697px){
  .img_usr{
    display: none;
  }
  #div_recuperar_clave{
    margin-left: 1%;
  }
  #div_volver_form {
    margin-left: 6%;
  }
  #btn_recuperar, #btn_restaurar {
    width: 82%;
    margin-top: 3%;
    margin-bottom: 2%;
  }
  #form_recuperar {
    width: 94%;
    margin-left: 6%;
    color: #c30349;
  }
  .formulario_clave {
    width: 93%;
    padding-left: 0%;
  }
  .linea {
    width: 52%;
  }
  .img_usr_restaurar{
    display: none;
  }
  .contenedor_datos {
    width: 60%;
  }
}
@media screen and (max-width:645px){
  .contenedor_logo {
    width: 80%;
  }
  .fondo {
    top: 32%;
  }
  .popup {
    left: 23%;
  }
}
@media screen and (max-width:570px){
 .contenedor_login {
    left: 17%;
  }
  .fondo_login {
    width: 408px;
  }
}
@media screen and (max-width:540px){
 .contenedor_login {
    left: 14%;
  }
  .popup {
    left: 17%;
  }
  .fondo_login {
    min-width: 334px;
    width: 374px;
  }
  .img_logo {
    width: 75%;
  }
  .texto {
    margin-top: 17%;
  }
  .formulario {
    margin-top: 3%;
  }
  .formulario_2 {
    width: 98%;
    margin-left: 2%;
  }
  #div_volver_form {
    margin-left: 8%;
  }
  .contenedor_datos {
    width: 70%;
  }
}
@media screen and (max-width:414px){
 .contenedor_login {
    left: 10%;
  }
  .texto {
    font-size: 30px;
  }
  .fondo_login {
    width: 268px;
  }
  .datos_fom {
    margin-top: 1%;
    width: 87%;
  }
  .contenedor_logo {
      width: 93%;
  }
  .linea_azul {
    width: 89%;
  }
  .popup {
    left: 8%;
  }
  .fondo_login{
    background: url('../img/fondo_loguin_movil.png') top left no-repeat;
    width: 304px;
    height: 111px;
    margin-left: 0px;
    padding-top: 3%;
  }
  .titulo_login {
    display: none;
  }
  .usuario_nombre{
    display: block;
  }
  .linea {
    width: 90%;
  }
}
@media screen and (max-width:375px){
  .contenedor_login {
    left: 3%;
    bottom: 5%;
  }
  .popup {
    left: 5%;
  }
  .fondo_login {
    width: 90%;
  }
  .contenedor_logo {
    margin-left: 6%;
    margin-top: 10%;
  }
  #btn_ingresar {
    margin-left: 5%;
    margin-top: 7%;
  }
  .formulario {
    width: 71%;
  }
  #div_recuperar_clave{
    margin-left: 10%;
    font-size: 14px;
  }
  #div_volver_form {
    font-size: 14px;
  }
  .fondo {
    top: 25%;
    min-height: 530px;
  }
}
@media screen and (max-width:360px){
  .popup {
    left: 0.5%;
    width: 317px;
  }
  .fondo_login {
    margin-left: 5%;
  }
  .linea {
    width: 86%;
  }
}
@media screen and (max-width:320px){
  .contenedor_login {
    left: 2%;
    bottom: 4%;
  }
  .fondo_login {
    min-width: 300px;
    margin-left: 9px;
  }
  .texto {
    margin-top: 12%;
  }
}