body {
  background: linear-gradient(
      to top,
      rgba(30, 35, 38, 0.8),
      rgba(30, 35, 38, 1)
    ),
    url(../img/temas/seguridad-bogota.jpg);
  background-size: cover;
  height: 100%;
  background-color: #333;
  font-family: "Alata", sans-serif;
  margin: 0;
  padding: 20px 20px;
  overflow-x: hidden;
  zoom: 1.5;
}

.storytelling h2 {
  color: #ffffff;
  font-family: "Alata", sans-serif;
  font-size: 40px;
  font-style: italic;
  text-align: center;
  margin-bottom: 20px;
}

.story img.imagen-centro {
  display: block;
  margin: 0 auto;
  max-width: 100%;
}

.story .parrafo-centro p {
  text-align: justify;
  margin: 30px;
  color: #ffffff;
  font-size: 20px;
}

.columna-izquierda img {
  margin: 30px;
  width: 90%;
}

.parrafos-derecha {
  text-align: justify;
  font-size: 20px;
  overflow: hidden;
  color: #ffffff;
  margin: 30px;
}

.columna-derecha img {
  margin: 30px;
  width: 100%;
}

.parrafos-izquierda {
  text-align: justify;
  font-size: 20px;
  overflow: hidden;
  color: #ffffff;
  margin: 30px;
}

.parrafos-izquierda a {
  text-decoration: none;
  color: #4169e1;
  font-weight: bold;
}

.parrafo-centro a {
  text-decoration: none;
  color: #4169e1;
  font-weight: bold;
}

.info p {
  text-align: justify;
  margin: 30px;
  color: #ffffff;
  font-size: 20px;
}

.info h3 {
  text-align: center;
  color: #ffffff;
}

.info h3 a {
  text-decoration: none;
  color: #ffffff;
  font-size: 30px;
}

.info h3 a:hover {
  color: #4169e1;
}

.volver h2 {
  margin: 30px;
}

.volver h2 a {
  text-decoration: none;
  font-size: 30px;
  color: #fff;
}

.volver h2 a:hover {
  color: #4169e1;
}

/*====================== responsive =============*/


@media screen and (min-width: 1001px) {

  .columna-izquierda img{
    float: left;
    width: 40%;
  }

  .parrafos-derecha p{
    float: right;
    width: 100%;
  }
  .columna-derecha img{
    float: right;
    width: 40%;
  }

  .parrafos-izquierda p{
    float: left;
    width: 100%;
  }
}

@media screen and (max-width: 1000px) {

  .columna-izquierda,
  .parrafos-derecha {
    width: 60vw;
    margin-left: auto;
    text-align: justify;
    font-size: 80%;
  }

  .columna-izquierda img {
    display: block; /* Asegura que la imagen sea un bloque */
    margin: 0 auto; /* Centra la imagen horizontalmente */
    max-width: 100%; /* Ajusta el ancho máximo de la imagen */
  }
  .columna-derecha,
  .parrafos-izquierda {
    width: 60vw;
    margin-left: auto;
    text-align: justify;
    font-size: 80%;
    text-align: justify;
  }

  .columna-derecha img {
    display: block; /* Asegura que la imagen sea un bloque */
    margin: 0 auto; /* Centra la imagen horizontalmente */
    max-width: 100%; /* Ajusta el ancho máximo de la imagen */
  }
  .story img.imagen-centro {
    display: block;
    max-width: 100%;
  }
  
  .story .parrafo-centro p {
    width: 60vw;
    margin-left: auto;
    text-align: justify;
    font-size: 80%;
    text-align: justify;
  }
  .info p {
    width: 60vw;
    margin-left: auto;
    text-align: justify;
    font-size: 100%;
    text-align: justify;
  }
  
  .info h3 {
    text-align: center;
    color: #ffffff;
  }
  .info h3 a {
    text-decoration: none;
    color: #ffffff;
    font-size: 100%;
  }
 
  
  .volver h2 a {
    font-size: 60%;
    color: #fff;
  }

}