/*	GERALD PILZ, MARCH
	ARCHITEKTUR
	KOMMUNIKATIONSDESIGN
	OBERFELDSTRASSE 123
	4600 WELS, AUSTRIA
	OFFICE@GERALDPILZ.COM
	WWW.GERALDPILZ.COM

 	GENERAL -------------------------------------------------------------*/

@charset "UTF-8";
* {	
	margin:0px;
	padding:0px;
	font-size-adjust:none;
	-webkit-text-size-adjust:none;
}
body {
	height:100%;
	font-family:Helvetica, Arial, sans-serif;
	background-color:#111;
	-webkit-tap-highlight-color:rgba(0,0,0,0);
}
img {
	border:none;
	float:left;
}
.nobr  {
	white-space:nowrap;
}

/* 	CONTENT -------------------------------------------------------------*/

#preloader {
	position:absolute;
	left:0px;
	top:0px;
	width:100%;
	height:100%;
	background-color:#111;
	z-index:9999;
}
.no-js #preloader {
	visibility:hidden;
}
#fullscreen_background {
	position:fixed;
	left:0px;
	top:0px;
	width:100%;
	height:100%;
	
	overflow:hidden;
	z-index:10;
}
/*	CSS3 fullsize background image 	*/
.backgroundsize #fullscreen_background {
	-webkit-background-size:cover;
	-moz-background-size:cover;
	-ms-background-size:cover;
	-o-background-size:cover;
	background-size:cover;
} 
/* 	Make sure background-size comes after the background shorthand  */
/* 	Set up a background image when JavaScript is disabled  */
.no-js #fullscreen_background {
	-webkit-background-size:cover;
	-moz-background-size:cover;
	-ms-background-size:cover;
	-o-background-size:cover;
	background-size:cover;
}
#content_wrapper {
	position:absolute;
	left:0px;
	top:0px;
	width:100%;
	height:100%;
	z-index:50;
}
#logo, #logo_preloader {
	position:absolute;
	left:40px;
	top:65px;
	width:400px;
	cursor:pointer;
}
#logo.hide {
	visibility:hidden;
}
#image_text {
	position:fixed;
	right:0px;
	bottom:25px;
	padding:0px 40px 0px 40px;
	
	font-size:16px;
	line-height:20px;
	font-weight:normal;
	text-align:left;
	color:#fff;
	
	float:left;
	visibility:visible;
}
#image_text.hide {
	visibility:hidden;
}
#references {
	position:fixed;
	left:0px;
	bottom:45px;
	padding:0px 40px 0px 40px;
	
	font-size:14px;
	line-height:16px;
	font-weight:normal;
	text-align:left;
	color:#111;

    -webkit-hyphens:manual;
    -moz-hyphens:manual;
    -ms-hyphens:manual;
    -o-hyphens:manual;
    hyphens:manual;
	
	overflow:hidden;
	z-index:0;
}

/* 	INFO_PAGE -----------------------------------------------------------*/

#info_page {
	position:absolute;
	left:0px;
	right:0px;
	top:100%;
	height:415px; 
	margin-top:1px; /* 1 px to prevent a bottom line on iPhones */
	padding:25px 40px 0px 40px;

	font-size:14px;
	line-height:16px;
	font-weight:normal;
	text-align:left;
	color:#888;
	
	background-color:#fff;
	background:-webkit-linear-gradient(top, rgba(255,255,255,0.85), #fff);
	background:-moz-linear-gradient(top, rgba(255,255,255,0.85), #fff);
	background:-ms-linear-gradient(top, rgba(255,255,255,0.85), #fff);
	background:-o-linear-gradient(top, rgba(255,255,255,0.85), #fff);
	
	overflow:hidden;
	visibility:visible;
	z-index:100;
}
#info_wrapper {
	display:inline-block;
}
p.info_about {
	margin:0px;
	clear:both;
}
p.info_copyright {
	margin:0px;
	font-style:italic;
	clear:both;
}
p.info_footer {
	margin:0px;
	padding-top:5px;
	text-align:right;
}
#info_impressum {
	width:400px;
	float:left;
}
#info_portrait {
	position:absolute;
	right:0px;
	width:42%;
	height:auto;
	max-width:517px;
	max-height:303px;
	margin-left:58%;
	margin-right:0px;
	margin-top:-26px; /* 25 px + 1 px to prevent a white top line */
	visibility:visible;
}
@media screen and (max-width: 795px) {
	#info_portrait {
		visibility:hidden;
	}
}

