@charset 'utf-8';
@import url(reset.css);



body {
width:100%;
padding-bottom: 3rem;
background-color:#2e3132;
font: normal normal 200 0.6em "Helvetica Neue", "helvetica neue", "HelveticaNeuemedium", "HelveticaNeue-Medium", "Helvetica Neue Medium",  Arial, Helvetica, sans-serif;
}

h1, h2, h3, h4, h5, h6 {
font-weight: 200;
letter-spacing:0.05em;
}


h1{
font-size: 10rem;
font-weight:400;
font-stretch:normal;
}

h2{
font-size:1.8em;
line-height:1.2em;
}

h3{
font-size:1.4em;
line-height:1em;
}

p {
font-size:0.9em;
letter-spacing:0.05em;
line-height:1.5em;
}

.button{
font-size:1em;
}

#headline {
position:absolute;
top: 8rem;
left: 5.5rem;
display: none;
} 

.headline{
font-size: 10rem;
font-weight:400;
font-stretch:normal;
text-shadow: -.01em  -.01em 0 #000;
letter-spacing: .001rem;
color: #222;
filter: alpha(opacity=60);
-moz-opacity:.60;
opacity:.60;
}


.info {
	font-size: 1.1rem;
}

@media @media only screen 
and (min-device-width : 375px) 
and (max-device-width : 667px)
and (orientation : portrait) {
  	/*iPhone 6, 7, & 8 Plus in portrait & landscape */
  	.info {
	font-size: 4rem;
	}
}

@media only screen 
and (min-device-width : 375px) 
and (max-device-width : 812px)
and (-webkit-device-pixel-ratio : 3){
	/*iPhone X in portrait & landscape*/
	
}  

  
/*---basics___*/

.cl {
clear:both;
}


/*---makes menu ul li---*/
nav {
position: absolute;
bottom:6rem; 
left:0;
z-index:3;
}

ul { 
display: inline-block;
}


nav li {
margin: 0 0 0.5em 0;
padding: 1rem 0.5rem 1rem 5.5rem;
font-size: 2rem;
letter-spacing:0.02rem;
color:#fff;
cursor:pointer;
float: left;
clear: left;
display: block;
}

nav li.sub{
margin: 0 0 1em 0;
padding: 0.5rem 0.25rem 0.5rem 5.5rem;
font-size: 1rem;
}

nav li a, nav li a:link, nav li a:visited{
color:#283237;
text-decoration:none;
}

nav li a img {
padding-right:3px;
}

nav li a:hover, nav li a:active{
color:#fff;
text-decoration:none;
}


 /*----makes Menue background--*/
 
.menu1{
background-image: url('../img/bg_menue1.png');
}	


.menu2{
background-image: url('../img/bg_menue2.png');
}

.menu3{
background-image: url('../img/bg_menue3.png');

}

.home {
background-image: url('../img/bg_home.png');
}

/*BGimage index*/

.start {
background-image: url('../img/start.jpg');
background-repeat: no-repeat;
	background-size: cover; 
}

@media only screen and (max-width: 600px){
  /* For mobile phones: */
	.start {
	background-image: url('../img/start_portrait.jpg');
	background-repeat: no-repeat;
	background-size: cover; 
	}
}
/*--#mouselayer {
position:absolute; 
top:29%; 
left:0;
width:31rem;
height:30rem;
z-index:2;
}
--*/

/*---makes infobox--*/
#info, #info_ghost {
position:absolute;
top:2.2rem;
right:3rem;
z-index:10;
cursor: pointer;
}

#info1, #info2, #info3 {
position:absolute;
top: 5.3rem;
right: 3rem;
width: 26rem;
/*max-width: 400px;*/
z-index:11;
}

#info1, #info2, #info3{
display:none;
}

.info {
color:#ddd;
padding:1rem;
background: rgba(0, 0, 0, 0.8);
}


.info h2{
padding:0 0 1rem 0;
}

.info h3{
padding:0 0 1rem 0;
}

.info p{
width: auto;
padding:0 0 1rem 0;
}



.info a, .info a:link, .info a:visited, .info a:active {
color: #ddd;
text-decoration:none;
}

.info a:hover {
color: #555;
}

/*---makes Batch---*/
#batch {
	width:4rem;
	height:4rem;
	position: absolute;
	bottom: 4rem; 
	right: 4rem;
	rotate: 25deg;
	border-radius: 50%;
	border-width: 0.2rem;
	border-style: dotted;
	border-color: yellow;
	background:  rgba(48, 62, 90, 1);
	text-align:center;
	padding:1.8rem;
	}
#batch a, #batch h3{
	color:yellow;
	font-weight: 800;
	line-height: 140%
}
/*----Foooter---*/

footer {
color: #ddd;
position:absolute;
bottom:-3rem;
left:0;
background: rgba(0, 0, 0, 0.8);
padding: 1rem;
width: 100%;
z-index:100;
}



/*---404test---*/

.box {
   background: url(../img/404.png) no-repeat 0 0;
   border-bottom: 5px solid #000;
   height: 343px;
   margin-bottom: 25px;
   padding-bottom: 50px;
}

.cover_pan{
   background: #fff url(../img/covers.jpg) repeat 1055px bottom;
   height: 343px;
   margin-left:1px;
   overflow: hidden;
   position: relative;
   width:99.5%;
   z-index: -1;
    -moz-animation-name: pan;
    -moz-animation-duration:40s;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: linear;
   -webkit-animation-name: pan;
   -webkit-animation-duration:40s;
   -webkit-animation-iteration-count: infinite;
   -webkit-animation-timing-function: linear;
}


@-moz-keyframes pan {
    0% {
        background-position: 1338px bottom;
    }
    100% {
        background-position: left bottom;
    }
}
 
@-webkit-keyframes pan {
   0% {
      background-position: 1338px bottom;
   }
   100% {
      background-position: left bottom;
   }
}