/************************************************************************************************************************************//*
 * Small- and medium-only, and large-screen-only basic styles
***************************************************************************************************************************************/

.mobile-tablet-display,
.mobile-display {
  display: block;
}
.tablet-display,
.desktop-display {
  display: none;
}

@media all and (min-width: 800px) {
  .mobile-display {
    display: none;
  }
  .tablet-display {
    display: block;
  }
}
@media all and (min-width: 1000px) {
  .mobile-tablet-display {
    display: none;
  }
  .desktop-display {
    display: block;
  }
}

/************************************************************************************************************************************//*
 * GSR special colors
***************************************************************************************************************************************/

/* GSR colors */
.gsr-colors h2::before {
  border-top: 1px solid #480571 !important; /* This colors the horizontal line before the GSR title */
}
.gsr-colors h2,
.gsr-colors ul,
.gsr-colors .view h4,
.gsr-colors .menu a {
  color: #480571 !important; /*This colors the GSR title, navigation, channel, and  "In case you missed it" purple */
}
.gsr-colors .brick a:link,
.gsr-colors .brick a:visited,
.gsr-colors .overlay-brick a:link,
.gsr-colors .overlay-brick a:visited {
  background: #480571;
}
.gsr-colors .brick a:hover,
.gsr-colors .overlay-brick a:hover {
  background: #70239f;
}
.views-field-field-gsr-topic {
  font-family: Merriweather, serif;
  font-size: .9rem;
  letter-spacing: .1rem;
  text-transform: uppercase;
  text-align: center;
}
.views-field-field-gsr-topic a {
  color: #480571;
}
.views-field-field-gsr-topic a:hover {
  color: #70239f;
}

/************************************************************************************************************************************//*
 * Avatars for GSR and EarthBeat
***************************************************************************************************************************************/

.avatar {
  display: block;
}
.relative .avatar {
  margin-top: -25px;
  display: inline-block;
  width: 100%;
  text-align: center;
}
.avatar img {
  width: 40px;
  height: 40px;
  margin-bottom: 1rem;
}
.avatar.no-margin img {
  margin-bottom: 0;
}
.relative .avatar img {
  width: 50px;
  height: 50px;
  float: none;
  margin: 0 auto;
}

/************************************************************************************************************************************//*
 * Layout Builder styles
***************************************************************************************************************************************/

.layout.layout--twocol-section--50-50 > .inner {
  display: block;
}
.layout.gray {
  background-color: #f3f3f3;
}
.page-node-type-landing-page .main .layout {
  padding-top: 3rem;
  padding-bottom: 3rem;
}
.page-node-type-landing-page .main .layout:first-child {
  padding-top: 0;
}
.page-node-type-landing-page .main .layout.no-padding,
.layout.no-padding {
  padding-top: 0;
  padding-bottom: 0;
}
.layout.no-padding-top {
  padding-top: 0 !important;
}
.layout.no-padding-bottom {
  padding-bottom: 0 !important;
}
.layout.border-top {
  border-top: 2px solid #ddd;
}
.layout.border-bottom {
  border-bottom: 2px solid #ddd;
}

@media all and (min-width: 800px) {
  .layout.layout--twocol-section--50-50 > .inner {
    display: grid;
    grid-template-columns: 48% 48%;
    grid-column-gap: 4%;
  }
}

/************************************************************************************************************************************//*
 * Block styles
***************************************************************************************************************************************/

.block.color-scheme--dark {
  background-color: #000;
  color: #fff;
}
.block.color-scheme--gray {
  background-color: #eee;
  color: #000;
}
.block.color-scheme--red {
  background-color: #ad0303;
  color: #fff;
}
.block.text--reversed a,
.block.text--reversed a:link,
.block.text--reversed a:visited,
.main .block.text--reversed a,
.main .block.text--reversed a:link,
.main .block.text--reversed a:visited {
  color: #fff;
}
.block.text--reversed a:hover,
.main .block.text--reversed a:hover {
  color: #ddd;
}

