
/* Teaser element in the top right corner */
#teaser-next {
	position: absolute;
	right: 0;
	top: 4px;
	width: 0;
	min-width: 4%;
	min-width: calc(4% + var(--safe-area-right));
	height: 600px;
	z-index: 3;
	overflow: hidden;
	-webkit-transition: width 0.3s;
	-moz-transition: width 0.3s;
	-o-transition: width 0.3s;
	transition: width 0.3s;
}
#teaser-next:after {
	font: 14px/14px "RockSolid Icons";
	content: "\e018";
	-webkit-font-smoothing: antialiased;
	font-smoothing: antialiased;
	text-rendering: geometricPrecision;
	text-indent: 0;
	display: inline-block;
	position: relative;
	position: absolute;
	z-index: 4;
	left: 2px;
	top: 349px;
	padding: 12px 24px 14px 12px;
	background: #556e86;
	background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.3) 100%), #57718a;
	background: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.3) 100%), #57718a;
	background: -o-linear-gradient(top, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.3) 100%), #57718a;
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.3) 100%), #57718a;
	color: #ffffff;
	text-shadow: 0 1px 0.5px rgba(0, 0, 0, 0.75);
	-webkit-box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.75), 0 1px 2px rgba(0, 0, 0, 0.6), 0 1px 0 rgba(255, 255, 255, 0.1) inset;
	-moz-box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.75), 0 1px 2px rgba(0, 0, 0, 0.6), 0 1px 0 rgba(255, 255, 255, 0.1) inset;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.75), 0 1px 2px rgba(0, 0, 0, 0.6), 0 1px 0 rgba(255, 255, 255, 0.1) inset;
}
.modernizr-no-boxshadow #teaser-next:after {
	top: 348px;
	border: 1px solid #000000;
}
#teaser-next a {
	display: block;
	position: relative;
	width: 600px;
	padding: 350px 20px 20px 60px;
	text-decoration: none;
}
#teaser-next img {
	position: absolute;
	top: 0;
	left: 20px;
}
#teaser-next h1,
#teaser-next h2,
#teaser-next h3 {
	position: relative;
	display: inline;
	left: 10px;
	top: -5px;
	font-size: 32px;
	color: #57718a;
	background: #ffffff;
	-webkit-box-shadow: -8px 0 0 #ffffff, 8px 0 0 #ffffff;
	-moz-box-shadow: -8px 0 0 #ffffff, 8px 0 0 #ffffff;
	box-shadow: -8px 0 0 #ffffff, 8px 0 0 #ffffff;
}
.modernizr-no-boxshadow #teaser-next h1,
.modernizr-no-boxshadow #teaser-next h2,
.modernizr-no-boxshadow #teaser-next h3 {
	padding: 0 8px;
}
#teaser-next.hover,
.modernizr-no-touchevents #teaser-next:hover {
	width: 620px;
}
#teaser-next.hover:after,
.modernizr-no-touchevents #teaser-next:hover:after {
	content: "\e019";
}
/* Mobile (viewport width 599px and below) */
@media screen and (max-width: 599px) {
	#teaser-next {
		position: static;
		width: auto;
		height: auto;
		min-width: 0;
		padding: 0;
		overflow: visible;
	}
	#teaser-next:after {
		content: none;
		display: none;
	}
	#teaser-next a {
		width: auto;
		padding: 0;
	}
	#teaser-next img {
		position: static;
		width: 100%;
		height: auto;
	}
	#teaser-next h1,
	#teaser-next h2,
	#teaser-next h3 {
		position: static;
		display: block;
		margin: 20px 6.66667%;
		background: none;
		-webkit-box-shadow: none;
		-moz-box-shadow: none;
		box-shadow: none;
	}
	.modernizr-no-touchevents #teaser-next:hover,
	#teaser-next.hover {
		width: auto;
	}
	.modernizr-no-touchevents #teaser-next:hover:after,
	#teaser-next.hover:after {
		content: none;
	}
}

