@font-face {
  font-family: Landasans;
  src: url(../fonts/LandasansUltraLight-qZ080.otf);
}

body {  
  font-family: 'Lato', sans-serif;
}

a {
  text-decoration: none;
}

/* HEADER */

#logo {  
  background-color: black;
  height: auto;
  width: 100%;  
}

#logo img {
  height: auto;
  width: 70%;
  z-index: 4;
}

/* PARALLAX IMAGES */

.bg1 {  
  background-image: url('../images/stars.jpg');    
  min-height: 400vh;  
  position: relative;    
  /* Parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  z-index: 3;  
}

.bg2 {  
  background-image: url('../images/planet01.jpg');    
  min-height: 280vh;  
  position: relative;  
  /* Parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  z-index: 3;  
}

.bg3 {  
  background-image: url('../images/stars.jpg');    
  min-height: 325vh;  
  position: relative;    
  /* Parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  z-index: 3;  
}

/* END OF PARALLAX IMAGES */

/* QUOTE PANEL */

#quote-panel {  
  position: absolute;
  top: 45%;  
  width: 99%;  
}

#quote {  
  position: absolute;
  top: 2%;  
  color: rgb(255, 255, 255);  
  background: rgba(0, 0, 0, 0.3);  
  line-height: 1.5em;
  text-wrap: balance;
  font-size: 3vw;  
  text-align: center;  
  z-index: 4;  
}

#quoted {  
  color: rgb(251, 255, 0);    
  font-size: 2vw;  
  z-index: 4;
}

/* END OF QUOTE PANEL */

/* BOOK PANEL */

#book-panel {
  position: absolute;
  top: 205%;   
  width: 99%;  
}

#cover {
  position: absolute;
  top: 5vw;
  left: 4%;
  height: auto;  
  width: 20%;
  z-index: 4;
}

#book-title {  
  color: #ffee00;  
  font-size: 4vw;
	font-family: Landasans;  
  z-index: 4;
}

#book {  
  position: absolute;
  top: 2%;
  left: 25%;
  color: rgb(255, 255, 255);
  background: rgba(0, 0, 0, 0.3);
  padding: .75em;
  line-height: 1.5em;
  width: 70%;  
  font-size: 2vw;
  text-align: center;  
  z-index: 4;
}

#links {
  font-size: 1em; 
}

v:link {
  color: #0070E0; 
}

a:link {
  color: #0070E0;
}

a:visited {
  color: #0070E0;  
}

a:active {
  color: #0070E0;  
}

/* AUTHOR PANEL */

#author-panel {
  position: absolute;
  top: 450%;  
  height: 50vw;
  width: 99%;  
}

#headshot {
  position: absolute;
  top: 20%;
  left: 4%;
  height: auto;  
  width: 20%;
  z-index: 4;
}

#author-name {  
  color: #ffee00;  
  font-size: 4vw;
	font-family: Landasans;  
  z-index: 4;
}

#author {
  position: absolute;
  top: 2%;
  left: 25%;
  color: rgb(255, 255, 255);  
  background: rgba(0, 0, 0, 0.3);
  padding: .75em;
  line-height: 1.5em;
  width: 70%;  
  font-size: 2vw;  
  z-index: 4;
}

/* PRESS PANEL */

#press-panel {
  position: absolute;
  top: 650%;  
  height: 50vw;
  width: 99%;
  text-align: center;
}

#press-name {  
  color: #ffee00;  
  font-size: 4vw;
	font-family: Landasans;    
  z-index: 4;
}

#press {
  position: absolute;
  top: 2%;  
  color: rgb(255, 255, 255);  
  background: rgba(0, 0, 0, 0.3);
  padding: .75em;
  line-height: 1.5em;
  width: 95%;  
  font-size: 2vw;  
  text-wrap: wrap;
  z-index: 4;
}

#press-panel a {
  color: rgb(179, 197, 255);
}

.release {  
  padding: 20px;
  border-style: solid;
  border-color: blue;
}

.release-date {
  font-size: 0.75em;
  text-align: right;
}

/* CONTACT PANEL */

#contact-panel {
  position: absolute;
  top: 150%;  
  height: 50vw;
  width: 99%;
  text-align: center;
}

#contact-title {
  color: #ffee00;  
  font-size: 4vw;
	font-family: Landasans;  
  z-index: 4;
}

#contact {  
  position: absolute;
  top: 2%;  
  color: rgb(255, 255, 255);
  background: rgba(0, 0, 0, 0.3);
  border-radius: 5px;  
  padding: .75em;
  line-height: 1.5em;
  width: 100%;     
  z-index: 4;
}

