/*
	Theme Name: V1
	Description: Standard Template Framework
	Author: Albert Leidinger
	Author URI: http://www.graphikschmiede.at/
	Version: 0.2, December 2015

*/

/* ----------------------------------------------------------------------------------------- BASIC FUNCTIONALITY/DEFAULTS */

/* Make html a table so div#body-cell is a table-cell for working horizontal/vertical orientation */
html {
																xdisplay:					table;					/* not working in Safari 8.0.8 and lower */
																height:						100%;					/* important because html is defined as table (see above) so it would only use height as needed */
																width:						100%;					/* important because depending on few content and small font-size it can happen the table does consume less width */
																font-size:					16px;					/* define minimum root-em (rem) */
}

/* Make body a row so div#body-cell is a table-cell for working horizontal/vertical orientation */
body {
																display:					table-row;
}

/* Make div#body-cell a table-cell for working horizontal/vertical orientation */
#body-cell {
																display:					table-cell;
}


/* By default positions of descendants of these elements should be calculated relative these element */
#sheet,
header,
nav,
main,
section,
footer,
div[lang],
.slider-mask li {
																position:					relative;
}

.mail-block {
margin-top: -1rem;
}
.copy-block {
width: 10rem;
}

/* .picture-mark is an anchor containing the logo as background. set it to inline-block so it's size can be set. */
.picture-mark {
																display:					inline-block;
																
																background:					url('img/logo.gif');
																background-image:			url('img/logo.svg'), none;
																
																background-size:			contain;
																background-repeat:			no-repeat;
																background-position:		center center;
}


/* Hide hr separating header, language navigation, primary navigation, main content and footer */
#sheet hr {
																display:					none;
}

/* Hide heading before language navigation and primary navigation */
label[for="language"],
label[for="menu"] {
																display:					none;
}

/* Hide radio buttons for selecting language, page or menu */
.lang-input,
.menu-input,
input[name=page-selector],
input[name=menu-selector],
input.form-selector,
.sub-input,
.slider-selector {
																display:					none;
}

header .site-name:after {
																content:					" |";
}

/* Don't use any spacing for lists in navigations at all */
nav ul {
																margin-top:					0;
																margin-bottom:				0;
																padding:					0;
}

/* Show list items in navigations by default inline an without bullet points */
nav li {
																display:					inline-block;
}

/* Don't show items in navigation as links by default */
nav li a,
header a {
																text-decoration:			none;
}


/* Give items in navigation some basic interactive reaction */
nav li a:hover ,
header a:hover {
																text-decoration:			underline;
}

/* When links are removed from navigation in multi-page mode, keep the pointer on these elements */
nav#primary li, 
nav#lang li,
nav#primary label,
nav#lang label {
																cursor:						pointer;
}

/* Hide list element for moving bar in navigations – manually activate it in upper section if needed */
nav li.bar {
																display:					none;
}

nav.breadcrumbs li:after {
																content:					" »\0000a0";
}
nav.breadcrumbs li:last-child:after {
																content:					none;
}

/* addresses are by default italic – that's no good default in our footer */
footer address {
																font-style:					normal;
}

/* by default the copy block is left to the following content (= contact-block with mail & tel) */
footer .copy-block {
																float:						left;
}

/* by default the content of the contact block (= mail & tel) is aligned on the right side */
footer .contact-block {
																text-align:					right;
}

/* by default paragraphs in contact block (= mail & tel) are printed in the same line with some spacing */
footer .contact-block p {
																display:					inline-block;
																
																margin-left:				3rem;
}

/* no spacing in paragraphs (= mail, tel, copyright notice) in the footer */
footer p {
																margin:						0;
}

/* by default make some space above the address-block and print it in bold */
footer .address-block {
																clear:						both;

																margin-top:					1rem;
																
																font-weight:				bold;
}

/* print a comma as seperator after organization name and locality in the address-block */
footer .address-block .org:after,
footer .address-block .street-address:after {
																content:					",";
}

/* print a comma as seperator after organization name and locality in the address-block */
footer .address-block .land:before {
																content:					", ";
}

label a {
																cursor:						pointer;
}

/* The slider mask is usually an ul, so we want to get rid of the margin and padding by default */
.slider-mask {
																margin:						0;
																padding:					0;
}
.slider-mask li {
																height:						100%;
																background-size:			cover;
																background-position:		center;
}



/* ----------------------------------------------------------------------------------------- BASIC FUNCTIONALITY/DEFAULTS */


/* padding shouldn't change the size by default */
* {
																box-sizing:					border-box;
																overflow:					auto;				/* testing – margins of children are not outside of parents elements --> seems insane otherwise */
}
li {
																overflow:					initial;			/* otherwise there are no bulletpoints 8( */
}
/* ----------------------------------------------------------------------------------------- BASIC FUNCTIONALITY/DEFAULTS */

/* Make html a table so div#body-cell is a table-cell for working horizontal/vertical orientation */
html {
																xdisplay:					table;					/* not working in Safari 8.0.8 and lower */
																height:						100%;					/* important because html is defined as table (see above) so it would only use height as needed */
																width:						100%;					/* important because depending on few content and small font-size it can happen the table does consume less width */
																font-size:					16px;					/* define minimum root-em (rem) */
}

/* Make body a row so div#body-cell is a table-cell for working horizontal/vertical orientation */
body {
																display:					table-row;
}

/* Make div#body-cell a table-cell for working horizontal/vertical orientation */
#body-cell {
																display:					table-cell;
}


/* By default positions of descendants of these elements should be calculated relative these element */
#sheet,
header,
nav,
main,
section,
footer,
div[lang],
.slider-mask li {
																position:					relative;
}

/* .picture-mark is an anchor containing the logo as background. set it to inline-block so it's size can be set. */
.picture-mark {
																display:					inline-block;
																
																background:					url('img/logo.gif');
																background-image:			url('img/logo.svg'), none;
																
																background-size:			contain;
																background-repeat:			no-repeat;
																background-position:		center center;
}


/* Hide hr separating header, language navigation, primary navigation, main content and footer */
#sheet hr {
																display:					none;
}

/* Hide heading before language navigation and primary navigation */
label[for="language"],
label[for="menu"] {
																display:					none;
}

/* Hide radio buttons for selecting language, page or menu */
.lang-input,
.menu-input,
input[name=page-selector],
input[name=menu-selector],
input.form-selector,
.sub-input,
.slider-selector {
																display:					none;
}

header .site-name:after {
																content:					" |";
}

/* Don't use any spacing for lists in navigations at all */
nav ul {
																margin-top:					0;
																margin-bottom:				0;
																padding:					0;
}

/* Show list items in navigations by default inline an without bullet points */
nav li {
																display:					inline-block;
}

/* Don't show items in navigation as links by default */
nav li a,
header a {
																text-decoration:			none;
}


/* Give items in navigation some basic interactive reaction */
nav li a:hover ,
header a:hover {
																text-decoration:			underline;
}

/* When links are removed from navigation in multi-page mode, keep the pointer on these elements */
nav#primary li, 
nav#lang li,
nav#primary label,
nav#lang label {
																cursor:						pointer;
}

/* Hide list element for moving bar in navigations – manually activate it in upper section if needed */
nav li.bar {
																display:					none;
}

nav.breadcrumbs li:after {
																content:					" »\0000a0";
}
nav.breadcrumbs li:last-child:after {
																content:					none;
}

/* addresses are by default italic – that's no good default in our footer */
footer address {
																font-style:					normal;
}

