/* Section del inicio, Cultura */
.inicio {
  height: 100vh;
  background: url('/assets/img/inicio/FONDO.webp') no-repeat center center fixed;
  background-size: cover;
  position: relative;
  overflow: hidden;
}

/* Contenedor del Eslogan */
.eslogan {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;

  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;

  padding-left: 7%;
  margin-top: 20%;
}

/* Primeras letras del eslogan */
.e_az {
  font-family: var(--fuente-amaranth);
  font-size: 60px;
  font-weight: 900;
  -webkit-text-stroke: 2px var(--color-primario);
  color: var(--color-primario);
  margin: 0;
}

/* Letras amarillas del eslogan */
.e_am {
  font-family: var(--fuente-amaranth);
  font-size: 60px;
  font-weight: 900;
  -webkit-text-stroke: 2px var(--color-amarillo);
  color: var(--color-amarillo);
  margin: 0;
}

/* Contenedor de la agencia */
.agencia {
  display: flex;
  width: 100%;
  position: absolute;
  bottom: 0;
  padding-left: 50%;
  align-items: flex-end;
  z-index: 30;
}

/* Imagen de la Agencia */
.agencia img {
  height: 600px;
  margin: 0;
  padding: 0;
}

/* Contenedor de la letra */
.letra {
  display: flex;
  width: 100%;
  position: absolute;
  bottom: 0;
  padding-left: 50%;
  align-items: flex-end;
  z-index: 20;
}

/* Imagen de la letra */
.letra img {
  height: 600px;
  width: auto;
  margin: 0;
  padding: 0;
}

/* contenedor de imagen identidad */
.identidad_body {
  display: flex;
  position: absolute;
  bottom: 0;
  transform: translateY(50px);
  padding-left: 45%;
  align-items: flex-end;
  z-index: 10;
}

