/* News feed (home.php) and single posts (single.php) */

section#news-hero {
  position: relative;
  height: 28rem;
  background-color: #ffffff;
  background-size: cover;
  background-position: center center; }
  section#news-hero .headline-container {
    position: absolute;
    top: 3rem;
    left: 3rem; }
    section#news-hero .headline-container h1 {
      margin: 0;
      color: #752f8a;
      font-size: 3rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.5rem;
      line-height: 1;
      text-shadow: 0 0 0.75rem #ffffff, 0 0 0.75rem #ffffff; }

section#news-feed,
section#news-single {
  padding: 3rem 1rem 4rem; }
  section#news-feed .row,
  section#news-single .row {
    max-width: 60rem; }

.news-item {
  border-bottom: 1px solid #e6e7e7;
  padding: 2rem 0; }
  .news-item:first-child {
    padding-top: 0; }
  .news-item .news-thumbnail {
    float: left;
    width: 14rem;
    margin-right: 2rem; }
    .news-item .news-thumbnail img {
      display: block;
      width: 100%;
      height: auto; }
  .news-item .news-body {
    overflow: hidden; }
  .news-item .news-title {
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.2;
    margin: 0 0 0.25rem; }
    .news-item .news-title a {
      color: #752f8a; }
      .news-item .news-title a:hover {
        color: #00caec; }
  .news-item .news-excerpt p {
    margin-bottom: 1rem; }
  .news-item .button {
    margin: 0; }

.news-meta {
  color: #939598;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.05rem;
  margin-bottom: 0.75rem; }

.news-featured-image {
  margin-bottom: 2rem; }
  .news-featured-image img {
    display: block;
    width: 100%;
    height: auto; }

.news-content img {
  max-width: 100%;
  height: auto; }

.news-pagination {
  padding-top: 2rem;
  font-weight: 600; }
  .news-pagination .navleft {
    float: left; }
  .news-pagination .navright {
    float: right;
    text-align: right; }
  .news-pagination a {
    color: #752f8a; }
    .news-pagination a:hover {
      color: #00caec; }

.news-back {
  margin-top: 2rem; }

.news-empty {
  font-size: 1.2rem;
  color: #424345; }

@media screen and (max-width: 1024px) {
  section#news-hero {
    height: 16rem; }
    section#news-hero .headline-container {
      top: 1rem;
      left: 1rem; }
      section#news-hero .headline-container h1 {
        font-size: 1.75rem;
        letter-spacing: 0.3rem; }
  section#news-feed,
  section#news-single {
    padding: 2rem 0; }
  .news-item .news-thumbnail {
    float: none;
    width: 100%;
    margin: 0 0 1rem; }
  .news-item .news-title {
    font-size: 1.3rem; }
  .news-pagination .navleft,
  .news-pagination .navright {
    float: none;
    text-align: left;
    margin-bottom: 0.5rem; } }