.blog-list{ width: 70%; display: inline-block; vertical-align: top; padding-top: 12px;}
.blog-fillter{ width: 29%; display: inline-block; vertical-align: top; padding: 40px 8px 0; }

.blog-list .list-blog{border-right: 1px dotted #666;  padding-right: 12px;}
.blog-list .list-blog .thumbnail:first-child{ margin-top: 4px!important; }
.blog-list .list-blog .thumbnail{ padding-bottom:30px; margin:18px auto; border-bottom: 1px solid #c2e9f1;}
.blog-list .title{ background: url(../images/bg-title.png); padding: 12px; color: #000; margin-bottom: 12px;}
.blog-list .title span{ float: right; font-size: 12px;}
.blog-list .title span small{ background: #323896; padding: 2px 4px; display: inline-block; border-radius: 12px; font-size: 10px; color: #fff;}
.blog-list .images-blog{ background: #eee; padding: 12px; margin: 12px auto;}
.blog-list .images-blog div{ width: 300px; height: auto; margin: auto;}
.blog-list .images-blog div img{ width: 100%;}

.blog-fillter .title-fillter{ background: #5ebafd; color: #fff; padding: 12px; border-radius: 8px; font-weight: bold;}
.blog-fillter ul li{ padding: 12px;}
.blog-fillter ul li a{ color: #666; display: block;}
.blog-fillter ul li a:hover{ text-decoration: underline;}

.pagination{ width: 100%; text-align: right;}
.page-number { display: inline-block; }
.page-number a { color: black; float: left; padding: 2px 6px; text-decoration: none; }
.page-number a.active { color: #000; border-radius: 12px; background: #aadffe; width: 20px; height: 20px;}
.page-number a:hover:not(.active) { background-color: #ddd; border-radius: 12px; }
.page-number a.icon{ color: #aadffe;}
.page-number a.text{ font-weight: bold;}

@media ( max-width:680px) {
  .blog-list, .blog-fillter{ width: 100%; display: block; border-right: none; padding: 0;}
  .blog-fillter{ margin-top: 18px;}
}