/* gadget last_entries  */
ul.blog_last_entries{padding-top:11px;padding-left:23px;}
.blog_last_entries em{
	font-style:normal;
	color:#888;
	font-size:0.8em;
}
/* gadget de lista de fechas */ 
.ul_blog_lista_fecha{padding-left:21px;}
.ul_blog_lista_fecha ul{padding-left:13px;}
.ul_blog_lista_fecha li{line-height:1.5em;}
.ul_blog_lista_fecha ul li{background:none;padding-left:0px; }

/* styles for gadget "last_entries" */ 

.blog_last_entries .blog_thumb{
    width:50px; 
    height:50px;
    display:inline-block;background-size:cover;background-position:center center;border-radius:5px;margin-right:11px;float:left;
    position:relative;
}

.blog_last_entries .block{margin:7px;}

/* Estilos para el listado de entradas */ 

.div_lista{
  
  width:95%;
}

.div_lista .div_entrada{
	margin-bottom:1rem;
}
.div_entrada_autor{text-align:right;font-style:italic;}
@media (max-width: 550px) {
.div_lista .div_entrada{
	margin-bottom:1rem;
	padding:1em 0.5em!important;
}
}
.div_lista .div_entrada h1 a{
	text-decoration:none!important;
	border-bottom:none;
}