/* by default the copy block is left to the following content (= contact-block with mail & tel) */
footer .copy-block {
																float:						left;
}

/* by default the content of the contact block (= mail & tel) is aligned on the right side */
footer .contact-block {
																text-align:					right;
}

/* by default paragraphs in contact block (= mail & tel) are printed in the same line with some spacing */
footer .contact-block p {
																display:					inline-block;
																
																margin-left:				3rem;
}

/* no spacing in paragraphs (= mail, tel, copyright notice) in the footer */
footer p {
																margin:						0;
}

/* by default make some space above the address-block and print it in bold */
footer .address-block {
																clear:						both;

																margin-top:					1rem;
																
																font-weight:				bold;
}

/* print a comma as seperator after organization name and locality in the address-block */
footer .address-block .org:after,
footer .address-block .street-address:after {
																content:					",";
}

/* print a comma as seperator after organization name and locality in the address-block */
footer .address-block .land:before {
																content:					", ";
}

label a {
																cursor:						pointer;
}

/* The slider mask is usually an ul, so we want to get rid of the margin and padding by default */
.slider-mask {
																margin:						0;
																padding:					0;
}
.slider-mask li {
																height:						100%;
																background-size:			cover;
																background-position:		center;
}



/* ----------------------------------------------------------------------------------------- BASIC FUNCTIONALITY/DEFAULTS */


/* padding shouldn't change the size by default */
* {
																box-sizing:					border-box;
																overflow:					auto;				/* testing – margins of children are not outside of parents elements --> seems insane otherwise */
}
li {
																overflow:					initial;			/* otherwise there are no bulletpoints 8( */
}
/* ----------------------------------------------------------------------------------------- LANGUAGE/PAGE SLIDER */

/* Initialise mask = parent-element of sliders */

html.multi-page main,
html.multi-page .frame,
.slider-mask {
																overflow-x:					hidden;										/* 	not only necessary for clipping inactive language sliders left and 
																																			right of the active one. It also gives frame the height of the active slider.
																																			why? dunno */
																
}


/* place all language sliders above each other and set the transitions */
html.multi-page main > section,
html.multi-page .frame > div[lang],
.slider-mask li {
																xposition:					relative;
																float:						left;
																
																width:						100%;
																max-height:					0;
																
																margin-right:				-100%;
																
																transition: 				1s transform, 1s opacity, 2s max-height;																	
}



/* move the sliders from above each other to beside each other in a row  */
html.multi-page .frame > div[lang]:nth-child(2),
html.multi-page main > section:nth-child(2),
.slider-mask li:nth-child(2) 	{				left:						100%;				}
html.multi-page .frame > div[lang]:nth-child(3),
html.multi-page main > section:nth-child(3),
.slider-mask li:nth-child(3) 	 {				left:						200%;				}
html.multi-page .frame > div[lang]:nth-child(4),
html.multi-page main > section:nth-child(4),
.slider-mask li:nth-child(4) 	 {				left:						300%;				}
html.multi-page .frame > div[lang]:nth-child(5),
html.multi-page main > section:nth-child(5) 	 {				left:						400%;				}
html.multi-page .frame > div[lang]:nth-child(6),
html.multi-page main > section:nth-child(6) 	 {				left:						500%;				}
html.multi-page .frame > div[lang]:nth-child(7),
html.multi-page main > section:nth-child(7) 	 {				left:						600%;				}
html.multi-page .frame > div[lang]:nth-child(8),
html.multi-page main > section:nth-child(8) 	 {				left:						700%;				}
html.multi-page .frame > div[lang]:nth-child(9),
html.multi-page main > section:nth-child(9) 	 {				left:						800%;				}
html.multi-page .frame > div[lang]:nth-child(10),
html.multi-page main > section:nth-child(10) 	 {				left:						900%;				}
html.multi-page .frame > div[lang]:nth-child(11),
html.multi-page main > section:nth-child(11) 	 {				left:						1000%;				}
html.multi-page .frame > div[lang]:nth-child(12),
html.multi-page main > section:nth-child(12) 	 {				left:						1100%;				}
html.multi-page .frame > div[lang]:nth-child(13),
html.multi-page main > section:nth-child(13) 	 {				left:						1200%;				}
html.multi-page .frame > div[lang]:nth-child(14),
html.multi-page main > section:nth-child(14) 	 {				left:						1300%;				}
html.multi-page .frame > div[lang]:nth-child(15),
html.multi-page main > section:nth-child(15) 	 {				left:						1400%;				}
html.multi-page .frame > div[lang]:nth-child(16),
html.multi-page main > section:nth-child(16) 	 {				left:						1500%;				}
html.multi-page .frame > div[lang]:nth-child(17),
html.multi-page main > section:nth-child(17) 	 {				left:						1600%;				}
html.multi-page .frame > div[lang]:nth-child(18),
html.multi-page main > section:nth-child(18) 	 {				left:						1700%;				}
html.multi-page .frame > div[lang]:nth-child(19),
html.multi-page main > section:nth-child(19) 	 {				left:						1800%;				}
html.multi-page .frame > div[lang]:nth-child(20),
html.multi-page main > section:nth-child(20) 	 {				left:						1900%;				}
html.multi-page .frame > div[lang]:nth-child(21),
html.multi-page main > section:nth-child(21) 	 {				left:						2000%;				}
html.multi-page .frame > div[lang]:nth-child(22),
html.multi-page main > section:nth-child(22) 	 {				left:						2100%;				}
html.multi-page .frame > div[lang]:nth-child(23),
html.multi-page main > section:nth-child(23) 	 {				left:						2200%;				}
html.multi-page .frame > div[lang]:nth-child(24),
html.multi-page main > section:nth-child(24) 	 {				left:						2300%;				}



