@charset 'UTF-8';
@import url('https://fonts.googleapis.com/css?family=Anton&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Merriweather+Sans:wght@300;400;600;800&display=swap');

	html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
		margin: 0;
		padding: 0;
		border: 0;
		font-size: 100%;
		font: inherit;
		vertical-align: baseline;
	}

body {
	background:url(/images/system/bg.png) 0 0 repeat;
	background-size: 205px 205px;
}
.webp body {
	background:url(/images/system/bg.webp) 0 0 repeat;
	background-size: 205px 205px;
}
	@media
		screen and (-webkit-min-device-pixel-ratio: 2),
		screen and (min-resolution: 192dpi),
		screen and (min-resolution: 2dppx) {
			body {
				background:url(/images/system/bg2x.png) 0 0 repeat;
				background-size: 205px 205px;
			}
			.webp body {
				background:url(/images/system/bg2x.webp) 0 0 repeat;
				background-size: 205px 205px;
			}
	}

a {
	text-decoration: none;
	color: inherit;
}

img {
	aspect-ratio: attr(width) / attr(height);
}

small { font-size: 0.5em; }
em {
	font-weight: 600;
	color: #847569;
}
h1 {
	font: normal normal normal 80px/120px Anton;
	letter-spacing: 1.76px;
	color: #11AAC1;
	opacity: 1;
	margin: 20px 0 0 0;
}
	@media (min-width: 0px) and (max-width: 759px) {
		h1 {
			font: normal normal normal 28px/42px Anton;
			letter-spacing: 0.62px;
			padding: 1em 0 0 0;
		}
	}
h2 {
	font: normal normal 600 36px/53px Merriweather Sans;
	letter-spacing: 0.84px;
	color: #191818;
	opacity: 1;
}
h3 {
	font: normal normal normal 24px/36px Anton;
	letter-spacing: 0.53px;
	color: #11AAC1;
	opacity: 1;
}


.left { float: left; }
.right { float: right; }
.clear { clear: both; }

strong {
	font: normal normal bold 18px/26px Merriweather Sans;
	letter-spacing: 0.44px;
	color: #191818;
	opacity: 1;
}

.divider {
	border-top: 1px solid #77777733;
	width: 740px;
	margin: 50px auto 20px auto;
	padding: 0;
	clear: both;
}
	@media (min-width: 0px) and (max-width: 759px) {
		.divider {
			width: 80%;
			padding: 0 5%
		}
	}

.space {
	position: relative;
	width: 100px;
	margin: 50px auto 0 auto;
	padding: 0;
}

.mb-20 {
	margin-bottom: 20px;
}

.container {
	position: relative;
	width: 1164px;
	height: auto;
	margin: 0 auto;
	text-align: center;
}
	@media (min-width: 0px) and (max-width: 759px) {
		.container {
			width: 100%;
			overflow: hidden;
			top: -20px;
		}
	}

.silhouette {
	position: relative;
	width: 504px;
	height: 311px;
	margin: 130px auto 0 auto;
}
	@media (min-width: 0px) and (max-width: 759px) {
		.silhouette {
			width: 80%;
			height: auto;
		}
	}
	.silhouette img {
		width: 100%;
		height: auto;
	}

.welcome {
	position:relative;
	width: 415px;
	height: 72px;
	font: normal normal normal 81px/43px Anton;
	letter-spacing: 0px;
	color: #11AAC1;
	text-transform: uppercase;
	margin: 0 auto;
	padding: 35px 0;
}
	@media (min-width: 0px) and (max-width: 759px) {
		.welcome {
			width: 80%;
			font-size: 55px;
		}
	}

