/*
 * Main Stylesheet
 *
 * @copyright Copyright (c) 2012 rocksolidthemes.com
 * @license   https://rocksolidthemes.com/agb   No free usage allowed
 */

/* ===========================================
 * # Index: The structure of this stylesheet
 *
 * - Imports (SASS only)
 * - Fonts
 * - Basic settings (SASS only)
 * - Colors (SASS only)
 * - General styles
 * - Button styles
 * - Wrapper Elements
 * - Elements in order of appearance in HTML
 * - Content styles
 * - Sidebar styles
 * - Form styles
 * - Content elements
 * - Slider styles
 * - Module styles (Search, FAQ, News, Events, Comments)
 * - Footer styles
 * - Media queries
 * - Grid (design + production helper)
 * ======================================== */

// ===========================================
// Imports (Mixins)
// ========================================

@import "mixins.scss";

/* ===========================================
 * Fonts
 * ======================================== */

@include font-face("RockSolid Icons", font-files("rocksolid-icons.woff", woff, "rocksolid-icons.ttf", truetype, "rocksolid-icons.svg", svg), "rocksolid-icons.eot", normal, normal);

@font-face {
	font-family: "Source Sans Pro";
	font-weight: 400;
	font-style: normal;
	src: url("../fonts/source-sans-pro-400.woff2") format("woff2");
}


@font-face {
	font-family: "Source Sans Pro";
	font-weight: 600;
	font-style: normal;
	src: url("../fonts/source-sans-pro-600.woff2") format("woff2");
}


@font-face {
	font-family: "Source Sans Pro";
	font-weight: 400;
	font-style: italic;
	src: url("../fonts/source-sans-pro-400italic.woff2") format("woff2");
}


@font-face {
	font-family: "Source Sans Pro";
	font-weight: 600;
	font-style: italic;
	src: url("../fonts/source-sans-pro-600italic.woff2") format("woff2");
}


// ===========================================
// Basic settings
// ========================================

$logo-height: 120px !default;
$logo-top: 42px !default;
$logo-left: 0 !default;
$logo-bottom: 30px !default;
$logo-background-color: white !default;
$logo-background-transparent: false !default;

// Widths
$max-width: 1122px !default;

// Font
$font-family: "Source Sans Pro", sans-serif !default;
$font-size: 18px !default;
$font-size-mobile: 15px !default;
$line-height: 1.5 !default;

$headline-size-1: 1.8em !default;
$headline-size-2: 1.5em !default;
$headline-size-3: 1.2em !default;
$headline-size-4: 1.1em !default;
$headline-size-5: 1em !default;
$headline-size-6: 0.9em !default;

$fluid-content-images: true !default;
$content-image-cols: 7 !default;

// responsive break points
$breakpoint-desktop: $max-width !default;
$breakpoint-tablet: 900px !default;
$breakpoint-mobile: 599px !default;
$breakpoint-mobile-portrait: 399px !default;

// ===========================================
// Colors
// ========================================

// Colorset
$white: white !default;
$black: black !default;
$light-black: #343434 !default;
$grey: #b1b1b1 !default;
$dark-grey: #636363 !default;
$light-grey: #e8e8e8 !default;
$medium-grey: #dedede !default;
$ultra-light-grey: #f6f6f6 !default;
$blue: #0788ca !default;
$dark-blue: #3d566e !default;
$green: #7eba28 !default;
$red: #de5959 !default;
$loud-red: #e52f2f !default;

// Content colors
$highlight-color: $blue !default;
$headline-color: $dark-blue !default;
$block-headline-color: $headline-color !default;
$highlight-headline-color: $dark-blue !default;
$font-color: $light-black !default;
$font-color-light: mix($grey, $dark-grey) !default;
$footer-color: mix($grey, $dark-grey) !default;
$confirmation: $green !default;
$information: $blue !default;
$warning: $loud-red !default;
$selection-color: $dark-blue !default;

// Links & Navigation
$link-color: $blue !default;
$nav-color: $dark-grey !default;
$nav-hover-color: $dark-blue !default;
$nav-active-color: $dark-grey !default;

// Border
$border-light: $light-grey !default;
$border-medium: $medium-grey !default;

// Shadows
$shadow-color: $black !default;

// Backgrounds
$boxed-layout: true !default;
$background-image: none !default;
$background-repeat: no-repeat !default;
$background-position: 50% 0 !default;
$background-attachment: scroll !default;
$background-size: auto !default;
$background-color: $white !default;
$main-background: $white !default;
$page-background: $white !default;
$nav-background-color: $ultra-light-grey !default;

// Buttons
$button-color: $white !default;
$button-background-color: $dark-blue !default;

/* ===========================================
 * General styles
 * ======================================== */

#{":root"} {
	#{-(-safe-area-left)}: 0px;
	#{-(-safe-area-right)}: 0px;
	#{-(-safe-area-top)}: 0px;
	#{-(-safe-area-bottom)}: 0px;
	@supports (padding: calc(constant(safe-area-inset-left, 0px) / 1.5)) {
		/* Non-standard iOS 11.1 syntax */
		#{-(-safe-area-left)}: calc(constant(safe-area-inset-left, 0px) / 1.5);
		#{-(-safe-area-right)}: calc(constant(safe-area-inset-right, 0px) / 1.5);
		#{-(-safe-area-top)}: constant(safe-area-inset-top, 0px);
		#{-(-safe-area-bottom)}: constant(safe-area-inset-bottom, 0px);
	}
	@supports (padding: calc(max(0px, env(safe-area-inset-left, 0px) - 14px))) and (padding: calc(max(0px, 1px))) {
		/* W3C standard and iOS 11.2 syntax */
		#{-(-safe-area-left)}: calc(max(0px, env(safe-area-inset-left, 0px) - 14px));
		#{-(-safe-area-right)}: calc(max(0px, env(safe-area-inset-right, 0px) - 14px));
		#{-(-safe-area-top)}: env(safe-area-inset-top, 0px);
		#{-(-safe-area-bottom)}: env(safe-area-inset-bottom, 0px);
	}
}

html {
	position: relative;
	@include box-sizing(border-box);
	-webkit-tap-highlight-color: $link-color;
}

body {
	font: #{$font-size}/#{$line-height} $font-family;
	color: $font-color;
	background: $background-color $background-image $background-position $background-repeat $background-attachment;
	background-size: $background-size;
	@include mediaquery(mobile) {
		font-size: $font-size-mobile;
	}
}

* {
	@include box-sizing(inherit);
}

.rs-columns {
	clear: both;
	display: inline-block;
	vertical-align: top;
	width: 100%;
	> h1, > h2, > h3 {
		@extend %block-headline;
	}
}

.rs-column {
	float: left;
	width: 100%;
	margin-top: col(1, 16);
	margin-right: col(1, 16);
	&.-large-first {
		clear: left;
	}
	&.-large-last {
		margin-right: -5px;
	}
	&.-large-first-row {
		margin-top: 0;
	}
	@include column-classes(1 / 16, 6, large);
	.opensauce-fullwidth & {
		margin-top: col(1, 26);
		margin-right: col(1, 26);
		&.-large-last {
			margin-right: -5px;
		}
		&.-large-first-row {
			margin-top: 0;
		}
		@include column-classes(1 / 26, 6, large);
	}
	@include mediaquery(tablet) {
		&, .opensauce-fullwidth & {
			margin-top: col(1, 16);
			margin-right: col(1, 16);
			&.-large-first {
				clear: none;
			}
			&.-large-last {
				margin-right: col(1, 16);
			}
			&.-large-first-row {
				margin-top: col(1, 16);
			}
			&.-medium-first {
				clear: left;
			}
			&.-medium-last {
				margin-right: -5px;
			}
			&.-medium-first-row {
				margin-top: 0;
			}
			@include column-classes(1 / 16, 6, medium);
		}
	}

	@include mediaquery(mobile) {
		&, .opensauce-fullwidth & {
			margin-right: col(1, 16);
			&.-medium-first {
				clear: none;
			}
			&.-medium-last {
				margin-right: col(1, 16);
			}
			&.-medium-first-row {
				margin-top: col(1, 16);
			}
			&.-small-first {
				clear: left;
			}
			&.-small-last {
				margin-right: -5px;
			}
			&.-small-first-row {
				margin-top: 0;
			}
			@include column-classes(1 / 16, 6, small);
		}
	}
}

