@charset "utf-8";
/* CSS Document */
*{
	margin:0px;
	padding:0px	
}

/***Layout******************************************************/

html, body{
	width:100%;
	height:100%;
	padding:0;
	margin:0;
	background:#FFF;
	position:relative;
	 
}

#zentrierhilfe {
	width:100px;
	height:50%;
	margin-bottom:-300px; /* Hälfte der Wrapper-Höhe! */
	float:left;
	position:relative;	
}


#wrapper {
	width:800px;
	height:600px;
	margin:0 auto;
	clear:left;	
	z-index:0;
	
	
	-webkit-perspective: 800px;
	-moz-perspective: 800px;
	-ms-perspective: 800px;
	perspective: 800px;
}

#wrapper img, a, div{
	position:absolute;
	border: 0px;	
}




/***Grafik & Animation******************************************/

/* K  ********************************************************/

#Dom {
	height:165px;
	width:121px;		
	bottom:200px;
	left:15px;
}



/* Ö  ********************************************************/

#Ö {
	height:82px;
	width:80px;	
	bottom:200px;
	left:130px;
}
	
	
#ÖPunkte{
	left:140px;
	bottom:280px;
}
		
	

/* L1 *******************************************************/

#L1 {
	height:130px;
	width:80px;	
	bottom:200px;
	left:200px;	
}



/* L2      ***********************************************************/

#L2 {
	bottom:200px;
	left:240px;
}



/* E1   ********************************************************************/

#E1 {
	bottom:200px;
	left:290px;
}



/* F  ******************************************************/

#F-Kopf { 
	width:48px;
	height:50px;
	bottom:290px;
	left:355px;
	
	-webkit-transition-duration:2s;
	-webkit-transition-delay:1s;
}


#F-Sockel {
	bottom:202px;
	left:355px;
}



/* O    ******************************************************/


#O {
	bottom:200px;
	left:400px;
}


/*  R  ****************************************************************/

#R {
	bottom:200px;
	left:490px;
}



/*  N1  ******************************************************************/

#N1 {
	width: 71px;
	height: 85px;
	bottom:200px;
	left:530px;
}

#Schlitz{
	top:320px;
	left:547px;
	width:35px;
	height:4px;
	background:#333;
	border: 1px solid black;
	
	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
	-ms-transition: all 0.5s;
	transition: all 0.5s;
}

#Schlitz:hover,   #N1:hover +#Schlitz{	
	height: 10px;
	background:#CCC;
	
	-webkit-transition: all 0.5s;
	-webkit-transform-origin:top;
	-moz-transition: all 0.5s;
	-moz-transform-origin:top;
	-ms-transition: all 0.5s;
	-ms-transform-origin:top;
	transition: all 0.5s;
	transform-origin:top;
}



/*  I  *****************************************************************/
 
#I{
	bottom:200px;
	left:615px;
}


#Moewe {
	bottom:262px;
	left:607px;
	z-index:2;
	
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}

#Moewe:hover{
	-webkit-transition: all 0.3s ease-in-out;	
	-webkit-transform:rotate(-6deg);
	-moz-transition: all 0.3s ease-in-out;	
	-moz-transform:rotate(-6deg);
	-ms-transition: all 0.3s ease-in-out;	
	-ms-transform:rotate(-6deg);
	transition: all 0.3s ease-in-out;	
	transform:rotate(-6deg);
}

#Schitt {	
	bottom:275px;
	left:632px;	
	z-index:1;
}

#Moewe:hover +#Schitt {
	-webkit-transition: all 0.6s ease-in;	
	-webkit-transform: translate(5px,75px) scale(2) rotate(90deg);
	-moz-transition: all 0.6s ease-in;	
	-moz-transform: translate(5px,75px) scale(2) rotate(90deg);
	-ms-transition: all 0.6s ease-in;	
	-ms-transform: translate(5px,75px) scale(2) rotate(90deg);
	transition: all 0.6s ease-in;	
	transform: translate(5px,75px) scale(2) rotate(90deg);
}



/*  E2  **********************************************************************/

#E2 {
	bottom:200px;
	left:635px;
}

/*  N2  ************************************************************************/

#N2 {
	bottom:200px;
	left:710px;
}

