/*==========================================================================================================================================
  Desarrollador: Angélica María Rodríguez Cabello
  Estilos para la sección Espacio Público
==========================================================================================================================================*/

/* Contenedor del banner de Espacio público */
.espacio-publico-banner-container {
  position: relative;
  text-align: center;
}

/* Imagen del banner de Espacio Público */
#banner-espacio-publico {
  width: 100%;
  height: 320px;
  object-fit: cover;
}

/* Agregar cursor a los links que no tienen subrayado */
.sin-subrayar:hover {
  cursor: pointer;
}

/* Contenedor para todo */
.general-container {
  width: 1160px;
  display:-ms-grid;
  display: grid;
  -ms-grid-columns: 860px 300px;
  grid-template-columns: 860px 300px;
  height: auto;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
  padding: 60px 0px;
}

/* Área donde aparecerán las noticias de Espacio Público */
.left-container {
  width: 860px;
  display:-ms-grid;
  display: grid;
  -ms-grid-columns: 430px 430px;
  grid-template-columns: 430px 430px;
  height: auto;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
}

/* Distribución de los elementos */
#img-articulo-1 { -ms-grid-row: 1; -ms-grid-column: 1; grid-column: 1 / span 2; -ms-grid-column-span: 2; }
#titulo-etiqueta { -ms-grid-row: 2; -ms-grid-column: 1; grid-column: 1 / span 2; -ms-grid-column-span: 2; width: 100%; padding-left: 25px; }
#resultados-no-encontrados { -ms-grid-row: 3; -ms-grid-column: 1; grid-column: 1 / span 2; -ms-grid-column-span: 2; width: 100%; padding-left: 25px; }
#fr1 { -ms-grid-row: 4; -ms-grid-column: 1; }
#fr2 { -ms-grid-row: 5; -ms-grid-column: 2; }
#fr3 { -ms-grid-row: 6; -ms-grid-column: 1; }

#dr1 { -ms-grid-row: 4; -ms-grid-column: 2; }
#dr2 { -ms-grid-row: 5; -ms-grid-column: 1; }
#dr3 { -ms-grid-row: 6; -ms-grid-column: 2; }

/* Contenedor de las páginas */
.pagination-control { -ms-grid-row: 7; -ms-grid-column: 1; grid-column: 1 / span 2; -ms-grid-column-span: 2; padding-top: 60px; }

/* Cada botón de cada página */
#l-l { -ms-grid-row: 1; -ms-grid-column: 1; }
#l-1 { -ms-grid-row: 1; -ms-grid-column: 2; }
#l-2 { -ms-grid-row: 1; -ms-grid-column: 3; }
#l-3 { -ms-grid-row: 1; -ms-grid-column: 4; }
#l-4 { -ms-grid-row: 1; -ms-grid-column: 5; }
#l-r { -ms-grid-row: 1; -ms-grid-column: 6; }

/* Descripción de cada noticia */
.descripcion-seccion-revista {
  padding: 20px;
}

/* Área de suscribirse para recibir las úlimas publicaciones */
.suscripcion {
  padding: 5px 0px;
  text-align: center;
}

/* Línea negra que se ve arriba de cada noticia */
.border-top-black {
  border-top: 10px solid black;
  width: 60px;
}

/* Cada div de noticias */
.noticias-inicio > div {
  padding-left: 30px;
}

/* Fotos de portada de las revistas */
.fotos-seccion-revista {
  width: 410px;
  height: 360px;
  object-fit: cover;
  padding: 20px;
}

/* Línea negra que aparece a la derecha de una noticia */
.dr2bb {
  position: relative;
  right: -82%;
}

/* Imagen del artículo que aparece arriba */
#img-articulo-1 {
  height: 450px;
  padding-bottom: 50px;
}

/* Sección del primer artículo */
#art1 {
  width: 97%;
  height: 80%;
  object-fit: cover;
}

/* Agregamos efecto cuando pasemos el mouse por un link */
a:hover {
  opacity: 0.5;
}

/* Estilos de las etiquetas */
.titulo-etiquetas { width: 100%; }

/* Contenedor de la derecha donde aparecen las etiquetas y las revistas */
.right-container {
  width: 300px;
  display:-ms-grid;
  display: grid;
  -ms-grid-columns: 300px;
  grid-template-columns: 300px;
  height: auto;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
}

/* Distribución de los contenedores */
.left-container { -ms-grid-row: 1; -ms-grid-column: 1; }
.right-container { -ms-grid-row: 1; -ms-grid-column: 2; }
.etiquetas { -ms-grid-row: 1; -ms-grid-column: 1; }
#blog { -ms-grid-row: 2; -ms-grid-column: 1; padding-top: 30px; }
.archivo { -ms-grid-row: 3; -ms-grid-column: 1; }

/* Estilo del botón de suscripción */
#boton-suscripcion {
  background-color: #01835F;
  color: white;
  border: none;
  outline: none;
  padding: 5px;
}

/* Estilo del botón de suscripción */
#boton-suscripcion:hover {
  cursor: pointer;
  opacity: 0.5;
}

