.left-wall{
	position: absolute;
	left: 0px; 
	top: 0px;
	width: 2100px;
	height: 600px;
	transform:
		perspective( 239px )						
		rotateY( 43deg );							
	transform-origin: left center;					
}

.top-wall {
	position: absolute;
	left: 0px;
	top: 0px;
	width: 600px;
	height: 1500px;
	transform:
		perspective( 364px )						
		rotateX( -46deg );							
	transform-origin: top center;				
}

.right-wall{
	position: absolute;
	left: -1500px; /* - (width - 600 px) */
	top: 0px;
	width: 2100px;
	height: 600px;
	transform:
		perspective( 239px )						
		rotateY( -43deg );							
	transform-origin: right center;			
}

.bottom-wall {
	position: absolute;
	left: 0px;
	top: -900px; /* - (height - 600px) */
	width: 600px;
	height: 1500px; 
	transform:
		perspective( 364px )					
		rotateX( 46deg );							
	transform-origin: bottom center;		
}

.back-wall {
	position: absolute;
	left: 0px;
	top: 0px;
	width: 600px;
	height: 600px;
	/* Transition Properties */
	transition: transform 1s; /* Ausgangszustand */	
	transform: scale( 0.457, 0.3646 );	 /* Ausgangszustand */					
	transform-origin: center center;	
	
		-webkit-animation-name: elevator-none; 
		-webkit-animation-timing-function: linear;
		-webkit-animation-duration: 6s;
		-webkit-animation-iteration-count: 0; 		
		
		animation-name: elevator-none; 
		animation-timing-function: linear;
		animation-duration: 6s;
		animation-iteration-count: 0; 	
}


.left-wall-tile{
	position: absolute; 
	left: -300px; 
	top: 0px;
	width: 2100px; /* Breite + left Verschiebung */
	height: 600px;	
	
	/* z-index: 4; */
	opacity: 0.05; 
	
	background-color:#ffffff; /* rgba(255,255,255,1.0); */
	background-image: url('../img/kacheln/tile-5_75x75px.png');
	background-position: 0px 0px;
	background-repeat: repeat;
		/* Kachel-Wander-Effekt mittels CSS */

		-webkit-animation-name: tile-float-1;
		-webkit-animation-timing-function: linear;
		-webkit-animation-duration: 2s;
		-webkit-animation-iteration-count: 0; 		
		
		animation-name: tile-float-1;
		animation-timing-function: linear;
		animation-duration: 2s;
		animation-iteration-count: 0; 
	}	
	
/* Kacheln der linken Wand 2. Ebene */
.left-wall-tile2{
	position: absolute; /* nochmalige Angabe war notwendig. Warum? */
	left: -300px; /* 0px ist ohne Hervortretung zum Betrachter */
	top: 0px;
	width: 2100px; /* Breite + left Verschiebung */
	height: 600px;		
	
	/* z-index: 4; */
	opacity: 0; 
	
	background-color:#ffffff; /* rgba(255,255,255,1.0); */
	background-image: url('../img/kacheln/tile-1_75x75px.png');
	background-position: 0px 0px;
	background-repeat: repeat;
		/* Kachel-Wander-Effekt mittels CSS */

		-webkit-animation-name: tile-float-1;
		-webkit-animation-timing-function: linear;
		-webkit-animation-duration: 2s;
		-webkit-animation-iteration-count: 0; 		
		
		animation-name: tile-float-1;
		animation-timing-function: linear;
		animation-duration: 2s;
		animation-iteration-count: 0; 
	}		

	


.top-wall-tile{
	position: absolute;
	left: 0px;
	top: -225px; /* 0px ist ohne Hervortretung zum Betrachter */
	width: 600px;
	height: 1500px; /* height + hervortretung */
	/* z-index: 4; */
	opacity: 0.05; 	
	
	background-color:#ffffff;
	background-image: url('../img/kacheln/tile-5_75x75px.png');
	background-position: 0px 0px;
	background-repeat: repeat; 
		/* Kachel-Wander-Effekt mittels CSS */
		
		-webkit-animation-name: tile-float-1;
		-webkit-animation-timing-function: linear;
		-webkit-animation-duration: 2s;
		-webkit-animation-iteration-count: 0; 			
		
		animation-name: tile-float-1;
		animation-timing-function: linear;
		animation-duration: 2s;
		animation-iteration-count: 0; 
	}	
	