#contact-panel input[type=text], select, textarea {  
  width: 25%;
  padding: 12px; /* Some padding */  
  border-radius: 8px; /* Rounded borders */
  box-sizing: border-box; /* Make sure that padding and width stays in place */  
  margin-bottom: 2em; /* Bottom margin */
  resize: vertical; /* Allow the user to vertically resize the textarea (not horizontally) */  
}

input[type=submit] {  
  background-color: #04AA6D;
  color: white;  
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

input[type=submit]:hover {
  background-color: #45a049;
}

#thanks-panel {
  position: absolute;
  top: 5%;  
  height: 50vw;
  width: 99%;
  text-align: center;  
}

.thanks {
  position: absolute;
  width: 99%;
  color: rgb(255, 255, 255);
  background: rgba(0, 0, 0, 0.3);
  z-index: 4;  
}

#thanks-panel a {
  text-decoration: none;
}

/* Subscribe Panel */

#subscribe-panel {
  position: absolute;
  top: 45%;  
  height: 50vw;
  width: 99%;  
  text-align: center;
}

#subscribe-title {
  color: #ffee00;  
  font-size: 4vw;
	font-family: Landasans;  
  z-index: 4;
}

#subscribe {  
  position: absolute;
  top: 2%;
  left: 0%;  
  color: rgb(255, 255, 255);
  background: rgba(0, 0, 0, 0.3);
  border-radius: 5px;  
  padding: .75em;
  line-height: 1.5em;
  width: 99%;     
  z-index: 4;
}

#subscribe-panel input[type=text] {
  height: 35%;
  width: 25%;
}

/* MEDIA QUERIES */

/* For Mobile Devices */
@media ( max-width:740px ) {

/* Header */

  #logo {  
    background-color: black;
    height: auto;
    width: 100%;  
  }

  #logo img {
    height: 8vw;
    width: auto;
    z-index: 4;
  }

/* Parallax Backgrounds */

  .bg1 {
    min-height: 165vh;
  }

  .bg2 {
    min-height: 255vh;
  }

/* Quote Panel */

  #quote-panel {      
    top: 20%;    
  }

  #quoted {  
    color: rgb(251, 255, 0);    
    font-size: 3.25vw;  
    z-index: 4;
  }

/* Book Panel */

  #book-panel {
    position: absolute;
    top: 100%;  
    height: 50vw;
    width: 99%;  
  }

  #cover {
    position: absolute;
    top: 2%;
    left: 30%;
    height: auto;
    width: 40%;
    z-index: 4;
  }
 
  #book-title {  
    color: #ffee00;  
    font-size: 5vw;
    font-family: Landasans;  
    z-index: 4;
  }

  #book {
    position: absolute;
    top: 125%;
    left: 12%;
    color: rgb(255, 255, 255);  
    padding: .75em;
    line-height: 1.5em;
    width: 70%;    
    font-size: 3vw;
    text-align: center;  
    z-index: 4;
  }

/* Author Panel */

  #author-panel {
    position: absolute;
    top: 270%;  
    height: 50vw;
    width: 99%;  
  }

  #headshot {
    position: absolute;
    top: 2%;
    left: 30%;
    height: auto;
    width: 40%;
    z-index: 4;
  }
 
  #author-name {  
    color: #ffee00;  
    font-size: 6vw;
    font-family: Landasans;  
    z-index: 4;
  }

  #author {
    position: absolute;    
    left: 12%;
    color: rgb(255, 255, 255);  
    padding: .75em;
    line-height: 1.5em;
    width: 70%;    
    font-size: 3vw;
    text-align: center;  
    z-index: 4;
  }

/* Press Panel */

#press-panel {  
  top: 360%;  
  height: 50vw;
  width: 96%;  
}

/* Contact Panel */

  #contact-panel {
    position: absolute;
    top: 423%;  
    height: 50vw;
    width: 99%;  
  }

  #contact-title {    
    font-size: 8vw;    
  }

  input[type=text], select, textarea {  
    width: 70%;
    padding: 6px; /* Some padding */    
  }

/* Subscribe Panel */

  #subscribe-panel {
    position: absolute;
    top: 10%;  
    height: 50vw;
    width: 99%;  
  }

  #subscribe-title {    
    font-size: 8vw;    
  }

  #subscribe-panel input[type=text], select, textarea {  
    width: 70%;
    padding: 6px; /* Some padding */    
  }

}