
html{
	height: 100%;
}

body{
	height: 100%;
	text-align: center;
	background: #114357;  /* fallback for old browsers */
	background: -webkit-linear-gradient(to bottom,  #114357, #b87333);  /* Chrome 10-25, Safari 5.1-6 */
	background: linear-gradient(to bottom,  #114357,#b87333); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
	background-attachment: fixed;
}


p{
	margin: 0;
	padding: 0;
}



h1{
	padding: 0;
	margin: 0;
	font-family: 'Orbitron', sans-serif;
	color: #b87333;
	text-shadow: 4px 4px 4px #000000;
}

h2, h3, h4{
	padding: 0;
	margin: 0;
	font-family: 'Orbitron', sans-serif;
	color: #b87333;
	text-shadow: 4px 4px 4px #000000;
}

.btn-primary{
	background-color: black;
	border: none;
}

.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active, .open>.dropdown-toggle.btn-primary {
    color: #fff;
    background-color: #b87333;
    border-color:none; /*set the color you want here*/
}



/* If the screen size is 601px wide or more, set the font-size of <div> to 80px */
@media screen and (min-width: 601px) {
	h1{
		font-size: 5vw;
	}
	h2{
		font-size: 4vw;
	}
  }
  
  /* If the screen size is 600px wide or less, set the font-size of <div> to 30px */
  @media screen and (max-width: 600px) {

	h1{
		font-size: 10vw;
	}
	h2{
		font-size: 8vw;
	}
  }


.mission{
	transform: translateY(-15vh);
	opacity: 0;
	-webkit-animation: fadein 2s 2s; /* Safari, Chrome and Opera > 12.1 */
	-moz-animation: fadein 2s 2s; /* Firefox < 16 */
	-ms-animation: fadein 2s 2s; /* Internet Explorer */
	-o-animation: fadein 2s 2s; /* Opera < 12.1 */
	animation: fadein 2s 2s forwards;
}


.mission2{
	transform: translateY(-15vh);
	opacity: 0;
	-webkit-animation: fadein 2s 3s; /* Safari, Chrome and Opera > 12.1 */
	-moz-animation: fadein 2s 3s; /* Firefox < 16 */
	-ms-animation: fadein 2s 3s; /* Internet Explorer */
	-o-animation: fadein 2s 3s; /* Opera < 12.1 */
	animation: fadein 2s 3s forwards;
}


.animate{
	-webkit-animation: fadein 3s; /* Safari, Chrome and Opera > 12.1 */
	-moz-animation: fadein 3s; /* Firefox < 16 */
	 -ms-animation: fadein 3s; /* Internet Explorer */
	  -o-animation: fadein 3s; /* Opera < 12.1 */
		 animation: fadein 3s;
}

.countdown {
	margin-top: 30vh !important;
	-webkit-animation: fadein 2s forwards; /* Safari, Chrome and Opera > 12.1 */
	-moz-animation: fadein 2s forwards; /* Firefox < 16 */
	-ms-animation: fadein 2s forwards; /* Internet Explorer */
	-o-animation: fadein 2s forwards; /* Opera < 12.1 */
	animation: fadein 2s forwards;

}

#mission-complete{
	display: none;
}

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Firefox < 16 */
@-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Opera < 12.1 */
@-o-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes moveUp {
	from { transform:translateY(0)}
	to   { transform:translateY(-20vh) }
  }

/* Firefox < 16 */
@-moz-keyframes moveUp {
	from { transform:translateY(0)}
	to   { transform:translateY(-20vh) }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes moveUp {
	from { transform:translateY(0)}
	to   { transform:translateY(-20vh) }
}

/* Internet Explorer */
@-ms-keyframes moveUp {
	from { transform:translateY(0)}
	to   { transform:translateY(-20vh) }
}

/* Opera < 12.1 */
@-o-keyframes moveUp {
	from { transform:translateY(0)}
	to   { transform:translateY(-20vh) }
}


