/*
	CSS personalizado para 04 NEWS
*/

/**************************************** GAMA DE COLORES ****************************************/

/*    Azul Oscuro: 017CBA rgb(  1,124,186) */
/*           Gris: 999999 rgb(153,153,153) */
/*     Azul Medio: 80BDDC rgb(128,189,220) */
/*     Azul Claro: BFDEED rgb(191,222,237) */
/* Azul Muy Claro: DFEEF6 rgb(223,238,243) */

/*   Verde Oscuro: 07B289 rgb(  7,178,137) */
/*    Verde Medio: 83D8C4 rgb(131,216,196) */
/*    Verde Claro: C1EBE1 rgb(193,235,225) */
/*Verde Muy Claro: E0F5F0 rgb(224,245,240) */

/************************************ MODIFICADOS DE syle-home ***********************************/

/******************************************* #rowNews ********************************************/

#rowNews .divNews *          { -webkit-transition: all 0.3s ease; transition: all 0.3s ease; }
#rowNews .divNoticias        { display: flex; flex-wrap: wrap; justify-content: center; }
#rowNews .divNoticia         { margin: 15px; width: calc(33.33% - 30px); background: #FFFFFF; border: solid 1px var(--color1-hex); border-left-width: 4px; }
#rowNews .divNoticia         { display: flex; flex-direction: column; justify-content: space-between; box-shadow: 0px 25px 12px -20px rgba(0,0,0,0.3); }
#rowNews .divNoticia:hover   { transform: scale(1.05); }
#rowNews .divFoto            { width: 100%; height: 200px; background-repeat: no-repeat; background-position: center center; background-size: cover; }
#rowNews .divTitulo          { padding: 20px; }
#rowNews .divTitulo h1       { font-family: var(--font-family-narrow); font-size: 18px; color: var(--color1-hex); line-height: 120%; }
#rowNews .divTitulo h1       { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; }
#rowNews .divTitulo h1       { height: calc((18px * 1.2 * 4) - 5px); -webkit-line-clamp: 4; }
#rowNews .divTitulo h1:hover { color: var(--color3-hex); }
#rowNews .divMeta            { margin: auto 20px 10px 20px; padding-top: 2px; border-top: solid 1px var(--color1-hex); display: flex; align-items: center; justify-content: space-between; }
#rowNews .divMeta *          { font-family: var(--font-family-narrow); }
#rowNews .divFecha           { font-size: 12px; color: var(--color1-hex); }
#rowNews .divMore            { font-size: 12px; }
#rowNews .divMore a          { color: var(--color1-hex); }

@media (max-width: 1180px) { #rowNews .divNews { padding: 0px 20px; } }

@media (max-width:  980px) {
	#rowNews .divNoticia   { margin: 10px; width: calc(33.33% - 20px); }
	#rowNews .divFoto      { height: 160px; }
	#rowNews .divTitulo    { padding: 15px; }
	#rowNews .divTitulo h1 { font-size: 16px; height: calc((16px * 1.2 * 4) - 5px); -webkit-line-clamp: 4; }
	#rowNews .divMeta      { margin: auto 15px 4px 15px; }
}

@media (max-width:  780px) {
	#rowNews .divNoticia   { position: relative; margin: 10px 0px; width: 100%; display: block; }
	#rowNews .divFoto      { float: left; margin-right: 20px; width: 200px; height: 200px; }
	#rowNews .divTitulo h1 { font-size: 20px; height: calc((20px * 1.2 * 6) - 5px); -webkit-line-clamp: 6; }
	#rowNews .divMeta      { position: absolute; bottom: 10px; left: 220px; margin: 0px; width: calc(100% - 240px); }
}

@media (max-width:  580px) {
	#rowNews .divFoto      { margin-right: 15px; width: 160px; height: 160px; }
	#rowNews .divTitulo h1 { font-size: 18px; height: calc((18px * 1.2 * 5) - 2px); -webkit-line-clamp: 5; }
	#rowNews .divMeta      { bottom: 5px; left: 175px; width: calc(100% - 190px); }
}

@media (max-width:  480px) {
	#rowNews .divNews      { padding: 0px; }
	#rowNews .divNoticia   { box-shadow: 0px 18px 7px -15px rgba(0,0,0,0.3); }
	#rowNews .divTitulo    { padding: 10px 15px; }
	#rowNews .divTitulo h1 { font-size: 16px; height: calc((16px * 1.2 * 6) - 2px); -webkit-line-clamp: 6; }
}

@media (max-width:  380px) {
	#rowNews .divFoto      { width: 120px; height: 120px; }
	#rowNews .divTitulo h1 { font-size: 14px; height: calc((14px * 1.2 * 5) - 5px); -webkit-line-clamp: 5; }
	#rowNews .divMeta      { bottom: 2px; left: 135px; width: calc(100% - 150px); }
	#rowNews .divFecha     { font-size: 11px; }
	#rowNews .divMore      { font-size: 11px; }
}

@media (max-width:  340px) { #rowNews .divMore { display: none; } }