.top-wall-tile2{
	position: absolute;
	left: 0px;
	top: -225px; 
	width: 600px;
	height: 1500px; 
	/* z-index: 4; */
	opacity: 0; 
	
	background-color:#000000;
	background-image: url('../img/kacheln/tile-2_75x75px.png');
	background-position: 0px 0px;
	background-repeat: repeat; 
		/* Kachel-Wander-Effekt mittels CSS */
		
		-webkit-animation-name: tile-float-1;
		-webkit-animation-timing-function: linear;
		-webkit-animation-duration: 2s;
		-webkit-animation-iteration-count: 0; 			
		
		animation-name: tile-float-1;
		animation-timing-function: linear;
		animation-duration: 2s;
		animation-iteration-count: 0; 
	}		
	


.right-wall-tile{
		position: absolute;
	left:300px; /* Verschiebung nach vorne */
	top: 0px;
	width: 2100px; /* Breite + zusätzliche Ausdehnung nach vorne */
	height: 600px;
	/* z-index: 4; */
	opacity: 0.05; 	
	
	background-color:#ffffff;
	background-image: url('../img/kacheln/tile-5_75x75px.png');
	background-position: 0px 0px;
	background-repeat: repeat; 
		/* Kachel-Wander-Effekt mittels CSS */
		
		-webkit-animation-name: tile-float-1;
		-webkit-animation-timing-function: linear;
		-webkit-animation-duration: 2s;
		-webkit-animation-iteration-count: 0;			
		
		animation-name: tile-float-1;
		animation-timing-function: linear;
		animation-duration: 2s;
		animation-iteration-count: 0;	
	}	
	
.right-wall-tile2{
		position: absolute;
	left:300px; /* Verschiebung nach vorne */
	top: 0px;
	width: 2100px; /* Breite + zusätzliche Ausdehnung nach vorne */
	height: 600px;
	/* z-index: 4; */
	opacity: 0; 	
	
	background-color:#ffffff;
	background-image: url('../img/kacheln/tile-3_75x75px.png');
	background-position: 0px 0px;
	background-repeat: repeat; 
		/* Kachel-Wander-Effekt mittels CSS */
		
		-webkit-animation-name: tile-float-1;
		-webkit-animation-timing-function: linear;
		-webkit-animation-duration: 2s;
		-webkit-animation-iteration-count: 0;			
		
		animation-name: tile-float-1;
		animation-timing-function: linear;
		animation-duration: 2s;
		animation-iteration-count: 0;	
	}		



.bottom-wall-tile{
		position: absolute;
	left: 0px;
	top:  225px;
	width: 600px;
	height: 1725px; /* Height + zusätzliche Ausdehnung nach vorne */
	/* z-index: 4; */
	opacity: 0.05; 	
	
	background-color:#ffffff;
	background-image: url('../img/kacheln/tile-5_75x75px.png');
	background-position: 0px 0px;
	background-repeat: repeat; 
		/* Kachel-Wander-Effekt mittels CSS */

		-webkit-animation-name: tile-float-1;
		-webkit-animation-timing-function: linear;
		-webkit-animation-duration: 2s;
		-webkit-animation-iteration-count: 0;			
		
		animation-name: tile-float-1;
		animation-timing-function: linear;
		animation-duration: 2s;
		animation-iteration-count: 0;		
	}	
	
	.bottom-wall-tile2{
			position: absolute;
	left: 0px;
	top:  225px;
	width: 600px;
	height: 1725px; /* Height + zusätzliche Ausdehnung nach vorne */
	/* z-index: 4; */
	opacity: 0; 	
	
	background-color:#000000;
	background-image: url('../img/kacheln/tile-4_75x75px.png');
	background-position: 0px 0px;
	background-repeat: repeat; 
		/* Kachel-Wander-Effekt mittels CSS */

		-webkit-animation-name: tile-float-1;
		-webkit-animation-timing-function: linear;
		-webkit-animation-duration: 2s;
		-webkit-animation-iteration-count: 0;			
		
		animation-name: tile-float-1;
		animation-timing-function: linear;
		animation-duration: 2s;
		animation-iteration-count: 0;		
	}	
	

