.hero-slide {
	position: relative;
	background-size: cover;
    background-position: 50% 50%;
    background-repeat: no-repeat;
	width: 100%;
	padding-top: 125px;
	padding-bottom: 150px;
}

.hero-slide .container {
	z-index: 2;
}

.hero-bg,
.ellipse-1,
.ellipse-2,
.ellipse-3 {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}

.hero-slide:before,
.hero-slide:after,
.hero-bg:before,
.hero-bg:after {
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}

.hero-slide:before {
	opacity: 0.6;
	background: linear-gradient(90deg, rgba(43, 56, 119, 0.00) 4.24%, rgba(43, 56, 119, 0.00) 25.74%, rgba(43, 56, 119, 0.80) 55.05%);
}

.hero-slide:after {
	opacity: 0.5;
	background: linear-gradient(90deg, rgba(43, 56, 119, 0.00) 4.24%, rgba(43, 56, 119, 0.00) 53.81%, rgba(43, 56, 119, 0.80) 95.76%);
}

.hero-bg:before {
	background: linear-gradient(180deg, rgba(43, 56, 119, 0.00) 0%, #2B3877 87.5%);
}

.hero-bg:after {
	background: linear-gradient(180deg, rgba(43, 56, 119, 0.00) 0%, #2B3877 87.5%);
	transform: rotate(180deg);
}

.ellipse-1,
.ellipse-2,
.ellipse-3 {
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1;
}

.ellipse-2 {
	align-items: flex-start;
	justify-content: flex-end;
}

.ellipse-3 {
	justify-content: flex-start;
}

.ellipse-1:before {
	content: "";
	display: block;
	width: 55.9%;
	height: 67.6%;
	border-radius: 50%;
	background: rgba(254, 126, 13, 0.30);
	filter: blur(149.84446716308594px);
}

.ellipse-2:before {
	content: "";
	display: block;
	width: 59.7%;
	height: 26.4%;
	border-radius: 50%;
	background: rgba(254, 126, 13, 0.43);
	filter: blur(149.84446716308594px);
}

.ellipse-3:before {
	content: "";
	display: block;
	width: 46.8%;
	height: 46%;
	border-radius: 50%;
	background: rgba(43, 56, 119, 0.43);
	filter: blur(149.84446716308594px);
}

@media (min-width: 600px) {
	.hero-slide {
    	padding-top: 150px;
		padding-bottom: 200px;
	}
	
	.hero-content {
		max-width: 75%;
	}
}

@media (min-width: 800px) {	
	.hero-content {
		max-width: 65%;
	}
}

@media (min-width: 1000px) {
	.hero-slide {
    	padding-top: 200px;
	}
}

@media (min-width: 1200px) {
	.hero-slide {
    	padding-top: 250px;
		padding-bottom: 250px;
	}
	
	.hero-content {
		max-width: 60%;
	}
}

@media (min-width: 1400px) {
	.hero-content {
		max-width: 55%;
	}
}