/*
	CSS personalizado para 05 ME APUNTO
*/

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

/*    Color Oscuro: 2C774F rgb( 44,119, 79) */
/*            Gris: 999999 rgb(153,153,153) */
/*     Color Medio: 95BBA7 rgb(149,187,167) */
/*     Color Claro: CADDD3 rgb(202,221,211) */
/* Color muy Claro: E4EEE9 rgb(228,238,233) */

/*     Color Verde: 58C146 rgb( 88,193, 70) */
/*  Color Amarillo: ECC61C rgb(236,198, 28) */
/*	    Color Azul: 315BA0 rgb( 49, 91,160) */
/*	  Color Marrón: 6D5654 rgb(109, 86, 84) */

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

/****************************************** #rowMeApunto *****************************************/

:root { --divPrograma-padding: 20px; --divPrograma-width: 300px; }

/* PROGRAMAS */

#rowMeApunto *                      { -webkit-transition: all 0.2s ease; transition: all 0.2s ease; }
#rowMeApunto .divMeApunto           { margin: auto; }
#rowMeApunto .divProgramas          { display: flex; justify-content: center; }
#rowMeApunto .divPrograma           { position: relative; padding: 0px var(--divPrograma-padding); width: var(--divPrograma-width); }
#rowMeApunto .divCabecera           { cursor: pointer; }
#rowMeApunto .divCabecera:hover     { transform: scale(1.05); }
#rowMeApunto .divImagen             { position: relative; width: 100%; background-repeat: no-repeat; background-size: contain; }
#rowMeApunto .divImagen             { border: solid 8px var(--color-amarillo-hex); border-radius: 50%; box-shadow: 0px 90px 30px -70px rgba(0,0,0,0.5); }
#rowMeApunto .divImagen:before      { content: ""; padding-top: 100%; display: block; }
#rowMeApunto .divTextos             { text-align: center; }
#rowMeApunto .divTextos .spanTitulo { margin: 30px auto 0px auto; font-size: 22px; font-weight: 900; color: var(--color1-hex); display: block; }
#rowMeApunto .divTextos .spanTexto  { margin: 10px auto 0px auto; font-size: 18px; font-weight: 400; display: block; }
#rowMeApunto .divIcon               { font-size: 50px; text-align: center; }

#rowMeApunto .divProgramaMaddi       .divImagen  { background-image: url("/wp-content/uploads/me-apunto-maddi.jpg"); }
#rowMeApunto .divProgramaTarjeta     .divImagen  { background-image: url("/wp-content/uploads/me-apunto-tarjeta.jpg"); }
#rowMeApunto .divProgramaDomestico   .divImagen  { background-image: url("/wp-content/uploads/me-apunto-domestico.jpg"); }
#rowMeApunto .divProgramaComunitario .divImagen  { background-image: url("/wp-content/uploads/me-apunto-comunitario.jpg"); }
#rowMeApunto .divProgramaComunitario .spanTitulo { letter-spacing: -0.5px; }

@media (max-width: 1180px) {
	:root { --divPrograma-padding: 10px; --divPrograma-width: 230px; }
	#rowMeApunto .divImagen                                        { border-width: 6px; box-shadow: 0px 80px 27px -62px rgba(0,0,0,0.5); }
	#rowMeApunto .divTextos              .spanTitulo               { font-size: 20px; }
	#rowMeApunto .divTextos              .spanTexto                { font-size: 16px; }
	#rowMeApunto .divProgramaComunitario .spanTitulo               { margin-left: -10%; width: 120%; letter-spacing: normal; }
	#rowMeApunto .divIcon                                          { font-size: 40px; }
}

@media (max-width:  980px) {
	:root { --divPrograma-padding: 10px; --divPrograma-width: 190px; }
	#rowMeApunto .divImagen                                        { border-width: 4px; box-shadow: 0px 70px 23px -54px rgba(0,0,0,0.5); }
	#rowMeApunto .divTextos              .spanTitulo               { font-size: 18px; }
	#rowMeApunto .divTextos              .spanTexto                { font-size: 14px; }
	#rowMeApunto .divProgramaMaddi       .spanTexto                { letter-spacing: -0.3px; }
	#rowMeApunto .divProgramaComunitario .spanTitulo               { margin-left: -12%; width: 124%; letter-spacing: -0.5px; }
	#rowMeApunto .divIcon                                          { font-size: 35px; }
}

