/* Marquee */

/* transform: translateX(50%); (Erklaerung: 0% { transform:  translateX(100%); } 100% { transform: translateX(-100%); } ) */
/* -> animation: marq1 6s linear infinite; */
.marq1 {
	position: relative;
	width: 99vw;
	max-width: 99vw;
	height: 25px;
	border: 0;
	white-space: nowrap;
	overflow: hidden;
	background-color: transparent;
	color: darkgreen;  
}
.marq1 p {
	position: absolute;
	display: inline-block;
	width: 100%;
	height: 100%;
	line-height: 24px;
	margin: 0;
	padding-right: 95%;
	left: 3%;
	text-align: center;
	font-size: 0.8rem;
	font-weight: bold;
	animation: marq1 15s ease-out;
	transition-delay: 0s;
}
.marq1 p:hover {
	animation-play-state: paused;
}
@keyframes marq1 {
0%   { transform: translateX(100%); }
100% { transform: translateX(0%);   }
}
.marq2 {
	position: relative;
	width: 99vw;
	max-width: 99vw;
	height: 25px;
	border: 0;
	white-space: nowrap;
	overflow: hidden;
	background-color: transparent;
	color: darkgreen;
}
.marq2 p {
	position: absolute;
	display: inline-block;
	width: 100%;
	height: 100%;
	line-height: 24px;
	margin: 0;
	padding-right: 105%;
	left: 3%;
	text-align: center;
	font-size: 0.8rem;
	font-weight: bold;
	animation: marq2 20s ease-out;
	transition-delay: 2s;
}
.marq2 p:hover {
	animation-play-state: paused;
}
@keyframes marq2 {
0%   { transform: translateX(200%); }
100% { transform: translateX(0%);   }
}