@charset "UTF-8";
/* commissioner-200 - latin_latin-ext */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Commissioner';
  font-style: normal;
  font-weight: 200;
  src: url('../fonts/commissioner-v23-latin_latin-ext-200.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* commissioner-300 - latin_latin-ext */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Commissioner';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/commissioner-v23-latin_latin-ext-300.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* commissioner-regular - latin_latin-ext */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Commissioner';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/commissioner-v23-latin_latin-ext-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* commissioner-500 - latin_latin-ext */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Commissioner';
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/commissioner-v23-latin_latin-ext-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* commissioner-600 - latin_latin-ext */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Commissioner';
  font-style: normal;
  font-weight: 600;
  src: url('../fonts/commissioner-v23-latin_latin-ext-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

* { 
	-moz-box-sizing:border-box; 
	-webkit-box-sizing:border-box; 
	box-sizing:border-box; 
	margin:0; 
	padding:0; 
}

html, body { 
	margin:0; 
	padding:0; 
	height:100%; 
	width: 100%; 
}
h1 {
	font-family: 'Commissioner';
    font-style: normal;
    font-weight: 200;
	text-transform: uppercase;
	font-size: 10vw;
	line-height: 0.9em;
	color: #000;
}
h2 {
	font-family: 'Commissioner';
    font-style: normal;
    font-weight: 300;
	font-size: 32px;
	line-height: 1em;
	color: #000;
	margin-top: 40px;
	margin-bottom: 10px;
	text-transform: uppercase;
}
h4 {
	font-family: 'Commissioner';
    font-style: normal;
    font-weight: 200;
	font-size: 4em;
	line-height: 1em;
	color: #000;
	margin-top: 25px;
	text-transform: uppercase;
}	
h5 {
	font-family: 'Commissioner';
    font-style: normal;
    font-weight: 300;
	font-size: 32px;
	line-height: 1em;
	color: #000;
	text-align: left;
	margin-left: 0px;
	text-transform: uppercase;
}
#mainmenu {
	width: 100%;
	float: left;
	z-index: 109;
	position: fixed;
    background-color: #fff;
}
#header {
	width: 100%;
	text-align: left;
	float: left;
	z-index: 1;
	position: absolute;
	margin-top: 30px;
	margin-bottom: 10px;
}
hr {
	border: 8px solid white;
}
strong {
    font-family: 'Commissioner';
    font-style: normal;
    font-weight: 600;
}
.grid {
	width: 32px;
	padding-top: 0px;
	margin: 20px 0 0 0;
}
.bars {
	width: 40px;
	padding-top: 0px;
	margin: 5px 0px 0px 0px;
}
.wrapper-start {
	width: 100%;
	text-align: center;
	padding-top: 40px;
	padding-left: 15px;
	padding-right: 15px;
	float: left;
	z-index: 1;
	position: absolute;
	margin-top: 155px;
}
#line {
	font-family: 'Commissioner';
    font-style: normal;
    font-weight: 300;
	color: rgba(0,0,0,1.00);
	font-size: 18px;
	line-height: 20px;
	text-align: left;
	letter-spacing: inherit;
	text-transform: uppercase;
	text-decoration: none;
	margin-bottom: 10px;
	}
a.line:link, a.line:visited, a.line:active {
	text-decoration: none;
	color: rgba(0,0,0,1.00);
	}
a.line:hover {
	text-decoration: none;
	color: #000;
	}
