.CHero > picture,
.CHero > picture img
{
	width: 100%;
}

.CHeroTextBlack
{
}

.CHeroTextWhite
{
	color: white;
}

.CHeroBackgroundWhite > div
{
	background-color: #ffffff88;
}

.CHeroBackgroundWhiteEE > div
{
	background-color: #ffffffee;
}

.CHeroBackgroundBlack > div
{
	background-color: #00000099;
	color: white;
}

.CHeroBackgroundBlackBB > div
{
	background-color: #000000bb;
	color: white;
}

.CHeroTextLeft > div
{
	margin-left: calc(50% / 6);
}

.CHeroTextRight > div
{
	right: calc(50% / 6);
}

.CHero
{
	position: relative;
}

	.CHero h1
	{
		font-size: 46px;
		font-weight: 600;
		hyphens: auto;
	}

	.CHero > div
	{
		position: absolute;
		top: 50%;
		transform: translate(0, -50%);
		max-width: calc(45% - 50% / 6);
		padding: 0 15px 15px 15px;
	}

.CHeroButtonBar
{
	margin-top: 40px;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	gap: 10px;
}

	.CHeroButtonBar a
	{
		background-color: #0078d0;
		color: white;
		padding-top: 9px;
		padding-bottom: 9px;
		padding-left: 20px;
		padding-right: 20px;
		text-decoration: none;
	}

@media (max-width: 982px)
{
	.CHero
	{
		color: inherit;
	}

		.CHero > div
		{
			position: relative;
			top: initial;
			right: initial;
			margin-left: initial;
			transform: none;
			max-width: none;
			text-align: center;
			background-color: initial;
			color: inherit;
			padding: 0;
			margin-left: calc(50% / 6);
			margin-right: calc(50% / 6);
		}

	.CHeroButtonBar
	{
		justify-content: center;
	}
}

@media (max-width: 500px)
{
	.CHero h1
	{
		font-size: 32px;
		hyphens: auto;
	}
}