/* Resetting box model for moo_mediabox and j_colorbox */
#mbCenter, #colorbox {
	@include box-sizing(content-box);
}

::selection {
	background: $selection-color;
	color: $main-background;
	@include text-shadow(none !important);
}

::-moz-selection {
	background: $selection-color;
	color: $main-background;
	@include text-shadow(none !important);
}

button, input, select, textarea {
	font-family: inherit;
}

table {
	width: 100%;
	border-collapse: collapse;
	border: 1px solid $border-medium;
	@include box-shadow(0 0 5px rgba($shadow-color, 0.1));
	th, td {
		border: 1px solid $border-light;
	}
	th {
		padding: em(6) em(10);
		font-weight: 600;
		text-align: left;
		background: rgba($shadow-color, 0.02);
	}
	td {
		padding: em(6) em(10);
	}
}

strong, b {
	font-weight: 600;
}

a {
	color: $link-color;
	text-decoration: none;
	&:hover, &:focus {
		text-decoration: underline;
	}
	&:hover, &:active {
		outline: 0;
	}
	&.external-link:after {
		@include icon("\e151", em(13));
		margin-left: em(4);
	}
}

/* Icon attribute */
*[data-icon] {
	&:before {
		@include icon(attr(data-icon));
		margin-right: em(4);
	}
	&.after {
		&:before {
			content: none;
		}
		&:after {
			@include icon(attr(data-icon));
			margin-left: em(4);
		}
	}
}

.clear {
	clear: both;
}

.invisible {
	position: absolute;
	height: 1px !important;
	width: 1px !important;
	clip: rect(0 0 0 0);
	margin: -1px;
	padding: 0;
	overflow: hidden;
	border: 0;
}

.syndication {
	margin: em(12) 0 0 em(20);
	float: right;
	a {
		margin-left: em(2);
	}
}

.mime_icon {
	margin-bottom: -0.25em;
}

.download-element {
	padding-top: 0;
	padding-right: 0;
	padding-bottom: 0;
}

.ce_toplink, .toplink {
	margin: em(24) 0;
	a {
		display: block;
		width: 100%;
	}
}

.ce_toplink > a:before, .toplink > a:before {
	@include icon("\e00c");
	margin-right: em(5);
}

/* Style for dlh_googlemaps (if you don't use the plugin, you might want to delete this) */
.dlh_googlemap {
	@include box-sizing(content-box);
}

.main-content, .sidebar {
	.dlh_googlemap {
		/* Setting the maps max-width to 100% is best practice, since it becomes fluid that way */
		max-width: 100%;
	}
}

.main-content .dlh_googlemap img {
	max-width: none;
}

hr {
	clear: both;
	height: 1px;
	overflow: visible;
	margin: em(24) 0;
	border: 0;
	background: $border-medium;
}

.confirmation {
	color: $confirmation;
}

.information {
	color: $information;
}

.warning {
	color: $warning;
}

p, div, span {
	&.confirmation, &.information, &.warning {
		position: relative;
		display: block;
		margin: em(27) 0;
		padding: em(50) col(1, 16) em(20);
		border: 1px solid $border-medium;
		@include border-radius(1.5px);
		@if lightness($main-background) < 50% {
			color: lighten($confirmation, 25%);
		}
		@else {
			color: darken($confirmation, 25%);
		}
		background: $main-background;
		@include background-image(linear-gradient(rgba($shadow-color, 0), rgba($shadow-color, 0.02)));
		@include box-shadow(0 0 5px rgba($shadow-color, 0.1));
		&:before {
			@include icon("\e044", em(14));
			position: absolute;
			top: -1px;
			right: -1px;
			left: -1px;
			padding: em(8, 14) em(20, 14);
			color: $main-background;
			text-align: right;
			background: $confirmation;
		}
	}
	&.information {
		@if lightness($main-background) < 50% {
			color: lighten($information, 25%);
		}
		@else {
			color: darken($information, 25%);
		}
		&:before {
			content: "\e0a6";
			background: $information;
		}
	}
	&.warning {
		@if lightness($main-background) < 50% {
			color: lighten($warning, 25%);
		}
		@else {
			color: darken($warning, 25%);
		}
		&:before {
			content: "\e144";
			background: $warning;
		}
	}
}

p.drop-cap:first-letter, span.drop-cap {
	float: left;
	margin: em(5, 60) em(6, 60) em(-10, 60) em(-3, 60);
	font-size: em(60);
	font-weight: 600;
	line-height: 0.7;
	color: $headline-color;
}

p.drop-cap:first-letter {
	/* IE8 and IE9 calculate em's from the parent element */
	margin: em(5) em(6) em(-10) em(-3) unquote("\0/");
}

code {
	padding: em(2, 14) em(5, 14);
	font-family: "Lucida Console", monospace;
	font-size: em(14);
	@include line-height(19, 14);
	background-color: $border-light;
	@include border-radius(3px);
}

pre {
	margin: em(24, 14) 0;
	padding: 0 em(6, 14);
	display: block;
	overflow: auto;
	font-family: "Lucida Console", monospace;
	font-size: em(14);
	@include line-height(24, 14);
	background: $border-light;
	.hljs,
	code {
		font-size: em(14, 14);
		padding: 0;
		line-height: inherit;
		background-color: transparent;
	}
}

/* ===========================================
 * Button styles
 * ======================================== */

button, .button, input[type="submit"], input[type="reset"], input[type="button"] {
	position: relative;
	@include appearance(none);
	display: inline-block;
	padding: em(10) em(27);
	border: 1px solid;
	border-color: darken($button-background-color, 5%) darken($button-background-color, 10%) darken($button-background-color, 15%);
	@include border-radius(1.5px);
	color: $button-color;
	text-align: center;
	text-decoration: none;
	@include text-shadow(1px 1px 0 darken($button-background-color, 10%));
	background: $button-background-color;
	@include background(linear-gradient(lighten($button-background-color, 3%), darken($button-background-color, 3%)));
	@include box-shadow(0 0 8px rgba($shadow-color, 0.1), inset 1px 1px tint($button-background-color, 30%), inset -1px 0 tint($button-background-color, 30%));
	&:hover, &:focus {
		border-color: darken($button-background-color, 10%) darken($button-background-color, 15%) darken($button-background-color, 20%);
		@include background-image(linear-gradient(lighten($button-background-color, 6%), darken($button-background-color, 6%)));
		@include box-shadow(0 0 8px rgba($shadow-color, 0.2), inset 1px 1px tint($button-background-color, 30%), inset -1px 0 tint($button-background-color, 30%));
	}
	&:active {
		@include background-image(linear-gradient(lighten($button-background-color, 1%), darken($button-background-color, 1%)));
		@include box-shadow(0 0 8px rgba($shadow-color, 0), inset 1px 1px tint($button-background-color, 30%), inset -1px 0 tint($button-background-color, 30%));
	}
	#colorbox & {
		/* Fix colorbox close button */
		@include box-shadow(none);
	}
}

/* ===========================================
 * Wrapper Elements
 * ======================================== */

.page {
	@include clearfix;
	position: relative;
	max-width: $max-width;
	margin: 0 auto;
	padding-top: var(-(-safe-area-top));
	padding-bottom: var(-(-safe-area-bottom));
	background: $page-background;
	@if $boxed-layout {
		border: solid $border-medium;
		border-width: 0 1px;
		@include box-shadow(0 0 5px rgba($shadow-color, 0.2));
	}
	@include mediaquery(desktop) {
		padding-right: var(-(-safe-area-right));
		padding-left: var(-(-safe-area-left));
		@if $boxed-layout {
			border: 0;
			@include box-shadow(none);
		}
	}

	.opensauce-not-boxed & {
		@if $boxed-layout {
			padding-right: 1px;
			padding-left: 1px;
			border: 0;
			@include box-shadow(none);
		}
		@include mediaquery(desktop) {
			@if $boxed-layout {
				padding-right: var(-(-safe-area-right));
				padding-left: var(-(-safe-area-left));
			}
		}
	}
}

/* ===========================================
 * Elements in order of appearance in HTML
 * ======================================== */

