/* Extra small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) {
  .upper_nav {
    position: absolute;
    left: 0;
    right: 0;
    padding: 4px 10px;
    background-color: gray;
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
    box-shadow: 2px 2px 3px #e3e3e3;
    text-align: center;
  }

  .location {
    display: none;
  }

  .logo {
    position: absolute;
    z-index: 2;
    left: 50%;
    top: -80%;
    margin-left: -100px;
    background: -moz-linear-gradient(
      top,
      rgba(218, 218, 218, 1) 84%,
      rgba(218, 218, 218, 0.88) 86%,
      rgba(255, 255, 255, 0) 100%
    );
    background: -webkit-linear-gradient(
      top,
      rgba(218, 218, 218, 1) 84%,
      rgba(218, 218, 218, 0.88) 86%,
      rgba(255, 255, 255, 0) 100%
    );
    background: linear-gradient(
      to bottom,
      rgba(218, 218, 218, 1) 84%,
      rgba(218, 218, 218, 0.88) 86%,
      rgba(255, 255, 255, 0) 100%
    );
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dadada', endColorstr='#00ffffff',GradientType=0 );
    width: 200px;
    height: 150px;
    border-top-left-radius: 50%;
    border-top-right-radius: 50%;
  }

  .hero ul li {
    display: none;
    font-style: italic;
    color: #760505;
    font-weight: bold;
    font-size: 1.5rem;
    list-style-type: none;
  }

  .side_building {
    display: none;
  }

  /* .story_left_column p:nth-child(3) {
        display: none;
    }
    .story_left_column p:nth-child(4) {
        display: none;
    } */
}

/* Small devices (landscape phones, less than 768px) */
@media (max-width: 767.98px) {
  .location h3 {
    color: #f3f3f3;
    line-height: 40px;
    font-size: 20px;
  }

  .hero ul li {
    font-style: italic;
    color: #760505;
    font-weight: bold;
    font-size: 1rem;
    list-style-type: none;
  }

  .side_building {
    display: none;
  }
}

/* Medium devices (tablets, less than 992px) */
@media (max-width: 991.98px) {
  .hero ul li {
    font-style: italic;
    color: #760505;
    font-weight: bold;
    font-size: 1.5rem;
    list-style-type: none;
  }
}

/* Large devices (desktops, less than 1200px) */
@media (max-width: 1199.98px) {
  .hero ul li {
    font-style: italic;
    color: #760505;
    font-weight: bold;
    font-size: 2rem;
    list-style-type: none;
  }
}