/*
	CSS personalizado para 06 Departamentos
*/

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

/*    Azul Oscuro: 0077AA rgb(  0,119,170) */
/*           Gris: 999999 rgb(153,153,153) */
/*     Azul Medio: 00AADD rgb(  0,170,221) */
/*     Azul Claro: 88DDFF rgb(136,221,255) */
/* Azul Muy Claro: E3F1F2 rgb(227,241,242) */

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

/*************************************** #rowDepartamentos ***************************************/

#rowDepartamentos .divDepartamentos   { display: flex; flex-wrap: wrap; justify-content: space-evenly; }

#rowDepartamentos .divBloque          { width: 40%; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; }
#rowDepartamentos .divDepartamento    { margin: 5px; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; }

#rowDepartamentos .divCabecera        { position: relative; line-height: 0px; cursor: pointer; }
#rowDepartamentos .divCabecera *      { -webkit-transition: all 0.3s ease; transition: all 0.3s ease; }
#rowDepartamentos .divCabecera img    { width: 100%; opacity: 0.8; }
#rowDepartamentos .divCabecera h1     { position: absolute; top: 50%; transform: translateY(-50%); left: 20px; }
#rowDepartamentos .divCabecera h1     { font-family: var(--font-family-extra-narrow); font-size: 32px; color: #FFFFFF; text-shadow: 1px 1px 0px var(--color1-hex); }
#rowDepartamentos .divCabecera i      { position: absolute; top: 50%; transform: translateY(-50%); right: 20px; font-size: 42px; color: #FFFFFF; text-shadow: 1px 1px 0px var(--color1-hex); }

#rowDepartamentos .divContent               { margin: -2px 8px; padding: 15px; background: var(--color4-hex); display: none; }
#rowDepartamentos .divContent *             { -webkit-transition: all 0.3s ease; transition: all 0.3s ease; }
#rowDepartamentos .divContent h6            { padding-top: 10px; font-family: var(--font-family-narrow); font-weight: 600; color: var(--color1-hex); border-bottom: dotted 1px; }
#rowDepartamentos .divContent ul            { margin: 10px 0px 0px 10px; list-style-type: disc; }
#rowDepartamentos .divContent li            { font-family: var(--font-family-narrow); font-size: 16px; color: #333333; }
#rowDepartamentos .divContent p             { margin:  0px; font-family: var(--font-family-narrow); font-size: 16px; color: #333333; }

#rowDepartamentos .divEnlaces               { margin-top: 10px; }
#rowDepartamentos .divEnlaceConIcono        { width: 50%; }
#rowDepartamentos .divEnlaceConIcono  span  { font-family: var(--font-family-narrow); font-weight: 600; line-height: 100%; }
#rowDepartamentos .divEnlacesSinIcono       { padding-top: 15px; border-top: solid 2px var(--color1-hex); }
#rowDepartamentos .divEnlaceSinIcono  i     { margin-right: 5px; }
#rowDepartamentos .divEnlaceSinIcono  span  { font-family: var(--font-family-narrow); font-weight: 400; }

#rowDepartamentos .divEnlacesInteres        { margin-top: 10px; }
#rowDepartamentos .divEnlacesInteres a      { font-family: var(--font-family-narrow); font-size: 16px; font-weight: 400; color: var(--color1-hex); }

@media (max-width: 1180px) {
	#rowDepartamentos .divCabecera h1   { font-size: 28px; }
	#rowDepartamentos .divCabecera i    { font-size: 38px; }
}

@media (max-width:  980px) {
	#rowDepartamentos .divBloque              { width: 45%; }
	#rowDepartamentos .divCabecera h1         { font-size: 24px; }
	#rowDepartamentos .divCabecera i          { font-size: 34px; }
	#rowDepartamentos .divContent h6          { font-size: 16px; }
	#rowDepartamentos .divContent li          { font-size: 14px; }
	#rowDepartamentos .divContent p           { font-size: 14px; }
	#rowDepartamentos .divEnlaceSinIcono span { font-size: 14px; }
	#rowDepartamentos .divEnlacesInteres a    { font-size: 14px; }
}

@media (max-width:  780px) {
	#rowDepartamentos .divBloque              { width: 47%; }
	#rowDepartamentos .divCabecera h1         { font-size: 20px; }
	#rowDepartamentos .divCabecera i          { font-size: 30px; }
}

@media (max-width:  580px) {
	#rowDepartamentos .divBloque              { width: 85%; }
	#rowDepartamentos .divCabecera h1         { font-size: 28px; }
	#rowDepartamentos .divCabecera i          { font-size: 38px; }
}

@media (max-width:  480px) {
	#rowDepartamentos .divBloque              { width: 95%; }
	#rowDepartamentos .divCabecera h1         { font-size: 24px; }
	#rowDepartamentos .divCabecera i          { font-size: 34px; }
	#rowDepartamentos .divContent h6          { font-size: 15px; }
	#rowDepartamentos .divContent li          { font-size: 13px; }
	#rowDepartamentos .divContent p           { font-size: 13px; }
	#rowDepartamentos .divEnlaceSinIcono span { font-size: 13px; }
	#rowDepartamentos .divEnlacesInteres a    { font-size: 13px; }
}

@media (max-width:  380px) {
	#rowDepartamentos .divBloque              { width: 95%; }
	#rowDepartamentos .divCabecera h1         { font-size: 20px; }
	#rowDepartamentos .divCabecera i          { font-size: 30px; }
}