#teaser {
	height: 30vw; min-height: 270px;
	margin-top: 20px;
}
@media (min-width: 1500px) { #teaser {
	height: 450px;
} }
@media (max-width: 1030px) { #teaser {
	height: 38vw;
} }

.tile.highlight {
	outline: 2px solid transparent;
	/**/outline-color: #76B82A;/**/
	outline-offset: -5px;
}
.tile .thumb {
	background-size: cover;
	background-position: 50% 50%;
}
.tile .description {
	padding: 10px 15px;
}
.tile .description h2,
.tile .description h1 {
	text-transform: uppercase;
	margin: 5px 0;
}
.tile .description h1 {
	font-size: 145%;
}
.tile .description h2 {
	font-size: 135%;
}
.tile .description .ad-marker {
	position: relative; float: right;
	top: -10px; right: -15px;
	background-color: #ffffffcc;
	margin: 0; padding: .1em .5em;
	font-size: 13px;
}
.tile.tile.highlight .description .ad-marker {
	right: -13px;
}


.tile-single .tile {
	display: flex; flex-direction: row-reverse;
	background: #F5F5F5;
	margin: 20px -4px;
}
.tile-single .thumb,
.tile-single .description {
	display: inline-block;
	border: 4px solid white;
}
.tile-single .thumb {
	min-height: 250px;
	flex: 0 0 42%;
}
@media (max-width: 680px) {
	.tile-single .tile {
		flex-direction: column !important;
	}
	.tile-single .thumb {
		min-height: 50vw;
	}
}

.tile-row {
	display: flex; flex-direction: row;
	margin: 20px -4px;
}
.tile-row .tile {
	display: inline-block;
	width: 33.33333%;
	flex: 0 0 33.33333%;
	vertical-align: top;
	border: 4px solid white;
	background: #F5F5F5;
}
.tile-row .tile {
	width: 50%;
	flex: 0 0 50%;
}
.tile-row .tile .thumb {
	width: 100%; height: 250px;
	border-bottom: 8px solid white;
}
@media (max-width: 680px) {
	.tile-row {
		display: block;
		margin: 0 -4px;
	}
	.tile-row .tile {
		width: 100%;
		margin: 10px 0;
	}
	.tile-row .tile .thumb {
		height: 50vw;
	}
}

#tile-header {
	margin: 15px 0 0 0;
	text-align: center;
	padding: 10px 0;
}
#tile-header h1 {
	font-size: 145%;
}
#tile-header h2,
#tile-header h1 {
	text-transform: uppercase;
	margin: 5px -5px 5px -5px;
}

#content {
	background: #F5F5F5;
	padding: 10px 50px;
	margin: 20px 0;
}
@media (max-width: 1000px) { #content {
	padding: 10px calc(15px + 3.5vw) 0;
} }

#content>input {
	display: none;
}
#content .expand-toggle {
	display: block;
}

#content .expand-toggle .toggle ~ *  {
	max-height: 300px; overflow: hidden;
	transition: max-height .3s, padding .3s, margin .3s, border-width .3s;
}
#content>input:not(:checked) + .expand-toggle .toggle ~ *  {
	max-height: 0; padding: 0; margin: 0; border-width: 0;
}

#content .expand-toggle::after {
	display: block; content: '〉';
	transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -webkit-transform: rotate(90deg);
	transition: transform .25s;
	text-align: center; margin: auto;
	width: 1em; font-size: 60px;
	cursor: pointer;
}
#content input:checked + .expand-toggle::after {
	transform: rotate(-90deg); -moz-transform: rotate(-90deg); -ms-transform: rotate(-90deg); -webkit-transform: rotate(-90deg);
}

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { /* fixes for IE10+ */
	.tile>a {
		display: inline;
	}
	.tile .description {
		border-bottom: none;
	}
	.tile .description .item {
		position: relative;
	}
	.tile .description .item::before {
		content: '•'; font-size: 200%;
		position: absolute; left: 4px; top: -12.5px;
	}
}