html{
	width: 100vw;
	height: 100vh;
	padding: 0px;
	margin: 0px;
	background: url("img/heroBackground.png");
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	background-attachment: fixed;
	overscroll-behavior: none;
	overflow-y: scroll;
	overflow-x: hidden;
	cursor: default;
	user-select: none;
}

body{
	min-width: 100vw;
	min-height: 100vh;
	padding: 0px;
	margin: 0px;
	background: transparent;
}

h1{
	color: #37719d;
	/*font-family: "Open Sans", sans-serif;*/
	font-family: "Space Grotesk", sans-serif;
	font-size: 36px;
	font-weight: 400;
	text-align: center;
	text-transform: uppercase;
	text-shadow: -1.5px -1.5px 0px rgba(162, 210, 232, 1.0),
								1.5px -1.5px 0px rgba(162, 210, 232, 1.0),
							 -1.5px 1.5px 0px rgba(162, 210, 232, 1.0),
							  1.5px 1.5px 0px rgba(162, 210, 232, 1.0);
}

p{
	color: #fff;
	/*font-family: "Open Sans", sans-serif;*/
	font-family: "Space Grotesk", sans-serif;
	font-size: 18px;
	font-weight: 400;
	text-align: left;
	margin-top: 0px;
}

iframe{
	margin: 0px;
	padding: 0px;
	border: none;
  border-radius: 16px;
}

video{
	margin: 0px;
	padding: 0px;
	border: none;
  border-radius: 16px;
	width: 560px;
	height: 315px;
}

@media screen and (max-width: 800px){
	video{
		width: 360px;
		height: 203px;
		border-radius: 8px;
	}
}

#heroElements{
	width: 100vw;
	height: 100vh;
	top: 0px;
	left: 0px;
}

#heroElements #heroBackground{
	width: 100vw;
  height: 100vh;
  padding: 0px;
  margin: 0px;
  background: url("img/heroBackground.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
	/*animation: twinkle 0.1s linear infinite;
	-webkit-animation: twinkle 0.1s linear infinite;*/
	position: absolute;
	left: 0px;
	top: 0px;
	z-index: -1;
}

#heroElements #heroPlanet{
	width: 100vw;
  height: 100vh;
  padding: 0px;
  margin: 0px;
  background: url("img/heroPlanet_transparent.png");
  background-size: 1920px auto;
  background-position: center;
  background-repeat: no-repeat;
	transform: translate(-5%, -15%);
	-webkit-transform: translate(-5%, -15%);
}

@media screen and (max-width: 1440px){
	#heroElements #heroPlanet{
		background-size: 1680px auto;
	  background-position: center;
	  background-repeat: no-repeat;
		transform: translate(-5%, -5%);
		-webkit-transform: translate(-5%, -5%);
	}
}

@media screen and (max-width: 1200px){
	#heroElements #heroPlanet{
		background-size: 1440px auto;
	  background-position: center;
	  background-repeat: no-repeat;
		transform: translate(-3%, -3%);
		-webkit-transform: translate(-3%, -3%);
	}
}

@media screen and (max-width: 960px){
	#heroElements #heroPlanet{
		background-size: 1080px auto;
	  background-position: center;
	  background-repeat: no-repeat;
		transform: translate(-2%, -2%);
		-webkit-transform: translate(-2%, -2%);
	}
}

@media screen and (max-width: 800px){
	#heroElements #heroPlanet{
		background-size: auto 70%;
	  background-position: top center;
	  background-repeat: no-repeat;
		transform: translateY(0px);
		-webkit-transform: translateY(0px);
	}
}

#heroElements #heroTerrain{
	width: 100vw;
	height: 100vh;
	padding: 0px;
	margin: 0px;
	margin-top: -100vh;
	background: url("img/heroTerrain_transparent.png");
	background-size: 1920px auto;
	background-position: bottom center;
	background-repeat: no-repeat;
	transform: translate(0px, 0px);
	-webkit-transform: translate(0px, 0px);
}

@media screen and (min-width: 1920px){
	#heroElements #heroTerrain{
		background-size: 100% auto;
		background-position: bottom center;
	  background-repeat: no-repeat;
	}
}

