/* open-sans-regular - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/open-sans-v27-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/open-sans-v27-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/open-sans-v27-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/open-sans-v27-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/open-sans-v27-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/open-sans-v27-latin-regular.svg#OpenSans') format('svg'); /* Legacy iOS */
}

/* open-sans-800 - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 800;
  src: url('../fonts/open-sans-v27-latin-800.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/open-sans-v27-latin-800.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/open-sans-v27-latin-800.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/open-sans-v27-latin-800.woff') format('woff'), /* Modern Browsers */
       url('../fonts/open-sans-v27-latin-800.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/open-sans-v27-latin-800.svg#OpenSans') format('svg'); /* Legacy iOS */
}

body {
	background-color: #000;
	/*background-color: #8C0D2B;*/
	margin: 0;
	font-family: 'Open Sans';
	font-size: 16px;	
}
.main {
	width: 65%;
	min-height: 100%;
	margin: auto;
	/*margin-top: 20px;*/
	/*background-color: #fff;*/
	padding-left: 55px;
	background-image: url('../img/point.jpg');
	background-position: 0 0;
	background-repeat: repeat-y;
}

.main .wrapper {
	/*margin-top: -20px;*/
	background-color: blue;
}

.navigation {
	width: 65%;
	margin: auto;
}

.navigation .navi > div {
	width: 100%;
}

.navigation .navi {	
	background-color: #8C0D2B;
	height: 30px;	
}

.navigation .navi a {
	color: orange;
	font-size: 1rem;
	/*margin: 5px;*/
	padding: 3px;
	display: inline-block;
	text-decoration: none;
	border: 1px solid #8C0D2B;
	/*height: 30px;*/
}

.navigation .navi a.active {
	border: 1px solid orange;
	background-color: orange;
	color: #000;
}

.navigation .navi a:hover {
	text-decoration: underline;	
	border: 1px solid orange;
	background-color: orange;
	color: #000;
}

.paginationBox,
.paginationBoxBottom {
	background-color: #8C0D2B;
	height: 30px;
}

.paginationBoxBottom {
	padding-top: 10px;
}

.pagination {
	display: inline-block;
	width: 90%;
	height: 30px;
	padding: 0;
	margin: 0;
	text-align: center;
}

.pagination li {
	display: inline-block;
	background-color: #8C0D2B;
}

.menu.pagination li {
	display: block;
}

.paginationBoxBottom .menu.pagination {
	height: auto;
}

.pagination li a {
	color: orange;
	font-size: 1rem;
	/*margin: 5px;*/
	padding: 3px;
	display: inline-block;
	text-decoration: none;
	border: 1px solid #8C0D2B;
	width: 30px;
	text-align: center;
}

.pagination li a:hover,
.pagination li.active a {
	text-decoration: underline;	
	border: 1px solid orange;
	background-color: orange;
	color: #000;
}

/*
* Made by Erik Terwan
* 24th of November 2015
* MIT License
*
*
* If you are thinking of using this in
* production code, beware of the browser
* prefixes.
*/
.menuToggle	{
	display: none;
	position: relative;
	/*top: 50px;*/
	/*left: 50px;*/
	z-index: 100;
	-webkit-user-select: none;
	user-select: none;				
}

.menuToggle a {
	text-decoration: none;
	/*color: #232323;*/
	/*transition: color 0.3s ease;*/
}

.menuToggle a:hover {
	/*color: tomato;*/
}


.menuToggle input {
	display: block;
	width: 30px;
	height: 30px;
	position: absolute;
	/*top: -7px;*/
	/*left: -5px;*/				

	cursor: pointer;

	opacity: 0; /* hide this */
	z-index: 200; /* and place it over the hamburger */

	-webkit-touch-callout: none;
}

/*
* Just a quick hamburger
*/
.menuToggle span {
	display: block;
	width: 33px;
	height: 4px;
	margin-bottom: 5px;
	margin-top: 3px;
	position: relative;

	background: orange;
	border-radius: 3px;

	z-index: 100;

	transform-origin: 4px 0px;

	transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
	background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
	opacity 0.55s ease;
}

.menuToggle span:first-child {
	transform-origin: 0% 0%;
}

.menuToggle span:nth-last-child(2) {
	transform-origin: 0% 100%;
}

