/*
	CSS personalizado para 06 CONTACTO
*/

/**************************************** GAMA DE COLORES ****************************************/

/*    Beige Oscuro: C3B398 rgb(195,179,152) */
/*            Gris: 999999 rgb(153,153,153) */
/*     Beige Medio: DFD8CB rgb(223,216,203) */
/*     Beige Claro: EEE9E4 rgb(238,233,228) */
/* Beige Muy Claro: F7F5F2 rgb(247,245,242) */

/*   Marron Oscuro: 8E6E53 rgb(142,110, 83) */
/*    Marron Medio: C5B09C rgb(197,176,156) */
/*    Marron Claro: E9DACB rgb(233,218,203) */
/*Marron Muy Claro: F9F1E8 rgb(249,241,232) */

/*     Azul Oscuro: 6689A1 rgb(102,137,161) */
/*      Azul Medio: 9BB2C2 rgb(155,178,194) */
/*      Azul Claro: CDD9E0 rgb(205,217,224) */
/*  Azul Muy Claro: E6ECF0 rgb(230,236,240) */

/************************************ MODIFICADOS DE syle-home ***********************************/

/****************************************** #rowContacto *****************************************/

#rowContacto .divContacto { padding-bottom: 30px; border-bottom: solid 1px var(--color2-hex); display: flex; flex-wrap: wrap; justify-content: space-between; }
#rowContacto .divForm     { width: 62%; }
#rowContacto .divDatos    { width: 32%; }

#rowContacto .divContactForm                        { width: 100%; display: flex; flex-wrap: wrap; justify-content: space-between; }
#rowContacto .divContactForm div                    { margin-bottom: 20px; }
#rowContacto .divContactForm input                  { padding: 15px; width: 100%; font-size: 18px; border: solid 1px var(--color-mar2-hex); border-radius: 10px; }
#rowContacto .divContactForm input::placeholder     { color: #AAAAAA; }
#rowContacto .divContactForm textarea               { padding: 15px; width: 100%; height: 200px; font-size: 18px; border: solid 1px var(--color-mar2-hex); border-radius: 10px; }
#rowContacto .divContactForm textarea::placeholder  { color: #AAAAAA; }
#rowContacto .divContactForm input[type="checkbox"] { width: 18px; height: 18px; }
#rowContacto .divContactForm span[role="alert"]     { margin: 5px 0px 0px 10px; font-size: 12px; }
#rowContacto .divForm        div[role="alert"]      { margin: 0px; padding: 15px; font-size: 16px; }

#rowContacto .divNombre   { width: 100%; }
#rowContacto .divTelefono { width:  49%; }
#rowContacto .divMail     { width:  49%; }
#rowContacto .divMensaje  { width: 100%; }
#rowContacto .divAcepto   { width:  65%; display: flex; }
#rowContacto .divSubmit   { width:  31%; position: relative; }
#rowContacto .divLegal    { width: 100%; margin-bottom: 0px !important; }

#rowContacto .divAcepto span                { margin: 0px; }
#rowContacto .divAcepto p                   { margin: 0px 0px 0px 8px; font-size: 12px; text-align: justify; }
#rowContacto .divSubmit .ajax-loader        { position: absolute; top: 10px; right: 10px; margin: 0px; width: auto; height: auto; }
#rowContacto .divSubmit .ajax-loader        { background-image: none; line-height: normal; -webkit-animation: fa-spin 1s infinite linear; animation: fa-spin 1s infinite linear; }
#rowContacto .divSubmit .ajax-loader:before { content: "\f021"; font-family: "FontAwesome"; font-size: 18px; color: #FFFFFF; }
#rowContacto .divLegal  p                   { margin: 0px; font-size: 11px; text-align: justify; }

#rowContacto .divDatos ul                { margin: 0px; list-style-type: none; }
#rowContacto .divDatos li                { margin: 0px; font-size: 24px; color: var(--color2-hex); display: flex; }
#rowContacto .divDatos li i              { margin-right: 10px; width: 34px; height: 34px; font-size: 20px; color: #FFFFFF; background: var(--color-azu1-hex); }
#rowContacto .divDatos li i              { border-radius: 50%; display: flex; align-items: center; justify-content: center; }
#rowContacto .divDatos li:last-of-type i { font-size: 16px; }
#rowContacto .divDatos li a              { color: var(--color2-hex); }
#rowContacto .divDatos li a:hover        { color: var(--color1-hex); }

