/*
	README

	This file should only be used to style structure of the widget. It should not
	contain fonts or theme styling. Use the shared_theme.css for that purpose.

	If simply theming the CCL, leave this file alone.

	If your design is very customized, edit this file as needed. 
*/

.core-hero-preview-slideshow .slider-cont {
	position: relative;
}

.core-hero-preview-slideshow .glide__arrows {
	position: absolute;
	top: 10%;
	left: 50%;
	z-index: 10;
	transform: translate(-50%, -50%);
	pointer-events: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

@media (min-width: 25em) {
	.core-hero-preview-slideshow .glide__arrows {
		top: 50%;
	}
}

@media (max-width: 1190px) {
	.core-hero-preview-slideshow .glide__arrows {
		width: 100% !important;
		gap: 0;
		padding: 0 var(--space-5);
	}
}

.core-hero-preview-slideshow .glide__arrow {
	outline: none;
}

.core-hero-preview-slideshow .glide__arrow:focus {
	border: 3px solid var(--secondary-color);
}

.core-hero-preview-slideshow .slide {
	position: relative;
}

.core-hero-preview-slideshow .content-section {
	position: absolute;
	z-index: 10;
	bottom: 0;
	left: 0;
	padding: var(--space-8) var(--space-8);
	max-width: var(--width-comfortable);
	pointer-events: none;
}

.core-hero-preview-slideshow .content-section.text-right {
	left: auto;
	right: 0;
	text-align: right;
}

.core-hero-preview-slideshow .title-desc-container { 
	opacity: 0; 
	transition: opacity .6s ease-in-out, transform 1s ease-in-out;
}

.core-hero-preview-slideshow .slide.glide__slide--active .title-desc-container {
	animation: content-section-appear 1.6s ease forwards;
}

@keyframes content-section-appear {
	0% {
		opacity: 0;
	}
	35% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

.core-hero-preview-slideshow .title-desc-container {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.core-hero-preview-slideshow .content-section.text-right .title-desc-container {
	align-items: flex-end;
}

.core-hero-preview-slideshow .slide .slide-title { 
	max-width: 80%;
	margin-bottom:  var(--space-2);
}

.core-hero-preview-slideshow .slide .slide-footer {
	margin-bottom: 0;
}
.core-hero-preview-slideshow .slide .slide-footer .more-caption {
	margin-top: var(--space-6);
	padding: var(--space-2) var(--space-5);
	pointer-events: all;
}

@media (min-width: 40em) {
	.core-hero-preview-slideshow .slide .slide-title { 
		max-width: 70%;
	}
}