/************************************************************************************************************************************//*
 * Views styles
***************************************************************************************************************************************/

.views-stacked .views-row,
.views-row.stacked {
  padding-top: 1rem;
  padding-bottom: 1rem;
}
.views-row.stacked.with-border:first-child {
  border-top: none;
}
.views-row.stacked.with-border.including-first-child,
.views-row.stacked.with-border {
  border-top: 1px solid #ddd;
}
.views-row.stacked.with-narrow-border {
  padding: 0;
}
.views-row.stacked.with-narrow-border:first-child::before {
  display: none;
}
.views-row.stacked.with-narrow-border.including-first-child::before,
.views-row.stacked.with-narrow-border::before {
  content: "";
  border-top: 2px solid #ccc;
  width: 40%;
  margin: 2rem 0;
  display: block;
}
.views-row.stacked.with-narrow-border.centered.including-first-child::before,
.views-row.stacked.with-narrow-border.centered::before {
  margin: 2rem auto;
}

/** The three-quarters, one-quarter layout redefined as a grid layout. */
.layout.layout--twocol-section--75-25,
.layout.three-quarters-one-quarter,
.view.three-quarters-one-quarter > .view-content-wrapper {
  display: block;
}

@media all and (min-width: 600px) {
  .views-row.stacked.extra-padding {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
  }
}

.view.two-column-layout .view-content-wrapper > .view-content,
.view.three-column-layout .view-content-wrapper > .view-content,
.view.four-column-layout .view-content-wrapper > .view-content,
.view.two-column-layout > .view-content,
.view.three-column-layout > .view-content,
.view.four-column-layout > .view-content {
  display: grid;
  grid-template-columns: 100%;
  grid-row-gap: 1.5rem;
}

@media all and (min-width: 640px) {

  /* Target both items within the main View wrapper as well as inside an attachment. */
  .view.two-column-layout .view-content-wrapper > .view-content,
  .view.three-column-layout .view-content-wrapper > .view-content,
  .view.four-column-layout .view-content-wrapper > .view-content,
  .view.two-column-layout > .view-content,
  .view.three-column-layout > .view-content,
  .view.four-column-layout > .view-content {
    grid-template-columns: 48.5% 48.5%;
    grid-column-gap: 3%;
    grid-row-gap: 2.5rem;
  }

  /* Remove margin on the rows, since we're using row-gap from CSS Grid. */
  .view.two-column-layout .view-content-wrapper > .view-content .views-row,
  .view.three-column-layout .view-content-wrapper > .view-content .views-row,
  .view.four-column-layout .view-content-wrapper > .view-content .views-row,
  .view.two-column-layout > .view-content .views-row,
  .view.three-column-layout > .view-content .views-row,
  .view.four-column-layout > .view-content .views-row {
    margin-top: 0;
    margin-bottom: 0;
  }
}

@media all and (min-width: 800px) {
  .view.fifty-five-forty-five > .view-content-wrapper {
    display: grid;
    grid-template-columns: 54% 44%;
    grid-column-gap: 2%;
  }

  /* These are each of the boxes holding the content for 2-3 COLUMNS */
  .three-up-with-dividers > .view-content,
  .three-up-with-dividers > .view-content-wrapper > .view-content,
  .main-plus-three-column .three-other-stories .view-content {
    display: grid;
    grid-template-columns: 30% 40% 30%;
    grid-column-gap: 0;
  }
  .main-plus-three-column .three-other-stories .view-content {
    margin-bottom: 2rem;
  }
  .three-up-with-dividers > .view-content-wrapper > .view-content .views-row,
  .views-row.stacked.with-border:first-child {
    border-top: none;
    padding-top: 0;
  }

  /* This removes the border-right from the third column, and adds a divider between columns 2 and 3 as border-left */
  .three-up-with-dividers > .view-content .views-row:nth-child(2),
  .three-up-with-dividers > .view-content-wrapper > .view-content .views-row:nth-child(2),
  .main-plus-three-column .three-other-stories .views-row:nth-child(2) {
    padding: 0 6%;
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
    box-sizing: border-box;
    width: 88%;
    margin: 0 6%;
  }
  .three-up-with-dividers > .view-content-wrapper > .view-content .views-row.stacked.with-border,
  .main-plus-three-column .three-other-stories > .view-content .views-row {
    padding-top: 0;
    padding-bottom: 0;
    border-top: none;
  }
}

