/* ----------------------------------------------------------------
	Custom CSS

	Add all your Custom Styled CSS here for New Styles or
	Overwriting Default Theme Styles for Better Handling Updates
-----------------------------------------------------------------*/
.stack-cards {
  position: relative;
  display: block;
}

.stack-cards-item {
	background: #19202B;
	border-radius: 0.25rem;
	box-shadow: -5px 0 16px 8px rgba(0, 0, 0, 0.2);
	text-align: left;
	margin-bottom: 10px;
}

/*
If you use SASS you can shorten this one here like this:

@for $i from 0 through 5 {
  &:nth-of-type(#{$i}) {
    transform: translate(calc((#{$i} - 1) * var(--cnvs-stack-card-offset)), calc((#{$i} - 1) * var(--cnvs-stack-card-offset)));
  }
}
*/



	.content-wrap {
		overflow:visible;
	}

	.stack-cards {
		position: relative;
		display: block;
	}

	.sticky-title {
		position: sticky;
		top: 2rem;
	}

	.stack-cards > .stack-cards-item + .stack-cards-item {
		margin-top: 0vh;
	}

	.stack-cards-item {
		--cnvs-stack-card-offset: 1.5em;
		max-width: 73rem;
		position: sticky;
		top: 1rem;
		margin-bottom: 0px;
	}

	.stack-cards-item:nth-of-type(0) {
		transform: translateY(calc((0 - 1) * var(--cnvs-stack-card-offset))) scale(0.85);
	}
	.stack-cards-item:nth-of-type(1) {
		transform: translateY(calc((1 - 1) * var(--cnvs-stack-card-offset))) scale(0.88);
	}
	.stack-cards-item:nth-of-type(2) {
		transform: translateY(calc((2 - 1) * var(--cnvs-stack-card-offset))) scale(0.91);
	}
	.stack-cards-item:nth-of-type(3) {
		transform: translateY(calc((3 - 1) * var(--cnvs-stack-card-offset))) scale(0.94);
	}
	.stack-cards-item:nth-of-type(4) {
		transform: translateY(calc((4 - 1) * var(--cnvs-stack-card-offset))) scale(0.97);
	}
	.stack-cards-item:nth-of-type(5) {
		transform: translateY(calc((5 - 1) * var(--cnvs-stack-card-offset))) scale(1);
	}




.play-icon i {
	width: 80px;
	height: 80px;
	line-height: 81px;
	font-size: 28px;
	padding-left: 5px;
	text-align: center;
	border-radius: 50%;
	color: #000;
	background-color: #FFF;
	z-index: 2;
	transition: all .3s ease;
}

.play-icon:hover i {
	background-color: #7E9680;
	background-color: var(--themecolor, #7E9680);
	color: #FFF;
}

.jumbotron{
	border-radius: 0.3rem !important;
}

.owl-carousel .jumbotron { height: 400px; }

.owl-item .jumbotron {
	opacity: .5;
	transform: scale(0.95);
	transition: all .5s ease;
}

.owl-item .jumbotron-text {
	opacity: 0;
	transform: scale(0.9);
	transition: all .4s .2s ease;
}

.owl-item.active .jumbotron,
.owl-item.active .jumbotron-text {
	opacity: 1;
	transform: scale(1);
}

/* Owl Carousel - Controls - Arrows
-----------------------------------------------------------------*/
#oc-teachers .owl-nav [class*=owl-] {
	opacity: 1;
	left: 61px !important;
	height: 60px;
	line-height: 60px;
	border: none;
	color: #333;
	background-color: transparent;
	font-size: 28px;
	border-radius: 0;
}

#oc-teachers.owl-nav .owl-next {
	left: auto;
	right: -61px;
}

#oc-teachers .owl-nav .owl-next {
	left: auto !important;
	right: 62px !important;
	border-radius: 0;
}

#oc-teachers .owl-nav [class*=owl-]:hover {
	transform: scale(1.3);
	background-color: transparent !important;
	color: #7E9680 !important;
	color: var(--themecolor, #7E9680) !important;
}

/* Owl Carousel - Responsive
-----------------------------------------------------------------*/
.device-md #oc-teachers .owl-nav .owl-prev { left: 67px !important; }
.device-md #oc-teachers .owl-nav .owl-next { right: 67px !important; }

.device-sm #oc-teachers .owl-nav .owl-prev,
.device-xs #oc-teachers .owl-nav .owl-prev { left: 27px !important; }

.device-sm #oc-teachers .owl-nav .owl-next,
.device-xs #oc-teachers .owl-nav .owl-next { right: 27px !important; }