.page{
	width:830px;
	margin:auto;
	position:relative;
}

.bg{
	width:2560px;
	height:1600px;
	overflow: hidden;
	position:absolute;
	top:-300px;
	left:-300px;
	background-image:url('../images/bg.jpg');
	z-index:-10;
}

.licht1{
	width:2560px;
	height:1400px;
	overflow: hidden;
	position:absolute;
	top:-100px;
	left:-100px;
	background-image:url('../images/licht1.png');
	z-index:-10;
	animation-name: licht1;
	animation-duration: 20s;
	animation-fill-mode: forwards;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}

@keyframes licht1{
	0% {opacity: 0.3;}
	50% {opacity: 0.1;}
	100% {opacity: 0.3}
}

.licht2{
	width:2560px;
	height:1400px;
	overflow: hidden;
	position:absolute;
	top:-100px;
	left:-100px;
	background-image:url('../images/licht2.png');
	z-index:-10;
	animation-name: licht2;
	animation-duration: 30s;
	animation-fill-mode: forwards;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}

@keyframes licht2{
	0% {opacity: 0.1;}
	50% {opacity: 0.3;}
	100% {opacity: 0.1}
}

.licht3{
	width:2560px;
	height:1600px;
	overflow: hidden;
	position:absolute;
	top:-300px;
	left:-300px;
	background-image:url('../images/licht3.png');
	z-index:-10;
	animation-name: licht3;
	animation-duration: 50s;
	animation-fill-mode: forwards;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}

@keyframes licht3{
	0% {opacity: 0.3;}
	50% {opacity: 0.5;}
	100% {opacity: 0.3}
}

.fee1{
	width:20px;
	height:20px;
	overflow: hidden;
	position:absolute;
	top:400px;
	left:-100px;
	background-image:url('../images/fee.png');
	z-index:-10;
	animation-name: fee1;
	animation: fee1 alternate infinite;
	animation-duration: 20s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}

@keyframes fee1{
	0% {opacity: 0; filter: hue-rotate(60deg)}
	30% {transform:translate(50px,50px) scale(2); opacity: 1;}
	40% {transform:translate(15px,-45px); opacity: 0.6;}
	55% {transform:translate(-8px,-75px) scale(1); opacity: 1; filter: hue-rotate(250deg);}
	75% {transform:translate(40px,-95px); opacity: 0.8;}
	90% {transform:translate(30px,-60px) scale(2.5); opacity: 1;}
	100% {transform:translate(0px,0px); opacity: 0; filter: hue-rotate(60deg)}
}

.fee2{
	width:20px;
	height:20px;
	overflow: hidden;
	position:absolute;
	top:646px;
	left:800px;
	background-image:url('../images/fee.png');
	z-index:-10;
	animation-name: fee2;
	animation-fill-mode: forwards;
	animation-duration: 15s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}

@keyframes fee2{
	0% {opacity: 0}
	25% {transform:translate(40px,-30px) scale(1.5); opacity: 1;}
	35% {transform:translate(25px,-50px); opacity: 0.6;}
	50% {transform:translate(-10px,-80px) scale(1); opacity: 1; filter: hue-rotate(40deg);}
	70% {transform:translate(35px,-90px); opacity: 0.8;}
	80% {transform:translate(25px,-50px) scale(2); opacity: 1;}
	100% {transform:translate(0px,0px); opacity: 0}
}

.fee3{
	width:20px;
	height:20px;
	overflow: hidden;
	position:absolute;
	top:250px;
	left:880px;
	background-image:url('../images/fee.png');
	z-index:-10;
	animation-name: fee3;
	animation-fill-mode: forwards;
	animation-duration: 30s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}

@keyframes fee3{
	0% {opacity: 0}
	15% {transform:translate(20px,-50px) scale(1); opacity: 1;}
	40% {transform:translate(50px,-25px); opacity: 0.5;}
	60% {transform:translate(-10px,-35px) scale(1.5); opacity: 1; filter: hue-rotate(100deg);}
	75% {transform:translate(40px,-10px); opacity: 0.5;}
	80% {transform:translate(15px,-60px) scale(2); opacity: 1;}
	100% {transform:translate(0px,0px); opacity: 0}
}

.foxl{
	width:140px;
	height:110px;
	overflow: hidden;
	float:left;
	position:absolute;
	top:646px;
	left:140px;
	background-image:url('../images/foxl_klein.png');
	z-index:4;
	animation-name: foxl;
    animation-delay: 30s;
	animation-fill-mode: forwards;
	animation-duration: 15s;
	transition: width 5s;
}

@keyframes foxl{
	30% {top:590px}
	45% {top:590px}
	70% {top:570px}
	95% {top:570px}
	100% {top:646px}
}

.karlchen{
	width:300px;
	height:281px;
	overflow: hidden;
	float:left;
	position:absolute;
	top:300px;
	left:450px;
	background-image:url('../images/karlchen_klein.png');
	z-index:-10;
	animation-name: karlchen;
    animation-delay: 90s;
	animation-fill-mode: forwards;
	animation-duration: 10s;
	animation-timing-function: ease-out;
	transition: width 6s;
}