.div_lista .div_entrada_imagen{
  text-align:center;
  position:relative;
}
.div_lista .div_entrada_imagen img{
  padding:5px; 
  margin:7px auto;
  text-decoration:none;
  border-radius: 5px;
  border:2px solid transparent;
  max-width:98%;
}
.div_lista .div_entrada_imagen img:hover{
  border:2px solid #333;
  border:2px solid rgba(0,0,0,0.4);
}
.div_lista .div_entrada_imagen a{
  text-decoration:none!important;
  border:none!important;
}
.div_lista .div_visitas_comentarios{
	color:#666;font-weight:normal;
	letter-spacing:1px;font-family:sans-serif;
}
.div_lista .div_visitas_comentarios span{color:#666;padding-right:15px;}

.blog_bt_nav{
    margin:0px;
    margin-bottom:21px;
    text-align:center;
    position:relative;
    height:1.2rem;
}
.blog_bt_nav .bt{
    position:absolute;
}
.blog_bt_nav .bt:first-child{
    left:0px;
}
.blog_bt_nav .bt:last-child{
    right:0px;
}
/* Estilos generales */ 

.div_entrada_titulo a:hover{
  color:#111; 
}

.div_entrada_resumen{padding:0;}
.blog_post_body{padding:1rem 2rem;}
.div_entrada_resumen img{max-width:95%;margin:1rem auto;}
@media (max-width: 550px) {
   .blog_post_body{padding:0.5rem;}
}

.div_entrada_descripcion{
   border-bottom:1px solid #211;
   margin-bottom:10px;
   padding-bottom:10px;
}

.div_entrada_fecha{
   text-align:right;
}

.div_visitas_comentarios{
   text-align:right;
}
.div_visitas_comentarios span{
   margin:5px;
}

.div_prev_next{
  text-align:center!important;
}

.div_prev_next a{
  margin: 20px;
}
.div_entradas_relacionadas{
  text-align:right;
}

/* Estilos para el detalle de entradas */ 
.div_contenido_detalle{
  width:95%;
  margin-bottom:31px;
}
@media (max-width: 500px) {
.div_contenido_detalle{width:99%;}
}
.div_detalle{
  border-bottom:1px solid #ddd;
  margin-bottom:20px;
  padding-bottom:10px;
}
.div_detalle .div_visitas{
   text-align:right;
}
.div_detalle .div_visitas{
  margin-top:15px; 
  margin-bottom:5px; 
}
.div_detalle .div_visitas span{
  margin-left:20px; 
}

.div_detalle .social_bar{ 
	display:none;
	text-align:right;
	margin-top:15px;
	padding:4px;
	padding-top:7px;
}
/* styles for clud of tags */

.tags_cloud a{
	display:inline-block;
	margin:3px;
	padding:3px 8px;
	background-color:#ddd;
	background-color:rgba(255,255,255,0.4);
	text-decoration:none;
        border-radius: 3px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;}

.tags_cloud a:hover{
	background-color:#fff;
	background-color:rgba(255,255,255,0.8);
}

    /* ====== ARTICLE GADGET ====== */
	/*
        .blog_wrapper_vimeo, .blog_wrapper_youtube, .blog_wrapper_podbean, .blog_wrapper_post_image{
            background-color:black; padding:0;
        }
        */
        .blog_wrapper_post_image img{margin:0;}
 
    /* ====== MOSAIC GADGET ====== */
        .blog_mosaic{text-align:center; max-height: 640px; overflow: hidden;}
        .blog_mosaic .clear{display:none;}
        .blog_mosaic .blog_article{position:relative;display:inline-block;margin:0.5rem; 
                    width:23%;width:calc(25% - 20px);
                    border-bottom: 8px #604c8d solid; text-decoration:none;
        }
        .blog_mosaic .blog_article .blog_image{display:block;position:relative;height:200px;
                    transition: all 0.2s ease-in 0s;
                    background-position:center middle;
                    background-size:cover;box-shadow: inset 0px 0px 30px 2px #000; 
        }
        
        .blog_mosaic .blog_article .blog_text{display:block;position:relative;width:100%;height:100px;
                    background-color:transparent; overflow:hidden; padding:0.5rem; text-align:left;
                    background: #eee;
                    background: -webkit-linear-gradient(to right, #eee, #bbb);
                    background: linear-gradient(to bottom, #eee, #bbb);        
        }
        .blog_mosaic .blog_article .blog_title{font-size:1.3rem;}
        .blog_mosaic .blog_article .blog_description{display:none;}
        
        /* ====== multimedia icons ====== */

            .blog_mosaic .blog_article.video .blog_image::before,
            .blog_mosaic .blog_article.audio .blog_image::before,
            .blog_last_entries .video .blog_thumb::before,
            .blog_last_entries .audio .blog_thumb::before,
            .div_entrada.video .div_entrada_imagen a::before,
            .div_entrada.audio .div_entrada_imagen a::before
            {
                    display:block; width:80px; height:80px;
                    position:absolute; border-radius:40px;
                    top:40%; top: calc(50% - 40px);
                    left:40%; left: calc(50% - 40px);
                    content: '';
                    background-color: rgba(255,255,255,0.6);
                    background-image: url('video.png');
                    background-repeat:no-repeat;
                    background-position: 57% center;
                    background-size:50%;
                    transition: all 0.2s ease-in 0s;
            }
                .blog_last_entries .video .blog_thumb::before,
                .blog_last_entries .audio .blog_thumb::before
                { /* smaller than for mosaic */
                    width:40px; height:40px;
                    top:40%; top: calc(50% - 20px);
                    left:40%; left: calc(50% - 20px);
                }
            .blog_mosaic .blog_article.audio .blog_image::before,
            .blog_last_entries .audio .blog_thumb::before,
            .div_entrada.audio .div_entrada_imagen a::before
            {
                    background-image: url('audio.png');
                    background-position: 50% center;
            }
            
        /* ====== one_per_row (a unique mosaic link per row) ====== */
            .blog_mosaic.one_per_row{max-height: none;}
            .blog_mosaic.one_per_row .blog_article{
                display:block;
                height:400px; width:100%; width:calc(100% - 26px);
                margin:1rem auto;
                box-shadow: inset 0px 0px 30px 2px #555; 
                position:relative;
            }
            .blog_mosaic.one_per_row .blog_article:hover {box-shadow: inset 0px 0px 30px 2px transparent;}
            .blog_mosaic.one_per_row .blog_article:hover::before{background-color: rgba(255,255,255,0.8);background-size:60%;}
            
            .blog_mosaic.one_per_row .blog_article .blog_image{ height:100%;}
            .blog_mosaic.one_per_row .blog_article .blog_text{ position:absolute; bottom:0;left:0; width:100%;padding:1rem 2rem;background:rgba(0,0,0,0.2);}
            .blog_mosaic.one_per_row .blog_article .blog_title{color:white;font-size:2rem; font-weight:bold;line-height:2rem;text-shadow:1px 1px 1px black;}
            .blog_mosaic.one_per_row .blog_article .blog_description{display:none;color:white;text-shadow:2px 1px 1px black;}
            .blog_mosaic.one_per_row .blog_article .blog_date{display:none;}
            
        /* ====== hover effect ====== */
            
            .blog_mosaic .blog_article:hover .blog_image {box-shadow: inset 0px 0px 30px 2px transparent;}
            .blog_mosaic .blog_article:hover .blog_image::before{background-color: rgba(255,255,255,0.8);background-size:60%;}
            
        /* = low resolution PCs = */
            @media (max-width: 1200px) {
                .blog_mosaic .blog_article{width:30%;width:calc(33% - 20px);}
                .blog_mosaic .blog_article.one_per_row{width:100%;}
            }
        /* = tablets = */
            @media (max-width: 800px) {
                .blog_mosaic .blog_article{width:48%;width:calc(50% - 20px);}
                .blog_mosaic .blog_article.one_per_row{width:100%;}
            }
        /* = cellphone screens = */
            @media (max-width: 500px) {
                .blog_mosaic .blog_article{width:98%;width:calc(100% - 20px);}
                .blog_mosaic .blog_article .blog_text{height:inherit;}
                .blog_mosaic .blog_article.one_per_row{width:100%;}
            }
            
    /* ====== type TEXT with FLEXIBLE BOX for post image ====== */
    
        .blog_post_image{
            display:block; 
            height: 200px;
            background-repeat: no-repeat; background-size:cover; background-position: center center;
        }
        
    /* ====== type VIMEO/YOUTUBE ====== */
    
    /* https://jonsuh.com/blog/responsive-youtube-vimeo-embed-and-html5-video-with-css/ */
    
        .js-video {
          height: 0;
          padding-top: 25px;
          padding-bottom: 67.5%;
          margin-bottom: 10px;
          position: relative;
          overflow: hidden;
        }

        .js-video.widescreen {
          padding-bottom: 56.34%;
        }

        .js-video.vimeo {
          padding-top: 0;
        }

        .js-video embed, .js-video iframe, .js-video object, .js-video video {
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          position: absolute;
        }       
        
    