@media all and (min-width: 900px) {
  .view.three-column-layout .view-content-wrapper > .view-content,
  .view.three-column-layout > .view-content {
    grid-template-columns: 32% 32% 32%;
    grid-column-gap: 2%;
  }
}

@media all and (min-width: 1000px) {

  /** The three-quarters, one-quarter layout redefined as a grid layout. */
  .layout.layout--twocol-section--75-25 > .inner,
  .layout.three-quarters-one-quarter > .inner,
  .view.three-quarters-one-quarter > .view-content-wrapper {
    display: grid;
    grid-template-columns: 75% 25%;
  }

  /** Views-rows styles */
  .views-row.stacked.with-border.including-first-child,
  .views-row.stacked.with-border {
    border-top: 2px solid #ddd;
  }
  .views-row.stacked.with-border:first-child {
    border-top: none;
    padding-top: 0;
  }
  .views-stacked .views-row,
  .views-row.stacked.extra-padding {
    padding-top: 2rem;
    padding-bottom: 2rem;
  }
  .views-row.stacked.extra-padding.with-narrow-border {
    padding: 0;
  }
  .views-row.stacked.extra-padding.with-narrow-border:before {
    margin: 2.5rem auto;
  }
}

@media all and (min-width: 1100px) {
  .view.four-column-layout > .view-content-wrapper .view-content,
  .view.four-column-layout > .view-content {
    grid-template-columns: 23.5% 23.5% 23.5% 23.5%;
    grid-column-gap: 2%;
  }
}

/************************************************************************************************************************************//*
 * Stories Readers Like section
***************************************************************************************************************************************/

.stories-readers-like .views-field-title,
.stories-readers-like-sidebar .views-field-title {
  margin-top: 0;
  margin-bottom: 0;
  display: grid;
  grid-template-columns: 2.5rem auto;
  grid-column-gap: 0.75rem;
}

/* This is the COUNTER styling */
.stories-readers-like .views-row .views-field-counter,
.stories-readers-like-sidebar .views-row .views-field-counter {
  font-family: Roboto, sans-serif;
  font-size: 1.5rem;
  letter-spacing: .1rem;
  font-weight: 500;
  text-align: right;
}
.front .stories-readers-like .view-content-wrapper > .view-content .featured-image,
.front .stories-readers-like .view-content-wrapper > .view-content .views-field-field-article-teaser,
.stories-readers-like-sidebar .featured-image,
.stories-readers-like-sidebar .views-field-field-article-teaser {
  margin-left: 3.25rem;
}

@media all and (min-width: 1000px) {
  .stories-readers-like .views-field-title,
  .stories-readers-like-sidebar .views-field-title {
    display: block;
  }

  .stories-readers-like .views-row .views-field-counter,
  .stories-readers-like-sidebar .views-row .views-field-counter {
    text-align: left;
    margin-bottom: 0.5rem;
  }
  .stories-readers-like-sidebar .views-row .views-field-counter {
    margin: 1rem 0 0.5rem;
  }
  .front .stories-readers-like .view-content-wrapper > .view-content .featured-image,
  .front .stories-readers-like .view-content-wrapper > .view-content .views-field-field-article-teaser,
  .stories-readers-like-sidebar .featured-image,
  .stories-readers-like-sidebar .views-field-field-article-teaser {
    margin-left: 0;
  }
}

