* {
	margin: 0;
	padding: 0;
}
.hero {
	height: 80vh;
	background: linear-gradient(
				135deg,
				rgba(1, 30, 47, 0.5),
				rgba(100, 216, 243, 0.5),
				rgba(0, 51, 99, 0.5)
			    )
			0 0 / 1000% no-repeat,
		url(../images/back-hero.jpg) 0 0 / cover no-repeat;
	-webkit-animation: gradientAnimation 30s ease infinite;
	animation: gradientAnimation 30s ease infinite;
}
@-webkit-keyframes gradientAnimation {
	0% {
		background-position: 0% 30%, 0 0;
	}
	50% {
		background-position: 100% 70%, 0 0;
	}
	100% {
		background-position: 0% 30%, 0 0;
	}
}
@keyframes gradientAnimation {
	0% {
		background-position: 0% 30%, 0 0;
	}
	50% {
		background-position: 100% 70%, 0 0;
	}
	100% {
		background-position: 0% 30%, 0 0;
	}
}
.herotext {
	position: absolute;
	top: 30%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	color: #fff;
	text-align: center;
    /*text-shadow: 1px 2px #000000; */
}