.page-header {
	position: relative;
	margin: 0 col(1, 28);
	@include mediaquery(tablet) {
		margin-right: col(1, 18);
		margin-left: col(1, 18);
	}

	@include mediaquery(mobile) {
		@include clearfix;
	}
}

.logo {
	position: absolute;
	top: -3px;
	left: -2px;
	z-index: 99;
	margin: $logo-top 0 $logo-bottom $logo-left;
	padding: 2px 10px 10px 2px;
	font-size: inherit;
	@if not $logo-background-transparent {
		background: $logo-background-color;
	}
	@include border-radius(3px);
	@include mediaquery(mobile) {
		position: static;
		margin-left: 0;
		margin-bottom: 12px;
		padding: 0;
	}

	a {
		display: block;
	}
	img {
		display: block;
		width: auto;
		height: $logo-height;
		@include mediaquery(mobile) {
			margin: 0 auto;
		}
	}
}

.header-navigation {
	position: absolute;
	top: em(14, 12);
	right: 0;
	z-index: 1;
	font-size: em(12);
	letter-spacing: em(1, 12);
	color: $link-color;
	text-transform: uppercase;
	@include mediaquery(mobile) {
		position: static;
		text-align: center;
	}

	ul {
		margin: 0;
		padding: 0;
		display: inline;
	}
	li {
		display: inline;
		&:before {
			content: " • ";
			margin: 0 em(2, 12);
		}
		&:first-child:before {
			content: none;
		}
	}
	a {
		color: inherit;
		&:hover, &:focus {
			text-decoration: underline;
		}
	}
}

.tag-line {
	padding-bottom: em(10);
	.logo ~ & {
		min-height: $logo-height + $logo-top + $logo-bottom;
		@include mediaquery(mobile) {
			min-height: 0;
		}
	}
	.ce_text {
		padding: em(65, 16) 0 em(30, 16) col(9, 26);
		font-size: em(16);
		color: $font-color-light;
		@include mediaquery(mobile) {
			padding: em(16, 16) 0;
			text-align: center;
		}

		p {
			margin: 0;
		}
		blockquote {
			margin: 0;
			font-size: em(28, 16);
			color: $headline-color;
		}
	}
	.image_container {
		margin: 0;
		padding: 0;
		width: auto;
		border: 0;
		@include box-shadow(none);
		background: none;
	}
	.ce_image {
		display: inline-block;
		width: 100%;
	}
	.ce_image img, .rsts-main {
		clear: both;
		display: block;
		width: 100%;
		height: auto;
		margin: em(40) 0 em(20);
		@include mediaquery(mobile) {
			margin: em(20, 15) 0 em(15, 15);
		}
	}
	.rsts-main {
		float: left;
		@include mediaquery(mobile) {
			float: none;
		}
	}
}

.main-navigation-wrapper {
	position: relative;
	clear: both;
	border: 1px solid $border-medium;
	background: $nav-background-color;
	@include background(linear-gradient(lighten($nav-background-color, 2%), darken($nav-background-color, 2%)));
	@include box-shadow(0 1px 3px rgba($shadow-color, 0.1), inset 0 0 0 1px rgba($main-background, 0.5));
}

.main-navigation {
	/* clearfix */
	overflow: hidden;
	margin-right: em(64);
	font-size: em(16);
	font-weight: 600;
	color: $nav-color;
	@include mediaquery(tablet) {
		margin-right: 0;
		font-size: em(15);
	}

	@include mediaquery(mobile) {
		display: none;
	}

	ul, li {
		margin: 0;
		padding: 0;
		display: inline;
	}
	a, li > strong, li > span {
		float: left;
		padding: em(12, 16) em(22, 16);
		border-left: 1px solid $border-medium;
		color: inherit;
		text-decoration: none;
		@include box-shadow(inset 1px 0 rgba($main-background, 0.5));
		&.trail, &.active {
			color: $nav-active-color;
			background: lighten($nav-background-color, 3%);
		}
		&.home {
			overflow: hidden;
			text-indent: -99em;
			line-height: 0;
			&:after {
				@include icon("\2302", em(12, 16));
				@include line-height(24, 12);
				display: block;
			}
			&.trail, &.active {
				color: inherit;
				background: none;
			}
		}
	}
	a:hover, a:focus {
		color: $nav-hover-color;
		background: darken($nav-background-color, 3%);
	}
	li:first-child {
		> a, > strong, > span {
			border-left: 0;
		}
	}
}

.sub-navigation {
	/* clearfix */
	overflow: hidden;
	padding-bottom: em(10, 16);
	border: 1px solid $border-medium;
	border-top: 0;
	@include border-radius(0 0 4px 4px);
	font-size: em(16);
	color: $nav-color;
	@include box-shadow(0 1px 3px rgba($shadow-color, 0.1));
	@include mediaquery(tablet) {
		font-size: em(14);
	}

	@include mediaquery(mobile) {
		display: none;
	}

	ul, li {
		margin: 0;
		padding: 0;
		display: inline;
	}
	a, li > strong, li > span {
		float: left;
		margin: 0 em(-10, 16) em(-10, 16) em(10, 16);
		padding: em(12, 16) em(10, 16);
		color: inherit;
		@include box-shadow(inset -1px 0 rgba($main-background, 0.5));
		&.trail, &.active {
			font-weight: 600;
			color: $nav-active-color;
			background: lighten($nav-background-color, 2%);
		}
	}
}

.main-navigation-mobile {
	/* Hide mobile navigation <select> by default */
	display: none;
	@include mediaquery(mobile) {
		display: block;
		width: col(14, 16);
		margin: em(12, 15) 0 em(12, 15) col(1, 16);
	}
}

.main-navigation-search {
	position: absolute;
	top: 0;
	right: 0;
	height: 100%;
	overflow: hidden;
	border-left: 1px solid $border-medium;
	background: $nav-background-color;
	@include background(linear-gradient(lighten($nav-background-color, 2%), darken($nav-background-color, 2%)));
	@include box-shadow(inset 1px 0 rgba($main-background, 0.5), inset 0 0 0 1px rgba($main-background, 0.5));
	@include mediaquery(tablet) {
		position: relative;
		height: em(49);
		border-bottom: 1px solid $border-medium;
		border-left: 0;
	}

	input {
		float: right;
		width: em(164, 16);
		margin: em(9, 16) em(64, 16) 0 em(-165, 16);
		padding-top: em(4, 16);
		padding-bottom: em(3, 16);
		border: 1px solid $border-medium;
		font-size: em(16);
		@include box-shadow(none);
		@include transition(margin-left 0.2s ease-out);
	}
	&:hover input, input:hover, input:focus {
		margin-left: em(22, 16);
	}
	button {
		position: absolute;
		top: 0;
		right: 0;
		width: em(64);
		height: 100%;
		margin: 0;
		padding: em(14) 0;
		border: 0;
		color: $nav-color;
		text-align: left;
		text-indent: -99em;
		@include text-shadow(none);
		line-height: 0;
		background: none;
		@include box-shadow(none);
		&:after {
			@include icon("\e0cb", em(20));
			display: block;
			text-align: center;
		}
		&:hover, &:focus {
			color: $nav-hover-color;
		}
	}
}

.content-wrapper {
	@include clearfix;
}

/* ===========================================
 * Content styles
 * ======================================== */