/* 
* Transform all the slices of hamburger
* into a crossmark.
*/
.menuToggle input:checked ~ span {
	opacity: 1;
	transform: rotate(45deg) translate(2px, -1px);
	background: orange;
}

/*
* But let's hide the middle one.
*/
.menuToggle input:checked ~ span:nth-last-child(3) {
	opacity: 0;
	transform: rotate(0deg) scale(0.2, 0.2);
}

/*
* Ohyeah and the last one should go the other direction
*/
.menuToggle input:checked ~ span:nth-last-child(2) {
 	transform: rotate(-45deg) translate(0, 3px);
}

.mobileSiteNumber {
	float: right;
	color: orange;
	padding-right: 10px;
}

/*
* Make this absolute positioned
* at the top left of the screen
*/
.menu {
	position: absolute;
	/*width: 300px;*/
	/*margin: -100px 0 0 -50px;*/
	/*padding: 50px;*/
	/*padding-top: 125px;*/

	/*background: #ededed;*/
	list-style-type: none;
	-webkit-font-smoothing: antialiased;
	/* to stop flickering of text in safari */

	transform-origin: 0% 0%;
	transform: translate(-100%, 0);

	transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
	top: -3px;
	left: 30px;	
}

.paginationBoxBottom .menu {
	bottom: -3px;
	top: auto;
}

.menu li {
	/*padding: 10px 0;*/
	/*font-size: 22px;*/
	width: 37px;
	border-left: 1px solid orange;
	border-right: 1px solid orange;
}

.menu li:first-child {
	border-top: 1px solid orange;
}

.menu li:last-child {
	border-bottom: 1px solid orange;
}

.menu li a {
	width: 29px;
}

/*
* And let's slide it in from the left
*/
.menuToggle input:checked ~ ul {
	transform: none;
}

.main .header {
	height: 500px;
	background-color: #8C0D2B;
	background-image: url('/media/lift/siteImage/header.jpg');
	background-position: 50% 50%;
	background-size: cover;
	position: relative;
}

.main .header .contactBox {
	color: #fff;
	font-weight: bold;
	border-top: 3px solid orange;
	border-bottom: 3px solid orange;
	background-color: rgba(0,0,0,0.7);
	width: fit-content;
	padding: 5px;
	position: relative;
	transform: rotate(-5deg);
	top: 25%;
	left: -20px;
}

.main .header .programmBox {
	color: rgba(255,255,255,0.7);
	font-weight: bold;	
	font-size: 4.5rem;
	width: fit-content;
	transform: rotate(180deg);
	writing-mode: vertical-rl;
	float: right;
	text-align: right;
	max-height: 500px;
	margin-top: 10px;
}

.main .zusatzInfo {
	width: 130px;
	padding: 5px;
	border: 1px solid #fff;
	background-color: #000;
	color: #fff;
	float: right;
	position: absolute;
	top: 50%;
	right: 150px;
	font-size: 0.8rem;
	transform: rotate(-5deg);
}

.main .event {		
	padding-top: 20px;
	padding-bottom: 5px;
	border-bottom: 5px solid #fff;
	background-color: #8C0D2B;
	background-size: contain;
}

.main .wrapper .event.odd {
	background-color: darkblue;
}

.main .event .eventImage {
	position: relative;
	z-index: 10;
}

.main .event .eventImage img {
	width: 100%;
	height: auto;
}

.main .event .eventText {
	padding-bottom: 30px;
	color: #fff;
	text-align: justify;
	position: relative;
}
.main .event .eventText h1,
.main .event .eventText h2 {
	margin-top: 0;
	margin-bottom: 0;
	text-align: left;
}

.main .event .eventText p {
	margin-bottom: 0;
}

.main .event .eventText a {
	color: #fff;
}

.main .event .eventText .preSale {
	width: 95px;
	float: right;
	background-color: #fff;
	color: #000;
	margin-left: 5px;
	margin-bottom: 5px;	
	font-size: 0.7rem;
	transform: rotate(-5deg);
	text-align: left;
	position: relative;
	z-index: 30;
}

.main .event .eventText .preSale .preSaleHeader {
	background-color: orange;
	color: #fff;
	padding: 3px;
}

.main .event .eventText .preSale .preSaleBody {
	padding: 3px;
}

/* EVENT Informationen */
.main .event .eventInfos {
	background-color: #fff;
	margin-top: -20px;
	padding-top: 5px;
	padding-bottom: 5px;
	position: relative;
	z-index: 1;
}

