#gallery{
	position:absolute;
	z-index:-1;
	margin:0;
	width:100%;
	height:100%;
}
body {
	background: #fff;
	z-index:0;
	margin:0;
	padding:0;
	font:normal 62.5%/100% Merriweather, sans-serif;
}
html{
	width:100%;
	height:100%;
}
div#controls.controls > div.next,
div#controls.controls > div.prev {
	position:absolute;
	bottom:50%;
	background:transparent;
	border:none;
	width:5%;
	height:5%;
}
div#controls.controls > div.prev {
	left:0;
}
div#controls.controls > div.next {
	right:0;
}
div#controls.controls > div.prev img,
div#controls.controls > div.next img {
	width:100%;
	height: auto;
}

#container {
	z-index:10000;
	bottom: 0 ;
	display: none ;
	left: 0 ;
	position: absolute ;
	width: 100% ;
	border-radius:2px;
	background-color:rgba(255,255,255,.8);
	box-shadow: 0 0 10px rgba(0,0,0,0.4);
}
#logoname:hover {
background-color:rgba(255,255,255,1);
}

#claim h2:hover{
background:rgba(19,38,86,1);
}

#container2 {
	z-index:10000;
	bottom: 0 ;
	display: none ;
	left: 0 ;
	position: absolute ;
	width: 100% ;
	border-radius:2px;
	/*background-color:rgba(255,255,255,.8);*/
	box-shadow: 0 0 10px rgba(0,0,0,0.4);
}
#inner,#inner2 {
	background-color:rgba(255,255,255,1);
	border: 0 solid #666666 ;
	border-bottom-width: 0 ;
	padding: 3% 5% 3% 5%;
	border-radius:2px;
	font-size:75%;
	font-size:1vmax;
	line-height:170%;
	color:rgba(19,38,86,.9);
	overflow:hidden;
	font-weight:300;
  cursor:pointer;
}
#inner img {
	display:inline-block;
}

div#logoname.impressum-show > p.impressum {
	display: block;
	padding: 5%;
	margin-top: 0;
	color: rgba(19, 38, 86, 0.6);
	font-size:1vw;
	font-size:1vmax;
	line-height:150%;
	text-decoration:none;
}
a.impressum-show, a.claim-show{
	display:block;
	text-align:right;
	color: rgba(19, 38, 86, 0.6);
	text-decoration:none;
	font-size:1vmax;
	line-height:100%;
}
div#infopanel > p {
	padding-left:1%;
	cursor:pointer;
}
div#infopanel {
	width:60%;
	float:right;
	cursor:pointer;
	padding-top:0%;
}
div#foneme > p.click-me {
	float:right;
	width:60%;
	z-index:999999;
	margin:0 0 3% 0;
}
div#foneme > p.click-me > a.click {
	position:relative;
	display:inline-block;
	padding:1% 1% 1% 1%;
	margin:0;
	text-decoration:none;
	font-weight:600;
	color:rgba(19,38,86,.9);
}
#wrapper {
	position:absolute;
	float:left;
	display:inline-block;
	width:35%;
	left: 7%;
	bottom:7%;
	background: rgba(255, 255, 255, 0);
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	border-radius:2px;
}
.wrapper {
	z-index:8;
	position:relative;
	margin:auto;
	max-width:580px;
	height:100%;
	margin-left:10%;
	margin-right:10%;
	margin-top:35%;
	background:#eee;
	border-radius:2px;
	background-color:rgba(255,255,255,.5);
}
#logo {
	background-color:rgba(255,255,255,.4);
	border-radius:2px 2px 0px 0px;
	box-shadow: 0 0 10px rgba(0,0,0,0.5);
}
#name {width:100%;
	margin:0;
	color:rgba(19,38,86,.6);
}
#logoname {
	z-index:800;
	position:relative;
	padding-top:0;
	padding-left:0;
	width:100%;
	margin:auto;
	background-color:rgba(255,255,255,.6);
	margin-top:0;
	border-radius:2px;
}
#logoname p {
	margin:0;
	color:rgba(19,38,86,.6);
}
div#logoname.impressum-show {
	cursor:pointer;
}
#impressum{
	width:100%;
	float:left;
}
#logoimg {
	float:right;
	width:20%;
	height:auto;
	margin:0 10% 0px 70%;
	padding-bottom:1%;
}
#logoimg img {
	width:100%;
	height:auto;
	opacity:.7;
}
div#name > h1{
	font-size:1.3vw;
	font-size:1.3vmax;
	line-height:100%;
	font-weight:600;
	clear:both;
	padding: 0 1% 2% 5%;
	color:rgba(19,38,86,.9);
	margin:0;
}