/* move all sliders to left depending on choosen language  */
html.multi-page #lang-2:checked ~ * .frame > div[lang],
html.multi-page input[name="page-selector"]:nth-child(2):checked ~ * main > section,
input.slider-selector:nth-child(2):checked ~ .slider-mask li {
																transform:					translate3d(-100%,0,0);
																-ms-transform:				translate(-100%,0);
}
html.multi-page #lang-3:checked ~ * .frame > div[lang],
html.multi-page input[name="page-selector"]:nth-child(3):checked ~ * main > section,
input.slider-selector:nth-child(3):checked ~ .slider-mask li {
																transform:					translate3d(-200%,0,0);
																-ms-transform:				translate(-200%,0);
}
html.multi-page #lang-4:checked ~ * .frame > div[lang],
html.multi-page input[name="page-selector"]:nth-child(4):checked ~ * main > section,
input.slider-selector:nth-child(4):checked ~ .slider-mask li {
																transform:					translate3d(-300%,0,0);
																-ms-transform:				translate(-300%,0);
}
html.multi-page #lang-5:checked ~ * .frame > div[lang],
html.multi-page input[name="page-selector"]:nth-child(5):checked ~ * main > section {
																transform:					translate3d(-400%,0,0);
																-ms-transform:				translate(-400%,0);
}
html.multi-page #lang-6:checked ~ * .frame > div[lang],
html.multi-page input[name="page-selector"]:nth-child(6):checked ~ * main > section {
																transform:					translate3d(-500%,0,0);
																-ms-transform:				translate(-500%,0);
}
html.multi-page #lang-7:checked ~ * .frame > div[lang],
html.multi-page input[name="page-selector"]:nth-child(7):checked ~ * main > section {
																transform:					translate3d(-600%,0,0);
																-ms-transform:				translate(-600%,0);
}
html.multi-page #lang-8:checked ~ * .frame > div[lang],
html.multi-page input[name="page-selector"]:nth-child(8):checked ~ * main > section {
																transform:					translate3d(-700%,0,0);
																-ms-transform:				translate(-700%,0);
}
html.multi-page #lang-9:checked ~ * .frame > div[lang],
html.multi-page input[name="page-selector"]:nth-child(9):checked ~ * main > section {
																transform:					translate3d(-800%,0,0);
																-ms-transform:				translate(-800%,0);
}
html.multi-page #lang-10:checked ~ * .frame > div[lang],
html.multi-page input[name="page-selector"]:nth-child(10):checked ~ * main > section {
																transform:					translate3d(-900%,0,0);
																-ms-transform:				translate(-900%,0);
}
html.multi-page #lang-11:checked ~ * .frame > div[lang],
html.multi-page input[name="page-selector"]:nth-child(11):checked ~ * main > section {
																transform:					translate3d(-1000%,0,0);
																-ms-transform:				translate(-1000%,0);
}
html.multi-page #lang-12:checked ~ * .frame > div[lang],
html.multi-page input[name="page-selector"]:nth-child(12):checked ~ * main > section {
																transform:					translate3d(-1100%,0,0);
																-ms-transform:				translate(-1100%,0);
}
html.multi-page #lang-13:checked ~ * .frame > div[lang],
html.multi-page input[name="page-selector"]:nth-child(13):checked ~ * main > section {
																transform:					translate3d(-1200%,0,0);
																-ms-transform:				translate(-1200%,0);
}
html.multi-page #lang-14:checked ~ * .frame > div[lang],
html.multi-page input[name="page-selector"]:nth-child(14):checked ~ * main > section {
																transform:					translate3d(-1300%,0,0);
																-ms-transform:				translate(-1300%,0);
}
html.multi-page #lang-15:checked ~ * .frame > div[lang],
html.multi-page input[name="page-selector"]:nth-child(15):checked ~ * main > section {
																transform:					translate3d(-1400%,0,0);
																-ms-transform:				translate(-1400%,0);
}
html.multi-page #lang-16:checked ~ * .frame > div[lang],
html.multi-page input[name="page-selector"]:nth-child(16):checked ~ * main > section {
																transform:					translate3d(-1500%,0,0);
																-ms-transform:				translate(-1500%,0);
}
html.multi-page #lang-17:checked ~ * .frame > div[lang],
html.multi-page input[name="page-selector"]:nth-child(17):checked ~ * main > section {
																transform:					translate3d(-1600%,0,0);
																-ms-transform:				translate(-1600%,0);
}
html.multi-page #lang-18:checked ~ * .frame > div[lang],
html.multi-page input[name="page-selector"]:nth-child(18):checked ~ * main > section {
																transform:					translate3d(-1700%,0,0);
																-ms-transform:				translate(-1700%,0);
}
html.multi-page #lang-19:checked ~ * .frame > div[lang],
html.multi-page input[name="page-selector"]:nth-child(19):checked ~ * main > section {
																transform:					translate3d(-1800%,0,0);
																-ms-transform:				translate(-1800%,0);
}

html.multi-page #lang-1:checked ~ * .frame > div[lang]:nth-child(1),
html.multi-page #lang-2:checked ~ * .frame > div[lang]:nth-child(2),
html.multi-page #lang-3:checked ~ * .frame > div[lang]:nth-child(3),
html.multi-page input[name="page-selector"]:nth-child(1):checked ~ * main > section:nth-child(1),
html.multi-page input[name="page-selector"]:nth-child(2):checked ~ * main > section:nth-child(2),
html.multi-page input[name="page-selector"]:nth-child(3):checked ~ * main > section:nth-child(3),
html.multi-page input[name="page-selector"]:nth-child(4):checked ~ * main > section:nth-child(4),
html.multi-page input[name="page-selector"]:nth-child(5):checked ~ * main > section:nth-child(5),
html.multi-page input[name="page-selector"]:nth-child(6):checked ~ * main > section:nth-child(6),
html.multi-page input[name="page-selector"]:nth-child(7):checked ~ * main > section:nth-child(7),
html.multi-page input[name="page-selector"]:nth-child(8):checked ~ * main > section:nth-child(8),
html.multi-page input[name="page-selector"]:nth-child(9):checked ~ * main > section:nth-child(9),
html.multi-page input[name="page-selector"]:nth-child(10):checked ~ * main > section:nth-child(10),
html.multi-page input[name="page-selector"]:nth-child(11):checked ~ * main > section:nth-child(11),
html.multi-page input[name="page-selector"]:nth-child(12):checked ~ * main > section:nth-child(12),
html.multi-page input[name="page-selector"]:nth-child(13):checked ~ * main > section:nth-child(13),
html.multi-page input[name="page-selector"]:nth-child(14):checked ~ * main > section:nth-child(14),
html.multi-page input[name="page-selector"]:nth-child(15):checked ~ * main > section:nth-child(15),
html.multi-page input[name="page-selector"]:nth-child(16):checked ~ * main > section:nth-child(16),
html.multi-page input[name="page-selector"]:nth-child(17):checked ~ * main > section:nth-child(17),
html.multi-page input[name="page-selector"]:nth-child(18):checked ~ * main > section:nth-child(18),
html.multi-page input[name="page-selector"]:nth-child(19):checked ~ * main > section:nth-child(19),
html.multi-page input[name="page-selector"]:nth-child(20):checked ~ * main > section:nth-child(20),
xinput.slider-selector:nth-child(1):checked ~ .slider-mask li:nth-child(1) {
																max-height:					200rem;
}

/* ----------------------------------------------------------------------------------------- BASIC FUNCTIONALITY/DEFAULTS */



