/* CSS Document */


html {
	color: gray
}

html, body {
	background-color: #000; 
	font: 90% Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
	color: antiquewhite;
	text-align:left;
	margin:0;
	padding:0;
	
}
#p-body {
	position:absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	overflow: hidden;
}
.container {
  position: relative;
}
img{
	max-width:100%;
	height:auto;
}
#bg img, .bg img{
	width: 100%;
}
.scroll {
    position: fixed;
    top: 5%;
    left: 3%;
    font-size: auto;
    height: 70%;
    width: 50%;
	max-width: 90%;
	min-width: 400px;
    overflow: auto;
	padding-right: 50%;
}
h1 { 
	color: #ccc;
	font-size: 1.7em;
	text-align:left;
	padding-bottom: 1em;
	border-bottom: 0px solid #555;
	font-weight: 400;
	letter-spacing: 0.3em;
	margin-bottom: 0.5em;
}
h2 { 
	color: #ccc;
	font-size: 1.0em;
	text-align:center;
	padding-bottom: 1em;
	border-bottom: 1px solid #555;
	font-weight: 400;
	letter-spacing: 0.4em;
	margin-bottom: 0.5em;
}

h3 { 
	color: #00660D;
	font-size: 1.4em;
	text-align:left;
	padding-bottom: 0.1em;
	border-bottom: px solid #555;
	font-weight: bold;
	letter-spacing: 0.4em;
	margin-bottom: 0em;
}
a:hover h2{
	color: #555;
}

a{
	color: red;
	text-decoration:none;
}

a:hover{
	color: white;
}

.bg{
	display: inline-block;
	width: 100%; 
	margin:0;
}
#mainIMG{
	display: inline-block;
	width: 37%;
	margin:0;
	position: relative;
	margin-top: -5%;
	float: left;
	left: 30px;
}
#fade{
	width: 34%;
	left: 25%;
	float: left;
	position: relative;
	margin-top: -12%;
	display: inline-block;
	opacity: 0;
	transition-duration: 1s;
}
main > div:target{
	display: inline-block;
}
#fade h2{
	border-bottom: none;
	text-align: left;
	line-height: 1.0em;
	font-size: 1.6em;
	padding: 0;
	margin: 0;
	letter-spacing: 0.2em
}
#grey{
	color: #424242
}
#sf{
	width: 70%;
	margin: 5%;
	padding-bottom:15%;
}

#topLinks{
	display:inline-block;
	width:100%;
}

#topLinks div{
	display:inline-block;
	width:45%;
	height:auto;
}

#topLinks div a img{
	width:50%;
	padding: 5%;
}
#start{
	z-index: 100;
	position: fixed;
	bottom: 0;
	width: 20%;
	padding: 5% 10%;
}
#contact{
	border-right: 1px #555 solid;
	padding-right: 2%;
	text-align: right;
}
.home{
	  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 140px;
	height: 30px;
	background-image:url("img/home.png");
	background-size: cover;
}
#linkIMG{
	float: left;
	width: 100%;
}

#linkIMG div{
	float: left;
	width: 15%;
	padding: 9%;
}

#linkIMG div img{
	width: 100%;
	padding-top: 2%;
}

#footIMG{
	display: inline-block;
	float: left;
	padding: 2%;
	width: 25%;
}

#footIMG a{
	display: inline-block;
	float:left;
	width: 40%;
	padding: 0%;
}

footer{
	display:inline-block;
	width: 100%;
	height:auto;
}

#footIMG a img{
	width: 100%;
}
#fixed{
	position: fixed;
	bottom: 0;
}
.impressum{
	color: #555;
	font-size: 1em;
	padding: 2%;
	position: relative;
	right:0;
	bottom:0;
	float:right;
	width:auto;
	margin-top: 1em;
}

.impressum a{
	color: #555;
}

a:hover img{
	opacity: 0.5;
}
@media(orientation:portrait){
	.scroll {
    position: relative;
    height:auto;
    width: 90%;
	padding-bottom: 5%;
		padding-right: 5%;
}
	#p-body{
		overflow: initial;
	}
	.home{
		
}
	#start{
		top:0;
		padding-left: 0;
		position:absolute;
	}
}
@media(orientation:landscape) and (min-device-width:320px) and (max-device-width:720px){
	
}