/*
	CSS personalizado para 03 POBLACIONES
*/

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

/*    Rojo Oscuro: D74F41 rgb(215, 79, 65) */
/*           Gris: 999999 rgb(153,153,153) */
/*     Rojo Medio: EBA7A0 rgb(235,167,160) */
/*     Rojo Claro: F5D3CF rgb(245,211,207) */
/* Rojo Muy Claro: FAE9E7 rgb(250,233,231) */

/*           Añil: 143046 rgb( 20, 48, 70) */
/*          Ambar: E6AF40 rgb(230,175, 64) */
/*          Oliva: 4C5335 rgb( 76, 83, 53) */
/*          Crema: FAEFD9 rgb(250,239,217) */

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

/************************************* #rowPoblacionesIntro **************************************/

#rowPoblacionesIntro *                    { -webkit-transition: all 0.2s ease; transition: all 0.2s ease; }
#rowPoblacionesIntro .divPoblacionesIntro { cursor: default; }
#rowPoblacionesIntro .divContent          { position: relative; margin: auto; padding: 140px 0px 40px 0px; max-width: 1180px; z-index: 1; }
#rowPoblacionesIntro .divHeading h3       { color: var(--color1-hex) !important; }
#rowPoblacionesIntro .divHeading p        { max-width: 800px; }

