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

.news{ display: flex; flex-wrap: wrap;}
.news .thumbnail-news{ padding: 12px 0; border-bottom: 1px solid #c2e9f1; width: 100%; margin: 5px; float: left; cursor:pointer;}
.news .thumbnail-news .images{ max-width: 20%; float: left; padding: 8px 0;}
.news .thumbnail-news .images img{ width: 100%;}
.news .thumbnail-news .text{ width: 64%; float: left; padding: 8px 12px; line-height: 1.5; color: #000;}
.news .thumbnail-news .text small{display: block;}
.news .thumbnail-news .text small.highlight-blue{ font-size: 12px; padding: 2px; text-align: center; background: #aadffe; width: 90px;}
.news .thumbnail-news .text small.highlight-yellow{ font-size: 12px; padding: 2px; text-align: center; background: #fae23c; width: 90px;}
.news .thumbnail-news .text small.highlight-green{ font-size: 12px; padding: 2px; text-align: center; background: #b5fadc; width: 90px;}
.news .thumbnail-news .text p{ font-weight: bold; margin: 4px auto; font-size: 16px;}
.news .thumbnail-news .text a:hover{ color: #666;}


@media ( max-width:768px) {
  .news{ display: block;}
  .news .thumbnail-news{ width: 100%;}
  .news .thumbnail-news .images, .news .thumbnail-news .text{ width: 100%; display: block;}
  .images{ max-width:70% !important;}
  .news .thumbnail-news .images{ float: none; margin: auto;}
  .news .thumbnail-news .images img{ }
}