.hero {
	position: relative;
	width: 100%;
	height: calc(100vh - 200px);
}

html.scroll .hero {
	height: calc(100vh - 125px);
}

.hero-img {
    width: 100%;
    height: 100%;
}

.hero-img::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	background-color: rgba(0,0,0,0.3);
	z-index: 1;
}

.hero .container {
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%,-50%);
	transform: translate(-50%,-50%);
	z-index: 100;
}

.hero-text-wrap h1 {
	margin-bottom: 25px;
}

.hero-text-wrap p {
	color: #fff;
	width: 500px;
}

.hero-text-wrap .btn {
	margin-top: 50px;
}



/*========== RESPONSIVENESS ==================*/

@media screen and (max-width: 1320px) {
	
	.hero {
		height: calc(100vh - 140px);
	}
	
}



@media screen and (max-width: 1024px) {
	
	.hero {
		height: calc(100vh - 120px);
	}
	
	html.scroll .hero {
		height: calc(100vh - 100px);
	}
	
	.hero-text-wrap p {
		width: 400px;
	}
	
	.hero-text-wrap .btn {
		margin-top: 40px;
	}
	
}



@media screen and (max-width: 768px) {
	
	.hero,
	html.scroll .hero {
		height: calc(100vh - 70px);
	}
	
	.hero-text-wrap {
		text-align: center;
	}
	
	.hero-text-wrap p {
		width: 75%;
		margin: 0 auto;
	}
	
	.hero-text-wrap .btn {
		margin-top: 30px;
	}
	
}