/* ## Block - Hero Area
--------------------------------------------- */

.hero-area {
	margin-bottom: 60px;
}

.hero-area-wrap {
	position: relative;
}

body.home .site-inner {
	
}

.hero-area-content {
	position: absolute;
	bottom: 20%;
	right: 45%;
	text-align: right;
	width: 450px;
}

body.home .hero-area h1 {
	color: #0091EB;
	font-size: 55px;
	font-weight: normal;
	font-weight: 300;
	margin-bottom: 0;
}

body.home .hero-area h2 {
	color: #6B6B6B;
	font-size: 22px;
	font-weight: bold;
	font-weight: 700;
}

.hero-area #lottie{
	background-color: #ffffff;
	width: 100%;
	height: 100%;
	display: block;
	overflow: hidden;
	transform: translate3d(0,0,0);
	text-align: center;
	opacity: 1;
}


@media only screen and (max-width: 870px) {

	.hero-area-content {
		width: 300px;
		bottom: 23%;
	}
	
	body.home .hero-area h1 {
		font-size: 36px;
	}
	
	body.home .hero-area h2 {
		font-size: 16px;
	}
	
}


@media only screen and (max-width: 600px) {
	
	.hero-area-content {
		width: 200px;
		bottom: 30%;
		right: 35%;
	}
	
	body.home .hero-area h1 {
		font-size: 22px;
	}
	
	body.home .hero-area h2 {
		font-size: 10px;
	}

}