/*
	CSS personalizado para 05 CACHORROS
*/

/**************************************** 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 ***********************************/

/************************************** #rowCachorrosIntro ***************************************/

#rowCachorrosIntro *                  { -webkit-transition: all 0.2s ease; transition: all 0.2s ease; }
#rowCachorrosIntro .divCachorrosIntro { margin: auto; max-width: 1180px; }
#rowCachorrosIntro h2                 { padding-right: var(--site-gap-4); color: var(--color-marron-hex) !important; }
#rowCachorrosIntro .divContent        { position: relative; margin: var(--site-gap) auto var(--site-gap-2) auto; padding-top: var(--site-gap-2); max-width: 1180px; }
#rowCachorrosIntro .divContent:before { content: ""; position: absolute; top: 0px; left: calc((100vw - 1180px) / -2); width: calc(((100vw - 1180px) / 2) + var(--site-gap-2)); height: calc(var(--site-gap) / 2); }
#rowCachorrosIntro .divContent:before { background: var(--color-turquesa-hex); display: block; z-index: 1; }
#rowCachorrosIntro p                  { margin: 20px 0px; font-size: 28px; text-align: justify; }
#rowCachorrosIntro p:first-of-type    { margin-top: 0px !important; }
#rowCachorrosIntro p:last-of-type     { margin-bottom: 0px !important; }
#rowCachorrosIntro .divFoto           { margin: var(--site-gap-2) 0px var(--site-gap-2) var(--site-gap-2); }
#rowCachorrosIntro .divFoto           { width: calc(100% + ((100vw - 1180px) / 2) - var(--site-gap-2)); height: var(--site-gap-11); border-bottom-left-radius: var(--site-gap-4); }
#rowCachorrosIntro .divFoto           { background-image: url("/wp-content/uploads/foto-cachorros-1.jpg"); background-repeat: no-repeat; background-size: cover; }

@media (max-width: 1380px) {
	#rowCachorrosIntro .divCachorrosIntro { padding: 0px 40px; }
	#rowCachorrosIntro h2                 { padding-right: var(--site-gap-4); font-size: 70px; }
	#rowCachorrosIntro .divContent:before { left: calc((100vw - 1100px) / -2); width: calc(((100vw - 1100px) / 2) + var(--site-gap-2)); }
	#rowCachorrosIntro p                  { font-size: 24px; }
	#rowCachorrosIntro .divFoto           { width: calc(100% + ((100vw - 1180px) / 2) - var(--site-gap-2) + 40px); }
}

@media (max-width: 1180px) {
	#rowCachorrosIntro h2                 { padding-right: var(--site-gap-4); font-size: 60px; }
	#rowCachorrosIntro .divContent:before { left: -40px; width: calc(40px + var(--site-gap-2)); }
	#rowCachorrosIntro .divFoto           { width: calc(100% - var(--site-gap-2) + 40px); }
}

