/* Universal styles */
  /* Header formatting */
  header {
    height:100px;
    display: flex;
    align-items: center;
  }
  header img {
    max-width: 350px;
    margin-left: 20px;
  }
  nav li {
  display: inline-block;
  padding-left:5%;
  }
  nav {
    text-align: right;
    width:100%;
  }
  nav li a {
    font-family: "Barlow Condensed", sans-serif;
    text-transform: uppercase;
    color: #fff;
    text-decoration: none;
    font-size: 25px;
  }
  nav a:hover {
    text-decoration: underline;
  }
  .topnav .icon {
    display: none;
  }
  /* Footer formatting */
  footer {
    background-color: #343434;
    height: 50px;
    width: 96%;
    display: flex;
    align-items: center;
    padding: 2%;
    margin-top: 5%;
  }
  footer img{
    width: 22%;
  }
  footer div {
    font-family: "Barlow Condensed", sans-serif;
    text-transform: uppercase;
    color: #fff;
    font-size: 18px;
    text-align: right;
    width: 40%;
  }
  /* Video formatting */
  .video {
    margin: 5% 13% 0;
  }
  .video p {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 18px;
  }
  .video a {
    text-decoration: none;
    color: #46c521;
  }
  /* Content formatting */
  .line {
    border-bottom: 1px solid;
    margin: 4% 35%;
  }
  .article-body {
    font-family: "Vollkorn", serif;
    font-weight: 100;
    font-size: 22px;
    line-height: 1.3;
    margin: 0 22%;
  }
  /* Image formatting */
  .horizontal-image-layout {
    display: grid;
    grid-template-columns: 18% auto 18%;
  }
  .horizontal-image img {
    width: 100%;
  }
  .horizontal-image-caption {
    padding-left: 8%;
    padding-right: 20%;
  }
  .horizontal-image-caption p {
    font-family: "Barlow Condensed", sans-serif;
    font-size: 18px;
    line-height: 1.25;
  }
  .vertical-image-layout {
    display: grid;
    grid-template-columns: 34% auto 34%;
  }
  .vertical-image img {
    width: 100%;
  }
  .vertical-image-caption {
    padding-left: 4%;
    padding-right: 54%;
  }
  .vertical-image-caption p {
    font-family: "Barlow Condensed", sans-serif;
    font-size: 18px;
    line-height: 1.25;
  }
  .line-photos {
    border-bottom: 1px solid;
    margin: 3% 35%;
  }
  /* Universal media queries */
  @media screen and (max-width:1024px) {
    header {
      height: 200px;
      padding-right: 5%;
    }
    header img {
      max-width: 420px;
      margin-left: 30px;
    }
    header li a {
      font-size: 50px;
    }
    /* Something weird is going on here, because the menu options are displaying above the hamburger menu icon, rather than beneath it. Maybe it has something to do with this navigation being in list format, whereas the example from W3Schools just had links? Or maybe it's something in the javascript? In any case, I wanted to include this function here, because I do like the way the hamburger menu looks on the mobile pages--I just wish the menu options displayed beneath it.  */
    .topnav li:not(:last-child) {display: none;}
    .topnav a.icon {
      float: right;
      display: block;
    }
    .topnav.responsive {position: relative;}
    .topnav.responsive li.icon {
      position: absolute;
      right: 0;
      top: 0;
    }
    .topnav.responsive li {
      float: none;
      display: block;
      text-align: right;
    }
    .video {
      margin: 8% 8% 0;
    }
    .video p {
    font-family: "Barlow Condensed", sans-serif;
    font-size: 28px;
    }
    .article-body {
      font-family: "Vollkorn", serif;
      font-weight: 100;
      font-size: 35px;
      line-height: 1.35;
      margin: 0 10%;
    }
    .horizontal-image-layout {
      grid-template-columns: 1fr;
    }
    .horizontal-image {
      margin: 0 8%;
    }
    .horizontal-image-caption p {
      font-size: 28px;
      line-height: 1.25;
    }
    .vertical-image-layout {
      grid-template-columns: 1fr;
      ;
    }
    .vertical-image {
      margin: 0 24%;
    }
    .vertical-image-caption {
      padding-left: 24%;
      padding-right: 24%;
    }
    .vertical-image-caption p {
      font-size: 28px;
      line-height: 1.25;
    }
    footer {
      background-color: #343434;
      height: 70px;
      width: 96%;
      display: flex;
      align-items: center;
      padding: 2%;
      margin-top: 5%;
    }
    footer img{
      width: 35%;
    }
    footer div {
      font-family: "Barlow Condensed", sans-serif;
      color: #fff;
      font-size: 22px;
      text-align: right;
      width: 50%;
    }
  }
