.title {
  display: relative;
}

.overlay {
  position: relative;
  opacity: 1;
  top: 0;
  left: 50vw;
  width: 100%;
  z-index: 2;
  color: grey;
}

.simple_title {
  background-color: rgb(167, 133, 133, 0.2);
  height: 8em;
}

.simple_overlay {
  text-align: center;
}

.joseluiscontainer {
  display: flex;
  margin: 0;
  justify-content: center;
  flex-direction: column;
}

.light-container {
  background-color: white;
}

.dark-container {
  background-color: #ededed;
}

.grid_obra {
  display: grid;
  grid-template-columns: 35vw 35vw;
  grid-template-rows: 1;
  gap: 2em;
  justify-content: center;
  margin: 4em 0em;
}

.card {
  display: block;
  background-position: center;
  background-size: contain;
  background-color: white;
}

.item {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 0;
}

img {
    transition-property: fade-in;
    transition-timing-function: ease;
    transition-duration: 1.5s;
    transition-delay: 0.220213s;
}

.acuarela {
  object-fit: contain;
  width: 95%;

}

@keyframes fade-in {
  0% { opacity: 0; }
  50% { opacity: 0; }
  90% { opacity: 0.5; }
  100% { opacity: 1; }
}

.small {
  font-size: small;
}

.artist_container {
  display: flex;
  flex-direction: row;
  align-content: center;
  align-items: center;
  padding: 2% 2% 2% 0%;
}

.artist_text {
  width: 60%;
  font-size: 1.3rem;
}

.main_text_container p {
  font-size: 1.2rem;
}

.text_center {
  justify-content: center;
}

.fotoArtista {
  background: url("images/artista/JL.jpg") no-repeat center;
  width: 50%;
  height: 70vh;
  padding: 0%;
  align-content: center;
  background-size: contain;
  margin: auto;
  margin: 1% 4%;
}

.obra {
  display: flex;
  justify-content: center;
  height: 60vh;
  width: 100%;
}


.obra_oleos {
  display: flex;
  justify-content: center;
  /*height: 100vh;*/
  width: 100%;
  object-fit: contain;
  height: 700px;
  margin-bottom: 30px;
}

.obra_escultura {
  display: flex;
  justify-content: center;
  align-content: space-evenly;
  height: 30vh;
  width: 100%;
  object-fit: contain;
  padding: 0% 5%;
}

#mural {
  height: 20%;
  z-index: 5;
  background-repeat: no-repeat;
  background-size: cover;
  width: 90%;
  padding-left: 5%;
}

#escultura1 {
  z-index: 4;
  animation: fade1 15s infinite;
  background: url("images/escultura/Arbol Hermetico.jpg");
  background-repeat: no-repeat;
  background-size: contain;
  object-fit: contain;
  text-align: center;
  margin: auto;
  width: 30%;
}

#escultura2 {
  z-index: 2;
  animation: fade2 15s infinite;
  background: url("images/escultura/Lucia.jpg");
  background-repeat: no-repeat;
  background-size: contain;
  object-fit: contain;
  text-align: center;
  margin: auto;
  width: 30%;
}

#escultura3 {
  z-index: 5;
  animation: fade3 15s infinite;
  background: url("images/escultura/Totem azul de tres puntas.jpg");
  background-repeat: no-repeat;
  background-size: contain;
  object-fit: contain;
  text-align: center;
  margin: auto;
  width: 30%;
}


@keyframes fade1 {
  5%, 32% {
    opacity: 1;
  }

  0%, 36%, 50%, 60%, 100%{
    opacity: 0;
  }
}

@keyframes fade2 {
  38%, 65% {
    opacity: 1;
  }

  0%, 25%, 30%, 66%, 100%{
    opacity: 0;
  }
}


@keyframes fade3 {
  69%, 98% {
    opacity: 1;
  }

  0%, 25%, 32%, 64%, 100%{
    opacity: 0;
  }
}


@media (max-width: 800px) {
  .artist_container {
    display: block;
    padding: 1% 1% 1% 1%;

  }
  .fotoArtista {
    margin: auto;
    width: 85%;
  }

  .artist_text {
    display: flex;
    width: 90%;
    flex-direction: column;
    margin: 0px 20px;
  }

  .joseluiscontainer {
    display: flex;
    margin: 0;
  }

  .grid_obra{
    grid-template-columns: 80vw;
    gap: 6em;
    justify-content: center;
    margin: 4em 0em;
  }

  h1 {
    font-size: 2rem;
  }

}