.enter {
	position:relative;
	width: 214px;
	height: 35px;
	background: #11AAC1 0% 0% no-repeat padding-box;
	opacity: 1;
	text-align: center;
	font: normal normal normal 18px/26px Merriweather Sans;
	text-transform: uppercase;
	letter-spacing: 2.16px;
	color: #FFF;
	margin: 0 auto;
	padding: 12px 0 0 0;
}
	@media (min-width: 0px) and (max-width: 759px) {
		.enter {
			width: 60%;
		}
	}

	.enter a {
		color: #FFF;
	}

.leave {
	position:relative;
	width: 212px;
	height: 35px;
	border: 1px solid #777;
	opacity: 1;
	text-align: center;
	font: normal normal 300 18px/26px Merriweather Sans;
	text-transform: uppercase;
	letter-spacing: 2.16px;
	color: #191818;
	margin: 20px auto 0 auto;
	padding: 12px 0 0 0;
}
	@media (min-width: 0px) and (max-width: 759px) {
		.leave {
			width: 60%;
		}
	}

	.leave a {
		color: #191818;
	}

.inner {
	position: relative;
	margin: 70px auto 0 auto;
	width: 1164px;
	background-color:rgba(255, 255, 255, 0.5);
	border-radius: 15px;
}
	@media (min-width: 0px) and (max-width: 759px) {
		.inner {
			width: 100%;
			border-radius: 0px;
		}
	}

	.inner .headline {
		position: relative;
		text-align: center;
		font: normal normal normal 32px/42px Anton;
		letter-spacing: 0.7px;
		color: #191818;
		opacity: 1;
		padding: 70px 45px 0 45px;
		margin: 0 auto;
	}
		@media (min-width: 0px) and (max-width: 759px) {
			.inner .headline {
				font: normal normal normal 22px/34px Anton;
			}
		}

	.inner .content {
		position: relative;
		text-align: center;
		font: normal normal 300 18px/26px Merriweather Sans;
		letter-spacing: 0.44px;
		color: #191818;
		opacity: 1;
		margin: 0 auto;
		padding: 40px 0;
	}
		@media (min-width: 0px) and (max-width: 759px) {
			.inner .content {
				padding: 40px 10%;
			}
		}

		.inner .content ul {
			position: relative;
			width: 660px;
			text-align: left;
			margin: 0 auto;
			list-style: none;
		}
			@media (min-width: 0px) and (max-width: 759px) {
				.inner .content ul {
					width: 90%;
				}
			}

			.inner .content ul li {
				padding-left: 1em; 
				text-indent: -1.2em;
				font: normal normal 300 18px/26px Merriweather Sans;
				letter-spacing: 0.44px;
				color: #191818;
				opacity: 1;
			}

			.inner .content ul li::before {
				content: "\25CF";
				margin-right: 10px;
				color: #11AAC1;
			}

	.inner .images {
		float: left;
		width: 500px;
		padding: 60px 30px 0 60px;
		text-align: left;
	}
		@media (min-width: 0px) and (max-width: 759px) {
			.inner .images {
				width: 90%;
				min-height: 900px !important;
				padding: 80px 5% 5% 5%;
			}
			.inner .images img {
				width: 100%;
				height: auto;
			}
		}
		.inner .images .images_more {
			column-count: 2;
		}
			.inner .images .images_more img {
				margin: 20px 20px 0 0;
			}

	.inner .info {
		float: left;
		width: 460px;
		padding: 60px 50px 0 60px;
		text-align: left;
	}
		@media (min-width: 0px) and (max-width: 759px) {
			.inner .info {
				width: 90%;
				margin: 0 auto;
				padding: 5%;
			}
		}

	.inner .hint {
		position: relative;
		text-align: center;
		font: normal normal 300 18px/26px Merriweather Sans;
		letter-spacing: 0.44px;
		color: #191818;
		opacity: 1;
		width: 1030px;
		padding: 0 0 40px 0;
		margin: 0 auto;
	}
		@media (min-width: 0px) and (max-width: 759px) {
			.inner .hint {
				width: 90%;
				margin: 0 auto;
			}
		}

		.inner .info h1 {
			text-align: left;
		}
			@media (min-width: 0px) and (max-width: 759px) {
				.inner .info h1 {
					position: absolute;
					top: 0px;
					text-align: center;
					font: normal normal normal 28px/42px Anton;
					width: 100%;
					margin: 0 auto;
				}
			}
		.inner .info .header {
			text-align: left;
			font: normal normal bold 16px/28px Merriweather Sans;
			letter-spacing: 0px;
			color: #11AAC1;
			text-transform: uppercase;
			margin: 30px 0 0 0;
		}
			@media (min-width: 0px) and (max-width: 759px) {
				.inner .info .header {
					width: 90%;
					margin: 1em auto 0 auto;
				}
			}
		.inner .info .data, .info {
			text-align: left;
			font: normal normal 300 16px/28px Merriweather Sans;
			letter-spacing: 0.44px;
			color: #191818;
			opacity: 1;
		}
			@media (min-width: 0px) and (max-width: 759px) {
				.inner .info .data, .info {
					width: 90%;
					margin: 0 auto;
				}
			}
