/*
	CSS personalizado para 04 TURISMO
*/

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

/*    Rojo Oscuro: E11F1D rgb(225, 31, 29) */
/*           Gris: 999999 rgb(153,153,153) */
/*     Rojo Medio: F08F8E rgb(240,143,142) */
/*     Rojo Claro: F7C7C6 rgb(247,199,198) */
/* Rojo Muy Claro: FBE3E2 rgb(251,227,226) */

/*           Gris: B0B0B0 rgb(176,176,176) */

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

/************************************** #rowTurismoCabecera **************************************/

#rowTurismoCabecera *                    { -webkit-transition: all 0.3s ease; transition: all 0.3s ease; }
#rowTurismoCabecera .divCabeceraFoto     { width: 100%; height: 500px; background-image: url("/wp-content/themes/espacio108/images/fotos/cabecera-turismo.jpg"); }
#rowTurismoCabecera .divCabeceraFoto     { border-bottom: solid 8px var(--color1-hex); background-repeat: no-repeat; background-size: cover; background-position: center center; }
#rowTurismoCabecera .divCabeceraHeading  { background-image: var(--fondo-huella-gris); }
#rowTurismoCabecera .divHeading108 h2    { height: 62px; font-size: 80px !important; color: #FFFFFF; }
#rowTurismoCabecera .divHeading108:after { top: 4px; left: -8px; width: 120px; height: calc(120px * 192 / 300); }
#rowTurismoCabecera .divTexto      p     { margin: 0px auto; padding: 0px 40px 40px 40px; max-width: 1180px; font-size: 20px; color: #FFFFFF; text-align: center; }

@media (max-width:  980px) {
	#rowTurismoCabecera .divCabeceraFoto     { height: 400px; }
	#rowTurismoCabecera .divHeading108 h2    { height: 53px; font-size: 70px !important; }
	#rowTurismoCabecera .divHeading108:after { top: 4px; left: -6px; width: 110px; height: calc(110px * 192 / 300); }
	#rowTurismoCabecera .divTexto      p     { padding: 0px 40px 30px 40px; }
}

@media (max-width:  780px) {
	#rowTurismoCabecera .divCabeceraFoto     { height: 300px; }
	#rowTurismoCabecera .divHeading108 h2    { height: 46px; font-size: 60px !important; }
	#rowTurismoCabecera .divHeading108:after { top: 3px; left: -6px; width: 100px; height: calc(100px * 192 / 300); }
	#rowTurismoCabecera .divTexto      p     { padding: 0px 40px 30px 40px; font-size: 18px; line-height: 120%; }
}

@media (max-width:  580px) {
	#rowTurismoCabecera .divCabeceraFoto     { height: 200px; }
	#rowTurismoCabecera .divHeading108 h2    { height: 38px; font-size: 50px !important; }
	#rowTurismoCabecera .divHeading108:after { top: 4px; left: -4px; width: 80px; height: calc(80px * 192 / 300); }
	#rowTurismoCabecera .divTexto      p     { padding: 0px 40px 20px 40px; font-size: 16px; }
}

@media (max-width:  480px) {
	#rowTurismoCabecera .divCabeceraFoto     { height: 160px; }
	#rowTurismoCabecera .divHeading108 h2    { height: 31px; font-size: 40px !important; }
	#rowTurismoCabecera .divHeading108:after { top: 3px; left: -4px; width: 60px; height: calc(60px * 192 / 300); }
	#rowTurismoCabecera .divTexto      p     { padding: 0px 30px 20px 30px; font-size: 14px; }
}

@media (max-width:  380px) {
	#rowTurismoCabecera .divCabeceraFoto     { height: 140px; }
	#rowTurismoCabecera .divHeading108 h2    { height: 23px; font-size: 30px !important; }
	#rowTurismoCabecera .divHeading108:after { top: 1px; left: -2px; width: 45px; height: calc(45px * 192 / 300); }
	#rowTurismoCabecera .divTexto      p     { padding: 0px 30px 20px 30px; font-size: 14px; }
}

/**************************************** #rowTurismosFeed ***************************************/