@font-face {
  font-family: 'Brotschrift';
  src: url('fonts/Quicksand-Regular.hinted.eot'); /* IE9 Compat Modes */
  src: url('fonts/Quicksand-Regular.hinted.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
	   url('fonts/Quicksand-Regular.hinted.woff') format('woff'), /* Modern Browsers */
	   url('fonts/Quicksand-Regular.hinted.ttf')  format('truetype'), /* Safari, Android, iOS */
	   url('fonts/Quicksand-Regular.hinted.svg#HelveticaNeue') format('svg'); /* Legacy iOS */

  font-style:   normal;
  font-weight:  normal;
}

@font-face {
  font-family: 'Brotschrift';
  src: url('fonts/Quicksand-Bold.hinted.eot'); /* IE9 Compat Modes */
  src: url('fonts/Quicksand-Bold.hinted.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
	   url('fonts/Quicksand-Bold.hinted.woff') format('woff'), /* Modern Browsers */
	   url('fonts/Quicksand-Bold.hinted.ttf')  format('truetype'), /* Safari, Android, iOS */
	   url('fonts/Quicksand-Bold.hinted.svg#HelveticaNeue') format('svg'); /* Legacy iOS */

  font-style:   normal;
  font-weight:  bold;
}

:link,
:visited {
																color:						white;
}

nav#primary {
																text-transform:				uppercase;
																font-weight:				bold;
}

nav#lang,
footer {
																font-size:					0.8rem;
}

html {
																font-size:					19px;
}



 
/* 
																@media only screen and (min-width:940px), (min-height:765px) { html {
    																	font-size:			16.1px;
}}																@media only screen and (min-width:945px), (min-height:770px) { html {
    																	font-size:			16.2px;
}}																@media only screen and (min-width:950px), (min-height:775px) { html {
    																	font-size:			16.3px;
}}																@media only screen and (min-width:955px), (min-height:780px) { html {
    																	font-size:			16.4px;
}}																@media only screen and (min-width:960px), (min-height:785px) { html {
    																	font-size:			16.5px;
}}																@media only screen and (min-width:965px), (min-height:790px) { html {
    																	font-size:			16.6px;
}}																@media only screen and (min-width:970px), (min-height:795px) { html {
    																	font-size:			16.7px;
}}																@media only screen and (min-width:975px), (min-height:800px) { html {
    																	font-size:			16.8px;
}}																@media only screen and (min-width:980px), (min-height:805px) { html {
    																	font-size:			16.9px;
}}																@media only screen and (min-width:985px), (min-height:810px) { html {
    																	font-size:			17.0px;
}}																@media only screen and (min-width:990px), (min-height:815px) { html {
    																	font-size:			17.1px;
}}																@media only screen and (min-width:995px), (min-height:820px) { html {
    																	font-size:			17.2px;
}}																@media only screen and (min-width:1000px), (min-height:825px) { html {
    																	font-size:			17.3px;
}}																@media only screen and (min-width:1005px), (min-height:830px) { html {
    																	font-size:			17.4px;
}}																@media only screen and (min-width:1010px), (min-height:835px) { html {
    																	font-size:			17.5px;
}}																@media only screen and (min-width:1015px), (min-height:840px) { html {
    																	font-size:			17.6px;
}}																@media only screen and (min-width:1020px), (min-height:845px) { html {
    																	font-size:			17.7px;
}}																@media only screen and (min-width:1025px), (min-height:850px) { html {
    																	font-size:			17.8px;
}}																@media only screen and (min-width:1030px), (min-height:855px) { html {
    																	font-size:			17.9px;
}}																@media only screen and (min-width:1035px), (min-height:860px) { html {
    																	font-size:			18.0px;
}}																@media only screen and (min-width:1040px), (min-height:865px) { html {
    																	font-size:			18.1px;
}}																@media only screen and (min-width:1055px), (min-height:870px) { html {
    																	font-size:			18.2px;
}}																@media only screen and (min-width:1060px), (min-height:875px) { html {
    																	font-size:			17.3px;
}}																@media only screen and (min-width:1065px), (min-height:880px) { html {
    																	font-size:			18.4px;
}}																@media only screen and (min-width:1070px), (min-height:885px) { html {
    																	font-size:			18.5px;
}}																@media only screen and (min-width:1075px), (min-height:890px) { html {
    																	font-size:			18.6px;
}}																@media only screen and (min-width:1080px), (min-height:895px) { html {
    																	font-size:			18.7px;
}}																@media only screen and (min-width:1085px), (min-height:900px) { html {
    																	font-size:			18.8px;
}}																@media only screen and (min-width:1090px), (min-height:905px) { html {
    																	font-size:			18.9px;
}}																@media only screen and (min-width:1095px), (min-height:910px) { html {
    																	font-size:			19.0px;
}}
 */


																@media only screen and (max-width:1190px), (max-height:905px) { html {
    																	font-size:			18.9px;
}} 																@media only screen and (max-width:1185px), (max-height:900px) { html {
    																	font-size:			18.8px;
}}																@media only screen and (max-width:1180px), (max-height:895px) { html {
    																	font-size:			18.7px;
}} 																@media only screen and (max-width:1175px), (max-height:890px) { html {
    																	font-size:			18.6px;
}}																@media only screen and (max-width:1170px), (max-height:885px) { html {
    																	font-size:			18.5px;
}} 																@media only screen and (max-width:1165px), (max-height:880px) { html {
    																	font-size:			18.4px;
}}																@media only screen and (max-width:1160px), (max-height:875px) { html {
    																	font-size:			18.3px;
}} 																@media only screen and (max-width:1155px), (max-height:870px) { html {
    																	font-size:			18.2px;
}}																@media only screen and (max-width:1150px), (max-height:865px) { html {
    																	font-size:			18.1px;
}} 																@media only screen and (max-width:1145px), (max-height:860px) { html {
    																	font-size:			18.0px;
}}																@media only screen and (max-width:1140px), (max-height:855px) { html {
    																	font-size:			17.9px;
}} 																@media only screen and (max-width:1135px), (max-height:850px) { html {
    																	font-size:			17.8px;
}}																@media only screen and (max-width:1130px), (max-height:845px) { html {
    																	font-size:			17.7px;
}} 																@media only screen and (max-width:1125px), (max-height:840px) { html {
    																	font-size:			17.6px;
}}																@media only screen and (max-width:1120px), (max-height:835px) { html {
    																	font-size:			17.5px;
}} 																@media only screen and (max-width:1115px), (max-height:830px) { html {
    																	font-size:			17.4px;
}}																@media only screen and (max-width:1110px), (max-height:825px) { html {
    																	font-size:			17.3px;
}} 																@media only screen and (max-width:1105px), (max-height:820px) { html {
    																	font-size:			17.2px;
}}																@media only screen and (max-width:1100px), (max-height:815px) { html {
    																	font-size:			17.1px;
}} 																@media only screen and (max-width:1095px), (max-height:810px) { html {
    																	font-size:			17.0px;
}}																@media only screen and (max-width:1090px), (max-height:805px) { html {
    																	font-size:			16.9px;
}} 																@media only screen and (max-width:1085px), (max-height:800px) { html {
    																	font-size:			16.8px;
}}																@media only screen and (max-width:1080px), (max-height:795px) { html {
    																	font-size:			16.7px;
}} 																@media only screen and (max-width:1075px), (max-height:790px) { html {
    																	font-size:			16.6px;
}}																@media only screen and (max-width:1070px), (max-height:785px) { html {
    																	font-size:			16.5px;
}} 																@media only screen and (max-width:1065px), (max-height:780px) { html {
    																	font-size:			16.4px;
}}																@media only screen and (max-width:1060px), (max-height:775px) { html {
    																	font-size:			16.3px;
}} 																@media only screen and (max-width:1055px), (max-height:770px) { html {
    																	font-size:			16.2px;
}}																@media only screen and (max-width:1050px), (max-height:765px) { html {
    																	font-size:			16.1px;
}} 																@media only screen and (max-width:1045px), (max-height:760px) { html {
    																	font-size:			16.0px;
}}


																@media only screen and (max-width:1040px), (max-height:755px) { html {
    																	font-size:			15.9px;
}} 																@media only screen and (max-width:1035px), (max-height:750px) { html {
    																	font-size:			15.8px;
}}																@media only screen and (max-width:1030px), (max-height:745px) { html {
    																	font-size:			15.7px;
}} 																@media only screen and (max-width:1025px), (max-height:740px) { html {
    																	font-size:			15.6px;
}}																@media only screen and (max-width:1020px), (max-height:735px) { html {
    																	font-size:			15.5px;
}} 																@media only screen and (max-width:1015px), (max-height:730px) { html {
    																	font-size:			15.4px;
}}																@media only screen and (max-width:1010px), (max-height:725px) { html {
    																	font-size:			15.3px;
}} 																@media only screen and (max-width:1005px), (max-height:720px) { html {
    																	font-size:			15.2px;
}}																@media only screen and (max-width:1000px), (max-height:715px) { html {
    																	font-size:			15.1px;
}} 																@media only screen and (max-width:995px), (max-height:710px) { html {
    																	font-size:			15.0px;
}}																@media only screen and (max-width:990px), (max-height:705px) { html {
    																	font-size:			14.9px;
}} 																@media only screen and (max-width:985px), (max-height:700px) { html {
    																	font-size:			14.8px;
}}																@media only screen and (max-width:980px), (max-height:695px) { html {
    																	font-size:			14.7px;
}} 																@media only screen and (max-width:975px), (max-height:690px) { html {
    																	font-size:			14.6px;
}}																@media only screen and (max-width:970px), (max-height:685px) { html {
    																	font-size:			14.5px;
}} 																@media only screen and (max-width:965px), (max-height:680px) { html {
    																	font-size:			14.4px;
}}																@media only screen and (max-width:960px), (max-height:675px) { html {
    																	font-size:			14.3px;
}} 																@media only screen and (max-width:955px), (max-height:670px) { html {
    																	font-size:			14.2px;
}}																@media only screen and (max-width:950px), (max-height:665px) { html {
    																	font-size:			14.1px;
}} 																@media only screen and (max-width:945px), (max-height:660px) { html {
    																	font-size:			14.0px;
}}																@media only screen and (max-width:940px), (max-height:655px) { html {
    																	font-size:			13.9px;
}} 																@media only screen and (max-width:935px), (max-height:650px) { html {
    																	font-size:			13.8px;
}}																@media only screen and (max-width:930px), (max-height:645px) { html {
    																	font-size:			13.7px;
}} 																@media only screen and (max-width:925px), (max-height:640px) { html {
    																	font-size:			13.6px;
}}																@media only screen and (max-width:920px), (max-height:635px) { html {
    																	font-size:			13.5px;
}} 																@media only screen and (max-width:915px), (max-height:630px) { html {
    																	font-size:			13.4px;
}}																@media only screen and (max-width:910px), (max-height:625px) { html {
    																	font-size:			13.3px;
}} 																@media only screen and (max-width:905px), (max-height:620px) { html {
    																	font-size:			13.2px;
}}																@media only screen and (max-width:900px), (max-height:615px) { html {
    																	font-size:			13.1px;
}} 																@media only screen and (max-width:895px), (max-height:610px) { html {
    																	font-size:			13.0px;
}}																@media only screen and (max-width:890px), (max-height:605px) { html {
    																	font-size:			12.9px;
}} 																@media only screen and (max-width:885px), (max-height:600px) { html {
    																	font-size:			12.8px;
}}																@media only screen and (max-width:880px), (max-height:595px) { html {
    																	font-size:			12.7px;
}} 																@media only screen and (max-width:875px), (max-height:590px) { html {
    																	font-size:			12.6px;
}}																@media only screen and (max-width:870px), (max-height:585px) { html {
    																	font-size:			12.5px;
}} 																@media only screen and (max-width:865px), (max-height:580px) { html {
    																	font-size:			12.4px;
}}																@media only screen and (max-width:860px), (max-height:575px) { html {
    																	font-size:			12.3px;
}} 																@media only screen and (max-width:855px), (max-height:570px) { html {
    																	font-size:			12.2px;
}}																@media only screen and (max-width:850px), (max-height:565px) { html {
    																	font-size:			12.1px;
}} 																@media only screen and (max-width:845px), (max-height:560px) { html {
    																	font-size:			12.0px;
}}
label[for=menu] {
																position:					fixed;
																right:						2rem;
																top:						0rem;
																
																z-index:					110;
}


label[for=menu]:after {
																content:					'\2261';
																color:						white;
																font-size:					4rem;
																font-family:				Verdana;
}


@media only screen and (max-width:550px) { 
label[for=menu] {
    														display:						block;
}
nav#primary {
															
}
section header {
															display:						none;
}
#sheet > header {
															display:						block;
															position:						fixed;
}}

