.hero-banner {
	position: relative;
	overflow: hidden;
	width: 100%;
	height: 60vh;
	min-height: 550px;
	padding-top: 182px;
	background-position: 0 0, 50% 50%;
	background-size: 3px, cover;
	background-repeat: repeat, no-repeat;
}

@media (min-width: 720px) {
	.hero-banner {
		padding-top: 30px;
		height: 90vh;
	}
}

.hero-banner__title {
	color: #ffffff;
	font-size: 14px;
	padding-top: 120px;
}

@media (min-width: 720px) {
	.hero-banner__title {
		font-size: 14px;
		line-height: 24px;
	}
}

.hero-text {
	position: relative;
	overflow: hidden;
	width: 100%;
}

.hero-text .title {
	font-size: 30px;
	text-transform: uppercase;
	color: #000000;
}

.hero-text .subtitle {
	font-size: 24px;
	text-transform: uppercase;
	color: #000000;
}

.hero-text .cta {
	font-size: 14px;
	color: #000000;
}

.hero-text .cta-wrapper {
	display: flex;
	align-items: center;
}

@media (max-width: 767px) {
	.hero-text .cta-wrapper {
		margin-bottom: 15px;
		justify-content: center;
	}
}

.hero-image {
	position: relative;
	overflow: hidden;
	width: 100%;
}

.hero-image .cta-text-wrapper .title {
	font-size: 30px;
	text-transform: uppercase;
	color: #000000;
}

.hero-image .cta-text-wrapper .subtitle {
	font-size: 24px;
	text-transform: uppercase;
	color: #000000;
}

.hero-image .cta-text-wrapper .description {
	font-size: 14px;
	color: #000000;
}

.hero-image .cta-image-wrapper {
	display: flex;
	align-items: center;
	flex-direction: column;
	justify-content: center;
}

.hero-image .cta-image-wrapper .cta {
	font-size: 14px;
	color: #000000;
}