/*
 * Articles Section
 */

.articles-section {
	box-shadow: inset 0 0 2px 2px rgba(0,0,0,0.05), inset 0 0 var(--space-min) 2px rgba(0,0,0,0.05);
}

.articles-section .article-filter .toggle .tag {
	margin-right: var(--space-min);
	margin-bottom: var(--space-min);
}

.articles-section .article-filter .toggle .tag input + span {
	display: inline-block;
	border-bottom: solid 2px var(--teal);
	cursor: pointer;
	font-weight: 500;
	line-height: 1.6;
	padding: 0 8px 0 6px;
}

.articles-section .article-filter .toggle .tag input + span * { pointer-events: none; }

.articles-section .article-filter .toggle .tag input + span .check {
	display: inline-block;
	width: 14px;
	height: 14px;
	border-radius: 2px;
	background-color: transparent;
	box-shadow: inset 0px 0px 0px 2px var(--teal);
	margin-right: 7px;
	transform: translateY(2px);
}

.articles-section .article-filter .toggle .tag input:checked + span {
	background-color: var(--teal);
	color: var(--light);
}

.articles-section .article-filter .toggle .tag input:checked + span .check {
	background-color: var(--light);
}

.articles-section .article-filter .toggle .tag input:checked + span .check:before {
	content: '\00D7';
	display: inline-block;
	position: absolute;
	top: 50%;
	left: 50%;
	font-size: 14px;
	font-weight: 500;
	transform: translate(-50%, -50%);
	color: var(--teal);
}

.articles-section .articles {}
.articles-section .articles .article {
	position: relative;
}

.articles-section .articles .article .thumbnail {
	position: relative;
	display: block;
	padding-bottom: 75%; 
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
}

.articles-section .articles .article .thumbnail .tag {
	display: inline-block;
	padding: 5px 7px;
	line-height: 1;
	position: absolute;
	left: var(--space-min);
	bottom: var(--space-min);
	border-radius: 3px;
	font-weight: 500;
	color: var(--teal);
	background-color: rgba(35,31,32,0.75);
}

.articles-section .articles .article .description {
	position: relative;
	height: 254px;
	overflow-y: hidden;
	white-space: normal;
	z-index: 1;
	margin-bottom: var(--space-min);
}
.articles-section .articles .article .description:after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 60px;
	/*background-color: rgba(0,255,0,0.5);*/
	background-image: linear-gradient( to bottom, rgba(227, 226, 216, 0) 0%, rgba(227, 226, 216, 1) 98%);
}

.articles-section .articles .article .description > * {
	display: inline-block;
}

@media( min-width: 640px )  {
	.articles-section .articles .article .description {
		height: 222px;
	}
}
@media( min-width: 1040px ) {
	.articles-section .articles .article .description {
		height: 254px;
	}

	.articles-section .articles .article .description:after {
		height: 70px;
	}
}
@media( min-width: 1480px ) {
	.articles-section .article-filter .toggle .tag input + span {
		padding: 0 12px 0 9px;
	}

	.articles-section .article-filter .toggle .tag input + span .check {
		width: 18px;
		height: 18px;
		border-radius: 4px;
		margin-right: 10px;
		transform: translateY(3px);
	}
	.articles-section .article-filter .toggle .tag input:checked + span .check:before {
		font-size: 15px;
		transform: translate(-50%, -45%);
	}

	.articles-section .articles .article .description {
		height: 264px;
	}

	.articles-section .articles .article .description:after {}
}


/*
 *	OVERWRITES
 */

/* Travel */
.travel.articles-section {
	position: relative;
	overflow: hidden;
}

.travel.articles-section > .row {
	position: relative;
	z-index: 2;
}

.travel.articles-section .art { z-index: 1; }
.travel.articles-section .art.splash-3 {
		display: none;
}

.travel.articles-section .articles .article .description:after {
	background-image: linear-gradient( to bottom, rgba(242, 243, 235, 0) 0%, rgba(242, 243, 235, 1) 98%);
}

.travel.articles-section .article-filter .toggle .tag input + span {
	border-bottom: solid 2px var(--pink);
}

.travel.articles-section .article-filter .toggle .tag input + span .check {
	box-shadow: inset 0px 0px 0px 2px var(--pink);
}

.travel.articles-section .article-filter .toggle .tag input:checked + span {
	background-color: var(--pink);
}

.travel.articles-section .article-filter .toggle .tag input:checked + span .check:before {
	color: var(--pink);
}

.travel.articles-section .articles .article .thumbnail .tag {
	color: var(--pink);
}
	.travel.articles-section .articles .article .thumbnail .tag:empty {
		display: none;
	}

@media( min-width: 1040px ) {
	.travel.articles-section .art.splash-3 {
		display: block;
		position: absolute;
		left: 50%;
		top: 0;
		width: 500px;
		height: auto;
		transform: translate(35%, -30%) rotate(-35deg);
	}
}
@media( min-width: 1480px ) {
	.travel.articles-section .art.splash-3 {
		width: 640px;
		/*transform: translate(35%, -30%) rotate(-35deg);*/
	}
}

/* Virtual */
.virtual.articles-section .articles .article .description:after {
	background-image: linear-gradient( to bottom, rgba(35, 31, 32, 0) 0%, rgba(35, 31, 32, 1) 98%);
}

.virtual.articles-section .article-filter .toggle .tag input + span {
	border-bottom: solid 2px var(--orange);
}

.virtual.articles-section .article-filter .toggle .tag input + span .check {
	box-shadow: inset 0px 0px 0px 2px var(--orange);
}

.virtual.articles-section .article-filter .toggle .tag input:checked + span {
	background-color: var(--orange);
}

.virtual.articles-section .article-filter .toggle .tag input:checked + span .check:before {
	color: var(--orange);
}

.virtual.articles-section .articles .article .thumbnail .tag {
	color: var(--orange);
}
	.virtual.articles-section .articles .article .thumbnail .tag:empty {
		display: none;
	}