/************************************************************************************************************************************//*
 * Layouts
***************************************************************************************************************************************/

@media all and (min-width: 800px) {
  .block.two-column-menu > .menu,
  .block.four-column-menu > .menu,
  ul.two-column-menu,
  ul.four-column-menu {
    display: grid;
    grid-template-columns: 48.5% 48.5%;
    grid-column-gap: 3%;
  }
}

@media all and (min-width: 1100px) {
  .block.four-column-menu > .menu,
  ul.four-column-menu {
    grid-template-columns: 22.75% 22.75% 22.75% 22.75%;
    grid-column-gap: 3%;
  }
}

/************************************************************************************************************************************//*
 * DFP ad blocks
***************************************************************************************************************************************/

.page-node-type-landing-page .block-dfp,
.page-taxonomy-term .block-dfp {
  text-align: center;
}
.block-dfp p {
  margin: 0.5rem 0 0 0;
  line-height: 100%;
  text-transform: uppercase;
  font-family: "Roboto", Helvetica, Arial sans-serif;
  font-size: .6rem !important;
  font-weight: 500;
}

/************************************************************************************************************************************//*
 * Slug bricks
***************************************************************************************************************************************/

/* This adds a margin space under the images who might have a slug overlay */
.page-node-type-landing-page .views-field.contains-floated-image,
.page-taxonomy-term .views-field.contains-floated-image,
.view-latest-news .contains-floated-image {
  margin-bottom: .5rem;
}
.brick {
  padding: 0;
}
.brick a:link,
.brick a:visited,
.overlay-brick a:link,
.overlay-brick a:visited {
  font-family: Merriweather, serif;
  font-weight: 500;
  color: white;
  text-transform: uppercase;
  text-decoration: none;
  font-size: .7rem;
  line-height: 1rem;
  letter-spacing: 0.05rem;
  padding: .3rem .6rem;
  display: inline-block;
}

.overlay-brick a:link,
.overlay-brick a:visited {
  font-size: .8rem;
  padding: .5rem .7rem;
  position: absolute;
  bottom: 5px;
  left: 5px;
}

/************************************************************************************************************************************//*
 * The channel/section treatment.
***************************************************************************************************************************************/

.section-subsection,
.section-subsection a {
  font-family: Roboto, sans-serif;
  font-weight: 400;
  font-size: .8rem;
  letter-spacing: .25px;
  text-transform: uppercase;
}

/************************************************************************************************************************************//*
 * The latest-news date field treatment.
***************************************************************************************************************************************/

.latest-news-date {
  font-family: roboto, sans-serif;
  font-size: .75rem;
  line-height: .9rem;
  letter-spacing: 1px;
  padding: .3rem 0 .5rem 0;
  color: #666666;
  grid-column: 1;
  grid-row: 1;
}

.latest-news-date.narrow {
  width: 3.7rem;
}

.latest-news-date.uppercase {
  text-transform: uppercase;
}

@media screen and (min-width: 900px) {
  .latest-news-date {
    margin-top: 1rem;
    margin-bottom: .1rem;
    grid-column: 2;
    grid-row: 2;
    margin-left: 0;
  }
  .latest-news-date.narrow {
    width: 100%;
  }
  .views-stacked .latest-news-date {
    padding-top: 0;
  }
}

@media screen and (min-width: 1000px) {
  .views-stacked .latest-news-date::before {
    display: inline-block;
    content: "";
    border-top: 1px solid #707070;
    width: 3rem;
    margin-right: 1rem;
    transform: translateY(-0.4rem);
  }
  .views-stacked > .view-content .latest-news-date {
    margin-left: -4rem;
  }
  .views-stacked.with-images > .view-content .latest-news-date {
    margin-left: 0;
  }
}

/************************************************************************************************************************************//*
 * The byline area.
***************************************************************************************************************************************/

