.videos-slideshow {
	display: flex;
	flex-direction: column;
	width: 100%;
	align-items: flex-start;
	flex-direction: row-reverse;
	justify-content: space-between;
}

.videos-slideshow__content {
	position: relative;
	max-width: 104rem;
	cursor: grab;
	flex: 1 1 auto;
	width: 100%;
	margin-top: 5rem;
	padding-bottom: 53.46153846%;
}

.videos-slideshow__content .videos-slideshow__nav-item {
	display: none;
}

.videos-slideshow__image {
	position: absolute;
	top: -6rem;
	right: 2rem;
	display: block;
	width: 25%;
	max-width: 22rem;
	transform: translateY(10%);
	opacity: 0;
	z-index: -1;
	transition-duration: 0s;
}

.videos-slideshow__content .dp_dmb_repeat_item {
	position: absolute;
	top: 0;
	left: 0;
	visibility: hidden;
	width: 100%;
	min-height: 100%;
	opacity: 0;
	object-fit: fill;
	transition: opacity 0.6s 0.6s linear, visibility 0s 0.6s, box-shadow 0s 0.6s;
}

.videos-slideshow:not(.loaded) .videos-slideshow__content .dp_dmb_repeat_item:first-child,
.videos-slideshow__content .dp_dmb_repeat_item.active {
	visibility: visible;
	opacity: 1;
}

.videos-slideshow:not(.loaded) .videos-slideshow__content .dp_dmb_repeat_item:first-child .videos-slideshow__image,
.videos-slideshow__content .dp_dmb_repeat_item.active .videos-slideshow__image {
	transform: translateY(0%);
	opacity: 1;
	transition: transform 0.4s, opacity 0.3s;
	transition-delay: 1s;
}

.videos-slideshow__video {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: auto;
	min-height: 100%;
	object-fit: fill;
	box-shadow: 0 0 50px 0 rgb(33 34 43 / 12%);
}

.videos-slideshow__nav {
	width: 30%;
	padding: 0 3rem 0 0;
	margin-top: 5rem;
}

.videos-slideshow__nav-item {
	position: relative;
	cursor: pointer;
/* 	color: #444444; */
	padding-left: 34px;
}

.videos-slideshow__nav-item h3 {
	display: block;
	margin: 0;
	padding-bottom: 10px;
	transition: opacity 0.3s, color 0.4s;
	opacity: 0.5;
	font-size: 1.2rem;
	line-height: 1.2;
	font-weight: bold;
/* 	color: #444444; */
}

.videos-slideshow__nav-item div {
	overflow: hidden;
	width: 100%;
	height: 0;
	display: block;
	padding-bottom: 5rem;
	margin: 0;
	transition: opacity 0.2s linear, height 0.4s ease-in-out, transform 0.2s 0.2s ease-in-out;
	transform: translateY(-2rem);
	opacity: 0;
}

.videos-slideshow__progress {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 19px;
	height: 100%;
	margin-bottom: 0;
}

.videos-slideshow__progress-track,
.videos-slideshow__progress-bar {
	position: absolute;
	top: 16px;
	right: auto;
	bottom: -7px;
	left: 12px;
	width: 0.1rem;
	height: auto;
}

