/*
	CSS personalizado para 07 BLOG
*/

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

/*    Rojo Oscuro: D74F41 rgb(215, 79, 65) */
/*           Gris: 999999 rgb(153,153,153) */
/*     Rojo Medio: EBA7A0 rgb(235,167,160) */
/*     Rojo Claro: F5D3CF rgb(245,211,207) */
/* Rojo Muy Claro: FAE9E7 rgb(250,233,231) */

/*           Añil: 143046 rgb( 20, 48, 70) */
/*          Ambar: E6AF40 rgb(230,175, 64) */
/*          Oliva: 4C5335 rgb( 76, 83, 53) */
/*          Crema: FAEFD9 rgb(250,239,217) */

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

/***************************************** #rowBlogIntro *****************************************/

#rowBlogIntro *              { -webkit-transition: all 0.2s ease; transition: all 0.2s ease; }
#rowBlogIntro .divBlogIntro  { cursor: default; }
#rowBlogIntro .divContent    { position: relative; margin: auto; padding: 140px 0px 40px 0px; max-width: 1180px; z-index: 1; }
#rowBlogIntro .divHeading h3 { color: var(--color1-hex) !important; }
#rowBlogIntro .divHeading p  { max-width: 660px; }

@media (max-width:  980px) { #rowBlogIntro .divContent { padding: 100px  0px 40px  0px; } #rowBlogIntro .divHeading p { max-width: 550px; } }
@media (max-width:  780px) {                                                              #rowBlogIntro .divHeading p { max-width: 430px; } }
@media (max-width:  580px) {                                                              #rowBlogIntro .divHeading p { margin: 12px auto 0px auto; max-width: 290px; } }
@media (max-width:  380px) { #rowBlogIntro .divContent { padding: 100px 20px 40px 20px; } #rowBlogIntro .divHeading p { max-width: none; } }

/***************************************** #rowBlogFeed ******************************************/

#rowBlogFeed *                                                        { -webkit-transition: all 0.2s ease; transition: all 0.2s ease; }
#rowBlogFeed .divBlogFeed                                             { position: relative; margin: auto; padding: 40px 0px; max-width: 1180px; display: flex; justify-content: space-between; z-index: 1; cursor: default; }
#rowBlogFeed .divIzda                                                 { width: calc(100% - 480px); }
#rowBlogFeed .divIzda .divFoto                                        { background-repeat: no-repeat; background-size: cover; background-position: center; }
#rowBlogFeed .divIzda .divMetas                                       { display: flex; align-items: center; overflow: hidden; }
#rowBlogFeed .divIzda .divMetas           ul                          { margin: 0px; list-style-type: none; display: flex; align-items: center; }
#rowBlogFeed .divIzda .divMetas           li                          { margin-left: 0px; font-family: var(--font-family-rowdies); font-weight: 400; color: var(--color1-hex); }
#rowBlogFeed .divIzda .divMetas           li                          { display: flex; align-items: center; white-space: nowrap; }
#rowBlogFeed .divIzda .divMetas           li a                        { text-decoration: none; }
#rowBlogFeed .divIzda .divMetas           li:before                   { content: ""; margin: 0px 5px; width: 5px; height: 5px; background: var(--color1-hex); border-radius: 50%; display: block; }
#rowBlogFeed .divIzda .divMetas           li:first-of-type:before     { display: none; }
#rowBlogFeed .divIzda .divMetas           .divFecha                   { font-family: var(--font-family-rowdies); font-weight: 400; color: var(--color2-hex); display: flex; align-items: center; white-space: nowrap; }
#rowBlogFeed .divIzda .divMetas           .divFecha:before            { content: ""; margin: 0px 5px; width: 2px; height: 14px; background: var(--color2-hex); display: block; }
#rowBlogFeed .divIzda .divTitulo                                      { font-family: var(--font-family-rowdies); font-weight: 400; color: var(--color-añil-hex); text-transform: uppercase; }
#rowBlogFeed .divIzda .divPrimera                                     { margin-bottom: 20px; padding-bottom: 30px; border-bottom: solid 8px var(--color1-hex); cursor: pointer; }
#rowBlogFeed .divIzda .divPrimera         .divFoto                    { height: 480px; border-radius: 40px; }
#rowBlogFeed .divIzda .divPrimera         .divMetas                   { margin-top: 20px; }
#rowBlogFeed .divIzda .divPrimera         .divMetas         li        { font-size: 13px; letter-spacing: 2px; }
#rowBlogFeed .divIzda .divPrimera         .divMetas         .divFecha { font-size: 13px; letter-spacing: 2px; }
#rowBlogFeed .divIzda .divPrimera         .divTitulo                  { margin-top: 20px; font-size: 24px; line-height: 100%; }
#rowBlogFeed .divIzda .divPrimera:hover   .divTitulo                  { color: var(--color1-hex); }
#rowBlogFeed .divIzda .divPrimera         .aVerMasAñilRight           { margin-top: 20px; }
#rowBlogFeed .divIzda .divDestacadas                                  { display: flex; flex-wrap: wrap; justify-content: space-between; }
#rowBlogFeed .divIzda .divDestacada                                   { margin-top: 30px; width: calc((100% - 30px) / 2); cursor: pointer; }
#rowBlogFeed .divIzda .divDestacada       .divFoto                    { height: 240px; border-radius: 30px; }
#rowBlogFeed .divIzda .divDestacada       .divMetas                   { margin-top: 10px; }
#rowBlogFeed .divIzda .divDestacada       .divMetas         li        { font-size: 12px; letter-spacing: 1px; }
#rowBlogFeed .divIzda .divDestacada       .divMetas         .divFecha { font-size: 12px; letter-spacing: 1px; }
#rowBlogFeed .divIzda .divDestacada       .divTitulo                  { margin-top: 10px; font-size: 18px; height: calc((18px * 1.1 * 2) - 0px); -webkit-line-clamp: 2; line-height: 110%; }
#rowBlogFeed .divIzda .divDestacada       .divTitulo                  { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; }
#rowBlogFeed .divIzda .divDestacada:hover .divTitulo                  { color: var(--color1-hex); }
#rowBlogFeed .divIzda .divDestacada       .aVerMasAñilRight           { margin-top: 10px; }
#rowBlogFeed .divDcha                                                 { width: 420px; padding: 40px; background: var(--color-crema-hex); border-radius: 40px; }
#rowBlogFeed .divDcha .divTituloBloque                                { font-family: var(--font-family-rowdies); font-size: 23px; color: var(--color1-hex); }
#rowBlogFeed .divDcha .divRecientes                                   { margin-bottom: 40px; padding-bottom: 40px; border-bottom: solid 1px var(--color2-hex); }
#rowBlogFeed .divDcha .divReciente                                    { margin-top: 40px; }
#rowBlogFeed .divDcha .divReciente        .divFecha                   { font-size: 12px; font-weight: 600; color: var(--color2-hex); letter-spacing: 2px; }
#rowBlogFeed .divDcha .divReciente        .divTitulo        a         { margin-top: 5px; font-size: 14px; font-weight: 700; color: var(--color-añil-hex); }
#rowBlogFeed .divDcha .divReciente        .divTitulo        a         { display: block; text-decoration: none; text-transform: uppercase; line-height: 120%; }
#rowBlogFeed .divDcha .divReciente        .divTitulo        a:hover   { text-decoration: underline; text-underline-offset: 3px; }
#rowBlogFeed .divDcha .divCategorias                                  { margin-bottom: 20px; }
#rowBlogFeed .divDcha .divCategoria                                   { margin-top: 8px; display: flex; align-items: center; }
#rowBlogFeed .divDcha .divCategoria                         i         { margin-right: 10px; }
#rowBlogFeed .divDcha .divCategoria                         a         { font-size: 14px; font-weight: 700; color: var(--color-añil-hex); text-decoration: none; line-height: 120%; }
#rowBlogFeed .divDcha .divCategoria                         a:hover   { text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 1380px) { #rowBlogFeed .divBlogFeed { padding: 40px; } }

@media (max-width: 1180px) {
	#rowBlogFeed .divIzda                                              { width: calc(100% - 420px); }
	#rowBlogFeed .divIzda .divPrimera                                  { margin-bottom: 15px; padding-bottom: 20px; }
	#rowBlogFeed .divIzda .divPrimera      .divFoto                    { height: 400px; border-radius: 30px; }
	#rowBlogFeed .divIzda .divPrimera      .divMetas                   { margin-top: 15px; }
	#rowBlogFeed .divIzda .divPrimera      .divTitulo                  { margin-top: 15px; }
	#rowBlogFeed .divIzda .divPrimera      .aVerMasAñilRight           { margin-top: 15px; }
	#rowBlogFeed .divIzda .divDestacada                                { margin-top: 20px; width: calc((100% - 20px) / 2); }
	#rowBlogFeed .divIzda .divDestacada    .divFoto                    { height: 200px; border-radius: 20px; }
	#rowBlogFeed .divIzda .divDestacada    .divTitulo                  { margin-top: 5px; height: calc((18px * 1.1 * 3) - 0px); -webkit-line-clamp: 3; }
	#rowBlogFeed .divIzda .divDestacada    .aVerMasAñilRight           { margin-top: 5px; }
	#rowBlogFeed .divDcha                                              { width: 400px; padding: 30px; border-radius: 30px; }
	#rowBlogFeed .divDcha .divRecientes                                { margin-bottom: 30px; padding-bottom: 30px; }
	#rowBlogFeed .divDcha .divReciente                                 { margin-top: 30px; }
	#rowBlogFeed .divDcha .divCategorias                               { margin-bottom: 15px; }
	#rowBlogFeed .divDcha .divCategoria                                { margin-top: 6px; }
}

@media (max-width:  980px) {
	#rowBlogFeed .divBlogFeed                                          { padding: 30px; }
	#rowBlogFeed .divIzda                                              { width: calc(100% - 360px); }
	#rowBlogFeed .divIzda .divMetas        .divFecha:before            { height: 14px; }
	#rowBlogFeed .divIzda .divPrimera                                  { border-bottom-width: 6px; }
	#rowBlogFeed .divIzda .divPrimera      .divFoto                    { height: 350px; border-radius: 25px; }
	#rowBlogFeed .divIzda .divPrimera      .divMetas         li        { font-size: 12px; letter-spacing: 1px; }
	#rowBlogFeed .divIzda .divPrimera      .divMetas         .divFecha { font-size: 12px; letter-spacing: 1px; }
	#rowBlogFeed .divIzda .divPrimera      .divTitulo                  { margin-top: 10px; font-size: 20px; }
	#rowBlogFeed .divIzda .divPrimera      .aVerMasAñilRight           { margin-top: 10px; }
	#rowBlogFeed .divIzda .divDestacada                                { margin-top: 20px; width: calc((100% - 15px) / 2); }
	#rowBlogFeed .divIzda .divDestacada    .divFoto                    { height: 160px; border-radius: 15px; }
	#rowBlogFeed .divIzda .divDestacada    .divMetas         li        { font-size: 11px; letter-spacing: normal; }
	#rowBlogFeed .divIzda .divDestacada    .divMetas         .divFecha { font-size: 11px; letter-spacing: normal; }
	#rowBlogFeed .divIzda .divDestacada    .divTitulo                  { font-size: 16px; height: calc((16px * 1.1 * 3) - 0px); }
	#rowBlogFeed .divDcha                                              { width: 340px; padding: 25px; border-radius: 30px; }
	#rowBlogFeed .divDcha .divTituloBloque                             { font-size: 20px; }
	#rowBlogFeed .divDcha .divRecientes                                { margin-bottom: 25px; padding-bottom: 25px; }
	#rowBlogFeed .divDcha .divReciente                                 { margin-top: 20px; }
	#rowBlogFeed .divDcha .divReciente     .divFecha                   { font-size: 11px; letter-spacing: 1px; }
	#rowBlogFeed .divDcha .divReciente     .divTitulo        a         { font-size: 13px; }
	#rowBlogFeed .divDcha .divReciente     .divTitulo        a:hover   { text-underline-offset: 2px; }
	#rowBlogFeed .divDcha .divCategorias                               { margin-bottom: 10px; }
	#rowBlogFeed .divDcha .divCategoria                                { margin-top: 5px; }
	#rowBlogFeed .divDcha .divCategoria                      i         { margin-right: 10px; }
	#rowBlogFeed .divDcha .divCategoria                      a         { font-size: 13px; }
}

@media (max-width:  780px) {
	#rowBlogFeed .divBlogFeed                                          { padding: 0px 30px 30px 30px; flex-wrap: wrap; }
	#rowBlogFeed .divIzda                                              { width: 100%; }
	#rowBlogFeed .divIzda .divPrimera                                  { border-bottom-width: 4px; }
	#rowBlogFeed .divIzda .divPrimera      .divFoto                    { height: 300px; border-radius: 20px; }
	#rowBlogFeed .divIzda .divDestacada    .divFoto                    { height: 140px; border-radius: 10px; }
	#rowBlogFeed .divIzda .divDestacada    .divTitulo                  { font-size: 14px; height: calc((14px * 1.1 * 3) - 0px); }
	#rowBlogFeed .divDcha                                              { margin-top: 30px; width: 100%; }
	#rowBlogFeed .divDcha .divRecientes                                { margin-bottom: 20px; padding-bottom: 20px; }
	#rowBlogFeed .divDcha .divReciente                                 { margin-top: 15px; }
}

@media (max-width:  580px) {
	#rowBlogFeed .divBlogFeed                                          { padding: 0px 25px 30px 25px; }
	#rowBlogFeed .divIzda .divMetas        .divFecha:before            { height: 12px; }
	#rowBlogFeed .divIzda .divPrimera      .divFoto                    { height: 250px; border-radius: 15px; }
	#rowBlogFeed .divIzda .divPrimera      .divMetas         li        { font-size: 11px; letter-spacing: normal; }
	#rowBlogFeed .divIzda .divPrimera      .divMetas         .divFecha { font-size: 11px; letter-spacing: normal; }
	#rowBlogFeed .divIzda .divPrimera      .divTitulo                  { font-size: 18px; }
	#rowBlogFeed .divIzda .divDestacada                                { width: 100%; }
	#rowBlogFeed .divIzda .divDestacada    .divMetas         li        { font-size: 10px; font-weight: 300; }
	#rowBlogFeed .divIzda .divDestacada    .divMetas         .divFecha { font-size: 10px; font-weight: 300; }
	#rowBlogFeed .divIzda .divDestacada    .divTitulo                  { font-size: 13px; font-weight: 300; height: auto; }
	#rowBlogFeed .divDcha                                              { width: 100%; padding: 20px; border-radius: 15px; }
	#rowBlogFeed .divDcha .divTituloBloque                             { font-size: 18px; }
	#rowBlogFeed .divDcha .divRecientes                                { margin-bottom: 15px; padding-bottom: 15px; }
	#rowBlogFeed .divDcha .divReciente                                 { margin-top: 10px; }
	#rowBlogFeed .divDcha .divReciente     .divFecha                   { font-size: 10px; letter-spacing: normal; }
	#rowBlogFeed .divDcha .divReciente     .divTitulo        a         { margin-top: 2px; font-size: 12px; }
	#rowBlogFeed .divDcha .divCategoria                      i         { margin-right: 8px; }
	#rowBlogFeed .divDcha .divCategoria                      a         { font-size: 12px; }
}

@media (max-width:  380px) { #rowBlogFeed .divBlogFeed { padding: 0px 20px 30px 20px; } }