/* 	NAVIGATION ----------------------------------------------------------*/

#info {
	float:left;
}
#top {
	position:absolute;
	left:5px;
	right:5px;
	top:0px;
	height:100%;
	padding-bottom:1px; /* See #info_page margin-top:1px */
	
	background-color:#111;
	opacity:0;

	overflow:hidden;
	cursor:pointer;
	visibility:visible;
}
#top.hide {
	visibility:hidden;
}
#close {
	position:fixed;
	right:40px;
	top:65px;
	width:85px;
	
	visibility:hidden;
	z-index:0;
}
#close.show {
	cursor:pointer;
	visibility:visible;
	z-index:90;
}
#navigation {
	position:fixed;
	right:40px;
	top:50%;
	width:85px;
	margin-top:-80px;
	-webkit-tap-highlight-color:rgba(120,120,120,0.6);
}
#navigation.hide {
	visibility:hidden;
}

/* 	IMAGE LINK ----------------------------------------------------------*/

img.prev:hover, img.next:hover { 
	cursor:pointer;	
}
img.visit_weiss:hover {
	opacity:0.75;
}
img.visit_grau:hover {
	opacity:0.75;
}

/* 	TEXT LINK -----------------------------------------------------------*/

a:link, a:visited, a:hover, a:active {
	text-decoration:none;
	color:#111;
}
a.weiss:link, a.weiss:visited, a.weiss:hover, a.weiss:active {
	text-decoration:none;
	color:#fff;
}
a.hellgrau:link, a.hellgrau:visited, a.hellgrau:hover, a.hellgrau:active {
	text-decoration:none;
	color:#888;
}
a.dunkelgrau:link, a.dunkelgrau:visited, a.dunkelgrau:hover, a.dunkelgrau:active {
	text-decoration:none;
	color:#3d3d3d;
}
a.schwarz:link, a.schwarz:visited, a.schwarz:hover, a.schwarz:active {
	text-decoration:none;
	color:#000;
}

/* 	MOBILE DEVICE -------------------------------------------------------*/

/* 	If portrait mode is detected - hint rotate to landscape  */
@media screen and (orientation: portrait) {
	#rotate {
		position:fixed;
		left:0px;
		top:0px;
		width:100%;
		height:100%;
		
		background-color:rgba(0,0,0,0.6);
		background-image:url('../img/rotate-icon_weiss.png');
		background-position:center center;
		background-repeat:no-repeat;
		
		z-index:9999;
	}
	#fullscreen_background {
		-webkit-filter:grayscale(1); /* Blackberry 10+, Chrome 19+, Chrome Android 27+, Opera 15+, Opera Mobile 14+, Safari 6+, Safari 6+ iOS */
		-moz-filter:grayscale(1);
		-ms-filter:grayscale(1);
		-o-filter:grayscale(1);
		filter:grayscale(1);
		filter:url(filters.svg#grayscale); /* Firefox 3.5+, Firefox Android */
	}
}
@media screen and (max-device-width: 480px), screen and (device-width: 800px) and (orientation: landscape) {
	#navigation {
		position:fixed;
		right:40px;
		top:50%;
		width:120px;
		margin-top:-113px;
		-webkit-tap-highlight-color:rgba(120,120,120,0.6);
	}
}