/* CSS personalizado para 04 TURISMO */ /**************************************** 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 ***********************************/ /*************************************** #rowTurismoIntro ****************************************/ #rowTurismoIntro * { -webkit-transition: all 0.2s ease; transition: all 0.2s ease; } #rowTurismoIntro .divTurismoIntro { cursor: default; } #rowTurismoIntro .divContent { position: relative; margin: auto; padding: 140px 0px 40px 0px; max-width: 1180px; z-index: 1; } #rowTurismoIntro .divHeading h3 { color: var(--color1-hex) !important; } #rowTurismoIntro .divHeading p { max-width: 810px; } @media (max-width: 980px) { #rowTurismoIntro .divContent { padding: 100px 0px 40px 0px; } #rowTurismoIntro .divHeading p { max-width: 510px; } } @media (max-width: 780px) { #rowTurismoIntro .divHeading p { max-width: 385px; } } @media (max-width: 580px) { #rowTurismoIntro .divHeading p { margin: 12px auto 0px auto; max-width: 310px; } } @media (max-width: 380px) { #rowTurismoIntro .divContent { padding: 100px 20px 40px 20px; } #rowTurismoIntro .divHeading p { max-width: auto; } } /**************************************** #rowTurismoFeed ****************************************/ #rowTurismoFeed * { -webkit-transition: all 0.2s ease; transition: all 0.2s ease; } /* #rowTurismoFeed .divFiltros */ #rowTurismoFeed .divFiltros { margin: 40px auto 0px auto; max-width: 1180px; display: flex; justify-content: space-between; } #rowTurismoFeed .divFiltro { padding: 0px 10px; width: calc((100% - 80px) / 5); height: 60px; border: solid 4px var(--color1-hex); } #rowTurismoFeed .divFiltro { display: flex; align-items: center; justify-content: center; cursor: pointer; } #rowTurismoFeed .divFiltro i.mwp-icon { flex: 0 0 24px; margin-right: 10px; filter: none; opacity: 0.5; } #rowTurismoFeed .divFiltro span { transform-origin: left; text-align: center; white-space: nowrap; } #rowTurismoFeed .divFiltro.activo { background: var(--color1-hex); pointer-events: none; } #rowTurismoFeed .divFiltro.activo i.mwp-icon { filter: invert(1); opacity: 1; } #rowTurismoFeed .divFiltro.activo span { font-weight: 700; color: #FFFFFF; } #rowTurismoFeed .divFiltro:hover { transform: scale(1.1); background: var(--color5-hex); } @media (max-width: 1380px) { #rowTurismoFeed .divFiltros { margin: 40px 40px 0px 40px; } #rowTurismoFeed .divFiltro { width: calc((100% - 40px) / 5); } #rowTurismoFeed .divFiltro i.mwp-icon { margin-right: 5px; } } @media (max-width: 1180px) { #rowTurismoFeed .divFiltro { width: 180px; justify-content: space-between; } #rowTurismoFeed .divFiltro i.mwp-icon { width: 24px; margin-right: 0px; } #rowTurismoFeed .divFiltro span { width: calc(100% - 30px); text-align: left; } #rowTurismoFeed .divFiltro:hover { transform: scale(1.05); } #rowTurismoFeed .divFiltroALL { width: 150px; } #rowTurismoFeed .divFiltroALL span { width: 100%; text-align: center; } #rowTurismoFeed .divFiltroGAS span { transform: scaleX(0.90); } #rowTurismoFeed .divFiltroFAM span { transform: scaleX(0.85); letter-spacing: -0.8px; } } @media (max-width: 980px) { #rowTurismoFeed .divFiltros { margin: 20px 40px 0px 40px; flex-wrap: wrap; } #rowTurismoFeed .divFiltro { padding: 0px 5px; width: calc((100% - 30px) / 4); } #rowTurismoFeed .divFiltroALL { margin-bottom: 15px; width: 100%; height: 40px; } #rowTurismoFeed .divFiltroALL span br5080:before { content: " "; } } @media (max-width: 780px) { #rowTurismoFeed .divFiltros { margin: 0px 30px 0px 30px; } #rowTurismoFeed .divFiltro { width: calc((100% - 15px) / 2); height: 50px; border-width: 2px; } #rowTurismoFeed .divFiltroALL { margin-bottom: 15px; width: 100%; } #rowTurismoFeed .divFiltroCUL { margin-bottom: 15px; } #rowTurismoFeed .divFiltroACT { margin-bottom: 15px; } #rowTurismoFeed .divFiltroGAS span { transform: none; } #rowTurismoFeed .divFiltroFAM span { transform: none; letter-spacing: normal; } } @media (max-width: 580px) { #rowTurismoFeed .divFiltro { height: 40px; } } @media (max-width: 480px) { #rowTurismoFeed .divFiltro { margin-bottom: 15px; width: 100%; } } @media (max-width: 380px) { #rowTurismoFeed .divFiltros { margin: 0px 20px 0px 20px; } } /* #rowTurismoFeed .divTurismos */ #rowTurismoFeed .divTurismos { margin: auto; padding: 100px 40px; max-width: 1500px; display: flex; flex-wrap: wrap; cursor: default; } #rowTurismoFeed .divTurismo { position: relative; margin: 10px; width: calc((100% - 100px) / 5); height: 400px; } #rowTurismoFeed .divTurismo { border-radius: 20px; box-shadow: 0px 0px 10px rgba(0,0,0,0.5); overflow: hidden; -webkit-transition: none; transition: none; cursor: pointer; } #rowTurismoFeed .divTurismo .divFoto { width: 100%; height: 100%; background-repeat: no-repeat; background-size: cover; background-position: center; } #rowTurismoFeed .divTurismo .divContent { position: absolute; bottom: 0px; left: 0px; padding: 30px 30px 0px 30px; width: 100%; } #rowTurismoFeed .divTurismo .divContent { background: linear-gradient(0deg,rgba(0,0,0,0.75) 0%,rgba(0,0,0,0) 100%); } #rowTurismoFeed .divTurismo i.mwp-icon { filter: invert(1); } #rowTurismoFeed .divTurismo .divTitulo { margin-top: 10px; font-family: var(--font-family-rowdies); font-size: 16px; font-weight: 300; color: #FFFFFF; } #rowTurismoFeed .divTurismo .divTitulo { text-transform: uppercase; letter-spacing: 2px; line-height: 120%; } #rowTurismoFeed .divTurismo .aVerMasWhiteRight { opacity: 0; } #rowTurismoFeed .divTurismo:hover { border: solid 6px var(--color1-hex); } #rowTurismoFeed .divTurismo:hover .divContent { padding: 30px 24px 20px 24px; } #rowTurismoFeed .divTurismo:hover .aVerMasWhiteRight { margin-top: 20px; opacity: 1; } @media (max-width: 1380px) { #rowTurismoFeed .divTurismo { width: calc((100% - 80px) / 4); } } @media (max-width: 1180px) { #rowTurismoFeed .divTurismos { padding: 60px 30px; } #rowTurismoFeed .divTurismo { width: calc((100% - 60px) / 3); height: 350px; } } @media (max-width: 980px) { #rowTurismoFeed .divTurismos { padding: 40px 30px; } #rowTurismoFeed .divTurismo { height: 300px; } #rowTurismoFeed .divTurismo .divContent { padding: 25px 25px 0px 25px; } #rowTurismoFeed .divTurismo i.mwp-icon { width: 40px; height: 40px; } #rowTurismoFeed .divTurismo .divTitulo { font-size: 14px; } #rowTurismoFeed .divTurismo:hover { border-width: 4px; } #rowTurismoFeed .divTurismo:hover .divContent { padding: 25px 21px 20px 21px; } #rowTurismoFeed .divTurismo:hover .aVerMasWhiteRight { margin-top: 10px; } } @media (max-width: 780px) { #rowTurismoFeed .divTurismos { padding: 30px 20px; } #rowTurismoFeed .divTurismo { width: calc((100% - 40px) / 2); height: 250px; border-radius: 15px; } #rowTurismoFeed .divTurismo .divContent { padding: 20px 20px 0px 20px; } #rowTurismoFeed .divTurismo:hover .divContent { padding: 20px 16px 10px 16px; } } @media (max-width: 580px) { #rowTurismoFeed .divTurismo { margin: 5px 0px; width: 100%; height: 200px; border-radius: 10px; } } @media (max-width: 380px) { #rowTurismoFeed .divTurismo .divTitulo { font-size: 13px; } } /**************************************** #rowTurismoTipos ***************************************/ #rowTurismoTipos * { -webkit-transition: all 0.2s ease; transition: all 0.2s ease; } #rowTurismoTipos .divTurismoTipos { padding: 150px 40px 100px 40px; z-index: 1; cursor: default; } #rowTurismoTipos .divTurismoTipos:before { background-image: var(--fondo-curvas-24); } #rowTurismoTipos .divIntro { position: relative; margin: auto; display: flex; justify-content: center; z-index: 1; } #rowTurismoTipos .divIntro .divIcono i.mwp-icon { width: 240px; height: 240px; filter: invert(1); } #rowTurismoTipos .divIntro .divTextos { padding-left: 40px; } #rowTurismoTipos .divIntro .divTitulo { font-family: var(--font-family-rowdies); font-size: 35px; font-weight: 600; color: var(--color-ambar-hex); line-height: 100%; } #rowTurismoTipos .divIntroFamiliar .divTitulo { color: var(--color1-hex); } #rowTurismoTipos .divIntro .divTexto p { margin: 30px 0px 0px 0px; max-width: 630px; color: #FFFFFF; } #rowTurismoTipos .divTurismos { position: relative; margin: auto; padding: 100px 0px; max-width: 1500px; display: flex; flex-wrap: wrap; z-index: 1; } #rowTurismoTipos .divTurismo { position: relative; margin: 10px; width: calc((100% - 100px) / 5); height: 400px; } #rowTurismoTipos .divTurismo { border-radius: 20px; box-shadow: 0px 0px 10px rgba(0,0,0,0.5); overflow: hidden; cursor: pointer; } #rowTurismoTipos .divTurismo .divFoto { width: 100%; height: 100%; background-repeat: no-repeat; background-size: cover; background-position: center; } #rowTurismoTipos .divTurismo .divContent { position: absolute; bottom: 0px; left: 0px; padding: 30px 30px 0px 30px; width: 100%; } #rowTurismoTipos .divTurismo .divContent { background: linear-gradient(0deg,rgba(0,0,0,0.75) 0%,rgba(0,0,0,0) 100%); } #rowTurismoTipos .divTurismo .divTitulo { margin-top: 10px; font-family: var(--font-family-rowdies); font-size: 16px; font-weight: 300; color: #FFFFFF; } #rowTurismoTipos .divTurismo .divTitulo { text-transform: uppercase; letter-spacing: 2px; line-height: 120%; } #rowTurismoTipos .divTurismo .aVerMasWhiteRight { opacity: 0; } #rowTurismoTipos .divTurismo:hover { border: solid 6px var(--color1-hex); } #rowTurismoTipos .divTurismo:hover .divContent { padding: 30px 24px 20px 24px; } #rowTurismoTipos .divTurismo:hover .aVerMasWhiteRight { margin-top: 20px; opacity: 1; } @media (max-width: 1380px) { #rowTurismoTipos .divTurismo { width: calc((100% - 80px) / 4); } } @media (max-width: 1180px) { #rowTurismoTipos .divTurismo { width: calc((100% - 60px) / 3); height: 350px; } } @media (max-width: 980px) { #rowTurismoTipos .divTurismoTipos { padding: 140px 40px 80px 40px; } #rowTurismoTipos .divIntro .divIcono i.mwp-icon { width: 200px; height: 200px; } #rowTurismoTipos .divIntro .divTitulo { font-size: 30px; } #rowTurismoTipos .divIntro .divTexto p { margin: 25px 0px 0px 0px; } #rowTurismoTipos .divTurismos { padding: 80px 0px; } #rowTurismoTipos .divTurismo { height: 300px; } #rowTurismoTipos .divTurismo .divContent { padding: 25px 25px 0px 25px; } #rowTurismoTipos .divTurismo .divTitulo { font-size: 14px; } #rowTurismoTipos .divTurismo:hover { border-width: 4px; } #rowTurismoTipos .divTurismo:hover .divContent { padding: 25px 21px 20px 21px; } #rowTurismoTipos .divTurismo:hover .aVerMasWhiteRight { margin-top: 10px; } } @media (max-width: 780px) { #rowTurismoTipos .divTurismoTipos { padding: 120px 40px 70px 40px; } #rowTurismoTipos .divIntro .divIcono i.mwp-icon { width: 150px; height: 150px; } #rowTurismoTipos .divIntro .divTextos { padding-left: 30px; } #rowTurismoTipos .divIntro .divTitulo { font-size: 24px; } #rowTurismoTipos .divIntro .divTexto p { margin: 20px 0px 0px 0px; } #rowTurismoTipos .divTurismos { padding: 60px 0px; } #rowTurismoTipos .divTurismo { width: calc((100% - 40px) / 2); height: 250px; border-radius: 15px; } #rowTurismoTipos .divTurismo .divContent { padding: 20px 20px 0px 20px; } #rowTurismoTipos .divTurismo:hover .divContent { padding: 20px 16px 10px 16px; } } @media (max-width: 580px) { #rowTurismoTipos .divTurismoTipos { padding: 120px 30px 70px 30px; display: block; } #rowTurismoTipos .divIntro { display: block; } #rowTurismoTipos .divIntro .divIcono { float: left; margin-right: 15px; } #rowTurismoTipos .divIntro .divIcono i.mwp-icon { width: 130px; height: 130px; } #rowTurismoTipos .divIntro .divTextos { padding-left: 0px; } #rowTurismoTipos .divIntro .divTitulo { padding-top: 75px; max-width: 400px; font-size: 28px; } #rowTurismoTipos .divIntro .divTexto p { clear: both; margin: 10px 0px 0px 0px; display: inline-block; } #rowTurismoTipos .divIntro .divTexto p:first-of-type { margin-top: 20px; } #rowTurismoTipos .divIntroFamiliar .divTitulo { padding-top: 50px; } #rowTurismoTipos .divTurismos { padding: 40px 0px; } #rowTurismoTipos .divTurismo { margin: 5px 0px; width: 100%; height: 200px; border-radius: 10px; } #rowTurismoTipos .divTurismo .divContent { padding: 20px 20px 0px 20px; } } @media (max-width: 480px) { #rowTurismoTipos .divIntro .divIcono { float: none; margin-right: 0px; } #rowTurismoTipos .divIntro .divIcono i.mwp-icon { margin: auto; width: 100px; height: 100px; } #rowTurismoTipos .divIntro .divTitulo { padding-top: 20px; font-size: 24px; text-align: center; } } @media (max-width: 380px) { #rowTurismoTipos .divTurismoTipos { padding: 120px 20px 60px 20px; } #rowTurismoTipos .divIntro .divIcono i.mwp-icon { width: 100px; height: 100px; } #rowTurismoTipos .divTurismo .divTitulo { font-size: 13px; } } /**************************************** #rowTurismoOtros ***************************************/ #rowTurismoOtros * { -webkit-transition: all 0.2s ease; transition: all 0.2s ease; } #rowTurismoOtros .divTurismoOtros { padding: 200px 0px 100px 0px; z-index: 1; } #rowTurismoOtros .divHeading { position: relative; z-index: 1; } #rowTurismoOtros .divHeading h3 { color: var(--color-ambar-hex) !important; } #rowTurismoOtros .divTurismos { margin-top: 60px; display: flex; justify-content: center; } #rowTurismoOtros .divTurismo { padding: 0px 40px; z-index: 1; } #rowTurismoOtros .divTurismo a { text-decoration: none; } #rowTurismoOtros .divTurismo a i.mwp-icon { margin: auto; width: 220px; height: 220px; } #rowTurismoOtros .divTurismo a span { margin-top: 15px; font-family: var(--font-family-rowdies); font-size: 26px; display: block; text-align: center; white-space: nowrap; } #rowTurismoOtros .divTurismo a span:first-of-type { margin-top: 30px; letter-spacing: 5px; } #rowTurismoOtros .divTurismoCultural a span { color: var(--color-añil-hex) !important; } #rowTurismoOtros .divTurismoActivo a span { color: var(--color-oliva-hex) !important; } #rowTurismoOtros .divTurismoGastronomico a span { color: var(--color1-hex) !important; } #rowTurismoOtros .divTurismoFamiliar a span { color: var(--color-ambar-hex) !important; } #rowTurismoOtros .divTurismo:hover { transform: scale(1.1); } @media (max-width: 980px) { #rowTurismoOtros .divTurismoOtros { padding: 160px 0px 80px 0px; } #rowTurismoOtros .divHeading p { max-width: 590px; } #rowTurismoOtros .divTurismos { margin-top: 40px; } #rowTurismoOtros .divTurismo { padding: 0px 20px; } #rowTurismoOtros .divTurismo a i.mwp-icon { width: 180px; height: 180px; } #rowTurismoOtros .divTurismo a span { margin-top: 10px; font-size: 22px; } #rowTurismoOtros .divTurismo a span:first-of-type { margin-top: 15px; letter-spacing: 4px; } #rowTurismoOtros .divTurismo:hover { transform: scale(1.05); } #rowTurismoOtros .divTurismoFamiliar a span:last-of-type { letter-spacing: -1px; } } @media (max-width: 780px) { #rowTurismoOtros .divTurismoOtros { padding: 140px 0px 60px 0px; } #rowTurismoOtros .divHeading p { max-width: 470px; } #rowTurismoOtros .divTurismos { margin-top: 30px; } #rowTurismoOtros .divTurismo { padding: 0px 10px; } #rowTurismoOtros .divTurismo a i.mwp-icon { width: 140px; height: 140px; } #rowTurismoOtros .divTurismo a span { margin-top: 5px; font-size: 20px; } #rowTurismoOtros .divTurismo a span:first-of-type { margin-top: 15px; letter-spacing: 3px; } #rowTurismoOtros .divTurismoFamiliar a span:last-of-type { transform-origin: center; transform: scaleX(0.8); } } @media (max-width: 580px) { #rowTurismoOtros .divTurismoOtros { padding: 120px 30px 40px 30px; } #rowTurismoOtros .divHeading h3 { margin: auto !important; width: 255px; } #rowTurismoOtros .divHeading p { margin: 10px 0px 0px 0px; max-width: none; } #rowTurismoOtros .divTurismos { margin-top: 20px; flex-wrap: wrap; } #rowTurismoOtros .divTurismo { padding: 15px; } #rowTurismoOtros .divTurismo a i.mwp-icon { width: 120px; height: 120px; } #rowTurismoOtros .divTurismo a span { margin-top: 0px; font-size: 18px; } #rowTurismoOtros .divTurismo a span:first-of-type { margin-top: 10px; letter-spacing: 2px; } #rowTurismoOtros .divTurismoFamiliar a span:last-of-type { transform: none; letter-spacing: normal; } } @media (max-width: 380px) { #rowTurismoOtros .divTurismoOtros { padding: 120px 20px 20px 20px; } #rowTurismoOtros .divTurismos { margin-top: 10px; } #rowTurismoOtros .divTurismo a i.mwp-icon { width: 100px; height: 100px; } #rowTurismoOtros .divTurismo a span { font-size: 16px; } }