@keyframes karlchen{
	40% {left:550px}
	50% {left:600px}
	60% {left:600px}
	75% {left:580px}
	95% {left:600px}
	100% {left:450px}
}

.stamm{
	width:185px;
	height:1292px;
	overflow: hidden;
	float:left;
	position:absolute;
	left:310px;
	background-image:url('../images/stamm.png');
	z-index:-10;
}

.VorhangLinks{
  width:365px;
  height:410px;
  background-image:url('../images/VorhangLinks.png');
  position:absolute;
  top:164px;
  left:0px;
  z-index:5;
  animation-name: VorhangLinks;
    animation-delay: 2s;
  animation-fill-mode: forwards;
  animation-duration: 6s;
  animation-timing-function: ease-out;
  transition: width 6s;
}

@keyframes VorhangLinks{
	25% {transform: skewX(5deg)}
	100% {left:-315px; transform: skewX(0deg)}
}

.VorhangRechts{
  width:395px;
  height:410px;
  background-image:url('../images/VorhangRechts.png');
  position:absolute;
  top:164px;
  left:320px;
  z-index:4;
  animation-name: VorhangRechts;
    animation-delay: 2s;
  animation-fill-mode: forwards;
  animation-duration: 6s;
  animation-timing-function: ease-out;
  transition: width 6s;
}

@keyframes VorhangRechts{
	25% {transform: skewX(-5deg)}
	100% {left:668px; transform: skewX(0deg)}
}

.banner{
	display:block;
	overflow:hidden;
	height:88px;
	width:674px;
	background-image:url('../images/banner.png');
	position:absolute;
	top:85px;
	left:60px;
	z-index:9;
}

.creatures{
	display:block;
	overflow:hidden;
	height:60px;
	width:115px;
	text-shadow: 0 0 10px #FFFFFF, 0 0 5px #FFFFFF;
	transform: rotate(-2deg);
	text-align: center;
	font-size:25px;
	position:absolute;
	top:720px;
	left:160px;
	z-index:9;
}

.creatures:hover{
    text-shadow: 0 0 10px #cc0000, 0 0 5px #cc0000;
}

.termine{
	display:block;
	overflow:hidden;
	height:35px;
	width:115px;
	text-shadow: 0 0 10px #FFFFFF, 0 0 5px #FFFFFF;
	transform: rotate(10deg);
	text-align: center;
	font-size:28px;
	position:absolute;
	top:735px;
	left:395px;
	z-index:9;
}

.termine:hover {
    text-shadow: 0 0 10px #9966cc, 0 0 5px #9966cc;
	}

.info{
	display:block;
	overflow:hidden;
	height:60px;
	width:80px;
	text-shadow: 0 0 10px #FFFFFF, 0 0 5px #FFFFFF;
	transform: rotate(-10deg);
	text-align: center;
	font-size:25px;
	position:absolute;
	top:680px;
	left:70px;
	z-index:9;
}

.info:hover {
    text-shadow: 0 0 10px #99ff66, 0 0 5px #99ff66;
}

.media{
	display:block;
	overflow:hidden;
	height:60px;
	width:110px;
	text-shadow: 0 0 10px #FFFFFF, 0 0 5px #FFFFFF;
	transform: rotate(1deg);
	text-align: center;
	font-size:25px;
	position:absolute;
	top:700px;
	left:285px;
	z-index:9;
}

.media:hover {
    text-shadow: 0 0 10px #cc6600, 0 0 5px #cc6600;
}

.facebook{
	display:block;
	overflow:hidden;
	height:35px;
	width:115px;
	text-shadow: 0 0 10px #FFFFFF, 0 0 5px #FFFFFF;
	position: absolute;
	text-align: center;
	font-size:28px;
	top:715px;
	left:525px;
	z-index:9;
}

.facebook:hover {
    text-shadow: 0 0 10px #66ccff, 0 0 5px #66ccff;
}

.post{
	display:block;
	overflow:hidden;
	height:35px;
	width:60px;
	text-shadow: 0 0 10px #FFFFFF, 0 0 5px #FFFFFF;
	transform: rotate(-15deg);
	text-align: center;
	font-size:32px;
	position: absolute;
	top:735px;
	left:660px;
	z-index:9;
}

.post:hover {
    text-shadow: 0 0 10px #ffff66, 0 0 5px #ffff66;
}

.main{
	position:relative;
}

.papierrolle{
	width:800px;
	height:150px;
	overflow: hidden;
	position:absolute;
	top:612px;
	background-image:url('../images/papierrolle.png');
	z-index:6;
}

.content{
	width:800px;
	height:600px;
	overflow: hidden;
	float:left;
	position:absolute;
	top:30px;
	background-image:url('../images/bg2.png');
	padding-bottom:25px;
	padding-top:135px;
	z-index:3;
}

a img {
	border:0;
}