@mixin masthead-background-containers() {
  position: absolute;
  left: 0;
  right: 0;
  display: block;
  width: auto;
  height: 100%;
}

.image-masthead {
  border-bottom: 1px solid $navbar-default-border;
  margin-bottom: $padding-large-vertical * 2.5;
  position: relative;

  .background-container {
    @include masthead-background-containers();
    background-repeat: no-repeat;
    background-size: cover;

    // Add small amount of blur to help text stand out
    -webkit-filter: blur($masthead-image-blur);
    filter: blur($masthead-image-blur);
  }

  .background-container-gradient {
    @include masthead-background-containers();
    background:
      linear-gradient(
        rgba(0, 0, 0, 0.0),
        rgba(0, 0, 0, 0.4),
        rgba(0, 0, 0, 0.5)
      );
  }

  .site-title {
    min-height: $title-height;
    padding-bottom: 6px;
    position: relative;
  }

  .navbar {
    background-color: $navbar-transparent-bg;
    margin-bottom: 0;

    .navbar-nav {
      a {
        color: $navbar-transparent-link-color;
        text-transform: uppercase;

        &:hover,
        &:focus {
          background-color: $navbar-transparent-link-hover-bg;
          color: $navbar-transparent-link-hover-color;
        }
      }
    }

    .active > a {
      &,
      &:hover,
      &:focus {
        background-color: $navbar-transparent-link-active-bg;
        color: $navbar-transparent-link-active-color;
      }
    }
  }
}

.home-content {
  .nav {
    margin-bottom: 20px;
  }
}

.collection-highlights {
  img {
    border: 1px solid #bbb;
    height: 60px;
    margin-right: 15px;
    margin-top: 3px;
    object-fit: cover;
    width: 100px;
  }
}

.home_share_work {
  margin-bottom: $padding-large-vertical * 2.5;

  p {
    margin: 0.25em auto;
    width: 40%;
  }
}

.home_marketing_text {
  color: $marketing-text-color;
  text-shadow: $marketing-text-shadow;
}

// When we put a hidden label before the main search field, bootstrap stops
// displaying rounded corners. This puts them back in.
#search-field-header {
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}

div#announcement {
  text-align: center;
  color: white;
  font-size: 1.5em;
  background-color: $vermilion;
  border: 10px solid white;
  padding-top: 10px;
  border-radius: 15px;
}

.highlights-list {
  margin-top: 20px;
}