@charset "utf-8";

/* HTML5 display definitions */
article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary { display: block; }
audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; }
audio:not([controls]) { display: none; height: 0; }
[hidden] { display: none; }

/* Base */
html, button, input, select, textarea {
	font-family: 'Source Sans Pro', Helvetica, Arial, sans-serif; font-style: normal; font-weight: 400;
	color: #333;
}
html {
    font-size: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%;
    height: 100%;
	color: #333;
}
body {
	font-size: 1.2em; line-height: 1.5;
	margin:0; padding: 0;
}

.wrapper {
	box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;
	margin: 0 auto;
	padding-left: 20px; padding-right: 20px;
	max-width: 1000px;
}
/* Bilder */
img { border: 0; -ms-interpolation-mode: bicubic; width: 100%; height: auto; }

/* Listen */
ul, ol { margin: 0; }

/* Links */
a {
	color: #333;
	text-decoration: none;
}
a.active, a:hover { color: #9d8b82; }
a:focus { outline: none; }
a:active, a:hover { outline: 0; }

/* Formcheck */
.formcheck {
	background: #fff;
	border: 2px solid #9d8b82;
	box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;
	color: #9d8b82;
	margin: 0 0 2em;
	padding: 0.5em;
}
.formcheck.error {
	background: #f2dede;
	border-color: #ebccd1;
	color: #a94442;
}
/* Formulare */
form fieldset {
	border: none;
	margin: 0;
	padding: 0;
}
form .row { margin-top: 0.7em; }
form.steps .row { margin-top: 3em; }
form .row:first-child { margin-top: 0; }
form fieldset label {
	display: inline-block;
	font-size: 95%;
	margin-right: 0.3em;
	min-width: 200px;
	text-align: right;
}
form label.required, form.steps div.row > label { font-weight: 600; }
form input[type="text"], form input[type="date"], form select, form textarea {
	border: 1px solid #ddd;
	box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;
	font-size: 95%;
	padding: 0.3em;
	width: 40%; min-width: 150px;
}
form.steps select { margin-top: 0.3em; }
form .small { min-width: 0!important; width: 80px!important; }
form .buttons { 
	margin-top: 2em;
	margin-bottom: 1em;
	text-align: right;
}
form a.gonext { margin-left: 0.4em; }
form .inlineblock { display: inline-block; }
form .rangeslider { 
	background: #99cc00;
	margin: 1em;
}
form .noUi-pips .noUi-value { 
	font-size: 120%!important;
	padding-top: 15px;
	text-align: center;
}
form .noUi-pips .noUi-marker { height: 10px; }
form .row-range .container { height: 80px; }
form textarea {
	display: block;
	margin-top: 0.2em;
	min-height: 100px;
	resize: vertical;
	width: 100%;
}
form textarea#summary { height: 250px; }
form .row-enum div, form .row-set div { margin-left: 1em; }
form .posneg {
	clear: both;
	margin-top: 3.5em;
	overflow: auto;
}
form .posneg > * { 
	display: inline-block;
	float: left;
	margin-left: 4%;
	width: 48%;
}
form .posneg > *:first-child { margin-left: 0; }

/* Buttons */
a.button, input[type="submit"], button {
	background: #fff;
	border-radius: 0px; border: 2px solid #000;
	box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;
	color: #000;
	font-size: 110%;
	hyphens: none; -webkit-hyphens: none; -ms-hyphens: none;
	padding: 0.5em 1em;
	text-decoration: none; text-transform: uppercase;
}
a.button:hover, input[type="submit"]:hover, button:hover {
	background: #9d8b82;
	border: 2px solid #9d8b82;
	color: #fff;
	cursor: pointer;
}

/* Helper Classes */
.right { float: right; }
.cf {
	clear: both;
	overflow: auto;
}

/* Template */
#header { margin-top: 0.5em; }
body.steps #header { display: none; }
#languageselect { 
	font-size: 90%;
	margin: 2.5em 0 1.5em;
	text-align: center; 
}
#languageselect a {
	display: inline-block;
	margin-left: 1.5em;
	width: 25%; max-width: 100px;
}
#languageselect a:first-child { margin-left: 0; }
#languageselect img {
	height: auto;
	width: 100%; 
}

