* {
    box-sizing: border-box
}

body {
    margin:0;
    padding:0;
    background-color: black;
}

.starfield{ 
    position:absolute;
    /*z-index:-1;*/
    vertical-align:middle;
    width:100%;
    height:100%;
}

div.container {
    width: 100%;
}


header {
    margin:0;
    padding:0;
    display:block;
    color: white;
    background-color: black;
    clear: left;
    text-align: center;
    height: 100vh;
    width:100%;
}

.logo {
    position: absolute;
    top: 49%;
    left: 50%;
    transform: translate(-50%, -50%);
    width:90%;
    max-width: 355px;
}

.logoimg {
    width: 100%;
}

.menu_ico img {
    background:none;
    padding: 10px;
    border: none;
    width: 50px;
    height: 50px;
    display:block;
}

/* Dropdown Button */
.dropbtn {
    background-color: #303030;
    color: white;
    padding: 10px;
    font-size: 16px;
    border: none;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
    position: absolute;
    top: 0px;
    right: 0px;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
    display: none;
    /*position: absolute;*/
    float:right;
    width: auto;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content button {
    background-color: #303030;
    color: white;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    border: none;
}

.dropdown-content button:active {
	background-color: #505050;
}

/*Change color of dropdown links on hover 
.dropdown-content button:hover {background-color: #303030;}
*/

/* Show the dropdown menu on hover 
.dropdown:hover .dropdown-content {display: block;}
*/

/* Change the background color of the dropdown button when the dropdown content is shown 
.dropdown:hover .dropbtn {background-color: #303030;} 
*/








.arrow {
    height: 10%;
    width: auto;
    margin: 0;
    position: absolute;
    top: 80%;
    left: 50%;
    transform: translate(-50%, -50%);
}

@media screen and (min-width: 40em) {
  .arrow {
    height: 8%;
    width: auto;
  }
}

@media screen and (min-width: 80em) {
  .arrow {
    height: 6%;
    width: auto;
  }
}

.animatedarrow {

    animation-delay: 3s;

    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-direction: alternate;

    -webkit-animation-duration: 2s;
    animation-duration: 2s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;    
}
         
         @-webkit-keyframes fadeIn {
            0% {opacity: 0;}
            100% {opacity: 0.6;}
         }
         
         @keyframes fadeIn {
            0% {opacity: 0;}
            20% {opacity: 0;}
            100% {opacity: 0.6;}
         }
         
         .fadeIn {
            -webkit-animation-name: fadeIn;
            animation-name: fadeIn;
         }


article {
    margin-left: 10%;
    overflow: hidden;
    /*background-color: #303030;*/
    width: 80%;
    padding-bottom:20px; /*standard-padding, stixky-padding must be added though*/
}

.articlesticky {
    padding-bottom: 80%; /*must be std-padding PLUS height of footer which is dictated by the footwrapper*/
}

@media screen and (max-width: 20em) {
article {
  margin-left: 5%;
  width: 90%;
  padding-bottom:20%;
  }

  .articlesticky {
    padding-bottom: 70%; /*must be std-padding PLUS height of footer which is dictated by the footwrapper*/
  }
}


@media screen and (min-width: 40em) {
  article {
  margin-left: 20%;
  width: 60%;
  padding-bottom:0;
  }

  .articlesticky {
    padding-bottom: 40%; /*must be std-padding PLUS height of footer which is dictated by the footwrapper*/
  }
}

@media screen and (min-width: 80em) {
  article {
  margin-left: 30%;
  width: 40%;
  padding-bottom:0;
  }

  .articlesticky {
    padding-bottom: 18%; /*must be std-padding PLUS height of footer which is dictated by the footwrapper*/
  }
}

.aplace h2 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-style: italic;
color: #FdF8Fd;
text-shadow: 0px 0px 50px #000;
font-size: 110%;
text-align:center;
margin-bottom:-20px;
}

.bigbenefit h1 {

font-family: Verdana, Arial, Helvetica, sans-serif;
font-style:normal;
color: #FdF8Fd;
text-shadow: 0px 0px 50px #000;
text-transform: uppercase;
font-size: 190%;
text-align:center;
padding-bottom: 5%;
}



