/*
	CSS personalizado para 02 METODOLOGIA
*/

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

/************************************* #rowMetodologiaIntro **************************************/

#rowMetodologiaIntro *                    { -webkit-transition: all 0.2s ease; transition: all 0.2s ease; }
#rowMetodologiaIntro .divMetodologiaIntro { margin: auto; max-width: 1180px; }
#rowMetodologiaIntro h2                   { padding-right: var(--site-gap-4); color: var(--color-caqui-hex) !important; }
#rowMetodologiaIntro .divContent          { margin: var(--site-gap) auto var(--site-gap-2) auto; max-width: 1180px; }
#rowMetodologiaIntro p                    { margin: 0px; font-size: 28px; text-align: justify; }

@media (max-width: 1380px) { #rowMetodologiaIntro .divMetodologiaIntro { padding: 0px 40px; } #rowMetodologiaIntro h2 { padding-right: var(--site-gap-4); font-size: 70px; } #rowMetodologiaIntro p { font-size: 24px; } }
@media (max-width: 1180px) {                                                                  #rowMetodologiaIntro h2 { padding-right: var(--site-gap-4); font-size: 60px; } #rowMetodologiaIntro p { font-size: 24px; } }
@media (max-width:  980px) {                                                                  #rowMetodologiaIntro h2 { padding-right: var(--site-gap-3); font-size: 50px; } #rowMetodologiaIntro p { font-size: 20px; } }
@media (max-width:  780px) { #rowMetodologiaIntro .divMetodologiaIntro { padding: 0px 30px; } #rowMetodologiaIntro h2 { padding-right: var(--site-gap-3); font-size: 40px; } #rowMetodologiaIntro p { font-size: 18px; } }

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

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

/************************************* #rowMetodologiaMetodo *************************************/

#rowMetodologiaMetodo *                            { -webkit-transition: all 0.2s ease; transition: all 0.2s ease; }
#rowMetodologiaMetodo .divMetodologiaMetodo        { position: relative; padding: var(--site-gap-2) calc((100vw - 1400px) / 2) 0px 0px; }
#rowMetodologiaMetodo .divMetodologiaMetodo:before { content: ""; position: absolute; top: 0px; right: calc((100vw - 1400px) / 2); width: var(--site-gap-7); }
#rowMetodologiaMetodo .divMetodologiaMetodo:before { height: calc(var(--site-gap) / 2); background: var(--color-azul-hex); display: block; z-index: 1; }
#rowMetodologiaMetodo .divMetodologiaMetodo:after  { content: ""; position: absolute; bottom: calc(var(--site-gap) * -1); left: calc(var(--site-gap) * -4); }
#rowMetodologiaMetodo .divMetodologiaMetodo:after  { width: var(--site-gap-16); height: var(--site-gap-16); z-index: 1; }
#rowMetodologiaMetodo .divMetodologiaMetodo:after  { background-image: url("/wp-content/themes/perroalavista/images/miscelanea/fondo-degradado-azul-800.png"); background-repeat: no-repeat; background-size: contain; }
#rowMetodologiaMetodo .divRow                      { position: relative; margin-bottom: var(--site-gap-2); display: flex; justify-content: space-between; z-index: 2; }
#rowMetodologiaMetodo .divContent                  { margin-left: auto; padding: var(--site-gap) var(--site-gap-2) var(--site-gap-2) var(--site-gap-2); }
#rowMetodologiaMetodo .divContent                  { width: calc(100% - var(--site-gap-11)); background: var(--color-caqui-hex); border-bottom-right-radius: var(--site-gap-4); }
#rowMetodologiaMetodo .divContent .divFoto         { margin: calc(var(--site-gap) * -3) 0px 0px calc(var(--site-gap) * -13); }
#rowMetodologiaMetodo .divContent .divFoto         { width: calc((100vw - calc((100vw - 1400px) / 2) - var(--site-gap-7))); height: var(--site-gap-13); }
#rowMetodologiaMetodo .divContent .divFoto         { border-top-right-radius: var(--site-gap-4); }
#rowMetodologiaMetodo .divContent .divFoto         { background-image: url("/wp-content/uploads/foto-metodologia-1.jpg"); background-repeat: no-repeat; background-size: cover; }
#rowMetodologiaMetodo .divContent p                { margin: var(--site-gap) 0px 0px 0px; font-size: 28px; color: #FFFFFF; text-align: justify; }

@media (max-width: 1380px) {
	#rowMetodologiaMetodo .divMetodologiaMetodo        { padding: var(--site-gap-2) var(--site-gap) 0px 0px; }
	#rowMetodologiaMetodo .divMetodologiaMetodo:before { right: var(--site-gap); }
	#rowMetodologiaMetodo .divContent .divFoto         { width: calc(100vw - var(--site-gap-8)); }
}

@media (max-width: 1180px) {
	#rowMetodologiaMetodo .divMetodologiaMetodo        { padding: var(--site-gap-2) 40px 0px 0px; }
	#rowMetodologiaMetodo .divMetodologiaMetodo:before { right: 40px; }
	#rowMetodologiaMetodo .divContent .divFoto         { width: calc(100vw - 40px - var(--site-gap-8)); }
	#rowMetodologiaMetodo .divContent p                { font-size: 24px; }
}

@media (max-width:  980px) {
	#rowMetodologiaMetodo .divMetodologiaMetodo:after  { width: var(--site-gap-20); height: var(--site-gap-20); }
	#rowMetodologiaMetodo .divContent p                { font-size: 20px; }
}

@media (max-width:  780px) {
	#rowMetodologiaMetodo .divMetodologiaMetodo        { padding: var(--site-gap-2) 30px 0px 0px; }
	#rowMetodologiaMetodo .divMetodologiaMetodo:before { right: 30px; }
	#rowMetodologiaMetodo .divContent                  { width: calc(100% - var(--site-gap-6)); }
	#rowMetodologiaMetodo .divContent .divFoto         { margin-left: calc(var(--site-gap) * -8); width: calc(100vw - 30px - var(--site-gap-8)); }
	#rowMetodologiaMetodo .divContent p                { font-size: 18px; }
}

@media (max-width:  580px) {
	#rowMetodologiaMetodo .divMetodologiaMetodo        { padding: var(--site-gap-2) 30px 0px 30px; }
	#rowMetodologiaMetodo .divMetodologiaMetodo:after  { top: calc(var(--site-gap) * -4); left: 50%; transform: translateX(-50%); width: var(--site-gap-16); height: var(--site-gap-16); }
	#rowMetodologiaMetodo .divRow                      { display: block; }
	#rowMetodologiaMetodo .divContent                  { width: 100%; }
	#rowMetodologiaMetodo .divContent .divFoto         { margin-left: calc(var(--site-gap) * -4); width: calc(100vw - 30px - var(--site-gap-8)); }
	#rowMetodologiaMetodo .divContent p                { font-size: 16px; text-align: left; }
}

@media (max-width:  380px) {
	#rowMetodologiaMetodo .divMetodologiaMetodo        { padding: var(--site-gap-2) 20px 0px 20px; }
	#rowMetodologiaMetodo .divMetodologiaMetodo:after  { top: calc(var(--site-gap) * -3); width: var(--site-gap-15); height: var(--site-gap-15); }
	#rowMetodologiaMetodo .divContent                  { padding: var(--site-gap); }
	#rowMetodologiaMetodo .divContent .divFoto         { margin: calc(var(--site-gap) * -1) 0px 0px calc(var(--site-gap) * -1); width: calc(100% + var(--site-gap)); }
	#rowMetodologiaMetodo .divContent p                { font-size: 14px; }
}

/************************************ #rowMetodologiaObjetivos ***********************************/

#rowMetodologiaObjetivos *                 { -webkit-transition: all 0.2s ease; transition: all 0.2s ease; }
#rowMetodologiaObjetivos .divRow           { position: relative; margin-bottom: var(--site-gap-2); width: 100%; display: flex; }
#rowMetodologiaObjetivos .divRow-1:after   { content: ""; position: absolute; bottom: 0px; right: 0px; transform: translate(calc(var(--site-gap-4) * -1),50%); width: var(--site-gap-12); height: var(--site-gap-12); }
#rowMetodologiaObjetivos .divRow-1:after   { background-image: url("/wp-content/themes/perroalavista/images/miscelanea/fondo-degradado-azul-800.png"); background-repeat: no-repeat; background-size: contain; }
#rowMetodologiaObjetivos .divFoto          { width: 50%; background-image: url("/wp-content/uploads/foto-metodologia-2.jpg"); background-repeat: no-repeat; background-size: cover; background-position: center; }
#rowMetodologiaObjetivos .divTitulo        { position: relative; padding: var(--site-gap-2) var(--site-gap); width: var(--site-gap-9); height: var(--site-gap-9); }
#rowMetodologiaObjetivos .divTitulo        { background: var(--color-caqui-hex); border-top-right-radius: var(--site-gap-4); z-index: 1; }
#rowMetodologiaObjetivos .divTitulo:before { content: ""; position: absolute; bottom: 0px; right: 0px; width: 200%; height: calc(var(--site-gap) / 2); background: var(--color-azul-hex); }
#rowMetodologiaObjetivos .divTitulo h3     { color: #FFFFFF !important; }
#rowMetodologiaObjetivos .divContent       { margin: auto; max-width: 1180px; }
#rowMetodologiaObjetivos p                 { margin: 0px; font-size: 28px; text-align: justify; }
#rowMetodologiaObjetivos ul                { margin: 20px 0px 0px 0px; list-style-type: disc; }
#rowMetodologiaObjetivos ul li             { margin-bottom: 10px; font-size: 28px; }

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

@media (max-width: 1180px) {
	#rowMetodologiaObjetivos .divRow-1:after   { transform: translate(calc(var(--site-gap-3) * -1),50%); }
	#rowMetodologiaObjetivos .divTitulo        { width: var(--site-gap-10); }
	#rowMetodologiaObjetivos .divTitulo h3     { font-size: 60px; }
}

@media (max-width:  980px) {
	#rowMetodologiaObjetivos .divRow-1:after   { transform: translate(calc(var(--site-gap) * -1),50%); width: var(--site-gap-16); height: var(--site-gap-16); }
	#rowMetodologiaObjetivos .divTitulo h3     { font-size: 50px; }
	#rowMetodologiaObjetivos p                 { font-size: 20px; }
	#rowMetodologiaObjetivos ul li             { font-size: 20px; }
}

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

@media (max-width:  580px) {
	#rowMetodologiaObjetivos .divContent       { padding: 0px 30px; }
	#rowMetodologiaObjetivos .divRow-1         { padding-right: 30px; flex-direction: column-reverse; }
	#rowMetodologiaObjetivos .divRow-1:after   { transform: translate(0%,70%); width: var(--site-gap-12); height: var(--site-gap-12); }
	#rowMetodologiaObjetivos .divFoto          { width: 100%; height: var(--site-gap-9); z-index: 2; }
	#rowMetodologiaObjetivos .divTitulo        { padding: var(--site-gap); width: 100%; height: auto; }
	#rowMetodologiaObjetivos .divTitulo:before { width: 100%; }
	#rowMetodologiaObjetivos .divTitulo h3     { width: 100%; }
	#rowMetodologiaObjetivos p                 { font-size: 16px; text-align: left; }
	#rowMetodologiaObjetivos ul li             { font-size: 16px; }
}

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

/************************************** #rowMetodologiaComo **************************************/

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

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

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

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

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

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

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

/************************************** #rowMetodologiaFoto **************************************/

#rowMetodologiaFoto *                          { -webkit-transition: all 0.2s ease; transition: all 0.2s ease; }
#rowMetodologiaFoto .divMetodologiaFoto        { position: relative; padding-top: var(--site-gap-2); width: calc(50% + var(--site-gap-9)); }
#rowMetodologiaFoto .divMetodologiaFoto:before { content: ""; position: absolute; top: 0px; left: var(--site-gap-9); width: var(--site-gap-7); }
#rowMetodologiaFoto .divMetodologiaFoto:before { height: calc(var(--site-gap) / 2); background: var(--color-azul-hex); display: block; }
#rowMetodologiaFoto .divMetodologiaFoto: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); }
#rowMetodologiaFoto .divMetodologiaFoto:after  { background-image: url("/wp-content/themes/perroalavista/images/miscelanea/fondo-degradado-azul-800.png"); background-repeat: no-repeat; background-size: contain; }
#rowMetodologiaFoto .divRow                    { position: relative; margin-bottom: var(--site-gap-2); width: 100%; z-index: 1; }
#rowMetodologiaFoto .divFoto                   { width: 100%; height: var(--site-gap-13); border-bottom-right-radius: var(--site-gap-4); }
#rowMetodologiaFoto .divFoto                   { background-image: url("/wp-content/uploads/foto-metodologia-3.jpg"); background-repeat: no-repeat; background-size: cover; }

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

@media (max-width:  580px) {
	#rowMetodologiaFoto .divMetodologiaFoto        { width: calc(100% - 30px); }
	#rowMetodologiaFoto .divMetodologiaFoto:before { left: 30px; }
	#rowMetodologiaFoto .divMetodologiaFoto:after  { width: var(--site-gap-12); height: var(--site-gap-12); }
	#rowMetodologiaFoto .divFoto                   { height: var(--site-gap-9); }
}

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

/*********************************** #rowMetodologiaCientifico ***********************************/

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

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

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

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

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

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

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