/* Estilos de las etiquetas */
.etiquetas {
  display: flex;
  flex-wrap: wrap;
}

/* Agregamos padding a cada etiqueta */
.titulo-etiquetas {
  padding-left: 18px;
}

/* Agregamos estilos a cada etiqueta */
.etiqueta {
  background-color: lightgray;
  height: auto;
  margin: 10px;
  text-align: center;
  line-height: 20px;
  font-size: 15px;
}

/* Agregamos efecto al pasar el mouse por cada etiqueta */
.etiqueta:hover {
  cursor: pointer;
  opacity: 0.5;
}

/* Agregamos estilo al título del archivo */
.titulo-archivo {
  padding-top: 30px;
}

/* Portada de la revista */
.revista-archivo-img {
  width: 140px;
}

/* Área de las revistas de la derecha */
.revistas-derecha {
  padding-top: 15px;
}

/* Área donde aparecerán las revistas */
.revistas-scroll {
  width: 250px;
  margin: 0 auto;
  border: 2px solid lightgray;
  height: 1500px;
  overflow: auto;
}

/* Distribución de los números de las páginas */
.pagination-control {
  width: 450px;
  display:-ms-grid;
  display: grid;
  -ms-grid-columns: 75px 75px 75px 75px 75px 75px;
  grid-template-columns: 75px 75px 75px 75px 75px 75px;
  height: auto;
  margin: 0 auto;
  position: relative;
}

/* Agregamos padding a cada página */
.pagination-control > div {
  padding: 5px;
}

/* Cambiamos de color la página */
.num-bg-green {
  background-color: #01835F;
  color: white;
}

/* Cambiamos de color el background de las flechas de paginación */
.right-arrow, .left-arrow {
  background-color: #daf1e6;
}

/* Quitamos subrayado a cada link de las revistas */
.link-revista {
  text-decoration: none;
}

/* Quitamos efecto de link a un link para simular que está deshabilitado */
.disabled-link {
  cursor: default;
}

/* Tablets */
@media only screen and (max-width: 1270px) {
  /* Área que contiene el banner de Espacio Público */
  #banner-espacio-publico {
    height: 200px;
  }

  /* Contenedor donde aparece todo */
  .general-container {
    width: 582px;
    display:-ms-grid;
    display: grid;
    -ms-grid-columns: 582px;
    grid-template-columns: 582px;
  }

  /* Distribución del contenedor de la izquierda y del de la derecha */
  .left-container, .right-container {
    width: 582px;
    -ms-grid-columns: 582px;
    grid-template-columns: 582px;
  }

  /* Asignamos cantidad de columnas al contenedor de la izquierda */
  .left-container {
    -ms-grid-columns: 200px 382px;
    grid-template-columns: 200px 382px;
  }

  /* Asignamos la distrubución de cada contenedor */
  .left-container { -ms-grid-row: 2; -ms-grid-column: 1; grid-row: 2; grid-column: 1; }
  .right-container { -ms-grid-row: 1; -ms-grid-column: 1; grid-row: 1; grid-column: 1; }

  /* Agregamos estilo al área de las revistas */
  .revistas-scroll {
    width: 582px;
    margin: 0 auto;
    border: 2px solid lightgray;
    height: 400px;
    overflow: auto;
  }

  /* Contenedor para las revistas */
  .archivo {
    padding-bottom: 30px;
  }

  /* Título ARCHIVO */
  .titulo-archivo {
    text-align: left;
    padding-left: 20px;
  }

  /* Imagen del primer artículo */
  #art1 {
    width: 582px;
    height: 320px;
  }

  /* Posición de los elementos */

  #img-articulo-1 { -ms-grid-row: 1; -ms-grid-column: 1; grid-column: 1 / span 2; -ms-grid-column-span: 2; }
  #titulo-etiqueta { -ms-grid-row: 2; -ms-grid-column: 1; grid-column: 1 / span 2; -ms-grid-column-span: 2; width: 100%; padding-left: 25px; }
  #resultados-no-encontrados { -ms-grid-row: 3; -ms-grid-column: 1; grid-column: 1 / span 2; -ms-grid-column-span: 2; width: 100%; padding-left: 25px; }
  #fr1 { -ms-grid-row: 4; -ms-grid-column: 1; grid-row: 4; grid-column: 1; }
  #fr2 { -ms-grid-row: 5; -ms-grid-column: 1; grid-row: 5; grid-column: 1; }
  #fr3 { -ms-grid-row: 6; -ms-grid-column: 1; grid-row: 6; grid-column: 1; }

  #dr1 { -ms-grid-row: 4; -ms-grid-column: 2; grid-row: 4; grid-column: 2; }
  #dr2 { -ms-grid-row: 5; -ms-grid-column: 2; grid-row: 5; grid-column: 2; text-align: left; }
  #dr3 { -ms-grid-row: 6; -ms-grid-column: 2; grid-row: 6; grid-column: 2; }

  /* Posición de la línea negra encima de cada noticia */
  .dr2bb {
    position: relative;
    right: 0%;
   }

   /* Padding de la sección de revistas */
  .fotos-seccion-revista-div {
    padding: 50px 0px;
  }

  /* Fotos de la sección revista */
  .fotos-seccion-revista {
    width: 200px;
    height: 200px;
  }

  /* Cambiamos estilos de la letra */
  .bp-31px-charcoal {
    font-size: 25px;
    line-height: 25px;
  }

  /* Área de suscripción */
  #blog {
    padding: 20px 10px;
    text-align: center;
  }

  /* Posicionamos contenedor de las páginas */
  .pagination-control { width: 582px; -ms-grid-row: 6; -ms-grid-column: 1; grid-column: 1 / span 6; -ms-grid-column-span: 6; }

  /* Asignamos tamaño a cada página */
  .pagination-control {
    -ms-grid-columns: 97px 97px 97px 97px 97px 97px;
    grid-template-columns: 97px 97px 97px 97px 97px 97px;
    margin: 0 auto;
    text-align: center;
  }
}