/* imagen identidad */
.identidad_body img {
  width: 100%;
  height: 500px;
  margin: 0;
  padding: 0;

  -webkit-mask-image: linear-gradient(to bottom, black 50%, transparent 100%);
  mask-image: linear-gradient(to bottom, black 50%, transparent 100%);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

/* conetendor de triangulos */
.triangulos {
  display: flex;
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
}

/* Triangulo de lado izquierdo */
.triangulo-izquierda {
  background: var(--color-primario);
  clip-path: polygon(0% 100%, 0% 0%, 100% 100%);
  width: 70%;
  height: 180px;
  z-index: 40;
}

/* Triangulo de lado derecho */
.triangulo-derecha {
  background: var(--color-primario);
  clip-path: polygon(100% 100%, 100% 0%, 0% 100%);
  width: 30%;
  height: 80px;
  margin-top: 100px;
  z-index: 40;
}

@media (max-width: 335px) {

  /* Contenedor del Eslogan */
  .eslogan {
    padding-left: 7%;
    margin-top: 40%;
  }

  /* Priemras letras del eslogan */
  .e_az {
    font-size: 35px;
    font-weight: 900;
  }

  /* Letras amarillas del eslogan */
  .e_am {
    font-size: 35px;
    font-weight: 900;
  }

  /* Contenedor de la agencia */
  .agencia {
    padding-left: 5%;
  }

  /* Imagen de la Agencia */
  .agencia img {
    height: 60vh;
    margin: 0;
    padding: 0;
  }

  /* Contenedor de la letra */
  .letra {
    padding-left: 5%;
  }

  /* Imagen de la letra */
  .letra img {
    height: 65vh;
  }

  /* contenedor de imagen identidad */
  .identidad_body {
    transform: translateY(40px);
    padding-left: 0;
  }

  /* imagen identidad */
  .identidad_body img {
    height: 55vh;
  }

  /* Triangulo de lado izquierdo */
  .triangulo-izquierda {
    width: 70%;
    height: 100px;
  }

  /* Triangulo de lado derecho */
  .triangulo-derecha {
    height: 80px;
    margin-top: 20px;
  }
}

@media (max-width: 361px) and (min-width: 335px) {

  /* Contenedor del Eslogan */
  .eslogan {
    padding-left: 7%;
    margin-top: 40%;
  }

  /* Priemras letras del eslogan */
  .e_az {
    font-size: 40px;
    font-weight: 900;
  }

  /* Letras amarillas del eslogan */
  .e_am {
    font-size: 40px;
    font-weight: 900;
  }

  /* Contenedor de la agencia */
  .agencia {
    padding-left: 5%;
  }

  /* Imagen de la Agencia */
  .agencia img {
    height: 50vh;
    margin: 0;
    padding: 0;
  }

  /* Contenedor de la letra */
  .letra {
    padding-left: 5%;
  }

  /* Imagen de la letra */
  .letra img {
    height: 55vh;
  }

  /* contenedor de imagen identidad */
  .identidad_body {
    transform: translateY(40px);
    padding-left: 0;
  }

  /* imagen identidad */
  .identidad_body img {
    height: 45vh;
  }

  /* Triangulo de lado izquierdo */
  .triangulo-izquierda {
    width: 70%;
    height: 100px;
  }

  /* Triangulo de lado derecho */
  .triangulo-derecha {
    width: 30%;
    height: 80px;
    margin-top: 20px;
  }
}

@media (max-width: 481px) and (min-width: 361px) {

  /* Contenedor del Eslogan */
  .eslogan {
    padding-left: 7%;
    margin-top: 45%;
  }

  /* Priemras letras del eslogan */
  .e_az {
    font-size: 40px;
    font-weight: 900;
  }

  /* Letras amarillas del eslogan */
  .e_am {
    font-size: 40px;
    font-weight: 900;
  }

  /* Contenedor de la agencia */
  .agencia {
    padding-left: 10%;
  }

  /* Imagen de la Agencia */
  .agencia img {
    height: 45vh;
    margin: 0;
    padding: 0;
  }

  /* Contenedor de la letra */
  .letra {
    padding-left: 10%;
  }

  /* Imagen de la letra */
  .letra img {
    height: 50vh;
  }

  /* contenedor de imagen identidad */
  .identidad_body {
    transform: translateY(40px);
    padding-left: 5%;
  }

  /* imagen identidad */
  .identidad_body img {
    height: 40vh;
  }

  /* Triangulo de lado izquierdo */
  .triangulo-izquierda {
    width: 70%;
    height: 140px;
  }

  /* Triangulo de lado derecho */
  .triangulo-derecha {
    width: 30%;
    height: 80px;
    margin-top: 40px;
  }
}

@media (max-width: 701px) and (min-width: 481px) {

  /* Contenedor del Eslogan */
  .eslogan {
    padding-left: 7%;
    margin-top: 25%;
  }

  /* Priemras letras del eslogan */
  .e_az {
    font-size: 50px;
    font-weight: 900;
  }

  /* Letras amarillas del eslogan */
  .e_am {
    font-size: 50px;
    font-weight: 900;
  }

  /* Contenedor de la agencia */
  .agencia {
    padding-left: 30%;
  }

  /* Imagen de la Agencia */
  .agencia img {
    height: 60vh;
    margin: 0;
    padding: 0;
  }

  /* Contenedor de la letra */
  .letra {
    padding-left: 30%;
  }

  /* Imagen de la letra */
  .letra img {
    height: 65vh;
  }

  /* contenedor de imagen identidad */
  .identidad_body {
    transform: translateY(45px);
    padding-left: 20%;
  }

  /* imagen identidad */
  .identidad_body img {
    height: 55vh;
  }

  /* Triangulo de lado izquierdo */
  .triangulo-izquierda {
    width: 70%;
    height: 140px;
  }

  /* Triangulo de lado derecho */
  .triangulo-derecha {
    width: 30%;
    height: 80px;
    margin-top: 40px;
  }
}

@media (max-width: 959px) and (min-width: 701px) {

  /* Contenedor del Eslogan */
  .eslogan {
    padding-left: 7%;
    margin-top: 20%;
  }

  /* Priemras letras del eslogan */
  .e_az {
    font-size: 50px;
    font-weight: 900;
  }

  /* Letras amarillas del eslogan */
  .e_am {
    font-size: 50px;
    font-weight: 900;
  }

  /* Contenedor de la agencia */
  .agencia {
    padding-left: 35%;
  }

  /* Imagen de la Agencia */
  .agencia img {
    height: 50vh;
    margin: 0;
    padding: 0;
  }

  /* Contenedor de la letra */
  .letra {
    padding-left: 35%;
  }

  /* Imagen de la letra */
  .letra img {
    height: 55vh;
  }

  /* contenedor de imagen identidad */
  .identidad_body {
    transform: translateY(50px);
    padding-left: 28%;
  }

  /* imagen identidad */
  .identidad_body img {
    height: 45vh;
  }

  /* Triangulo de lado izquierdo */
  .triangulo-izquierda {
    width: 70%;
    height: 140px;
  }

  /* Triangulo de lado derecho */
  .triangulo-derecha {
    width: 30%;
    height: 80px;
    margin-top: 60px;
  }
}

@media (max-width: 1200px) and (min-width: 959px) {

  /* Contenedor del Eslogan */
  .eslogan {
    padding-left: 7%;
    margin-top: 20%;
  }

  /* Priemras letras del eslogan */
  .e_az {
    font-size: 70px;
    font-weight: 900;
  }

  /* Letras amarillas del eslogan */
  .e_am {
    font-size: 70px;
    font-weight: 900;
  }

  /* Contenedor de la agencia */
  .agencia {
    padding-left: 35%;
  }

  /* Imagen de la Agencia */
  .agencia img {
    height: 60vh;
    margin: 0;
    padding: 0;
  }

  /* Contenedor de la letra */
  .letra {
    padding-left: 35%;
  }

  /* Imagen de la letra */
  .letra img {
    height: 65vh;
  }

  /* contenedor de imagen identidad */
  .identidad_body {
    transform: translateY(60px);
    padding-left: 28%;
  }

  /* imagen identidad */
  .identidad_body img {
    height: 55vh;
  }

  /* Triangulo de lado izquierdo */
  .triangulo-izquierda {
    width: 70%;
    height: 140px;
  }

  /* Triangulo de lado derecho */
  .triangulo-derecha {
    width: 30%;
    height: 80px;
    margin-top: 60px;
  }
}

@media (max-width: 1921px) and (min-width: 1337px) {

  /* Contenedor del Eslogan */
  .eslogan {
    padding-left: 7%;
    margin-top: 15%;
  }

  /* Priemras letras del eslogan */
  .e_az {
    font-size: 90px;
    font-weight: 900;
  }

  /* Letras amarillas del eslogan */
  .e_am {
    font-size: 90px;
    font-weight: 900;
  }

  /* Contenedor de la agencia */
  .agencia {
    padding-left: 50%;
  }

  /* Imagen de la Agencia */
  .agencia img {
    height: 70vh;
    margin: 0;
    padding: 0;
  }

  /* Contenedor de la letra */
  .letra {
    padding-left: 50%;
  }

  /* Imagen de la letra */
  .letra img {
    height: 75vh;
  }

  /* contenedor de imagen identidad */
  .identidad_body {
    transform: translateY(80px);
    padding-left: 43%;
  }

  /* imagen identidad */
  .identidad_body img {
    height: 55vh;
  }
}

@media (max-width: 2700px) and (min-width: 1921px) {

  /* Contenedor del Eslogan */
  .eslogan {
    padding-left: 5%;
    margin-top: 10%;
  }

  /* Priemras letras del eslogan */
  .e_az {
    font-size: 180px;
    font-weight: 900;
  }

  /* Letras amarillas del eslogan */
  .e_am {
    font-size: 180px;
    font-weight: 900;
  }

  /* Contenedor de la agencia */
  .agencia {
    padding-left: 60%;
  }

  /* Imagen de la Agencia */
  .agencia img {
    height: 70vh;
    margin: 0;
    padding: 0;
  }

  /* Contenedor de la letra */
  .letra {
    padding-left: 60%;
  }

  /* Imagen de la letra */
  .letra img {
    height: 75vh;
  }

  /* contenedor de imagen identidad */
  .identidad_body {
    transform: translateY(120px);
    padding-left: 53%;
  }

  /* imagen identidad */
  .identidad_body img {
    height: 55vh;
  }
}