/*
	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-image {
	position: relative;
}

/* .hide-content also hides gradient */
.core-hero-image.hide-content .img-cont:after,
.core-hero-slideshow.hide-content .slide .img-cont:after, 
.core-hero-preview-slideshow.hide-content .img-cont:before {
	content: none;
}

.core-hero-image .content-section {
	padding: var(--space-8) var(--space-12);
	width: 100%;
	max-width: var(--width-comfortable);
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: var(--space-3);
	pointer-events: none;
}

.core-hero-image .slide-title {
	font-size: var(--text-2xl);
	margin-bottom: var(--space-2);
	line-height: var(--leading-tight);
	max-width: 80%;
	pointer-events: none;
}

.core-hero-image .scroller-cont {
    position: absolute;
    left: 50%;
    bottom: 45px;
    transform: translateX(-32%);
    display: none;
}

.core-hero-image .scroller-cont span {
    display: inline-block;
    font-size: 14px;
    color: white;
    text-align: center;
	text-transform: uppercase;
    position: relative;
    left: -8px;
    text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.25);
}

.core-hero-image .scroller {
    width: 30px;
    height: 48px;
    border: 1px solid white;
    border-radius: 18px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

.core-hero-image .scroller .scroll-line {
    width: 2px;
    height: 12px;
    background-color: white;
    margin-top: 10px;
    -webkit-animation: mouse-move 2.5s linear infinite;
    -moz-animation: mouse-move 2.5s linear infinite;
    animation: mouse-move 2.5s linear infinite;
}

@-webkit-keyframes mouse-move {
    0% {
      opacity: 1;
      transform: translateY(0px);
    }
    15% {
      opacity: 1;
      transform: translateY(8px);
    }
    50% {
      opacity: 0;
      transform: translateY(8px);
    }
    100% {
      opacity: 0;
      transform: translateY(0px);
    }
  }

@media (min-width: 1025px) {
    .core-hero-image .scroller-cont {
        display: block;
    }
}

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

.core-hero-image .title-desc-container {
	width: 100%;
	max-width: var(--width-comfortable);
}

.core-hero-image .credits {
	flex-grow: 1;
	text-align: right;
}