.news-filter {
margin: 25px auto;
width: 100%;
height: 120px;
max-width: 370px;
}
.news-filter .filter-btn {
display: inline-block;
width: 150px;
cursor: pointer;
}
.news-filter .filter-btn .filter {
width: 100%;
margin: 0 auto;
text-align: center;
}
.news-filter .filter-btn .filter-text {
width: 100%;
margin: 0 auto;
text-align: center;
font-size: 1.5rem;
font-weight: 600;
font-family: "Poppins";
}
.news-filter .filter-cat1 {
width: 150px;
height: 80px;
background-image: url(/wp-content/plugins/TJ-Newsroom/lib/img/btn-red1.png);
background-position: center;
background-repeat: no-repeat;
background-size: 120px auto;
float: left;
}
.news-filter .filter-cat1.active {
width: 150px;
height: 80px;
background-image: url(/wp-content/plugins/TJ-Newsroom/lib/img/btn-red2.png);
background-position: center;
background-repeat: no-repeat;
background-size: 120px auto;
float: left;
}
.news-filter .filter-cat2 {
width: 150px;
height: 80px;
background-image: url(/wp-content/plugins/TJ-Newsroom/lib/img/btn-red1.png);
background-position: center;
background-repeat: no-repeat;
background-size: 120px auto;
float: left;
}
.news-filter .filter-cat2.active {
width: 150px;
height: 80px;
background-image: url(/wp-content/plugins/TJ-Newsroom/lib/img/btn-red2.png);
background-position: center;
background-repeat: no-repeat;
background-size: 120px auto;
float: left;
}
.news-boxen {
margin: 0 auto;
width: 100%;
max-width: 1280px;
margin-left: -5px;
}
.news-boxen .news-box {
display: block;
position: relative;
margin: 25px auto;
width: 100%;
max-width: 375px;
min-width: 350px;
border: 0px solid black;
}
.news-boxen .news-box .img {
width: 100%;
height: 400px;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}
.news-boxen .news-box .headline {
padding: 5px;
font-weight: 600;
color: black;
}
.news-boxen .news-box .teaser {
padding: 5px;
color: black;
width: 301px;
}
.news-boxen .news-box .arrow {
position: absolute;
right: 5px;
bottom: 5px;
z-index: 999;
background-image: url(/wp-content/plugins/TJ-Newsroom/lib/img/arrow-right.png);
background-repeat: no-repeat;
background-position: center;
background-size: contain;
width: 30px;
height: 24px;
}
@media (min-width: 1130px) {
.news-boxen {
margin-left: 0;
}
.news-boxen .news-box {
width: 31%;
float: left;
margin: 0 20px 25px 0;
}
.news-boxen .news-box:last-child {
margin: 0 0 25px 0;
}
}