.main-content {
	float: left;
	width: col(16, 28);
	margin: em(12) 0 0 col(1, 28);
	@include mediaquery(tablet) {
		float: none;
		width: auto;
		margin-right: col(1, 18);
		margin-left: col(1, 18);
	}

	.opensauce-fullwidth & {
		float: none;
		width: auto;
		margin-left: col(1, 28);
		margin-right: col(1, 28);
		@include mediaquery(tablet) {
			margin-right: col(1, 18);
			margin-left: col(1, 18);
		}
	}
	.opensauce-sidebar-left & {
		float: right;
		margin-right: col(1, 28);
		margin-left: 0;
		@include mediaquery(tablet) {
			float: none;
			margin-right: col(1, 18);
			margin-left: col(1, 18);
		}
	}
	p, ul, ol, table, form, fieldset {
		margin-top: em(24);
		margin-bottom: em(24);
	}
	h1, h2, h3, h4, h5, h6 {
		margin-top: 0.75em;
		margin-bottom: 0.3em;
		font-weight: normal;
		line-height: 1.3;
	}
	h1 {
		font-size: $headline-size-1;
		font-weight: bold;
		color: $headline-color;
	}
	h2 {
		font-size: $headline-size-2;
	}
	h1 + h2 {
		margin-top: 0.3em;
	}
	h3 {
		font-size: $headline-size-3;
	}
	h4 {
		font-size: $headline-size-4;
	}
	h5 {
		font-size: $headline-size-5;
	}
	h6 {
		font-size: $headline-size-6;
		letter-spacing: em(1, 16);
		color: $font-color-light;
		text-transform: uppercase;
	}
	ul, ol {
		padding-left: em(16);
		li[data-icon] {
			list-style: none;
			&:before {
				left: em(-21);
				width: 0;
			}
		}
	}
	ul {
		list-style: disc;
		ul {
			margin-top: 0;
		}
	}
	ol {
		padding-left: em(20);
		list-style: decimal;
		ol, ul {
			margin-top: 0;
		}
		ol {
			padding-left: em(24);
			list-style: upper-alpha;
			ol {
				list-style: lower-roman;
				ol {
					list-style: lower-alpha;
				}
			}
		}
	}
	blockquote {
		position: relative;
		margin: em(24) 0 em(24) col(1.5, 16);
		color: $headline-color;
		@include mediaquery(mobile) {
			margin-left: col(2.5, 16);
		}

		small, i, em {
			color: $font-color-light;
		}
		&:before {
			content: "\201c";
			position: absolute;
			top: 0;
			left: col(-1.5, 16);
			margin: em(36, 84) 0 0 em(-4, 84);
			font-size: em(84);
			font-weight: bold;
			line-height: 0;
			color: $highlight-color;
			@include mediaquery(mobile) {
				left: col(-2.5, 16);
				margin-left: em(-8, 84);
			}
		}
	}
	img {
		max-width: 100%;
		height: auto;
	}
	.rsts-main {
		margin: 24px 0;
	}
}

/* ===========================================
 * Sidebar styles
 * ======================================== */

.sidebar {
	position: relative;
	float: right;
	width: col(9, 28);
	margin: em(40) col(1, 28) 0 0;
	@include mediaquery(tablet) {
		float: none;
		clear: both;
		width: auto;
		margin-right: 0;
		margin-left: 0;
	}

	@include mediaquery(mobile) {
		margin-right: col(1, 18);
		margin-left: col(1, 18);
	}

	.opensauce-sidebar-left & {
		float: left;
		margin-right: 0;
		margin-left: col(1, 28);
		@include mediaquery(tablet) {
			float: none;
			margin-right: 0;
			margin-left: 0;
		}

		@include mediaquery(mobile) {
			margin-right: col(1, 18);
			margin-left: col(1, 18);
		}
	}
	h1, h2, h3 {
		margin: em(28, 14) 0 0;
		padding: 0 0 em(6, 14);
		border-bottom: 1px solid $border-light;
		font-size: em(14);
		font-weight: 600;
		letter-spacing: em(1, 14);
		color: $font-color-light;
		text-transform: uppercase;
	}
	p, ul, ol, table, blockquote, fieldset, form {
		margin: em(16) 0;
	}
	ul, ol {
		padding: 0;
		list-style-type: none;
	}
	> .block {
		margin: em(20) 0;
		@include mediaquery(tablet) {
			float: left;
			width: col(7.5, 18);
			margin-left: col(1, 18);
		}

		@include mediaquery(mobile) {
			float: none;
			width: auto;
			margin-left: 0;
		}
	}
	.ce_youtube-wrapper, .ce_vimeo-wrapper {
		margin: em(12) 0;
	}
}

.sidebar-news {
	.layout_latest {
		position: relative;
		margin: em(24) 0;
		padding-left: em(50);
		&:before {
			@include icon("\e06b", em(16));
			position: absolute;
			top: em(5, 16);
			left: 0;
			padding: em(8, 16);
			color: $main-background;
			background: $link-color;
		}
	}
	.image_container {
		display: none;
	}
	.info {
		margin: 0;
		font-size: em(14);
		color: $font-color-light;
	}
	h2 {
		margin: 0 0 em(4, 16);
		padding: 0;
		border: 0;
		font-size: em(16);
		@include line-height(21, 16);
		letter-spacing: normal;
		text-transform: none;
	}
	.ce_text,
	.teaser {
		font-size: em(14);
		p {
			margin: 0;
		}
	}
	.more {
		margin: em(4, 14) 0;
		font-size: em(14);
	}
}

/* ===========================================
 * Form styles
 * ======================================== */

form {
	h1, h2, h3, h4, h5, h6 {
		clear: both;
	}
	.widget {
		position: relative;
		clear: both;
	}
	p b.error, p.error {
		display: block;
		margin: 0;
		color: $warning;
	}
}

input, textarea {
	padding: em(9) em(10) em(8);
	line-height: normal;
	border: 1px solid $border-medium;
	border-bottom-color: darken($border-medium, 4%);
	@include border-radius(1.5px);
	color: inherit;
	background: shade($main-background, 1%);
	@include box-shadow(0 0 6px rgba($shadow-color, 0.1), inset 0 1px $main-background);
	.valid & {
		border-color: $green;
	}
	.invalid &, &.error {
		border-color: $warning;
	}
	&::-webkit-input-placeholder {
		/* multiple rules, because user agents are required to ignore a rule with an unknown selector */
		color: $grey;
	}
	&:-moz-placeholder {
		color: $grey;
	}
	&:-ms-input-placeholder {
		color: $grey;
	}
	&::placeholder {
		color: $grey;
	}
	&:hover {
		border-color: darken($border-medium, 4%) darken($border-medium, 4%) darken($border-medium, 9%);
		@include box-shadow(0 0 6px rgba($shadow-color, 0.05), inset 0 1px $main-background);
	}
	&:focus {
		border-color: $highlight-color $highlight-color darken($highlight-color, 4%);
	}
}

input {
	&[type="text"], &[type="search"], &[type="email"] {
		outline: none;
	}
	&[type="checkbox"], &[type="radio"], &[type="image"] {
		width: auto !important;
		height: auto !important;
		margin: 0;
		padding: 0;
		border: 0;
		@include box-shadow(none);
	}
	&[type="checkbox"] {
		vertical-align: middle;
		@include appearance(checkbox);
	}
	&[type="radio"] {
		vertical-align: middle;
		@include appearance(radio);
		background: none;
	}
}

input[type="file"] {
	padding: 0;
	height: auto;
}

button, input[type="submit"] {
	margin-top: em(18);
}

textarea {
	height: 200px;
	resize: vertical;
	line-height: 1.5;
	outline: none;
}

fieldset {
	margin: em(18) 0;
	border: 1px solid $border-medium;
	legend {
		padding: 0 em(5);
	}
	+ br {
		/* Kill <br> that Contao injects */
		display: none;
	}
}

.main-content {
	form {
		.widget {
			margin-top: em(18);
			margin-bottom: em(18);
		}
	}
	label {
		display: block;
		margin-bottom: em(1, 16);
		font-size: em(16);
		.mandatory {
			margin-left: em(2);
			color: $highlight-color;
		}
	}
	input[type="checkbox"] + label {
		display: inline;
	}
	fieldset {
		p {
			margin: 0;
		}
		p b.error, p.error {
			float: none;
			width: auto;
			margin: em(8, 16) 0;
		}
		label {
			display: inline;
			margin: 0;
			&:after {
				/* add line break after label */
				content: "\A";
				white-space: pre;
			}
		}
	}
	input, textarea, select, fieldset {
		width: col(12, 16);
		@include mediaquery(mobile) {
			width: 100%;
		}
	}
	input[type="submit"] {
		width: auto;
		@include mediaquery(mobile) {
			width: 100%;
		}
	}
}

.explanation, .captcha_text {
	p {
		margin: 0;
	}
}

.explanation {
	font-size: em(14);
	margin: em(-12, 14) 0 em(24, 14);
	color: $font-color-light;
}

.captcha_text {
	display: block;
	label & {
		display: inline;
	}
}

