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

.wechseln {
	width: 100vw;
	height: 100vh;
	animation: wechseln;
	animation-delay: 0s;
	animation-iteration-count: infinite;
	animation-fill-mode: forwards;
	animation-timing-function: ease-in-out;
	background-size: cover;
	top: 0px;
	position: fixed;
	margin: 0px;
}

#stapel {
	margin-top: -10vh;
	margin-right: 0px;
	margin-top: 0px;
	margin-left: 0px;
	position: relative;
	display:block
}

#stapel h1 {
	font-size: 0vw;
	position:relative;
	display: block;
	z-index: 901;
	animation-delay: 0s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	animation-fill-mode: forwards;
	margin: 0px;
	font-weight: normal;
	letter-spacing: 3px;
	opacity: 0;
}

#stapel h1, .wechseln {
	animation-duration: 20s;
}

#stapel h1 {
	color:rgba(255,255,255,1);
	position: absolute;
}

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

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

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

#stapel h1:nth-of-type(4) {
	animation-name: text4;
	/* [disabled]top: 100vh; */
	left: 24vw;
	position: absolute;
}

#stapel h1:nth-of-type(5) {
    animation-name: text5;
	top: 7vh;
}


@keyframes wechseln {
    0% { background-image:url(../bilder/startseite/2b.jpg); }
	15% { background-image:url(../bilder/startseite/2b.jpg); }
	20% { background-image:url(../bilder/startseite/3b.jpg); }
	35% { background-image:url(../bilder/startseite/3b.jpg); }
	40% { background-image:url(../bilder/startseite/risssanierung.jpg); }
	55% { background-image:url(../bilder/startseite/risssanierung.jpg); }
	60% { background-image:url(../bilder/startseite/4c.jpg); }
	90% { background-image:url(../bilder/startseite/4c.jpg); }
	100% { background-image:url(../bilder/startseite/2b.jpg); }
}

@keyframes text1 {
    0% { opacity:0; font-size: 0vw; }
	5% { opacity:0.9; font-size: 6vw; }
	15% { opacity:0.9; font-size: 6vw; }
	20% { opacity:0; font-size: 0vw; }
	100% { opacity:0; font-size: 0vw; }
}

@keyframes text2 {
    0% { opacity:0; font-size: 0vw; }
	20% {  opacity:0; font-size: 0vw; }
	25% { opacity:0.9; font-size: 7vw; }
	35% { opacity:0.9; font-size: 7vw; }
	40% { opacity:0; font-size: 0vw; }
	100% { opacity:0.9; font-size: 0vw; }
}

@keyframes text3 {
     0% { opacity:0; font-size: 0vw; }
	40% { opacity:0; font-size: 0vw; }
	45% { opacity:0.9; font-size: 7vw; }
	55% { opacity:0.9; font-size: 7vw; }
	60% { opacity:0; font-size: 0vw; }
	100% { opacity:0.9; font-size: 0vw; }
}


@keyframes text4 {
    0% { opacity:0; width: 0vw; top: 100vh; left: 24vw; }
	60% { opacity:0; width: 0vw; top: 100vh; left: 24vw; }
	65% { opacity:0.9; width: 39vw; top: 10vh; left: 24vw; }
	74% { opacity:0.9; width: 39vw; top: 10vh; left: 24vw; }
	80% { opacity:0; width: 39vw; top: 10vh; left: 24vw; }
	100% { opacity:0; width: 39vw; top: 10vh; left: 24vw; }
}

@keyframes text5 {
    0% { opacity:0; font-size: 0vw; }
	60% { opacity:0; font-size: 0vw; }
	75% { opacity:0; font-size: 9vw; }
	95% { opacity:0; font-size: 9vw; }
	100% { opacity:0.9; font-size: 0vw; }
}