/* Standard Sprach-Auswahl ausblenden  */

#sheet > nav#lang {
															display:						none;
}

/* Sprach-Auswahl der einzlnen Seiten */

section nav#lang {
    														position:						absolute;
    														top:							1rem;
    														
    														display:						none;

}

/* Position der Sprach-Auswahl der einzelnen Seiten  */

#section-0 nav#lang {
															right:							18rem;
}
#section-0-0 nav#lang {
															right:							14rem;
}
#section-0-1 nav#lang {
															right:							10rem;
}
#section-0-2 nav#lang {
															right:							6rem;
}
#section-0-3 nav#lang {
															right:							2rem;
}

/* Containter der Navigation */

@media only screen and (min-width:551px) { 

nav#primary {
															height:							0;
}


/* Breite des Navigations-Tabs */

nav#primary li li,
nav#primary ul div {
															width:							4rem;
}

/* Korrigiere Position der inneren Aufzählung, da der Aufzählungspunkt für "Home" technisch keine Breite hat */

nav#primary ul ul {
															margin-left:					4rem;
}

/* Formatierung der Schaltflächen */

nav#primary ul div {
															position:						fixed;
															top:							0;
															
															height:							120%; /* not only 100%! iOS devices move fixed elements when address bar shrinks. so they stretch over the bottom end */
															
															z-index:						100;
															
															transition:						left 1s, margin-left 1s, transform 1s;
}

/* Drehen und Ausrichten der Links */

nav#primary ul a {
															display:						block;
															
															position:						absolute;
															top:							2rem;
															right:							2.7rem;
															
															width:							40rem;
															
															text-align:						right;
															
															transform-origin:				right top;
															transform:						rotate(-90deg);

}




/* Home-Tag bei Aufruf der Startseite nicht anzeigen  */

div[lang] > ul > li > div {
															left:							0rem;
															transform:						translate3d(0,0,0);
															-ms-transform:					translate(0,0);
															
}
input[name="page-selector"]:nth-child(1):checked ~ * div[lang] > ul > li > div {
															transform:						translate3d(-100%,0,0);
															-ms-transform:					translate(-100%,0);
}

/* 2. Tab nur bei Aufruf der Startseite nach rechts verschieben */

ul ul li:nth-child(1) div {
															left:							0;
															transform:						translate3d(100%,0,0);
															-ms-transform:					translate(100%,0);
}
input[name="page-selector"]:nth-child(1):checked ~ * ul ul li:nth-child(1) div {
															xright:							12rem;
															transform:						translate3d(-400%,0,0);
															-ms-transform:					translate(-400%,0);
															margin-left:					100%;
															
}

/* 3. Tab nur bei Aufruf von Start- und erster Unterseite nach rechts verschieben  */

ul ul li:nth-child(2) div {
															left:							0;
															transform:						translate3d(200%,0,0);
															-ms-transform:					translate(200%,0);
}
input[name="page-selector"]:nth-child(1):checked ~ * ul ul li:nth-child(2) div,
input[name="page-selector"]:nth-child(2):checked ~ * ul ul li:nth-child(2) div {
															xright:							8rem;
															transform:						translate3d(-300%,0,0);
															-ms-transform:					translate(-300%,0);
															margin-left:					100%;
}

/* 4. Tab ... */

ul ul li:nth-child(3) div {
															left:							0;
															transform:						translate3d(300%,0,0);
															-ms-transform:					translate(300%,0);
}
input[name="page-selector"]:nth-child(1):checked ~ * ul ul li:nth-child(3) div,
input[name="page-selector"]:nth-child(2):checked ~ * ul ul li:nth-child(3) div,
input[name="page-selector"]:nth-child(3):checked ~ * ul ul li:nth-child(3) div {
															xright:							4rem;
															transform:						translate3d(-200%,0,0);
															-ms-transform:					translate(-200%,0);
															margin-left:					100%;
}

/* 5. Tab ... */

