/*
	CSS personalizado para 03 SERVICIOS
*/

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

/*    Color Oscuro: 1A4189 rgb( 26, 65,137) */
/*            Gris: 999999 rgb(153,153,153) */
/*     Color Medio: 8CA0C4 rgb(140,160,196) */
/*     Color Claro: C5CFE1 rgb(197,207,225) */
/* Color muy Claro: E2E7F0 rgb(226,231,240) */

/*      Color Azul: 5493C6 rgb( 84,147,198) */
/*    Color Marron: CA831B rgb(202,131, 27) */
/*	   Color Caqui: C1AB54 rgb(193,171, 84) */
/*	Color Turquesa: 4BB6C7 rgb( 75,182,199) */

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

/************************************** #rowServiciosIntro ***************************************/

#rowServiciosIntro *                  { -webkit-transition: all 0.2s ease; transition: all 0.2s ease; }
#rowServiciosIntro .divServiciosIntro { margin: auto; max-width: 1180px; }
#rowServiciosIntro h2                 { padding-right: var(--site-gap-4); color: var(--color-azul-hex) !important; }
#rowServiciosIntro .divContent        { position: relative; margin: var(--site-gap) auto var(--site-gap-2) auto; padding-top: var(--site-gap-2); max-width: 1180px; }
#rowServiciosIntro .divContent:before { content: ""; position: absolute; top: 0px; left: 50%; width: 50vw; height: calc(var(--site-gap) / 2); background: var(--color1-hex); display: block; z-index: 1; }
#rowServiciosIntro p                  { margin: 0px; font-size: 28px; text-align: justify; }
#rowServiciosIntro a                  { color: var(--color-azul-hex); text-decoration: underline; }
#rowServiciosIntro a:hover            { color: var(--color1-hex); }

@media (max-width: 1380px) {
	#rowServiciosIntro .divServiciosIntro { padding: 0px 40px; }
	#rowServiciosIntro h2                 { padding-right: var(--site-gap-4); font-size: 70px; }
	#rowServiciosIntro p                  { font-size: 24px; }
}

