:root
{
	--red: #c00;
	--dark: #1a1a1a;
	--sys-controls: var(--red);
	--sys-background: var(--dark);
}

/* common */
@media all
{
	body
	{
		width: 100vmin;
		scrollbar-width: thin;
		scrollbar-color: #999 transparent;
	}

	body *
	{
		scrollbar-width: thin;
		scrollbar-color: #999 transparent;
	}

	body::-webkit-scrollbar,
	body *::-webkit-scrollbar
	{
		width: 5rem;
		height: 5rem;
	}

	body::-webkit-scrollbar-track,
	body *::-webkit-scrollbar-track
	{
		background: transparent;
	}

	body::-webkit-scrollbar-thumb,
	body *::-webkit-scrollbar-thumb
	{
		background: #999;
	}

	.aleft,
	*[data-align='left'],
	*[align='left']
	{
		text-align: left!important;
	}

	.aright,
	*[data-align='right'],
	*[align='right']
	{
		text-align: right!important;
	}

	.acenter,
	*[data-align='center'],
	*[align='center']
	{
		text-align: center!important;
	}

	.ajustify,
	*[data-align='justify'],
	*[align='justify']
	{
		text-align: justify!important;
	}

	article a,
	article button,
	article .button,
	article .-hth
	{
		-webkit-touch-callout: none;
		-webkit-user-select: none;
		-khtml-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		user-select: none;
		outline: none!important;
		-webkit-tap-highlight-color: transparent;
	}

	a:active, a:hover, a:focus, a:focused,
	button:active, button:hover, button:focus, button:focused,
	.button:active, .button:hover, .button:focus, .button:focused,
	.-hth:active, .-hth:hover, .-hth:focus, .-hth:focused
	{
		outline: none!important;
	}
}

/* button */
@media all
{
	.button
	{
		display: inline-block;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		margin: 5rem 10rem 5rem 0;
		background: var(--red);
		color: #fff!important;
		font-weight: bold;
		font-size: 16rem!important;
		line-height: 28rem!important;
		padding: 12rem 24rem;
		position: relative;
		-webkit-transition: all .5s;
		-moz-transition: all .5s;
		-o-transition: all .5s;
		transition: all .5s;
		text-decoration: none!important;
		font-family: Montserrat, Arial, sans-serif!important;
		text-align: center!important;
		text-transform: uppercase;
		cursor: pointer;
		text-shadow: none!important;
		opacity: 1;
	}

	.button:hover
	{
		opacity: 0.75;
	}

	.button.w160
	{
		width: 160rem;
	}

	.button.w200
	{
		width: 200rem;
	}

	.button.w220
	{
		width: 220rem;
	}

	.button.w250
	{
		width: 250rem;
	}

	.button.w300
	{
		width: 300rem;
	}

	.button.w350
	{
		width: 350rem;
	}

	.button.w400
	{
		width: 400rem;
	}

	.button.no-margin
	{
		margin: 0;
	}

	.button.s
	{
		padding: 8rem 16rem;
		font-size: 13rem!important;
	}

	.button.xs
	{
		padding: 0 8rem;
		font-size: 11rem!important;
	}

	.button.xxs
	{
		padding: 0rem 8rem;
		font-size: 9rem!important;
	}
}

/* page */
@media all
{
	html, body
	{
		width: 100%;
		height: 100%;
		min-height: 100%;
		background: #fff;
		position: relative;
		padding: 0;
		margin: 0;
	}

	svg
	{
		fill-rule: evenodd;
		clip-rule: evenodd;
		shape-rendering: geometricPrecision;
		display: block;
	}

	div#web-cookie-confirm
	{
		display: none!important;
	}

	nav#web-mm,
	nav#web-mm *,
	div.page,
	div.page *,
	body[spellcheck],
	body[spellcheck] *
	{
		font-family: Montserrat, Arial, sans-serif!important;
		font-size: 14rem;
		line-height: 150%;
	}

	body[spellcheck],
	body[spellcheck] *
	{
		text-align: left;
	}

	a[href],
	a[onclick]
	{
		text-decoration: none;
	}

	a[href]:not(.link):hover,
	a[onclick]:not(.link):hover
	{
		text-decoration: underline;
	}

	a.link
	{
		position: relative!important;
		display: inline-block;
		text-decoration: none!important;
	}

	a.link:after
	{
		-webkit-transition: all .5s;
		-moz-transition: all .5s;
		-o-transition: all .5s;
		transition: all .5s;
		width: 0;
		left: 0;
		height: 1rem;
		background: var(--red);
		display: block;
		content: "";
		position: absolute;
		bottom: 0;
	}

	a.link.visible:after,
	a.link:hover:after
	{
		width: 100%!important;
	}
}

/* page */
@media all
{
	div.page
	{
		display: block;
		width: 100%;
		min-height: 100vh;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		font-size: 0;
		position: relative;
		background: #000;
	}

	div.page *
	{
		color: #fff;
	}

}

/* article */
@media all
{
	article
	{
		display: block;
		position: relative;
		z-index: 3;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
	}

	article>br
	{
		display: none!important;
	}

	article strong,
	article strong *
	{
		font-weight: bold;
	}

	article em,
	article em *
	{
		font-style: italic;
	}

	article video
	{
		display: block;
		width: 100%;
	}

	article img[id~='VARIO-Gallery'],
	article img[id|='VARIO-Gallery'],
	article img[id^='VARIO-Gallery']
	{
		cursor: pointer;
	}
}