.back-wall-tile{
	/* z-index: 4; */
	opacity: 0.05; 	
	
	background-color:#ffffff; 
	
	background-image: url('../img/kacheln/tile-5_75x75px.png');
	background-position: center center;
	background-repeat: repeat; 

	} 
	

/* x+ */
@-webkit-keyframes tile-float-1 {
	0%		{background-position:	0px		0px;		}
	100%	{background-position:	75px		0px;		}
	}	

@keyframes tile-float-1 {
	0%		{background-position:	0px		0px;		}
	100%	{background-position:	75px		0px;		}
	}	
	
/* x- */
@-webkit-keyframes tile-float-2 {
	0%		{background-position:	0px		0px;		}
	100%	{background-position:	-75px	   0px;		}
	}	

@keyframes tile-float-2 {
	0%		{background-position:	0px		0px;		}
	100%	{background-position:	-75px	   0px;		}
	}	
	
/* y+ */		
@-webkit-keyframes tile-float-3 {
	0%		{background-position:	0px		0px;		}
	100%	{background-position:	0px		75px;		}
	}	
	
@keyframes tile-float-3 {
	0%		{background-position:	0px		0px;		}
	100%	{background-position:	0px		75px;		}
	}		
	
/* y- */		
@-webkit-keyframes tile-float-4 {
	0%		{background-position:	0px		0px;		}
	100%	{background-position:	0px		-75px;		}
	}	
	
@keyframes tile-float-4 {
	0%		{background-position:	0px		0px;		}
	100%	{background-position:	0px		-75px;		}
	}			
	

/* xy+ */					
@-webkit-keyframes tile-float-5 {
	0%		{background-position:	0px		0px;		}
	100%	{background-position:	75px		75px;	}
	}	
	
@keyframes tile-float-5 {
	0%		{background-position:	0px		0px;		}
	100%	{background-position:	75px		75px;	}
	}	
	
/* xy- */					
@-webkit-keyframes tile-float-6 {
	0%		{background-position:	0px		0px;		}
	100%	{background-position:	-75px		-75px;	}
	}	
	
@keyframes tile-float-6 {
	0%		{background-position:	0px		0px;		}
	100%	{background-position:	-75px		-75px;	}
	}	
		
/* Back & forth */	
/* linke Wand: nach oben kurz */
@-webkit-keyframes tile-float-1-3 {
	0%		{background-position:	0px		0px;		}
	100%	{background-position:	0px	-15px;		}
	}	

@keyframes tile-float-1-3 {
	0%		{background-position:	0px		0px;		}
	100%	{background-position:	0px	-15px;		}
	}	
	
@-webkit-keyframes tile-float-2-3 {
	0%		{background-position:	0px		0px;		}
	100%	{background-position:	15px		0px;		}
	}	
	
@keyframes tile-float-2-3 {
	0%		{background-position:	0px		0px;		}
	100%	{background-position:	15px		0px;		}
	}		
		
/* rechte Wand: nach unten kurz */					
@-webkit-keyframes tile-float-3-3 {
	0%		{background-position:	0px		0px;		}
	100%	{background-position:	0px		15px;	}
	}	
	
@keyframes tile-float-3-3 {
	0%		{background-position:	0px		0px;		}
	100%	{background-position:	0px		15px;	}
	}	
		
/* untere Wand: nach rechts kurz */				
@-webkit-keyframes tile-float-4-3 {
	0%		{background-position:	0px		0px;		}
	100%	{background-position:	-15px		0px;		}
	}	
	