@media (max-width: 1180px) { #rowServiciosIntro h2 { padding-right: var(--site-gap-4); font-size: 60px; } #rowServiciosIntro h5 { font-size: 45px; } #rowServiciosIntro p { font-size: 24px; } }
@media (max-width:  980px) { #rowServiciosIntro h2 { padding-right: var(--site-gap-3); font-size: 50px; } #rowServiciosIntro h5 { font-size: 45px; } #rowServiciosIntro p { font-size: 20px; } }

@media (max-width:  780px) {
	#rowServiciosIntro .divServiciosIntro { padding: 0px 30px; }
	#rowServiciosIntro h2                 { padding-right: var(--site-gap-3); font-size: 40px; }
	#rowServiciosIntro h5                 { font-size: 40px; }
	#rowServiciosIntro p                  { font-size: 18px; }
}

@media (max-width:  580px) {
	#rowServiciosIntro h2                 { padding-right: var(--site-gap-2); font-size: 50px; }
	#rowServiciosIntro h5                 { font-size: 35px; }
	#rowServiciosIntro p                  { font-size: 16px; text-align: left; }
}

@media (max-width:  380px) {
	#rowServiciosIntro .divServiciosIntro { padding: 0px 20px; }
	#rowServiciosIntro h2                 { padding-right: var(--site-gap-2); font-size: 40px; }
	#rowServiciosIntro h5                 { font-size: 30px; }
	#rowServiciosIntro p                  { font-size: 14px; }
}

/*************************************** #rowServiciosFoto ***************************************/

#rowServiciosFoto *                        { -webkit-transition: all 0.2s ease; transition: all 0.2s ease; }
#rowServiciosFoto .divServiciosFoto        { position: relative; width: calc(50% + var(--site-gap-9)); }
#rowServiciosFoto .divServiciosFoto:after  { content: ""; position: absolute; top: var(--site-gap-2); right: 0px; transform: translate(50%,-50%); width: var(--site-gap-12); height: var(--site-gap-12); }
#rowServiciosFoto .divServiciosFoto:after  { background-image: url("/wp-content/themes/perroalavista/images/miscelanea/fondo-degradado-azul-800.png"); background-repeat: no-repeat; background-size: contain; }
#rowServiciosFoto .divRow                  { position: relative; width: 100%; z-index: 1; }
#rowServiciosFoto .divFoto                 { width: 100%; height: var(--site-gap-13); border-top-right-radius: var(--site-gap-4); }
#rowServiciosFoto .divFoto                 { background-image: url("/wp-content/uploads/foto-servicios-1.jpg"); background-repeat: no-repeat; background-size: cover; }

@media (max-width: 1180px) { #rowServiciosFoto .divServiciosFoto       { width: calc(50% + var(--site-gap-10));                 } }
@media (max-width:  980px) { #rowServiciosFoto .divServiciosFoto:after { width: var(--site-gap-16); height: var(--site-gap-16); } }

@media (max-width:  580px) {
	#rowServiciosFoto .divServiciosFoto        { width: calc(100% - 30px); }
	#rowServiciosFoto .divServiciosFoto:after  { width: var(--site-gap-12); height: var(--site-gap-12); }
	#rowServiciosFoto .divFoto                 { height: var(--site-gap-11); }
}

@media (max-width:  380px) {
	#rowServiciosFoto .divServiciosFoto        { width: calc(100% - 20px); }
	#rowServiciosFoto .divServiciosFoto:before { left: 20px; }
	#rowServiciosFoto .divFoto                 { height: var(--site-gap-9); }
}

/************************************** #rowServiciosApoyo ***************************************/

#rowServiciosApoyo *                  { -webkit-transition: all 0.2s ease; transition: all 0.2s ease; }
#rowServiciosApoyo .divServiciosApoyo { padding-right: calc((100vw - 1400px) / 2); }
#rowServiciosApoyo .divRow            { position: relative; margin-bottom: var(--site-gap-2); width: 100%; display: flex; z-index: 1; }
#rowServiciosApoyo .divTitulo         { position: relative; padding: var(--site-gap); flex: 0 0 var(--site-gap-9); height: var(--site-gap-9); }
#rowServiciosApoyo .divTitulo         { background: var(--color-azul-hex); border-top: solid calc(var(--site-gap) / 2) var(--color1-hex); border-bottom-right-radius: var(--site-gap-4); }
#rowServiciosApoyo .divTitulo h3      { color: #FFFFFF !important; }
#rowServiciosApoyo .divContent        { padding: var(--site-gap) var(--site-gap) 0px var(--site-gap-2); }
#rowServiciosApoyo p                  { margin: 20px 0px; font-size: 28px; text-align: justify; }
#rowServiciosApoyo p:first-of-type    { margin-top: 0px !important; }
#rowServiciosApoyo p:last-of-type     { margin-bottom: 0px !important; }
#rowServiciosApoyo ul                 { margin: 20px 0px 0px 0px; list-style-type: disc; }
#rowServiciosApoyo ul li              { margin-bottom: 10px; font-size: 28px; }

@media (max-width: 1380px) {
	#rowServiciosApoyo .divContent   { padding: var(--site-gap) 40px 0px var(--site-gap-2); }
	#rowServiciosApoyo p             { font-size: 24px; }
	#rowServiciosApoyo ul li         { font-size: 24px; }
}

@media (max-width: 1180px) {
	#rowServiciosApoyo .divTitulo    { flex: 0 0 var(--site-gap-10); }
	#rowServiciosApoyo .divTitulo h3 { font-size: 60px; }
}

@media (max-width:  980px) {
	#rowServiciosApoyo .divTitulo h3 { font-size: 50px; }
	#rowServiciosApoyo p             { font-size: 20px; }
	#rowServiciosApoyo ul li         { font-size: 20px; }
}

@media (max-width:  780px) {
	#rowServiciosApoyo .divTitulo h3 { font-size: 40px; }
	#rowServiciosApoyo p             { margin: 10px 0px; font-size: 18px; }
	#rowServiciosApoyo ul            { margin: 10px 0px 0px 0px; }
	#rowServiciosApoyo ul li         { margin-bottom: 5px; font-size: 18px; }
}

@media (max-width:  580px) {
	#rowServiciosApoyo .divRow       { padding-right: 30px; flex-direction: column; }
	#rowServiciosApoyo .divTitulo    { padding: var(--site-gap); flex: 0 0 100%; height: auto; }
	#rowServiciosApoyo .divTitulo h3 { width: 100%; }
	#rowServiciosApoyo .divContent   { padding: var(--site-gap) 0px 0px 30px; }
	#rowServiciosApoyo p             { font-size: 16px; text-align: left; }
	#rowServiciosApoyo ul li         { font-size: 16px; }
}

@media (max-width:  380px) {
	#rowServiciosApoyo .divRow       { padding-right: 20px; }
	#rowServiciosApoyo .divTitulo h3 { font-size: 35px; }
	#rowServiciosApoyo .divContent   { padding: var(--site-gap) 0px 0px 20px; }
	#rowServiciosApoyo p             { font-size: 14px; }
	#rowServiciosApoyo ul li         { font-size: 14px; }
}

/************************************* #rowServiciosMayores **************************************/

#rowServiciosMayores *                    { -webkit-transition: all 0.2s ease; transition: all 0.2s ease; }
#rowServiciosMayores .divServiciosMayores { position: relative; margin-top: var(--site-gap-2); padding-right: calc((100vw - 1400px) / 2); }
#rowServiciosMayores .divFoto             { position: absolute; top: 0px; right: 0px; transform: translateY(-50%); width: var(--site-gap-13); height: var(--site-gap-13); border-top-left-radius: var(--site-gap-4); }
#rowServiciosMayores .divFoto             { background-image: url("/wp-content/uploads/foto-servicios-2.jpg"); background-repeat: no-repeat; background-size: cover; }
#rowServiciosMayores .divRow              { position: relative; margin-bottom: var(--site-gap-2); width: 100%; display: flex; z-index: 1; }
#rowServiciosMayores .divTitulo           { position: relative; padding: var(--site-gap); flex: 0 0 var(--site-gap-9); height: var(--site-gap-9); }
#rowServiciosMayores .divTitulo           { background: var(--color-azul-hex); border-top: solid calc(var(--site-gap) / 2) var(--color1-hex); border-bottom-right-radius: var(--site-gap-4); }
#rowServiciosMayores .divTitulo h3        { color: #FFFFFF !important; }
#rowServiciosMayores .divContent          { padding: var(--site-gap-2) var(--site-gap) 0px var(--site-gap-2); }
#rowServiciosMayores p                    { margin: 20px 0px; font-size: 28px; text-align: justify; }
#rowServiciosMayores p:first-of-type      { margin-top: 0px !important; }
#rowServiciosMayores p:last-of-type       { margin-bottom: 0px !important; }
#rowServiciosMayores ul                   { margin: 20px 0px 0px 0px; list-style-type: disc; }
#rowServiciosMayores ul li                { margin-bottom: 10px; font-size: 28px; }

@media (max-width: 1680px) { #rowServiciosMayores .divFoto { height: var(--site-gap-8); } }
@media (max-width: 1480px) { #rowServiciosMayores .divFoto { height: var(--site-gap-7); transform: translateY(-57%); } }

@media (max-width: 1380px) {
	#rowServiciosMayores .divFoto             { height: var(--site-gap-13); transform: translateY(-40%); }
	#rowServiciosMayores .divContent          { padding: var(--site-gap-2) 40px 0px var(--site-gap-2); }
	#rowServiciosMayores p                    { font-size: 24px; }
	#rowServiciosMayores ul li                { font-size: 24px; }
}

@media (max-width: 1280px) { #rowServiciosMayores .divFoto { height: var(--site-gap-8); transform: translateY(-50%); } }

@media (max-width: 1180px) {
	#rowServiciosMayores .divFoto             { height: var(--site-gap-13); transform: translateY(-30%); }
	#rowServiciosMayores .divTitulo           { flex: 0 0 var(--site-gap-10); }
	#rowServiciosMayores .divTitulo h3        { font-size: 60px; }
}

@media (max-width: 1080px) { #rowServiciosMayores .divFoto { height: var(--site-gap-9); transform: translateY(-45%); } }

@media (max-width:  980px) {
	#rowServiciosMayores .divFoto             { height: var(--site-gap-13); transform: translateY(-30%); }
	#rowServiciosMayores .divTitulo h3        { font-size: 50px; }
	#rowServiciosMayores p                    { font-size: 20px; }
	#rowServiciosMayores ul li                { font-size: 20px; }
}

@media (max-width:  880px) {
	#rowServiciosMayores .divFoto             { left: 0px; right: auto; width: var(--site-gap-10); height: var(--site-gap-11); transform: translateY(-100%); }
	#rowServiciosMayores .divFoto             { border-top-left-radius: 0px; border-top-right-radius: var(--site-gap-4); }
	#rowServiciosMayores .divContent          { padding: var(--site-gap) 40px 0px var(--site-gap-2); }
}

@media (max-width:  780px) {
	#rowServiciosMayores .divTitulo h3        { font-size: 40px; }
	#rowServiciosMayores p                    { margin: 10px 0px; font-size: 18px; }
	#rowServiciosMayores ul                   { margin: 10px 0px 0px 0px; }
	#rowServiciosMayores ul li                { margin-bottom: 5px; font-size: 18px; }
}

@media (max-width:  580px) {
	#rowServiciosMayores .divServiciosMayores { margin-top: var(--site-gap-11); }
	#rowServiciosMayores .divRow              { padding-right: 30px; flex-direction: column; }
	#rowServiciosMayores .divFoto             { width: calc(100% - 30px); }
	#rowServiciosMayores .divTitulo           { padding: var(--site-gap); flex: 0 0 100%; height: auto; }
	#rowServiciosMayores .divTitulo h3        { width: 100%; }
	#rowServiciosMayores .divContent          { padding: var(--site-gap) 0px 0px 30px; }
	#rowServiciosMayores p                    { font-size: 16px; text-align: left; }
	#rowServiciosMayores ul li                { font-size: 16px; }
}

@media (max-width:  380px) {
	#rowServiciosMayores .divServiciosMayores { margin-top: var(--site-gap-9); }
	#rowServiciosMayores .divRow              { padding-right: 20px; }
	#rowServiciosMayores .divFoto             { width: calc(100% - 20px); height: var(--site-gap-9); }
	#rowServiciosMayores .divTitulo h3        { font-size: 35px; }
	#rowServiciosMayores .divContent          { padding: var(--site-gap) 0px 0px 20px; }
	#rowServiciosMayores p                    { font-size: 14px; }
	#rowServiciosMayores ul li                { font-size: 14px; }
}