#tematica {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	min-height: 550px;
	background: none;
	overflow: hidden;
}
#tematica h2 {
	color: #2c343b;
	text-transform: uppercase;
	font-size: 28px;
	font-weight: 600;
}
.scroll {
	position: relative;
	display: flex;
	width: 80%;
	overflow: hidden;
	/*background: #f00; */
	-webkit-mask-image: linear-gradient(
		90deg,
		transparent,
		#fff 20%,
		#fff 80%,
		transparent
	);
	mask-image: linear-gradient(
		90deg,
		transparent,
		#fff 20%,
		#fff 80%,
		transparent
	);
}
.scroll div {
	white-space: nowrap;
	animation: animate var(--t) linear infinite;
	animation-delay: calc(var(--t) * -1);
}
.scroll div:nth-child(2) {
	animation: animate2 var(--t) linear infinite;
	animation-delay: calc(var(--t) / -2);
}
@keyframes animate {
	0% {
		transform: translateX(100%);
	}
	100% {
		transform: translateX(-100%);
	}
}
@keyframes animate2 {
	0% {
		transform: translateX(0);
	}
	100% {
		transform: translateX(-200%);
	}
}
.scroll div span {
	display: inline-flex;
	margin: 10px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	background: transparent;
	color: #333;
	padding: 8px 20px;
	border-radius: 0px;
	transition: 0.3s;
	border: 1px solid #333;
}
.scroll div span:hover {
	color: #fff;
	border: none;
	background: linear-gradient(
		to right,
		rgba(26, 135, 228, 0) 0%,
		#1a87e4 15px,
		#1a87e4 calc(100% - 15px),
		rgba(26, 135, 228, 0) 100%
	);
	border-radius: 0;
}
.imgbx img {
	max-width: 100px;
	scale: 0.8;
	filter: grayscale(1);
	transition: 0.5s;
}
.imgbx img:hover {
	filter: grayscale(0);
}