@keyframes tile-float-4-3 {
	0%		{background-position:	0px		0px;		}
	100%	{background-position:	-15px		0px;		}
	}		
	

@-webkit-keyframes elevator-none {
	0%			{ transform:	 scale( 0.457, 0.3646 );		} /* Ausgangswand */
	100%		{ transform:	 scale( 0.457, 0.3646 );		} /* Ausgangswand */
	}			
	
@keyframes elevator-none {
	0%			{ transform:	 scale( 0.457, 0.3646 );		} /* Ausgangswand */
	100%		{ transform:	 scale( 0.457, 0.3646 );		} /* Ausgangswand */
	}	

@-webkit-keyframes elevator-0 {
	0%		{ transform:	 scale( 0.457, 0.3646 );			} /* Ausgangswand */
	1%		{ transform:	 scale( 3, 3 );			} 
	10%		{ transform:	 scale( 3, 3 );			}
	30%		{ transform:	 scale( 2, 2 );			}
	50%		{ transform:	 scale( 1, 1 );			}
	55%		{ transform:	 scale( 0.9, 0.878 );			}
	60%		{ transform:	 scale( 0.8, 0.78 );				}
	65%		{ transform:	 scale( 0.7, 0.65 );				}
	70%		{ transform:	 scale( 0.6, 0.54 );				}
	75%		{ transform:	 scale( 0.5, 0.42 );				}
	80%		{ transform:	 scale( 0.457, 0.3646 );		} /* Ausgangswand */
	100%		{ transform:	 scale( 0.457, 0.3646 );		} /* Ausgangswand */
	}			
	
@keyframes elevator-0 {
	0%		{ transform:	 scale( 0.457, 0.3646 );			} /* Ausgangswand */
	1%		{ transform:	 scale( 3, 3 );			} 	
	10%		{ transform:	 scale( 3, 3 );			}
	30%		{ transform:	 scale( 2, 2 );			}
	50%		{ transform:	 scale( 1, 1 );			}
	55%		{ transform:	 scale( 0.9, 0.878 );			}
	60%		{ transform:	 scale( 0.8, 0.78 );				}
	65%		{ transform:	 scale( 0.7, 0.65 );				}
	70%		{ transform:	 scale( 0.6, 0.54 );				}
	75%		{ transform:	 scale( 0.5, 0.42 );				}
	80%		{ transform:	 scale( 0.457, 0.3646 );		} /* Ausgangswand */
	100%		{ transform:	 scale( 0.457, 0.3646 );		} /* Ausgangswand */
	}	

/* 1: standard -> nach vorne */
@-webkit-keyframes elevator-1 {
	0%			{ transform:	 scale( 0.457, 0.3646 );		} /* Ausgangswand */
	10%		{ transform:	 scale( 0.5, 0.42 );				}
	20%		{ transform:	 scale( 0.6, 0.54 ); 			}
	30%		{ transform:	 scale( 0.7, 0.65 );				}
	40%		{ transform:	 scale( 0.8, 0.78 );				}
	50%		{ transform:	 scale( 0.9, 0.878 );			}
	60%		{ transform:	 scale( 0.8, 0.78 );				}
	70%		{ transform:	 scale( 0.7, 0.65 );				}
	80%		{ transform:	 scale( 0.6, 0.54 );				}
	90%		{ transform:	 scale( 0.5, 0.42 );				}
	100%		{ transform:	 scale( 0.457, 0.3646 );		} /* Ausgangswand */
	}			
	
@keyframes elevator-1 {
	0%			{ transform:	 scale( 0.457, 0.3646 );		} /* Ausgangswand */
	10%		{ transform:	 scale( 0.5, 0.42 );				}
	20%		{ transform:	 scale( 0.6, 0.54 ); 			}
	30%		{ transform:	 scale( 0.7, 0.65 );				}
	40%		{ transform:	 scale( 0.8, 0.78 );				}
	50%		{ transform:	 scale( 0.9, 0.878 );			}
	60%		{ transform:	 scale( 0.8, 0.78 );				}
	70%		{ transform:	 scale( 0.7, 0.65 );				}
	80%		{ transform:	 scale( 0.6, 0.54 );				}
	90%		{ transform:	 scale( 0.5, 0.42 );				}
	100%		{ transform:	 scale( 0.457, 0.3646 );		} /* Ausgangswand */
	}	
	