.byline-wrapper {
  margin-top: 0.6rem;
  font-family: Roboto, sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.50px;
  font-size: .7rem;
  color: black;
}
.field--name-field-byline > .node--type-author,
.byline-wrapper .node--type-author {
  display: flex;
  flex-flow: row;
}
.byline-wrapper.centered,
.byline-wrapper.centered .node--type-author {
  justify-content: center;
}
.byline-wrapper.stacked .node--type-author {
  flex-flow: column;
}
.byline-wrapper.overlapping {
  margin-top: 0;
  padding: 0;
}
.byline-wrapper.overlapping .node--type-author {
  margin-top: -30px;
}
.byline-wrapper.extra-padding {
  padding-top: 1.2rem;
}
.byline-wrapper > .node--type-author {
  margin-bottom: 0.6rem;
}
.field--name-field-byline > .node--type-author .byline,
.byline-wrapper .views-label,
.byline-wrapper .byline {
  line-height: .9rem;
}
.byline-wrapper .views-label {
  display: inline-block;
  margin-right: 0.25em;
}
.byline-wrapper .byline {
  text-align: left;
  margin-bottom: 0;
  padding: 0;
}
.field--name-field-byline > .node--type-author .byline,
.byline-wrapper .node--type-author .byline {
  padding-top: 0.6rem;
  display: flex;
  flex-flow: row;
  vertical-align: middle;
  justify-content: center;
}
.field--name-field-byline > .node--type-author a,
.byline-wrapper .byline a {
  color: black;
  text-decoration: none;
}
.field--name-field-byline > .node--type-author .field--name-field-profile-media-image,
.byline-wrapper .field--name-field-profile-media-image {
  display: flex;
  flex-flow: row;
}
.byline-wrapper.centered .field--name-field-profile-media-image {
  flex-flow: column;
  text-align: center;
}
.byline-wrapper.overlapping .field--name-field-profile-media-image img {
  border: .15rem solid white;
}
.field--name-field-byline > .node--type-author .field--name-field-profile-media-image img,
.byline-wrapper img {
  width: 36px;
  height: 36px;
  text-align: right;
  border-radius: 50%;
  vertical-align: middle;
  list-style: none;
  margin-right: .5rem;
}
.byline-wrapper .item-list ul {
  margin: 0;
  padding: 0;
}
.byline-wrapper .item-list li {
  margin: 0 0 0.6rem 0;
  padding: 0;
  list-style: none;
}

@media screen and (min-width: 800px) {
  .page-node-type-landing-page .view .byline-wrapper.overlapping {
    display: flex;
  }
}

/************************************************************************************************************************************//*
 * The reusable main-plus-three-column view on front and landing pages.
***************************************************************************************************************************************/

/* MAIN PLUS THREE COLUMN: Title */
.main-plus-three-column h2 {
  padding-top: 2rem;
}

/* MAIN PLUS THREE COLUMN: Content wrapper */
.main-plus-three-column .view-content-wrapper {
  padding-bottom: 2rem;
}

/* MAIN PLUS THREE COLUMN: Title */
.main-plus-three-column h2 {
  font-size: 1.4rem;
  margin-bottom: 1rem;
}

/* MAIN PLUS THREE COLUMN: Hero story */
.main-plus-three-column .view-content-wrapper > .view-content {
  text-align: center;
  border: 1px solid #707070;
  padding: 1rem;
  margin-bottom: 2rem;
}

/* MAIN PLUS THREE COLUMN: Hero title */
.main-plus-three-column .view-content-wrapper > .view-content .views-row h3 {
  font-size: 1.6rem;
  line-height: 120%;
  text-decoration: none;
  margin-top: 1rem;
  margin-bottom: 1rem;
}

/* H3 should *BE* the .views-field-title, but if it's not, give it sane defaults. */
.main-plus-three-column .view-content-wrapper .views-field-title h3
.main-plus-three-column .view-content-wrapper > .view-content .views-row .views-field-title h3 {
  margin: 0;
  padding: 0;
}

