@import "reset.css";
@import "slick.css";
@import "magnific-popup.css";

@import url('https://fonts.googleapis.com/css?family=Signika+Negative:400,700');

/* @group ICONS */

@font-face {
  font-family: 'Icomoon';
  src:
    url('../fonts/icomoon.ttf?lyw0rx') format('truetype'),
    url('../fonts/icomoon.woff?lyw0rx') format('woff'),
    url('../fonts/icomoon.svg?lyw0rx#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
}

.ico, a[href$=".pdf"]:before {
	font-family: 'Icomoon' !important;
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	
	display: inline-block;
	margin-right: .2rem;
}

.ico-pdf:before, a[href$=".pdf"]:before {
  content: "\e900";
}
.ico-email:before {
  content: "\e901";
}
.ico-phone:before {
  content: "\e902";
}

/* @end */

/* @group TYPO */

html, body {
	font-family: 'Signika Negative', Georgia, Times, serif;
	font-size: 18px;
	line-height: 1.5em;
}

	@media (max-width: 54.99999999rem) {
		
		html, body {
			font-size: 16px;
			line-height: 1.5em;
		}
		
	}

strong, h1, h2, h3, .submenu, .tiles, .year {
	font-weight: 700;
}

h1 {
	font-size: 3rem;
	line-height: 1.25em;
	text-align: center;
}

h1 {
	margin-top: 2rem; margin-bottom: 2rem;
}

	@media (max-width: 54.999999999rem) {
		
		h1 {
			font-size: 2rem;
			line-height: 1.25em;
		}
		
	}

.submenu, .tiles, .content--start {
	font-size: 1.25rem;
	line-height: 1.5em;
}

h2, .year {
	font-size: 1.5rem;
	line-height: 1.25em;
}

h2, h3, p, .content figure:not([class]) {
	margin-bottom: 1rem;
}

h2 {
	margin-top: 3rem;
}

h3 {
	margin-top: 2rem;
}

	hr + h3 {
		margin-top: 1rem;
	}

hr {
	border-bottom: 2px solid #fff;
}

.content {
	text-align: center;
}

.content a:not([class]),
.content a[href$="pdf"]:hover,
.content a.more {
	text-decoration: underline;
}

.content a[href$="pdf"] {
	text-decoration: none;
}

.content li:not([class]) {
	margin-bottom: .5rem;
}

.content li:not([class]):before {
	content: "•";
	display: inline-block;
	width: 1em;
	text-align: center;
}

	.content .slick-dots li:not([class]):before {
		display: none;
	}

.submenu, .tiles {
	margin-top: 1.5rem;
	text-align: center;
}

.submenu {

}

	.submenu__item {
		display: inline-block;
		margin-right: .5rem; margin-left: .5rem;
	}
	
.price {
	float: right;
}

/* @end */

/* @group COLORS */

main {
	color: #fff;
}

body {
	background-color: #000;
}

.menu {
	background-color: #ffc300;
}

.submenu__item,
.content a:hover {
	color: #ffc300;
}

.submenu__item--active, .submenu__item:hover {
	color: #fff;	
}

em {
	color: #999999;
}

.image-border, .image-download img {
	border: 2px solid #fff;
}

.image-border:hover, .image-download img:hover {
	border-color: #ffc300;
}

/* @end */

/* @group LAYOUT */

img {
	vertical-align: bottom;
	max-width: 100%; height: auto;
}

figure.video {
    position: relative; z-index: 1;
    padding-bottom: 56.25%; /* for 16:9 */
    padding-top: 0;
    height: 0; overflow: hidden;
    border: 2px solid #fff;
}
 
	figure.video iframe {
	    position: absolute;
	    top: 0; left: 0;
	    width: 100%; height: 100%;
	}

.menu {
	padding-top: 2.5vw; padding-bottom: 2.5vw;
	text-align: center;
}

	.menu__item {
		
	}

		.menu__item__image {
			-webkit-filter: grayscale(1); filter: grayscale(1);
			width: auto; height: 2.25rem;
			max-width: 100%;
		}
			
		.menu--header .menu__item:first-child .menu__item__image {
			height: 4.5rem;
		}
	
		.menu__item__image:hover, .menu__item__image--active {
			-webkit-filter: grayscale(0); filter: grayscale(0);
		}
		
.cols {
	display: flex;
	flex-wrap: wrap;
	margin-right: -.5rem; margin-left: -.5rem;
	margin-bottom: 1rem;
}

	.cols__item {
		/*display: flex;
		justify-content: center;
		align-items: top;*/
		flex-basis: 50%;
		margin-bottom: 1rem;
		padding-right: .5rem; padding-left: .5rem;
	}
	
	.cols--overview .cols__item:first-child {
		flex-basis: 100%;
	}
	
	.cols__item--three {
		flex-basis: 33.333333333%;
	}
	
	.cols__item--overview {
		margin-bottom: 2rem;
		padding-right: 1rem; padding-left: 1rem;
		align-items: center; /* vertical */
	}
		
		
.main {
	
}

.content {
	max-width: 40rem;
	margin-right: auto; margin-left: auto;
	padding-bottom: 2rem;
}

.content--start {
	max-width: 100%;
	padding-top: 2rem; padding-bottom: 0;
}


@media (max-width: 54.999999999rem) {
	
	.header, .footer {
		
	}
	
	.menu {
		
	}

		.menu__item {
			display: inline-block;
			padding-right: .4rem; padding-left: .4rem;
		}
				
			.menu--header .menu__item:first-child {
				display: block;
			}
			
	.border {
		
	}
	
		.border__image {
			width: 100%; height: 2rem;
		}
			
		.border__image--right, .border__image--left {
			display: none;
		}
		
	.content {
		padding-right: 1rem; padding-left: 1rem;
	}
	
		.slider-nav {
			margin-right: 2rem; margin-left: 2rem;
		}
	
	.cols {
		
	}
	
		.cols__item--overview {
			margin-bottom: 1rem;
		}
		
		.cols__item--overview {
			padding-right: .5rem; padding-left: .5rem;
		}
}

@media (min-width: 55rem) {
	
	.frame {
		position: relative; z-index: 1;
		min-height: 100vh;
	}
	
	.header, .footer {
		position: fixed; z-index: 10;
		top: 0;
		width: 25%;
		display: flex;
	}
	
		.header {
			left: 0;
		}
	
		.footer {
			right: 0;
		}
	
	.menu {
		flex-basis: calc(100% - 4rem);
	}
	
	.menu--header {
		padding-left: 4rem; /* symmetry with border */
	}

	.menu--footer {
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
		padding-right: 4rem; /* symmetry with border */
	}
	
		.menu__item {
			margin-right: -4rem; margin-left: -4rem;
		}
		
		.menu__item__image {
			width: auto; height: 5vw;
		}
	
		.menu--header .menu__item:first-child .menu__item__image {
			height: 10vw;
		}
		
	.border {
		flex-basis: 4rem;
		height: 100vh;
	}
	
		.border__image {
			width: 100%; height: 100vh;
		}
		
		.border__image--top, .border__image--bottom {
			display: none;
		}
	
	.main, .content--start {
		width: 50%;
		margin-left: 25%; margin-right: 25%;
	}
	
	.cover {
		margin-right: -4rem; margin-left: -4rem; /* width of .border */
	}
	
		.cover__image {
			width: 100%; height: auto;
		}
	
	.content {
		padding-right: 2rem; padding-left: 2rem;
	}
	
		.cols--overview {
			margin-right: -1rem; margin-left: -1rem;
		}
	
	.content--start {
		position: absolute;
		left: 0; top: 0;
		padding-top: 4rem;
	}

	
}

/* @end */

/* @group events, rows */

.events {
	
}

.event, .rows__item {
	width: 100%;
	border-top: 2px solid #fff;
}

	.event__col, .rows__item__col {
		padding-top: .75rem; padding-bottom: .75rem;
		padding-right: .25em; padding-left: .25em;
	}
	
	.event__col--1 {
		text-align: left;
	}
	
	.event__col--2 {
		text-align: center;
	}
	
	.event__col--3 {
		text-align: right;
	}
	
	.event__day, .event__month, .event__weekday, .event__city, .event__time, .event__location, .event__show, .event__booking {
		display: inline-block;
	}
	
	.event__day {
		font-size: 1.5rem;
		font-weight: 700;
		line-height: 1em;
	}
	
		.event__day:after {
			content: ".";
		}
	
	.event__month {
		font-size: 1.5rem;
		font-weight: 700;
		text-transform: uppercase;
	}
	
	.event__time {
		
	}
	
	.event__city {
		font-weight: 700;
	}
	
	.event__show {
		font-weight: 700;
	}


@media (max-width: 39.999999999rem) {
	
	.event {
		display: flex;
		flex-wrap: wrap;
	}
	
		.event__col--1 {
			width: 40%;
			padding-bottom: .25rem;
		}
		
		.event__col--3 {
			order: 2;
			width: 60%;
			padding-bottom: .25rem;
		}
		
		.event__col--2 {
			order: 3;
			width: 100%;
			padding-top: 0;
		}
		
		.event__day, .event__month {
			font-size: 1rem;
			line-height: 1.25em;
		}
}

@media (min-width: 40rem) {
	
	.event {
		display: table;
		table-layout: fixed;
		width: 100%;
	}
	
		.event__col {
			display: table-cell;
			vertical-align: top;
		}
		
		.event__col--1 {
			width: 30%;
		}
		
		.event__col--2 {
			width: 40%;
		}
		
		.event__col--3 {
			width: 30%;
		}
		
		.event__weekday:after {
			content: ".";
		}		
		
		.event__time:after {
			content: " Uhr";
		}
	
}

.rows {
	border-bottom: 2px solid #fff;
}

	.rows__item {
			display: table;
			table-layout: fixed;
		}
	
		.rows__item__col {
			display: table-cell;
			vertical-align: top;
		}

		.rows__item__col:first-child {
			width: 25%;
		}
		
			.product-image img {
				height: 4.5rem; width: auto;
				max-width: auto;
			}
		
		.rows__item__col:nth-child(2) {
			width: 75%;
			text-align: left;
		}


/* @end */

/* @group form */

label {
	display: block;
	margin-bottom: .25rem;
	text-align: left;
}

form {
	text-align: center;
}

input[type="text"], input[type="email"], textarea {
	display: inline-block;
	width: 100%;
	margin-bottom: 1rem;
	padding-top: .15em; padding-bottom: .15em;
	padding-right: .5em; padding-left: .5em;
	background-color: #fff;
	color: #000;
	/*text-align: center;*/
}

textarea {
	height: 5.3em;
	line-height: 1.25em;
}

input[type="submit"] {
	cursor: pointer;
	margin-top: 1rem; margin-bottom: 1rem;
	padding-top: .5em; padding-bottom: .5em;
	padding-right: 1em; padding-left: 1em;
	background-color: #ffc300;
	color: #000;
	border-radius: 1.25em;
	font-weight: 700;
}

.error {
	border: 2px solid #f00000;
}

.uniform-errors {
	margin-top: 1rem; margin-bottom: 1rem;
	color: #f00000;
}

/* @end */

/* @group slider */

.slick-arrow {
	cursor: pointer;	
	position: absolute; z-index: 2;
	top: 0; bottom: 1.5rem; /* placeholder for dots */
	color: white;
	font-size: 2rem;
	font-weight: 400;
}

	.slick-arrow:hover,
	.slick-arrow:focus {
		color: #ffc300;
	}

.slick-prev {
	left: 0;
	text-align: left;
}

.slick-next {
	right: 0;
	text-align: right;
}

@media (min-width: 55rem) {
	
	.slick-prev {
		left: -2rem;
	}

.slick-next {
		right: -2rem;
	}
	
}


.slick-dots {
	line-height: .75rem;
}

	.slick-dots li {
		position: relative;
		display: inline-block;
		cursor: pointer;
		margin: none;
	}

		.slick-dots li button {
			cursor: pointer;
			display: inline-block;
			margin-top: .75rem;
			margin-right: .5rem; margin-left: .5rem;
			width: .75rem; height: .75rem;
			border-radius: .75rem;
			text-indent: -999em;
			background-color: #ffc300;
		}

		.slick-dots li button:hover, .slick-dots li.slick-active button {
			background-color: #fff;
		}


.slick-slider {
	text-align: center;
}

	.slick-slider img {
		display: inline-block;
		max-width: 100%; height: auto;
	}
	
	
.slider {
	margin-top: 2rem;
}

	.slider__item {
		
	}
	
		.slider__item__caption {
			margin-top: 1rem;
		}

.slider-nav {
	margin-bottom: 1rem;
}

	.slider-nav__item {
		margin-right: .25em; margin-left: .25em;
		border: 2px solid #000;
	}
	
	.slider-nav__item:hover, .slider-nav .slick-current {
		cursor: pointer;
		border-color: #fff;
	}
	
		.slider-nav__item__image {
			
		}




/* @end */