@import url("import url('https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;600;700&display=swap');");
* {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

body {
  font-family: "Nunito", sans-serif;
  width: 100vw;
  height: 100vh;
  padding: 0;
  margin: 0;
  background: #da291c;
  background: -webkit-gradient(linear, left top, left bottom, from(#da291c), to(#bf0d3e));
  background: linear-gradient(to bottom, #da291c 0%, #bf0d3e 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#da291c', endColorstr='#bf0d3e',GradientType=0 );
}

.main {
  height: 100vh;
  position: relative;
  overflow: hidden;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  opacity: 0;
}

.left {
  width: 60vw;
  color: #fff;
}

.right {
  height: inherit;
  display: inherit;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 40vw;
  position: relative;
}

.right .fondo {
  background-color: #ffffff;
  width: calc(50vw * 2);
  height: calc(100vh * 2);
  position: absolute;
  top: 0;
  left: 15vw;
  -webkit-transform: rotateZ(20deg);
          transform: rotateZ(20deg);
  -webkit-transform-origin: top right;
          transform-origin: top right;
}

.wrapper-formulario {
  width: 25vw;
  position: absolute;
  right: 4em;
  z-index: 2;
  height: 100vh;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.text-center {
  text-align: center;
}

:root {
  --colorPrimario: #da291c;
  --colorSecundario: #bf0d3e;
  --colorGris: #c2c2c2;
  --colorGrisSecundario: #e7e7e7;
  --colorGrisOscuro: #a1a1a1;
  --colorBlanco: #fff;
  --Light: 300;
  --Regular: 400;
  --Semi-bold: 600;
}

/* Logo Container */
.logo_container {
  -webkit-transform: scale(0.8);
          transform: scale(0.8);
}

.form_container {
  border: 1px solid #e1e1e1;
  border-radius: 8px;
  background-color: #f6f6f6;
  -webkit-box-shadow: 0px 0px 7.83px 1.17px rgba(0, 0, 0, 0.08);
          box-shadow: 0px 0px 7.83px 1.17px rgba(0, 0, 0, 0.08);
  padding: 3em 2em;
  width: 21em;
}

.data-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-bottom: 1em;
}

.data-container .text-login {
  color: var(--colorPrimario);
  font-weight: var(--Regular);
  padding: 0 0 1.5em 0;
  margin: 0;
}

.form-control {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  margin-bottom: 1.5em;
}

.form-control label {
  color: var(--colorSecundario);
  font-weight: var(--Lightd);
  margin-bottom: 0.2em;
}

.wrapper-input {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 17em;
}

.wrapper-input .icon {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 3em;
  height: 2.5em;
  background-color: var(--colorPrimario);
  border-radius: 4px 0 0 4px;
}

.wrapper-input .icon svg {
  width: 1em;
}

.wrapper-input .icon svg path {
  fill: var(--colorBlanco);
}

.wrapper-input input {
  width: 100%;
  -webkit-box-shadow: inset 0px 0px 2px 0px rgba(0, 0, 0, 0.32);
          box-shadow: inset 0px 0px 2px 0px rgba(0, 0, 0, 0.32);
  border: none;
  outline: none;
  border-radius: 0 4px 4px 0;
  padding: 0 0.5em 0 0.5em;
}

.wrapper-input input::-webkit-input-placeholder {
  color: var(--colorGris);
  font-style: italic;
}

.wrapper-input input:-ms-input-placeholder {
  color: var(--colorGris);
  font-style: italic;
}

.wrapper-input input::-ms-input-placeholder {
  color: var(--colorGris);
  font-style: italic;
}

.wrapper-input input::placeholder {
  color: var(--colorGris);
  font-style: italic;
}

.actions-container {
  text-align: center;
}

.actions-container #loginbtn {
  background-color: var(--colorPrimario);
  border: none;
  border-radius: 4px;
  color: var(--colorBlanco);
  padding: 0.7em 1.3em;
  -webkit-transition: background 0.5s ease-in;
  transition: background 0.5s ease-in;
  margin-bottom: 0.5rem;
}

.actions-container #loginbtn:hover {
  cursor: pointer;
  background-color: var(--colorSecundario);
}

.actions-container #recuperarbtn {
  font-size: 0.8em;
  text-decoration: none;
  color: var(--colorGrisOscuro);
}

@media (min-width: 320px) {
  .left {
    width: 80vw;
  }
  .left .logo_container {
    display: none;
  }
  .right {
    width: 0vw;
  }
  .wrapper-formulario {
    right: 0;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    margin-top: 5.5em;
    width: 100vw;
  }
  .wrapper-formulario .logo_container {
    margin-top: -12.5em;
    margin-bottom: -5.5em;
    z-index: 3;
  }
  .form_container {
    width: 19em;
  }
}

@media (min-width: 360px) {
  .wrapper-formulario .logo_container {
    margin-bottom: -4em;
  }
  .form_container {
    width: 21em;
  }
}

@media (min-width: 414px) {
  .wrapper-formulario .logo_container {
    margin-bottom: -3.5em;
  }
}

@media (min-width: 414px) {
  .wrapper-formulario .logo_container {
    margin-bottom: -3.5em;
  }
}

@media (min-width: 768px) {
  .wrapper-formulario {
    right: 0;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    margin-top: 5.5em;
    width: 100vw;
  }
}

@media (min-width: 1024px) {
  .left {
    width: 60vw;
  }
  .left .logo_container {
    display: block;
  }
  .right {
    width: 40vw;
  }
  .wrapper-formulario {
    right: 0;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    width: 40vw;
    margin-top: 0;
  }
  .wrapper-formulario .logo_container {
    margin-top: 0;
    margin-bottom: 0;
    display: none;
  }
}

.animation-control.main {
  -webkit-animation: showMain 0.5s forwards ease;
          animation: showMain 0.5s forwards ease;
}

@-webkit-keyframes showMain {
  to {
    opacity: 1;
  }
}

@keyframes showMain {
  to {
    opacity: 1;
  }
}

@media (min-width: 320px) {
  .animation-control .fondo {
    -webkit-animation: showBackground 1s forwards ease-in-out;
            animation: showBackground 1s forwards ease-in-out;
  }
  @-webkit-keyframes showBackground {
    from {
      -webkit-transform: rotateZ(0deg);
              transform: rotateZ(0deg);
    }
  }
  @keyframes showBackground {
    from {
      -webkit-transform: rotateZ(0deg);
              transform: rotateZ(0deg);
    }
  }
  .animation-control .wrapper-formulario .form_container {
    opacity: 0;
    -webkit-transform: translateY(3em);
            transform: translateY(3em);
    will-change: transform;
    -webkit-animation: showFormUp 1s 1.5s forwards ease-out;
            animation: showFormUp 1s 1.5s forwards ease-out;
  }
  @-webkit-keyframes showFormUp {
    to {
      opacity: 1;
      -webkit-transform: translateY(0);
              transform: translateY(0);
    }
  }
  @keyframes showFormUp {
    to {
      opacity: 1;
      -webkit-transform: translateY(0);
              transform: translateY(0);
    }
  }
  .animation-control .wrapper-formulario .logo_container {
    will-change: transform;
    opacity: 0;
    -webkit-transform: scale(0.3) translateY(-3em);
            transform: scale(0.3) translateY(-3em);
    -webkit-animation: showLogo 1s 1s forwards ease-in;
            animation: showLogo 1s 1s forwards ease-in;
  }
  @-webkit-keyframes showLogo {
    to {
      opacity: 1;
      -webkit-transform: scale(0.3) translateY(0);
              transform: scale(0.3) translateY(0);
    }
  }
  @keyframes showLogo {
    to {
      opacity: 1;
      -webkit-transform: scale(0.3) translateY(0);
              transform: scale(0.3) translateY(0);
    }
  }
}

@media (min-width: 768px) {
  .animation-control .logo_container {
    will-change: transform;
    -webkit-transform: scale(0.4) translateY(-3em);
            transform: scale(0.4) translateY(-3em);
  }
  @-webkit-keyframes showLogo {
    to {
      opacity: 1;
      -webkit-transform: scale(0.4) translateY(0);
              transform: scale(0.4) translateY(0);
    }
  }
  @keyframes showLogo {
    to {
      opacity: 1;
      -webkit-transform: scale(0.4) translateY(0);
              transform: scale(0.4) translateY(0);
    }
  }
}

@media (min-width: 1024px) {
  .animation-control .fondo {
    opacity: 0;
    -webkit-transform: rotateZ(-50deg);
            transform: rotateZ(-50deg);
    -webkit-animation: showBackground 1s forwards ease-in-out;
            animation: showBackground 1s forwards ease-in-out;
  }
  @-webkit-keyframes showBackground {
    to {
      opacity: 1;
      -webkit-transform: rotateZ(20deg);
              transform: rotateZ(20deg);
    }
  }
  @keyframes showBackground {
    to {
      opacity: 1;
      -webkit-transform: rotateZ(20deg);
              transform: rotateZ(20deg);
    }
  }
  .animation-control .logo_container {
    opacity: 0;
    will-change: transform;
    -webkit-transform: scale(0.6) translateX(-16em);
            transform: scale(0.6) translateX(-16em);
    -webkit-animation: showLogo 1s 1s forwards ease-in;
            animation: showLogo 1s 1s forwards ease-in;
  }
  @-webkit-keyframes showLogo {
    to {
      opacity: 1;
      -webkit-transform: scale(0.6) translateX(-8em);
              transform: scale(0.6) translateX(-8em);
    }
  }
  @keyframes showLogo {
    to {
      opacity: 1;
      -webkit-transform: scale(0.6) translateX(-8em);
              transform: scale(0.6) translateX(-8em);
    }
  }
  .animation-control .wrapper-formulario .form_container {
    opacity: 0;
    -webkit-transform: translateX(3em);
            transform: translateX(3em);
    will-change: transform;
    -webkit-animation: showFormUp 1s 1.5s forwards ease-out;
            animation: showFormUp 1s 1.5s forwards ease-out;
  }
  @-webkit-keyframes showFormUp {
    to {
      opacity: 1;
      -webkit-transform: translateX(0.5em);
              transform: translateX(0.5em);
    }
  }
  @keyframes showFormUp {
    to {
      opacity: 1;
      -webkit-transform: translateX(0.5em);
              transform: translateX(0.5em);
    }
  }
}

@media (min-width: 1440px) {
  .animation-control .logo_container {
    opacity: 0;
    will-change: transform;
    -webkit-transform: scale(0.8) translateX(-16em);
            transform: scale(0.8) translateX(-16em);
    -webkit-animation: showLogo 1s 1s forwards ease-in;
            animation: showLogo 1s 1s forwards ease-in;
  }
  @-webkit-keyframes showLogo {
    to {
      opacity: 1;
      -webkit-transform: scale(0.8) translateX(-2em);
              transform: scale(0.8) translateX(-2em);
    }
  }
  @keyframes showLogo {
    to {
      opacity: 1;
      -webkit-transform: scale(0.8) translateX(-2em);
              transform: scale(0.8) translateX(-2em);
    }
  }
  .animation-control .wrapper-formulario .form_container {
    opacity: 0;
    -webkit-transform: translateX(6em);
            transform: translateX(6em);
    will-change: transform;
    -webkit-animation: showFormUp 1s 1.5s forwards ease-out;
            animation: showFormUp 1s 1.5s forwards ease-out;
  }
  @-webkit-keyframes showFormUp {
    to {
      opacity: 1;
      -webkit-transform: translateX(2em);
              transform: translateX(2em);
    }
  }
  @keyframes showFormUp {
    to {
      opacity: 1;
      -webkit-transform: translateX(2em);
              transform: translateX(2em);
    }
  }
}

@media (min-width: 1530px) {
  .animation-control .wrapper-formulario {
    -webkit-transform: translateX(0.5em);
            transform: translateX(0.5em);
  }
}

@media (min-width: 1850px) {
  .animation-control .wrapper-formulario {
    -webkit-transform: translateX(1em);
            transform: translateX(1em);
  }
}
/*# sourceMappingURL=styles.css.map */