@import url(https://fonts.googleapis.com/css?family=Roboto);
@import url(https://fonts.googleapis.com/css2?family=Playwrite+NZ+Basic);

html, body {
  font-family: "Roboto";
  margin: 0;
  padding: 0;
  border: 0;
  position: absolute;
  height: 100%;
  min-width: 100%;
  font-size: 13px;
  color: #ffffff;
  direction: ltr;
  font: 14px/1.3 Arial, sans-serif;
  background: #000000;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

A {
  text-decoration: none;
}

.contenedor-1 {
  background: transparent;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.contenedor-2 {
  display: flex;
  flex-direction: column;
  width: 80%;

  text-align: center;
  align-items: center;

}

.wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 30px 50px;
  margin: 0px;
  width: 75%;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 16px;
}

.mi-logo {
  width: 40%;
  height: auto;
}




/*CONTENEDOR PADRE PARA FORMULARIO*/

.contenedor-formulario {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #f2f2f2;
  max-width: 550px;
  min-width: 450px;
  padding: 8px 0px;
  border: 3px solid transparent;
  background:    
    linear-gradient(0deg, #D01C83, #8912E5, #1088FD) border-box;
  border-radius: 20px;
  box-shadow: 0 15px 25px rgba(0, 0, 0, .2);
}




.contenedor-formulario .formulario {
  width: 100%;
  margin: auto;
}

.contenedor-formulario .formulario .input-group {
  position: relative;
  margin-bottom: 32px;
}

.contenedor-formulario .formulario .input-group input[type="text"],
.contenedor-formulario .formulario .input-group input[type="email"],
.contenedor-formulario .formulario .input-group input[type="password"] {
  font-family: "Roboto";
  font-size: 20px;
  color: white;
  width: 90%;
  outline: none;
  padding: 15px;
  background: black;
  border-image-source: linear-gradient(90deg, #D01C83, #8912E5, #1088FD);
  border-width: 2pt;
  border-top: none;
  border-right: none;
  border-left: none;
  border-image-slice: 1;
  border-radius: 10px;

}


.contenedor-formulario .formulario .input-group2 input[type="text"],
.contenedor-formulario .formulario .input-group2 input[type="email"],
.contenedor-formulario .formulario .input-group2 input[type="password"] {
  font-family: "Roboto";
  font-size: 20px;
  color: #17212b;
  width: 90%;
  outline: none;
  padding: 15px;
  background: none;
  border: none;
  border-bottom: 2px solid #17212b;

}


.contenedor-formulario .formulario .input-group input[type="text"]:focus,
.contenedor-formulario .formulario .input-group input[type="text"]:active,
.contenedor-formulario .formulario .input-group input[type="email"]:focus,
.contenedor-formulario .formulario .input-group input[type="email"]:active,
.contenedor-formulario .formulario .input-group input[type="password"]:focus,
.contenedor-formulario .formulario .input-group input[type="password"]:active {
  outline: none;
  border-bottom: 2px solid #000000;
}

.contenedor-formulario .formulario .input-group input[type="text"].error,
.contenedor-formulario .formulario .input-group input[type="email"].error,
.contenedor-formulario .formulario .input-group input[type="password"].error {
  border-bottom: 2px solid #D32F2F;
}

.contenedor-formulario .formulario .input-group input[type="text"].error+label,
.contenedor-formulario .formulario .input-group input[type="email"].error+label,
.contenedor-formulario .formulario .input-group input[type="password"].error+label {
  color: #D32F2F;
}

.contenedor-formulario .formulario .input-group label {
  color: #FFFFFF;
}

.contenedor-formulario .formulario .input-group label.label {
  -webkit-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
  margin-left: 15px;
  font-size: 16px;
  line-height: 16px;
  position: absolute;
  top: 16px;
  left: 0;
}

.contenedor-formulario .formulario .input-group label.label.active {
  top: -13px;
  font-size: 12px;
  line-height: 12px;
  color: #FFFFFF;
}




.contenedor-formulario .formulario .input-group.error label {
  color: #D32F2F;
}

.contenedor-formulario .formulario .input-group.error label:hover {
  background: rgba(211, 47, 47, 0.2);
}

.contenedor-formulario .formulario .input-group.error label:before {
  border: 2px solid #D32F2F;
}

.contenedor-formulario .formulario .input-group.radio input[type="radio"] {
  display: none;
}

.contenedor-formulario .formulario .input-group.radio input[type="radio"]:checked+label:before {
  display: none;
}

.contenedor-formulario .formulario .input-group.radio input[type="radio"]:checked+label {
  padding: 5px 15px;
  background: #303F9F;
  border-radius: 2px;
  color: #f2f2f2;
}

.contenedor-formulario .formulario .input-group.checkbox label:before {
  border-radius: 3px;
}

.contenedor-formulario .formulario .input-group.checkbox input[type="checkbox"] {
  display: none;
}

.contenedor-formulario .formulario .input-group.checkbox input[type="checkbox"]:checked+label:before {
  display: none;
}

.contenedor-formulario .formulario .input-group.checkbox input[type="checkbox"]:checked+label {
  background: #303F9F;
  color: #f2f2f2;
  padding: 5px 15px;
}

input.entrada {
  background: linear-gradient(to right, #D01C83, #8912E5, #1088FD);
  border-radius: 15px;
  color: #fff;
  cursor: pointer;
  border: none;
  display: inline-block;
  font-family: "Roboto";
  font-size: 18px;
  padding: 15px;
  width: 100%;
  -webkit-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

input.entrada:hover {
  color: #000000;
  border: none;
}


input.soporte {
  background: linear-gradient(to right, #013B74, #0269CF, #1088FD);
  border-radius: 15px;
  color: #fff;
  cursor: pointer;
  border: none;
  display: inline-block;
  font-family: "Roboto", sans-serif;
  font-size: 18px;
  padding: 10px;
  width: 45%;
  transition: all 0.3s ease;
  text-align: center;
  margin-right: 1rem;
}

input.soporte:hover {
  color: #0a0e31;
  filter: brightness(1.1);
}





A.olvido {
  color: #1088FD;
}

.font-effect-3d-float {
  color: rgb(255, 255, 255);
  font-family: 'Playwrite NZ Basic', serif;
  font-size: 24px;
  font-weight: 900;
  text-shadow: 0 3px rgba(0, 0, 0, 0.3);
  float: center;
  margin: 0px 0px 0px 1%;
  padding: 5px 5px 5px 5px;
  position: relative;
}

.font-effect-2da {
  color: rgb(255, 255, 255);
  font-family: 'Playwrite NZ Basic', serif;
  font-weight: 900;
  font-size: 22px;
  text-shadow: 0 3px rgba(0, 0, 0, 0.4);
}


a,

a:hover, border: yellow 1px solid;

a:visited {


  cursor: pointer;

  text-decoration: none;

}

a:hover {

  text-decoration: underline;

}

.uso_nav_sup_der {
  vertical-align: center;
  color: rgb(70, 127, 64);
  width: 335px;
  background-color: rgba(39, 71, 36, 0.3);
  text-align: center;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  border: rgb(39, 71, 36) 0px solid;
  font-size: 11px;
  padding: 3px 3px 3px 3px;
  top: 22px;
  right: 0;
  position: fixed;
  cursor: pointer;
}


.uso_nav_sup_izq {
  vertical-align: center;
  color: rgb(70, 127, 64);
  width: 335px;
  background-color: rgba(39, 71, 36, 0.3);
  text-align: center;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  border: rgb(39, 71, 36) 0px solid;
  font-size: 11px;
  padding: 3px 3px 3px 3px;
  top: 22px;
  left: 0;
  position: fixed;
  cursor: pointer;
}

.modalExterno {
  position: fixed;
  font-family: Arial, Helvetica, sans-serif;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.8);
  z-index: 99999;
  -webkit-transition: opacity 400ms ease-in;
  -moz-transition: opacity 400ms ease-in;
  transition: opacity 400ms ease-in;
  display: none;
  pointer-events: none;
}

.modalExterno:target {
  display: block;
  pointer-events: auto;
}


.modalExterno>div {
  width: 600px;
  position: relative;
  margin: 8% auto;
  padding: 25px 20px 13px 20px;
  border-radius: 10px;
  background: transparent;
}

.contenedor-salida {
  width: 500px;
  padding: 20px 20px;
  background: #000000;
  font-size: 1.5rem;
  font-weight: bold;
  color: white;
  text-align: center;
  line-height: 3.5rem;


}

.contenedor-salida2 {
  margin: 2.5rem 1rem 2.5rem;
  font-size: 1.1rem;
  color: white;
  text-align: center;
  line-height: 1.5rem;

}



@media screen and (max-width: 980px) {

  body {
    padding-top: 50px
  }

  .contenedor-1 {
    background: transparent;
    height: 100vh;
    display: flex;
    align-items: flex-start;
    justify-content: center;    

  }

  .contenedor-2 {
    display: flex;
    flex-direction: column;
    width: 96%;
    text-align: center;
    align-items: center;    
  }

  .contenedor-formulario {
    flex-direction: column;
    justify-content: center;
    max-width: 95%;
    min-width: 90%;
  }



  .font-effect-3d-float {
    font-size: 20px;
  }

  .font-effect-2da {
    font-size: 16px;
  }

  .modalExterno>div {
    width: 96%;
  }

  .contenedor-salida {
    width: 90%;
    font-size: 1.5rem;
    line-height: 2.5rem;

  }




}