.banner-image {
	position: relative;
	margin-bottom: 1.5rem;
	height: 200px;
}


.banner-image__image {
	position: relative;
	height: 100%;
	overflow: hidden;
}


	.banner-image__image > .scEmptyImage {
		max-width: 100%;
		max-height: 100%;
		background-color: #ccc;
	}


.banner-image__content { }

@media screen and (min-width: 576px) {
	.banner-image__content {
		position: absolute;
		top: 0;
		left: 50%;
		transform: translateX(-50%);
		z-index: 1;
	}
}

.banner-image__overlay {
	position: absolute;
	top: 15px;
	max-width: 50%;
	padding: 10px 35px 10px 15px;
	color: #fff;
	text-align: left;
	border-left: 8px solid #9a258f;
	background-color: rgba(0, 39, 68, 0.75);
	z-index: 2;
}

@media screen and (max-width: 768px) {
}

@media screen and (max-width: 991px) {
	.banner-image__overlay {
		top: 0;
		left: 0;
		right: 0;
		/*width: 100%;*/
		max-width: 100%;
	}
}


.banner-image__overlay a {
	color: #ffffff !important;
}


.banner-image__overlay h1 {
}

@media screen and (max-width: 768px) {
	.banner-image__overlay h1 {
		font-size: 1.9rem;
		margin-bottom: 0;
	}
}

.banner-image__overlay p {
	font-size: 1.25rem;
	font-weight: 300;
}

@media screen and (max-width: 768px) {
	.banner-image__overlay p {
		font-size: 1.1rem;
		margin-bottom: 0;
	}
}


/***** Variant Styles *****/

/*.hero-banner.banner-image {
    height: 100%;
}*/

.hero-banner .banner-image {
	height: 100%;
}


.hero-banner.carousel .banner-image__content {
	top: auto;
	bottom: 0;
}

.hero-banner.carousel .banner-image__overlay {
	top: auto;
	bottom: 35px;
}

@media screen and (max-width: 768px) {
}

@media screen and (max-width: 576px) {
	.homepage .banner-image__overlay,
	.hero-banner.carousel .banner-image__overlay {
		top: auto;
		bottom: 0;
		padding-bottom: 30px;
	}
}


.hero-banner.carousel .banner-image__overlay h1 {
	font-size: 1.75rem;
	font-weight: 300;
	line-height: 2.5rem;
}

@media screen and (max-width: 576px) {
	.hero-banner.carousel .banner-image__overlay h1 {
		font-size: 1.2rem;
		margin-bottom: 0;
	}
}


.hero-banner.carousel .banner-image__overlay p {
	font-size: 1rem;
}

@media screen and (max-width: 768px) {
	.hero-banner.carousel .banner-image__overlay p {
		margin-bottom: 0;
		font-size: 0.9rem;
	}
}