/* header */
@media all
{
	header
	{
		position: relative;
		overflow: hidden;
		z-index: 1;
		display: block;
		width: 100%;
		margin-bottom: -10vw;
	}

	header img
	{
		display: block;
		width: 100%;
		min-width: 720rem;
		position: relative;
		z-index: 0;
	}

	@media all and (max-width: 720px)
	{
		header img
		{
			left: calc(50% - 360rem);
		}
	}
}

/* sections */
@media all
{
	section
	{
		display: block;
		max-width: 100%!important;
		position: relative;
		text-align: center;
		margin: 0 auto;
		padding: 40rem 0 0 0;
		z-index: 0;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
	}

	section.trans
	{
		background: transparent;
		z-index: 1;
	}

	section img.full,
	body[spellcheck] img.full
	{
		width: 100%;
	}

	section img.half,
	body[spellcheck] img.half
	{
		width: 50%;
	}

	section img.third,
	body[spellcheck] img.third
	{
		width: 33.3%;
	}

	section img.quarter,
	body[spellcheck] img.quarter
	{
		width: 25%;
	}

	section img.bordered,
	body[spellcheck] img.bordered
	{
		border: 1rem solid #000;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
	}

	section img[data-float='left'],
	body[spellcheck] img[data-float='left']
	{
		margin: 10rem 30rem 20rem 0;
	}

	section img[data-float='right'],
	body[spellcheck] img[data-float='right']
	{
		margin: 10rem 0 20rem 30rem;
	}

	section>div
	{
		display: block;
		margin: 0 auto;
		font-size: 0!important;
		width: 480rem;
		max-width: 100%;
		text-align: left;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
	}

	section ul
	{
		margin: 0 0 0 20rem!important;
		position: relative;
	}

	section ul li
	{
		list-style: none;
		position: relative;
	}

	section ul li:before
	{
		content: "";
		background: var(--red);
		display: block;
		width: 4rem;
		height: 4rem;
		position: absolute;
		left: -20rem;
		top: 9rem;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
	}

	section>div>div
	{
		white-space: normal;
		display: inline-block;
		padding: 0 2.5vw 40rem 2.5vw;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		position: relative;
		vertical-align: top;
		text-align: left;
	}

	section>div>div:after
	{
		content: "";
		clear: both;
		display: block;
		float: none;
	}

	section>div>div[data-size='1/1']
	{
		display: block;
		width: 100%;
	}

	section>div>div[data-size='1/2']
	{
		width: 50%;
	}

	section>div>div[data-size='1/3']
	{
		width: 33.3%;
	}

	section>div>div[data-size='2/3']
	{
		width: 66.66%;
	}

	section>div>div[data-size='1/4']
	{
		width: 25%;
	}

	@media all and (max-width: 1280px)
	{
		section img.half
		{
			width: 100%;
			float: none!important;
			display: block;
			margin: 12rem 0!important;
		}

		section img.third,
		section img.quarter
		{
			width: 50%;
		}
	}

	@media all and (max-width: 1156px)
	{
		section>div>div
		{
			display: block!important;
			width: 100%!important;
		}
	}

	@media all and (max-width: 720px)
	{
		section img.third,
		section img.quarter
		{
			width: 100%;
			float: none!important;
			display: block;
			margin: 10rem 0!important;
		}
	}

	article>section h1,
	article>section h2,
	body[spellcheck] h1,
	body[spellcheck] h2
	{
		display: block;
		text-align: left;
		font-size: 20rem!important;
		line-height: 125%!important;
		text-transform: uppercase;
		margin: 0 auto;
		position: relative;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		color: var(--grey);
		font-weight: bold;
	}

	article>section>h1,
	article>section>h2
	{
		padding: 0 2.5vw 40rem 2.5vw;
		width: 480rem;
		max-width: 100%;
	}

	article>section h1 *,
	body[spellcheck] h1>*,
	article>section h2 *,
	body[spellcheck] h2>*
	{
		font-size: inherit!important;
		line-height: inherit!important;
		display: inline-block;
	}

	article>section div h3,
	body[spellcheck] h3
	{
		font-size: 22rem!important;
		font-weight: bold;
		margin: 0;
		padding: 0 0 12rem 0;
		color: var(--dark);
	}

	article>section div *+h2,
	body[spellcheck] *+h2
	{
		margin-top: 48rem;
	}

	article>section div img[data-float]+h2,
	body[spellcheck] img[data-float]+h2
	{
		margin-top: 0;
	}

	article>section div *:not(h2)+h3,
	body[spellcheck] *:not(h2)+h3
	{
		margin-top: 24rem;
	}
}

/* login */
@media all
{
	section.login
	{
		margin: 0 auto;
		text-align: center;
	}

	section.login h2
	{
		text-align: center;
	}

	section.login form
	{
		display: block;
		margin: 0 auto;
		width: 100%;
		max-width: 340rem;
	}

	section.login form>*
	{
		display: block;
		margin: 0 auto 10rem auto;
		width: 100%;
	}

	section.login form>button
	{
		width: 100%;
		text-align: center!important;
	}

	section.login form input
	{
		cursor: text;
		padding: 5rem 15rem;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		border: 1rem solid var(--dark);
		color: #000;
	}
}