#Schild {
	width: 52px;
	height: 30px;
	bottom: 240px;
	left: 718px;		
	border:2px solid black;
	border-radius:4px;
	background:#c96;
	z-index:5;
	}
	
#Schild img {left: 5px;}

#Schild:hover {
	-webkit-transition: all 0.2s ease-out;
	-webkit-transform-origin:top;
	-webkit-transform:rotateX(15deg);
	-moz-transition: all 0.2s ease-out;
	-moz-transform-origin:top;
	-moz-transform:rotateX(15deg);
	-ms-transition: all 0.2s ease-out;
	-ms-transform-origin:top;
	-ms-transform:skew(-15deg);
	transition: all 0.2s ease-out;
	transform-origin:top;
	transform:rotateX(15deg);
}


/* Rest  ************************************************************************/

#Sand {
	bottom:170px;
	left:5px;
	z-index:-1;
}

#Sand2 {
	bottom:176px;
	left:5px;
	z-index:3;		
}


/* Album  ************************************************************************/


#thumbmenu{
	width: 780px;
	height:	 300px;
	margin: 10px 10px;	
	float:left;
	position:relative;	
}

#thumbmenu .thumbs {
	list-style-type:none;
	width: 800px;
}


#thumbmenu .thumbs li a{	
	height:93px;
	width: 110px;
	float:left;	
	padding: 6px;
	/*margin-bottom:230px;*/
	position:relative;
	/*z-index:3;*/
	opacity:0.05;		
	transition: all 10s ;	
}


#thumbmenu .thumbs img{
	border-radius: 20px;
}


#thumbmenu .thumbs li a:hover {
	opacity:1;
	/*-webkit-transition: all 0.5s ;
	-moz-transition: all 0.5s ;
	-ms-transition: all 0.5s ;
	-o-transition: all 0.5s ;*/
	transition: all 0.7s ;
	
	/*
	-webkit-transform:rotate(3deg);
	-moz-transform:rotate(3deg);
	-ms-transform:rotate(3deg);   */
}

/*
#thumbmenu:target {
	opacity:0.6;
	z-index:3;
}
*/


#thumbmenu .box {
	list-style-type:none;
	width: 800px;
	border:none;
	opacity:1;
}

/*

#thumbmenu .box li a{
	display:none;
	position:relative;
	left: 0px;
	top: 500px;
	width: 800px;
	height: 200px;
}



#thumbmenu .box li a:target{
	display:block;	
				
	position:absolute;
	left: 0px;
	top: 0px;
	width: 800px;
	height: 600px;
	z-index:10;		
	
}
*/

#thumbmenu .box li a{
	
	position:absolute;
	left: 60px;
	top: 0px;
	width: 680px;
	height: 600px;
	opacity:0;	
	z-index:-1;
	outline:none;	
	border:solid 2px black;
	border-radius: 20px;
	background:white;
	
	
	line-height:1100px;
	color:black;
	font-size:36px;
	font-family:"Comic Sans MS", cursive;
	text-decoration:none;
	text-align:center;
	
	
	
	
		/*1
	-webkit-transform-origin:bottom;
	-moz-transform-origin:bottom;
	
	-webkit-transition: all 1s ;
	-moz-transition: all 1s ;
	-ms-transition: all 1s ;
	-o-transition: all 1s ; */
	transition: all 1s ;
	/*
	-webkit-transform:rotateX(90deg);
	-moz-transform:rotateX(90deg);
	-ms-transform: scale(0);
	*/
	transform-origin:top;
	transform:rotateX(-90deg);
}

#thumbmenu .box li a:target{
	/*display:block;	*/
	/*background:#FFF;*/
	
	z-index:10;		
	opacity:1;
	/*
	-webkit-transition: all 1s ;
	-moz-transition: all 1s ;
	-ms-transition: all 1s ;
	-o-transition: all 1s ; */
	transition: all 1s ;
	/*
	-webkit-transition-timing-function:ease-out;
	
	-webkit-transform:rotateX(0deg);
	-moz-transform:rotateX(0deg);
	-ms-transform:scale(1);*/
	transform:rotateX(0deg);
	transform-origin:bottom;
}

#thumbmenu .box img{
	border-radius: 40px;
	top: 20px;
	left:20px;
	
}