@media (max-width:  780px) {
	:root { --divPrograma-padding: 10px; --divPrograma-width: 100%; }
	#rowMeApunto .divProgramas                                     { flex-wrap: wrap; }
	#rowMeApunto .divPrograma                                      { padding: 20px; }
	#rowMeApunto .divCabecera                                      { display: flex; flex-wrap: wrap; align-items: center; }
	#rowMeApunto .divImagen                                        { width: 180px; box-shadow: 0px 55px 30px -40px rgba(0,0,0,0.5); }
	#rowMeApunto .divTextos                                        { margin-left: -50px; padding: 15px 60px; width: calc(100% - 130px); background: #FFFFFF; }
	#rowMeApunto .divTextos                                        { border: solid 4px var(--color-amarillo-hex); border-radius: 0px 20px 20px 0px; text-align: left; }
	#rowMeApunto .divCabecera:hover      .divTextos                { background: var(--color5-hex); }
	#rowMeApunto .divTextos              .spanTitulo               { margin: 0px; }
	#rowMeApunto .divTextos              .spanTitulo br5080:before { content: " "; }
	#rowMeApunto .divTextos              .spanTexto                { margin: 5px 0px 0px 0px; max-width: 270px; }
	#rowMeApunto .divTextos              .spanTexto  br5080:before { content: " "; }
	#rowMeApunto .divIcon                                          { margin-left: -40px; font-size: 30px; }
	#rowMeApunto .divProgramaMaddi       .spanTexto                { letter-spacing: normal; }
	#rowMeApunto .divProgramaComunitario .spanTitulo               { width: 100%; letter-spacing: normal; }
}

@media (max-width:  580px) {
	#rowMeApunto .divPrograma                                      { margin: 20px; padding: 20px 20px 0px 20px; background: #FFFFFF; border: solid 4px var(--color-amarillo-hex); border-radius: 20px; }
	#rowMeApunto .divCabecera                                      { flex-direction: column; }
	#rowMeApunto .divTextos                                        { margin: 20px 0px 0px 0px; padding: 0px; width: 100%; background: none; border: none; border-radius: 0px; text-align: center; }
	#rowMeApunto .divCabecera:hover      .divTextos                { background: #FFFFFF; }
	#rowMeApunto .divTextos              .spanTitulo               { font-size: 20px; }
	#rowMeApunto .divTextos              .spanTexto                { margin: 5px auto 0px auto; font-size: 16px; max-width: 305px; }
	#rowMeApunto .divIcon                                          { margin: 10px 0px 0px 0px; font-size: 24px; }
}

@media (max-width:  380px) {
	#rowMeApunto .divTextos              .spanTitulo               { font-size: 18px; }
	#rowMeApunto .divTextos              .spanTexto                { font-size: 14px; max-width: none; }
}

/* FORMULARIOS */

#rowMeApunto .divContent                               { position: relative; padding-top: 20px; width: calc((var(--divPrograma-width) * 4) - (var(--divPrograma-padding) * 2)); display: none; }
#rowMeApunto .divContent                               { border-top: solid 4px var(--color-amarillo-hex); z-index: 1; -webkit-transition: none; transition: none; }
#rowMeApunto .divProgramaTarjeta     .divContent       { margin-left: calc(var(--divPrograma-width) * -1); }
#rowMeApunto .divProgramaDomestico   .divContent       { margin-left: calc(var(--divPrograma-width) * -2); }
#rowMeApunto .divProgramaComunitario .divContent       { margin-left: calc(var(--divPrograma-width) * -3); }

