/*
	README

	Modify this file as much or as little as needed.

	This file is shared across all CCL widgets in the Slider family. This enables the ability to
	a family of widgets in a single update without touching the structure of the widget and without needing
	to duplicate efforts across several widget-specific CSS files.
*/

.hero-image {
	--font-text: var(--font-body);
	--color-primary: var(--white);
	--color-btn-background: var(--yellow-eb);
	margin-bottom: 60px;
}

.hero-image .banner-content {
	padding: 0 30px 44px 30px;
}

.hero-image .banner-content.narrow {
	max-width: 600px;
}

.hero-image .banner-content .banner-title,
.hero-image .banner-content .banner-description {
	font-family: var(--font-text);
	font-weight: 600;
}

.hero-image .banner-content .banner-title {
	font-size: 30px;
	font-weight: 800;
	line-height: 1.25;
	max-width: 100%;
	margin-bottom: var(--space-3);
}

.hero-image .banner-content a.read-more {
	padding: 11px 32px;
	border-radius: var(--rounded-full);
	font-size: 12px;
	color: var(--black);
	background-color: var(--color-btn-background);
	letter-spacing: 0.2em;
	text-transform: uppercase;
}

.hero-image .slide .img-cont.no-overlay::after {
	background: none;
}

.hero-image .banner-content a.read-more:hover {
	text-decoration: none;
	background-color: var(--orange-f0);
}

@media(hover : hover) {
	.hero-image .banner-title > a:hover,
	.hero-image .banner-content .banner-title:hover {
		text-decoration: none;
		color: var(--color-primary);
	}
}

.hero-image .banner-content .banner-description {
	font-size: 15px;
	line-height: 1.7;
} 

@media (min-width: 40em) {

	.hero-image .banner-content {
		padding: 0 0 44px 50px;
	}

	.hero-image .banner-content .banner-title {
		font-size: 40px;
		line-height: 1.1;
	}

	.hero-image .banner-content .banner-description {
		font-size: 15px;
	}


}