* {
  font-family: sans-serif;
  margin: 0;
  padding: 0;
}

.header {
  position: fixed;
  background: #000;
  z-index: 5;
  top: 0;
  width: 100vw;
  left: 0px;
  border: 0;
  font: inherit;
  font-size: 100%;
  vertical-align: baseline;
  display: block;
}

.header img {
  display: block;
  margin: 0.2em auto;
  width: 30%;
}

@media (max-width: 600px) {
  /* line 53, ../sass/index.scss */
  .header img {
    width: 60%;
  }
}

/* line 61, ../sass/index.scss */
.header a {
  color: white;
}

/* line 64, ../sass/index.scss */
.header .i {
  display: block;
  position: absolute;
  right: 1em;
  top: calc(50% - 0.6em);
  font-size: 1.4em;
}
/* line 70, ../sass/index.scss */
.header .i i {
  margin: 0 0.3em;
}

.story-meta{
  position: absolute;
  bottom: 10%;
  box-sizing: border-box;
  width: 33%;
  padding: 10px;
  margin: 50px 0 70px 50px;
  color: black;
  font-family: 'Playfair Display';
  padding-left: 20px;
}

.story-meta * {
  font-family: 'Playfair Display';
}

.byline {
  color: black;
}

.title{
  color: black;
  font-size: 76px;
  margin-bottom: 10px;
}
.subtitle{
  color: black;
  font-size: 32px;
  margin-bottom: 10px;
}
  img{
        max-width: 100%;
  }
@media (max-width: 920px) {
  .story-meta{
    width: 43%;
    bottom: 45%;
  }
  img{
        max-width: 100%;
  }
}

.body {
  margin-top: 60px;
  width: 100%;
  text-indent: 36px;
  align-content: center;
}

.body p {
  width: 70%;
  margin-top: 2vh;
  margin-left: 14vw;
}

.img-set {
  position: relative;
}

#nachi, #carver-dias, #lounder {
  float: left;
  margin: 2vh 2vw 1vh 12vw;
}

.bio {
  margin-top: 0 !important;
  margin-left: 0 !important;
  top: 0;
  right: 0;
  left: 36px;
  bottom: 0;
  position: absolute;
  display: none;
  height: 410px;
  width: 260px !important;
  padding: 20px;
  font-size: 20px;
  font-family: "Oswald";
  text-align: center;
}

.bio a {
  font-family: "Oswald";
}

#nachi:hover .bio, #carver-dias:hover .bio, #duncan:hover .bio, #harvey:hover .bio, #yungblut:hover .bio, #lounder:hover .bio {
  display: block;
  background-color: rgba(255,255,255,0.7);
}

#duncan, #harvey, #yungblut {
   float: right;
   margin: 2vw 15vw 1vw 2vw;
}

#yungblut img {
  width: 300px;
  height: 450px;
}

#lounder img {
  width: 300px;
  height: 450px;
}

#carver-dias img{
  width: 350px;
  height: 525px;
}

#carver-dias .bio {
  width: 310px !important;
  height: 485px !important;
}

#duncan img {
  width: 420px;
  height: 460px;
}

#duncan .bio {
  height: 420px !important;
  width: 380px !important;
}

#harvey img {
  width: 490px;
  height: 420px;
}

#harvey .bio {
  height: 380px !important;
  width: 450px !important;
}

@media (max-width: 800px) {
  .story-meta{
    width: 80% !important;
    bottom: 50% !important;
  }
  .title {
    font-size: 26px !important;
  }
  .subtitle {
    font-size: 16px !important;
  }
  .byline {
    font-size: 12px !important;
  }
  .img-set img {
    max-width: 250px !important;
  }
  .img-set .bio {
    width: 210px !important;
    height: 335px !important;
  }
  #harvey img {
    width: 210px !important;
    height: 200px !important;
  }
  #harvey .bio {
    width: 170px !important;
    height: 160px !important;
  }
  #carver-dias img {
    width: 200px !important;
    height: 300px !important;
  }
  #carver-dias .bio {
    width: 160px !important;
    height: 260px !important;
    font-size: 12px !important;
  }
  #duncan img {
    width: 220px !important;
    height: 240px !important;
  }
  #duncan .bio {
    width: 180px !important;
    height: 200px !important;
    font-size: 12px !important;
  }
}