.inner .info .data p {
  margin-top:4px;	
}
.headline-floor {
	position: relative;
	width: 1045px;
	margin: 0 auto 0 auto;
	padding: 40px 0 35px 0;
	text-align: left;
	font: normal normal 600 30px/48px Merriweather Sans;
	letter-spacing: 0.88px;
	color: #11AAC1;
	opacity: 1;
}
	@media (min-width: 0px) and (max-width: 759px) {
		.headline-floor {
			width: 90%;
			font: normal normal 600 26px/38px Merriweather Sans;
		}
	}

	.headline-floor img {
		position: absolute;
		top: 15px;
		right: 0;
		width: 232;
		height: 98px;
	}
		@media (min-width: 0px) and (max-width: 759px) {
			.headline-floor img {
				position: relative;
				display: block;
			}
		}

	.headline-floor::after {
		clear: both;
	}

.model-preview {
	float: left;
	margin: 0 0 50px 53px;
}
	@media (min-width: 0px) and (max-width: 759px) {
		.model-preview {
			width: 90%;
			margin: 5%;
		}
		.model-preview img {
			width: 100%;
			height: auto;
		}
	}
.model-name {
	position: relative;
	width: 100%;
	height: 50px;
	padding: 16px 0 0 0;
	background: #11AAC1 0% 0% no-repeat padding-box;
	opacity: 1;
	color: #fff;
	top: -4px;
	text-align: center;
	font: normal normal bold 26px/28px Merriweather Sans;
	letter-spacing: 0px;
	opacity: 1;
}
	.model-name a {
		color: #fff;
	}

.bottom-headline {
	position: relative;
	width: 900px;
	margin: 125px auto 0 auto;
	text-align: center;
	font: normal normal bold 20px Merriweather Sans;
	letter-spacing: 0.88px;
	color: #11AAC1;
	opacity: 1;
}
	@media (min-width: 0px) and (max-width: 759px) {
		.bottom-headline {
			width: 90%;
			margin-top: 40px;
			font: normal normal bold 22px/32px Merriweather Sans;
		}
	}

.bottom-text {
	position: relative;
	width: 900px;
	margin: 30px auto 0 auto;
	text-align: center;
	font: normal normal 300 16px/22px Merriweather Sans;
	letter-spacing: 0.88px;
	color: #191818;
	opacity: 1;
}
	@media (min-width: 0px) and (max-width: 759px) {
		.bottom-text {
			width: 90%;
			margin-top: 30px;
		}
	}

.raw-text {
	width: 1049px;
	margin: 0 auto;
	padding: 0 0 40px 0;
	text-align: left;
	font: normal normal 300 18px/26px Merriweather SANS;
	letter-spacing: 0.44px;
	color: #191818;
	opacity: 1;
}
	@media (min-width: 0px) and (max-width: 759px) {
		.raw-text {
			width: 90%;
		}
	}
	.raw-text h1 {
		width: 1049px;
		margin: 0 auto;
		text-align: center;
	}
		@media (min-width: 0px) and (max-width: 759px) {
			.raw-text h1 {
				width: 90%;
			}
		}