.sidebar form {
	input, textarea, select, fieldset, button {
		width: 100%;
	}
	label {
		display: block;
		margin-bottom: em(1, 16);
		font-size: em(16);
	}
	input {
		&[type="checkbox"], &[type="radio"], &[type="image"] {
			width: auto;
		}
	}
}

/* ===========================================
 * Content elements
 * ======================================== */

%block-headline {
	margin: 0 0 em(16, 18);
	padding-bottom: em(6, 18);
	border-bottom: 1px solid $border-light;
	font-size: em(18);
	font-weight: normal;
	letter-spacing: em(1, 18);
	color: $block-headline-color;
	text-transform: uppercase;
}

.teaser-boxes {
	margin: em(40) 0;
	/* clearfix */
	overflow: hidden;
	> h1, > h2, > h3 {
		@extend %block-headline;
	}
}

.teaser-boxes-item {
	font-size: em(16);
	color: $font-color-light;
	&:hover, &:focus {
		text-decoration: none;
	}
	h3 {
		margin: 0;
		font-size: em(21, 16);
		color: $highlight-headline-color;
	}
	p {
		margin: em(8, 16) 0 0;
	}
}

.teaser-boxes-item-image {
	position: relative;
	margin: 0 0 em(16, 16);
	a:hover &, a:focus & {
		&:before {
			content: "";
			position: absolute;
			top: 0;
			left: 0;
			z-index: 1;
			width: 100%;
			height: 100%;
			background: rgba($main-background, 0.3);
		}
		&:after {
			@include icon("\e019", em(8, 16));
			position: absolute;
			right: 0;
			bottom: 0;
			z-index: 2;
			padding: em(6, 8);
			color: $main-background;
			text-align: center;
			background: $link-color;
		}
	}
	img {
		display: block;
		width: 100%;
		height: auto;
	}
}

.icon-boxes {
	@extend .teaser-boxes;
}

.icon-boxes-item {
	font-size: em(16);
	color: $font-color-light;
	&:hover, &:focus {
		text-decoration: none;
	}
	&[data-icon]:before {
		margin: 0 0 em(12, 24) 0;
		padding: em(12, 24);
		border: 1px solid $border-medium;
		font-size: em(24, 16);
		color: $highlight-color;
		@include background(linear-gradient(rgba($shadow-color, 0), rgba($shadow-color, 0.02)));
		@include box-shadow(0 0 5px rgba($shadow-color, 0.1));
		@if lightness($page-background) < lightness(#474747) {
			@include background(linear-gradient(rgba($shadow-color, 0.6), rgba($shadow-color, 0.8)));
			@include box-shadow(none);
		}
	}
	h3 {
		margin: 0;
		font-size: em(21, 16);
		color: $highlight-headline-color;
	}
	p {
		margin: em(8, 16) 0 0;
	}
}

.icon-boxes-item-link {
	font-size: em(14, 16);
	letter-spacing: em(1, 14);
	color: $link-color;
	text-transform: uppercase;
	a:hover &, a:focus & {
		text-decoration: underline;
	}
}

.news-boxes {
	@extend .teaser-boxes;
}

.news-boxes-item {
	font-size: em(14);
	color: $font-color-light;
	h3 {
		margin: 0;
		font-size: em(24, 14);
		@include line-height(32, 24);
		font-weight: normal;
		a {
			color: $highlight-headline-color;
		}
	}
	p {
		margin: em(4, 14) 0 0;
	}
	.news-boxes-item-info {
		margin: 0;
		letter-spacing: em(1, 14);
		text-transform: uppercase;
	}
	.news-boxes-item-more {
		margin-top: em(8, 14);
		letter-spacing: em(1, 14);
		text-transform: uppercase;
	}
}

.testimonial {
	margin: em(27, 24) 0;
	font-size: em(24);
	@include mediaquery(mobile) {
		font-size: em(15, 15);
	}

	.sidebar & {
		font-size: em(18);
		@include mediaquery(mobile) {
			font-size: em(15, 15);
		}
	}
	.rsts-main & {
		margin: 0;
	}
	p {
		margin: em(12, 24) 0;
		color: $headline-color;
	}
}

.testimonial-author {
	padding-right: em(50, 18);
	font-size: em(18, 24);
	color: $font-color-light;
	.sidebar & {
		padding-right: em(50, 14);
		font-size: em(14, 18);
	}
	@include mediaquery(mobile) {
		padding-right: em(50, 14);
		font-size: em(14, 15);
	}

	img {
		display: inline-block;
		vertical-align: middle;
		width: auto;
		height: em(40, 18);
		margin: 0 em(6, 18) 0 0;
	}
	small {
		font-size: inherit;
	}
}

.newsletter-box {
	padding: em(24) col(1, 16);
	border: 1px solid darken($highlight-color, 10%);
	@include border-radius(1.5px);
	color: $main-background;
	background: $highlight-color;
	@include box-shadow(0 0 5px rgba($shadow-color, 0.1));
	.sidebar & {
		padding-right: col(1, 9);
		padding-left: col(1, 9);
		@include mediaquery(tablet) {
			padding-right: col(1, 18);
			padding-left: col(1, 18);
		}

		@include mediaquery(mobile) {
			padding-right: col(1, 16);
			padding-left: col(1, 16);
		}
	}
	.sidebar .block + & {
		margin-top: em(32);
	}
	&:before {
		content: "";
		float: right;
		width: em(96);
		height: em(100);
		margin-left: em(14);
		background: image-url("newsletter-bg.png") 50% 50% no-repeat;
		background-size: 100% 100%;
		@include hidpi {
			background-image: image-url("newsletter-bg-x2.png");
		}
	}
	h1, h2, h3, h4 {
		padding: 0;
		border: 0;
		letter-spacing: normal;
		text-transform: none;
	}
	h1, h2, h3 {
		margin: em(-4, 24) 0 0;
		font-size: em(24);
		font-weight: normal;
		@include line-height(27, 24);
		color: inherit;
	}
	h4 {
		margin: 0;
		font-size: em(18);
		font-weight: normal;
		color: mix($main-background, $highlight-color, 70%);
	}
	form {
		margin: 0;
	}
	.formbody {
		position: relative;
		width: em(330);
		max-width: 100%;
		margin: em(12) 0 0;
		.widget {
			clear: none;
			margin: 0;
		}
		input {
			display: block;
			width: 100%;
			padding-right: em(48);
			border-color: darken($button-background-color, 10%);
			color: $font-color;
		}
		button {
			position: absolute;
			right: 0;
			bottom: 0;
			width: auto;
			overflow: hidden;
			margin: 0;
			padding: em(13);
			@include border-radius(0 1.5px 1.5px 0);
			line-height: 0;
			text-align: left;
			text-indent: -99em;
			&:after {
				@include icon("\e0ce", em(14));
				display: block;
			}
		}
		.error {
			@if lightness($highlight-color) < 40% {
				color: lighten($warning, 20%);
			}
			@else {
				color: darken($warning, 20%);
			}
		}
	}
}

.icon-links {
	font-size: em(16);
	h1, h2, h3 {
		font-size: em(14, 16);
		font-weight: 600;
		letter-spacing: em(1, 14);
		color: $font-color-light;
		text-transform: uppercase;
	}
	ul {
		margin: 0;
		padding: 0;
	}
	li {
		list-style: none;
		display: inline;
	}
	a {
		display: block;
		padding: em(4, 16) 0;
		border-bottom: 1px solid $border-medium;
		color: inherit;
		text-decoration: none;
		&:before {
			@include icon("\e019", em(6, 16));
			top: em(-2, 6);
			margin-right: em(10, 6);
			padding: em(4, 6);
			border: 1px solid $border-medium;
			@include border-radius(1.5px);
			color: $link-color;
		}
		&[data-icon]:before {
			content: attr(data-icon);
			top: 0;
			border: 0;
			margin-right: em(10, 15);
			padding: 0;
			font-size: em(15, 16);
			color: inherit;
		}
	}
}

.icon-links-label {
	color: $font-color;
	a:hover &, a:focus & {
		text-decoration: underline;
	}
}

.author-box {
	h1, h2, h3 {
		margin: em(28, 14) 0 em(14, 14);
		padding: 0 0 em(6, 14);
		border-bottom: 1px solid $border-light;
		font-size: em(14);
		font-weight: 600;
		letter-spacing: em(1, 14);
		color: $font-color-light;
		text-transform: uppercase;
	}
	img {
		float: right;
		margin: 0 0 em(10) em(18);
	}
	p {
		margin: em(14, 16) 0;
		font-size: em(16);
	}
}