.main .event .eventInfos .eventInfo, .atcb-text {
	display: inline;
	font-size: 1.5rem;
	font-weight: bold;
}

.main .event .eventInfos .eventInfoDate, .atcb-text {
	color: #8C0D2B;	
}

.main .event .eventInfos .eventInfoDateDivider,
.main .event .eventInfos .eventInfoTime {
	color: #FF9600;
}

.main .event .eventInfos .eventInfoFee {
	margin-left: 5px;
}

.main .event .eventInfos .eventInfoFeeDivider,
.main .event .eventInfos .eventInfoPlaceDevider {
	color: #FF9600;
}

.main .event .eventInfos .eventInfoFee,
.main .event .eventInfos .eventInfoFeeReduced {
	color: #8C0D2B;
}

.main .event .eventInfos .eventInfoFeeReduced {
	font-size: 1rem;
}

.main .event .eventInfos .eventInfoPlace {
	color: #8C0D2B;
}

.main .notfound {		
	padding-top: 10px;
	padding-bottom: 5px;
	border-bottom: 5px solid #fff;
	background-color: #8C0D2B;
	background-size: contain;
	color: #fff;
	text-align: center;
}

.main .unterseite {		
	padding-top: 10px;
	padding-bottom: 5px;
	border-bottom: 5px solid #fff;
	background-color: #8C0D2B;
	background-size: contain;
	color: #fff;
}

.main .unterseite #karte {
	height: 500px;
	width: 500px;
	margin: auto !important;
}

.main .footer {
	color: #fff;
	background-color: #8C0D2B;
	text-align: center;
	font-weight: bold;
	font-size: 1.2rem;
}

.buttonLink404 {
	padding: 10px;
	background-color: orange;
	color: black;
	margin-top: 10px;
	margin-bottom: 20px;
	border: 1px solid orange;
	border-radius: 4px;
	display: inline-block;
	width: 25%;
}

.eventText a span {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
}

/*@media only screen and (min-width: 28em) {
	.main {
		width: 100%;
	}
}

@media only screen and (min-width: 48em) {
	.main {
		width: 100%;
	}
}

@media only screen and (min-width: 62em) {
	.main {
		width: 75%;
	}
}*/

add-to-calendar-button {
	display: block;
	display: inline;
	margin-top: 10px;
}

@media only screen and (min-width: 1700px) {
	.main .header {
		height: 550px;
	}
}

@media only screen and (max-width: 1200px) {
	.main,
	.navigation {
		width: 75%;
	}

	.main .zusatzInfo {
		bottom: 10px;
		top: initial;		
		/*transform: rotate(0deg)*/
	}
}

@media only screen and (max-width: 820px) {
	.main,
	.navigation {
		width: 100%;
	}
	.main .navi a {
		margin-left: 0px;
		margin-right: 0px;
		padding-left: 2px;
		padding-right: 2px;
	}
	.main .header .contactBox {
		font-size: 0.8rem;
		/*transform: rotate(0deg)*/
	}

	.main .zusatzInfo {
		bottom: 10px;
		top: initial;
		right: 100px;
		/*transform: rotate(0deg)*/
	}

	/*.menuToggle {
		display: block;
	}
	.fullMenu {
		display: none;
	}*/

}

@media only screen and (max-width: 500px) {
	.main,
	.navigation {
		width: 100%;
		padding-left: 0px;
	}

	.navigation .navi a {
		margin-left: 0px;
		margin-right: 0px;
		padding-left: 2px;
		padding-right: 2px;
	}

	.main .header {
		height: 400px;
	}

	.main .header .contactBox {
		font-size: 0.8rem;
		transform: rotate(0deg)
	}	

	.main .header .programmBox {				
		font-size: 3.5rem;
		max-height: 400px;
		margin-top: 10px;
		margin-right: -10px;
	}

	.main .zusatzInfo {
		bottom: 10px;
		top: initial;
		right: 100px;
		transform: rotate(0deg)
	}

	.main .unterseite #karte {
		height: 350px;
		width: 350px;
		margin: auto !important;
	}

	/*.menuToggle {
		display: block;
	}

	.fullMenu {
		display: none;
	}*/

}

:host {
	--base-font-size-l: 1.5rem;
	--base-font-size-m: 1.5rem;
	--base-font-size-s: 1.5rem;
}