.footer {
	position: relative;
	width: 100%;
	background: #11AAC1 0% 0% no-repeat padding-box;
	opacity: 1;
	color: #fff;
	margin: 60px 0 0 0;
}

	.footer .headline {
		position: relative;
		margin: 0 auto;
		padding: 75px 0 0 0;
		width: 715px;
		text-align: center;
		font: normal normal normal 32px/42px Anton;
		letter-spacing: 0.7px;
		color: #FFFFFF;
		opacity: 1;
	}
		@media (min-width: 0px) and (max-width: 759px) {
			.footer .headline {
				width: 90%;
				font: normal normal normal 22px/34px Anton;
			}
		}

	.footer .content {
		position: relative;
		margin: 0 auto;
		padding: 50px 0 15px 0;
		width: 715px;
		text-align: center;
		font: normal normal 300 16px/24px Merriweather Sans;
		letter-spacing: 0.44px;
		color: #FFFFFF;
		opacity: 1;
}
		@media (min-width: 0px) and (max-width: 759px) {
			.footer .content {
				width: 90%;
			}
		}

	.footer .special a {
		position: relative;
		display: inline-block;
		padding: 10px 0 85px 0;
		margin: 20px 0 0 0;
		width: 600px;
		font: normal normal 300 36px/54px Merriweather Sans;
		letter-spacing: 0.44px;
		color: #FFFFFF;
		opacity: 1;
		text-transform: uppercase;
}
	@media (min-width: 0px) and (max-width: 759px) {
		.footer .special a {
			width: 90%;
		}
	}

.footer .special a::after {
	content: '\2794';
	font-size: 20px;
	line-height: 51px;
	border: 8px solid #fff;
	border-radius: 50%;
	padding: 5px 8px;
	vertical-align: top;
	margin: 0 0 0 45px;
}


/* Nav */

.main-nav {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 50px;
	margin: 0;
	padding: 0;
	overflow: hidden;
	background: #11AAC1 0% 0% no-repeat padding-box;
	opacity: 1;
	color: #fff;
	z-index: 90;
}
	.main-nav .main {
		margin: 0 auto;
		width: 1164px;
		padding: 8px 0 0 0;
	}
		@media (min-width: 0px) and (max-width: 759px) {
			.main-nav .main {
				width: 100%;
				padding: 0 5%
			}
		}

		.main-nav .main .logo a {
			text-align: left;
			float: left;
			font: normal normal normal 28px/34px Anton;
			letter-spacing: 0px;
			color: #FFFFFF;
			opacity: 1;
		}
			@media (min-width: 0px) and (max-width: 759px) {
				.main-nav .main .logo a {
					padding-top: 10px;
				}
			}
			.main-nav .main .logo .slogan {
				text-align: left;
				float: left;
				font: normal normal normal 11px/34px Merriweather Sans;
				letter-spacing: 0px;
				color: #FFFFFF;
				opacity: 1;
				margin: 0 0 0 20px;
			}
				@media (min-width: 0px) and (max-width: 759px) {
					.main-nav .main .logo .slogan {
						display: none;
					}
				}




