/*
	README

	Modify this file as much or as little as needed.

	This file is shared across all CCL widgets in the Marquee 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.
*/

.ccl-widget.core-marquee.js-loaded .slide-title {
	color: #fff;
	text-transform: uppercase;
	font-family: var(--font-display);
	font-size: var(--text-lg);
	line-height: var(--leading-tight);
}
.ccl-widget.core-marquee.js-loaded .read-more {
	font-family: var(--font-display);
    font-size: 12px;
    text-transform: uppercase;
    font-weight: 800;
    background-color: transparent;
	padding-left: 0;
	color: var(--orange);
	border: none;
}
.ccl-widget.core-marquee.js-loaded .slide-footer .read-more:focus {
	box-shadow: none;
}
.ccl-widget.core-marquee.js-loaded .slide:not(:first-child) p,
.ccl-widget.core-marquee.js-loaded .slide .video-loaded .slide-title,
.ccl-widget.core-marquee.js-loaded .slide .video-loaded p {
	display: none;
}
.ccl-widget.core-marquee.js-loaded .slide p {
	font-size: 14px;
    max-width: 450px;
	margin-bottom: 0;
}
@media (min-width: 64em) {
	.ccl-widget.core-marquee.js-loaded .slide-title {
		font-size: var(--text-xl);
	}
	.ccl-widget.core-marquee.js-loaded .slide p {
		font-size: 17px;
	}
}
@media (hover: hover) {
	.ccl-widget.core-marquee.js-loaded .slide-title:hover,
	.ccl-widget.core-marquee.js-loaded .slide-title a:hover {
		text-decoration: none;
		color: #fff;
	}
	.ccl-widget.core-marquee.js-loaded .slide-footer .qv-btn:hover > span,
	.ccl-widget.core-marquee.js-loaded .slide-footer .qv-btn span:hover {
        text-decoration: none;
    }
	.ccl-widget.core-marquee.js-loaded .slide-footer .read-more:hover {
        text-decoration: none;
		border: none;
		background-color: transparent;
		color: var(--orange);
    }
}
.ccl-widget.core-marquee.js-loaded .slide-footer {
    padding: 3px 0;
}
.ccl-widget.core-marquee.js-loaded .slide-footer .qv-btn {
	font-family: var(--font-display);
    font-size: 12px;
    border-radius: 10px;
    text-transform: uppercase;
    font-weight: 800;
    background-color: transparent;
	color: var(--orange);
}
.ccl-widget.core-marquee.js-loaded .slide-footer .qv-btn i {
    width: 17px;
    font-weight: 400;
    font-size: 13px;
}