/* CSS personalizado para Página/s 12 OPINIONES */ /**************************************** GAMA DE COLORES ****************************************/ /* Azul Oscuro: 005376 rgb( 0, 83,118) */ /* Gris: 999999 rgb(153,153,153) */ /* Azul Medio: 8CA8C2 rgb(140,168,194) */ /* Azul Claro: C8D8E8 rgb(200,216,232) */ /* Azul Muy Claro: E0F3FC rgb(224,243,252) */ /* Verde 1: 90C254 rgb(144,194, 84) */ /* Verde 2: C8DDAB rgb(200,221,171) */ /* Verde 3: E6F0D7 rgb(230,240,215) */ /* Naranja 1: FF7711 rgb(255,119, 17) */ /* Naranja 2: FFEEDD rgb(255,238,221) */ /************************************ MODIFICADOS DE syle-home ***********************************/ /***************************************** #rowCabecera ******************************************/ #rowCabecera .divHeading h1 { margin: 0px 90px !important; display: flex; align-items: center; justify-content: center; } #rowCabecera .divHeading h1 img { margin: 0px 10px; width: 150px; filter: brightness(0) invert(1) drop-shadow(0 0 2px var(--color1-hex)); } @media (max-width: 1080px) { #rowCabecera .divHeading h1 img { width: 130px; } } @media (max-width: 980px) { #rowCabecera .divHeading h1 { margin: 0px 80px !important;} #rowCabecera .divHeading h1 img { width: 110px; } } @media (max-width: 780px) { #rowCabecera .divHeading h1 { margin: 0px 60px !important;} #rowCabecera .divHeading h1 img { width: 100px; } } @media (max-width: 580px) { #rowCabecera .divHeading h1 { margin: 0px 50px !important;} #rowCabecera .divHeading h1 img { width: 90px; } } @media (max-width: 480px) { #rowCabecera .divHeading h1 { margin: 0px 40px !important;} #rowCabecera .divHeading h1 img { width: 70px; } } /*************************************** #rowGridOpiniones ***************************************/ #rowGridOpiniones * { -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } #rowGridOpiniones .divGridOpiniones { margin-top: 60px; } #rowGridOpiniones .divValoracionGeneral .divIconos { display: flex; justify-content: center; } #rowGridOpiniones .divValoracionGeneral .divIcono { margin: 0px 10px; line-height: 0px; } #rowGridOpiniones .divValoracionGeneral .divEstrellas { margin: 20px 0px; display: flex; justify-content: center; } #rowGridOpiniones .divValoracionGeneral .divEstrellas i { margin: 0px 5px; font-size: 40px; color: var(--color-star-hex); } #rowGridOpiniones .divValoracionGeneral .divTexto { color: #000000; text-align: center; } #rowGridOpiniones .divValoracionGeneral .divTexto span { font-size: 24px; display: block; } #rowGridOpiniones .divValoracionGeneral .divTexto span:first-of-type { font-size: 30px; font-weight: 900; } #rowGridOpiniones .divTypeList { margin-top: 40px; display: flex; align-items: center; justify-content: center; } #rowGridOpiniones .divTypeList span { margin: 0px 5px; width: 40px; height: 40px; font-size: 40px; cursor: pointer; } #rowGridOpiniones .divTypeList span:hover { transform: scale(1.1); } @media (max-width: 1080px) { #rowGridOpiniones .divValoracionGeneral .divIcono { width: 48px; } #rowGridOpiniones .divValoracionGeneral .divEstrellas { margin: 15px 0px; } #rowGridOpiniones .divValoracionGeneral .divEstrellas i { font-size: 36px; } #rowGridOpiniones .divValoracionGeneral .divTexto span { font-size: 24px; } #rowGridOpiniones .divValoracionGeneral .divTexto span:first-of-type { font-size: 30px; } } @media (max-width: 780px) { #rowGridOpiniones .divGridOpiniones { margin-top: 40px; } #rowGridOpiniones .divValoracionGeneral .divIcono { margin: 0px 5px; width: 40px; } #rowGridOpiniones .divValoracionGeneral .divEstrellas { margin: 15px 0px 10px 0px; } #rowGridOpiniones .divValoracionGeneral .divEstrellas i { font-size: 32px; } #rowGridOpiniones .divValoracionGeneral .divTexto span { font-size: 20px; } #rowGridOpiniones .divValoracionGeneral .divTexto span:first-of-type { font-size: 24px; } } /************************************* .divOpiniones.typeGrid ************************************/ :root { --divOpinion-margin-grid: 15px; --divOpinion-padding-grid: 15px; --divOpinion-width-grid: 25%; --divOpinion-height-grid: 350px; --divCabecera-height-grid: 70px; --divFoto-width-grid: 50px; --divValoracion-height-grid: 100px; --divVehiculo-width-grid: 140px; } #rowGridOpiniones .divOpiniones.typeGrid { margin: 20px 40px 0px 40px; display: flex; flex-wrap: wrap; justify-content: center; } #rowGridOpiniones .typeGrid .divOpinion { margin: var(--divOpinion-margin-grid); padding: var(--divOpinion-padding-grid); } #rowGridOpiniones .typeGrid .divOpinion { width: calc(var(--divOpinion-width-grid) - (var(--divOpinion-margin-grid) * 2)); } #rowGridOpiniones .typeGrid .divOpinion { height: var(--divOpinion-height-grid); } #rowGridOpiniones .typeGrid .divOpinion { border: solid 2px #CCCCCC; border-radius: 5px; } #rowGridOpiniones .typeGrid .divOpinion .divCabecera { position: relative; height: var(--divCabecera-height-grid); display: flex; } #rowGridOpiniones .typeGrid .divOpinion .divFoto { padding-right: 10px; width: var(--divFoto-width-grid); line-height: 0px; } #rowGridOpiniones .typeGrid .divOpinion .divFoto img { width: 100%; } #rowGridOpiniones .typeGrid .divOpinion .divFoto i { font-size: calc(var(--divFoto-width-grid) - 10px); color: var(--color-star-hex); } #rowGridOpiniones .typeGrid .divOpinion .divDatos { width: calc(100% - var(--divFoto-width-grid)); } #rowGridOpiniones .typeGrid .divOpinion .divDatos span { font-size: 16px; display: block; line-height: 130%; } #rowGridOpiniones .typeGrid .divOpinion .divDatos .spanNombre { padding-right: 35px; font-size: 20px; font-weight: 600; cursor: default; } #rowGridOpiniones .typeGrid .divOpinion .divDatos .spanNombre span { font-size: 16px; } #rowGridOpiniones .typeGrid .divOpinion .divDatos .spanFecha { cursor: default; } #rowGridOpiniones .typeGrid .divOpinion .divDatos a { color: var(--color1-hex); text-decoration: none; } #rowGridOpiniones .typeGrid .divOpinion .divDatos a:hover { text-decoration: underline; } #rowGridOpiniones .typeGrid .divOpinion .divPlataforma { position: absolute; top: 0px; right: 0px; width: 30px; line-height: 0px; } #rowGridOpiniones .typeGrid .divOpinion .divPlataforma img { width: 100%; } #rowGridOpiniones .typeGrid .divOpinion .divValoracion { height: var(--divValoracion-height-grid); display: flex; align-items: center; justify-content: space-between; } #rowGridOpiniones .typeGrid .divOpinion .divEstrellas { margin: 0px; display: block; } #rowGridOpiniones .typeGrid .divOpinion .divEstrellas i { margin-right: 0px 5px 0px 0px; font-size: 24px; color: var(--color-star-hex); } #rowGridOpiniones .typeGrid .divOpinion .divVehiculo { width: var(--divVehiculo-width-grid); line-height: 0px; } #rowGridOpiniones .typeGrid .divOpinion .divVehiculo img { width: 100%; } #rowGridOpiniones .typeGrid .divOpinion .divComentario { height: calc(100% - var(--divCabecera-height-grid) - var(--divValoracion-height-grid)); } #rowGridOpiniones .typeGrid .divOpinion .divComentario { color: #000000; overflow: auto; } #rowGridOpiniones .typeGrid .divOpinion .divComentario::-webkit-scrollbar { width: 4px; } #rowGridOpiniones .typeGrid .divOpinion .divComentario::-webkit-scrollbar-track { background: #EEEEEE; border-radius: 2px; } #rowGridOpiniones .typeGrid .divOpinion .divComentario::-webkit-scrollbar-thumb { background: var(--color2-hex); border-radius: 2px; } #rowGridOpiniones .typeGrid .divOpinion .divComentario::-webkit-scrollbar-thumb:hover { background: var(--color2-hex); } #rowGridOpiniones .typeGrid .divOpinion .divComentario p { margin: 6px 10px 6px 0px; font-size: 16px; line-height: 130%; } #rowGridOpiniones .typeGrid .divOpinion .divComentario p:first-of-type { margin-top: 0px; } #rowGridOpiniones .typeGrid .divOpinion .divComentario p:last-of-type { margin-bottom: 0px; } @media (max-width: 1480px) { :root { --divOpinion-width-grid: 33%; } } @media (max-width: 1180px) { :root { --divVehiculo-width-grid: 120px; } } @media (max-width: 1080px) { :root { --divOpinion-margin-grid: 10px; --divOpinion-height-grid: 350px; --divCabecera-height-grid: 60px; --divValoracion-height-grid: 90px; } #rowGridOpiniones .divOpiniones.typeGrid { margin: 40px 20px 0px 20px; } #rowGridOpiniones .typeGrid .divOpinion .divDatos span { font-size: 14px; } #rowGridOpiniones .typeGrid .divOpinion .divDatos .spanNombre { padding-right: 35px; font-size: 18px; } #rowGridOpiniones .typeGrid .divOpinion .divDatos .spanNombre span { font-size: 14px; } #rowGridOpiniones .typeGrid .divOpinion .divPlataforma { width: 24px; } #rowGridOpiniones .typeGrid .divOpinion .divEstrellas i { font-size: 20px; } #rowGridOpiniones .typeGrid .divOpinion .divComentario p { font-size: 14px; } } @media (max-width: 980px) { :root { --divOpinion-width-grid: 50%; } } @media (max-width: 780px) { :root { --divOpinion-height-grid: 310px; --divValoracion-height-grid: 70px; --divVehiculo-width-grid: 100px; } #rowGridOpiniones .divOpiniones.typeGrid { margin: 20px 0px 0px 0px; } #rowGridOpiniones .typeGrid .divOpinion .divDatos span { font-size: 13px; } #rowGridOpiniones .typeGrid .divOpinion .divDatos .spanNombre { font-size: 16px; } #rowGridOpiniones .typeGrid .divOpinion .divDatos .spanNombre span { font-size: 13px; } #rowGridOpiniones .typeGrid .divOpinion .divPlataforma { width: 22px; } #rowGridOpiniones .typeGrid .divOpinion .divEstrellas i { font-size: 18px; } } @media (max-width: 580px) { :root { --divOpinion-width-grid: 100%; --divOpinion-height-grid: auto; --divCabecera-height-grid: auto; --divValoracion-height-grid: auto; --divVehiculo-width-grid: 160px; } #rowGridOpiniones .typeGrid .divOpinion .divDatos span { font-size: 14px; } #rowGridOpiniones .typeGrid .divOpinion .divDatos .spanNombre { font-size: 18px; } #rowGridOpiniones .typeGrid .divOpinion .divDatos .spanNombre span { font-size: 14px; } #rowGridOpiniones .typeGrid .divOpinion .divValoracion { margin: 5px 0px 10px 0px; } #rowGridOpiniones .typeGrid .divOpinion .divPlataforma { width: 24px; } #rowGridOpiniones .typeGrid .divOpinion .divEstrellas i { font-size: 20px; } } @media (max-width: 380px) { :root { --divVehiculo-width-grid: 120px; } #rowGridOpiniones .typeGrid .divOpinion .divDatos span { font-size: 13px; } #rowGridOpiniones .typeGrid .divOpinion .divDatos .spanNombre { font-size: 16px; } #rowGridOpiniones .typeGrid .divOpinion .divDatos .spanNombre span { font-size: 13px; } #rowGridOpiniones .typeGrid .divOpinion .divPlataforma { width: 22px; } #rowGridOpiniones .typeGrid .divOpinion .divEstrellas i { font-size: 18px; } } /************************************* .divOpiniones.typeList ************************************/ :root { --divOpinion-margin-list: 15px; --divFoto-width-list: 50px; --divVehiculo-width-list: 200px; } #rowGridOpiniones .divOpiniones.typeList { margin: 20px auto 0px auto; max-width: 1080px; display: flex; flex-wrap: wrap; justify-content: center; } #rowGridOpiniones .typeList .divOpinion { position: relative; margin: var(--divOpinion-margin-list); padding-bottom: 20px; } #rowGridOpiniones .typeList .divOpinion { width: 100%; } #rowGridOpiniones .typeList .divOpinion { border: solid 1px #CCCCCC; border-width: 0px 0px 1px 0px; border-radius: 0px; } #rowGridOpiniones .typeList .divOpinion .divCabecera { position: relative; display: flex; } #rowGridOpiniones .typeList .divOpinion .divFoto { padding-right: 10px; width: var(--divFoto-width-list); line-height: 0px; } #rowGridOpiniones .typeList .divOpinion .divFoto img { width: 100%; } #rowGridOpiniones .typeList .divOpinion .divFoto i { font-size: calc(var(--divFoto-width-list) - 10px); color: var(--color-star-hex); } #rowGridOpiniones .typeList .divOpinion .divDatos { width: calc(100% - var(--divFoto-width-list)); } #rowGridOpiniones .typeList .divOpinion .divDatos span { font-size: 16px; display: block; line-height: 130%; } #rowGridOpiniones .typeList .divOpinion .divDatos .spanNombre { padding-right: 35px; font-size: 20px; font-weight: 600; cursor: default; } #rowGridOpiniones .typeList .divOpinion .divDatos .spanNombre span { font-size: 16px; } #rowGridOpiniones .typeList .divOpinion .divDatos .spanFecha { cursor: default; } #rowGridOpiniones .typeList .divOpinion .divDatos a { color: var(--color1-hex); text-decoration: none; } #rowGridOpiniones .typeList .divOpinion .divDatos a:hover { text-decoration: underline; } #rowGridOpiniones .typeList .divOpinion .divPlataforma { position: absolute; top: 0px; right: 0px; width: 30px; line-height: 0px; } #rowGridOpiniones .typeList .divOpinion .divPlataforma img { width: 100%; } #rowGridOpiniones .typeList .divOpinion .divValoracion { margin-top: 10px; padding-left: var(--divFoto-width-list); } #rowGridOpiniones .typeList .divOpinion .divEstrellas { margin: 0px; display: block; } #rowGridOpiniones .typeList .divOpinion .divEstrellas i { margin-right: 0px 5px 0px 0px; font-size: 24px; color: var(--color-star-hex); } #rowGridOpiniones .typeList .divOpinion .divVehiculo { position: absolute; top: 0px; right: 20px; width: var(--divVehiculo-width-list); line-height: 0px; } #rowGridOpiniones .typeList .divOpinion .divVehiculo img { width: 100%; } #rowGridOpiniones .typeList .divOpinion .divComentario { margin-top: 10px; padding-left: var(--divFoto-width-list); padding-right: calc(var(--divVehiculo-width-list) + 20px); } #rowGridOpiniones .typeList .divOpinion .divComentario p { margin: 6px 10px 6px 0px; font-size: 16px; color: #000000; line-height: 130%; text-align: justify; } #rowGridOpiniones .typeList .divOpinion .divComentario p:first-of-type { margin-top: 0px; } #rowGridOpiniones .typeList .divOpinion .divComentario p:last-of-type { margin-bottom: 0px; } @media (max-width: 1180px) { :root { --divOpinion-margin-list: 15px 40px 15px 40px; } } @media (max-width: 980px) { :root { --divVehiculo-width-list: 160px; } #rowGridOpiniones .typeList .divOpinion .divDatos span { font-size: 14px; } #rowGridOpiniones .typeList .divOpinion .divDatos .spanNombre { font-size: 18px; } #rowGridOpiniones .typeList .divOpinion .divDatos .spanNombre span { font-size: 14px; } #rowGridOpiniones .typeList .divOpinion .divPlataforma { width: 24px; } #rowGridOpiniones .typeList .divOpinion .divEstrellas i { font-size: 20px; } #rowGridOpiniones .typeList .divOpinion .divComentario p { font-size: 14px; } } @media (max-width: 780px) { :root { --divVehiculo-width-list: 140px; } #rowGridOpiniones .typeList .divOpinion .divDatos span { font-size: 13px; } #rowGridOpiniones .typeList .divOpinion .divDatos .spanNombre { font-size: 16px; } #rowGridOpiniones .typeList .divOpinion .divDatos .spanNombre span { font-size: 13px; } #rowGridOpiniones .typeList .divOpinion .divPlataforma { width: 22px; } #rowGridOpiniones .typeList .divOpinion .divEstrellas i { font-size: 18px; } #rowGridOpiniones .typeList .divOpinion .divComentario { padding-right: 0px; } } @media (max-width: 580px) { :root { --divOpinion-margin-list: 15px 20px 15px 20px; --divVehiculo-width-list: 120px; } #rowGridOpiniones .typeList .divOpinion .divVehiculo { top: 10px; right: 0px; } } @media (max-width: 480px) { :root { --divOpinion-margin-list: 10px 0px; --divFoto-width-list: 40px; } #rowGridOpiniones .typeList .divOpinion .divVehiculo { position: relative; top: auto; right: auto; margin-top: 5px; } #rowGridOpiniones .typeList .divOpinion .divComentario p { font-size: 13px; text-align: left; } }