/* CSS personalizado para 11 CONTACTAR */ /**************************************** GAMA DE COLORES ****************************************/ /* Azul Oscuro: 2E65AE rgb( 46,101,174) */ /* Gris: 999999 rgb(153,153,153) */ /* Azul Medio: 96B2D6 rgb(150,178,214) */ /* Azul Claro: CAD8EA rgb(202,216,234) */ /* Azul Muy Claro: E4EBF4 rgb(228,235,244) */ /* 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 ***********************************/ /***************************************** #rowContactar *****************************************/ #rowContactar .divContactar { display: flex; justify-content: space-between; } #rowContactar .divIzda { padding: 20px 30px; width: 300px; background: var(--color5-hex); } #rowContactar .divDcha { width: calc(100% - 300px - 40px); } #rowContactar .divIzda * { font-family: var(--font-family-narrow); -webkit-transition: all 0.5s ease; transition: all 0.5s ease; } #rowContactar .divIzda .fa { font-family: "FontAwesome"; } #rowContactar .divIzda .divLogo { margin: auto; width: 200px; max-width: 100%; } #rowContactar .divIzda .divFoto { line-height: 0px; } #rowContactar .divIzda .divTitulo { margin-top: 20px; font-size: 18px; font-weight: 600; color: var(--color1-hex); text-align: center; } #rowContactar .divIzda ul { margin: 15px auto 0px auto; list-style-type: none; } #rowContactar .divIzda ul li { margin-bottom: 5px; } #rowContactar .divIzda ul li * { font-family: var(--font-family-extra-narrow); -webkit-transition: all 0.5s ease; transition: all 0.5s ease; } #rowContactar .divIzda ul li a { color: var(--color-azu1-hex); font-weight: 400; } #rowContactar .divIzda ul li a:hover { color: var(--color-azu2-hex); } #rowContactar .divIzda ul li a i { color: var(--color1-hex); } #rowContactar .divIzda .divMarcas { margin-top: 20px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; } #rowContactar .divIzda .divMarca { padding: 0px 10px; width: 41%; line-height: 0px; } #rowContactar .divIzda .divMarca a { display: block; line-height: 0px; } #rowContactar .divIzda .divMarca:hover { transform: scale(1.1); } #rowContactar .divDcha .divFoto { height: 160px; line-height: 0px; overflow: hidden; } #rowContactar .divDcha .divGallery { margin-top: 5px; display: flex; flex-wrap: wrap; justify-content: space-between; } #rowContactar .divDcha .divSlide { margin: 2px 0px; width: calc(25% - 4px); line-height: 0px; overflow: hidden; } #rowContactar .divDcha .divSlide * { -webkit-transition: all 0.5s ease; transition: all 0.5s ease; } #rowContactar .divDcha .divSlide a { display: block; line-height: 0px; } #rowContactar .divDcha .divSlide:hover img { transform: scale(1.2); } #rowContactar .divDcha .divFormContactar { margin-top: 20px; } #rowContactar .divDcha .divFormContactar .divCabecera { padding: 20px 0px; background: var(--color1-hex); border-radius: 20px 20px 0px 0px; } #rowContactar .divDcha .divFormContactar .divCabecera * { -webkit-transition: all 0.5s ease; transition: all 0.5s ease; } #rowContactar .divDcha .divFormContactar .divCabecera h2 { font-family: var(--font-family-extra-narrow) !important; font-size: 30px; color: #FFFFFF; text-align: center; } #rowContactar .divDcha .divFormContactar .divCabecera h6 { font-family: var(--font-family-extra-narrow) !important; font-size: 16px; color: var(--color5-hex); text-align: center; } #rowContactar .divDcha .divFormCF7 { padding-top: 0px; border-radius: 0px 0px 20px 20px; box-shadow: 0px 30px 10px -25px rgba(0,0,0,0.5); } #rowContactar .divDcha .divFormCF7 * { -webkit-transition: all 0.5s ease; transition: all 0.5s ease; } #rowContactar .divDcha .divFormContactar .divFieldNombre { width: calc(50% - 10px); } #rowContactar .divDcha .divFormContactar .divFieldApellidos { width: calc(50% - 10px); } #rowContactar .divDcha .divFormContactar .divFieldMail { width: calc(50% - 10px); } #rowContactar .divDcha .divFormContactar .divFieldTelefono { width: calc(50% - 10px); } #rowContactar .divDcha .divFormContactar .divFieldMensaje { width: 100%; } #rowContactar .divDcha .divFormContactar .divFieldAcepto { margin: auto; width: 355px; align-items: flex-start; } #rowContactar .divDcha .divFormContactar .divFieldSubmit { width: 100%; justify-content: center; } @media (max-width: 1180px) { #rowContactar .divContactar { padding: 0px 20px; } } @media (max-width: 1080px) { #rowContactar .divDcha .divCabecera h2 { font-size: 28px; } } @media (max-width: 980px) { #rowContactar .divDcha .divCabecera h2 { margin: auto !important; width: 240px; font-size: 24px; } #rowContactar .divDcha .divCabecera h6 { margin: auto !important; width: 240px; } #rowContactar .divDcha .divFoto { height: auto; } #rowContactar .divDcha .divSlide { width: calc(33.33% - 4px); } } @media (max-width: 780px) { #rowContactar .divContactar { flex-wrap: wrap; } #rowContactar .divIzda { padding: 0px 0px; width: 100%; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; } #rowContactar .divIzda .divCabecera { margin: 0px; padding: 10px; width: 100%; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; } #rowContactar .divIzda .divLogo { margin: 0px; padding: 10px; width: 180px; } #rowContactar .divIzda .divFoto { margin: 0px; padding: 10px; width: calc(100% - 180px - 210px); max-width: 180px; } #rowContactar .divIzda .divTitulo { margin: 0px; padding: 10px; width: 210px; } #rowContactar .divIzda .divEnlaces { margin: 0px; padding: 10px; width: 100%; } #rowContactar .divIzda .divEnlaces ul { margin: 0px 0px 10px 0px; display: flex; align-items: center; justify-content: center; } #rowContactar .divIzda .divEnlaces li { margin: 0px 10px; } #rowContactar .divIzda .divEnlaces .fa-li { position: initial; left: auto; margin-right: 10px; width: auto; } #rowContactar .divIzda .divMarcas { margin-top: 0px; justify-content: center; } #rowContactar .divIzda .divMarca { padding: 10px; width: calc(100% / 7); } #rowContactar .divDcha { margin-top: 20px; width: 100%; } #rowContactar .divDcha .divSlide { width: calc(25% - 4px); } } @media (max-width: 680px) { #rowContactar .divIzda .divLogo { width: 160px; } #rowContactar .divIzda .divFoto { width: 160px; } #rowContactar .divIzda .divTitulo { width: 100%; max-width: 300px; } #rowContactar .divIzda .divTitulo br { content: ""; margin-left: 5px; } #rowContactar .divIzda .divEnlaces { padding: 0px; } #rowContactar .divIzda .divEnlaces ul { margin: 0px auto 10px auto; width: 230px; display: table; } #rowContactar .divIzda .divEnlaces li { margin: 0px 10px; } #rowContactar .divIzda .divEnlaces .fa-li { position: initial; left: auto; margin-right: 10px; width: auto; } } @media (max-width: 580px) { #rowContactar .divIzda .divMarca { padding: 5px; } #rowContactar .divDcha .divSlide { width: calc(33.33% - 4px); } } @media (max-width: 480px) { #rowContactar .divIzda .divCabecera { flex-direction: column; } #rowContactar .divIzda .divLogo { padding: 0px; } #rowContactar .divIzda .divFoto { padding: 0px; } #rowContactar .divIzda ul { width: 205px; } #rowContactar .divIzda ul li { margin-bottom: 0px; line-height: 100%; } #rowContactar .divIzda ul li a { font-size: 14px; } #rowContactar .divIzda .divMarca { margin-top: -20px; padding: 0px 10px; } #rowContactar .divIzda .divMarcaEbro { width: 30%; } #rowContactar .divIzda .divMarcaOmoda { width: 30%; } #rowContactar .divIzda .divMarcaJaecoo { width: 30%; } #rowContactar .divIzda .divMarcaPeugeot { width: 25%; } #rowContactar .divIzda .divMarcaMazda { width: 25%; } #rowContactar .divIzda .divMarcaSWM { width: 25%; } #rowContactar .divIzda .divMarcaSuzuki { width: 25%; } #rowContactar .divDcha .divFormContactar .divFieldNombre { width: 100%; } #rowContactar .divDcha .divFormContactar .divFieldApellidos { width: 100%; } #rowContactar .divDcha .divFormContactar .divFieldMail { width: 100%; } #rowContactar .divDcha .divFormContactar .divFieldTelefono { width: 100%; } } @media (max-width: 420px) { #rowContactar .divContactar { padding: 0px; } } @media (max-width: 380px) { #rowContactar .divIzda .divTitulo { font-size: 16px; } #rowContactar .divDcha .divSlide { width: calc(50% - 2px); } #rowContactar .divDcha .divFormContactar .divFieldNombre { width: 100%; } #rowContactar .divDcha .divFormContactar .divFieldApellidos { width: 100%; } #rowContactar .divDcha .divFormContactar .divFieldMail { width: 100%; } #rowContactar .divDcha .divFormContactar .divFieldTelefono { width: 100%; } } /**************************************** #rowUbicaciones ****************************************/ #rowUbicaciones .divUbicacion { margin-top: 30px; border: solid 1px #DDDDDD; display: flex; justify-content: space-between; box-shadow: 0px 4px 0px var(--color-azu1-hex); } #rowUbicaciones .divUbicacion { border: solid 1px #DDDDDD; display: flex; flex-wrap: wrap; justify-content: space-between; } #rowUbicaciones .divSede { padding: 10px; width: 50%; } #rowUbicaciones .divMapa { padding: 10px; width: 50%; line-height: 0px; } #rowUbicaciones .divUbicacion * { font-family: var(--font-family-narrow); -webkit-transition: all 0.5s ease; transition: all 0.5s ease; } #rowUbicaciones .divUbicacion .fa { font-family: "FontAwesome"; } #rowUbicaciones .divSede .divNombre { padding: 10px; width: 100%; font-size: 24px; font-weight: 600; color: #FFFFFF; background: var(--color1-hex); text-align: center; } #rowUbicaciones .divSede ul { margin: 30px 0px 0px 20px; font-size: 18px; font-weight: 400; list-style-type: none; } #rowUbicaciones .divSede ul li { margin-bottom: 20px; } #rowUbicaciones .divSede .divMarcas { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; } #rowUbicaciones .divSede .divMarca { padding: 0px 5px; width: calc(100% / 7); line-height: 0px; } #rowUbicaciones .divSede .divMarca a { display: block; line-height: 0px; } #rowUbicaciones .divSede .divMarca:hover { transform: scale(1.1); } @media (max-width: 1180px) { #rowUbicaciones .divUbicaciones { padding: 0px 20px; } } @media (max-width: 980px) { #rowUbicaciones .divSede .divNombre { padding: 5px 10px; font-size: 20px; } #rowUbicaciones .divSede ul { margin: 20px 0px 0px 15px; font-size: 16px; } #rowUbicaciones .divSede ul li { margin-bottom: 15px; } } @media (max-width: 780px) { #rowUbicaciones .divSede { width: 100%; } #rowUbicaciones .divSede ul { position: relative; margin: 20px auto 0px auto; font-size: 14px; } #rowUbicaciones .divSede ul li { margin-bottom: 0px; } #rowUbicaciones .divSede ul li br1000:before { content: " "; } #rowUbicaciones #divUbicacionTumasaHuesca .divSede ul { width: 510px; } #rowUbicaciones #divUbicacionTumasaHuesca .divSede ul li:nth-of-type(3) { position: absolute; top: 0px; left: 220px; } #rowUbicaciones #divUbicacionTumasaHuesca .divSede ul li:nth-of-type(4) { position: absolute; top: 40px; left: 220px; } #rowUbicaciones #divUbicacionTumasaHuesca .divSede ul li:nth-of-type(5) { position: absolute; top: 80px; left: 220px; } #rowUbicaciones #divUbicacionMotor2002Huesca .divSede ul { width: 430px; } #rowUbicaciones #divUbicacionMotor2002Huesca .divSede ul li:nth-of-type(3) { position: absolute; top: 0px; left: 140px; } #rowUbicaciones #divUbicacionMotor2002Huesca .divSede ul li:nth-of-type(4) { position: absolute; top: 40px; left: 140px; } #rowUbicaciones #divUbicacionTumasaMonzon .divSede ul { width: 510px; } #rowUbicaciones #divUbicacionTumasaMonzon .divSede ul li:nth-of-type(3) { position: absolute; top: 0px; left: 220px; } #rowUbicaciones #divUbicacionTumasaMonzon .divSede ul li:nth-of-type(4) { position: absolute; top: 40px; left: 220px; } #rowUbicaciones .divSede .divMarcas { max-width: none; } #rowUbicaciones .divSede .divMarca { padding: 0px 10px; width: calc(100% / 7); } #rowUbicaciones #divUbicacionTumasaHuesca .divSede .divMarcas { margin-top: 70px; } #rowUbicaciones #divUbicacionTumasaMonzon .divSede .divMarcas { margin-top: 30px; } #rowUbicaciones .divMapa { width: 100%; height: 300px; } } @media (max-width: 680px) { #rowUbicaciones .divSede ul li br1000:before { content: "\A"; } #rowUbicaciones #divUbicacionTumasaHuesca .divSede ul { width: 415px; } #rowUbicaciones #divUbicacionTumasaHuesca .divSede ul li:nth-of-type(4) { top: 60px; } #rowUbicaciones #divUbicacionTumasaHuesca .divSede ul li:nth-of-type(5) { top: 120px; } #rowUbicaciones #divUbicacionMotor2002Huesca .divSede ul { width: 335px; } #rowUbicaciones #divUbicacionMotor2002Huesca .divSede ul li:nth-of-type(4) { top: 58px; } #rowUbicaciones #divUbicacionTumasaMonzon .divSede ul { width: 415px; } #rowUbicaciones #divUbicacionTumasaMonzon .divSede ul li:nth-of-type(4) { top: 58px; } #rowUbicaciones #divUbicacionTumasaHuesca .divSede .divMarcas { margin-top: 140px; } #rowUbicaciones #divUbicacionTumasaMonzon .divSede .divMarcas { margin-top: 70px; } #rowUbicaciones .divMapa { height: 260px; } } @media (max-width: 580px) { #rowUbicaciones .divSede .divNombre { font-size: 18px; } #rowUbicaciones .divSede ul { margin-top: 15px; width: auto !important; } #rowUbicaciones .divSede ul li { margin-bottom: 5px; position: relative !important; top: auto !important; left: auto !important; } #rowUbicaciones .divSede ul li br1000:before { content: " "; } #rowUbicaciones .divSede .divMarcas { margin-top: 5px !important; } #rowUbicaciones .divSede .divMarca { padding: 0px 5px; } #rowUbicaciones .divMapa { padding-top: 0px; height: 240px; } } @media (max-width: 480px) { #rowUbicaciones .divSede ul { font-size: 13px; } #rowUbicaciones .divSede .divMarca { margin-top: -20px; padding: 0px 10px; } #rowUbicaciones .divSede .divMarcaEbro { width: 30%; } #rowUbicaciones .divSede .divMarcaOmoda { width: 30%; } #rowUbicaciones .divSede .divMarcaJaecoo { width: 30%; } #rowUbicaciones .divSede .divMarcaPeugeot { width: 25%; } #rowUbicaciones .divSede .divMarcaMazda { width: 25%; } #rowUbicaciones .divSede .divMarcaSWM { width: 25%; } #rowUbicaciones .divSede .divMarcaSuzuki { width: 25%; } } @media (max-width: 400px) { #rowUbicaciones .divUbicaciones { padding: 0px; } #rowUbicaciones .divSede .divNombre { font-size: 16px; } #rowUbicaciones .divSede ul li br1000:before { content: "\A"; } } @media (max-width: 380px) { #rowUbicaciones .divSede .divMarca { margin-top: -10px; padding: 0px 5px; } }