/*==========================================================================================================================================
  Desarrollador: Angélica María Rodríguez Cabello
  Estilos para la pantalla de la sección NOTICIAS
==========================================================================================================================================*/

/* Contenedor del banner de noticias */
.noticias-banner-container {
  width: 100%;
  position: relative;
  text-align: center;
  color: white;
}

/* Identficador de la imagen del banner de noticias */
#banner-noticias {
  width: 100%;
  height: 320px;
  object-fit: cover;
}

/* Agregamos efecto al pasar el mouse por cada imagen de cada noticia nacional */
#lni1:hover, #imagen-segunda-noticia:hover, #imagen-tercera-noticia:hover {
  opacity: 0.7;
}

/* Agregamos efecto al pasar el mouse por las imágenes de noticias internacionales */
#imagen-internacional:hover, #ini2:hover, #ini3:hover {
  opacity: 0.7;
}

/* Hr de las entradas recientes */
.color-hr {
  height: 2px;
  color: gray;
  background-color: lightgray;
  border: none;
}

/* Clase para las imágenes de los artículos que irán a la derecha del artículo */
.img-art-derecha {
  width: 100px;
  height: 100px;
  object-fit: cover;
}

/* Flechas de paginador */
.arrows-pag {
  text-align: right;
}

/* Botón de flechas de paginador */
.arrow-btn {
  background-color: white;
  border: 2px solid gray;
  color: gray;
  padding: 7px 14px;
  outline: none;
}

/* Agregamos efecto al pasar el mouse por cada flecha del paginador */
.arrow-btn:hover {
  cursor: pointer;
  opacity: 0.7;
}

/* Centramos el texto del banner */
.centered-text {
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 20px;
  border-bottom: 4px solid white;
  width: 500px;
}

/* Segunda línea del subrayado del título del banner */
.second-underline {
  position: absolute;
  top: 54%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-bottom: 8px solid white;
  width: 160px;
}

/* Contenedor que tendrá todas las noticias */
.container-central {
  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;
}

/* Posicionamos la columna de la izquierda y la de la derecha */
.noticias-left { -ms-grid-row: 1; -ms-grid-column: 1; }
.noticias-right { -ms-grid-row: 1; -ms-grid-column: 2; padding-left: 50px; }

/* Trazamos cuadrícula de la columna de la izquierda */
.noticias-left {
  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;
}

/* Asignamos tamaño a cada imagen de cada noticia */
.fotografia-noticia {
  width: 390px;
  height: 330px;
  padding-top: 60px;
}

/* Padding de las imágenes de los artículos de la derecha */
.img-padding {
  padding-bottom: 10px;
}

/* Asignamos tamaño a la imagen de la primer noticia nacional e internacional */
#imagen-primer-noticia, #imagen-internacional {
  width: 100%;
  height: 500px;
}

