@charset "utf-8";
/* CSS Document */

.auto-scale {
	z-index: 9999;
	animation-duration: 1s;
	animation-delay: 0s;
	animation-timing-function: ease-in-out;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
	opacity: 0;
	animation-name: autoscale;
}

#stapel {
	width: 100%;
	display:block;
}

#stapel img {
	position: absolute;
	bottom: 0px;
	text-align: center;
	display: block;
	z-index: 901;
	animation-duration: 14s;
	animation-delay: 0s;
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
	margin: 0px;
	opacity: 0;
	width: 100%;
}

#stapel img:nth-of-type(1) {
    animation-name: bild1;
}

#stapel img:nth-of-type(2) {
    animation-name: bild2;
}

#stapel img:nth-of-type(3) {
    animation-name: bild3;
}

#stapel h1 {
	position: absolute;
	top: 0px;
	text-align: center;
	font-size: 550%;
	display: block;
	z-index: 901;
	animation-duration: 14s;
	animation-delay: 1s;
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
	margin: 0px;
	opacity: 0;
	width: 100%;
	color: rgba(135,136,138,1);
}

#stapel h1:nth-of-type(1) {
    animation-name: text1;
}

#stapel h1:nth-of-type(2) {
    animation-name: text2;
}

#stapel h1:nth-of-type(3) {
    animation-name: text3;
}

@keyframes autoscale {
    0% { opacity:0; font-size: 0%; }
	100% { opacity:1; font-size: 400%; }
}

@keyframes bild1 {
     0% {opacity:1}
    10% {opacity:1}
    20% {opacity:1}
    30% {opacity:0.5}
    40% {opacity:0}
    50% {opacity:0}
    60% {opacity:0}
    70% {opacity:0}
    80% {opacity:0}
    90% {opacity:0.5}
   100% {opacity:1}
}

@keyframes bild2 {
     0% {opacity:0}
    10% {opacity:0}
    20% {opacity:0}
    30% {opacity:0.5}
    40% {opacity:1}
    50% {opacity:1}
    60% {opacity:0.5}
    70% {opacity:0}
    80% {opacity:0}
    90% {opacity:0}
   100% {opacity:0}
}

@keyframes bild3 {
      0% {opacity:0}
    10% {opacity:0}
    20% {opacity:0}
    30% {opacity:0}
    40% {opacity:0}
    50% {opacity:0}
    60% {opacity:0.5}
    70% {opacity:1}
    80% {opacity:1}
    90% {opacity:0.5}
   100% {opacity:0}
}

@keyframes text1 {
     0% {opacity:0; transform: scale(0); }
	10% {opacity:1; transform: scale(1); }
    20% {opacity:1; transform: scale(1); }
    30% {opacity:0; transform: scale(0); }
    40% {opacity:0}
   100% {opacity:0}
}

@keyframes text2 {
     0% {opacity:0}
    30% {opacity:0; transform: scale(0); }
    40% {opacity:1; transform: scale(1); }
    50% {opacity:1; transform: scale(1); }
    60% {opacity:0; transform: scale(0); }
   100% {opacity:0}
}

@keyframes text3 {
      0% {opacity:0}
    60% {opacity:0; transform: scale(0); }
    70% {opacity:1; transform: scale(1); }
    80% {opacity:1; transform: scale(1); }
    90% {opacity:0; transform: scale(0); }
	100% {opacity:0; transform: scale(0); }
}