@media (min-width: 760px) {

	#sidebarMenu {
		position: fixed;
		top: 0;
		right: 0;
		z-index:99;
		width: 100%;
	}
	.sidebarMenuInner {
		position: relative;
		display: flex;
		justify-content: flex-end;
		margin: 0 auto;
		width: 1164px;
		padding: 8px 0 0 0;
	}
	ul.sidebarMenuInner {
		list-style-type: none;
	}
		ul.sidebarMenuInner li {
			float: left;
			margin-left: 20px;
		}
			ul.sidebarMenuInner li a {
				font: normal normal 300 14px/34px Merriweather Sans;
				letter-spacing: 0px;
				color: #FFFFFF;
				opacity: 1;
			}
			ul.sidebarMenuInner li.active a {
				text-decoration: underline;
			}

}
@media (min-width: 0px) and (max-width: 759px) {
	#sidebarMenu {
		height: 100%;
		position: fixed;
		left: 0;
		width: 100%;
		margin-top: 50px;
		transform: translateX(-100%);
		transition: transform 250ms ease-in-out;
		background: #11AAC1;
		opacity: 1;
		z-index: 99;
	}

	.sidebarMenuInner {
		margin: 0;
		padding: 33% 0 0 0;
		border-top: 1px solid rgba(255, 255, 255, 0.10);
		text-align: center;
	}

	.sidebarMenuInner li {
		list-style: none;
		color: #fff;
		text-transform: uppercase;
		font-weight: bold;
		padding: 20px;
		cursor: pointer;
		border-bottom: 1px solid rgba(255, 255, 255, 0.10);
	}

	.sidebarMenuInner li span {
		display: block;
		font-size: 14px;
		color: rgba(255, 255, 255, 0.50);
	}

	.sidebarMenuInner li a {
		color: #fff;
		text-transform: uppercase;
		font: normal normal normal 26px/40px Merriweather Sans;
		cursor: pointer;
		text-decoration: none;
	}


	input[type="checkbox"]:checked ~ #sidebarMenu { transform: translateX(0); }

	input[type=checkbox] {
		transition: all 0.3s;
		box-sizing: border-box;
		display: none;
	}

	.sidebarIconToggle {
		transition: all 0.3s;
		box-sizing: border-box;
		cursor: pointer;
		position: fixed;
		z-index: 100;
		height: 100%;
		width: 100%;
		top: 18px;
		right: 15px;
		height: 22px;
		width: 22px;
	}

	.spinner {
		transition: all 0.3s;
		box-sizing: border-box;
		position: absolute;
		height: 3px;
		width: 100%;
		background-color: #fff;
	}

	.horizontal {
		transition: all 0.3s;
		box-sizing: border-box;
		position: relative;
		float: left;
		margin-top: 3px;
	}

	.diagonal.part-1 {
		position: relative;
		transition: all 0.3s;
		box-sizing: border-box;
		float: left;
	}

	.diagonal.part-2 {
		transition: all 0.3s;
		box-sizing: border-box;
		position: relative;
		float: left;
		margin-top: 3px;
	}

	input[type=checkbox]:checked ~ .sidebarIconToggle > .horizontal {
		transition: all 0.3s;
		box-sizing: border-box;
		opacity: 0;
	}

	input[type=checkbox]:checked ~ .sidebarIconToggle > .diagonal.part-1 {
		transition: all 0.3s;
		box-sizing: border-box;
		transform: rotate(135deg);
		margin-top: 8px;
	}

	input[type=checkbox]:checked ~ .sidebarIconToggle > .diagonal.part-2 {
		transition: all 0.3s;
		box-sizing: border-box;
		transform: rotate(-135deg);
		margin-top: -9px;
	}
}

	@media (min-width: 760px) {
		.hide-desktop {
			display: none;
		}
	}

.fa-custom {
	color: #fff;
	background-color: #11AAC1;
	width: 50px !important;
	height: 50px !important;
	border-radius: 50%;
	line-height: 51px !important;
	padding: 0px 1px !important;
	vertical-align: top;
	margin: 0;
	font-size: 1.8em;
}

.call {
	position: relative;
	width: 36%;
	padding: 0 7%;
	margin: 1em auto;
	text-align: center;
}

.call a {
	color: #11AAC1;
	display: block;
	font: normal normal 300 16px/28px Merriweather Sans;
}
.von-date {
	font-size: 50%;
	font-weight: 500;
}