@media screen and (max-width: 1440px){
	#heroElements #heroTerrain{
		background-size: 1680px auto;
		background-position: bottom center;
	  background-repeat: no-repeat;
	}
}

@media screen and (max-width: 800px){
	#heroElements #heroTerrain{
		background-size: contain;
	  background-position: bottom center;
	  background-repeat: no-repeat;
		transform: translateY(0px);
		-webkit-transform: translateY(0px);
	}
}

#heroElements #heroLogo{
	width: 100vw;
  height: 100vh;
  padding: 0px;
  margin: 0px;
	margin-top: -100vh;
  background: url("img/heroLogo.png");
  background-size: 1280px auto;
  background-position: center;
  background-repeat: no-repeat;
	transform: translateY(-7.5%);
	-webkit-transform: translateY(-7.5%);
}

@media screen and (max-width: 1440px){
	#heroElements #heroLogo{
		background-size: 1024px auto;
	  background-position: center;
	  background-repeat: no-repeat;
		transform: translateY(0px);
		-webkit-transform: translateY(0px);
	}
}

@media screen and (max-width: 1200px){
	#heroElements #heroLogo{
		background-size: 900px auto;
	  background-position: center;
	  background-repeat: no-repeat;
		transform: translateY(0px);
		-webkit-transform: translateY(0px);
	}
}

@media screen and (max-width: 960px){
	#heroElements #heroLogo{
		background-size: 800px auto;
	  background-position: center;
	  background-repeat: no-repeat;
		transform: translateY(0px);
		-webkit-transform: translateY(0px);
	}
}

@media screen and (max-width: 800px){
	#heroElements #heroLogo{
		background-size: contain;
	  background-position: center;
	  background-repeat: no-repeat;
		transform: translateY(0px);
		-webkit-transform: translateY(0px);
	}
}

#heroElements #trailerButton{
	width: 288px;
	height: 64px;
	background: rgba(0,0,0,0.7);
	border: 1px solid #fff;
	border-radius: 64px;
	position: absolute;
	left: calc((100vw - 288px) / 2);
	top: 65vh;
	text-align: center;
	font-size: 22px;
	font-weight: 400;
	line-height: 64px;
	/*font-family: "Open Sans", sans-serif;*/
	font-family: "Space Grotesk", sans-serif;
	color: #fff;
	cursor: pointer;
	text-shadow: -0.5px -0.5px 0 rgba(0, 0, 0, 1.0),
								0.5px -0.5px 0 rgba(0, 0, 0, 1.0),
							 -0.5px 0.5px 0 rgba(0, 0, 0, 1.0),
							  0.5px 0.5px 0 rgba(0, 0, 0, 1.0);
}

#heroElements #trailerNote{
	width: 288px;
	height: 64px;
	background: rgba(0,0,0,0.7);
	border: 1px solid #fff;
	border-radius: 64px;
	position: absolute;
	left: calc((100vw - 288px) / 2);
	top: 65vh;
	text-align: center;
	font-size: 22px;
	font-weight: 400;
	line-height: 64px;
	/*font-family: "Open Sans", sans-serif;*/
	font-family: "Space Grotesk", sans-serif;
	color: #fff;
	text-shadow: -0.5px -0.5px 0 rgba(0, 0, 0, 1.0),
								0.5px -0.5px 0 rgba(0, 0, 0, 1.0),
							 -0.5px 0.5px 0 rgba(0, 0, 0, 1.0),
							  0.5px 0.5px 0 rgba(0, 0, 0, 1.0);
	opacity: 0.5;
}

#heroElements .scrollHandle{
	width: 100vw;
	height: 64px;
	/*font-family: "Open Sans", sans-serif;*/
	font-family: "Space Grotesk", sans-serif;
	font-size: 22px;
	font-weight: 400;
	text-transform: uppercase;
	color: #37719d !important;
	position: absolute;
	left: 0px;
	top: calc(100vh - 128px);
	text-align: center;
	display: flex;
  flex-wrap: nowrap;
  flex-direction: column;
  align-content: flex-end;
  justify-content: center;
  align-items: center;
	text-shadow: -1.5px -1.5px 0px rgba(162, 210, 232, 1.0),
								1.5px -1.5px 0px rgba(162, 210, 232, 1.0),
							 -1.5px 1.5px 0px rgba(162, 210, 232, 1.0),
							  1.5px 1.5px 0px rgba(162, 210, 232, 1.0);
}