/* Posicionamos elementos de la columna de la izquierda */
#titulo-noticias { -ms-grid-row: 1; -ms-grid-column: 1; grid-column: 1 / span 2; -ms-grid-column-span: 2; padding-bottom: 40px; }
#primer-noticia { -ms-grid-row: 2; -ms-grid-column: 1; grid-column: 1 / span 2; -ms-grid-column-span: 2; }
#titulo-primer-noticia { -ms-grid-row: 3; -ms-grid-column: 1; grid-column: 1 / span 2; -ms-grid-column-span: 2; }
#descripcion-primer-noticia { -ms-grid-row: 4; -ms-grid-column: 1; grid-column: 1 / span 2; -ms-grid-column-span: 2; }
#segunda-noticia-foto { -ms-grid-row: 5; -ms-grid-column: 1; padding-right: 40px; }
#tercera-noticia-foto { -ms-grid-row: 5; -ms-grid-column: 2; padding-left: 40px; }
#segunda-noticia-titulo { -ms-grid-row: 6; -ms-grid-column: 1; padding-right: 40px; padding-top: 30px; }
#tercera-noticia-titulo { -ms-grid-row: 6; -ms-grid-column: 2; padding-left: 40px; padding-top: 30px; }
#arrows { -ms-grid-row: 7; -ms-grid-column: 1; grid-column: 1 / span 2; -ms-grid-column-span: 2; padding-top: 20px; }
#titulo-noticias-internacionales { -ms-grid-row: 8; -ms-grid-column: 1; grid-column: 1 / span 2; -ms-grid-column-span: 2; padding: 40px 0px; }
#imagen-noticias-internacionales { -ms-grid-row: 9; -ms-grid-column: 1; grid-column: 1 / span 2; -ms-grid-column-span: 2; padding-bottom: 40px; }
#descripcion-noticias-internacionales { -ms-grid-row: 10; -ms-grid-column: 1; grid-column: 1 / span 2; -ms-grid-column-span: 2; }
#internacional-uno-noticia-foto { -ms-grid-row: 11; -ms-grid-column: 1; padding-right: 40px; }
#internacional-dos-noticia-foto { -ms-grid-row: 11; -ms-grid-column: 2; padding-left: 40px; }
#internacional-uno-noticia-titulo { -ms-grid-row: 12; -ms-grid-column: 1; padding-right: 40px; padding-top: 30px; }
#internacional-dos-noticia-titulo { -ms-grid-row: 12; -ms-grid-column: 2; padding-left: 40px; padding-top: 30px; }
#arrows-internacional { -ms-grid-row: 13; -ms-grid-column: 1; grid-column: 1 /span 2; -ms-grid-column-span: 2; padding-top: 20px; }

/* Posicionamos elementos de la columna de la derecha */
#titulo-entradas-recientes { -ms-grid-row: 1; -ms-grid-column: 1; }
#tabla-entradas-recientes { -ms-grid-row: 2; -ms-grid-column: 1; }
#titulo-archivo { -ms-grid-row: 3; -ms-grid-column: 1; }
#tabla-meses { -ms-grid-row: 4; -ms-grid-column: 1; }
#vacio { -ms-grid-row: 5; -ms-grid-column: 1; height: 830px; }

/* Agregamos estilo a la tabla de meses */
table, th, td {
  border-collapse: collapse;
  border: 3px solid lightgray;
  width: 100%;
}

/* Agregamos estilo a cada celda de la tabla de meses */
td {
  padding: 10px;
  color: #303030;
  font-weight: bold;
}

/* Quitamos subrayado a los links para ver las noticias */
.link-noticia {
  text-decoration: none;
}

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

  /* Tablets */
@media only screen and (max-width: 1270px) {
  /* Contenedor del banner de noticias e imagen del contenedor */
  #banner-noticias, .noticias-banner-container {
    width: 100%;
    height: 200px;
    object-fit: cover;
  }

  /* Acomodamos el texto del banner */
  .centered-text {
    top: 35%;
    width: 300px;
  }

  /* Segunda línea del subrayado del título del banner */
  .second-underline {
    top: 57%;
    width: 100px;
  }

  /* Contenedor que tendrá todas las noticias */
  .container-central {
    width: 582px;
    -ms-grid-columns: 291px 291px;
    grid-template-columns: 291px 291px;
  }

  /* Trazamos cuadrícula de la columna de la izquierda */
  .noticias-left {
    width: 582px;
    -ms-grid-columns: 291px 291px;
    grid-template-columns: 291px 291px;
  }

  /* Contenedor de ARCHIVO */
  .noticias-right {
    width: 582px;
    -ms-grid-columns: 291px;
    grid-template-columns: 291px;
  }

  /* Posicionamos columna de la izquierda y de la derecha */
  .noticias-left { -ms-grid-row: 1; -ms-grid-column: 1; -ms-grid-column-span: 2; grid-column: 1 / span 2; }
  .noticias-right { -ms-grid-row: 2; -ms-grid-column: 1; padding-left: 50px;  -ms-grid-column-span: 2; grid-column: 1 / span 2; padding: 0px; }

  /* Asignamos tamaño a la imagen de la primer noticia nacional e internacional */
  #imagen-primer-noticia, #imagen-internacional {
    width: 100%;
    height: 300px;
  }

  /* Asignamos tamaño a cada imagen de cada noticia */
  .fotografia-noticia {
    width: 100%;
    height: 200px;
    padding-top: 60px;
  }

  /* Posicionamos elementos de la columna de la derecha */
  #titulo-entradas-recientes { -ms-grid-row: 1; -ms-grid-column: 1; -ms-grid-column-span: 2; grid-column: 1 / span 2; padding: 0px;}
  #tabla-entradas-recientes { -ms-grid-row: 2; -ms-grid-column: 1; -ms-grid-column-span: 2; grid-column: 1 / span 2; }
  #titulo-archivo { -ms-grid-row: 3; -ms-grid-column: 1; -ms-grid-column-span: 2; grid-column: 1 / span 2; }
  #tabla-meses { -ms-grid-row: 4; -ms-grid-column: 1; -ms-grid-column-span: 2; grid-column: 1 / span 2; }
  #vacio { -ms-grid-row: 5; -ms-grid-column: 1; height: 0px; -ms-grid-column-span: 2; grid-column: 1 / span 2; }

  /* Asignamos tamaño a la tabla de ENTRADAS RECIENTES y ARCHIVO */
  #tbl-uno, #tbl-dos {
    width: 100%;
  }

  /* Noticias que aparecerán a la derecha */
  #tabla-entradas-recientes {
    width: 582px;
    padding-left: 10px;
  }

  /* Estilos de la columna de la derecha */
  .img-padding {  width: 25%; height: 120px; float: left; padding-left: 10px; }
  .titulo-entrada-reciente { width: 75%; height: 120px; float: right; padding: 30px 0; }

  /* Línea gris debajo de cada entrada reciente */
  .hr {
    padding-top: 100px;
  }

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

  /* Celulares */
