/* --------------------------------------------|
|                                              |
|  Component Slider                            |
|                                              |
|-------------------------------------------- */

.slider {
	margin-top: calc(-1 * var(--margin-secondary-vertical-px));
	margin-bottom: calc(-1 * var(--margin-secondary-vertical-px));
}

.page-conference .slider {
	aspect-ratio: 16 / 6;
}

.slider__intro {
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
	width: 100%;
	background-color: var(--color-accent);
	padding: 20px;
	color: var(--color-light);
}

.slider__intro :is(h1, h2, h3, h4, h5, h6) {
	margin-bottom: 0;
}

.slide {
	position: relative;
}

.slide--media--remote_video {
	display: grid;
	grid-template-columns: auto auto;
}

@media screen and (max-width: 768px) {
	.slide--media--remote_video {
		grid-template-columns: 100%;
	}
}

.slide--media--remote_video > .slide__txt,
.slide--media--remote_video > .slide__video {
	position: unset;
	top: unset;
	left: unset;
	width: unset;
	height: 100%;
}

.slide--media--remote_video > .slide__txt {
	align-items: stretch !important;
}

.slide--media--remote_video > .slide__txt > div {
	max-width: 100%;
}

.slide--media--remote_video > .slide__video {
}

/* --------------------------------------------|
|  TEXT                                        |
|-------------------------------------------- */

.slide__txt {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	z-index: 2;
	align-items: center;
	justify-content: center;
	pointer-events: none;
}

.slide__txt > div {
	background-color: var(--color-light);
	padding: 40px;
	max-width: 50%;
	pointer-events: all;
}

@media screen and (max-width: 768px) {
	.slide__txt {
		align-items: flex-start !important;
	}
	.slide__txt > div {
		padding: 20px 20px 30px 20px;
		max-width: 60%;
		max-height: 90%;
		overflow: hidden;
		overflow-y: auto;
	}
	.slide--media--video .slide__txt > div {
		max-height: 70%;
	}
}

@media screen and (max-width: 428px) {
	.slide__txt > div {
		padding: 10px 10px 30px 20px;
		max-width: 90%;
	}
	.slide--media--video .slide__txt > div {
		max-height: 60%;
	}
}

/* --------------------------------------------|
|  IMAGE                                       |
|-------------------------------------------- */

.slide__image {
	aspect-ratio: 16 / 6;
	width: 100%;
}

@media screen and (max-width: 428px) {
	.slide__image {
		aspect-ratio: unset;
	}
}

.slide__image > img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
}

/* --------------------------------------------|
|  VIDEO                                       |
|-------------------------------------------- */

.slide__video {
	aspect-ratio: 16 / 6;
}

@media screen and (max-width: 428px) {
	.slide__video {
		aspect-ratio: unset;
	}
}

.slide__video > video {
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center center;
}

.slide__video > iframe {
	height: 100%;
}

/* --------------------------------------------|
|  Stripes                                     |
|-------------------------------------------- */

.slider--stripes {
	position: relative;
}

.slider--stripes:before {
	content: "";
	z-index: 11;
	width: 100%;
	height: 70px;
	position: absolute;
	left: 0;
	top: 0;
	background-size: cover;
	background-repeat: repeat;
	background-image: url('data:image/svg+xml;charset=utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"><defs><pattern id="pattern" patternUnits="userSpaceOnUse" width="9.5" height="9.5" patternTransform="rotate(135)"><line x1="0" y="0" x2="0" y2="9.5" stroke="white" stroke-width="1"/></pattern></defs><rect width="100%" height="100%" fill="url(%23pattern)" opacity="1"/></svg>');
}

.slide:empty,
.slide__txt:empty,
.slide__txt > div:empty,
.slide__image:empty,
.slide__video:empty {
	display: none;
}

/* --------------------------------------------|
|  ASPECT RATIO                                |
|-------------------------------------------- */

