body {
    margin: 0;
    display: flex;
    flex-direction: column;
}
.background-fondo {
    position: relative;
    width: 50%;
    height: 100vh;
    background-image: url(../img/Login-conectadown.png);
    background-size: cover;
  }

  .caja-2 {
    width: 50%;
    background-color: #FFF;
  }

  .background-todo {
    width: 100%;
    height: 100%;
  }

  .background-todo > div {
    width: 100%;
    height: 100vh;
    display: flex;
  }

  .background-color {
    width: 100%;
    height: 100%;
    background-image: url(../img/background-color.png);
    background-size: cover;
    background-position: 50% 50%;
  }
  
  .background-color .atoms-colors-black {
    height: 752px;
  }

  .form-caja {
    width: 90%;
    margin: auto;
  }

  .frame {
    position: relative;
    width: 988px;
    height: 516px;
    background-color: #00000033;
    overflow: hidden;
    margin: auto;
    top: 15%;
  }
  
  .caja-fondo .group-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 151px;
    left: 42.5%;
  }
  
  .caja-fondo .group-wrapper > .group {
    background-color: #0082ca;
    border-radius: 75%;
  }
  
  .group-wrapper .group .image {
    margin: auto;
    object-fit: cover;
  }
  
  .caja-fondo .bienvenidos-a {
    display: flex;
    align-items: center;
    justify-content: center;
    word-break:break-all;
    font-family: "Ubuntu-Bold", Helvetica;
    font-weight: 700;
    color: #ffffff;
    font-size: 24px;
    letter-spacing: 0;
    line-height: normal;
    white-space: nowrap;
  }

  .caja-fondo .un-proyecto-de {
    display: flex;
    align-items: center;
    justify-content: center;
    word-break:break-all;
    font-family: "Ubuntu-Bold", Helvetica;
    font-weight: 700;
    color: #ffffff;
    font-size: 24px;
    letter-spacing: 0;
    line-height: normal;
    white-space: nowrap;
  }
  
  .caja-fondo .down-transparencia {
    display: flex;
    align-items: center;
    justify-content: center;
    word-break:break-all;
    font-family: "Ubuntu-Bold", Helvetica;
    font-weight: 700;
    color: #ffffff;
    font-size: 56px;
    letter-spacing: 0;
    line-height: normal;
    white-space: nowrap;
  }

  .caja-login {
    margin-top: 30%;
  }
  .caja-fondo {
    margin-top: 60%;
  }

  .caja-info {
    width: 90%;
    margin: auto;
  }

  .caja-info > img {
    width: 70%;
    margin: auto;
  }

  .caja-marcas {
    width: 90%;
    margin: auto;
    display: flex;
    justify-content: space-around;
    align-items: center;
  }

  .caja-marcas > div {
    margin-top: 5%;
    width: 20%;
  }

  .caja-marcas > div > img {
    width: 100%;
  }

  .box {
    position: relative;
    left: 50%;
    width: 50%;
    height: 100%;
  }
  
  .box .login {
    position: relative;
    width: 448px;
    height: 440px;
    margin: auto;
    top: 42px;
    background-color: #ffffff;
    border-radius: 16px;
  }
  
  .login .overlap {
    position: absolute;
    width: 338px;
    height: 118px;
    top: 140px;
    left: 33px;
  }

  .caja-vector-login {
    width: 5%;
    margin: auto;
  }
  
  .vector {
    margin: auto;
    cursor: pointer;
    width: 15px;
    height: 13px;
    z-index: 10;
  }

  .boton-login {
    width: 50%;
    margin: auto;
  }
  
  .login .group {
    position: absolute;
    width: 338px;
    height: 118px;
    top: 0;
    left: 0;
  }
  
  .login .div {
    position: absolute;
    width: 340px;
    height: 54px;
    top: 0;
    left: 0;
  }
  
  .login .overlap-group {
    position: absolute;
    width: 338px;
    height: 36px;
    top: 18px;
    left: 0;
    border-radius: 6px;
    border: 1px solid;
    border-color: #bbbbbb;
  }
  
  .login .img {
    position: absolute;
    width: 14px;
    height: 14px;
    top: 27px;
    left: 9px;
  }
  
  .login .text-wrapper {
    position: absolute;
    width: 241px;
    top: 0;
    left: 0;
    font-family: "Ubuntu-Light", Helvetica;
    font-weight: 300;
    color: #424b5a;
    font-size: 10px;
    letter-spacing: 0;
    line-height: normal;
    white-space: nowrap;
  }
  
  .login .group-2 {
    position: absolute;
    width: 340px;
    height: 52px;
    top: 66px;
    left: 0;
  }
  
  .login .password-lock-solid-wrapper {
    position: absolute;
    width: 338px;
    height: 36px;
    top: 16px;
    left: 0;
    border-radius: 6px;
    border: 1px solid;
    border-color: #bbbbbb;
  }
  
  .login .text-wrapper-2 {
    position: absolute;
    width: 143px;
    top: 0;
    left: 0;
    font-family: "Ubuntu-Light", Helvetica;
    font-weight: 300;
    color: #424b5a;
    font-size: 10px;
    letter-spacing: 0;
    line-height: normal;
    white-space: nowrap;
  }
  
  .login .text-wrapper-3 {
    position: absolute;
    width: 258px;
    top: 84px;
    left: 33px;
    font-family: "Ubuntu-Bold", Helvetica;
    font-weight: 700;
    color: #0082ca;
    font-size: 32px;
    letter-spacing: 0;
    line-height: normal;
    white-space: nowrap;
  }
  
  .login .text-wrapper-4 {
    position: absolute;
    width: 135px;
    top: 272px;
    left: 236px;
    font-family: "Ubuntu-Light", Helvetica;
    font-weight: 300;
    color: #0082ca;
    font-size: 12px;
    letter-spacing: 0;
    line-height: normal;
    white-space: nowrap;
  }
  
  .login .group-3 {
    position: absolute;
    width: 103px;
    height: 13px;
    top: 270px;
    left: 36px;
  }
  
  .login .text-wrapper-5 {
    position: absolute;
    width: 79px;
    top: 3px;
    left: 22px;
    font-family: "Ubuntu-Light", Helvetica;
    font-weight: 300;
    color: #424b5a;
    font-size: 12px;
    letter-spacing: 0;
    line-height: normal;
    white-space: nowrap;
  }
  
  .login .rectangle {
    position: absolute;
    width: 13px;
    height: 13px;
    top: 0;
    left: 0;
    border: 1px solid;
    border-color: #bbbbbb;
  }
  
  .login .overlap-wrapper {
    position: absolute;
    width: 185px;
    height: 27px;
    top: 304px;
    left: 110px;
  }
  
  .login .div-wrapper {
    position: relative;
    width: 183px;
    height: 27px;
    background-color: #0082ca;
    border-radius: 6px;
  }
  
  .login .text-wrapper-6 {
    position: absolute;
    width: 165px;
    top: 8px;
    left: 9px;
    font-family: "Ubuntu-Bold", Helvetica;
    font-weight: 700;
    color: #ffffff;
    font-size: 12px;
    text-align: center;
    letter-spacing: 0;
    line-height: normal;
  }

  @media only screen and (max-width: 600px) {
    body {
      margin: 0;
      display: flex;
      justify-content: baseline;
      flex-direction: row;
    }

    .background-fondo {
      position: hidden;
      width: 0%;
      height: 0%;
      background-image: url(../img/background-1.png);
      background-size: cover;
    }

    .caja-2 {
      width: 100%;
      height: 100%;
      background-color: #FFF;
    }

    .image {
      display: none;
    }
  }

  @media only screen and (max-width: 1100px) {
    body {
      margin: 0;
      display: flex;
      justify-content: baseline;
      flex-direction: row;
    }

    .background-fondo {
      position: hidden;
      width: 0%;
      height: 0%;
      background-image: url(../img/background-1.png);
      background-size: cover;
    }

    .caja-2 {
      margin-top: 0;
      width: 100%;
      height: 100%;
      background-color: #FFF;
    }

    .image {
      display: none;
    }
  }