/* CSS personalizado para 02 COMPRAR COCHE */ /**************************************** GAMA DE COLORES ****************************************/ /* Azul Oscuro: 03579F rgb( 3, 87,159) */ /* Gris: 999999 rgb(153,153,153) */ /* Azul Medio: 81ABCF rgb(129,171,207) */ /* Azul Claro: C0D5E7 rgb(192,213,231) */ /* Azul Muy Claro: DFEAF3 rgb(223,234,243) */ /* Azul Oscuro: 0099CC rgb( 0,153,204) */ /*Azul Menos Oscuro: 77CCEE rgb(119,204,238) */ /* Azul Medio: BBEEFF rgb(187,238,255) */ /* Azul Claro: DDF6FF rgb(221,246,255) */ /* Azul Muy Claro: EEFBFF rgb(238,251,255) */ /* Naranja Oscuro: FF6000 rgb(255, 96, 0) */ /************************************ MODIFICADOS DE syle-home ***********************************/ /***************************************** #rowTextosSEO *****************************************/ #rowTextosSEO * { -webkit-transition: all 0.2s ease; transition: all 0.2s ease; } #rowTextosSEO .divTextosSEO { margin: 40px auto 0px auto; max-width: 1280px; } #rowTextosSEO .divTextos { display: flex; flex-wrap: wrap; justify-content: space-between; } #rowTextosSEO .divTexto { margin: 20px; padding: 20px; width: calc(33.33% - 40px); background: var(--color-azu4-hex); } #rowTextosSEO .divTexto h2 { font-weight: 700; text-align: center; } #rowTextosSEO .divTexto p { margin: 10px 0px; font-weight: 500; font-style: italic; } @media (max-width: 1380px) { #rowTextosSEO .divTextosSEO { padding: 0px 20px; } } @media (max-width: 1280px) { #rowTextosSEO .divTexto h2 { font-size: 20px; } } @media (max-width: 1180px) { #rowTextosSEO .divTexto { margin: 15px; width: calc(33.33% - 30px); } } @media (max-width: 980px) { #rowTextosSEO .divTexto { margin: 10px; padding: 15px; width: calc(33.33% - 20px); } #rowTextosSEO .divTexto h2 { font-size: 18px; letter-spacing: -0.6px; } #rowTextosSEO .divTexto p { font-size: 14px; } } @media (max-width: 780px) { #rowTextosSEO .divTexto { margin: 10px 5px; width: 100%; } #rowTextosSEO .divTexto h2 { text-align: left; } #rowTextosSEO .divTexto p { margin: 5px 0px 0px 0px; } } @media (max-width: 580px) { #rowTextosSEO .divTextosSEO { margin: 20px auto 0px auto; } #rowTextosSEO .divTexto { margin: 10px 0px; } } @media (max-width: 480px) { #rowTextosSEO { display: none; } } /***************************************** #rowFiltrosVO *****************************************/ #rowFiltrosVO .divFiltrosVO { margin: auto; max-width: 1280px; } #rowFiltrosVO .divFiltros { padding: 0px 10px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; } #rowFiltrosVO .divFiltros * { font-family: var(--font-family-fira); -webkit-transition: all 0.2s ease; transition: all 0.2s ease; } #rowFiltrosVO .divFiltros .fa { font-family: "FontAwesome"; } #rowFiltrosVO .divHeadingPlegable { display: none; } #rowFiltrosVO .divContenedorPlegable { display: block; -webkit-transition: none; transition: none; } #rowFiltrosVO .divFiltroMarcas { width: 100%; } #rowFiltrosVO .divMarcas { display: flex; flex-wrap: wrap; justify-content: center; } #rowFiltrosVO .divFiltroCarrocerias { width: 100%; } #rowFiltrosVO .divCarrocerias { display: flex; flex-wrap: wrap; justify-content: center; } #rowFiltrosVO .divCombustibles { display: flex; flex-wrap: wrap; } #rowFiltrosVO .divOrdenar { display: flex; flex-wrap: wrap; justify-content: flex-end; } #rowFiltrosVO .divMarca { position: relative; margin: 6px; width: calc(10% - 12px); min-width: 70px; border: solid 1px #DDDDDD; } #rowFiltrosVO .divMarca { background-repeat: no-repeat; background-position: center center; background-size: 90%; cursor: pointer; } #rowFiltrosVO .divMarca:after { content: ""; padding-top: 100%; display: block; } #rowFiltrosVO .divMarca:hover { transform: scale(1.1); } #rowFiltrosVO .divCarroceria { position: relative; margin: 10px; width: 100px !important; } #rowFiltrosVO .divCarroceria { background-repeat: no-repeat; background-position: top center; background-size: 100%; text-align: center; cursor: pointer; } #rowFiltrosVO .divCarroceria:after { content: ""; padding-top: 60%; display: block; } #rowFiltrosVO .divCarroceria:hover { transform: scale(1.1); } #rowFiltrosVO .divCarroceria span { position: absolute; bottom: 0px; left: 0px; width: 100%; font-size: 14px; font-weight: 400; color: var(--color-azu1-hex); } #rowFiltrosVO .divCombustible { position: relative; margin: 10px 10px 10px 0px; padding: 5px 0px 2px 10px; width: 110px; background: var(--color-nar1-hex); } #rowFiltrosVO .divCombustible { border-radius: 6px; box-shadow: 0px 1px 1px #000000; cursor: pointer; } #rowFiltrosVO .divCombustible:hover { transform: scale(1.05); } #rowFiltrosVO .divCombustible:last-of-type { margin-right: 0px !important; } #rowFiltrosVO .divCombustible span { font-size: 18px; font-weight: 400; color: #FFFFFF; text-shadow: 0px 1px 1px rgba(0,0,0,0.5); } #rowFiltrosVO .divOrden { margin: 10px 0px 10px 10px; padding: 8px 15px 6px 15px; background: var(--color-azu1-hex); border-radius: 6px; box-shadow: 0px 1px 1px #000000; } #rowFiltrosVO .divOrden { display: flex; align-items: center; justify-content: center; cursor: pointer; } #rowFiltrosVO .divOrden:hover { transform: scale(1.05); } #rowFiltrosVO .divOrden:first-of-type { margin-left: 0px; } #rowFiltrosVO .divOrden span { font-size: 18px; font-weight: 400; color: #FFFFFF; text-shadow: 0px 1px 1px rgba(0,0,0,0.5); line-height: 100%; } #rowFiltrosVO .divOrden .spanCorto { display: none; } #rowFiltrosVO .divOrden i { margin-left: 10px; font-size: 18px; color: #FFFFFF; text-shadow: 0px 1px 1px rgba(0,0,0,0.5); } #rowFiltrosVO .divOrden i.fa-sort-numeric-asc { color: #00FF00; } #rowFiltrosVO .divOrden i.fa-sort-numeric-desc { color: #00FF00; } #rowFiltrosVO .divMarca:not(.active) { filter: grayscale(100%); opacity: 0.6; } #rowFiltrosVO .divMarca.active { box-shadow: 0px 0px 5px rgba(0,0,0,0.2); } #rowFiltrosVO .divMarca.active:before { content: "\f058"; position: absolute; top: 5px; right: 5px; } #rowFiltrosVO .divMarca.active:before { font-family: "FontAwesome"; font-size: 16px; color: #009933; line-height: 100%; } #rowFiltrosVO .divMarca.active:not(.all):hover:before { content: "\f057"; font-size: 24px; color: #FF0000; } #rowFiltrosVO .divCarroceria:not(.active) { filter: grayscale(100%); opacity: 0.6; } #rowFiltrosVO .divCarroceria.disabled { filter: grayscale(100%); opacity: 0.05; cursor: default; pointer-events: none; } #rowFiltrosVO .divCarroceria.active span { font-weight: 600; } #rowFiltrosVO .divCarroceria.active:before { content: "\f058"; position: absolute; top: 0px; right: 0px; } #rowFiltrosVO .divCarroceria.active:before { font-family: "FontAwesome"; font-size: 16px; color: #009933; line-height: 100%; } #rowFiltrosVO .divCarroceria.active:not(.all):hover:before { content: "\f057"; font-size: 24px; color: #FF0000; } #rowFiltrosVO .divCombustible:not(.active) { filter: grayscale(100%); opacity: 0.6; } #rowFiltrosVO .divCombustible.disabled { filter: grayscale(100%); opacity: 0.05; cursor: default; pointer-events: none; } #rowFiltrosVO .divCombustible.active span { font-weight: 600; } #rowFiltrosVO .divCombustible.active:before { content: "\f058"; position: absolute; top: 8px; right: 5px; width: 15px; height: 15px; line-height: 15px; } #rowFiltrosVO .divCombustible.active:before { background: #FFFFFF; border: solid 1px #FFFFFF; border-radius: 50%; } #rowFiltrosVO .divCombustible.active:before { display: flex; align-items: center; justify-content: center; } #rowFiltrosVO .divCombustible.active:before { font-family: "FontAwesome"; font-size: 16px; color: #009933; } #rowFiltrosVO .divCombustible.active:not(.all):hover:before { content: "\f057"; top: 6px; width: 18px; height: 18px; font-size: 20px; color: #FF0000; } @media (max-width: 1380px) { #rowFiltrosVO .divFiltrosVO { padding: 0px 20px; } } @media (max-width: 980px) { #rowFiltrosVO .divMarca.active:not(.all):hover:before { font-size: 20px; } #rowFiltrosVO .divCarroceria { margin: 10px 6px 5px 6px; } #rowFiltrosVO .divCarroceria:after { padding-top: 65%; } #rowFiltrosVO .divCarroceria.active:before { top: -5px; } #rowFiltrosVO .divCarroceria.active:not(.all):hover:before { font-size: 20px; } #rowFiltrosVO .divCombustible { margin: 5px 10px 5px 0px; padding: 6px 0px 2px 8px; width: 100px; } #rowFiltrosVO .divCombustible span { font-size: 16px; } #rowFiltrosVO .divCombustible.active:before { top: 9px; width: 13px; height: 13px; font-size: 15px; line-height: 13px; } #rowFiltrosVO .divCombustible.active:not(.all):hover:before { top: 9px; width: 14px; height: 14px; font-size: 16px; line-height: 14px; } #rowFiltrosVO .divOrden { padding: 8px 12px 6px 12px; } #rowFiltrosVO .divOrden span { font-size: 16px; } #rowFiltrosVO .divOrden i { font-size: 16px; } } @media (max-width: 780px) { #rowFiltrosVO .divMarca.active:before { top: 3px; right: 3px; } #rowFiltrosVO .divCombustible { padding: 4px 0px 2px 8px; width: 90px; } #rowFiltrosVO .divCombustible span { font-size: 14px; } #rowFiltrosVO .divCombustible.active:before { top: 7px; } #rowFiltrosVO .divCombustible.active:not(.all):hover:before { top: 7px; } #rowFiltrosVO .divFiltroOrdenar { margin-top: 10px; width: 190px; } #rowFiltrosVO .divOrden { margin: 5px 0px; padding: 9px 0px 5px 0px; } #rowFiltrosVO .divOrden:nth-of-type(1) { margin-right: 10px; width: 90px; } #rowFiltrosVO .divOrden:nth-of-type(2) { width: 90px; } #rowFiltrosVO .divOrden:nth-of-type(3) { width: 190px; } #rowFiltrosVO .divOrden span { font-size: 14px; } #rowFiltrosVO .divOrden i { font-size: 14px; } } @media (max-width: 680px) { #rowFiltrosVO .divFiltroCombustibles { margin-top: 10px; width: 100%; } #rowFiltrosVO .divCombustibles { justify-content: center; } #rowFiltrosVO .divCombustible { margin: 5px !important; width: 90px; } #rowFiltrosVO .divFiltroOrdenar { width: 100%; } #rowFiltrosVO .divOrdenar { justify-content: center; } #rowFiltrosVO .divOrden { margin: 5px !important; width: 90px; } #rowFiltrosVO .divOrden:nth-of-type(3) { width: 190px; } } @media (max-width: 580px) { #rowFiltrosVO .divMarca.active:not(.all):hover:before { font-size: 18px; } #rowFiltrosVO .divCarroceria.active:not(.all):hover:before { font-size: 18px; } } @media (max-width: 480px) { #rowFiltrosVO .divFiltrosVO { padding: 0px; } #rowFiltrosVO .divFiltros { padding: 0px; } #rowFiltrosVO .divHeadingPlegable { padding: 5px; font-size: 14px; font-weight: 400; } #rowFiltrosVO .divHeadingPlegable { color: #FFFFFF; background: var(--color1-hex); border-bottom: solid 1px #FFFFFF; } #rowFiltrosVO .divHeadingPlegable { display: flex; align-items: center; justify-content: center; cursor: pointer; } #rowFiltrosVO .divHeadingPlegable i { margin-left: 10px; font-size: 24px; } #rowFiltrosVO .divHeadingPlegable:hover { background: var(--color3-hex); } #rowFiltrosVO .divContenedorPlegable { display: none; } #rowFiltrosVO .divMarcas { padding: 10px; } #rowFiltrosVO .divMarca { margin: 4px; width: calc(20% - 8px); min-width: auto; background-size: 95%; } #rowFiltrosVO .divMarca.active { box-shadow: 0px 0px 2px rgba(0,0,0,0.2); } #rowFiltrosVO .divMarca.active:before { top: -6px; right: 4px; } #rowFiltrosVO .divMarca.active:before { font-size: 14px; } #rowFiltrosVO .divMarca.active:not(.all):hover:before { font-size: 16px; } #rowFiltrosVO .divCarrocerias { padding: 10px; } #rowFiltrosVO .divCarroceria { margin: 4px 2px; width: calc(25% - 4px) !important; min-width: auto; } #rowFiltrosVO .divCarroceria:after { padding-top: 70%; } #rowFiltrosVO .divCarroceria span { margin: 0px -10px; width: calc(100% + 20px); font-size: 13px; white-space: nowrap; } #rowFiltrosVO .divCarroceria.active:not(.all):hover:before { font-size: 16px; } #rowFiltrosVO .divFiltroCombustibles { margin: 0px; } #rowFiltrosVO .divCombustibles { flex-wrap: nowrap; } #rowFiltrosVO .divCombustible { margin: 0px !important; padding: 6px 0px; width: 100%; } #rowFiltrosVO .divCombustible { border: solid 1px #FFFFFF; border-radius: 0px; text-align: center; box-shadow: none; } #rowFiltrosVO .divCombustible span { font-size: 14px; text-shadow: none; } #rowFiltrosVO .divCombustible.active:before { top: -6px; right: 3px; width: 12px; height: 12px; font-size: 14px; line-height: 12px; } #rowFiltrosVO .divCombustible.active:not(.all):hover:before { top: -6px; } #rowFiltrosVO .divOrdenar { padding: 0px 20px; } #rowFiltrosVO .divOrden { margin: 0px !important; padding: 10px 0px; width: 33.33% !important; } #rowFiltrosVO .divOrden { border: solid 1px #FFFFFF; border-radius: 0px; box-shadow: none; } #rowFiltrosVO .divOrden span { text-shadow: none; } #rowFiltrosVO .divOrden .spanCorto { display: initial; } #rowFiltrosVO .divOrden .spanLargo { display: none; } } /***************************************** #rowListadoVO *****************************************/ #rowListadoVO * { -webkit-transition: all 0.2s ease; transition: all 0.2s ease; } #rowListadoVO .divListadoVO { margin: auto; max-width: 1280px; } #rowListadoVO .divHeading h1 { padding: 10px 0px; font-size: 24px !important; font-weight: 700; text-align: center; } #rowListadoVO .divHeading h2 { padding: 10px 0px; font-size: 18px !important; text-align: center; } #rowListadoVO .divHeading h3 { padding: 0px; font-size: 16px !important; font-style: italic; text-align: center; } #rowListadoVO .divVehiculosOcasion { display: flex; flex-wrap: wrap; justify-content: center; } #rowListadoVO .divVehiculoOcasion { position: relative; margin: 20px; width: calc(25% - 40px); border: solid 1px #DDDDDD; } #rowListadoVO .divFoto { width: 100%; height: 170px; background-repeat: no-repeat; background-position: center center; background-size: cover; } #rowListadoVO .divSello { position: absolute; top: -20px; left: -20px; width: 140px; } #rowListadoVO .divTipo { position: absolute; top: -9px; right: -9px; width: 100px; } #rowListadoVO .divPrecio { height: 60px; color: #FFFFFF; background: var(--color-azu1-hex); } #rowListadoVO .divPrecio { display: flex; align-items: center; justify-content: space-evenly; } #rowListadoVO .divPrecio .spanPrecioTachado { font-size: 16px; font-weight: 400; text-decoration: line-through; line-height: 100%; } #rowListadoVO .divPrecio .spanPrecio { font-size: 20px; font-weight: 600; line-height: 100%; } #rowListadoVO .divPrecio.con_cuota .spanTexto { font-size: 14px; font-weight: 400; } #rowListadoVO .divPrecio.con_cuota { justify-content: space-between; } #rowListadoVO .divPrecio.con_cuota div:first-of-type { padding-left: 20px; } #rowListadoVO .divPrecio.con_cuota div:first-of-type .spanPrecio { display: block; } #rowListadoVO .divPrecio.con_cuota div:last-of-type { padding-right: 20px; text-align: center; } #rowListadoVO .divPrecio.con_cuota div:last-of-type span { line-height: 120%; } #rowListadoVO .divPrecio.con_cuota div:last-of-type span:first-of-type { display: block; } #rowListadoVO .divPrecio.con_cuota div:last-of-type span:last-of-type { margin-left: 5px; } #rowListadoVO .divMarcaModeloVersion { display: flex; align-items: center;} #rowListadoVO .divMarca { padding: 5px; width: 60px; height: 60px; } #rowListadoVO .divModeloVersion { padding-left: 10px; width: calc(100% - 70px); color: #000000; line-height: 120%; } #rowListadoVO .divModelo { font-size: 18px; font-weight: 700; line-height: 100%; } #rowListadoVO .divVersion { font-size: 14px; font-weight: 500; line-height: 120%; } #rowListadoVO .divCarroceria { font-family: var(--font-family-fira); font-size: 14px; font-weight: 400; color: #333333; line-height: 120%; } #rowListadoVO .divDatos { display: flex; } #rowListadoVO .divDato { height: 30px; white-space: nowrap; display: flex; align-items: center; justify-content: center; } #rowListadoVO .divDatoKms { width: 33%; } #rowListadoVO .divDatoMatriculacion { width: 34%; border: solid 2px #FFFFFF; border-width: 0px 2px; } #rowListadoVO .divDatoCombustible { width: 33%; } #rowListadoVO .divDato i.mwp { margin-right: 5px; width: 16px; height: 16px; } #rowListadoVO .divDato i.mwp { filter: invert(100%); } #rowListadoVO .divDato span { font-size: 11px; color: #FFFFFF; line-height: 100%; } #rowListadoVO .tipoEstandar .divPrecio { background: var(--color1-hex); } #rowListadoVO .tipoEstandar .divDato { background: #DDDDDD; } #rowListadoVO .tipoEstandar .divDato span { color: var(--color1-hex); } #rowListadoVO .tipoEstandar .divDato i.mwp { filter: invert(35%) sepia(90%) saturate(428%) hue-rotate(173deg) brightness(89%) contrast(95%); } #rowListadoVO .tipoNuevo .divPrecio { background: var(--color-azu1-hex); } #rowListadoVO .tipoNuevo .divDato { background: var(--color-azu1-hex); } #rowListadoVO .tipoNuevo .divDatoKms { width: 50%; border-right: solid 1px #FFFFFF; } #rowListadoVO .tipoNuevo .divDatoMatriculacion { display: none; } #rowListadoVO .tipoNuevo .divDatoCombustible { width: 50%; border-left: solid 1px #FFFFFF; } #rowListadoVO .tipoKm0 .divPrecio { background: var(--color-nar1-hex); } #rowListadoVO .tipoKm0 .divDato { background: var(--color-nar1-hex); } #rowListadoVO .divVehiculoOcasion:hover { box-shadow: 0px 2px 5px rgba(0,0,0,0.2), 0px -2px 5px rgba(0,0,0,0.2), 2px 0px 5px rgba(0,0,0,0.2), -2px 0px 5px rgba(0,0,0,0.2); transform: scale(1.04); } @media (max-width: 1380px) { #rowListadoVO .divListadoVO { padding: 0px 20px; } } @media (max-width: 1180px) { #rowListadoVO .divVehiculoOcasion { width: calc(33.33% - 40px); } } @media (max-width: 1080px) { #rowListadoVO .divVehiculoOcasion { margin: 15px; width: calc(33.33% - 30px); } } @media (max-width: 980px) { #rowListadoVO .divVehiculoOcasion { width: calc(50% - 30px); } #rowListadoVO .divFoto { height: 220px; } #rowListadoVO .divMarca { padding: 10px; width: 80px; height: 80px; } #rowListadoVO .divModeloVersion { width: calc(100% - 90px); } } @media (max-width: 780px) { #rowListadoVO .divListadoVO { padding: 0px 20px; } #rowListadoVO .divHeading h1 { padding: 5px 0px; font-size: 20px !important; } #rowListadoVO .divHeading h2 { padding: 5px 0px; font-size: 16px !important; } #rowListadoVO .divHeading h3 { font-size: 14px !important; } #rowListadoVO .divSello { width: 120px; top: -20px; left: -15px; } #rowListadoVO .divTipo { width: 80px; top: -7px; right: -7px; } #rowListadoVO .divMarca { padding: 5px; width: 60px; height: 60px; } #rowListadoVO .divModeloVersion { width: calc(100% - 70px); } #rowListadoVO .divDato i.mwp { margin-right: 4px; width: 12px; height: 12px; } #rowListadoVO .divVehiculoOcasion:hover { transform: scale(1.02); } } @media (max-width: 680px) { #rowListadoVO .divFoto { height: 180px; } } @media (max-width: 580px) { #rowListadoVO .divHeading h1 { font-size: 18px !important; } #rowListadoVO .divHeading h2 { font-size: 14px !important; } #rowListadoVO .divHeading h3 { font-size: 13px !important; } #rowListadoVO .divVehiculoOcasion { margin: 10px; width: calc(100% - 20px); } #rowListadoVO .divFoto { height: 220px; } #rowListadoVO .divPrecio { height: 60px; } #rowListadoVO .divPrecio.con_cuota .spanTexto { font-size: 16px; } #rowListadoVO .divPrecio.con_cuota div:last-of-type span { margin-left: 0px !important; display: block; line-height: 120%; } #rowListadoVO .divPrecio.con_cuota div:last-of-type span:nth-of-type(2) { display: initial; } #rowListadoVO .divPrecio.con_cuota div:last-of-type span:nth-of-type(3) { margin-left: 5px !important; display: initial; } #rowListadoVO .divMarca { padding: 10px; width: 70px; height: 70px; } #rowListadoVO .divModeloVersion { width: calc(100% - 80px); } #rowListadoVO .divModelo { font-size: 20px; } #rowListadoVO .divVersion { font-size: 16px; } } @media (max-width: 480px) { #rowListadoVO .divVehiculoOcasion { margin: 10px 0px; width: 100%; } #rowListadoVO .divFoto { height: 180px; } }