.heroBanner {

	position: relative;
	width: 100%;
	padding: 182px 0 var(--top_bottom_gutter);;
	color: var(--text_color_alt);
	text-align: center;


	@media @flyout {
		padding: 182px 0 var(--top_bottom_gutter_flyout);
	}

	@media @mobile {
		padding: 182px 0 var(--top_bottom_gutter_mobile);
	}


	&__title {
		color: var(--text_color_alt);
		margin: 0;
		font-family: @primary_font;

		strong {
			font-weight: inherit;
			color: var(--third_color);
			font-family: @secondary_font;
		}
	}

	&__subtitle {
		.headingStyle(h6);
		color: var(--primary_color);
		margin: 0;
		padding: 24px 0 0;

		strong {
			font-weight: inherit;
			color:var(--secondary_color);
		}
	}


}