ul ul li:nth-child(4) div {
															left:							0rem;
															xleft:							0;
															transform:						translate3d(400%,0,0);
															-ms-transform:					translate(400%,0);
}
input[name="page-selector"]:nth-child(1):checked ~ * ul ul li:nth-child(4) div,
input[name="page-selector"]:nth-child(2):checked ~ * ul ul li:nth-child(4) div,
input[name="page-selector"]:nth-child(3):checked ~ * ul ul li:nth-child(4) div,
input[name="page-selector"]:nth-child(4):checked ~ * ul ul li:nth-child(4) div {
															xright:							0rem;
															xleft:							-4rem;
															transform:						translate3d(-100%,0,0);
															-ms-transform:					translate(-100%,0);
															margin-left:					100%;
}}


@media only screen and (max-width:550px) { 

nav#primary {
															z-index:						1000000;
															position:						fixed;
															bottom:							0;
															width:							100%;
															
															transition:						transform 1s;
															
															transform:						translate3d( 0, 100%, 0);
															-ms-transform:					translate(0,100%);
}

nav#primary li {
															display:						block;
}

nav#primary xlabel,
nav#primary a {
															display:						block;
															height:							4rem;
															padding-top:					1.5rem;
															padding-left:					2rem;
															padding-right:					2rem;
}

#menu:checked ~ #sheet nav#primary {
															transform:						translate3d( 0, 0, 0 );
															-ms-transform:					translate(0,0);
}

}



input#selector-0:checked ~ #sheet,
input#selector-0:checked ~ #sheet main {
														height:								100%;
														position:							static;
}

header .picture-mark {
    width: 6rem;
    height: 6rem;
}


main section {
														min-height:							100%;
}@media only screen and (max-width:550px) { 
main section {
														padding-top:						4rem;
}
main #section-0 {
														padding-top:						0;
}
}

main #section-0 {
														padding-left:						0rem;
														padding-right:						16rem;
														
														position:							static;
}

main #section-0-0 {
														padding-left:						8rem;
														padding-right:						12rem;
}

main #section-0-1 {
														padding-left:						12rem;
														padding-right:						8rem;
}

main #section-0-2 {
														padding-left:						16rem;
														padding-right:						4rem;
}

main #section-0-3 {
														padding-left:						20rem;
														padding-right:						0rem;
}
@media only screen and (max-width:550px) { 
main #section-0,
main #section-0-0,
main #section-0-1,
main #section-0-2,
main #section-0-3 {
    													padding-left:						0;
    													padding-right:						0;
}}

main section div[lang],
header div[lang] {
														padding-left:						3rem;
														padding-right:						3rem;
														xpadding-bottom:						5rem;
}


div.image {
    													position:							relative;
    													
    													height:								15rem;
    													xbackground:							white;
    													
    													background-size:					cover;
    													background-position:				center;
    													
    													margin-bottom:						2rem;

}

div.image:before {
														content:							' ';
														display:							block;
														position:							absolute;
														width:								100%;
														height:								5rem;
														
													
}@media only screen and (max-width:550px) { 
div.image:before {
    													display:							none;
}}


main h1 {
														display:							none;
}

main h3 {
														float:								left;
														
														xposition:							absolute;
														
														width:								50%;
														width:								22rem\9;
														xwidth:								18.5rem;
														padding-right:						2rem;
														margin-bottom:						3rem;
}
														@media only screen and (min-width:1450px) { main h3 {
    													width:								24.5rem;
}} 														@media only screen and (max-width:845px) { main h3 {
    													float:								none;
    													width:								100%;
}}





#section-0 {
														height:								100%;
}

#section-0 header {
														position:							absolute;
}

#section-0 header .picture-mark {
    width: 10rem;
    height: 10rem;
}

#section-0 div.lazy {
														display:							none;
}

#section-0 > .frame {
														position:							relative;
														top:								40%;
														height:								60%;
														
														transition:							top 1s, height 1s;
}@media only screen and (max-height:550px) { 
#section-0 > .frame {
    													top:								30%;
    													height:								70%;
}}

#section-0 > .frame > div[lang] {
/* 														position:							absolute; */
/* 														top:								40%; */
/* 														padding-right:						20rem; */
														height:								100%;
}@media only screen and (max-width:550px) { 
#section-0 > .frame > div[lang] {
    													padding-right:						3rem;
}}

#section-0 .section-content {
														position:							static;
														height:								auto;
}

#section-0 h2 {
														border-bottom:						1px dotted white;
														
														padding-bottom:						.5rem;
														margin-bottom:						.5rem;
														
														transition:							font-size 1s, margin-top 1s;
														
}@media only screen and (max-width:550px) { 
#section-0 h2 {
    													line-height:						1.2;
}}@media only screen and (max-width:350px) { 
#section-0 h2 {
    													font-size:							1.3rem;
}}@media only screen and (min-width:1300px) { 
#section-0 h2 {
    													font-size:							2.4rem;
    													margin-top:							-1rem;
}
#section-0 p {
														font-size:							1.2rem;
}
}
@media only screen and (min-width:1550px) { 
#section-0 h2 {
    													font-size:							2.8rem;
/*     													margin-top:							-1.6rem; */
}
#section-0 p {
														font-size:							1.4rem;
}
}


#section-0 p {
														margin-top:							0;
														margin-left:						0;
														transition:							font-size 1s;
}
#section-0 footer {
														height:								100%;
														margin:								0;
}
#section-0 footer div[lang] {
														position:							absolute;
														bottom:								0;
														xpadding-right:						20rem;
														width:								100%;
														padding-bottom:						3rem;
}

.section-content p,
.section-content h4 {
														margin-left:						50%;
														margin-left:						22rem\9;
														xmargin-left:						18.5rem;
														margin-bottom:						3rem;
}
														@media only screen and (min-width:1500px) { .section-content p, .section-content h4 {
    													margin-left:						26.4rem;
}} 														@media only screen and (max-width:845px) { .section-content p, .section-content h4 {
    													margin-left:						0;
}}


														@media only screen and (min-width:1900px) { .section-content p {
    													column-count:						2;
    													column-gap:							3rem;
    													text-align:							justify;
}
#section-0 .section-content p {
														column-count:						1;
														text-align:							left;
}

}

.section-content h4 {
														text-transform:						uppercase;
														font-size:							0.9rem;
														
														xposition:							absolute;
														
														margin-left:						0;
														margin-top:							0;
														xclear:								both;
														float:								left;
														width:								50%;
														width:								22rem\9;
														clear:								both\9;
														xwidth:								18.5rem;
														padding-right:						2rem;
}
														@media only screen and (min-width:1450px) { .section-content h4 {
    													width:								24.5rem;
    													clear:								both;
}} 														@media only screen and (max-width:845px) { .section-content h4 {
    													float:								none;
    													width:								100%;
}}


.section-content h3 + p:after {
														content:							"";
														display:							block;
														clear:								both;
}
}

#section-0 p {
														margin-left:						0;
}

#section-0 > div.frame div[lang] {
/* 														z-index:							50; */
														xposition:							absolute;
														top:								0;
														height:								100%;
														xpadding-top:						40%;
}

#section-0 > div.frame div[lang] label {
														position:							absolute;
														bottom:								3rem;
														z-index:							100000;
}@media only screen and (max-width:360px) { 
#section-0 > div.frame div[lang] label {
    													display:							none;
}}

#section-0 .section-content {
														position:							relative;
														height:								100%;
}

#section-0 .section-content h2 {
/* 														position:							absolute; */
/* 														top:								40%; */
/* 														width:								100%; */
}