#logo {
	max-width: 220px;
	margin: 0 auto;
}

#main > .wrapper {
	display: table;
	margin: 3em auto;
	vertical-align: top;
	width: 100%;
}
#main > .wrapper > * {
	box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;
	display: table-cell;
}
body.finished #languageselect, body.nochangesallowed #languageselect { display: none; }
body.finished #categories, body.finished #navmobile { display: none; }
body.finished #article { padding-left: 0; }
body.finished h1 {
	height: 0;
	opacity: 0;
}

#navmobile {
	background: #9d8b82;
	box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;
	color: #fff;
	display: none;
	padding: 0.4em 0;
}
#navmobile span {
	display: inline-block;
	box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;
	padding: 0.4em;
	text-align: center; text-indent: 2px;
	vertical-align: middle;
}
#navmobile span:hover {
	background: #9d8b82;
	cursor: pointer;
}

#categories { 
	border-right: 2px solid #f9f9f9;
	width: 25%; min-width: 200px;
}
#categories ul {
	list-style: none;
	padding: 0;
}
#categories a { text-decoration: none; }
#categories li[data-clickable="0"], #categories li[data-clickable="0"]:hover {
	color: #aaa;
	cursor: default;
}

#article { padding-left: 2.5em; }
#footer .wrapper {
	background: #9d8b82;
	color: #fff;
	padding-top: 0.2em; padding-bottom: 0.2em;
	text-align: center;
}
#footer a { color: #fff; }
#footer .languageselect { display: none; }
#footer .wrapper address { font-style: normal; }
#footer .wrapper span { margin: 0 1em; }
body.steps #footer { display: none; }

body.pre-data-form #categories { display: none; }
body.pre-data-form h1 { display: none; }
body.pre-data-form #navmobile { display: none; }
body.pre-data-form #article { padding-left: 0; }

.firstprestep { text-align: center; }
.next-icon {
	width: 30px;
	display: block;
	text-align: center;
	margin: 0 auto 0.25em;
}
.secondprestep {
	text-align: center;
	position: relative;
}
.secondprestep h2 {
	font-size: 3em;
	font-family: 'Sunrise-International';
	font-weight: 200;
	margin: 0.25em 0 0.5em;
}
.secondprestep a {
	display: block;
	font-size: 1.25em;
	margin: 2em 0;
	text-transform: uppercase;
}
.secondprestep img { max-width: 750px; }
.secondprestep-bg {
	background: #ebe8e6;
	position: absolute;
	left: -20px;
	right: -20px;
	top: 0;
	bottom: 180px;
	z-index: 1;
}
.secondprestep-content {
	z-index: 2;
	position: relative;
}

