body {
  margin: auto;
  font-family: "Barlow";
  font-weight: bold;
}

main {
  position: relative;
  display: flex;
  flex: 1 1;
  width: 100%;
  height: 100%;
  background: url(../images/png/imagen_fondo.png) 50% 100% no-repeat;
  background-size: cover;
  margin: auto;
  overflow: hidden;
}

a {
  text-align: center;
  text-decoration: none;
}

.blanco-container {
  position: relative;
  background: url(../images/png/Group\ 779.png) 30px 30px no-repeat;
  width: 100%;
  height: 100%;
  background-size: 200% calc(100% - 30px);
}

.banderas {
  position: absolute;
  display: flex;
  flex-direction: column;
  width: 100%;
  bottom: 8%;
  margin-left: 20px;
}

.ingresa {
  color: #3d5dff;
  font-size: 18px;
  align-self: center;
  margin-left: 30px;
}

.barra_azul-container {
  background: url(../images/png/barra_azul.png) 0 50% no-repeat;
  background-size: cover;
  height: 150px;
  background-position-y: 0;
}

.logos {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}

.barra_azul-container a {
  display: flex;
  flex-direction: column;
  width: 60px;
  color: white;
}

.barra_azul-container a span {
  display: block;
  margin-top: 10px;
}

.bandera {
  position: relative;
  width: 100%;
  height: 100%;
}

.mujer_celular {
  display: none;
}

@media screen and (min-width: 768px) {
  .blanco-container {
    background-size: 150% calc(100% - 30px);
    background-position-x: 100px;
    background-position-y: 65px;
  }

  .ingresa {
    font-size: 30px;
  }

  .barra_azul-container {
    background-position-y: 0px;
  }
}

@media screen and (min-width: 1024px) {
  .ingresa {
    color: white;
    font-size: 20px;
    align-self: flex-start;
  }

  .blanco-container {
    background-size: 60% calc(100% - 20px);
    background-position-x: 460px;
    background-position-y: 40px;
  }

  .barra_azul-container {
    background-position-y: 0px;
    background-size: 100% 100%;
  }

  .logos {
    padding-left: 20px;
    justify-content: flex-start;
  }

  .logos a {
    width: 60px;
    font-size: 16px;
    margin: 0px 40px;
  }

  .mujer_celular {
    display: block;
    position: absolute;
    width: 45%;
    right: -150px;
    bottom: 0;
  }
}

@media screen and (min-width: 1124px) {
  .ingresa {
    color: white;
    font-size: 20px;
    align-self: flex-start;
  }

  .blanco-container {
    background-position-x: 550px;
  }

  .ingresa {
    padding-left: 85px;
  }

  .logos a {
    width: 60px;
    font-size: 16px;
    padding-left: 50px;
    margin: 0px 40px;
  }

  .mujer_celular {
    width: 35%;
    right: -135px;
    bottom: 0;
  }
}

@media screen and (min-width: 1300px) {
  .blanco-container {
    background-position-x: 615px;
  }
}