#section-0 .section-content h2 + p {
/* 														position:							relative; */
/* 														top:								40%; */
/* 														margin-top:							4rem; */
}

aside {
														xdisplay:							none;
														
													position:								fixed;
													left:									50%;
													top:									0;
													width:									50%;
													xheight:									70%;
													max-height:								100%;
													
													margin-left:							-25%;
													
													background:								white;
													
													xbottom:									100%;
													
													z-index:								2500000;
													
													transform:								translate3d( 6rem, -120%, 0);
													
													transition:								bottom 1s, transform 1s;
													
													padding:								2rem;
													
													box-shadow:								0 0 2rem black;
													
													-webkit-overflow-scrolling: touch;
														
}

@media only screen and (max-width:550px) { 
aside {
    												width:									80%; 
    												margin-left:							-40%;
    												transform:								translate3d( 0, -120%, 0 );
    												-ms-transform:							translate(0,-120%);
}
#form-selector-0:checked ~ #sheet aside#form-0,
#form-selector-1:checked ~ #sheet aside#form-1,
#form-selector-2:checked ~ #sheet aside#form-2,
#form-selector-3:checked ~ #sheet aside#form-3 {
													transform:								translate3d( 0, 0, 0 );
    												-ms-transform:							translate(0,0);

}}

footer label {
													cursor: pointer;
}
footer label:hover {
													text-decoration: underline;
}

@media only screen and (max-height:570px) {
aside {
													width:									100%;
													margin-left:							-50%;
}

}

@media only screen and (min-width:551px) {

input[name=page-selector]:nth-child(1):checked ~ * aside {
													transform:								translate3d( -8rem, -120%, 0 );
    												-ms-transform:							translate(-8rem,-120%);
}
input[name=page-selector]:nth-child(2):checked ~ * aside {
													transform:								translate3d( 0rem, -120%, 0 );
    												-ms-transform:							translate(0,-120%);
}
input[name=page-selector]:nth-child(3):checked ~ * aside {
													transform:								translate3d( 2rem, -120%, 0 );
    												-ms-transform:							translate(2rem,-120%);
}
input[name=page-selector]:nth-child(4):checked ~ * aside {
													transform:								translate3d( 6rem, -120%, 0 );
    												-ms-transform:							translate(6rem,-120%);
}
input[name=page-selector]:nth-child(5):checked ~ * aside {
													transform:								translate3d( 10rem, -120%, 0 );
    												-ms-transform:							translate(10rem,-120%);
}}



section > div.frame label {

													text-transform:							uppercase;
													border-top:								2px solid white;
													border-bottom:							2px solid white;
													
													cursor:									pointer;
													
													font-weight:							bold;

}														@media only screen and (min-width:1900px) { section > div.frame label {
														
}}

@media only screen and (min-width:551px) {

input[name=page-selector]:nth-child(1):checked ~ #form-selector-0:checked ~ #sheet aside#form-0,
input[name=page-selector]:nth-child(1):checked ~ #form-selector-1:checked ~ #sheet aside#form-1,
input[name=page-selector]:nth-child(1):checked ~ #form-selector-2:checked ~ #sheet aside#form-2,
input[name=page-selector]:nth-child(1):checked ~ #form-selector-3:checked ~ #sheet aside#form-3 {
													xdisplay:								block;
													xbottom:									70%;
													transform:								translate3d( -8rem, 0 , 0 );
    												-ms-transform:							translate(-8rem,0);
}
input[name=page-selector]:nth-child(2):checked ~ #form-selector-0:checked ~ #sheet aside#form-0,
input[name=page-selector]:nth-child(2):checked ~ #form-selector-1:checked ~ #sheet aside#form-1,
input[name=page-selector]:nth-child(2):checked ~ #form-selector-2:checked ~ #sheet aside#form-2,
input[name=page-selector]:nth-child(2):checked ~ #form-selector-3:checked ~ #sheet aside#form-3 {
													xdisplay:								block;
													xbottom:									70%;
													transform:								translate3d( 0rem, 0 , 0 );
    												-ms-transform:							translate(0,0);
}
input[name=page-selector]:nth-child(3):checked ~ #form-selector-0:checked ~ #sheet aside#form-0,
input[name=page-selector]:nth-child(3):checked ~ #form-selector-1:checked ~ #sheet aside#form-1,
input[name=page-selector]:nth-child(3):checked ~ #form-selector-2:checked ~ #sheet aside#form-2,
input[name=page-selector]:nth-child(3):checked ~ #form-selector-3:checked ~ #sheet aside#form-3 {
													xdisplay:								block;
													xbottom:									70%;
													transform:								translate3d( 2rem, 0 , 0 );
    												-ms-transform:							translate(2rem,0);
}
input[name=page-selector]:nth-child(4):checked ~ #form-selector-0:checked ~ #sheet aside#form-0,
input[name=page-selector]:nth-child(4):checked ~ #form-selector-1:checked ~ #sheet aside#form-1,
input[name=page-selector]:nth-child(4):checked ~ #form-selector-2:checked ~ #sheet aside#form-2,
input[name=page-selector]:nth-child(4):checked ~ #form-selector-3:checked ~ #sheet aside#form-3 {
													xdisplay:								block;
													xbottom:									70%;
													transform:								translate3d( 6rem, 0 , 0 );
    												-ms-transform:							translate(6rem,0);
}
input[name=page-selector]:nth-child(5):checked ~ #form-selector-0:checked ~ #sheet aside#form-0,
input[name=page-selector]:nth-child(5):checked ~ #form-selector-1:checked ~ #sheet aside#form-1,
input[name=page-selector]:nth-child(5):checked ~ #form-selector-2:checked ~ #sheet aside#form-2,
input[name=page-selector]:nth-child(5):checked ~ #form-selector-3:checked ~ #sheet aside#form-3 {
													xdisplay:								block;
													xbottom:									70%;
													transform:								translate3d( 10rem, 0 , 0 );
    												-ms-transform:							translate(10rem,0);
}}
aside {

}

aside#form-2 p,
aside#form-3 p {
text-transform: initial;
}
aside h2 {
	font-size: 1rem;
}
aside ul {
font-size: 0.8rem;
}
aside#form-2 a,
aside#form-3 a {
color: inherit;
text-decoration: underline;
}

.form-background {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: black;
    z-index: 100;
    opacity: 0;
    
    transition: opacity 1s;
}
#form-selector-0:checked ~ #sheet label#form-background-0,
#form-selector-1:checked ~ #sheet label#form-background-1,
#form-selector-2:checked ~ #sheet label#form-background-2,
#form-selector-3:checked ~ #sheet label#form-background-3 {
													display:								block;
													opacity:								.5;
}

aside input[type="text"],
aside input[type="email"],
aside textarea {
													width:									100%;
}

aside p {
													font-size:								0.8rem;
													text-transform:							uppercase;
}

aside p.aside-title {
													text-transform:							none;
													font-size:								1.3rem;
													font-weight:							bold;
													
}@media only screen and (max-height:500px) {
aside p.aside-title {
													display:								none;
}

}

aside .titel input {
													width:								18%;
													margin-right:							1%;
}
aside .vorname input,
aside .nachname input {
													width:								40%;
}
aside .vorname input {
													margin-right:							1%;
}

input[type=text] {
													font-size:							1rem;
													height:								2rem;
}
input[type=submit],
input[type=reset] {
													font-size:							1rem;
}

aside .tel input {
													width:								49.5%;
													margin-right:							1%;
}