.videos-slideshow__progress-track {
	border: none;
	border-top: 0.1rem solid white;
	border-bottom: 0.1rem solid white;
	background: repeating-linear-gradient(to bottom, #C3C4C7 0, #C3C4C7 6px, transparent 6px, transparent 12px);
	background-repeat: repeat-y;
}

.videos-slideshow__progress-bar {
	/*     transition: transform 0.3s linear, opacity 0.3s ease-out; */
	transform: scale(1, 0);
	transform-origin: top left;
	opacity: 0;
	background-color: #0C4BF9;
}

.videos-slideshow__progress-bullet {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 19px;
	height: 19px;
	transition: opacity 0.3s;
	opacity: 0.2;
	border-radius: 50%;
}

.videos-slideshow__progress-bullet::before {
	position: absolute;
	top: 1px;
	left: 2px;
	display: block;
	width: 100%;
	height: 100%;
	content: '';
	transition: transform 0.3s ease-in;
	transform: scale(0.3, 0.3);
	transform-origin: center center;
	border: 1px solid #0c4bf9;
	border-radius: 50%;
	background-color: white;
}

.videos-slideshow__progress-bullet::after {
	position: absolute;
	top: 7px;
	left: 8px;
	;
	display: block;
	width: 9px;
	height: 9px;
	content: '';
	border-radius: 50%;
	background: linear-gradient(91.46deg, #0C4BF9 0%, #328bfe 111.67%);
}

.videos-slideshow__nav-item:last-child .videos-slideshow__progress-track,
.videos-slideshow__nav-item:last-child .videos-slideshow__progress-bar {
	display: none;
}

.videos-slideshow__nav-item.past h3,
.videos-slideshow__nav-item.active h3 {
	opacity: 1;
}


/* .videos-slideshow__nav-item.past .videos-slideshow__description, */

.videos-slideshow__nav-item.active .videos-slideshow__description {
	height: var(--max-height);
	transition: opacity 0.2s 0.3s linear, height 0.4s ease-in-out, transform 0.2s 0.2s ease-in-out;
	transform: translateY(0);
	opacity: 0.5;
}

.videos-slideshow__nav-item.active h3 {
/* 	color: #0C4BF9;
	background-color: #0C4BF9;
	background: linear-gradient(90deg,rgba(12,75,249,1) 0%,rgba(50,139,254,1) 100%);
	-webkit-background-clip: text;
	-moz-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	-moz-text-fill-color: transparent; */
}

.videos-slideshow__chapter.active.loaded .videos-slideshow__progress-bar {
	transition-timing-function: linear;
	transition-duration: inherit;
	transition-property: transform;
	transform: scale(1, 1);
	opacity: 1;
}

.videos-slideshow__nav-item:hover .videos-slideshow__progress-bullet,
.videos-slideshow__nav-item.active .videos-slideshow__progress-bullet,
.videos-slideshow__nav-item.past .videos-slideshow__progress-bullet {
	opacity: 1;
}

.videos-slideshow__nav-item.active .videos-slideshow__progress-bullet::before {
	transform: scale(1, 1);
}

.videos-slideshow__nav-item.active.loaded .videos-slideshow__progress-bar {
	transition-timing-function: linear;
	transition-duration: inherit;
	transition-property: transform;
	transform: scale(1, 1);
	opacity: 1;
}

.videos-slideshow__nav-item.reset .videos-slideshow__progress-bar {
	transition: transform 0.3s, opacity 0.2s;
	transition-duration: 0s !important;
	transform: scale(1, 0);
	opacity: 0;
}

.videos-slideshow__nav-item.active .videos-slideshow__progress-bar {
	transition: transform 5s linear;
	transform: scale(1, 1);
	opacity: 1;
}

.videos-slideshow__nav-item.past .videos-slideshow__progress-bar {
	transition: none;
	transition-duration: 0s !important;
	transform: scale(1, 1);
	opacity: 1;
}

@media (max-width: 1170px) {
	.videos-slideshow {
		display: block;
	}
	.videos-slideshow__content,
	.videos-slideshow__nav {
		width: 100%;
	}
	.videos-slideshow__nav {
		white-space: nowrap;
		padding-top: 80px;
		margin-top: 0;
		overflow-x: scroll;
		scroll-behavior: smooth;
	}
	/* Hide scrollbar for Chrome, Safari and Opera */
	.videos-slideshow__nav::-webkit-scrollbar {
		display: none;
	}
	/* Hide scrollbar for IE, Edge and Firefox */
	.videos-slideshow__nav {
		-ms-overflow-style: none;
		/* IE and Edge */
		scrollbar-width: none;
		/* Firefox */
	}
	.videos-slideshow__nav-item {
		display: inline-block;
		white-space: normal;
		width: 50%;
		padding: 0 10px;
		vertical-align: top;
	}
	.videos-slideshow__progress {
		left: 0;
		top: -30px;
		bottom: auto;
		right: 0;
		width: 100%;
		height: 19px;
	}
	.videos-slideshow__progress-track,
	.videos-slideshow__progress-bar {
		top: 11px;
		left: 16px;
		right: -7px;
		bottom: auto;
		width: auto;
		height: 0.1rem;
	}
	.videos-slideshow__nav-item.reset .videos-slideshow__progress-bar {
		transform: scale(0, 1);
	}
	.videos-slideshow__progress-track {
		background: repeating-linear-gradient(to right, #9EACC3 0, #9EACC3 6px, transparent 6px, transparent 12px);
		background-repeat: repeat-x;
		border: none;
		border-left: 0.1rem solid white;
		border-right: 0.1rem solid white;
	}
	.videos-slideshow__image {
		display: none;
	}
}

@media (max-width: 767px) {
	.videos-slideshow__nav-item {
		width: 100%;
	}
}