#rowContacto .divDatos li:nth-of-type(1) { margin-bottom: 20px; }
#rowContacto .divDatos li:nth-of-type(2) { margin-bottom: 10px; }
#rowContacto .divDatos li:nth-of-type(3) { margin-bottom: 20px; }
#rowContacto .divDatos li:nth-of-type(4) { margin-bottom: 10px; }

@media (max-width: 1180px) {
	#rowContacto .divContacto             { padding: 0px 20px 30px 20px; }
	#rowContacto .divContactForm input    { padding: 10px; font-size: 16px; border-radius: 8px; }
	#rowContacto .divContactForm textarea { padding: 10px; font-size: 16px; border-radius: 8px; }
}

@media (max-width: 980px) {
	#rowContacto .divContactForm div { margin-bottom: 15px; }
	#rowContacto .divTelefono        { width: 40%; }
	#rowContacto .divMail            { width: 58%; }
	#rowContacto .divDatos li        { font-size: 20px; }
	#rowContacto .divDatos li i      { width: 32px; height: 32px; font-size: 18px; }
}

@media (max-width: 780px) {
	#rowContacto .divForm                    { margin-bottom: 20px; width: 100%; }
	#rowContacto .divDatos                   { width: 100%; }
	#rowContacto .divContactForm div         { margin-bottom: 15px; }
	#rowContacto .divDatos ul                { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; }
	#rowContacto .divDatos li                { margin: 10px !important; font-size: 18px; align-items: center; justify-content: center; }
	#rowContacto .divDatos li:nth-of-type(1) { width: 100%; }
	#rowContacto .divDatos li i              { width: 30px; height: 30px; font-size: 16px; }
	#rowContacto .divDatos li:last-of-type i { font-size: 14px; }
}

@media (max-width: 580px) {
	#rowContacto .divContactForm input             { font-size: 14px; }
	#rowContacto .divContactForm textarea          { height: 140px; font-size: 14px; }
	#rowContacto .divForm        div[role="alert"] { padding: 10px; font-size: 14px; }
	#rowContacto .divTelefono                      { width: 100%; }
	#rowContacto .divMail                          { width: 100%; }
}

@media (max-width: 480px) {
	#rowContacto .divContacto                   { padding: 0px 10px 20px 10px; }
	#rowContacto .divContactForm                { justify-content: center; }
	#rowContacto .divAcepto                     { width: 100%; }
	#rowContacto .divSubmit                     { width:  60%; }
	#rowContacto .divSubmit .ajax-loader        { top: 9px; }
	#rowContacto .divSubmit .ajax-loader:before { font-size: 16px; }
	#rowContacto .divDatos li                   { font-size: 16px; }
	#rowContacto .divDatos li i                 { margin-right: 5px; width: 24px; height: 24px; font-size: 14px; }
	#rowContacto .divDatos li:last-of-type i    { font-size: 12px; }
}

@media (max-width: 380px) {
	#rowContacto .divDatos ul { justify-content: flex-start; }
	#rowContacto .divDatos li { margin: 5px !important; width: 100%; justify-content: flex-start; }
	#rowContacto .divAcepto p { text-align: left; }
	#rowContacto .divLegal  p { text-align: left; }
}

/******************************************** #rowMapa *******************************************/

#rowMapa .divMapa { height: 600px; line-height: 0px; }

@media (max-width: 980px) { #rowMapa .divMapa { height: 480px; } }
@media (max-width: 780px) { #rowMapa .divMapa { height: 460px; } }
@media (max-width: 580px) { #rowMapa .divMapa { height: 380px; } }
@media (max-width: 480px) { #rowMapa .divMapa { height: 360px; } }
@media (max-width: 380px) { #rowMapa .divMapa { height: 340px; } }