@charset "utf-8";
/* Latest News CSS Document */
.news-box{ position:relative; margin:15px 0; }
.news-thumb{ position: relative; overflow: hidden; margin-bottom: 20px; }
.news-thumb img{ -webkit-transition:0.6s; transition:0.6s; -webkit-backface-visibility:hidden; backface-visibility:hidden; filter: url("data:image/svg+xml;utf8,&lt;svg xmlns=\'http://www.w3.org/2000/svg\'&gt;&lt;filter id=\'grayscale\'&gt;&lt;feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/&gt;&lt;/filter&gt;&lt;/svg&gt;#grayscale"); -webkit-filter: grayscale(0%); }

.news-content{ margin:0; position:relative; z-index:10; }
.news-content h3{ margin:15px 0; font-family:'Rajdhani'; font-size:26px; font-weight:600; line-height:1.2; border-left: 2px solid #dd1515; padding-left: 20px; }
.news-content h3 a { color:#253041; }
.col-3 .news-box .news-content h3{ font-size: 18px; }

.post-meta{ text-transform: uppercase; font-size: 14px; margin: 0; }
.post-meta span{ display:inline-block; position:relative; padding:0; }
.post-meta span i{ color: #dd1515; margin-right: 5px; }
.post-meta .post-cate a{ display: inline-block; line-height: 1; text-transform: uppercase; }
.post-meta .post-cate a:not(:last-child){ margin: 0 2px; }

.news-box:hover h3 a{ color:#dd1515; }
.news-box:hover .news-thumb img{ filter: url("data:image/svg+xml;utf8,&lt;svg xmlns=\'http://www.w3.org/2000/svg\'&gt;&lt;filter id=\'grayscale\'&gt;&lt;feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/&gt;&lt;/filter&gt;&lt;/svg&gt;#grayscale"); filter: gray; -webkit-filter: grayscale(100%); }

.ln-read-more{ letter-spacing: 1px; padding: 12px 18px; margin-top: 20px; line-height: 1; display: inline-block; text-align: center; color: #ffffff; background-color: #253041; font-weight: 700; position: relative; overflow: hidden; -webkit-transition: all 0.3s linear 0s; transition: all 0.3s linear 0s; text-transform: uppercase; z-index: 1; border-radius: 5px; }
.ln-read-more:hover{ color:#ffffff; }
.ln-read-more span { position: absolute; width: 25%; height: 100%; background-color: #dd1515; transform: translateY(150%); border-radius: 50%; left: calc((var(--n) - 1) * 25%); transition: 0.6s; transition-delay: calc((var(--n) - 1) * 0.1s); z-index: -1; }
.ln-read-more:hover span { transform: translateY(0) scale(2); }
.ln-read-more span:nth-child(1) { --n: 1; }
.ln-read-more span:nth-child(2) { --n: 2; }
.ln-read-more span:nth-child(3) { --n: 3; }
.ln-read-more span:nth-child(4) { --n: 4; }