@font-face {
  font-family: Hindbold-bold;
  src: url("font/Hind-Bold.ttf");
}
@font-face {
  font-family: Hindbold-Light;
  src: url("font/Hind-Light.ttf");
}
@font-face {
  font-family: Hindbold-Medium;
  src: url("font/Hind-Medium.ttf");
}

.imagenprev {
  position: absolute;
  width: 130px;
  height: 110px;
  left: 0;
  right: 0;
  margin: auto;
  top: 80px;
}

.loader {
  display: none;
  position: absolute;
  left: 0;
  background-color: #0042d0;
  width: 100%;
  height: 100%;
  z-index: 2;
  top: 0;
  height: 100%;
  opacity: 0.7;
}

.loading {
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  top: 0;
  bottom: 0;
}

.loading2 {
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  top: 70%;
}

.head {
  position: fixed;
  left: 0;
  top: 0;
  height: 72px;
  background-color: white;
  width: 100%;
}

.head2 {
  position: fixed;
  left: 0;
  top: 72px;
  height: 42px;
  width: 100%;
  background-color: #0033a0;
}

.logo {
  position: absolute;
  left: 15px;
  top: 13px;
  width: 150px;
}

.headimg1 {
  position: absolute;
  right: 119px;
  top: 12px;
}

.headimg2 {
  position: absolute;
  right: 28px;
  top: 12px;
}

.linkhead1 {
  position: absolute;
  right: 108px;
  top: 43px;
  font-family: Hindbold-Medium;
  text-decoration: none;
  font-size: 12px;
  color: #0033a0;
}

.linkhead2 {
  position: absolute;
  right: 16px;
  top: 43px;
  font-family: Hindbold-Medium;
  text-decoration: none;
  font-size: 12px;
  color: #0033a0;
}

.costilla {
  position: absolute;
  left: 0;
  top: 0;
  width: 19%;
  height: 100%;
  background-color: white;
  z-index: -1;
}

.seguridadtxt {
  position: absolute;
  left: 0;
  width: 100%;
  top: 185px;
  text-align: center;
  font-family: Hindbold-Medium;
  font-size: 25px;
  color: #0033a0;
}

.imgcostilla1 {
  position: absolute;
  width: 20px;
  top: 232px;
  left: 15px;
}

.imgcostilla2 {
  position: absolute;
  width: 20px;
  top: 272px;
  left: 15px;
}

.textcostilla1 {
  position: absolute;
  left: 42px;
  top: 235px;
  font-family: Hindbold-light;
  color: #0033a0;
}

.textcostilla2 {
  position: absolute;
  left: 42px;
  top: 275px;
  font-family: Hindbold-light;
  color: #0033a0;
}

.containerimg {
  position: absolute;
  width: 81%;
  right: 0;
  height: 100%;
  top: 0px;
  background-image: url("background.jpg");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-size: cover;

  z-index: -2;
}

.formcontainer {
  position: absolute;
  left: 0;
  right: 114px;
  width: 100%;
  height: 100%;
  background-color: #00456c;
  opacity: 0.4;
  z-index: 2;
}

.divform1 {
  position: absolute;
  width: 32.5%;
  height: 370px;
  background-color: #dfdfdf;
  left: 15%;
  z-index: 5;
  top: 170px;
  opacity: 0.9;
  border-radius: 5px;
}

.divform2 {
  position: absolute;
  width: 32.5%;
  height: 370px;
  background-color: #dfdfdf;
  right: 12%;
  z-index: 3;
  top: 170px;
  opacity: 0.9;

  border-radius: 5px;
}

.user {
  position: relative;
  width: 100%;
  border-style: none;
  border-bottom-style: solid;
  background-color: transparent;
  height: 35px;
  font-family: Hindbold-light;
  font-size: 16px;
  width: 90%;
  border-bottom-width: 1px;
  color: #0033a0;
}

.user:focus {
  outline: none;
  border-bottom-width: 2px;
  border-bottom-color: #0033a0;
}

.pass {
  position: relative;
  width: 100%;
  border-style: none;
  border-bottom-style: solid;
  background-color: transparent;
  height: 35px;
  font-family: Hindbold-light;
  font-size: 16px;
  width: 90%;
  border-bottom-width: 1px;
  color: #0033a0;
}

.pass:focus {
  outline: none;
  border-bottom-width: 2px;
  border-bottom-color: #0033a0;
}

/*!animacion del label user*/

.floating-label {
  position: absolute;
  margin-bottom: 0px;
  height: 50px;
  top: 80px;
  left: 60px;
  width: 82%;
}

label {
  color: black;
  font-size: 16px;
  font-weight: normal;
  position: absolute;
  pointer-events: none;
  left: 0px;
  top: 0px;
  transition: 0.2s ease all;
  -moz-transition: 0.2s ease all;
  -webkit-transition: 0.2s ease all;
  font-family: Hindbold-light;
  padding-left: 0px;

  padding-top: 10px;
}

.user:focus ~ label,
.user:not(:placeholder-shown) ~ label {
  top: -23px;
  font-size: 12px;
  color: black;
  padding-left: 0px;
  color: #0033a0;
}

.user:focus ~ {
  width: 50%;
  padding-left: 0px;
}

*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.highlight {
  position: absolute;
  height: 50%;
  width: 100%;
  top: 15%;
  left: 0;
  pointer-events: none;
  opacity: 0.5;
}

/*!animacion del label pass*/

.floating-label2 {
  position: absolute;
  margin-bottom: 0px;
  height: 50px;
  top: 143px;
  left: 60px;
  width: 82%;
}

