#news-listing-page {
  background-color: #f3f3f3;
  padding-bottom: 2rem;
}

#news-listing-header {
  background-color: #ffffff;
  padding: 2rem 1rem;
  box-shadow: 1px 1px 7px 0px #dbdbdb;
  -webkit-box-shadow: 1px 1px 7px 0px #dbdbdb;
  -moz-box-shadow: 1px 1px 7px 0px #dbdbdb;
  -ms-box-shadow: 1px 1px 7px 0px #dbdbdb;
}

#news-listing-header p {
  color: #828282;
  text-align: center;
  font-size: 2.5rem;
  font-weight: 500;
  padding: 1rem 0;
}

#news-listing-body {
  padding: 2rem 1rem;
}

#news-listing-filters-card {
}

@media only screen and (max-width: 64.063em) {
  #news-listing-filters-card {
    margin-bottom: 3rem;
    position: relative;
    min-height: 5rem;
  }
}

#news-listing-filters-card ul {
  background: #ffffff;
  padding-bottom: 2rem;
  border-radius: 0.4rem;
  box-shadow: 1px 1px 1px 1px #e4e4e4;
  -webkit-box-shadow: 1px 1px 1px 1px #e4e4e4;
  -moz-box-shadow: 1px 1px 1px 1px #e4e4e4;
  -ms-box-shadow: 1px 1px 1px 1px #e4e4e4;
}

@media only screen and (min-width: 40.063em) and (max-width: 64.063em) {
  #news-listing-filters-card ul {
    padding-bottom: 0;
    overflow-x: auto;
  }
}

@media only screen and (max-width: 40em) {
  #news-listing-filters-card ul {
    position: absolute;
    left: 1rem;
    right: 1rem;
    z-index: 1;
    padding-bottom: 0;
  }
}

#news-listing-filters-card ul li {
  display: list-item;
  padding: 1.5rem 3rem;
  font-size: 1.5rem;
  line-height: 1;
  color: #828282;
  font-weight: 300;
  transition: 0.2s all;
  cursor: pointer;
}

@media only screen and (min-width: 40.063em) and (max-width: 64.063em) {
  #news-listing-filters-card ul li {
    display: table-cell;
    white-space: nowrap;
  }
}

@media only screen and (max-width: 40em) {
  #news-listing-filters-card ul li {
    display: none;
    padding: 1.5rem 2rem;
  }
  #news-listing-filters-card ul li.expand {
    display: block;
  }
}

#news-listing-filters-card ul li:first-child {
  border-radius: 0.4rem 0.4rem 0 0;
}

#news-listing-filters-card ul li.active {
  background-color: #fdf5f6;
  color: #d81f32;
  font-weight: 500;
}

@media only screen and (min-width: 40.063em) and (max-width: 64.063em) {
  #news-listing-filters-card ul li.active {
    display: table-cell;
    white-space: nowrap;
    background-color: #ffffff;
  }
}

@media only screen and (max-width: 40em) {
  #news-listing-filters-card ul li.active {
    background-color: #ffffff;
    display: block;
  }
}

#news-listing-filters-card ul li:hover {
  background-color: #fdf5f6;
  transition: 0.2s all;
}

#news-listing-news-list .loader-container {
  display: table;
  margin: 3rem auto;
}

#news-listing-news-list .loader-container svg {
  stroke: #d81f32;
}

#news-list-item-clone {
  display: none;
}

#news-listing-news-list .news-list-item {
  background-color: #ffffff;
  border-radius: 0.4rem;
  display: flex;
  flex-flow: row;
  flex-wrap: wrap;
  width: 100%;
  margin-bottom: 2rem;
  cursor: pointer;
  box-shadow: 1px 1px 1px 1px #e4e4e4;
  -webkit-box-shadow: 1px 1px 1px 1px #e4e4e4;
  -moz-box-shadow: 1px 1px 1px 1px #e4e4e4;
  -ms-box-shadow: 1px 1px 1px 1px #e4e4e4;
}

@media only screen and (min-width: 40em) {
  #news-listing-news-list .news-list-item.--has-tags {
    min-height: 20rem;
  }
}

@media only screen and (max-width: 40em) {
  #news-listing-news-list .news-list-item {
    display: block;
  }
}

#news-listing-news-list .news-list-item .news-item-cover {
  width: 20rem;
  height: 22rem;
  border-radius: 0.4rem 0 0 0.4rem;
  background-color: rgba(204, 204, 204, 0.35);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  display: inline-table;
  flex: 1;
  position: relative;
}

@media only screen and (max-width: 40em) {
  #news-listing-news-list .news-list-item .news-item-cover {
    display: block;
    margin: 0 auto 0.5rem auto;
    width: 100%;
  }
}

#news-listing-news-list .news-list-item .news-item-cover-overlay {
  position: absolute;
  font-size: 6rem;
  left: 50%;
  top: 50%;
  color: #ffffff;
  opacity: 0.6;
  line-height: 1;
  margin: -2.5rem;
}

#news-listing-news-list .news-list-item .news-item-content {
  padding: 2rem 3rem;
  flex: 1.88;
  position: relative;
}

@media only screen and (max-width: 40em) {
  #news-listing-news-list .news-list-item .news-item-content {
    padding: 2rem;
  }
}

#news-listing-news-list .news-list-item .news-item-title {
  font-size: 2rem;
  font-weight: 500;
  line-height: 1.3;
  margin-bottom: 0.2rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

#news-listing-news-list .news-list-item .news-item-meta {
  line-height: 1;
  color: #828282;
  font-size: 1.3rem;
  display: block;
  margin-top: 0.5rem;
}

#news-listing-news-list .news-list-item .news-item-text {
  margin-top: 1.5rem;
  font-size: 1.4rem;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  height: 3.875rem;
  overflow: hidden;
  word-break: break-word;
}

@media only screen and (max-width: 40em) {
  #news-listing-news-list .news-list-item .news-item-text {
    -webkit-line-clamp: 4;
    height: 7.375rem;
  }
}

#news-listing-news-list .news-list-item .news-item-dependencies-tags {
  position: absolute;
  bottom: 2.3rem;
  right: 3rem;
}

@media only screen and (max-width: 40em) {
  #news-listing-news-list .news-list-item .news-item-dependencies-tags {
    position: initial;
    display: inline-block;
    margin-top: 1.5rem;
  }
}

#news-listing-news-list
  .news-list-item
  .news-item-dependencies-tags.--extra-text {
  bottom: 1rem;
}

#news-listing-news-list .news-list-item .news-item-dependencies-tags a {
  border: 1px solid #dddddd;
  line-height: 1;
  border-radius: 0.2rem;
  padding: 0.5rem 1.5rem;
  margin-right: 1.5rem;
  float: right;
}

#news-listing-news-list .news-list-item .news-item-dependencies-tags a:first-child {
  margin-right: 0;
}

#news-listing-news-list .news-list-item .news-item-dependencies-tags a:hover {
  background-color: #fdf5f6;
  text-decoration: none;
}

#news-listing-news-list .news-list-item .news-item-dependencies-tags span {
  display: block;
  font-size: 1.2rem;
  text-align: right;
  padding: 0.2rem 0 0 0;
  color: #828282;
  float: none;
  clear: both;
}

@media only screen and (max-width: 40em) {
  #news-listing-news-list .news-list-item .news-item-dependencies-tags span {
    text-align: left;
  }
}

#news-listing-news-list
  .news-list-item
  .news-item-dependencies-tags
  a:last-child {
  margin-right: 0;
}

#news-listing-news-list #news-listing-empty-text {
  font-size: 1.5rem;
  color: #828282;
  text-align: center;
}