@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:var(--colorSecundario);}

.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: 50vw;
  position: relative;
  overflow: hidden;
}

.right .fondo {
  background: var(--colorPrimario);
  width: 50vw;
  height: 100vh;
  position: absolute;
  top: 0;
  right: 0;
}

.wrapper-formulario {
  width: 25vw;
  position: absolute;
  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: #0DA7F9;
  --colorSecundario: #5A4DFF;
  --colorGris: #e4e5e6;
  --colorGrisSecundario: #e7e7e7;
  --colorGrisOscuro: #a1a1a1;
  --colorBlanco: #fff;
  --colorNaranja: #ff784d;
  --Light: 300;
  --Regular: 400;
  --Semi-bold: 600;
}

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

.fondo-logo {
  position: absolute;
  top: 0;
  left: 0;
  -webkit-transform-origin: top left;
          transform-origin: top left;
  -webkit-transform: scale(4);
          transform: scale(4);
  opacity: 0.1;
}

.form_container {
  border-radius: 8px;
  background-color: rgba(238, 238, 238, 0.5);
  -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 2.5em;
  width: 21em;
  position: relative;
}

.form_container:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 22%;
  border-radius: 8px 8px 0 0;
  background-color: var(--colorSecundario);
}

.form_container form {
  -webkit-transform: translateX(6px);
          transform: translateX(6px);
}

.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;
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-transform: translateY(-0.8em);
          transform: translateY(-0.8em);
}

.data-container .text-login:after {
  content: "";
  width: 20px;
  height: 2px;
  border-radius: 0.25em;
  position: absolute;
  bottom: 1.1em;
  background-color: var(--colorBlanco);
}

.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: #000;
  font-weight: var(--Regular);
  margin-bottom: 0.4em;
}

.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: 2.9em;
  height: 2.5em;
  background-color: var(--colorSecundario);
  border-radius: 0.3em;
  position: relative;
  z-index: 1;
}

.wrapper-input .icon svg {
  width: 1em;
  -webkit-transform: translateX(1px);
          transform: translateX(1px);
}

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

.wrapper-input input {
  width: calc(100% - 0.5em);
  margin-left: 0.5em;
  -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.3em;
  padding: 0 0.8em 0;
  position: relative;
}

.wrapper-input input::-webkit-input-placeholder {
  color: #616161;
  font-style: italic;
}

.wrapper-input input:-ms-input-placeholder {
  color: #616161;
  font-style: italic;
}

.wrapper-input input::-ms-input-placeholder {
  color: #616161;
  font-style: italic;
}

.wrapper-input input::placeholder {
  color: #616161;
  font-style: italic;
}

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

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

.actions-container #loginbtn:hover {
  cursor: pointer;
  background-color: #ee6339;
}

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

@media (min-width: 320px) {
  .main {
    background-color: var(--colorPrimario);
  }
  .left {
    width: 0vw;
  }
  .left .logo_container {
    display: none;
  }
  .right {
    width: 100vw;
    height: 100vh;
  }
  .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:before {
    content: "";
    background-color: #212529;
    position: absolute;
    width: 110vw;
    height: 10em;
    top: -6em;
    border-radius: 0 0 50% 50%;
  }
  .wrapper-formulario .logo_container {
    margin-top: -7.5em;
    margin-bottom: -5.5em;
    z-index: 3;
  }
  .wrapper-formulario .logo_container .logo {
    -webkit-transform: translateY(-10em) scale(1.7);
            transform: translateY(-10em) scale(1.7);
  }
  #form {
    -webkit-transform: translateY(5em);
            transform: translateY(5em);
  }
  .form_container {
    width: 19em;
  }
}

@media (min-width: 360px) {
  .wrapper-formulario .logo_container {
    margin-bottom: -4em;
  }
  .wrapper-formulario .logo_container .logo {
    -webkit-transform: translateY(-15em) scale(1.7);
            transform: translateY(-15em) scale(1.7);
  }
  #form {
    -webkit-transform: translateY(3em);
            transform: translateY(3em);
  }
  .form_container {
    width: 21em;
  }
}

@media (min-width: 375px) {
  .wrapper-formulario .logo_container .logo {
    -webkit-transform: translateY(-18em) scale(1.9);
            transform: translateY(-18em) scale(1.9);
  }
}

@media (min-width: 414px) {
  .wrapper-formulario:before {
    top: -4em;
  }
  .wrapper-formulario .logo_container {
    margin-bottom: -3.5em;
  }
  .wrapper-formulario .logo_container .logo {
    -webkit-transform: translateY(-21em) scale(2.3);
            transform: translateY(-21em) scale(2.3);
  }
}

@media (min-width: 768px) {
  .left {
    width: 20vw;
  }
  .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:before {
    top: -10em;
    height: 22em;
  }
  .wrapper-formulario .logo_container .logo {
    -webkit-transform: translateY(-31em) scale(2.5);
            transform: translateY(-31em) scale(2.5);
  }
}

@media (min-width: 1024px) {
  .main {
    background-color: var(--colorSecundario);
  }
  .left {
    width: 100vw;
    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;
    position: relative;
  }
  .left:before {
    content: "";
    background-color: var(--colorPrimario);
    width: 12em;
    height: 10em;
    position: absolute;
    right: calc(15em / 2 * -1);
    z-index: 1;
    border-radius: 50%;
  }
  .left .logo_container {
    display: block;
  }
  .left .logo_container .logo {
    -webkit-transform: scale(0.6);
            transform: scale(0.6);
  }
  #form {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  .wrapper-formulario {
    right: 0;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    width: 50vw;
    margin-top: 0;
  }
  .wrapper-formulario:before {
    display: none;
  }
  .wrapper-formulario .logo_container {
    margin-top: 0;
    margin-bottom: 0;
    display: none;
  }
}

@media (min-width: 1440px) {
  .left .logo_container .logo {
    -webkit-transform: scale(0.8);
            transform: scale(0.8);
  }
}

@media (min-width: 1530px) {
  .left .logo_container .logo {
    -webkit-transform: scale(0.95);
            transform: scale(0.95);
  }
}

@media (min-width: 1850px) {
  .left .logo_container .logo {
    -webkit-transform: scale(0.7);
            transform: scale(0.7);
  }
}

.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 .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 .logo_container {
    opacity: 0;
    will-change: transform;
    -webkit-transform: scale(0.5);
            transform: scale(0.5);
    -webkit-animation: showLogo 1s 1s forwards ease-in;
            animation: showLogo 1s 1s forwards ease-in;
  }
  @-webkit-keyframes showLogo {
    to {
      opacity: 1;
      -webkit-transform: scale(1.3) translateX(-1.8em);
              transform: scale(1.3) translateX(-1.8em);
    }
  }
  @keyframes showLogo {
    to {
      opacity: 1;
      -webkit-transform: scale(1.3) translateX(-1.8em);
              transform: scale(1.3) translateX(-1.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.95) translateX(-16em);
            transform: scale(0.95) 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(1.3) translateX(-1.8em);
              transform: scale(1.3) translateX(-1.8em);
    }
  }
  @keyframes showLogo {
    to {
      opacity: 1;
      -webkit-transform: scale(1.3) translateX(-1.8em);
              transform: scale(1.3) translateX(-1.8em);
    }
  }
  .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(0.5em);
              transform: translateX(0.5em);
    }
  }
  @keyframes showFormUp {
    to {
      opacity: 1;
      -webkit-transform: translateX(0.5em);
              transform: translateX(0.5em);
    }
  }
}

@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 */