/* 2 standard -> nach hinten */
@-webkit-keyframes elevator-2 {
	0%			{ transform:	 scale( 0.457, 0.3646 );		} /* Ausgangswand */
	10%		{ transform:	 scale( 0.33, 0.22 );				}
	20%		{ transform:	 scale( 0.27, 0.15 ); 			}
	30%		{ transform:	 scale( 0.2, 0.10 );				}
	40%		{ transform:	 scale( 0.1, 0.05 );				}
	50%		{ transform:	 scale( 0.05, 0.02 );			}
	60%		{ transform:	 scale( 0.1, 0.05 );				}
	70%		{ transform:	 scale( 0.2, 0,10 );				}
	80%		{ transform:	 scale( 0.27, 0,15 );				}
	90%		{ transform:	 scale( 0.33, 0,22 );				}
	100%		{ transform:	 scale( 0.457, 0.3646 );		} /* Ausgangswand */
	}			
	
@keyframes elevator-2 {
	0%			{ transform:	 scale( 0.457, 0.3646 );		} /* Ausgangswand */
	10%		{ transform:	 scale( 0.33, 0,22 );				}
	20%		{ transform:	 scale( 0.27, 0,15 ); 			}
	30%		{ transform:	 scale( 0.2, 0,10 );				}
	40%		{ transform:	 scale( 0.1, 0.05 );				}
	50%		{ transform:	 scale( 0.05, 0.02 );			}
	60%		{ transform:	 scale( 0.1, 0.05 );				}
	70%		{ transform:	 scale( 0.2, 0,10 );				}
	80%		{ transform:	 scale( 0.27, 0,15 );				}
	90%		{ transform:	 scale( 0.33, 0,22 );				}
	100%		{ transform:	 scale( 0.457, 0.3646 );		} /* Ausgangswand */
	}		
	
@-webkit-keyframes elevator-corridor {
	0%			{ transform:	 scale( 0.457, 0.3646 );		} /* Ausgangswand */
	40%		{ transform:	 scale( 0.33, 0,22 );			}
	50%		{ transform:	 scale( 0.28, 0,16 ); 			}
	75%		{ transform:	 scale( 0.28, 0,16 ); 			}
	100%		{ transform:	 scale( 0.28, 0,16 ); 			}
	}			
	
@keyframes elevator-corridor {
	0%			{ transform:	 scale( 0.457, 0.3646 );		} /* Ausgangswand */
	40%		{ transform:	 scale( 0.33, 0,22 );			}
	50%		{ transform:	 scale( 0.28, 0,16 ); 			}
	75%		{ transform:	 scale( 0.28, 0,16 ); 			}
	100%		{ transform:	 scale( 0.28, 0,16 ); 			}
	}		
	
/* shrine -> nach hinten */
@-webkit-keyframes elevator-shrine {
	0%			{ transform:	 scale( 0.457, 0.3646 );		} /* Ausgangswand */
	40%		{ transform:	 scale( 0.33, 0,22 );			}
	50%		{ transform:	 scale( 0.28, 0,16 ); 			}
	75%		{ transform:	 scale( 0.33, 0,22 ); 			}
	100%		{ transform:	 scale( 0.457, 0.3646 ); 			}
	}			
	
@keyframes elevator-shrine {
	0%			{ transform:	 scale( 0.457, 0.3646 );		} /* Ausgangswand */
	40%		{ transform:	 scale( 0.33, 0,22 );			}
	50%		{ transform:	 scale( 0.28, 0,16 ); 			}
	75%		{ transform:	 scale( 0.33, 0,22 ); 			}
	100%		{ transform:	 scale( 0.457, 0.3646 ); 			}
	}