.twoimgstxt {
	margin-left: 0!important; margin-right: 0!important;
	position: relative; z-index: 1;
}
.twoimgstxt a {
	display: block;
	font-size: 1.25em;
	margin: 2em 0;
	text-transform: uppercase;
}
.twoimgstxt-bg {
	background: #ebe8e6;
	height: 85%;
	position: absolute; z-index: 1; left: 0; top: 20%;
	width: 100%;
}
.twoimgstxt, .twoimgstxt h2 { text-align: center; }
.twoimgstxt-wrapper {
	margin-left: auto; margin-right: auto;
	position: relative; z-index: 2;
	width: 100%; max-width: 1346px;
}
.twoimgstxt-liketable {
	display: table;
	width: 100%;
}
.twoimgstxt-liketable > * {
	display: table-cell;
	text-align: center;
	vertical-align: top;
}
.twoimgstxt-liketable > *:first-child {
	box-sizing: border-box;
	padding-right: 21px;
	width: 49.48%;
}
.twoimgstxt-liketable > *:last-child img { margin-bottom: 0.5em; }
.twoimgstxt-liketable img {
	display: block;
	height: auto;
	width: 100%;
}
.twoimgstxt-slogan, .twoimgstxt h2, .twoimgstxt-footer > p { font-family: 'Sunrise-International'; font-weight: 200; }
.twoimgstxt-slogan {
	font-size: 2.5em;
	line-height: 1.2em;
	margin: 0;
}
.twoimgstxt-subslogan {
	font-size: 1.5em; font-weight: 400;
	line-height: 1.2em;
	margin-top: 0.25em;
}
.twoimgstxt h2 {
	font-size: 3.25em!important;
	margin-bottom: 0;
}
.twoimgstxt-wrapper > p { margin-bottom: 20px; }
.twoimgstxt-footer {
	margin-top: 85px; margin-bottom: 3em;
	position: relative; z-index: 1;
}
.twoimgstxt-footer > p {
	font-family: 'Sunrise-International'; font-weight: 200; font-size: 5.8em!important;
	line-height: 1.2em;
	margin: 0; margin-left: auto; margin-right: auto;
	width: 100%; max-width: calc(100%  - 400px);
}
.twoimgstxt-footer img {
	display: block;
	height: auto;
	transform: rotate(15deg);
	position: absolute; z-index: 1; right: 0; top: -110px;
	width: 185px;
}
@media screen and (max-width: 1110px) {
	.twoimgstxt-footer > p {
		font-size: 4em!important;
		max-width: none;
	}
	.twoimgstxt-footer img { width: 150px; }
}
@media screen and (max-width: 700px) {
	.twoimgstxt-liketable, .twoimgstxt-liketable > * { display: block; }
	.twoimgstxt-liketable > *:first-child {
		margin-bottom: 10px;
		padding-right: 0;
		width: 100%;
	}
	.twoimgstxt-liketable img {
		margin-left: auto; margin-right: auto;
		max-width: 460px;
	}
	.twoimgstxt-bg { height: 85%; }
	.twoimgstxt-footer img { display: none; }
}
@media screen and (max-width: 585px) {
	.twoimgstxt-bg { height: 83%; }
	.twoimgstxt-slogan { font-size: 2.8em; }
	.twoimgstxt-subslogan { font-size: 1.4em; }
	.twoimgstxt h2 { font-size: 4em!important; }
	.twoimgstxt-wrapper > p { margin-bottom: 40px; }
	.twoimgstxt-footer { margin-top: 0; }
	.twoimgstxt-footer > p { font-size: 2.8em!important; }
}
@media screen and (max-width: 400px) {
	.twoimgstxt-bg { top: 10%; height: 90%; }
}

@media screen and (min-width: 900px) {
	#main > .wrapper { left: 0; }
	#categories { max-height: none!important; }
}

@media screen and (max-width: 900px) {
	#navmobile {
		display: block;
		margin: 1.5em 0 1em;
	}
	body.steps #navmobile { margin-top: 0; }
	#main > .wrapper { margin-top: 0; }
	#main > .wrapper > * { display: block; }
	
	#categories {
		border: none;
		max-height: 0;
		overflow: hidden;
		transition: max-height 0.5s ease-out; -webkit-transition: max-height 0.5s ease-out; -moz-transition: max-height 0.5s ease-out; -o-transition: max-height 0.5s ease-out;
	}
	#categories.show {
		max-height: 600px;
		transition: max-height 1s ease-in-out; -webkit-transition: max-height 1s ease-in-out; -moz-transition: max-height 1s ease-in-out; -o-transition: max-height 1s ease-in-out;
		
	}
	#article {
		padding-left: 0;
		width: 100%;
	}
}

@media screen and (max-width: 840px) {
	#footer .wrapper span {
		display: block;
		margin: 0;
	}
}

@media screen and (max-width: 600px) {
	form:not(.steps) .responsiverow { margin: 0.7em 0; }
	form .responsiverow > * { display: block; }
	form label.responsive {
		text-align: left;
		min-width: 0; width: 100%;
	}
	form input.responsive, form select.responsive { width: 100%; }
	form .posneg > * {
		display: block;
		margin: 0;
		width: 100%;
	}
	form .posneg > *:first-child { margin-bottom: 1em; }
}

@media screen and (max-width: 520px) {
	form .noUi-value-sub { display: none; }
}