div#claim,div#claim2{width:100%;}
div#claim > h2,
div#claim2 > h2{
	font-size:1.3vw;
	font-size:1.3vmax;
	line-height:100%;
	font-weight:400;
	clear:both;
	padding:2% 1% 2% 5%;
	line-height:155%;
	background:rgba(19,38,86,.7);
	color:#ffffff;
	border-radius:0px 0px 2px 2px;
	box-shadow: 0 0 10px rgba(0,0,0,0.4);
	margin:0;
	cursor:pointer;
}
div#imagepanel > img.nk {
	/*float:left;*/
	margin:5% 1% 1% 10%;
	width:100%;
	height:auto;
	box-shadow: 0 0 3px rgba(0,0,0,0.5);
}
div#imagepanel {
	padding: 3% 0 2% 1%;
	margin:0;width:30%;
	cursor:pointer;
}
div#imagepanel > img.nk {
	/*width:100%;*/
}
div#logoname.impressum-show > p.impressum{
	font-size: 1vmax;
	padding:2% 5% 0 5%;
}
html > body > div#wrapper > div#logo > div#logoname.impressum-show,
div#name,
div#logoname,
div#logoname.impressum-show{
	max-height:50%;
	margin:0;
	display:block;
	position:relative;
	float:left;
}
div.impressum-show > a.impressum-show{
	font:normal 1.5vmax/100% Merriweather, sans-serif;
	padding: 1% 2% 0 0;
}

ul.impressum li{
margin-bottom: 8px;
list-style:none;
}
ul.impressum { padding-left: 0px; }

@media screen and (orientation:landscape) {
	#wrapper{
		width:33%;
		background: rgba(255, 255, 255, 0);
		font-size:150%;
		border-radius:0;
	}
}

@media only screen and (min-width : 625px) and (max-width : 760px) and (orientation:portrait) {
  #wrapper{
  width:45%;
  }
	div#imagepanel{
		display:none;
	}
	div#infopanel,div#infopanel2 {
		float:left;
		width:100%;
		font-size:1.5vw;
		font-size:1.5vmax;
		line-height:150%;
	}
	div#infopanel > p {
		padding-left:5%;
	}
	div#foneme > p.click-me {
		width:100%;
		margin-top:0;
		float:left;
		font-size:1.5vh;
		font-size:1.5vmax;
		line-height:150%;
	}
	div#foneme > p.click-me {
		padding-top:0;
		padding-left:5%;
	}
}


