/* Header */
img[src$=".gif"], img[src$=".png"] {
                   image-rendering: -moz-crisp-edges;         /* Firefox */
                   image-rendering:   -o-crisp-edges;         /* Opera */
                   image-rendering: -webkit-optimize-contrast;/* Webkit (non-standard naming) */
                   image-rendering: crisp-edges;
                   -ms-interpolation-mode: bicubic;  /* IE (non-standard property) */
                 }
html, body { height: 100%; margin: 0; padding: 0; }

body {
	position: absolute;
	width: 100%;
	top: 0px; /* Header Height */
	bottom: 0px;
	background: #333;
	color: #383a3c;
	font-weight: 400;
	font-size: 1em;
	line-height: 1.25;
	font-family: 'Arimo', Calibri, Arial, sans-serif;
}

.large-header {
	position: relative;
	width: 100%;
	background: #333;
	overflow: hidden;
	background-size: cover;
	background-position: center center;
	z-index: 1;
}

.demo-1 .large-header {
	background-image: url("../images/astro500.png");
}

.main-title {
	font-weight: 600;
	color: aliceblue;
	text-transform: uppercase;
	font-size: 4.2em;
	letter-spacing: 0.1em;
	margin:0;
}

.demo-1 .main-title,
.demo-3 .main-title {
	text-transform: uppercase;
	font-size: 4.2em;
	letter-spacing: 0.1em;
}

.demo-2 .main-title {
	font-family: 'Clicker Script', cursive;
	font-weight: normal;
	font-size: 8em;
	padding-left: 10px;
	text-shadow: 2px 2px 4px rgba(0,0,0,0.4);
}

.demo-2 .main-title::before {
	content: '';
	width: 20vw;
	height: 20vw;
	min-width: 3.5em;
	min-height: 3.5em;
	background: url(../img/deco.svg) no-repeat center center;
	background-size: cover;
	position: absolute;
	top: 50%;
	left: 50%;
	border-radius: 50%;
	z-index: -1;
	-webkit-transform: translate3d(-50%,-50%,0);
	transform: translate3d(-50%,-50%,0);
}

.demo-3 .main-title {
	padding: 10px 40px;
	border: 10px double #f9f1e9;
	text-transform: uppercase;
	font-family: Londrina Outline, sans-serif;
}

.demo-4 .main-title {
	font-size: 6em;
	font-weight: 300;
	padding: 10px 30px;
	text-transform: uppercase;
	color: #222;
}

.thin {
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: aliceblue;
	font-weight: 200;
	font-size: 300%;
}

@media only screen and (max-width : 768px) {
	.demo-1 .main-title,
	.demo-3 .main-title,
	.demo-4 .main-title {
		font-size: 3em;
	}

	.demo-2 .main-title {
		font-size: 4em;
	}
}

#stars {
    position: fixed;
    top: 200px;
    left: 200px;
	width: 500px;
	height: 300px;
	background-image: url(../images/astro500.jpg);
	border-radius: 15px;
	z-index:4;
}

@-webkit-keyframes redPulse {
  from { background-color: #270000; -webkit-box-shadow: 0 0 15px #333; }
  50% { background-color: #ff6c00; -webkit-box-shadow: 0 0 30px #fffaf7; }
  to { background-color: #270000; -webkit-box-shadow: 0 0 22px #333; }
}
@-o-keyframes redPulse {
  from { background-color: #270000; -o-box-shadow: 0 0 15px #333; }
  50% { background-color: #ff6c00; -o-box-shadow: 0 0 30px #fffaf7; }
  to { background-color: #270000; -o-box-shadow: 0 0 22px #333; }
}
@-moz-keyframes redPulse {
  from { background-color: #270000; -moz-box-shadow: 0 0 15px #333; }
  50% { background-color: #ff6c00; -moz-box-shadow: 0 0 30px #fffaf7; }
  to { background-color: #270000; -moz-box-shadow: 0 0 22px #333; }
}
@keyframes redPulse {
  from { background-color: #270000; box-shadow: 0 0 15px #333; }
  50% { background-color: #ff6c00; box-shadow: 0 0 30px #fffaf7; }
  to { background-color: #270000; box-shadow: 0 0 22px #333; }
}

#close {
	animation-name: redPulse;
	animation-duration: 4s;
	animation-iteration-count: infinite;
	-webkit-animation-name: redPulse;
	-webkit-animation-duration: 4s;
	-webkit-animation-iteration-count: infinite;
	-moz-animation-name: redPulse;
	-moz-animation-duration: 4s;
	-moz-animation-iteration-count: infinite;
	-o-animation-name: redPulse;
	-o-animation-duration: 4s;
	-o-animation-iteration-count: infinite;
}

#contain{
	background:rgba(211, 211, 211, 0.69);
	position: absolute;
	top: 0px;
}
#alert{
	background:transparent;
	font-family: 'Arimo', Calibri, Arial, sans-serif;
    position: fixed;
    top: 200px;
    left: 200px;
	width: 500px;
	height: 300px;
	border-radius: 15px;
}
h1x{
	position: absolute;
	margin: 4em 0 0 1em;
}
p1x{
	position: absolute;
	margin: 7em 0 0 1.35em;
}
#mailto{
	position: absolute;
	margin: 14em 0 0 2.1em;
}
#close{
	outline: none;
	width: 40px;
	height: 40px;
	padding:10px;
	background:rgba(170, 72, 0, 0.4);
	color:white;
	border:0px;
	border-radius:40px;
	margin: 16em 0 0 30em;
}

.loader {
	opacity: 0;
	z-index: 1;
	font-size: 10px;
	margin: -4px 0px 0px -4px;
	text-indent: -9999em;
	width: 47px;
	height: 47px;
	border-radius: 50%;
	background: #ffffff;
	background: -moz-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
	background: -webkit-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
	background: -o-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
	background: -ms-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
	background: linear-gradient(to right, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
	position: relative;

}
.loader:before {
  width: 50%;
  height: 50%;
  background: #FFF;
  border-radius: 100% 0 0 0;
  position: absolute;
  top: 0;
  left: 0;
  content: '';
}
.loader:after {
  background: #00529A;
  width: 75%;
  height: 75%;
  border-radius: 50%;
  content: '';
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}
@-webkit-keyframes load3 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes load3 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

#uber:hover + .loader {
	opacity: 1;
	-webkit-animation: load3 1.4s infinite linear;
	animation: load3 1.4s infinite linear;
}

.content {
	top: 0px; /* Header Height */
	bottom: 0px;
	color: aliceblue;
}

#text, #text2 {
	position: absolute;
	margin: 0;
	padding: 0;
	color: #f9f1e9;
	text-align: center;
	top: 50%;
	left: 50%;
	-webkit-transform: translate3d(-50%,-50%,0);
	transform: translate3d(-50%,-50%,0);
}

.thin2 {
	letter-spacing: 0.1em;
	color: aliceblue;
	font-weight: 100;
	font-size: 100%;
}