/* Celulares */
@media only screen and (max-width: 615px) {
  /* Área donde irá el banner de espacio público */
  #banner-espacio-publico {
    height: 150px;
  }

  /* Contenedor que tendrá todo */
  .general-container {
    width: 290px;
    display:-ms-grid;
    display: grid;
    -ms-grid-columns: 290px;
    grid-template-columns: 290px;
  }

  /* Contenedor de la izquierda y de la derecha */
  .left-container, .right-container {
    width: 290px;
    -ms-grid-columns: 290px;
    grid-template-columns: 290px;
  }

  /* Contenedor donde se mostrarán las noticias */
  .left-container {
    -ms-grid-columns: 290px;
    grid-template-columns: 290px;
  }

  /* Posicionamos los contenedores */
  .left-container { -ms-grid-row: 2; -ms-grid-column: 1; grid-row: 2; grid-column: 1; }
  .right-container { -ms-grid-row: 1; -ms-grid-column: 1; grid-row: 1; grid-column: 1; }

  /* Cambiamos estilos a los títulos de las etiquetas */
  .titulo-etiquetas { width: 100%; }

  /* Contenedor donde irán las revistas */
  .revistas-scroll {
    width: 290px;
    margin: 0 auto;
    border: 2px solid lightgray;
    height: 400px;
    overflow: auto;
  }

  /* Padding de las fotos de la sección de revista */
  .fotos-seccion-revista-div {
    padding: 20px 0px;
  }

  /* Medidas de las fotos del área de revista */
  .fotos-seccion-revista {
    width: 290px;
    height: 290px;
    padding: 0px;
  }

  /* Quitamos padding al área de la descripción de la sección de revista */
  .descripcion-seccion-revista {
    padding: 0px;
  }

  /* Área donde irán las revistas */
  .archivo {
    padding-bottom: 30px;
  }

  /* Título ARCHIVO */
  .titulo-archivo {
    text-align: left;
    padding-left: 20px;
  }

  /* Medidas de la foto del primer artículo */
  #art1 {
    width: 290px;
    height: 130px;
  }

  /* Posicionamos todos los elementos */
  #img-articulo-1 { -ms-grid-row: 1; -ms-grid-column: 1; grid-row: 1; grid-column: 1;  height: 200px; }
  #titulo-etiqueta { -ms-grid-row: 2; -ms-grid-column: 1; grid-row: 2; grid-column: 1; padding-left: 10px; height: 30px; }
  #resultados-no-encontrados { -ms-grid-row: 3; -ms-grid-column: 1; grid-row: 3; grid-column: 1; padding-left: 10px; height: 30px; }
  #fr1 { -ms-grid-row: 4; grid-row: 4; -ms-grid-column: 1; grid-column: 1; }
  #fr2 { -ms-grid-row: 6; grid-row: 6; -ms-grid-column: 1; grid-column: 1; }
  #fr3 { -ms-grid-row: 8; grid-row: 8; -ms-grid-column: 1; grid-column: 1; }
  #dr1 { -ms-grid-row: 5; grid-row: 5; -ms-grid-column: 1; grid-column: 1; text-align: left; }
  #dr2 { -ms-grid-row: 7; grid-row: 7; -ms-grid-column: 1; grid-column: 1; }
  #dr3 { -ms-grid-row: 9; grid-row: 9; -ms-grid-column: 1; grid-column: 1; }

  /* Mandamos a la izquierda todas las líneas negras arriba de cada noticia */
  .dr2bb {
    position: relative;
    right: 0%;
  }

  /* Posicionamos área de paginador */
  .pagination-control { width: 290px; -ms-grid-row: 8; -ms-grid-column: 1; grid-column: 1 / span 6; -ms-grid-column-span: 6; }

  /* Asignamos tamño a cada página */
  .pagination-control {
    -ms-grid-columns: 48px 48px 48px 48px 48px 48px;
    grid-template-columns: 48px 48px 48px 48px 48px 48px;
    margin: 0 auto;
    text-align: center;
  }

  /* Cambiamos estilos de la letra */
  .bp-31px-charcoal {
    font-size: 17px;
    line-height: 17px;
  }
}