#hero {
	width: 100%;
	margin: 0 auto 0;
	padding: 60px 0 0 0;
	background: transparent linear-gradient(177deg, #007fff 0%, #0f172c 100%) 0% 0% no-repeat padding-box;
	position: relative;
}

#hero-overlay {
	position: absolute;
	top: 0;
	margin: 0 auto 0;
	padding: 0;
	width: 100%;
	max-width: 1440px;
	height: 100%;
	user-select: none;
	left: 50%;
	transform: translateX(-50%);
	background: url(../img/main.png) no-repeat bottom right;
	background-size: auto 80%;
	mix-blend-mode: luminosity;
	z-index: 0
}

#hero-inner {
	width: 100%;
	max-width: 1440px;
	margin: 0 auto 0;
	padding: 20px 20px 0 20px;
}

#hero-main {
	display: grid;
	grid-template-columns: auto 40%;
	align-items: stretch;
}

#hero-main img {
	margin: 0 auto 0;
	padding: 0;
	width: 100%;
	user-select: none;
}

#bg {
	display: none;
	margin: 20px auto 0px;
	padding: 0;
	width: 100%;
}

#bg img {
	padding: 0;
	width: 100%;
	user-select: none;
	object-fit: contain;
	mix-blend-mode: luminosity;
}

#hero-main-text {
	z-index: 2;
	padding: 0 0 30px 0;
}

#hero-main h1 {
	margin: 0;
	padding: 30px 0 0 20px;
	width: 60%;
	font-size: 1rem;
	color: #fff;
}

#hero-main-text p{
	z-index: 2;
	font-size: 1.1rem;
	margin: 0;
	padding: 20px 0 40px 20px;
	width: 100%;
	color: #fff;
}

@media screen and (max-width: 900px) {
	#hero-main {
		grid-template-columns: 1fr;
	}
	#bg {
		display: block;
	}
	#hero-main-text {
		padding: 20px 20px 0 30px;
	}
	#hero-main-text p{
		font-size: 1.1rem;
		padding: 20px 20px 0 30px;
	}
	#hero-overlay {
		display: none;
	}
	#hero-inner {
		width: 100%;
		margin: 0 auto 0;
		padding: 0;
	}
	#hero-main h1 {
		width: 100%;
		padding: 20px 20px 0 0;
	}
	#hero-main img {
		width: 100%;
	}
}

@media screen and (max-width: 640px) {
	#hero-main-text p{
		font-size: 0.95rem;
		padding: 20px 0 0 0;
	}
}