#rowTurismosFeed                                      { background-image: var(--fondo-huella); background-repeat: repeat; }
#rowTurismosFeed *                                    { -webkit-transition: all 0.2s ease; transition: all 0.2s ease; }
#rowTurismosFeed .divTurismos                         { position: relative; display: flex; flex-wrap: wrap; }
#rowTurismosFeed .divTurismo                          { position: relative; width: calc(100% / 4); display: flex; flex-wrap: wrap; justify-content: center; }
#rowTurismosFeed .divTurismo:before                   { content: ""; padding-top: 100%; display: block; }
#rowTurismosFeed .divTurismo a                        { position: relative; width: 100%; height: 100%; }
#rowTurismosFeed .divTurismo a       .divFoto         { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; background-repeat: no-repeat; background-size: cover; background-position: center center; }
#rowTurismosFeed .divTurismo a       .divFoto:after   { content: ""; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; }
#rowTurismosFeed .divTurismo a       .divFoto:after   { background: rgba(var(--color1-rgb),0.5); transform: scale(0); -webkit-transition: all 0.5s ease; transition: all 0.5s ease; }
#rowTurismosFeed .divTurismo a       .divContent      { position: absolute; top: 50%; left: 0px; transform: translateY(-50%); width: 100%; }
#rowTurismosFeed .divTurismo a       .divTitulo       { padding: 0px 40px; width: 100%; font-size: 40px; font-weight: 700; color: #FFFFFF; line-height: 110%; text-align: center; }
#rowTurismosFeed .divTurismo a       .divTitulo       { text-shadow: 2px 2px 2px rgba(0,0,0,0.5); -webkit-transition: all 0.5s ease; transition: all 0.5s ease; }
#rowTurismosFeed .divTurismo a       .divLinea        { margin: 20px auto; width: 100px; height: 2px; background: transparent; display: block; }
#rowTurismosFeed .divTurismo a       .divDescripcion  { padding: 0px 40px; width: 100%; font-size: 0px; font-weight: 300; color: #FFFFFF; line-height: 120%; text-align: justify; }
#rowTurismosFeed .divTurismo a       .divDescripcion  { height: 0px; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis;  }
#rowTurismosFeed .divTurismo a       .divDescripcion  { -webkit-transition: all 0.5s ease; transition: all 0.5s ease; }
#rowTurismosFeed .divTurismo a:hover .divFoto:after   { transform: scale(1); }
#rowTurismosFeed .divTurismo a:hover .divLinea        { background: #FFFFFF; }
#rowTurismosFeed .divTurismo a:hover .divDescripcion  { font-size: 16px; height: auto; max-height: calc((14px * 1.2 * 10) - 0px); -webkit-line-clamp: 10; }

@media (max-width: 1580px) {
	#rowTurismosFeed .divTurismo a       .divTitulo      { padding: 0px 30px; font-size: 35px; }
	#rowTurismosFeed .divTurismo a       .divDescripcion { padding: 0px 30px; }
}

@media (max-width: 1380px) {
	#rowTurismosFeed .divTurismo a       .divTitulo      { padding: 0px 20px; font-size: 30px; }
	#rowTurismosFeed .divTurismo a       .divDescripcion { padding: 0px 20px; }
}

@media (max-width: 1180px) { #rowTurismosFeed .divTurismo { width: calc(100% / 3); } }

@media (max-width:  980px) {
	#rowTurismosFeed .divTurismo a       .divTitulo      { font-size: 24px; }
	#rowTurismosFeed .divTurismo a:hover .divDescripcion { font-size: 14px; max-height: calc((14px * 1.2 * 8) - 0px); -webkit-line-clamp: 8; }
}

@media (max-width:  780px) { #rowTurismosFeed .divTurismo { width: calc(100% / 2); } }

@media (max-width:  580px) {
	#rowTurismosFeed .divTurismo                         { width: 100%; }
	#rowTurismosFeed .divTurismo:before                  { padding-top: 50%; }
	#rowTurismosFeed .divTurismo a       .divTitulo      { padding: 0px 30px; font-size: 30px; }
	#rowTurismosFeed .divTurismo a       .divLinea       { margin: 15px auto; }
	#rowTurismosFeed .divTurismo a       .divDescripcion { padding: 0px 30px; }
	#rowTurismosFeed .divTurismo a:hover .divDescripcion { font-size: 16px; max-height: calc((16px * 1.2 * 6) - 0px); -webkit-line-clamp: 6; }
}

@media (max-width:  480px) {
	#rowTurismosFeed .divTurismo a       .divTitulo      { padding: 0px 20px; font-size: 24px; }
	#rowTurismosFeed .divTurismo a       .divDescripcion { padding: 0px 20px; }
	#rowTurismosFeed .divTurismo a:hover .divDescripcion { font-size: 14px; max-height: calc((14px * 1.2 * 5) - 0px); -webkit-line-clamp: 5; }
}

@media (max-width:  380px) {
	#rowTurismosFeed .divTurismo a       .divTitulo      { font-size: 20px; }
	#rowTurismosFeed .divTurismo a       .divLinea       { margin: 10px auto; }
	#rowTurismosFeed .divTurismo a:hover .divDescripcion { font-size: 13px; max-height: calc((13px * 1.2 * 3) - 0px); -webkit-line-clamp: 3; text-align: left; }
}