/*-------------------------- Main Feature --------------------------*/
.hero {
	position: relative;
	min-height: 600px;
	overflow: hidden;
	height: 100vh;
	height: calc(var(--vh) * 100);
	max-height: 100vh;
	max-height: calc(var(--vh, 1vh) * 100);
	transition: max-height 0.6s linear;
}

.hero::before {
	content: ' ';
	background: rgb(0, 0, 0);
	background: -moz-linear-gradient(0deg, rgba(0, 0, 0, 0.6965161064425771) 0%, rgba(0, 0, 0, 0.15) 40%, rgba(0, 0, 0, 0.15) 84%, rgba(0, 0, 0, 0.7021183473389356) 100%);
	background: -webkit-linear-gradient(0deg, rgba(0, 0, 0, 0.6965161064425771) 0%, rgba(0, 0, 0, 0.15) 40%, rgba(0, 0, 0, 0.15) 84%, rgba(0, 0, 0, 0.7021183473389356) 100%);
	background: linear-gradient(0deg, rgba(0, 0, 0, 0.6965161064425771) 0%, rgba(0, 0, 0, 0.15) 40%, rgba(0, 0, 0, 0.15) 84%, rgba(0, 0, 0, 0.7021183473389356) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#000000", endColorstr="#000000", GradientType=1);
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 2;
}

/* image */
.hero-image {
	height: 100vh;
	width: 100%;
	position: absolute;
	min-height: 600px;
}

.hero-image img {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
}

/* video */
.hero video {
	object-fit: cover;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
}


.hero .hero-content {
	position: relative;
	z-index: 3;
	width: 100%;
	display: flex;
	align-items: center;
	height: 100%;
	color: #000;
}


.hero .hero-content,
.hero .hero-content a{
	color: #fff;
}


.hero-carousel__title {
	margin-top: 0;
	margin-bottom: 0;
}
.hero-carousel__title p{
	margin: 0;
	padding: 0;
}

.hero .hero-carousel__details .post-title a {
	font-size: 1.2em;
	line-height: 110%;
}

.hero .post-excerpt {
	font-size: 1em;
}

.hero .text-link-white {
	text-align: left;
}

/* Caption */
.hero .image-caption {
	display: none;
}

/* ======= Active slide animation */
.hero .swiper-slide .hero-content .hero-carousel__details {
	transform: translateY(350px);
	-webkit-transform: translateY(350px);
	opacity: 0;
	width: 90%;
}

.hero .swiper-slide-active .hero-content .hero-carousel__details {
	animation: 1s verticalReveal .2s cubic-bezier(0.19, 1, 0.22, 1);
	animation-fill-mode: forwards;
}

@keyframes verticalReveal {

	0% {
		transform: translateY(250px);
		-webkit-transform: translateY(250px);
		opacity: 0;
	}
	100% {
		transform: translateY(0px);
		-webkit-transform: translateY(0px);
		opacity: 1;
	}

}

.hero .swiper-slide .hero-content  .hero-carousel__link{
	opacity: 0;
	transition: opacity .3s linear .9s;
}

.hero .swiper-slide-active .hero-content .hero-carousel__link {
	opacity: 1;
}

/* Image zoom */
.swiper-slide-active .hero-image {
	animation: scale 14s linear;
	animation-fill-mode: forwards;
}

/* Scroll down */
.scroll-down {
	position: absolute;
	bottom: 4em;
	left: 50%;
	transform: translate3d(-50%, 0, 0);
	z-index: 3;
	border: 0;
	width: 3.5rem;
	height: 3.5rem;
	background: rgba(225, 225, 225, .1);
	border-radius: 100%;
	display: flex;
	align-items: center;
}

.scroll-down img {
	transform: rotate(90deg);
	margin: 0 auto;
}


@keyframes scale {

	0% {
		transform: scale(1.0);
		-webkit-transform: scale(1.0);
	}
	100% {
		transform: scale(1.1);
		-webkit-transform: scale(1.1);
	}

}


/* ===================================== Responsive  ===================================== */

/*  Tablet Portrait  */
@media screen and (min-width: 768px) {

    .hero .hero-content .hero-carousel__details,
    .hero .swiper-slide .hero-content .hero-carousel__details {
        position: absolute;
        bottom: 5em;
        width: 80%;
    }

    /* With top ad */
    body.sidebar-header .hero .hero-content .hero-carousel__details {
        margin-top: 13em;
    }

	.hero .hero-carousel__details .post-title a {
		font-size: 1.9em;
	}

	.hero .post-excerpt {
		font-size: 1.2em;
	}

	/* Caption */
	.hero .image-caption {
		display: block;
		position: absolute;
		bottom: 1.5em;
		right: 1.5em;
		color: #FFF;
		font-size: .7rem;
		letter-spacing: .1em;
		font-weight: 500;
		max-width: 35%;
	}

	.hero figcaption.image-caption::after {
		display: none;
		padding: 0 1em 1em 0;
	}

	.scroll-down {
		right: 2em;
		left: auto;
	}

}

/*  Desktop  */
@media screen and (min-width: 1024px) {

    .hero .hero-content .hero-carousel__details,
    .hero .swiper-slide .hero-content .hero-carousel__details {
        width: 70%;
    }


}