/* CSS personalizado para Página/s 06 CONTACTAR */ /**************************************** 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 ***********************************/ /****************************************** #rowCuadros ******************************************/ #rowCuadros .divCuadros { margin-top: 80px; display: flex; justify-content: center; } #rowCuadros .divCuadro { margin: 0px 20px; padding: 15px; text-align: center; background: rgba(var(--color5-rgb),0.5); } #rowCuadros .divCuadro { border: solid 4px var(--color1-hex); border-radius: 15px; } #rowCuadros .divCuadro:nth-of-type(1) { width: 380px; } #rowCuadros .divCuadro:nth-of-type(1) .divDato:last-of-type { display: block; } #rowCuadros .divCuadro:nth-of-type(2) { width: 380px; } #rowCuadros .divCuadro:nth-of-type(3) { width: 320px; } #rowCuadros .divTitulo { margin-bottom: 15px; padding-bottom: 10px; font-family: var(--font-family-narrow); font-size: 24px; font-weight: 600; } #rowCuadros .divTitulo { color: var(--color-ver1-hex); border-bottom: solid 1px var(--color-ver1-hex); line-height: 100%; } #rowCuadros .divDato { font-family: var(--font-family-narrow); font-size: 20px; font-weight: 400; color: var(--color1-hex); display: flex; align-items: center; justify-content: center; } #rowCuadros .divDato span { margin-right: 10px; font-family: var(--font-family-narrow); } #rowCuadros .divDato i { margin-right: 5px; } #rowCuadros .divDato a { font-family: var(--font-family-narrow); font-size: 20px; font-weight: 400; text-decoration: none; } @media (max-width: 1180px) { #rowCuadros .divCuadro { margin: 0px 10px; } #rowCuadros .divCuadro:nth-of-type(1) { width: 335px; } #rowCuadros .divCuadro:nth-of-type(2) { width: 365px; } #rowCuadros .divCuadro:nth-of-type(3) { width: 280px; } #rowCuadros .divTitulo { letter-spacing: -0.5px; } } @media (max-width: 1080px) { #rowCuadros .divCuadro:nth-of-type(1) { width: 305px; } #rowCuadros .divCuadro:nth-of-type(2) { width: 335px; } #rowCuadros .divCuadro:nth-of-type(3) { width: 255px; } #rowCuadros .divTitulo { font-size: 22px; } #rowCuadros .divDato { font-size: 18px; } #rowCuadros .divDato a { font-size: 18px; } } @media (max-width: 980px) { #rowCuadros .divCuadro:nth-of-type(1) { width: 275px; } #rowCuadros .divCuadro:nth-of-type(2) { width: 240px; } #rowCuadros .divCuadro:nth-of-type(3) { width: 240px; } #rowCuadros .divTitulo { font-size: 20px; letter-spacing: normal; } #rowCuadros .divDato { font-size: 16px; flex-wrap: wrap; } #rowCuadros .divDato span { width: 100%; } #rowCuadros .divDato a { font-size: 16px; } } @media (max-width: 880px) { #rowCuadros .divCuadro { margin: 0px 5px; } #rowCuadros .divCuadro:nth-of-type(1) { width: 240px; } } @media (max-width: 780px) { #rowCuadros .divCuadros { margin-top: 40px; flex-wrap: wrap; justify-content: center; } #rowCuadros .divCuadro { margin: 10px 0px; width: calc(100% - 40px) !important; max-width: 400px; } #rowCuadros .divTitulo br1000:before { content: " "; } #rowCuadros .divDato br900:before { content: " "; } #rowCuadros .divDato span { width: auto; } } @media (max-width: 580px) { #rowCuadros .divCuadro { padding: 10px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; } #rowCuadros .divTitulo { margin-bottom: 10px; padding-bottom: 2px; width: 100%; } #rowCuadros .divDato { margin: 0px 10px; } } @media (max-width: 380px) { #rowCuadros .divTitulo br1000:before { content: "\A"; } #rowCuadros .divDato br900:before { content: "\A"; } #rowCuadros .divDato span { width: 100%; } } /******************************************* #rowSedes *******************************************/ #rowSedes .divOficinas { padding: 10px 40px; display: flex; flex-wrap: wrap; justify-content: center; } #rowSedes .divOficina { padding: 10px; width: calc(100% / 5); text-align: center; } #rowSedes .divTitulo { padding-bottom: 5px; font-family: var(--font-family-narrow); font-size: 24px; font-weight: 600; } #rowSedes .divTitulo { color: var(--color1-hex); border-bottom: solid 1px var(--color1-hex); line-height: 120%; cursor: default; } #rowSedes .divAdress { padding: 10px 0px; font-family: var(--font-family-narrow); font-size: 16px; font-weight: 400; cursor: default; } #rowSedes .divFoto { line-height: 0px; } #rowSedes .divMapa { height: 400px; } @media (max-width: 1480px) { #rowSedes .divOficina { width: calc(100% / 4); } #rowSedes .divMapa { height: 350px; } } @media (max-width: 1280px) { #rowSedes .divOficina { width: calc(100% / 3); } #rowSedes .divMapa { height: 300px; } } @media (max-width: 1180px) { #rowSedes .divSedes { padding: 0px 20px; } #rowSedes .divTitulo { font-size: 22px; } } @media (max-width: 1080px) { #rowSedes .divSedes { padding: 0px 20px; } #rowSedes .divTitulo { font-size: 20px; } } @media (max-width: 980px) { #rowSedes .divOficina { width: calc(100% / 2); } #rowSedes .divMapa { height: 300px; } } @media (max-width: 680px) { #rowSedes .divOficinas { padding: 10px 30px; } #rowSedes .divOficina { padding: 10px 0px; width: 100%; } #rowSedes .divMapa { height: 250px; } } @media (max-width: 580px) { #rowSedes .divSedes { padding: 0px; } #rowSedes .divTitulo { font-size: 18px; } #rowSedes .divAdress { font-size: 14px; } } @media (max-width: 480px) { #rowSedes .divOficina { width: 100%; } #rowSedes .divMapa { height: 200px; } } @media (max-width: 380px) { #rowSedes .divSedes { padding: 0px; } #rowSedes .divTitulo { font-size: 16px; } #rowSedes .divAdress { font-size: 13px; } } /*************************************** #rowFormContactar ***************************************/ #rowFormContactar .divCabeceraVerde { padding: 12px 20px; width: 100%; border: solid 2px var(--color-ver1-hex); background: var(--color-ver3-hex); } #rowFormContactar .divCabeceraVerde { font-family: var(--font-family-narrow); font-size: 24px; font-weight: 400; color: var(--color2-hex); line-height: 100%; } #rowFormContactar .divForm { padding: 20px; width: 100%; border: solid #DDDDDD; border-width: 0px 2px 2px 2px; } #rowFormContactar .divForm * { font-family: var(--font-family-narrow); font-weight: 400; line-height: 120%; } #rowFormContactar .divFormCF7 { display: flex; flex-wrap: wrap; align-items: center; } #rowFormContactar .divField { margin-bottom: 20px; width: 100%; display: flex; align-items: center; } #rowFormContactar .divField > span { width: 100%; } #rowFormContactar .divField span[role="alert"] { position: absolute; top: 50%; right: 10px; transform: translateY(-50%); padding-top: 2px; font-size: 14px; } #rowFormContactar .divField .wpcf7-not-valid-tip { position: absolute; top: 50%; right: 10px; transform: translateY(-50%); padding-top: 2px; font-size: 14px; } #rowFormContactar .divFieldNombre { width: 100%; } #rowFormContactar .divFieldMail { width: calc(100% - 320px); } #rowFormContactar .divFieldTelefono { width: 300px; margin-left: 20px; } #rowFormContactar .divFieldMensaje { width: 100%; } #rowFormContactar .divField i { padding: 7px; width: 50px; height: 50px; font-family: "FontAwesome"; font-size: 30px; color: #FFFFFF; background: #CCCCCC; text-align: center; } #rowFormContactar .divFieldMensaje i { height: 150px; } #rowFormContactar input { padding-left: 10px; width: 100%; height: 50px; color: var(--color-nar1-hex); background: #F6F6F6; border: none; border-radius: 0px; } #rowFormContactar textarea { padding: 10px; width: 100%; height: 150px; max-height: 150px; color: var(--color-nar1-hex); background: #F6F6F6; border: none; border-radius: 0px; } #rowFormContactar input::placeholder { color: var(--color-nar1-hex); } #rowFormContactar textarea::placeholder { color: var(--color-nar1-hex); } #rowFormContactar .divAcepto { margin-bottom: 30px; width: 100%; display: flex; justify-content: center; } #rowFormContactar .divAcepto > span { margin: 2px 10px; line-height: 0px; } #rowFormContactar .divAcepto > span * { margin: 0px; line-height: 0px; } #rowFormContactar input[type="checkbox"] { width: 20px; height: 20px; } #rowFormContactar .divAcepto p { margin: 0px; width: 540px; font-size: 16px; text-align: justify; } #rowFormContactar .divSubmit { width: 100%; display: flex; flex-direction: column; align-items: center; } #rowFormContactar input[type="submit"] { padding: 15px 80px; width: auto; height: auto; font-size: 20px; color: #FFFFFF; background: var(--color-nar1-hex); } #rowFormContactar .divSubmit .ajax-loader { margin: 5px 0px; } #rowFormContactar .divLegal p { margin: 0px; font-size: 14px; color: var(--color2-hex); text-align: justify; } @media (max-width: 1180px) { #rowFormContactar .divFormContactar { padding: 0px 20px; } } @media (max-width: 780px) { #rowFormContactar .divCabeceraVerde { padding: 8px 20px; font-size: 20px; } #rowFormContactar .divFieldMail { width: 100%; } #rowFormContactar .divFieldTelefono { width: 100%; margin-left: 0px; } #rowFormContactar .divField i { padding: 7px; width: 40px; height: 40px; font-size: 24px; } #rowFormContactar .divFieldMensaje i { height: 120px; } #rowFormContactar input { height: 40px; } #rowFormContactar textarea { height: 120px; max-height: 120px; } #rowFormContactar input[type="checkbox"] { width: 18px; height: 18px; } #rowFormContactar .divAcepto p { width: 480px; font-size: 14px; } #rowFormContactar input[type="submit"] { padding: 10px 60px; font-size: 18px; } #rowFormContactar .divLegal p { font-size: 13px; } } @media (max-width: 480px) { #rowFormContactar .divFormContactar { padding: 0px 10px; } #rowFormContactar .divCabeceraVerde { font-size: 18px; } #rowFormContactar .divAcepto > span { margin: 2px 5px 0px 0px; } #rowFormContactar input[type="checkbox"] { width: 16px; height: 16px; } #rowFormContactar .divAcepto p { width: auto; font-size: 13px; } #rowFormContactar input[type="submit"] { padding: 8px 40px; font-size: 16px; } #rowFormContactar .divLegal p { font-size: 12px; } } @media (max-width: 380px) { #rowFormContactar .divCabeceraVerde { padding: 6px 10px; font-size: 16px; } #rowFormContactar .divForm { padding: 10px; } #rowFormContactar .divField { margin-bottom: 10px; } #rowFormContactar .divField i { padding: 7px; width: 30px; height: 30px; font-size: 18px; } #rowFormContactar .divFieldMensaje i { height: 100px; } #rowFormContactar input { height: 30px; font-size: 14px; } #rowFormContactar textarea { height: 100px; font-size: 14px; } #rowFormContactar .divAcepto { margin-bottom: 20px; } #rowFormContactar .divAcepto p { text-align: left; } #rowFormContactar .divLegal p { text-align: left; } } /******************************************* #rowLogos *******************************************/ #rowLogos .divLogos { display: flex; align-items: center; justify-content: center; } #rowLogos .divLogo { padding: 0px 20px; max-width: 400px; } @media (max-width: 1180px) { #rowLogos .divLogos { padding: 0px 20px; } } @media (max-width: 780px) { #rowLogos .divLogo { padding: 0px 10px; } } @media (max-width: 580px) { #rowLogos .divLogos { flex-direction: column; } #rowLogos .divLogo { padding: 10px; max-width: 340px; } }