:root {
  --color-base-1: #a6ecdf;
  --color-base-2: #bfd4ff;
  --color-base-3: #FFF;
  --color-1: #FFF;
  --color-2: #000;
  --color-3-1: #e84262;
  --color-3-2: #0056a4;
  --color-3-3: #ffd631;
  --color-font: #666;
}

* {
  border: 0 none;
  box-sizing: border-box;
  margin: 0;
  outline: 0 none;
  padding: 0;
}

html,
body {
  height: 100%;
  width: 100%;
  color: var(--color-font);
  font-family: "Varela", sans-serif;
}

figure {
  height: 7rem;
  text-align: center;
  width: 100%;
}
figure.max {
  height: 14rem;
}
@media (max-width: 900px) {
  figure {
    height: initial !important;
  }
  figure img {
    height: auto !important;
    width: 100% !important;
  }
}
figure img {
  height: 100%;
  width: auto;
}

.input-style, .form-style fieldset input[type=text], .form-style fieldset input[type=password], .form-style fieldset input[type=button], .form-style fieldset input[type=reset], .form-style fieldset input[type=submit], .form-style fieldset select {
  border-radius: 0.5rem;
  font-size: 1rem;
  padding: 0.8rem 1.6rem;
  transition: all 0.25s ease;
}

.form-style {
  padding: 2rem 1rem;
  width: 100%;
}
.form-style > div {
  width: 100%;
}
.form-style fieldset {
  padding: 1.6rem 0 0;
  position: relative;
  text-align: center;
  width: 100%;
}
@media (min-width: 900px) {
  .form-style fieldset {
    min-width: 300px;
  }
}
.form-style fieldset.form-style-seperator {
  margin-top: 3rem;
}
.form-style fieldset select {
  background-color: var(--color-1);
  width: 100%;
}
.form-style fieldset input[type=button], .form-style fieldset input[type=reset], .form-style fieldset input[type=submit] {
  background-color: var(--color-1);
  cursor: pointer;
}
.form-style fieldset input[type=text], .form-style fieldset input[type=password] {
  width: 100%;
}
.form-style fieldset input[type=text]:focus, .form-style fieldset input[type=password]:focus {
  box-shadow: 0px 0px 10rem 0px var(--color-1);
}
.form-style fieldset input[type=text]:not(.input-dirty) ~ label, .form-style fieldset input[type=password]:not(.input-dirty) ~ label {
  color: var(--color-font);
  font-size: 1rem;
  left: 1.6rem;
  bottom: 0.8rem;
}
.form-style fieldset input[type=text] ~ span, .form-style fieldset input[type=password] ~ span {
  position: absolute;
  bottom: calc(100% - (0.8rem * 2));
  right: 0;
}
.form-style fieldset label {
  bottom: calc(100% - (0.8rem * 2));
  font-size: 0.8rem;
  font-style: italic;
  left: 0;
  opacity: 0.7;
  pointer-events: none;
  position: absolute;
  transition: all 0.25s ease;
}

.login-wrap {
  background: url("../img/TEXTURA.png") var(--color-base-3) center center repeat fixed;
  height: 100%;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
}
@media (max-width: 900px) {
  .login-wrap {
    padding: 1rem;
    overflow: auto;
  }
}
.login-wrap.pruebas {
  background-color: var(--color-base-2);
}
.login-wrap.desarrollo {
  background-color: var(--color-base-1);
}
@media (min-width: 900px) {
  .login-wrap:not(.open) .login-content {
    top: calc(50% + 150px);
    opacity: 0;
  }
}
.login-wrap .login-content {
  background-color: var(--color-2);
  border-radius: 1rem;
  color: var(--color-1);
  padding: 10rem 1rem;
  position: relative;
  transition: all 0.5s ease-in-out;
}
@media (min-width: 900px) {
  .login-wrap .login-content {
    box-shadow: 0px 0px 1rem 0px #0000007a;
    display: flex;
    padding: 2rem 3rem;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate3d(-50%, -50%, 0);
  }
}
.login-wrap .login-content-div {
  align-self: center;
}
.login-wrap .login-content-div-form-logo-img {
  background-color: var(--color-1);
  border-radius: 1rem;
  padding: 1rem 1.2rem;
}
.login-wrap .login-content-div-logo-certificado {
  display: block;
  margin: 3rem auto 0;
  width: 200px;
  height: auto;
}
.login-wrap .login-content-div.certificado {
  position: absolute;
  top: calc(100% + 1rem);
  right: 0;
}
.login-wrap .login-content-div.logo {
  padding: 0 2rem;
  text-align: center;
}

.login-close {
  height: 3rem;
  width: 3rem;
  position: absolute;
  top: -1.5rem;
  right: -1.5rem;
  text-decoration: none;
}
.login-close:hover span {
  background-color: var(--color-1);
  color: var(--color-2);
}
.login-close span {
  background-color: var(--color-2);
  border-radius: 50%;
  color: var(--color-1);
  display: block;
  position: relative;
  height: 100%;
  width: 100%;
  transition: all 0.25s ease;
}
.login-close span::before {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -50%, 0);
}

.login-cs {
  cursor: pointer;
  border-radius: 0.5rem;
  position: fixed;
  top: 1rem;
  right: 1rem;
  height: auto;
  width: 100px;
  transition: all 0.25s ease;
}
.login-cs:hover {
  box-shadow: 0 0 1rem 0 grey;
}
.login-cs img {
  height: auto;
  width: 100%;
}

/*# sourceMappingURL=index.css.map */