@media (max-width:  980px) { #rowPoblacionesIntro .divContent { padding: 100px  0px 40px  0px; } #rowPoblacionesIntro .divHeading p { max-width: 520px; } }
@media (max-width:  780px) {                                                                     #rowPoblacionesIntro .divHeading p { max-width: 395px; } }
@media (max-width:  580px) {                                                                     #rowPoblacionesIntro .divHeading p { margin: 12px auto 0px auto; max-width: 320px; } }
@media (max-width:  380px) { #rowPoblacionesIntro .divContent { padding: 100px 20px 40px 20px; } #rowPoblacionesIntro .divHeading p { max-width: auto; } }

/************************************** #rowPoblacionesFeed **************************************/

#rowPoblacionesFeed *                                                    { -webkit-transition: all 0.2s ease; transition: all 0.2s ease; }
#rowPoblacionesFeed .divPoblaciones                                      { position: relative; margin: auto; max-width: 1180px; display: flex; flex-wrap: wrap; justify-content: space-between; cursor: default; }
#rowPoblacionesFeed .divPoblaciones:after                                { content: ""; position: absolute; bottom: 40px; width: 100%; height: 8px; background: #FFFFFF; }
#rowPoblacionesFeed .divPoblacion                                        { margin-bottom: 40px; padding: 0px 10px 40px 10px; width: calc(100% / 4); border-bottom: solid 8px var(--color1-hex); cursor: pointer; }
#rowPoblacionesFeed .divPoblacion                .divFoto                { width: 100%; height: 200px; background-repeat: no-repeat; background-position: center; background-size: cover; border-radius: 25px; }
#rowPoblacionesFeed .divPoblacion:hover          .divFoto                { transform: scale(1.05); box-shadow: 0px 0px 10px rgba(0,0,0,0.75); }
#rowPoblacionesFeed .divPoblacion                .divContent             { margin-top: 20px; }
#rowPoblacionesFeed .divPoblacion                .divTitulo              { font-family: var(--font-family-rowdies); font-size: 18px; font-weight: 600; color: var(--color1-hex); }
#rowPoblacionesFeed .divPoblacion                .divTitulo              { line-height: 120%; text-transform: uppercase; letter-spacing: 5px; white-space: nowrap; }
#rowPoblacionesFeed .divPoblacion#poblacion-1062 .divTitulo              { letter-spacing: 3px; } /* Aragüés del Puerto */
#rowPoblacionesFeed .divPoblacion:hover          .divTitulo              { color: var(--color-añil-hex); }
#rowPoblacionesFeed .divPoblacion                .divDescripcion         { height: calc((13px * 1.4 * 4) - 0px); -webkit-line-clamp: 4; }
#rowPoblacionesFeed .divPoblacion                .divDescripcion         { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; }
#rowPoblacionesFeed .divPoblacion                .divDescripcion p       { margin: 0px; font-size: 13px; font-weight: 300; line-height: 140%; }
#rowPoblacionesFeed .divPoblacion                .divDescripcion p:empty { display: none !important; }
#rowPoblacionesFeed .divPoblacion                .aVerMasAñilRight       { margin-top: 15px; }

@media (max-width: 1380px) {
	#rowPoblacionesFeed .divPoblaciones                         { padding: 0px 40px; }
	#rowPoblacionesFeed .divPoblacion#poblacion-1062 .divTitulo { letter-spacing: 1.9px; }
}

@media (max-width: 1180px) {
	#rowPoblacionesFeed .divPoblacion                           { width: calc(100% / 3); }
	#rowPoblacionesFeed .divPoblacion#poblacion-1062 .divTitulo { letter-spacing: 3px; }
}

@media (max-width:  980px) {
	#rowPoblacionesFeed .divPoblaciones:after                           { bottom: 30px; }
	#rowPoblacionesFeed .divPoblacion                                   { margin-bottom: 30px; padding: 0px 5px 30px 5px; border-bottom-width: 6px; }
	#rowPoblacionesFeed .divPoblacion                .divFoto           { height: 160px; border-radius: 20px; }
	#rowPoblacionesFeed .divPoblacion:hover          .divFoto           { transform: scale(1.025); }
	#rowPoblacionesFeed .divPoblacion                .divContent        { margin-top: 15px; }
	#rowPoblacionesFeed .divPoblacion                .divTitulo         { font-size: 16px; letter-spacing: 3px; }
	#rowPoblacionesFeed .divPoblacion#poblacion-1062 .divTitulo         { letter-spacing: 1.3px; }
	#rowPoblacionesFeed .divPoblacion                .divDescripcion    { margin-top: 5px; height: calc((12px * 1.4 * 4) - 0px); }
	#rowPoblacionesFeed .divPoblacion                .divDescripcion p  { font-size: 12px; }
	#rowPoblacionesFeed .divPoblacion                .aVerMasAñilRight  { margin-top: 10px; }
}

@media (max-width:  780px) {
	#rowPoblacionesFeed .divPoblaciones                                 { padding: 0px 30px; }
	#rowPoblacionesFeed .divPoblaciones:after                           { bottom: 25px; }
	#rowPoblacionesFeed .divPoblacion                                   { margin-bottom: 25px; padding: 0px 5px 25px 5px; width: calc(100% / 2); border-bottom-width: 4px; }
	#rowPoblacionesFeed .divPoblacion                .divFoto           { height: 140px; border-radius: 15px; }
	#rowPoblacionesFeed .divPoblacion                .divContent        { margin-top: 10px; }
	#rowPoblacionesFeed .divPoblacion                .divTitulo         { font-size: 14px; letter-spacing: 2px; }
	#rowPoblacionesFeed .divPoblacion#poblacion-1062 .divTitulo         { letter-spacing: 1.3px; }
	#rowPoblacionesFeed .divPoblacion                .divDescripcion    { height: calc((11px * 1.4 * 3) - 0px); -webkit-line-clamp: 3; }
	#rowPoblacionesFeed .divPoblacion                .divDescripcion p  { font-size: 11px; }
	#rowPoblacionesFeed .divPoblacion                .aVerMasAñilRight  { margin-top: 5px; }
}

@media (max-width:  580px) {
	#rowPoblacionesFeed .divPoblaciones                                 { padding: 0px 20px; }
	#rowPoblacionesFeed .divPoblaciones:after                           { bottom: 15px; }
	#rowPoblacionesFeed .divPoblacion                                   { margin: 0px auto 20px auto; padding: 0px 0px 15px 0px; width: 100%; max-width: 300px; border-bottom-width: 1px; }
	#rowPoblacionesFeed .divPoblacion                .divFoto           { height: 140px; }
	#rowPoblacionesFeed .divPoblacion                .divTitulo         { text-align: center; letter-spacing: 3px !important; }
	#rowPoblacionesFeed .divPoblacion                .divDescripcion    { height: auto; display: block; }
	#rowPoblacionesFeed .divPoblacion                .aVerMasAñilRight  { margin: 10px auto 0px auto; width: fit-content; }
}