@media (max-width:  980px) { #rowCachorrosIntro h2 { padding-right: var(--site-gap-3); font-size: 50px; } #rowCachorrosIntro p { font-size: 20px; } }

@media (max-width:  780px) {
	#rowCachorrosIntro .divCachorrosIntro { padding: 0px 30px; }
	#rowCachorrosIntro h2                 { padding-right: var(--site-gap-3); font-size: 40px; }
	#rowCachorrosIntro .divContent:before { left: -30px; width: calc(30px + var(--site-gap-2)); }
	#rowCachorrosIntro p                  { font-size: 18px; }
	#rowCachorrosIntro .divFoto           { width: calc(100% - var(--site-gap-2) + 30px); }
}

@media (max-width:  580px) {
	#rowCachorrosIntro h2                 { padding-right: var(--site-gap-2); font-size: 50px; }
	#rowCachorrosIntro p                  { font-size: 16px; text-align: left; }
	#rowCachorrosIntro .divFoto           { margin: var(--site-gap) 0px 0px 0px; width: 100%; }
}

@media (max-width:  380px) {
	#rowCachorrosIntro .divCachorrosIntro { padding: 0px 20px; }
	#rowCachorrosIntro h2                 { padding-right: var(--site-gap-2); font-size: 40px; }
	#rowCachorrosIntro .divContent:before { left: -20px; width: calc(20px + var(--site-gap-2)); }
	#rowCachorrosIntro p                  { font-size: 14px; }
}

/************************************* #rowCachorrosSocializado *************************************/

#rowCachorrosSocializado *                               { -webkit-transition: all 0.2s ease; transition: all 0.2s ease; }
#rowCachorrosSocializado .divCachorrosSocializado        { position: relative; padding: 0px calc((100vw - 1400px) / 2) 0px calc((100vw - 1400px) / 2); }
#rowCachorrosSocializado .divCachorrosSocializado:after  { content: ""; position: absolute; bottom: 0px; left: 0px; transform: translate(25%,50%); width: var(--site-gap-12); height: var(--site-gap-12); }
#rowCachorrosSocializado .divCachorrosSocializado:after  { background-image: url("/wp-content/themes/perroalavista/images/miscelanea/fondo-degradado-azul-800.png"); }
#rowCachorrosSocializado .divCachorrosSocializado:after  { background-repeat: no-repeat; background-size: contain; z-index: 1; }
#rowCachorrosSocializado .divRow                         { position: relative; margin-bottom: var(--site-gap-4); z-index: 2; }
#rowCachorrosSocializado .divContent                     { padding: var(--site-gap-2) var(--site-gap-7) var(--site-gap-3) var(--site-gap-2); }
#rowCachorrosSocializado .divContent                     { width: 100%; background: var(--color-marron-hex); border-top-left-radius: var(--site-gap-4); }
#rowCachorrosSocializado h4                              { color: #FFFFFF !important; }
#rowCachorrosSocializado p                               { margin: 20px 0px; padding-right: var(--site-gap-6); font-size: 28px; color: #FFFFFF; }
#rowCachorrosSocializado .divFoto                        { margin: calc(var(--site-gap-2) * -1) 0px 0px var(--site-gap-4); }
#rowCachorrosSocializado .divFoto                        { width: calc(100% - var(--site-gap-4) + calc((100vw - 1400px) / 2)); height: var(--site-gap-11); border-bottom-left-radius: var(--site-gap-4); }
#rowCachorrosSocializado .divFoto                        { background-image: url("/wp-content/uploads/foto-cachorros-2.jpg"); background-repeat: no-repeat; background-size: cover; }

@media (max-width: 1480px) {
	#rowCachorrosSocializado .divCachorrosSocializado        { padding: 0px 0px 0px var(--site-gap); }
	#rowCachorrosSocializado .divCachorrosSocializado:after  { transform: translate(0%,50%); }
	#rowCachorrosSocializado .divFoto                        { width: calc(100% - var(--site-gap-4)); }
}

@media (max-width: 1380px) {
	#rowCachorrosSocializado h4                              { font-size: 55px; }
}

@media (max-width: 1180px) {
	#rowCachorrosSocializado .divCachorrosSocializado        { padding: 0px 0px 0px 40px; }
	#rowCachorrosSocializado .divCachorrosSocializado:after  { width: var(--site-gap-16); height: var(--site-gap-16); }
	#rowCachorrosSocializado h4                              { font-size: 50px; }
	#rowCachorrosSocializado p                               { font-size: 24px; }
}

@media (max-width:  980px) {
	#rowCachorrosSocializado h4                              { font-size: 45px; }
	#rowCachorrosSocializado p                               { font-size: 20px; }
}

@media (max-width:  780px) {
	#rowCachorrosSocializado .divCachorrosSocializado        { padding: 0px 0px 0px 30px; }
	#rowCachorrosSocializado h4                              { font-size: 35px; }
	#rowCachorrosSocializado p                               { margin: 10px 0px; font-size: 18px; }
}

@media (max-width:  580px) {
	#rowCachorrosSocializado .divContent                     { padding: var(--site-gap-2) var(--site-gap-4) var(--site-gap-3) var(--site-gap-2); }
	#rowCachorrosSocializado h4                              { font-size: 45px; }
	#rowCachorrosSocializado p                               { padding-right: var(--site-gap-4); font-size: 16px; }
	#rowCachorrosSocializado .divFoto                        { margin: calc(var(--site-gap-2) * -1) 0px 0px var(--site-gap-2); width: calc(100% - var(--site-gap-2)); }
}

@media (max-width:  380px) {
	#rowCachorrosSocializado .divCachorrosSocializado        { padding: 0px 0px 0px 20px; }
	#rowCachorrosSocializado .divContent                     { padding: var(--site-gap-2) var(--site-gap-2) var(--site-gap-3) var(--site-gap-2); }
	#rowCachorrosSocializado h4                              { font-size: 35px; }
	#rowCachorrosSocializado p                               { padding-right: var(--site-gap-2); font-size: 14px; }
}