ul.nobullet {
list-style-type: none;
padding: 0;
margin: 0;
}

li.ufo {
color: white;
background: url("ufo.png") no-repeat left top;
height: 90px;
padding-left: 75px;
padding-top: 25px;
margin-top: 5px;
}

li.ast {
color: white;
background: url("asteroid.png") no-repeat left top;
height: 90px;
padding-left: 75px;
padding-top: 25px;
margin-top: 0px;
}

li.unif {
color: white;
background: url("uniform.png") no-repeat left top;
height: 90px;
padding-left: 75px;
padding-top: 25px;
margin-top: 0px;
}

li.alien {
color: white;
background: url("alien.png") no-repeat left top;
height: 90px;
padding-left: 75px;
padding-top: 25px;
margin-top: 0px;
}

li.bed {
color: white;
background: url("bed.png") no-repeat left top;
height: 90px;
padding-left: 75px;
padding-top: 25px;
margin-top: 0px;
}



footer {
  color:white; 
  margin-top:100px; 
  
  text-align: center; 
  background-color: #303030; 
  border-radius: 3px;
  padding: 10px;
}




@media screen and (min-width: 28em) {
  .footwrapper {
  width: 60%;
  margin-left: 20%;
  }
}

@media screen and (min-width: 40em) {
  .footwrapper {
  width: 46%;
  margin-left: 27%;
  }
}

@media screen and (min-width: 60em) {
  .footwrapper {
  width: 30%;
  margin-left: 35%;
  }
}

@media screen and (min-width: 65em) {
  .footwrapper {
  width: 28%;
  margin-left: 36%;
  }
}

@media screen and (min-width: 80em) {
  .footwrapper {
  width: 26%;
  margin-left: 37%;
  }
}

.astronout {
    width:50%;
    max-width:400px;
    float:right;
}

@media screen and (max-width: 20em) {
  .astronout {
  display:none;
  }
}

.cta {
     font-family: Verdana, Arial, Helvetica, sans-serif;
     color: #ff8f33; /*#ff9741; /*#ff921e;*/
     font-size: 100%;
     font-weight: 700;
     padding: 5px 10px;
     /*text-transform: uppercase;*/
     text-decoration: none;
     text-align:center;
     width: 100%;
     display:block;
     background-color: #000; /*#ff921e; /*#ff9741; /*#ff9741;*/
 }



 
.btn {
     border-radius: 3px;
     font-family: Verdana, Arial, Helvetica, sans-serif;
     color: #ff9741; /*#ff921e;*/
     font-size: 125%;
     font-weight: 700;
     padding: 5px 10px;
     border: solid #ff9741/*#ff680a*/ 3px;
     text-transform: uppercase;
     text-decoration: none;
     text-align:center;
     width: 100%;
     display:block;
     background-color: #000; /*#ff921e; /*#ff9741; /*#ff9741;*/
     cursor:pointer;
 }

 
@media screen and (max-width: 25em) {
.btn {
  font-size: 115%;
 }
}


.btn:hover {
	text-decoration: none;
}
.btn:active {
	position: relative;
	top: 1px;
}


.orange {
	color: #fef4e9;
	border: solid 1px #da7c0c;
	background: #ff9741; 
	background: -webkit-gradient(linear, left top, left bottom, from(#ff8f33), to(#662e00));
	background: -moz-linear-gradient(top,  ##ff8f33,  #662e00);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff8f33', endColorstr='#662e00');
}
.orange:hover {
	background: #f47c20;
	background: -webkit-gradient(linear, left top, left bottom, from(#e66700), to(#331700));
	background: -moz-linear-gradient(top,  #e66700,  #331700);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#e66700', endColorstr='#331700');
}
.orange:active {
	color: #fcd3a5;
	background: -webkit-gradient(linear, left top, left bottom, from(#b35000), to(#000000));
	background: -moz-linear-gradient(top,  #b35000,  #000000);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#b35000', endColorstr='#000000');
}





input[type=text] {
    padding: 10px 10px;
    border:3px solid #ccc; 
    -webkit-border-radius: 3px;
    border-radius: 3px;
    font-size: 100%;
    width: 100%;
    display:block;
}

input[type=text]:focus {
    border-color:#333;
}