/* Homepage */
  /* Hero image formatting */
  .home-hero {
    /* Sizing */
    width: 100vw;
    height: 100vh;
    /* Flexbox */
    display: flex;
    justify-content: center;
    align-items: center;
    /* Text styling */
    text-align: center;
    /* Background styling */
    background-image: url("../images/jordan_lake_sunrise_cropped.jpg");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
  }
  .home-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, 100%);
  }
  .home-logo img {
    padding-top: 330px;
    width: 45%;
  }
  .home-hero h3 {
    /* Text styling */
    font-family: "Vollkorn", serif;
    font-weight: normal;
    color: #fff;
    font-size: 22px;
    line-height: 1.4;
    margin-left: 17%;
    margin-right: 17%;
  }
  .down-arrow img {
    padding-top: 125px;
    width: 3.5%;
  }
  /* Body formatting */
  .intro {
    /* Text styling */
    font-family: "Vollkorn", serif;
    font-weight: normal;
    text-align: center;
    font-size: 22px;
    line-height: 1.4;
    margin-left: 14%;
    margin-right: 14%;
    padding-top: 5%;
    padding-bottom: 1%;
  }
  .stories-header h2 {
    /* Text styling */
    font-family: "Barlow Condensed", sans-serif;
    font-weight: 100;
    text-transform: uppercase;
    text-align: center;
    font-size: 56px;
  }
  /* Story options formatting */
  .options {
    position: relative;
    width: 32%;
  }
  .options img {
    max-width: 100%;
  }
  .stories {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin: 0% 6% 6%;
  }
  .overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    opacity: 0;
    transition: .5s ease;
    background-color: #fff;
  }
  .options:hover .overlay {
    opacity: .8;
  }
  .text {
    color: #000;
    font-family: "Barlow Condensed", sans-serif;
    text-transform: uppercase;
    font-size: 2.8em;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
  }
  /* Homepage media queries */
  @media screen and (max-width:1024px) {
    .home-hero {
      /* Sizing */
      background-image: url("../images/jordan_lake_sunrise_cropped_tablet.jpg");
    }
    .home-logo img {
      width: 80%;
    }
    .home-hero h3 {
      /* Text styling */
      font-family: "Vollkorn", serif;
      font-weight: normal;
      color: #fff;
      font-size: 30px;
      line-height: 1.3;
      margin-left: 10%;
      margin-right: 10%;
    }
    .down-arrow img {
      width: 7%;
    }
    /* Body formatting */
    .intro {
      /* Text styling */
      font-family: "Vollkorn", serif;
      font-weight: normal;
      text-align: center;
      font-size: 32px;
      line-height: 1.3;
      margin-left: 8%;
      margin-right: 8%;
      padding-top: 6%;
      padding-bottom: 4%;
    }
    .stories-header h2 {
      /* Text styling */
      font-family: "Barlow Condensed", sans-serif;
      font-weight: 100;
      text-transform: uppercase;
      text-align: center;
      font-size: 80px;
      margin-top: 6%;
    }
    /* Story options formatting */
    .options img {
      max-width: 100%;
    }
    .stories {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      margin: 0% 3% 8%;
    }
  }

  /* Hog Poop styling */
  .hog-hero {
    /* Sizing */
    width: 100vw;
    height: 100vh;
    /* Grid */
    display: grid;
    /* Text styling */
    text-align: center;
    /* Background styling */
    background-image: url("../images/hogpoop7_shaded.jpg");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
  }
  .hog-hero h1 {
    /* Text styling */
    font-family: "Vollkorn", serif;
    font-weight: 600;
    color: #fff;
    font-size: 75px;
    line-height: 1.1;
    padding-bottom: 1.5%;
    border-bottom: 2px solid;
    }
  .hog-hero h3 {
    /* Text styling */
    font-family: "Vollkorn", serif;
    font-weight: 100;
    color: #fff;
    font-size: 22px;
    line-height: 1.3;
    margin-top: -8%;
  }
  .hog-container {
    display: grid;
    grid-template-columns: 66% 34%;
  }
  .hog-article-info {
    margin-right: 10%;
    margin-top: 40%;
  }
  /* Hog Poop media queries */
  @media screen and (max-width:1024px) {
    .hog-hero {
      background-image: url("../images/hogpoop7_shaded_tablet.jpg");
    }
    .hog-hero h1 {
      font-size: 120px;
    }
    .hog-hero h3 {
      font-size: 36px;
    }
    .hog-container {
      display: grid;
      grid-template-columns: 0% 100%;
    }
    .hog-article-info {
      margin-left: 16%;
      margin-right: 16%;
      margin-top: 0%
    }
  }
  /* Fearing Water styling */
  .water-hero {
    /* Sizing */
    width: 100vw;
    height: 100vh;
    /* Grid */
    display: grid;
    /* Text styling */
    text-align: center;
    /* Background styling */
    background-image: url("../images/genx_002_shaded.jpg");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
  }
  .water-hero h1 {
    /* Text styling */
    font-family: "Vollkorn", serif;
    font-weight: 600;
    color: #fff;
    font-size: 75px;
    line-height: 1.1;
    margin-top: 19%;
    padding-bottom: 1.5%;
    border-bottom: 2px solid;
    }
  .water-hero h3 {
    /* Text styling */
    font-family: "Vollkorn", serif;
    font-weight: 100;
    color: #fff;
    font-size: 22px;
    line-height: 1.3;
    margin-top: -6%;
  }
  .water-container {
    display: grid;
    grid-template-columns: 60% 40%;
  }
  .water-article-info {
    margin-right: 10%;
    margin-top: 30%;
  }
  /* Fearing Water media queries */
  @media screen and (max-width:1024px) {
    .water-hero {
      background-image: url("../images/genx_002_shaded_tablet.jpg");
    }
    .water-hero h1 {
      font-size: 120px;
    }
    .water-hero h3 {
      font-size: 36px;
    }
    .water-container {
      display: grid;
      grid-template-columns: 0% 100%;
    }
    .water-article-info {
      margin-left: 8%;
      margin-right: 8%;
      margin-top: 0%;
    }
  }
  /* Queen Bee styling */
  .bee-hero {
    /* Sizing */
    width: 100vw;
    height: 100vh;
    /* Grid */
    display: grid;
    /* Text styling */
    text-align: center;
    /* Background styling */
    background-image: url("../images/bees4_shaded.jpg");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
  }
  .bee-hero h1 {
    /* Text styling */
    font-family: "Vollkorn", serif;
    font-weight: 600;
    color: #fff;
    font-size: 75px;
    line-height: 1.1;
    margin-top: 19%;
    padding-bottom: 1.5%;
    border-bottom: 2px solid;
    }
  .bee-hero h3 {
    /* Text styling */
    font-family: "Vollkorn", serif;
    font-weight: 100;
    color: #fff;
    font-size: 22px;
    line-height: 1.3;
    margin-top: -5%;
  }
  .bee-container {
    display: grid;
    grid-template-columns: 60% 40%;
  }
  .bee-article-info {
    margin-right: 5%;
    margin-top: 30%;
  }
  /* Queen Bee media queries */
  @media screen and (max-width:1024px) {
    .bee-hero {
      background-image: url("../images/bees4_shaded_tablet.jpg");
    }
    .bee-hero h1 {
      font-size: 120px;
    }
    .bee-hero h3 {
      font-size: 36px;
    }
    .bee-container {
      display: grid;
      grid-template-columns: 0% 100%;
    }
    .bee-article-info {
      margin-left: 8%;
      margin-right: 8%;
      margin-top: 0%;
    }
  }