.wrapper-contact {
	font-family: 'Commissioner';
    font-style: normal;
    font-weight: 300;
	font-size: 12px;
	color: #999;
	width: 100%;
	text-align: center;
	padding-top: 20px;
	padding-left: 15px;
	padding-right: 15px;
	float: left;
	z-index: 1;
	position: absolute;
	margin-top: 155px;
}
.left {
	text-align: left;
	padding-right: 15px;
	padding-left: 15px;
}
.wrapper-works {
	width: 100%;
	padding: 10px 15px 20px 15px;
	float: left;
	z-index: 1;
	margin-top: 15px;
}
.wrapper-series {
	width: 100%;
	text-align: center;
	padding-top: 10px;
	padding-left: 10px;
	padding-right: 10px;
	float: left;
	z-index: 1;
	position: absolute;
	margin-top: 10px;
	padding-bottom: 20px;
}
.wrapper-text {
	width: 100%;
	text-align: left;
	padding-top: 0px;
	padding-left: 15px;
	padding-right: 15px;
	float: left;
	z-index: 1;
	position: absolute;
	margin-top: 25px;
	padding-bottom: 20px;
}
#news {
	font-family: 'Commissioner';
    font-style: normal;
    font-weight: 300;
	font-size: 16px;
	line-height: 22px;
	text-decoration: none;
	color: #333;
	padding-bottom: 40px;
	border-bottom-width: 2px;
	border-bottom-style: solid;
	border-bottom-color: #ececec;
	margin: auto;
	padding-top: 40px;
}
#newbook {
	width: 150px;
	margin-top: auto;
	margin-right: auto;
	margin-bottom: 2px;
	margin-left: 5px;
	position: fixed;
	bottom: 0;
	z-index: 99;
}
.wrapper-frame {
	width: 100%;
	text-align: center;
	padding-top: 10px;
	padding-left: 15px;
	padding-right: 15px;
	float: left;
	z-index: 1;
	position: absolute;
	margin-top: 60px;
}
.quote {
	font-family: 'Commissioner';
    font-style: normal;
    font-weight: 300;
	font-size: 24px;
	line-height: 24px;
	color: #333;
	margin-right: 5px;
}
em {
	font-family: 'Commissioner';
    font-style: normal;
    font-weight: 500;
	font-size: 18px;
	line-height: 1 em;
	text-decoration: none;
}
#text {
	font-family: 'Commissioner';
    font-style: normal;
    font-weight: 300;
	width: 100%;
	color: #333;
	font-size: 16px;
	text-transform: none;
	line-height: 24px;
}
.up {
	width: 100%;
	font-family: 'Commissioner';
    font-style: normal;
    font-weight: 300;
	font-size: 12px;
	color: #000;
	text-align: center;
	float: left;
	z-index: 1;
	position: relative;
	margin-top: 40px;
	margin-bottom: 40px;
}
.back {
	width: 100%;
	text-align: center;
	float: left;
	z-index: 1;
	position: relative;
	margin-top: 15px;
	padding-bottom: 5px;
}
#counter {
	font-family: 'Commissioner';
    font-style: normal;
    font-weight: 300;
	font-size: 26px;
	color: #CCC;
	text-decoration: none;
	text-align: center;
	width: 100%;
	padding-top: 0px;
	padding-bottom: 10px;
	letter-spacing: 1px;
}
.stretch { 
	font-family: 'Commissioner';
    font-style: normal;
    font-weight: 300;
	font-size: 12px;
	color: #CCC;
	height:100%; 
	width: 100%;
}
.stretch img {
	max-height: 100%;
	max-width: 100%;
	width: auto;
	vertical-align: middle;
	padding-bottom: 10px;
}
.stretch2 img {
	max-height: 50%;
	max-width: 50%;
	width: auto;
	vertical-align: left;
	padding-top: 30px;
	padding-bottom: 30px;
}
a:link, a:visited, a:active {
	color: #000;
	text-decoration: none;
} 
a:hover {
	color: #000;
	text-decoration: none;
}
a.menu:link, a.menu:visited, a.menu:active {
	text-decoration: none;
	color: #000;
	}
a.menu:hover {
	text-decoration: none;
	color: #000;
	}
a.imp:link, a.imp:visited, a.imp:active {
	font-family: 'Commissioner';
    font-style: normal;
    font-weight: 300;
	font-size: 12px;
	color: #000;
	text-decoration: none;
	text-transform: uppercase;
	line-height: 20px;
} 
a.imp:hover {
	text-decoration: none;
}
.off {
	font-weight: 400;
	color: #000;
	font-size: 13px;
	text-transform: none;
	text-decoration: none;
}
a.BIGbutton {
	font-family: 'Commissioner';
    font-style: normal;
    font-weight: 400;
	color: #000;
	cursor: pointer;
	font-size: 20px;
	height: 40px;
	text-align: center;
	text-decoration: none;
	width: auto;
	margin-top: 20px;
	margin-bottom: 10px;
	padding: 15px 30px 15px 30px;
	border-radius: 30px;
	text-transform: none;
	border: 2px solid #000;

	background-color: #fff;
	}
a.BIGbutton:hover {
	background-color: #000;
	color: #fff;
	border: 2px solid #000;
	}

/*MENU*/
/*Strip the ul of padding and list styling*/
ul {
	list-style-type:none;
	margin:0;
	padding:0;
	position: absolute;
}

/*Create a horizontal list with spacing*/
li {
	display:inline-block;
	float: left;
	margin-right: 1px;
}