@media only screen and (max-width: 615px) {
  /* Contenedor del banner de noticias e imagen del contenedor */
  #banner-noticias, .noticias-banner-container {
    width: 100%;
    height: 150px;
    object-fit: cover;
  }

  /* Cambiamos tamaño de letra */
  .bp-31px-charcoal {
    font-size: 20px;
  }

  /* Acomodamos el texto del banner */
  .centered-text {
    top: 35%;
    width: 230px;
  }

  /* Segunda línea del subrayado del título del banner */
  .second-underline {
    top: 63%;
    width: 100px;
  }

  /* Contenedor que tendrá todas las noticias */
  .container-central {
    width: 90%;
    -ms-grid-columns: 100%;
    grid-template-columns: 100%;
  }

  /* Trazamos cuadrícula de la columna de la izquierda */
  .noticias-left {
    width: 90%;
    -ms-grid-columns: 100%;
    grid-template-columns: 100%;
  }

  /* Contenedor de ARCHIVO */
  .noticias-right {
    width: 90%;
    -ms-grid-columns: 100%;
    grid-template-columns: 100%;
    margin: 0 auto;
  }

  /* Posicionamos columna de la izquierda y de la derecha */
  .noticias-left { -ms-grid-row: 1; -ms-grid-column: 1; -ms-grid-column-span: 2; grid-column: 1 / span 2; }
  .noticias-right { -ms-grid-row: 2; -ms-grid-column: 1; padding-left: 50px;  -ms-grid-column-span: 2; grid-column: 1 / span 2; padding: 0px; }

  /* Posicionamos elementos de la columna de la izquierda*/
  #titulo-noticias { -ms-grid-row: 1; -ms-grid-column: 1; grid-column: 1 / span 1; -ms-grid-column-span: 1; padding-bottom: 40px; }
  #primer-noticia { -ms-grid-row: 2; -ms-grid-column: 1; grid-column: 1 / span 1; -ms-grid-column-span: 1; }
  #titulo-primer-noticia { -ms-grid-row: 3; -ms-grid-column: 1; grid-column: 1 / span 1; -ms-grid-column-span: 1; }
  #descripcion-primer-noticia { -ms-grid-row: 4; -ms-grid-column: 1; grid-column: 1 / span 1; -ms-grid-column-span: 1; }
  #segunda-noticia-foto { -ms-grid-row: 5; -ms-grid-column: 1; grid-row: 5; padding-right: 0px; grid-column: 1 / span 1; -ms-grid-column-span: 1;}
  #tercera-noticia-foto { -ms-grid-row: 7; -ms-grid-column: 1; grid-row: 7; padding-left: 0px; grid-column: 1 / span 1; -ms-grid-column-span: 1;}
  #segunda-noticia-titulo { -ms-grid-row: 6; -ms-grid-column: 1; grid-row: 6; padding-right: 0px; padding-top: 30px; grid-column: 1 / span 1; -ms-grid-column-span: 1; }
  #tercera-noticia-titulo { -ms-grid-row: 8; -ms-grid-column: 1; grid-row: 8; padding-left: 0px; padding-top: 30px; grid-column: 1 / span 1; -ms-grid-column-span: 1; }
  #arrows { -ms-grid-row: 9; -ms-grid-column: 1; grid-row: 9; grid-column: 1 / span 1; -ms-grid-column-span: 1; }
  #titulo-noticias-internacionales { -ms-grid-row: 10; -ms-grid-column: 1; grid-column: 1 / span 1; -ms-grid-column-span: 1; padding: 40px 0px; }
  #imagen-noticias-internacionales { -ms-grid-row: 11; -ms-grid-column: 1; grid-column: 1 / span 1; -ms-grid-column-span: 1; padding-bottom: 40px; }
  #descripcion-noticias-internacionales { -ms-grid-row: 12; -ms-grid-column: 1; grid-column: 1 / span 1; -ms-grid-column-span: 1; }
  #internacional-uno-noticia-foto { -ms-grid-row: 13; -ms-grid-column: 1; grid-row: 13; padding-right: 0px; }
  #internacional-dos-noticia-foto { -ms-grid-row: 15; -ms-grid-column: 1; grid-row: 15; padding-left: 0px; }
  #internacional-uno-noticia-titulo { -ms-grid-row: 14; -ms-grid-column: 1; grid-row: 14; padding-right: 0px;}
  #internacional-dos-noticia-titulo { -ms-grid-row: 16; -ms-grid-column: 1; grid-row: 16; padding-left: 0px; }
  #arrows-internacional { -ms-grid-row: 17; -ms-grid-column: 1; grid-column: 1 / span 1; -ms-grid-column-span: 1; padding-top: 20px; }

  /* Asignamos tamaño a la imagen de la primer noticia nacional e internacional */
  #imagen-primer-noticia, #imagen-internacional {
    width: 100%;
    height: 160px;
    object-fit: cover;
  }

  /* Asignamos tamaño a cada imagen de cada noticia */
  .fotografia-noticia {
    width: 190%;
    height: 230px;
    padding-top: 60px;
    object-fit: cover;
  }

  /* Posicionamos elementos de la columna de la derecha */
  #titulo-entradas-recientes { -ms-grid-row: 1; -ms-grid-column: 1; -ms-grid-column-span: 2; grid-column: 1 / span 2; padding: 0px;}
  #tabla-entradas-recientes { -ms-grid-row: 2; -ms-grid-column: 1; -ms-grid-column-span: 2; grid-column: 1 / span 2; }
  #titulo-archivo { -ms-grid-row: 3; -ms-grid-column: 1; -ms-grid-column-span: 2; grid-column: 1 / span 2; }
  #tabla-meses { -ms-grid-row: 4; -ms-grid-column: 1; -ms-grid-column-span: 2; grid-column: 1 / span 2; }
  #vacio { -ms-grid-row: 5; -ms-grid-column: 1; height: 0px; -ms-grid-column-span: 2; grid-column: 1 / span 2; }

  /* Asignamos tamaño a la tabla de ENTRADAS RECIENTES y ARCHIVO */
  #tbl-uno, #tbl-dos {
    width: 100%;
  }

  /* Área de las entradas recientes de la derecha */
  #tabla-entradas-recientes {
    width: 100%;
    padding-left: 10px;
  }

  /* Centrar imagen */
  .img-padding {
    width: 100%;
    text-align: center;
    height: auto;
  }

  /* Título ENTRADAS RECIENTES */
  .titulo-entrada-reciente { width: 100%; padding: 0px; height: 70px; }

  /* Cambiar el estilo de la letra */
  .bp-17px {
    font-size: 15px;
    line-height: 15px;
  }

  /* Agregar padding al hr */
  .hr {
    padding-top: 155px;
  }
}