/* POSTS */

.POSTS::before,
.POSTS::after {
	content: "";
	display: block;
	overflow: hidden;
}

.POSTS .filter {
	float: none;
	margin: 0 0 60rem;
	overflow: hidden;
}

.POSTS .filter select {
	cursor: pointer;
	background: var(--light) url('../../assets/images/expand.svg') no-repeat right 10rem center/12rem 9rem;
	box-sizing: border-box;
	color: var(--black);
	font-family: inherit;
	font-size: 16rem;
	line-height: 50rem;
	height: 50rem;
	width: 100%;
	padding: 0 30rem 0 15rem;
	border: none;
	border-radius: 0;
	transition: box-shadow .25s;
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none
}

.POSTS .filter select::-ms-expand {
	display: none
}


.POSTS .filter input {
	box-sizing: border-box;
	color: var(--black);
	font-family: inherit;
	font-size: 16rem;
	line-height: 50rem;
	height: 50rem;
	width: 100%;
	padding: 0 15rem 0 45rem;
	border: none;
	border-radius: 0;
	transition: box-shadow .25s;
	appearance: none;
	-webkit-appearance: none;
	background: var(--light) url('../../assets/images/search.svg') no-repeat 12rem center / 24rem 24rem;
}

.POSTS .post {
	position: relative;
}

.POSTS .image {
	margin-bottom: 20rem
}

.POSTS .content a::before {
	content: "";
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.POSTS .content a:hover {
	color: var(--blue)
}

.POSTS .content::after {
	content: '';
	display: block;
	margin-top: 20rem;
	width: 42rem;
	height: 22rem;
	background: url('images/more-arrow.svg') no-repeat center/100%;
}

.POSTS .category {
    text-transform: uppercase;
    font-weight: 700;
    font-size: 14rem;
}

.POSTS .pagination {
	text-align: center;
	margin: 60rem 0 0;
}

.POSTS .screen-reader-text {
	display: none;
}

.POSTS #loadmore[data-status="done"] .pagination {display: none;}
.POSTS[data-page="166"] .category {display: none;}
.POSTS[data-page="166"] select[name="_categories[]"] {display: none;}

@media (width <= 960px) {
	.POSTS .filter {margin: 0 0 40rem;}
	.POSTS .pagination {margin: 40rem 0 0;}
	.POSTS[data-page="166"] .filter .b-column:nth-child(2) {display: none;}
}

@media (width > 960px) {
	.POSTS[data-variant="featured"] .b-column {width: 100% !important;}
	.POSTS[data-variant="featured"] .image {margin: 0; width: 50%;}

	.POSTS[data-variant="featured"] .content {
		width: 50%;
		padding: 20rem 60rem;
		box-sizing: border-box;
	}

	.POSTS[data-variant="featured"] .post {
		display: flex;
		flex-direction: row;
		align-items: center;
		background: #fff;
		box-shadow: 0 5rem 5rem 0 rgba(0,0,0,.03),0 33rem 70rem 0 rgba(0,0,0,.05);
	}
}