/* This is the channel for MAIN */
.main-plus-three-column .view-content-wrapper > .view-content .section-subsection {
  font-family: Merriweather, serif;
  font-size: .9rem;
  letter-spacing: .1rem;
  text-transform: uppercase;
  text-align: center;
  padding: 0;
}
.three-other-stories,
.three-up-with-dividers  {
  text-align: left;
}

/* This is the title for 2-3 COLUMNS + IN CASE YOU MISSED IT */
.main-plus-three-column .three-other-stories .views-field-title {
  margin-top: 0.5rem;
  font-size: 1.2rem;
  line-height: 1.4rem;
}
.main-plus-three-column .three-other-stories .section-subsection {
  font-size: .9rem;
  letter-spacing: 0;
}

/* This is the main wrapper for "IN CASE YOU MISSED IT" */
.main-plus-three-column .in-case-you-missed-it {
  width: 100%;
  margin-bottom: 0;
}

.main-plus-three-column .in-case-you-missed-it .view-header h4 {
  margin: 1rem 0 0 0;
  padding: 1.5rem 0 0.75rem 0;
  border-top: 2px solid #ddd;
  border-bottom: none;
}

/* MAIN PLUS THREE COLUMN: IN CASE YOU MISSED IT: Separator above each title */
.main-plus-three-column .in-case-you-missed-it .views-field-title {
  border-top: 0;
  padding: 0 0 0 4.3rem;
  text-indent: -4.3rem;
  line-height: 2rem;
  font-weight: 300;
}

.main-plus-three-column div.views-field-title,
.main-plus-three-column h3.views-field-title {
  margin: 0.5rem 0;
  padding: 0;
}

/* MAIN PLUS THREE COLUMN: IN CASE YOU MISSED IT: Horizontal line before each title */
.main-plus-three-column .in-case-you-missed-it .views-field-title::before {
  display: inline-block;
  content: "";
  width: 40px;
  margin-right: 1.7rem;
  transform: translateY(-0.5rem);
}

.main-plus-three-column .in-case-you-missed-it .brick {
  margin-bottom: 0;
  margin-left: 4.3rem;
}

.main-plus-three-column .in-case-you-missed-it .brick a {
  padding: .2rem .4rem;
  font-size: 0.6rem;
}

/* MAIN PLUS THREE COLUMN: Hero title -- for larger screens */
@media screen and (min-width: 900px) {

  /* This is the content inside the 2-3 COLUMNS */
  .main-plus-three-column .three-other-stories .views-field-title {
    line-height: 1.3rem;
    margin: 1rem 0;
  }
}

/* This stretches it horizontal for larger desktops */
@media screen and (min-width: 1000px) {
  .main-plus-three-column .view-content-wrapper {
    padding-bottom: 2rem;
    display: grid;
    grid-template-columns: 32% 66%;
    grid-column-gap: 2%;
  }
  .main-plus-three-column h2 {
    margin-left: -4.3rem;
    font-size: 1.6rem;
    padding-top: 0;
  }

  /* MAIN PLUS THREE COLUMN: Hero story */
  .main-plus-three-column > .view-content-wrapper > .view-content {
    margin-bottom: 0;
  }

  .main-plus-three-column .view-content-wrapper > .view-content .views-row h3 {
    font-size: 1.8rem;
  }
}

/********************************************************************************************************
*********************************************************************************************************
    DESKTOP/LAPTOP VERSION
*********************************************************************************************************
*********************************************************************************************************/

@media screen and (min-width: 900px) {
  .main-plus-three-column .in-case-you-missed-it .views-field-title {
    font-size: 1.3rem;
    line-height: 2.1rem;
  }

  /* This resets the padding inside the 2-3 COLUMNS on desktop */
  .main-plus-three-column .three-other-stories .view-content  {
    padding: 0;
  }
}