.author-box-links {
	margin: em(14, 14) 0;
	padding: 0;
	font-size: em(14);
	letter-spacing: em(1, 14);
	text-align: center;
	text-transform: uppercase;
	li {
		display: inline;
		list-style: none;
	}
	a {
		display: inline-block;
		margin: em(5, 14) em(3, 14) em(4, 14);
		padding: em(8, 14) em(20, 14);
		border: 1px solid $border-medium;
		@include border-radius(3px);
		@include background-image(linear-gradient(rgba($shadow-color, 0), rgba($shadow-color, 0.02)));
		@include box-shadow(0 0 5px rgba($shadow-color, 0.1));
		&:hover, &:focus {
			border-color: darken($border-medium, 9%);
			text-decoration: none;
			@include box-shadow(0 0 5px rgba($shadow-color, 0.2));
		}
	}
}

.image_container {
	position: relative;
	display: inline-block;
	max-width: 100%;
	padding: em(10);
	border: 1px solid $border-medium;
	@include border-radius(1.5px);
	background: $main-background;
	@include background-image(linear-gradient(rgba($shadow-color, 0), rgba($shadow-color, 0.02)));
	@include box-shadow(0 0 5px rgba($shadow-color, 0.1));
	&.no-border, .no-border & {
		border: 0;
		@include box-shadow(none);
		background: none;
	}
	img {
		display: block;
		width: 100%;
		height: auto;
	}
	a {
		position: relative;
		display: block;
		&:hover, &:focus {
			&:before {
				content: "";
				position: absolute;
				top: 0;
				left: 0;
				z-index: 1;
				width: 100%;
				height: 100%;
				background: rgba($main-background, 0.3);
			}
			&:after {
				@include icon("\e0cb", em(10));
				position: absolute;
				right: 0;
				bottom: 0;
				z-index: 2;
				padding: em(5, 10);
				color: $main-background;
				text-align: center;
				background: $link-color;
			}
		}
	}
	figcaption, .caption {
		/* overwrite elements style attribute */
		width: 100% !important;
		padding: em(4, 14) 0 0;
		font-size: em(14);
		color: $font-color-light;
	}
}

.image_container.float_right, .image_container.float_left {
	float: right;
	@if $fluid-content-images {
		width: col($content-image-cols, 16) !important;
	}
	margin: em(8) 0 em(16) col(1, 16);
	@include mediaquery(mobile) {
		margin-left: 0;
		float: none !important;
		@if $fluid-content-images {
			width: auto !important;
		}
	}

	.opensauce-fullwidth & {
		margin: em(8) 0 em(16) col(1, 26);
		@if $fluid-content-images {
			width: col($content-image-cols, 26) !important;
		}
		@include mediaquery(tablet) {
			margin-left: col(1, 16);
			@if $fluid-content-images {
				width: col($content-image-cols, 16) !important;
			}
		}

		@include mediaquery(mobile) {
			margin-left: 0;
			@if $fluid-content-images {
				width: auto !important;
			}
		}
	}
	.no-resize &, &.no-resize {
		&, .opensauce-fullwidth & {
			@if $fluid-content-images {
				width: auto !important;
			}
		}
	}
}

.image_container.float_left {
	float: left;
	margin: em(8) col(1, 16) em(16) 0;
	@include mediaquery(mobile) {
		margin-right: 0;
	}

	.opensauce-fullwidth & {
		margin: em(8) col(1, 26) em(16) 0;
		@include mediaquery(tablet) {
			margin-right: col(1, 16);
		}

		@include mediaquery(mobile) {
			margin-right: 0;
		}
	}
}

.image_container:not(.float_right):not(.float_left) {
	.no-resize &, &.no-resize {
		img {
			width: auto;
			max-width: 100%;
		}
	}
}

.ce_youtube-wrapper, .ce_vimeo-wrapper {
	position: relative;
	/* ratio 16 to 9 */
	margin: em(24) 0;
	padding-bottom: 56.25%;
	height: 0;
	overflow: hidden;
	iframe, object, embed {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
}

.mejs__video, .mejs__audio {
	&:not(.mejs__container-fullscreen) {
		margin: em(20) 0;
		video {
			object-fit: cover;
		}
	}
	button {
		@include appearance(button);
		border-radius: 0;
		box-shadow: none !important;
	}
}

.video_container video,
.audio_container audio {
	display: block;
	width: 100%;
}

.video_container video {
	height: auto;
}

.video_container {
	margin: em(20) 0;
	iframe {
		border: 0;
	}
	.responsive {
		position: relative;
		padding-bottom: 9 / 16 * 100%;
		&.ratio-169 {
			padding-bottom: 9 / 16 * 100%;
		}
		&.ratio-1610 {
			padding-bottom: 10 / 16 * 100%;
		}
		&.ratio-219 {
			padding-bottom: 9 / 21 * 100%;
		}
		&.ratio-43 {
			padding-bottom: 3 / 4 * 100%;
		}
		&.ratio-32 {
			padding-bottom: 2 / 3 * 100%;
		}
		iframe,
		img {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			object-fit: cover;
		}
	}
}

.ce_gallery {
	@for $cols from 1 through 12 {
		> ul.cols_#{$cols} > li {
			width: (100% - ($cols - 1) * 1.5%) / $cols;
		}
	}
	@include mediaquery(mobile) {
		/* doubled class for specificity */
		&.ce_gallery > ul > li {
			width: auto;
		}
	}

	&.no-resize > ul > li {
		width: auto;
	}
	> ul {
		@include clearfix;
		margin: 0 !important;
		padding: 0 !important;
		list-style: none !important;
		> li {
			float: left;
			width: 23.875%;
			margin: 1.5% 0 0 1.5%;
			@include mediaquery(mobile) {
				margin-right: 0;
				margin-left: 0;
			}

			&.col_first {
				clear: left;
				margin-left: 0;
			}
			&.col_last {
				/* for rounding failures */
				margin-right: -1%;
			}
			> .image_container {
				width: 100%;
			}
		}
	}
	img {
		width: 100%;
		height: auto;
	}
}

.enclosure, .ce_downloads {
	margin: em(27, 16) 0;
	padding: em(20, 16) em(30, 16);
	border: 1px solid $border-medium;
	@include border-radius(1.5px);
	font-size: em(16);
	background: $main-background;
	@include background-image(linear-gradient(rgba($shadow-color, 0), rgba($shadow-color, 0.02)));
	@include box-shadow(0 0 5px rgba($shadow-color, 0.1));
	h1, h2, h3, h4, h5, h6 {
		margin: em(-21, 12) em(-31, 12) em(20, 12);
		padding: em(8, 12) em(20, 12);
		font-size: em(12, 16);
		font-weight: 600;
		letter-spacing: em(1, 12);
		color: $main-background;
		text-transform: uppercase;
		background: $headline-color;
		&:before {
			@include icon("\e06d", em(14, 12));
			top: em(1, 14);
			float: right;
		}
	}
	ul, p {
		margin: 0;
		padding: 0;
		list-style: none;
	}
}

.ce_accordion {
	.accordion {
		@include clearfix;
	}
	.toggler {
		padding: em(6, 18) 0;
		border-bottom: 1px solid $border-medium;
		outline: none;
		font-size: em(18);
		color: $link-color;
		cursor: pointer;
		&:before {
			@include icon("\e009", em(14, 18));
			top: em(6, 14);
			float: right;
			color: $main-background;
			background: $link-color;
		}
		&:hover {
			text-decoration: underline;
			&:before {
				font-size: em(18, 18);
				top: em(4, 18);
				left: em(2, 18);
			}
		}
		&.ui-accordion-header-active {
			&:before {
				content: "\e00c";
			}
		}
	}
}

/* ===========================================
 * Slider styles
 * ======================================== */

