@charset "utf-8";
/* CSS Document */
#base { padding-top:25px; position:relative }
#base:before { 
  content:'';
  width:100%;
  height:75px;
  background-color:var(--blue);
  background-image: url('/_img/bck_.jpg');
  position:absolute;
  top:0
}
#base div.in { width:1200px; max-width:100%; padding-bottom:100px }
#base h3 { 
	color:white; font-weight: lighter; text-transform: uppercase; margin-bottom:50px;  background-color:var(--blue);
	background-image: url('/_img/bck_.jpg');  
}
#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: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 { 
   z-index:-1; 
  background-color: rgba(100,100,100,.5);
  height:400px;
  border:5px solid white;
  box-shadow: 10px 10px 0 var(--blue-lgt)
}
#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 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 }

}