aside .mail input {
													width:								49.5%;
}


aside label {
													display:							block;
}

@media only screen and (max-height:500px) {
aside#form-1 textarea {
													height:								5rem;
}

}

#section-0-3 {
													max-width:								100%;
													xoverflow:							hidden;
}
nav#primary a {
														color:								white;
}

nav#primary div[lang] > ul > li > div {
														background:							#aaaaaa;
}
nav#primary ul ul li:nth-child(1) div {
														background:							#6f6f6e;
}
nav#primary ul ul li:nth-child(2) div {
														background:							#adc90f;
}
nav#primary ul ul li:nth-child(3) div {
														background:							#cd1719;
}
nav#primary ul ul li:nth-child(4) div {
														background:							#fcba00;
}

#body-cell,
#sheet > header  {
														/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#878787+0,aaaaaa+100 */
														background: 						#a0a0a0; /* Old browsers */
														xbackground: 						linear-gradient(45deg, #878787 0%,#aaaaaa 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
														xfilter: 							progid:DXImageTransform.Microsoft.gradient( startColorstr='#878787', endColorstr='#aaaaaa',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
														
														color:								white;
}

html.safari #body-cell,
html.safari #sheet > header  {
														-webkit-text-stroke: 0.5px white;
}

div.image:before {
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#a0a0a0+0,a0a0a0+100&1+0,0+100 */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2EwYTBhMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNhMGEwYTAiIHN0b3Atb3BhY2l0eT0iMCIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top,  rgba(160,160,160,1) 0%, rgba(160,160,160,0) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  rgba(160,160,160,1) 0%,rgba(160,160,160,0) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  rgba(160,160,160,1) 0%,rgba(160,160,160,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a0a0a0', endColorstr='#00a0a0a0',GradientType=0 ); /* IE6-8 */
												
}

aside {
														color:								#a0a0a0;
														-webkit-text-stroke-color: 			#a0a0a0;
}

.screen-reader-response,
.wpcf7-response-output {
														color:								#cd1719;
														-webkit-text-stroke-color:			#cd1719;
}
footer {
															margin-top:						5rem;
															margin-bottom:					5rem;
}

footer nav.breadcrumbs {
															border-bottom:					1px dotted white;
}

footer nav.sitemap {
															display:						none;
}

#section-0 footer {
/* position: absolute; */
															position:						relative;
															top:							20%;
															height:							20%;
															
															margin:							0;
															
/*     bottom: 0; */
/*     right: 0; */
/*     z-index: 300; */
/*     width: 100%; */
/*     margin-right: 17rem; */
    
/*     width:	30rem; */
/*     z-index: 	100; */
}@media only screen and (max-width:750px) { 
#section-0 footer {
/* 														width:								20rem; */
}}@media only screen and (max-height:550px) { 
#section-0 footer {
    													top:								0;
    													height:								30%;
}}

@media only screen and (max-width:550px) { 
#section-0 footer {
														margin-right:						0rem;
}}


#section-0 nav.breadcrumbs,
#section-0 .copy-block,
#section-0 .address-block,
#section-0 .imprint {
															display:						none;
}

#section-0 footer .contact-block p {
																display:					block;
}

@media only screen and (max-width:450px) { 
footer .copy-block {
														float:								none;
}

footer .contact-block p {
														display:							block;
														text-align:							left;
														margin-left:						0;
}

#section-0 footer .contact-block p {
														display:							block;
														text-align:							right;
														margin-left:						0;
}

footer .contact-block {
														margin-top:							1rem;
}


}

@media only screen and (max-width:360px) { 
#section-0 footer .contact-block p {
														text-align:							left;
}

span.org {
														display:							block;
}


}









html {
																font-family:				"Brotschrift", "Trebuchet MS", sans-serif;
																line-height:				1.5;
}

/* ----------------------------------------------------------------------------------------- LAYOUT OF MAIN ELEMENTS */

#body-cell {
/* 																padding:					3rem; */
}

.content-area {
/* 																padding-left:				3rem; */
/* 																padding-right:				3rem; */
}

main .content-area,
footer .content-area {
/* 																padding-left:				6rem; */
/* 																padding-right:				5rem; */
}

#sheet > header {
/* 																width:						20rem; */
/* 																height:						100%; */
																
/* 																z-index:					100; */

																display:					none;
}@media only screen and (max-width:550px) { 
#sheet > header {
															display:						block;
															width:							100%;
															z-index:						100;
															box-shadow:					0 0 1rem black;
}}

nav#lang {
/* 																width:						20rem; */
																
/* 																z-index:					100; */

																xdisplay:					none;
}

nav#primary {
/* 																width:						21.5rem; */
																
/* 																z-index:					100; */
}

nav#primary li {
/* 																display:					block; */
}

main,
footer {
/* 																margin-left:				20rem; */
}

main .frame {
/* 																margin-top:					-3rem; */
}

main #section-0-3-1 .frame,
main #section-0-3-2 .frame {
/* 																margin-top:					4rem; */
}

footer {

/* 																padding-top:				2rem; */
/* 																padding-bottom:				4rem; */
}

/* ----------------------------------------------------------------------------------------- MAIN ELEMENTS */

#body-cell {
/* 																background:					gray; */
}

#sheet {
/* 																xmax-width:					70rem; */
/* 																xmin-width:					32rem;					width of an iPhone */
																xheight:						100%;
																
																xmargin:						auto;
																
																/* dont use padding-left or -right, use instead content-areas padding values! */
																/* dont use padding-top or -bottom, use instead padding values in header or footer! */
																
																xbackground:					white;
																
																position:						static;
}


header {
																xtop:						-2rem;			/* (#subline-problem) place header above so the subline can be placed above the sheet */
}

header .frame {
																xmargin-bottom:				-2rem;			/* (#subline-problem) since header is spaced -2rem above, its contents must be reduced */
}


header div[lang] .picture-mark {
																xmargin-top:					3rem;			/* (#subline-problem) move picture-mark down when header moves upwards to put subline above the sheet */
																
/* 																margin-top:					3rem; */
/* 																margin-left:				-1.5rem; */
/* 																width:						110%; */
/* 																height:						8rem; */
																
/* 																transition:					width .5s, height .5s, margin-top .5s, margin-left .5s; */
}

header div[lang] .picture-mark:hover {
/* 																margin-top:					2.5rem; */
/* 																margin-left:				-2rem; */
/* 																height:						9rem; */
/* 																width:						120%; */
}

header p.subline {
																display:					none;
																xposition:					absolute;
																xtop:						0rem;
																xleft:						0;
																
																xmargin:						0;
																
}

header p.subline,
header p.subline a {
/* 																color:						white; */
}



/* ----------------------------------------------------------------------------------------- NAVS IN GENERAL */

nav li {
																xpadding-left:				1rem;
																xpadding-right:				1rem;
}

nav ul {
																xmargin-left:				-1rem;
																xmargin-right:				-1rem;
}

/* ----------------------------------------------------------------------------------------- LANGUAGE NAV */

nav#lang {
																xposition:					absolute;
																xtop:						-2rem;
																xright:						0;
																
}

nav#lang,
nav#lang a {
																xcolor:						white;
}

/* ----------------------------------------------------------------------------------------- PRIMARY NAV */

nav#primary {
																xbackground:					black;
}

nav#primary a {
																xcolor:						white;
}

/* ----------------------------------------------------------------------------------------- FOOTER */

footer {
																xbackground:					black;
																
																xcolor:						white;
}

footer a {
																xcolor:						white;
}