#heroElements .scrollChevron{
	width: 64px;
	height: 64px;
	/*font-family: "Open Sans", sans-serif;*/
	font-family: "Space Grotesk", sans-serif;
	font-size: 48px;
	font-weight: 400;
	color: #37719d !important;
	text-align: center;
	animation: chevronBob 1.0s ease-in-out infinite;
	-webkit-animation: chevronBob 1.0s ease-in-out infinite;
}

.featureContainer{
	width: 100vw;
	padding: 0px;
	padding-top: 2px;
	padding-bottom: 2px;
	padding-bottom: 36px;
	margin: 0px;
	margin-top: -2px;
	margin-bottom: -2px;
	text-align: center;
	display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-content: center;
  justify-content: center;
  align-items: center;
}

@media screen and (max-width: 1360px){
	.featureContainer{
		flex-direction: column;
	}
	.featureContainer:nth-of-type(odd){
		flex-direction: column-reverse;
	}
}

.featureContainer.blue{
	background: url("img/backgroundBlue.png");
	background-size: 1920px auto;
  background-position: center;
  background-repeat: repeat;
	color: #fff;
}

@media screen and (max-width: 1440px){
	.featureContainer.blue{
		background-size: 1680px auto;
		background-position: center;
	  background-repeat: repeat;
	}
}

@media screen and (max-width: 800px){
	.featureContainer.blue{
		background-size: contain;
		background-position: center;
	  background-repeat: repeat;
	}
}

.feature{
	padding: 22px 16px;
	margin-left: auto;
	margin-right: auto;
}

.feature.wide{
	max-width: 960px;
}

.feature.medium{
	max-width: 640px;
}

.feature.narrow{
	max-width: 480px;
}

.feature.small{
	max-width: 400px;
}

.feature.short{
	max-width: 320px;
}

.feature.inline{
	display: inline-block;
}

.feature.inline:nth-last-of-type(even){
	margin-left: auto;
	margin-right: 24px;
}
.feature.inline:nth-last-of-type(odd){
	margin-left: 24px;
	margin-right: auto;
}

@media screen and (max-width: 1360px){
	.feature.inline:nth-last-of-type(even){
		margin-left: auto;
		margin-right: auto;
	}
	.feature.inline:nth-last-of-type(odd){
		margin-left: auto;
		margin-right: auto;
	}
}

.feature.blurb p{
	text-align: justify;
  text-justify: inter-word;
	text-transform: uppercase;
	font-size: 22px;
	font-weight: 400;
	color: #1e5176;
	text-shadow: -1.5px -1.5px 0px rgba(162, 210, 232, 1.0),
								1.5px -1.5px 0px rgba(162, 210, 232, 1.0),
							 -1.5px 1.5px 0px rgba(162, 210, 232, 1.0),
							  1.5px 1.5px 0px rgba(162, 210, 232, 1.0);
	margin-bottom: 64px;
	text-transform: uppercase;
	/*font-style: italic;*/
}

.feature.blurb p:nth-of-type(1)::after {
    content: "Untold cycles have passed since the fall of the Federation.";
    display: block;
    position: relative;
    transform: translateY(-100%);
    -text-stroke: 22px #a2d2e8;
    -webkit-text-stroke: 22px #a2d2e8;
    z-index: -1 !important;
}

.feature.blurb p:nth-of-type(2)::after {
    content: "Humanity is fractured, adrift on an endless sea of stars.";
    display: block;
    position: relative;
    transform: translateY(-100%);
    -text-stroke: 22px #a2d2e8;
    -webkit-text-stroke: 22px #a2d2e8;
    z-index: -1 !important;
}

.feature.blurb p:nth-of-type(3)::after {
    content: "Our past, and our future, are shrouded in uncertainty.";
    display: block;
    position: relative;
    transform: translateY(-100%);
    -text-stroke: 22px #a2d2e8;
    -webkit-text-stroke: 22px #a2d2e8;
    z-index: -1 !important;
}