@media only screen and (min-width : 480px) and (max-width : 625px)  and (orientation:portrait){
	div#controls.controls > div.next,
	div#controls.controls > div.prev {
		width:8%;
		height:8%;
	}
	#wrapper{
		width:100%;
		left: 0%;
		bottom:0%;
		background: rgba(255, 255, 255, 0);
		font-size:150%;
		border-radius:0;
	}
	div#name > h1 {
		font-size:2.5vw;
		font-size:2vmax;
		font-weight:600;
		clear:both;
		padding: 0px 2% 2% 2%;
	}
	div#claim > h2,
	div#claim2 > h2 {
		font-size:2.5vw;
		font-size:2vmax;
		font-weight:400;
		padding:2% 2%;
		border-radius:0;
	}
	div#infopanel,div#infopanel2 {
		float:left;
		width:100%;
		font-size:1.5vw;
		font-size:2vmin;
		line-height:150%;
	}
	div#infopanel > p,div#infopanel2 > p {
		padding-left:2%;
	}
	div#infopanel > p,div#infopanel2 > p {
		font-size:110%;
	}

	div#logoname.impressum-show > p.impressum {
		font-size:2.5vw;
		font-size:1.5vmax;
	}
	#logoimg{width:10%;height:auto;margin-left:30%;}
	div#logoimg img {
		max-width:100%;
		height:auto;
		opacity:.7;
	}
	#logoname p {
	}
	#inner,#inner2 {
		padding:1%;
	}
	div#foneme > p.click-me {
		margin-top:0;
		padding-top:0;
		padding-left:2%;
		float:left;
		font-size:1.5vw;
		font-size:2.5vmin;
		line-height:150%;
	}
	html > body > div#wrapper > div#logo > div#logoname.impressum-show > p.impressum{
		padding:2% 5% 0 2%;
	}
	div#imagepanel{
		float:left;
		width:33%;height:auto;
		display:inline-block;
		padding:1% 4% 1% 2%;
		display:none;
	}
	div#imagepanel > img.nk{
		margin-bottom:1%;
		clear:both;
		margin:0% 0% 1% 1%;
		display:none;
	}

}

@media only screen and (min-width : 150px) and (max-width : 480px)  and (orientation:portrait){
	div#controls.controls > div.next,
	div#controls.controls > div.prev {
		width:8%;
		height:8%;
	}
	#wrapper{
		min-width:100%;
		left: 0%;
		bottom:0%;
		background: rgba(255, 255, 255, 0);
		border-radius:0px;
	}
	div#name > h1 {
		font-size:2.5vw;
		font-size:2vmax;
		font-weight:600;
		clear:both;
		padding: 0 2% 2% 2%;
	}
	div#claim > h2,
	div#claim2 > h2{
		font-size:2.5vw;
		font-size:2vmax;
		font-weight:400;
		padding:2% 2% 2% 2%;
		border-radius:0px;
	}
	div#infopanel,div#infopanel2{
		float:left;
		width:100%;
		font-size:1.5vw;
		font-size:3vmin;
		line-height:150%;
	}
	div#infopanel > p,div#infopanel2 > p{
		padding-left:0;
	}
	div#infopanel > p,div#infopanel2 > p {
		font-size:110%;
	}
	div#logoname.impressum-show > p.impressum {
		padding: 2% 0 0 2%;
		font-size:1.5vw;
		font-size:1.3vmax;
	}
	#logoimg{
		width:15%;
		height:auto;
	}
	#logoimg img{
		max-width:100%;
		height:auto;
		opacity:.7;
	}
	#logoname p {
		padding:20px 0 0 10px;
	}
	#inner,#inner2{
		padding:2%;
	}
	#inner p,#inner2 p{
		clear:right;
		width:100%;
		padding:1% 0 0 0;
		margin:0;
	}
	div#imagepanel{
		float:left;
		width:100%;
		display:inline-block;
		display:none;
	}
	div#imagepanel > img.nk{
		margin-top:1%;
		margin-bottom:1%;
		clear:both;
		width:40%;
		margin:1% 1% 1% 1%;
	}
div#logoname.impressum-show > p > a.impressum-show,
	a.impressum-show{
		padding: 1%;
	}
	div#foneme > p.click-me > a.click {
		margin-top:0;
		padding-top:0;
		padding-left:0;
		margin-left:0;
	}
	div#foneme > p.click-me {
		padding-left:0;
		margin-left:0;
		float:left;
		width:100%;
		font-size:1.5vw;
		font-size:3vmin;
		line-height:150%;
		margin-bottom:0;
	}
}