*{
  margin: 0;
  padding: 0;
  text-align: left;

  -webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
  -moz-animation: fadein 2s; /* Firefox < 16 */
  -ms-animation: fadein 2s; /* Internet Explorer */
  -o-animation: fadein 2s; /* Opera < 12.1 */
  animation: fadein 2s;
}

body {
  background-image: linear-gradient(white, black);
}

@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; }
}

/* Fonts */
#intro, .question, .answer {
  width: 80%;
  padding: 3% 10%;
}

h1 {
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 4vw;
}

h2 {
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 3.5vw;
}

h3 {
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 4vw;
}

p {
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 2vw;
  line-height: 180%;
  text-indent: 5%;
}

/* link */
a{
  color: black;
  text-transform: uppercase;
  font-weight: bold;
}

header a {
  color: white;
}

a:hover {
  color: grey;
  font-style: italic;
  transition: color 1s ease;
}

#headspace {
  color: white;
  text-transform: none;
}

#headspace:hover {
  color: grey;
  font-style: italic;
  transition: color 1s ease;
}

/* more formatting */

header {
  position: static;
  width: 100%;
  height: 12vw;
  left: 0px;
  top: 0px;

  display: flex;
  background-color: black;
  color: white;
}

header h1 {
  margin: 2vw;
  margin-top: 1.5vw;
  margin-right: 1.5vw;
  width: 20vw;
}

header h2 {
  text-align: center;
  margin-top: 2vw;
  margin-right: 2vw;
}

#credit {
  text-align: right;
}


/* panels */
.panel {
  width: 100%;
  position: relative;
  display: inline-block;
}

.blur img {
  transition: all 2s ease;
  -webkit-filter: blur(15px);
  width: 100vw;
  margin: 0 auto;
}

.blur img:hover {
  -webkit-filter: blur(0px);
}

#lastsection {
  width: 100%;
  height: 35vw;
}

/* blockquotes */
.blockquote {
  color: white;
  position: absolute;
  z-index: 1000;
}

#quote1 {
  width: 40vw;
  top: 440%;
  left: 5%;
}

#quote2 {
  width: 50vw;
  top: 780%;
  left: 45%;
}

/* interview text - overall */
.question {
  color: white;
  font-weight: bold;
  width: 80%;
  padding: 3% 10%;
  position: absolute;
  z-index: 999;
  left: 0;
  right: 0;
}

.answer {
  color: white;
  width: 80%;
  padding: 3% 10%;
  position: absolute;
  z-index: 999;
  left: 0;
  right: 0;
}

/* interview text - specific */

.question-1 {
  top: 25%;
}
.answer-1 {
  top: 45%;
}

.question-2 {
  top: 35%;
}
.answer-2 {
  top: 45%;
}

.question-3 {
  top: 30%;
}
.answer-3 {
  top: 45%;
}

.question-4 {
  top: 30%;
}
.answer-4 {
  top: 42%;
}

.question-5 {
  top: 35%;
}
.answer-5 {
  top: 42%;
}

.question-6 {
  top: 15%;
}
.answer-6 {
  top: 30%;
}

.question-7 {
  top: 25%;
}
.answer-7 {
  top: 35%;
}

.question-8 {
  top: 10%;
}

.answer-8 {
  top: 35%;
}

#ending {
  color: white;
  width: 80%;
  padding: 3% 10%;
  position: relative;
}

#ending a {
  color: white;
}

#ending a:hover {
  color: grey;
}

#tagline {
  font-size: 5vw;
  font-weight: bold;
  text-transform: uppercase;
  font-style: italic;
}

/*TABLET RESPONSIVE*/
@media (max-width: 1024px) {
  header{
    display: block;
    height: 25vw;
  }

  header h1{
    font-size: 6vw;
    text-align: center;
    margin: auto;
    padding-top: 1.5vw;
    width: 100%;
  }

  header h2{
    font-size: 5vw;
    width: 100%;

  }
}


/*MOBILE RESPONSIVE*/
@media (max-width: 600px) {

  header{
    height: 40vw;
  }

  header h1{
    font-size: 9vw;
    text-align: center;
    margin: auto;
    padding-top: 2vw;
  }

  header h2{
    font-size: 6vw;
    padding-top: 1vw;
  }

  #intro {
    padding-top: 7vw;
  }

  p {
    font-size: 5vw;
  }

  .panel {
    height: 300vw;
  }

  #section7 {
    height: 400vw;
  }

  #lastsection {
    height: 175vw;
  }

  .blockquote {
    display: none;
  }

  .blur {
    height: 100%;
    width: auto;
  }

  .blur img {
    height: 100%;
  }

  .question-1 {
    top: 15%;
  }
  .answer-1 {
    top: 40%;
  }

  .question-2 {
    top: 25%;
  }
  .answer-2 {
    top: 35%;
  }

  .question-3 {
    top: 30%;
  }
  .answer-3 {
    top: 40%;
  }

  .question-4 {
    top: 22%;
  }
  .answer-4 {
    top: 35%;
  }

  .question-5 {
    top: 33%;
  }
  .answer-5 {
    top: 40%;
  }

  .question-6 {
    top: 12%;
  }
  .answer-6 {
    top: 25%;
  }

  .question-7 {
    top: 10%;
  }
  .answer-7 {
    top: 20%;
  }

  .question-8 {
    top: 15%;
  }

  .answer-8 {
    top: 30%;
  }

#ending p{
  text-indent: 0%;
}
  #tagline {
    font-size: 15vw;
  text-indent: 0%;
  line-height: 150%;
  margin-bottom: 10%;
  }

}