#rowMeApunto .divFieldNombre                           { width: calc((100% - 190px) / 2); }
#rowMeApunto .divFieldApellidos                        { width: calc((100% - 190px) / 2); }
#rowMeApunto .divFieldDNI                              { width: 150px; }
#rowMeApunto .divFieldTipoVia                          { width: 265px; }
#rowMeApunto .divFieldNombreVia                        { width: calc(100% - 705px); }
#rowMeApunto .divFieldPortal                           { width: 90px; }
#rowMeApunto .divFieldEscalera                         { width: 90px; }
#rowMeApunto .divFieldPiso                             { width: 90px; }
#rowMeApunto .divFieldLetra                            { width: 90px; }
#rowMeApunto .divFieldCodigoPostal                     { width: 120px; }
#rowMeApunto .divFieldPoblacion                        { width: calc((100% - 300px) / 2); }
#rowMeApunto .divFieldTelefono                         { width: 120px; }
#rowMeApunto .divFieldMail                             { width: calc((100% - 300px) / 2); }
#rowMeApunto .divFieldTipoVivienda                     { width: 300px; }
#rowMeApunto .divFieldComentarios                      { width: calc(100% - 320px) }
#rowMeApunto .divFieldComentarios    textarea          { height: 140px }
#rowMeApunto .divFieldPersonas                         { width: 300px; }
#rowMeApunto .divProgramaDomestico   .divFieldPersonas { margin-top: -100px; }
#rowMeApunto .divLegal                                 { margin-bottom: 20px; }

@media (max-width: 1180px) {
	#rowMeApunto .divFieldNombreVia                        { width: calc(100% - 285px); }
	#rowMeApunto .divFieldPortal                           { width: calc((100% - 60px) / 4); }
	#rowMeApunto .divFieldEscalera                         { width: calc((100% - 60px) / 4); }
	#rowMeApunto .divFieldPiso                             { width: calc((100% - 60px) / 4); }
	#rowMeApunto .divFieldLetra                            { width: calc((100% - 60px) / 4); }
}

@media (max-width:  980px) {
	#rowMeApunto .divFieldCodigoPostal                     { width: 150px; }
	#rowMeApunto .divFieldPoblacion                        { width: calc(100% - 170px); }
	#rowMeApunto .divFieldTelefono                         { width: 150px; }
	#rowMeApunto .divFieldMail                             { width: calc(100% - 170px); }
}

@media (max-width:  780px) {
	#rowMeApunto .divContent                               { margin-left: 0px !important; padding: 20px 30px; width: 100%; border: none; }
	#rowMeApunto .divFieldNombre                           { width: calc((100% - 130px) / 2); }
	#rowMeApunto .divFieldApellidos                        { width: calc((100% - 130px) / 2); }
	#rowMeApunto .divFieldDNI                              { width: 110px; }
	#rowMeApunto .divFieldNombreVia                        { width: calc(100% - 275px); }
	#rowMeApunto .divFieldPortal                           { width: calc((100% - 30px) / 4); }
	#rowMeApunto .divFieldEscalera                         { width: calc((100% - 30px) / 4); }
	#rowMeApunto .divFieldPiso                             { width: calc((100% - 30px) / 4); }
	#rowMeApunto .divFieldLetra                            { width: calc((100% - 30px) / 4); }
	#rowMeApunto .divFieldCodigoPostal                     { width: 120px; }
	#rowMeApunto .divFieldPoblacion                        { width: calc(100% - 130px); }
	#rowMeApunto .divFieldTelefono                         { width: 120px; }
	#rowMeApunto .divFieldMail                             { width: calc(100% - 130px); }
	#rowMeApunto .divFieldTipoVivienda                     { width: 100%; }
	#rowMeApunto .divFieldComentarios                      { width: 100%; }
	#rowMeApunto .divFieldComentarios    textarea          { height: 100px }
	#rowMeApunto .divFieldPersonas                         { width: 100%; }
	#rowMeApunto .divProgramaDomestico   .divFieldPersonas { margin-top: 0px; }
}

@media (max-width:  580px) {
	#rowMeApunto .divContent                               { margin-top: 20px; padding: 0px; }
	#rowMeApunto .divFieldNombre                           { width: 100%; }
	#rowMeApunto .divFieldApellidos                        { width: 100%; }
	#rowMeApunto .divFieldDNI                              { width: 100%; }
	#rowMeApunto .divFieldTipoVia                          { width: 100%; }
	#rowMeApunto .divFieldNombreVia                        { width: 100%; }
	#rowMeApunto .divFieldCodigoPostal                     { width: 110px; }
	#rowMeApunto .divFieldPoblacion                        { width: calc(100% - 120px); }
	#rowMeApunto .divFieldTelefono                         { width: 110px; }
	#rowMeApunto .divFieldMail                             { width: calc(100% - 120px); }
}

