/* NEWS */
.list-group {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-column-gap: 15px;
    grid-row-gap: 0px;
}

.list-group-item+.list-group-item { border-top-width: 1px; }
.list-group-item {
    border: 1px solid #eee;
    margin-bottom: 25px;
    border-radius: 10px;
    padding: 0px;
    overflow: hidden;
    transition: all .5s ease-in-out !important;
}
.list-group-item .blog-content { padding: 10px; }
.list-group-item img { border-radius: 10px 10px 0 0; }
.news .news-list-item h3 a, .header {
    text-decoration: none;
    color: #333;
    text-transform: none;
}
.news-single .article .news-img-wrap {
    float: left !important;
    width: 100% !important;
    margin: 0 !important;
}
.news-single .article .news-img-wrap img {
    border-radius: 20px !important;
    float: left !important;
    width: 100% !important;
    margin: 0 !important;
}  
.btn-read-more {
    transform: translateY(160px) !important;
    display: block !important;
    transition: all .5s ease-in-out !important;
}
.img-dummy { border-radius: 10px; }
.list-group-item:hover { transform: scale(1.01); transition: all .5s ease-in-out !important; }
.list-group-item:hover .btn-read-more { transform: translateY(0px) !important; transition: all .5s ease-in-out !important; } 
.list-group-item .cat-badge { transform: translateY(-90px) !important; transition: all .5s ease-in-out !important; }
.list-group-item:hover .cat-badge { transform: translateY(0px) !important; transition: all .5s ease-in-out !important; }
  
@media(max-width: 1024px) {
    .list-group-item .btn-read-more { transform: translateY(0px) !important; transition: all .5s ease-in-out !important; }
    .list-group-item .cat-badge { transform: translateY(0px) !important; transition: all .5s ease-in-out !important; }
}
@media(max-width: 767px) {
    .list-group {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: ;
        grid-column-gap: px;
        grid-row-gap: 0px;
    }
}

/* NEWS SINGLE */
#subpage-content .news-single .article .news-img-wrap {
    float: none;
    width: initial;
    margin: 0;
}
#subpage-content .news-single .article .news-img-wrap img {
    width: 100%;
    height: auto;
    border-radius: 10px;
}
#subpage-content .news-single .article a { text-decoration: none; color: var(--white); }
#subpage-content .news-single .teaser-text { color: var(--darker-blue);}
#subpage-content .news-single .fa-tags, .fa-calendar-alt { color: var(--darker-blue);}  
.label-info {
    padding: 3px 10px;
    border-radius: 10px;
    color: var(--white);
}
.label-badge {
    padding: 6px 10px;
    border-radius: 27px;
    color: var(--white);
    font-size: 1.4em;
}
.label-info.label-blue { border: 1px solid var(--darker-blue); background-color:  var(--darker-blue); } 
.label-info.label-orange { border: 1px solid var(--dark-blue); background-color:  var(--dark-blue); }
.label-info.label-gray { border: 1px solid var(--blue); background-color:  var(--blue); }
.label-info.label-white  { border: 1px solid var(--white); background-color:  var(--white); }
.cat-badge { position: absolute; right: 20px; top: 15px; }
.blog-meta {
    border-radius: 10px;
    border: 1px solid var(--gray);
    padding: 10px 20px;
    margin-bottom: 15px;
    text-align: center;
}
.blog-content h3 { margin-top: 0px; font-size: 1.35em; }
.blog-content p, .blog-content li { 
    width: initial; 
    text-align: left;
    font-size: clamp(0.8em,2vw,0.9em);
    line-height: 1.4em;
    margin-bottom: 1.2em;
}
.blog-content li { margin-bottom: .5em;}
.btn.btn-custom a { text-decoration: none; color: var(--darker-blue); }
.btn.btn-custom:hover a { color: var(--white); }
.topnews-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    width: 40px;
    height: 40px;
    background: var(--dark-blue);
    padding: 2px 11px;
    color: var(--white);
    border-radius: 10px;
    font-size: 1.4em;
}

.news .article h3 { 
    margin-bottom: .5em !important; 
    font-family: "Sansation";
    color: var(--darker-blue);
}

@media(max-width: 768px) {
    .blog-content h3 { font-size: 0.9em; }
    .blog-content p { font-size: clamp(0.5em,1.6vw,0.9em); }
    .btn.btn-outline, .btn.btn-custom { padding: 7px 15px; }
    .label-info { padding: 2px 4px; font-size: 0.8em; }
}

@media(min-width: 1024px) and (max-width: 1128px){
    .blog-content h3 { font-size: 1.05em; }
    .blog-content p {
        font-size: clamp(0.7em,2vw,0.8em);
        line-height: 1.2em;
    }
}