.corner-banner,
.corner-banner2 {
	background-color: $color_purple_alt;
	width: 798px;
	position: relative;
	.text {
		position: absolute;
		font-size: 19.34px;
		color: $color_blue;
		font-family: $font_secondary;
		font-style: italic;
		letter-spacing: 0.03px;
	}

	&.top {
		position: absolute;
		top: -3px;
		height: 42px;
		line-height: 42px;
		transform: rotate(-45deg);
		left: -335px;
	}

	&.bottom {
		width: 100%;
		height: 84px;
		line-height: 84px;
		.text {
			color: $color_pink;
			font-size: 34.88px;
			letter-spacing: 0;
			display: block;
			white-space: nowrap;
			left: -309px;
			animation: moveRight 5s linear infinite;
		}
		.logo {
			width: 29px;
			height: auto;
			margin: 0 25px;
		}
		.arrowRight {
			width: 10.68px;
			height: auto;
			margin: 0 12px;
		}
	}

	@include media-breakpoint-up(md) {
		.text {
			font-size: 24.15px;
		}
		&.top {
			top: 2px;
			height: 53px;
			line-height: 53px;
		}
		&.bottom {
			width: 100%;
			max-width: 1503px;
			margin: 0 auto;
			height: 70.91px;
			line-height: 70.91px;
			overflow: hidden;
			.text {
				font-size: 33.1px;
				letter-spacing: 0;
				display: block;
				white-space: nowrap;
				left: -540px;
				animation: moveRight2 5s linear infinite;
			}
			.logo {
				width: 27.02px;
				margin: 0 22.5px;
			}
			.arrowRight {
				width: 12px;
				margin: 0 13px;
			}
		}
	}

	@include media-breakpoint-up(xl) {
		.text {
			font-size: 24.15px;
		}
		&.top {
			top: 2px;
			height: 53px;
			line-height: 53px;
		}
		&.bottom {
			width: 100%;
			max-width: 1503px;
			margin: 0 auto;
			height: 126px;
			line-height: 126px;
			overflow: hidden;
			.text {
				font-size: 59px;
				letter-spacing: 0;
				display: block;
				white-space: nowrap;
				left: auto;
				right: 0;
				animation: moveRight3 5s linear infinite;
			}
			.logo {
				width: auto;
				margin: 0 40px;
			}
			.arrowRight {
				width: auto;
				margin: 0 15px;
			}
		}
	}
}

@keyframes moveRight {
	from {
		left: -309px;
	}
	to {
		left: 0;
	}
}

@keyframes moveRight2 {
	from {
		left: -320px;
	}
	to {
		left: -21px;
	}
}

@keyframes moveRight3 {
	from {
		right: 0;
	}
	to {
		right: -492px;
	}
}