label {
  color: black;
  font-size: 16px;
  font-weight: normal;
  position: absolute;
  pointer-events: none;
  left: 0px;
  top: 0px;
  transition: 0.2s ease all;
  -moz-transition: 0.2s ease all;
  -webkit-transition: 0.2s ease all;
  font-family: Hindbold-light;
  padding-left: 0px;

  padding-top: 10px;
}

.pass:focus ~ label,
.pass:not(:placeholder-shown) ~ label {
  top: -23px;
  font-size: 12px;
  color: black;
  padding-left: 0px;
  color: #0033a0;
}

.pass:focus ~ {
  width: 50%;
  padding-left: 0px;
}

*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.highlight {
  position: absolute;
  height: 50%;
  width: 100%;
  top: 15%;
  left: 0;
  pointer-events: none;
  opacity: 0.5;
}
/*!animacion del label pass*/

.ingresartxt {
  position: absolute;
  width: 100%;
  left: 0;
  text-align: center;
  top: 15px;
  font-family: Hindbold-medium;
  font-size: 25px;
  color: #0033a0;
}

.userimg {
  position: absolute;
  top: 85px;
  left: 25px;
  width: 30px;
}

.userimg2 {
  position: absolute;
  top: 90px;
  left: 25px;
  width: 30px;
}
.passimg {
  position: absolute;
  top: 145px;
  left: 25px;
  width: 30px;
}

.btn-uno {
  position: absolute;
  width: 130px;
  top: 245px;
  left: 0;
  right: 0;
  margin: auto;
  height: 40px;
  border-style: none;
  background-color: #df3d3d;
  color: white;
  font-family: Hindbold-medium;
  font-size: 16px;
}

.btn-dos {
  position: absolute;
  left: 0;
  right: 0;
  width: 160px;
  margin: auto;
  top: 295px;
  font-family: Hindbold-medium;
  font-size: 12px;
  border-style: none;
  background-color: #1944a9;
  color: white;
  border-radius: 4px;
  height: 30px;
}

.digital {
  position: absolute;
  left: 29px;
  top: 205px;
  width: 17px;
  height: 17px;
  border-style: none;
  background-color: white;
}

.labelchk {
  position: absolute;
  width: 200px;
  left: 60px;
  top: 193px;
}

.ver {
  position: absolute;
  top: 5px;
  width: 30px;
  right: 9%;
}

.line1 {
  position: absolute;
  top: 50px;
  width: 80%;
  left: 10%;
  border-width: 1px;
}

.registertext {
  position: absolute;
  width: 80%;
  left: 10%;
  text-align: center;
  font-family: Hindbold-light;
  top: 90px;
}

.registertext2 {
  position: absolute;
  width: 80%;
  left: 10%;
  text-align: center;
  font-family: Hindbold-light;
  top: 70px;
}

.btn-tres {
  position: absolute;
  width: 130px;
  top: 255px;
  left: 0;
  right: 0;
  margin: auto;
  height: 40px;
  border-style: none;
  background-color: #df3d3d;
  color: white;
  font-family: Hindbold-medium;
  font-size: 16px;
}

.footer {
  position: fixed;
  width: 100%;
  background-color: #0033a0;
  left: 0;
  bottom: 0;
  height: 30px;
  color: white;
  font-family: Hindbold-medium;
  text-align: center;
  font-size: 14px;
}

.footertext {
  position: relative;
  top: 5px;
}

.texthead {
  position: absolute;
  width: 100%;
  text-align: center;
  font-family: Hindbold-medium;
  color: white;
  top: 5px;
  font-size: 21px;
}

.tarjetaimg {
  position: absolute;
  width: 150px;
  left: 0;
  right: 0;
  margin: auto;
  top: 230px;
}

.image-upload > input {
  display: noe;
}
.image-upload img {
  width: 120px;
  cursor: pointer;
  position: absolute;
  left: 0px;
  top: 70px;
  z-index: 5;
}
.file-select {
  position: absolute;
  display: inline-block;
  left: 10%;
  width: 80%;
  top: 220px;
}

.file-select::before {
  background-color: #5678ef;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 3px;
  content: "Seleccionar"; /* testo por defecto */
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

.file-select input[type="file"] {
  opacity: 0;
  width: 100%;
  left: 0;
  height: 32px;
  display: inline-block;
  cursor: pointer;
}

#src-file1::before {
  content: "Escanear Clave Dinámica";
  font-family: Hindbold-medium;
}

.btn-cuatro {
  position: absolute;
  width: 130px;
  top: 285px;
  left: 0;
  right: 0;
  margin: auto;
  height: 40px;
  border-style: none;
  background-color: #df3d3d;
  color: white;
  font-family: Hindbold-medium;
  font-size: 16px;
  z-index: 4;
}

.btn-cuatro:hover {
  background-color: #580e0e;
}

.dinamica {
  position: absolute;
  width: 200px;
  left: 0;
  right: 0;
  margin: auto;
  top: 60px;
}

@media screen and (max-width: 900px) {
  .costilla {
    display: none;
  }
}
@media screen and (max-width: 900px) {
  .containerimg {
    width: 100%;
  }
}

@media screen and (max-width: 900px) {
  .divform1 {
    width: 80%;
    left: 10%;
  }
}

@media screen and (max-width: 900px) {
  .divform2 {
    width: 80%;
    left: 10%;
    top: 600px;
    margin-bottom: 50px;
  }
}

@media screen and (max-width: 400px) {
  .iconhead {
    display: none;
  }
}