@charset "utf-8";
/* CSS Document */
#base { padding-top:25px; position:relative; }
#base:before { 
  content:'';
  width:100%;
  height:75px;
  background-color:#fafafa;
  position:absolute;
  top:0
}
#base div.in { width:1200px; max-width:100%; padding-bottom:100px }
body #base h3 { 
	color:rgba(195,155,110,1); text-transform: uppercase; margin-bottom:50px; text-shadow: none;
}
#base div.in div.left { width:700px; max-width:100%; 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); display: none; }
#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:25px 5px; 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 { 
    margin-top:50px;
   z-index:-1; 
  background-color: rgba(100,100,100,.5);
  height:400px;
  border:5px solid white;
  
}
#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; color:var(--blue); padding: 8px 25px; margin:25px 0;
background-color: #fafafa; color:rgba(195,155,110,1); display: block; padding: 10px 40px; border-left:none; border-right:none; border-radius: 50px
}
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!important; }
#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:rgba(195,155,110,1); ; 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:rgba(195,155,110,1); margin: 0; margin-left:25px; text-align: center; }
section#blog div#posts { margin:0; padding:0;  overflow:hidden }

#base div.post span.tipo { 
  color:rgba(195,155,110,1); text-align: center; display: block; font-weight: bolder
}
body #base  h4 { color:rgba(195,155,110,1); }
#base p { margin-top: 0!important;  }
#base div.post button { 
  background-color: #fafafa; color:rgba(195,155,110,1); margin:0 auto; display: block; padding: 10px 40px; border-left:none; border-right:none; border-radius: 50px
}
#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: 512px) {
    #base  { padding: 0 }
    body #base h3, body #base h2 { 
        color:rgba(195,155,110,1); text-transform: uppercase; text-shadow: none;
        margin: 0; padding: 10px 0!important; border:none
    }
    body #base h2 { padding: 0!important;  }
    #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 }
}