@media (max-width:  480px) {
	#rowMeApunto .divFieldPortal                           { width: calc((100% - 10px) / 2); }
	#rowMeApunto .divFieldEscalera                         { width: calc((100% - 10px) / 2); }
	#rowMeApunto .divFieldPiso                             { width: calc((100% - 10px) / 2); }
	#rowMeApunto .divFieldLetra                            { width: calc((100% - 10px) / 2); }
	#rowMeApunto .divFieldCodigoPostal                     { width: 100%; }
	#rowMeApunto .divFieldPoblacion                        { width: 100%; }
	#rowMeApunto .divFieldTelefono                         { width: 100%; }
	#rowMeApunto .divFieldMail                             { width: 100%; }
}

/* MADDI */

#rowMeApunto .divProgramaMaddi .divDownload            { margin: 20px auto 0px auto; width: 560px; display: flex; flex-wrap: wrap; justify-content: center; }
#rowMeApunto .divProgramaMaddi .divDownload h3         { width: 100%; text-align: center; }
#rowMeApunto .divProgramaMaddi .divDownload a          { margin: 40px 20px; width: 240px; display: block; line-height: 0px; }
#rowMeApunto .divProgramaMaddi .divDownload a:hover    { transform: scale(1.1); text-decoration: none; }
#rowMeApunto .divProgramaMaddi .divDownload a span     { margin-top: 10px; font-size: 24px; text-align: center; display: block; }
#rowMeApunto .divProgramaMaddi .divDownload .aPDF      { margin: 0px 20px; padding: 15px; width: 100%; height: auto; background: var(--color4-hex); border: solid 2px var(--color1-hex); }
#rowMeApunto .divProgramaMaddi .divDownload .aPDF      { border-radius: 20px; display: flex; align-items: center; justify-content: center; }
#rowMeApunto .divProgramaMaddi .divDownload .aPDF img  { width: 64px; }
#rowMeApunto .divProgramaMaddi .divDownload .aPDF span { margin: 0px 0px 0px 10px; }

@media (max-width:  980px) {
	#rowMeApunto .divProgramaMaddi .divDownload           { width: 480px; }
	#rowMeApunto .divProgramaMaddi .divDownload a         { margin: 30px 20px; width: 200px; }
	#rowMeApunto .divProgramaMaddi .divDownload a span    { font-size: 20px; }
	#rowMeApunto .divProgramaMaddi .divDownload .aPDF     { padding: 10px; border-radius: 15px; }
	#rowMeApunto .divProgramaMaddi .divDownload .aPDF img { width: 56px; }
}

@media (max-width:  780px) {
	#rowMeApunto .divProgramaMaddi .divContent            { margin-left: 0px; }
	#rowMeApunto .divProgramaMaddi .divDownload           { margin: 0px auto; width: 360px; }
	#rowMeApunto .divProgramaMaddi .divDownload a         { margin: 20px 15px; width: 150px; }
	#rowMeApunto .divProgramaMaddi .divDownload .aPDF     { margin:  0px 15px; border-width: 1px; border-radius: 10px; }
	#rowMeApunto .divProgramaMaddi .divDownload .aPDF img { width: 48px; }
}

@media (max-width:  580px) {
	#rowMeApunto .divProgramaMaddi .divDownload           { margin: 0px auto 20px auto; width: 300px; }
	#rowMeApunto .divProgramaMaddi .divDownload a         { margin: 15px; width: 120px; }
	#rowMeApunto .divProgramaMaddi .divDownload a span    { font-size: 18px; }
	#rowMeApunto .divProgramaMaddi .divDownload .aPDF img { width: 42px; }
}

@media (max-width:  380px) {
	#rowMeApunto .divProgramaMaddi .divDownload           { width: 240px; }
	#rowMeApunto .divProgramaMaddi .divDownload a         { margin: 10px; width: 100px; }
	#rowMeApunto .divProgramaMaddi .divDownload a span    { margin-top: 5px; font-size: 16px; }
	#rowMeApunto .divProgramaMaddi .divDownload .aPDF     { margin:  0px 10px; }
	#rowMeApunto .divProgramaMaddi .divDownload .aPDF img { width: 36px; }
}