.feature.blurb p:nth-of-type(4)::after {
    content: "When all is lost, can we find hope? Can we find ourselves?";
    display: block;
    position: relative;
    transform: translateY(-100%);
    -text-stroke: 22px #a2d2e8;
    -webkit-text-stroke: 22px #a2d2e8;
    z-index: -1 !important;
}

.feature.blurb p:nth-of-type(odd){
	transform: translateX(-96px);
}
.feature.blurb p:nth-of-type(even){
	transform: translateX(96px);
}

@media screen and (max-width: 1600px){
	.feature.blurb p:nth-of-type(odd){
		transform: translateX(48px);
	}
	.feature.blurb p:nth-of-type(even){
		transform: translateX(-48px);
	}
}

@media screen and (max-width: 800px){
	.feature.blurb p:nth-of-type(odd){
		transform: translateX(0px);
	}
	.feature.blurb p:nth-of-type(even){
		transform: translateX(0px);
	}
	.feature.blurb p{
		text-align: center;
	}
}

.feature.description p{
	text-align: justify;
	font-size: 18px;
	font-weight: 400;
	color: #1e5176 !important;
	background: #a2d2e8;
}

@media screen and (max-width: 1360px){
	.feature.description p{
		text-align: center;
	}
}

#heroShip{
	width: 192px;
	height: 192px;
	background: url("img/heroShip.png");
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	position: absolute;
	right: 192px;
	top: 130vh;
	filter: drop-shadow(16px 8px 0px #37719d);
	-webkit-filter: drop-shadow(16px 8px 0px #37719d);
}

@media screen and (max-width: 1360px){
	#heroShip{
		right: 96px;
	}
}

@media screen and (max-width: 1080px){
	#heroShip{
		width: 128px;
		height: 128px;
		right: 48px;
		filter: drop-shadow(12px 6px 0px #37719d);
		-webkit-filter: drop-shadow(12px 6px 0px #37719d);
	}
}

@media screen and (max-width: 800px){
	#heroShip{
		width: 96px;
		height: 96px;
		right: 24px;
		filter: drop-shadow(8px 4px 0px #37719d);
		-webkit-filter: drop-shadow(8px 4px 0px #37719d);
	}
}

#featuresEnd{
	width: 100vw;
  height: 80vh;
	margin-top: -2px;
	padding-top: 2px;
  background: url(img/heroTerrain_transparent.png);
  background-size: 1920px auto;
  background-position: bottom center;
  background-repeat: no-repeat;
  transform: rotate(180deg);
  -webkit-transform: rotate(180deg);
}

@media screen and (min-width: 1920px){
	#featuresEnd{
		background-size: 100% auto;
		background-position: bottom center;
	  background-repeat: no-repeat;
	}
}

@media screen and (max-width: 1440px){
	#featuresEnd{
		background-size: 1680px auto;
		background-position: bottom center;
	  background-repeat: no-repeat;
	}
}

@media screen and (max-width: 800px){
	#featuresEnd{
		background-size: contain;
		background-position: bottom center;
	  background-repeat: no-repeat;
	}
}

#legalFooter{
	width: 100vw;
	padding-bottom: 12px;
}

#legalFooter p{
	text-align: center;
	font-size: 18px;
	font-weight: 400;
	text-shadow: -0.5px -0.5px 0 rgba(0, 0, 0, 1.0),
								0.5px -0.5px 0 rgba(0, 0, 0, 1.0),
							 -0.5px 0.5px 0 rgba(0, 0, 0, 1.0),
							  0.5px 0.5px 0 rgba(0, 0, 0, 1.0);
	text-transform: uppercase;
}

@keyframes chevronBob{
	 0% {transform: translateY(4px);}
	50% {transform: translateY(-4px);}
 100% {transform: translateY(4px);}
}

@-webkit-keyframes chevronBob{
	 0% {-webkit-transform: translateY(4px);}
	50% {-webkit-transform: translateY(-4px);}
 100% {-webkit-transform: translateY(4px);}
}

@keyframes twinkle{
	 0% {filter: brightness(1.0);}
	50% {filter: brightness(1.1);}
 100% {filter: brightness(1.0);}
}

@keyframes twinkle{
	 0% {-webkit-filter: brightness(1.0);}
	50% {-webkit-filter: brightness(1.1);}
 100% {-webkit-filter: brightness(1.0);}
}