/*Style for menu links*/
li a {
	font-family: 'Commissioner';
    font-style: normal;
    font-weight: 300;
	font-size: 28px;
	color: #666;
	text-transform: uppercase;
	letter-spacing: 1px;
	display: block;
	text-align: left;
	text-decoration: none;
	line-height: 55px;
	padding-right: 10px;
	padding-left: 5px;
}

/*Hover state for top level links*/
li:hover a {
	color: #000;
}

/*Style for dropdown links*/
li:hover ul a {
	color: #000;
}

/*Hover state for dropdown links*/
li:hover ul a:hover {
	line-height: 60px;
	color: #000;
}

/*Hide dropdown links until they are needed*/
li ul {
	display: none;
}

/*Make dropdown links vertical*/
li ul li {
	display: block;
	float: none;
}

/*Prevent text wrapping*/
li ul li a {
	width: auto;
	min-width: 100px;
	padding: 0 10px;
}

/*Display the dropdown on hover*/
ul li a:hover + hidden, hidden:hover {
	display: block;
	text-align: left;
	z-index: 4;
}

/*Style 'show menu' label button and hide it by default*/
.show-menu {
	text-decoration: none;
	color: #000;
	text-align: left;
	background-color: #FFF;
	height: 60px;
	display: none;
	padding-top: 9px;
	padding-right: 0;
	padding-bottom: 7px;
	padding-left: 0;
	border-bottom-width: 0px;
	border-bottom-style: solid;
	border-bottom-color: #ececec;
    z-index: 99;
}

/*Hide checkbox*/
input[type=checkbox]{
    display: none;
}

/*Show menu when invisible checkbox is checked*/
input[type=checkbox]:checked ~ #menu{
    display: block;
}


/*Responsive Styles*/

@media screen and (max-width : 768px){
	#header {
	text-align: left;
	padding:  0px 15px 0px 15px;
	margin-top: 60px;
	}
	/*Make dropdown links appear inline*/
	ul {
		position: static;
		display: none;
	}
	/*Create vertical spacing*/
	li {
		margin-bottom: 0px;
		border-bottom-width: 0px;
		border-bottom-style: solid;
		border-bottom-color: #000;
		background-color: #FFF;
		padding-left: 12px;
	}
	/*Make all menu links full width*/
	ul li, li a {
		width: 100%;
	}
	/*Display 'show menu' link*/
	.show-menu {
	display: block;
	padding-left: 15px;
    z-index: 99;
	}
	
	.one {
	width: 100%;
	height: auto;
    margin-bottom: 5px;
	}
	
	.two {
	width: 80%;
	height: auto;
    margin-bottom: 5px;
	}
	
	/*WORKS*/
.works-left {
	text-align: left;
	}
	
.works-right {
	text-align: right;
	}
	
	a.works-link {
	position: relative;
	color: #000;
	text-decoration: none;
	display: inline-block;
	overflow: hidden;
	font-size: 28px;
	float: left;
	letter-spacing: 1px;
	text-transform: uppercase;
	}
	a.works-link:hover {
	color: #000;
	text-decoration: none;
	}
	a.works-link img {
	border:none;
	vertical-align:bottom;
	}
	a.works-link span {
	position: absolute;
	width: 100%;
	left: 0;
	bottom: 85%;
	padding-top: 0.1em;
	padding-right: 3.5%;
	padding-bottom: 0.1em;
	padding-left: 3.5%;
	}
	a.works-link:hover span {
	color: #000;
	left: 0;
	bottom: 85%;
	}
	
	/*EINZELBILDER*/
	a.frame-link {
	font-family: 'Commissioner';
    font-style: normal;
    font-weight: 200;
	font-size: 20px;
	position: relative;
	color: #aaa;
	text-decoration: none;
	display: inline-block;
	overflow: hidden;
	float: left;
	text-align: left;
	margin: 10px 10px 0px 10px;
	}
	a.frame-link:hover {
	color: #000;
	text-decoration: none;
	}
	a.frame-link img {
	border:none;
	vertical-align: bottom;
	}
	a.frame-link span {
	position: absolute;
	width: 100%;
	left: 0;
	bottom: 0%;
	padding-top: 0.1em;
	padding-right: 3.5%;
	padding-bottom: 0.1em;
	padding-left: 3.5%;
	}
	a.frame-link:hover span {
	color: #000;
	left: 0;
	bottom: 0%;
	}
	.frame {
	width: 50%;
	float: left;
	}	

}