.rsts-skin-testimonials {
	&.rsts-main {
		position: relative;
		margin: em(27) 0;
	}
	.rsts-header {
		border-bottom: 1px solid $border-light;
		h1, h2, h3, h4, h5, h6 {
			margin: 0;
			padding: em(2, 14) 0 em(9, 14);
			font-size: em(14);
			font-weight: 600;
			color: $font-color-light;
			letter-spacing: em(1, 14);
			text-transform: uppercase;
		}
	}
	.rsts-prev, .rsts-next {
		position: absolute;
		right: em(24);
		bottom: em(12);
		overflow: hidden;
		text-indent: -99em;
		line-height: 0;
		.sidebar & {
			bottom: em(6);
		}
		&:after {
			@include icon("\e018", em(8));
			display: block;
			padding: em(6, 8);
			color: $main-background;
			background: $link-color;
		}
	}
	.rsts-next {
		right: 0;
		&:after {
			content: "\e019";
		}
	}
	.rsts-nav {
		position: absolute;
		right: -5px;
		top: 2px;
		line-height: 0;
		ul {
			margin: 0;
			padding: 0;
		}
		li {
			display: inline;
		}
		a {
			float: left;
			width: 17px;
			height: 17px;
			overflow: hidden;
			outline: none;
			padding: 5px;
			text-indent: -99em;
			&:after {
				content: "";
				display: block;
				width: 7px;
				height: 7px;
				@include border-radius(100%);
				background: $border-medium;
				@include opacity(0.8);
			}
			&:hover, &.active {
				&:after {
					@include opacity(1);
					width: 11px;
					height: 11px;
					margin: -2px;
				}
			}
		}
	}
	.rsts-nav-prev, .rsts-nav-next {
		display: none !important;
	}
}

.rsts-skin-light {
	.rsts-nav {
		position: absolute;
		bottom: 20px;
		margin: 0;
		width: 100%;
	}
}

/* ===========================================
 * Module styles (Search, FAQ, News, Events, Comments, Sitemap etc.)
 * ======================================== */

