div#hello-animation {
	position: absolute;
	top: 300px;
	left: 0px;
	width: 100vw;
	height: 1px;
	z-index: 9999;
	/* overflow: hidden; */
	/* background: #33003355; */
}

/* - - - - - - - - - - - - - - - - - - - - */
/* Katzomat                                */
/* - - - - - - - - - - - - - - - - - - - - */

#ding {
	display: none;
	/* background: #00333377; */
}
#ding.gogo {
	display: block;
	position: absolute;
	width: 250px;
	height: 175px;
	left: -250px;
	top: 50px;
	animation-name: hello;
	animation-duration: 12s;
	animation-iteration-count: 2;
	animation-timing-function: ease;
	/* background: #00333366; */
}

@media (max-width: 600px) {
	#ding.gogo {
		animation-iteration-count: 1;
	}
}

@keyframes hello {
	0% {
		left: -250px;
		top: 50px;
	}
	10% {
		top: 0px;
	}
	20% {
		top: 50px;
	}
	30% {
		top: 0px;
	}
	40% {
		left: calc(50vw - 210px);
		top: 50px;
	}
	50% {
		top: 0px;
	}
	60% {
		top: 50px;
	}
	70% {
		left: calc(50vw - 210px);
		top: 0px;
	}
	80% {
		top: 50px;
	}
	90% {
		top: 0px;
	}
	100% {
		left: calc(100vw);
		top: 50px;
		display: none;
	}
}


/* - - - - - - - - - - - - - - - - - - - - */
/* Sprechblase                             */
/* - - - - - - - - - - - - - - - - - - - - */

#bubble {
	display: none;
	/* background: #00333377; */
}
#bubble.gogo {
	display: block;
	position: absolute;
	left: -300px;
	top: -250px;
	width: 300px;
	height: 225px;
	animation-name: bubble;
	animation-duration: 12s;
	animation-iteration-count: 2;
	animation-timing-function: ease;
	/* background: #00333366; */
	opacity: 0;
}
/*
@media (max-width: 600px) {
	#bubble.gogo {
		width: 160px;
	}
}
*/
@keyframes bubble {
	0% {
		opacity: 0;
		transform: scale(0);
	}
	37% {
		top: -100px;
		left: calc(50vw - 150px);
		opacity: 0;
		transform: scale(0);
	}
	40% {
		top: -200px;
		left: calc(50vw - 150px);
		opacity: 1;
		transform: scale(1);
	}
	55% {
		top: -230px;
	}
	70% {
		top: -200px;
		left: calc(50vw - 150px);
		opacity: 1;
		transform: scale(1);
	}
	75% {
		top: -100px;
		left: calc(50vw - 150px);
		opacity: 0;
		transform: scale(0);
	}
	100% {
		transform: scale(0);
		opacity: 0;
		display: none;
	}
}