.slider--ar_16-9,
.slider--ar_16-9 .slide__image,
.slider--ar_16-9 .slide__video {
	aspect-ratio: 16 / 9;
}
.slider--ar_16-10,
.slider--ar_16-10 .slide__image,
.slider--ar_16-10 .slide__video {
	aspect-ratio: 16 / 10;
}
.slider--ar_3-2,
.slider--ar_3-2 .slide__image,
.slider--ar_3-2 .slide__video {
	aspect-ratio: 3 / 2;
}
.slider--ar_4-3,
.slider--ar_4-3 .slide__image,
.slider--ar_4-3 .slide__video {
	aspect-ratio: 4 / 3;
}
/* --------------------------------------------|
|  Special size */
.slider--ar_165-79,
.slider--ar_165-79 .slide__image,
.slider--ar_165-79 .slide__video {
	aspect-ratio: 165 / 79;
}

@media screen and (max-width: 428px) {
	.slider--ar_16-9 .slide__image,
	.slider--ar_16-10 .slide__image,
	.slider--ar_3-2 .slide__image,
	.slider--ar_4-3 .slide__image,
	.slider--ar_165-79 .slide__image,
	.slider--ar_16-9 .slide__video,
	.slider--ar_16-10 .slide__video,
	.slider--ar_3-2 .slide__video,
	.slider--ar_4-3 .slide__video,
	.slider--ar_165-79 .slide__video,
	.slider--ar_165-79,
	.slider--ar_4-3,
	.slider--ar_3-2,
	.slider--ar_16-10,
	.slider--ar_16-9,
	.page-conference .slider {
		aspect-ratio: unset;
	}
}

/* --------------------------------------------|
|  TEXT position                               |
|-------------------------------------------- */

.slider--txt_transparent .slide__txt > div {
	background-color: transparent;
}

/* pos-tl|vertical: top and horizontal: left */
.pos-tl {
	align-items: flex-start;
	justify-content: flex-start;
}

/* pos-tc|vertical: top and horizontal: center */
.pos-tc {
	align-items: flex-start;
}

/* pos-tr|vertical: top and horizontal: right */
.pos-tr {
	align-items: flex-start;
	justify-content: flex-end;
}

/* pos-cl|vertical: center and horizontal: left */
.pos-cl {
	justify-content: flex-start;
}

/* pos-cr|vertical: center and horizontal: right */
.pos-cr {
	justify-content: flex-end;
}

/* pos-bl|vertical: bottom and horizontal: left */
.pos-bl {
	align-items: flex-end;
	justify-content: flex-start;
}

/* pos-bc|vertical: bottom and horizontal: center */
.pos-bc {
	align-items: flex-end;
}

/* pos-br|vertical: bottom and horizontal: right */
.pos-br {
	align-items: flex-end;
	justify-content: flex-end;
}

/* --------------------------------------------|
|                                              |
|  Swiper (Custom overwrite!)                  |
|                                              |
|-------------------------------------------- */

.swiper-button.swiper-button-prev,
.swiper-button.swiper-button-next {
	visibility: hidden;
}

.swiper:hover .swiper-button.swiper-button-prev,
.swiper:hover .swiper-button.swiper-button-next {
	visibility: visible;
}

/* --------------------------------------------|
|  Swiper Preloader component                  |
|-------------------------------------------- */

.swiper-lazy-preloader {
	width: 42px;
	height: 42px;
	position: absolute;
	left: 50%;
	top: 50%;
	margin-left: -21px;
	margin-top: -21px;
	z-index: 10;
	transform-origin: 50%;
	animation: swiper-preloader-spin 1s infinite linear;
	box-sizing: border-box;
	border: 4px solid var(--swiper-preloader-color, var(--swiper-theme-color));
	border-radius: 50%;
	border-top-color: transparent;
}

.swiper-lazy-preloader-white {
	--swiper-preloader-color: #fff;
}

.swiper-lazy-preloader-black {
	--swiper-preloader-color: #000;
}

@keyframes swiper-preloader-spin {
	100% {
		transform: rotate(360deg);
	}
}

.block--slideshow {
	padding: 0;
}

@media screen and (max-width: 1200px) {
	.block--slideshow {
        margin-left: -20px;
        margin-right: -20px;
	}
}

.block--slideshow[data-fade-slideshow] {
	display: grid;
	position: relative;
}

.block--slideshow[data-fade-slideshow] [data-fade-slide-item] {
	grid-area: 1 / 1 / 2 / 2;
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--fade-duration, 600ms);
	z-index: 0;
}

.block--slideshow[data-fade-slideshow] [data-fade-slide-item].active {
	opacity: 1;
	pointer-events: auto;
	z-index: 1;
}
