@charset "utf-8";
/* CSS Document */
#base { padding:100px 0; position:relative }
#base div.in { width:1200px; max-width:100%; padding-bottom:100px }
#base h3 { font-weight: lighter; text-transform: uppercase; margin-bottom:10px  }
#base div.in div.left { width:700px; max-width:100%; txt-align: left; margin:0 5px; padding-left: 25px  }
#base div.in div.left div.img { width:100%!important; height: 250px }
#base div.in div.left span.data { color:var(--main) }
#base div.in div.left div.img div.in { width:100%!important; height: 250px; background-size: 100%; background-position: center }
#base div.in p { text-align: left; margin:0 5px; margin-bottom:50px; line-height: 25px; font-size:14px; color:#777 }
#base div.in p a { font-size: inherit; margin:0; padding: 0; color:var(--blue) }
#base div.in div.tags{ margin:50px 0 }
#base div.in div.tags a{ background-color: var(--blue-lgt); 
    padding: 3px 10px; font-size: 12px; color:var(--blue); 
    margin-right:5px; margin-bottom:5px; float: left; }
#base div.in div.right { width:400px!important; text-align: left;    }
#base div.in div.right h3 { text-align: center  }
#base div.in div.right div.in { width:100%!important;  }
#base div.in div.right div.img { 
   z-index:-1; 
  background-color: rgba(100,100,100,.5);
  height:400px;
  border:5px solid white;
  box-shadow: 10px 10px 0 var(--blue-lgt);
    margin-top:10px
}
#base div.in div.right div.post:hover div.img { 
    background-color: rgba(150,55,45,.0001);
}
#base div.in div.right div.img div.in { 
  height: 100%; background-size: 100%; background-position: center;
}
#base a.more { float:right; font-size:12px; border:1px solid var(--blue); color:var(--blue); padding: 8px 25px; margin:25px 0 }
div.right div div.post:after,
div.right a i,
div.right a span,
div.right p {
  display: none
}
div.right div.post h4 {
  position: absolute;
  top:5px;
  width:100%;
  color:white!important;;
  text-align: center;
  font-weight: lighter;
  font-size: 24px!important;
  padding:10px;
}
div.right div.post:hover h4{ 
	text-shadow: 1px 1px 0  rgb(155,10,155)
}
div.right div.post div.img div.in { 
	width:100%; background-repeat:no-repeat; z-index:-1; 
	background-size: 100%; height: 200px; background-position: center;
	filter: grayscale(100%);
	opacity:0.6;
}
div.right div.post:hover div.img div.in { 
    background-size: 130%;  
    filter: none;
	opacity:1;
}
#base div.social {padding:25px;  }
#base .next, #base .prev { display: block; position: absolute; top:380px; left:0; width:200px; z-index: 1; cursor: pointer; overflow: hidden }
#base .next:hover { box-shadow: -10px 10px 0 rgba(0,0,0,.1) }
#base .prev:hover { box-shadow: 10px 10px 0 rgba(0,0,0,.1) }
#base .next { left:auto; right: 0 }
#base .next .img, #base .prev .img { 
    border:1px solid #ddd; width:50px; height:50px; background-color:var(--blue-lgt); float: left; margin-left:20px }
#base .next .img { float: right; margin:0; margin-right:20px }
#base .next:hover .img, #base .prev:hover .img { margin:0; }
#base .next .in, #base .prev .in { height: auto; padding: 0 }
#base .next span, #base .prev span, #base .next p, #base .prev p { 
    display: none;
}
#base .next div.post, #base .prev div.post { 
    width: 100%;
    min-height: auto!important;
    height: auto;
    
}
#base .next h4, #base .prev h4 { 
    display: block; float: left; width: 0; height: 50px; background-color: white; text-align: center; padding: 0; overflow: hidden;
    margin: 0; font-size: 12px; font-weight: lighter
}
#base .next:hover h4, #base .prev:hover h4 { 
    width: 150px; padding: 8px 10px
}
#base .next i, #base .prev i { float: left; font-size: 32px; color:var(--main); position: absolute; left:0; top:9px; z-index: 1 }
#base .next i { left:auto; right:0 }
section#blog { clear:both; }
section#blog header { margin: 0; margin-bottom:40px }
section#blog h2 { color:var(--main); margin: 0; margin-left:25px; text-align: center; }
section#blog div#posts { margin:0; padding:0;  overflow:hidden }
#base div.post button { 
  background-color: white; color:var(--main); margin:0 auto; display: block; border:1px solid var(--main); padding: 6px 30px; border-left:none; border-right:none 
}
#base div.paginador a.anterior, #base div.paginador a.posterior { background-color: white }
#base div.paginador a.anterior:before, #base div.paginador a.posterior:after { content:none }
#base div.paginador a.anterior *, #base div.paginador a.posterior * { color:var(--main) }
#base div.paginador a.disabled * { color:var(--blue-lgt); }
#base div.paginador a.anterior i, #base div.paginador a.posterior i { font-size:24px }
#base div.paginador a.anterior i { margin-right: 9px }
#base div.paginador a.posterior i { margin-left: 9px }
#base div.paginador div.paginas a { border:2px solid white; background-color: white; color:var(--main) }
#base div.paginador div.paginas a.selected { border:2px solid orange; }
@media screen and (max-width: 1100px) {
	#base { padding:10px 0; position:relative }
    #base div.in div.right { width:100%!important;  }
    #base div.in div.left { 
        width:100%; 
        max-width:100%;
        margin:0; padding:0;  
    }
     #base div.in div.left div.mob { 
        width:100%; 
        max-width:100%;
        margin:0; padding:0 15px;  
    }
    #base div.in div.left span { 
        text-align: center; display: block;
    }
    #base h3 { 
        margin-bottom:30px!important; 
        padding: 25px 10px!important; 
        background-image: url('/_img/bck_.jpg');
    }
    #base div.in div.left div.tags { padding-bottom:25px; }
    #base div.social iframe{  
        width: 95px; display: block; margin:0 auto;
    }
	#base div.in div.right div.img { 
		height:350px;
		width:350px;
		margin:0 auto;
	}
    #base a.more { 
        float:none; padding: 8px 25px; margin:25px auto; display: block;
        text-align: center;
    }
    #base .next, #base .prev { display: none }
}