.hero-carosel {
	position:relative;
	background:#000;
	height:100%;
	overflow:hidden;
}

.hero-carosel-textblock {
	transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out, left 0.5s ease-in-out;
	left:0px;top:60px;
	color:#ffffff;
	position:absolute;
	z-index:5;
	width:100%;
	padding:0 20px;
	transition-delay: 150ms;
	visibility: hidden;
	opacity: 0;
}

.hero-carosel-textblock > h4.caro-subtype {
	font-size: 1.2em;
	text-transform: uppercase;
	font-weight: 300;
}

.hero-carosel-textblock > h3 {
	font-size: 2em;
	font-weight: 700;
}

.hero-carosel-textblock > h3 > span.slim {
	font-weight: 500;
}

.hero-carosel-entry.active > .hero-carosel-textblock {
	visibility: visible;
	opacity: 1;
}

.hero-carosel-bg {
	transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out;
	position:absolute;
	width: 100%;
	height: 380px;
	top: 0px;left: 0px;
	z-index: 2;
	background-position: 80% 50%;
	background-repeat:no-repeat;
	visibility: hidden;
	opacity: 0;
}

.hero-carosel-entry.active > .hero-carosel-bg {

	visibility: visible;
	opacity: 1;
	
}

.hero-carosel-video {
	mask-image: linear-gradient(270deg, rgba(255,255,255,1) 10%, transparent 100%);
	transition: opacity 1s ease-in-out, visibility 1s ease-in-out;
	position:absolute;
	height: 380px;
	top:0px;right:0px;
	z-index: 1;
	transition-delay: 500ms;
	visibility: hidden;
	opacity: 0;
}

.hero-carosel-video > video {
	object-fit: cover;
	height: 100%;
	max-height: 380px;
}

.hero-carosel-entry.active > .hero-carosel-video {

	visibility: visible;
	opacity: 1;
	
}


@media only screen and (min-width: 576px) {
	.hero-carosel-bg {
		background-position:right 75px top;
	}

	.hero-carosel-textblock {
		max-width:480px;
		padding:0px;
	}
	
	.hero-carosel-textblock {
		left:30px;
	}

	.hero-carosel-entry.active > .hero-carosel-textblock {
		left:50px;
	}

	.hero-carosel-textblock > h3 {
		font-size:2.5em;
	}
}

@media only screen and (min-width: 1050px) {

	.hero-carosel-textblock {
		max-width:640px;
		padding:0px;
	}

	.hero-carosel-bg {
		background-position:right 350px top;
	}
}

.caro-show.hero-carosel-video {
	
}