.fixed-note {
	position: fixed;
	display: table;
	top: auto;
	right: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	min-height: em(60);
	padding: em(12) em(20) em(12) em(80);
	padding-right: calc(#{em(20)} + var(--safe-area-right));
	padding-bottom: calc(#{em(12)} + var(--safe-area-bottom));
	padding-left: calc(#{em(80)} + var(--safe-area-left));
	border-top: 1px solid $border-medium;
	z-index: 99;
	background-color: $main-background;
	box-shadow: 0 -2px 5px rgba($shadow-color, 0.1);
	@include mediaquery(tablet) {
		position: relative;
		padding-top: calc(#{em(12)} + var(--safe-area-top));
		padding-bottom: em(12);
	}

	@include mediaquery(mobile) {
		display: block;
		padding-left: em(20);
		padding-left: calc(#{em(20)} + var(--safe-area-left));
	}

	&:before {
		position: absolute;
		top: 50%;
		margin-top: em(-18, 36);
		left: em(30, 36);
		left: calc(#{em(30, 36)} + var(--safe-area-left));
		font-size: em(36);
		color: $highlight-color;
		@include mediaquery(tablet) {
			top: em(24, 36);
			margin-top: 0;
		}

		@include mediaquery(mobile) {
			position: static;
		}
	}
	h1, h2, h3, {
		font-size: em(15);
		margin: em(6, 15) 0;
	}
	p {
		font-size: em(14);
		margin: em(6, 14) 0;
		@include mediaquery(mobile) {
			font-size: em(16);
		}
	}
}

.fixed-note-column {
	display: table-cell;
	vertical-align: middle;
	padding: 0 em(10);
	&:last-child {
		text-align: right;
		@include mediaquery(tablet) {
			text-align: left;
		}
	}
	@include mediaquery(tablet) {
		display: block;
		margin: em(12) 0;
		padding: 0;
	}
}

.fixed-note-link, .fixed-note-button {
	white-space: nowrap;
}

.fixed-note-button {
	margin: 0;
}

.fixed-note-closed {
	position: fixed;
	right: em(30);
	right: calc(#{em(30)} + var(--safe-area-right));
	bottom: 0;
	bottom: var(-(-safe-area-bottom));
	z-index: 99;
	padding: em(8) em(12);
	color: $button-color;
	text-decoration: none;
	background: $button-background-color;
	box-shadow: 0 -2px 5px rgba($shadow-color, 0.1);
	@include mediaquery(desktop) {
		right: 0;
		right: var(-(-safe-area-right));
	}

	@include mediaquery(tablet) {
		position: absolute;
		top: em(12);
		top: calc(#{em(12)} + var(--safe-area-top));
		right: 50%;
		bottom: auto;
		margin-right: em(-16);
		padding: em(4) em(12);
	}

	@include mediaquery(mobile) {
		right: em(12);
		right: calc(#{em(12)} + var(--safe-area-right));
		margin-right: 0;
	}

	&:hover, &:focus {
		background-color: darken($button-background-color, 10%);
	}
	&:before {
		@include icon("\e0a6");
	}
	> span {
		display: none;
	}
}

.back a:before, .previous a:before, .next a:after {
	@include icon("\e018", em(12));
	top: em(-2, 12);
	margin-right: em(6, 12);
	vertical-align: middle;
}

.next a:after {
	content: "\e019";
	margin-right: 0;
	margin-left: em(6, 12);
}

.pagination {
	clear: both;
	> p {
		text-align: center;
	}
	ul {
		list-style-type: none !important;
		text-align: center;
	}
	li {
		display: inline-block;
		a, strong, span {
			padding: 4px 12px;
			background-color: $main-background;
		}
		.current, .active {
			border-bottom: 1px solid $border-light;
			@include background-image(linear-gradient(rgba($shadow-color, 0), rgba($shadow-color, 0.02)));
		}
	}
}

.news-image-teaser {
	position: relative;
	margin: em(36) 0;
	padding: 0 0 0 col(2, 16);
	@include mediaquery(mobile) {
		padding-left: 0;
	}

	&.-no-date {
		padding-left: 0;
	}
	h2 {
		margin: 0 0 em(8, 32);
		padding: 0 0 em(10, 32);
		border-bottom: 1px solid $border-medium;
		font-size: em(32);
		font-weight: normal;
		@include line-height(38, 32);
		color: $headline-color;
		@include mediaquery(mobile) {
			margin-right: col(3, 16);
		}
	}
	time {
		position: absolute;
		top: em(7, 36);
		left: 0;
		width: col(1.5, 16);
		border: 1px solid $border-medium;
		font-size: em(36);
		font-weight: 600;
		line-height: 1;
		color: $font-color-light;
		text-align: center;
		background: $main-background;
		@include background-image(linear-gradient(rgba($shadow-color, 0) 50%, rgba($shadow-color, 0.02)));
		@include box-shadow(0 0 5px rgba($shadow-color, 0.1));
		@include mediaquery(mobile) {
			left: auto;
			right: 0;
			width: col(2.5, 16);
		}

		&:before {
			@include icon("\e06b", em(25, 36));
			display: block;
			margin: -1px -1px em(2, 25) -1px;
			padding: em(18, 25) 0;
			color: $main-background;
			background: $highlight-color;
		}
		b {
			display: block;
			margin: em(-4, 21) 0 em(5, 21);
			font-size: em(21, 36);
			font-weight: inherit;
			text-transform: uppercase;
		}
		i {
			display: none;
		}
	}
	img {
		display: block;
		width: 100%;
		height: auto;
	}
	p {
		margin: em(12) 0;
		color: $font-color-light;
	}
	.news-image-teaser-info {
		margin: em(8, 14) 0 em(14, 14);
		font-size: em(14);
		color: inherit;
	}
	.news-image-teaser-more {
		font-size: em(16);
		text-transform: uppercase;
	}
}

.mod_calendar {
	th {
		&.previous, &.next {
			a {
				&:after, &:before {
					display: none;
				}
			}
		}
		&.current {
			border-right: 0;
			border-left: 0;
			text-align: center;
			&:before {
				@include icon("\e037", 16px);
				margin-right: 6px;
			}
		}
		&.previous {
			border-right: 0;
		}
		&.next {
			border-left: 0;
			text-align: right;
		}
		&.label {
			font-size: em(12);
			text-align: center;
			text-transform: uppercase;
			letter-spacing: em(1, 14);
		}
	}
	td {
		vertical-align: top;
		width: col(1, 7);
		&.today {
			font-weight: 600;
			background-color: $border-medium;
		}
	}
	.event {
		font-size: em(12);
	}
	.minicalendar {
		td {
			padding: em(3);
			text-align: center;
		}
	}
}

.mod_eventlist {
	.event > h2 {
		margin-top: 0;
		font-size: em(28);
	}
}

.mod_faqlist {
	ul {
		list-style: none;
		padding-left: 0;
	}
	li {
		&:before {
			@include icon("\e0f7");
			margin-right: em(8);
		}
	}
}

.mod_faqreader {
	.info {
		font-size: em(14);
		color: $font-color-light;
	}
}

.mod_newsletterlist {
	ul {
		padding-left: 0;
		list-style-type: none;
		li {
			padding: em(5) 0;
			border-top: 1px solid $border-medium;
			&:first-child, &.first {
				border-top: 0;
			}
		}
	}
}

.mod_search {
	margin: em(27) 0;
	.widget {
		display: inline;
	}
	form {
		input {
			vertical-align: middle;
			&[type="search"] {
				width: col(11.9, 16);
				margin: 0;
				padding-top: em(11);
				padding-bottom: em(9);
			}
		}
		button, input {
			&[type="submit"] {
				width: col(4, 16);
				margin: 0 -2% 0 0;
			}
		}
	}
	.relevance {
		float: right;
		margin-top: em(10, 14);
		font-size: em(14, 24);
	}
	.header {
		padding-bottom: em(5);
		border-bottom: 1px solid $border-medium;
		color: $font-color-light;
	}
	.highlight {
		padding: 0 em(4);
		font-weight: 600;
		background: mix($main-background, $link-color, 80%);
	}
	.url {
		padding-bottom: em(20, 14);
		border-bottom: 1px dotted $border-medium;
		font-size: em(14);
		color: $font-color-light;
		&:before {
			@include icon("\e0b5");
			margin-right: em(5, 14);
		}
		.filesize {
			font-size: em(12, 14);
		}
	}
}

.comment_default {
	margin: em(27, 16) 0;
	padding: em(20, 16) col(1, 16) 0;
	border: 1px solid $border-medium;
	@include border-radius(1.5px);
	font-size: em(16);
	background: $main-background;
	@include background-image(linear-gradient(rgba($shadow-color, 0), rgba($shadow-color, 0.02)));
	@include box-shadow(0 0 5px rgba($shadow-color, 0.1));
	.info {
		margin-top: 0;
		border-bottom: 1px solid $border-medium;
	}
	.reply {
		margin-left: col(1, 15);
		.info {
			font-weight: 600;
		}
	}
}

.ce_comments {
	.form {
		margin-top: em(60);
		.widget {
			margin-top: em(24);
		}
	}
}

.mod_sitemap {
	ul {
		padding-left: 0;
		list-style-type: none;
		li {
			li {
				padding: em(3, 16) 0 em(3, 16) em(28, 16);
				font-size: em(16);
			}
			li.submenu {
				ul {
					margin: 0;
				}
			}
		}
	}
	> ul > li {
		&:before {
			@include icon("\e083");
			margin-right: em(10);
			color: $link-color;
		}
	}
}

/* ===========================================
 * Footer styles
 * ======================================== */

.page-footer {
	clear: both;
	margin: 0 col(1, 28);
	@include mediaquery(tablet) {
		margin-right: col(1, 18);
		margin-left: col(1, 18);
	}
}

.footer-navigation-wrapper {
	/* clearfix */
	overflow: hidden;
	margin: em(40, 12) 0 0;
	padding: em(22, 12) 0;
	border-top: 1px solid $border-medium;
	font-size: em(12);
	font-weight: 600;
	color: $footer-color;
	text-transform: uppercase;
	@include mediaquery(mobile) {
		font-size: em(12, 15);
	}
}

.footer-navigation {
	float: left;
	@include mediaquery(tablet) {
		float: none;
	}

	ul {
		margin: 0;
		padding: 0;
	}
	li {
		display: inline;
		&:after {
			content: " ";
		}
	}
	a, li > strong, li > span {
		margin-right: em(18, 12);
		color: inherit;
	}
}

.footer-info {
	float: right;
	font-weight: normal;
	@include mediaquery(tablet) {
		margin-top: em(12, 12);
		float: none;
	}

	p {
		margin: 0;
	}
	a {
		color: inherit;
	}
	.rocksolid-copyright {
		font-style: normal;
		color: mix($main-background, $font-color-light, 40%);
		&:before {
			content: "\2022";
			display: inline-block;
			margin: 0 em(8, 12);
			color: $font-color-light;
		}
	}
}

// ===========================================
// Grid (design + production helper)
// ========================================

//html .page:before
//	content: ""
//	position: absolute
//	display: block
//	top: 0
//	left: 0
//	width: 100%
//	height: 6000px
//	z-index: 9999
//	pointer-events: none
//	+background-image(linear-gradient(left, rgba(red,1) col(1, 28), rgba(red,0) col(1, 28), rgba(red,0) col(2, 28), rgba(red,1) col(2, 28), rgba(red,1) col(3, 28), rgba(red,0) col(3, 28), rgba(red,0) col(4, 28), rgba(red,1) col(4, 28), rgba(red,1) col(5, 28), rgba(red,0) col(5, 28), rgba(red,0) col(6, 28), rgba(red,1) col(6, 28), rgba(red,1) col(7, 28), rgba(red,0) col(7, 28), rgba(red,0) col(8, 28), rgba(red,1) col(8, 28), rgba(red,1) col(9, 28), rgba(red,0) col(9, 28), rgba(red,0) col(10, 28), rgba(red,1) col(10, 28), rgba(red,1) col(11, 28), rgba(red,0) col(11, 28), rgba(red,0) col(12, 28), rgba(red,1) col(12, 28), rgba(red,1) col(13, 28), rgba(red,0) col(13, 28), rgba(red,0) col(14, 28), rgba(red,1) col(14, 28), rgba(red,1) col(15, 28), rgba(red,0) col(15, 28), rgba(red,0) col(16, 28), rgba(red,1) col(16, 28), rgba(red,1) col(17, 28), rgba(red,0) col(17, 28), rgba(red,0) col(18, 28), rgba(red,1) col(18, 28), rgba(red,1) col(19, 28), rgba(red,0) col(19, 28), rgba(red,0) col(20, 28), rgba(red,1) col(20, 28), rgba(red,1) col(21, 28), rgba(red,0) col(21, 28), rgba(red,0) col(22, 28), rgba(red,1) col(22, 28), rgba(red,1) col(23, 28), rgba(red,0) col(23, 28), rgba(red,0) col(24, 28), rgba(red,1) col(24, 28), rgba(red,1) col(25, 28), rgba(red,0) col(25, 28), rgba(red,0) col(26, 28), rgba(red,1) col(26, 28), rgba(red,1) col(27, 28), rgba(red,0) col(27, 28)))
//	opacity: .1
//	+mediaquery(tablet)
//		+background-image(linear-gradient(left, rgba(red,1) col(1, 18), rgba(red,0) col(1, 18), rgba(red,0) col(2, 18), rgba(red,1) col(2, 18), rgba(red,1) col(3, 18), rgba(red,0) col(3, 18), rgba(red,0) col(4, 18), rgba(red,1) col(4, 18), rgba(red,1) col(5, 18), rgba(red,0) col(5, 18), rgba(red,0) col(6, 18), rgba(red,1) col(6, 18), rgba(red,1) col(7, 18), rgba(red,0) col(7, 18), rgba(red,0) col(8, 18), rgba(red,1) col(8, 18), rgba(red,1) col(9, 18), rgba(red,0) col(9, 18), rgba(red,0) col(10, 18), rgba(red,1) col(10, 18), rgba(red,1) col(11, 18), rgba(red,0) col(11, 18), rgba(red,0) col(12, 18), rgba(red,1) col(12, 18), rgba(red,1) col(13, 18), rgba(red,0) col(13, 18), rgba(red,0) col(14, 18), rgba(red,1) col(14, 18), rgba(red,1) col(15, 18), rgba(red,0) col(15, 18), rgba(red,0) col(16, 18), rgba(red,1) col(16, 18), rgba(red,1) col(17, 18), rgba(red,0) col(17, 18)))
//html:hover .page:before
//	visibility: hidden