.marq-area {
	width: 250px;
	height: 90px;
	white-space: nowrap;
	overflow: hidden;
	background-color: #0f0;

	padding-left: 5px;
	padding-right: 5px;
}

.marq-line {
	color: #fff;
	text-shadow: #000 0px 0px 1px, #000 0px 0px 1px, #000 0px 0px 1px, #000 0px 0px 1px, #000 0px 0px 1px;
	-webkit-font-smoothing: antialiased;
	width: fit-content;
}

.marq-animate {
	animation: marquee-scroll 10s ease-in-out infinite;
}

@keyframes marquee-scroll {
	0% {
		-moz-transform: translateX(0%);
		-webkit-transform: translateX(0%);
		transform: translateX(0%);
	}
	20% {
		-moz-transform: translateX(0%);
		-webkit-transform: translateX(0%);
		transform: translateX(0%);
	}
	50% {
		-moz-transform: translateX(calc(-100% + 250px));
		-webkit-transform: translateX(calc(-100% + 250px));
		transform: translateX(calc(-100% + 250px));
	}
	70% {
		-moz-transform: translateX(calc(-100% + 250px));
		-webkit-transform: translateX(calc(-100% + 250px));
		transform: translateX(calc(-100% + 250px));
	}
	100% {
		-moz-transform: translateX(0%);
		-webkit-transform: translateX(0%);
		transform: translateX(0%);
	}
}