/**
 * @file
 * Styles are organized using the SMACSS technique. @see http://smacss.com/book/
 *
 * When you turn on CSS aggregation at admin/config/development/performance, all
 * of these @include files will be combined into a single file.
 */
h1 {
    font-size: 2rem;
}
h1.page-title {
    padding-bottom: 1rem;
}

h2,
h2 a {
  font-size: 1.3rem;
  line-height: 1.8rem;
  letter-spacing: -0.25px;
  color: #00A3D9;
  font-weight: 400;
  margin: 2rem 0rem 1rem 0;
}

/************************************************************************************************************************************//*
 * GSR and EarthBeat special colors
***************************************************************************************************************************************/

/* EB colors */
.earthbeat-colors h2,
.earthbeat-colors .view h4 {
  color: #329F4C !important; /*This colors the EarthBeat title and navigation and "In case you missed it" green */
}
.earthbeat-colors .brick a:link,
.earthbeat-colors .brick a:visited,
.earthbeat-colors .overlay-brick a:link,
.earthbeat-colors .overlay-brick a:visited,
.earthbeat-landingpage .brick a:link,
.earthbeat-landingpage .brick a:visited,
.earthbeat-domain.page-taxonomy-term .brick a:link,
.earthbeat-domain.page-taxonomy-term .brick a:visited,
.earthbeat-landingpage .overlay-brick a:link,
.earthbeat-landingpage .overlay-brick a:visited,
.earthbeat-domain.page-taxonomy-term .overlay-brick a:link,
.earthbeat-domain.page-taxonomy-term .overlay-brick a:visited {
  background: #329F4C;
}
.earthbeat-colors .brick a:hover,
.earthbeat-colors .overlay-brick a:hover,
.earthbeat-landingpage .brick a:hover,
.earthbeat-domain.page-taxonomy-term .brick a:hover,
.earthbeat-landingpage .overlay-brick a:hover,
.earthbeat-domain.page-taxonomy-term .overlay-brick a:hover  {
  background: #3dae58;
}
.earthbeat-colors h2::before {
  border-top: 1px solid #329F4C !important; /* This colors the horizontal line before the EarthBeat title */
}

/* 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 EB on NCR site
***************************************************************************************************************************************/

.avatar {
  margin: 0 auto 0.75rem auto;
  width: 40px;
  height: 40px;
  display: block;
}
.relative .avatar {
  width: 50px;
  height: 50px;
  margin-bottom: 0;
}
.avatar img {
  width: 40px;
  height: 40px;
  margin-bottom: 1rem;
}
.relative .avatar img {
  margin-top: -25px;
  width: 50px;
  height: 50px;
  margin-bottom: 0.75rem;
}

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

.node-type-landing-page .block-dfp,
.page-taxonomy-term .block-dfp {
  text-align: center;
  padding: 2rem 0;
}
#inline-ad-label {
    text-align: center;
}
#inline-ad-label h2,
#inline-ad-label strong,
.block-dfp p {
  text-transform: uppercase;
  font-family: "Roboto";
  font-size: .6rem !important;
  font-weight: 500;
  text-align: center;
  color: black !important;
}

#header .block-dfp p {
  color: #fff !important;
}

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

.contains-floated-image {
  margin-bottom: .5rem;
}

/* This adds a margin space under the images who might have a slug overlay */
.node-type-landing-page .views-field.contains-floated-image,
.page-taxonomy-term .views-field.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;
  background: #00A3D9;
  color: white;
  text-transform: uppercase;
  font-size: .7rem;
  line-height: 1rem;
  letter-spacing: 0.05rem;
  padding: .3rem .6rem;
  text-align: left;
  display: inline-block;
}

.brick a:hover,
.overlay-brick a:hover {
  background-color: #15b1e5;
}

.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;
  color: #00A3D9;
  font-size: .8rem;
  letter-spacing: .25px;
  text-transform: uppercase;
}

.views-row.is-earthbeat .section-subsection,
.views-row.is-gsr .section-subsection {
  display: none;
}

.earthbeat-landingpage .section-subsection a,
.earthbeat-domain.page-taxonomy-term .section-subsection a {
  color: #339F4D;
}

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

.latest-news-date {
  font-family: roboto, sans-serif;
  font-size: .75rem;
  line-height: .9rem;
  letter-spacing: .50px;
  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 {
    padding-top: 1rem;
    padding-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;
}

.byline-wrapper .node--type-author {
  display: flex;
  flex-flow: row;
}

.byline-wrapper.centered .node--type-author,
.byline-wrapper.centered .byline {
  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: -25px;
}

.byline-wrapper.extra-padding {
  padding-top: 1.2rem;
}

.byline-wrapper > .node--type-author {
  margin-bottom: 0.6rem;
}

.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;
}

.byline-wrapper .node--type-author .byline {
  padding-top: 0.5rem;
  display: flex;
  flex-flow: row;
  vertical-align: middle;
}

.byline-wrapper .byline a {
  color: black;
}

.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 .no-image,
.byline-wrapper.overlapping .field--name-field-profile-media-image img {
  width: 50px;
  height: 50px;
}
.byline-wrapper.overlapping .field--name-field-profile-media-image img {
  border: .15rem solid white;
}

.byline-wrapper img,
.byline-wrapper .no-image {
  width: 36px;
  height: 36px;
  text-align: right;
  border-radius: 50%;
  vertical-align: middle;
  -webkit-align-self: center; /* <---------- Safari */
  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;
}

/************************************************************************************************************************************//*
 * The featured/lead images.
***************************************************************************************************************************************/

.views-field-field-lead-media-image img {
  float: left;
}

/************************************************************************************************************************************//*
 * The reusable main-plus-three-column view on front and landing pages.
***************************************************************************************************************************************/
.main-plus-three-column {
    padding-bottom: 5rem;
}

/* This is the wrapper for MAIN */
.main-plus-three-column > .view-content {
  border: 0px;
  padding: 0rem;
  margin-bottom: 1rem;
  text-align: center;
}
/* This is the container for MAIN */
.main-plus-three-column > .view-content .views-row {
  text-align: center;
  padding-bottom: 1.5rem;
  display: flex;
  flex-flow: column;
}
/* This is the title for MAIN */
.main-plus-three-column > .view-content .views-field-title {
  padding: 1rem;
  text-align: center;
  padding: .5rem 1rem;
}
.main-plus-three-column > .view-content .views-field-title a {
  font-size: 1.8rem;
  line-height: 2.5rem;
}
/* This is the channel for MAIN */
.main-plus-three-column .section-subsection {
  font-family: Merriweather, serif;
  font-size: .9rem;
  letter-spacing: .1rem;
  text-transform: uppercase;
  text-align: center;
  padding: 0rem;
}

.main-plus-three-column .section-subsection a {
  color: #0069B4;
}

/* This is the teaser for MAIN */
.main-plus-three-column .views-field-field-article-teaser {
  text-align: center;
  padding: 0.5rem 1.5rem;
}
/* This is the wrapper for 2-3 COLUMNS + IN CASE YOU MISSED IT */
.main-plus-three-column .attachment .views-field-field-article-teaser {
  padding: 0;
}
/* This is the title for 2-3 COLUMNS + IN CASE YOU MISSED IT */
.main-plus-three-column .attachment .views-field-title a {
  font-size: 1.3rem;
  line-height: 1.3rem;
}
/* This is the content inside the 2-3 COLUMNS */
.main-plus-three-column .three-other-stories {
  padding: 0px;
}
/* This aligns left the content inside the 2-3 COLUMNS and resets their padding */
.main-plus-three-column .three-other-stories .views-field-title,
.main-plus-three-column .three-other-stories .byline-wrapper,
.main-plus-three-column .three-other-stories .section-subsection,
.main-plus-three-column .three-other-stories p {
  text-align: left;
  padding-left: 0;
}
.main-plus-three-column .three-other-stories .views-field-title {
    padding-top: .5rem;
}
.main-plus-three-column .three-other-stories .views-field-title a {
  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 the 2-3 COLUMNS, making them into a row list*/
.main-plus-three-column .three-other-stories .view-content {
  display: flex;
  flex-flow: column;
  border: 0px; /* This removes the black border, which will still appear on main story */
}

/* These are each of the boxes holding the content for the 2 COLUMNS -- 50% wide on mobile devices */
.main-plus-three-column .three-other-stories .views-row {
  padding: 1rem .4rem;
  border-top: 2px solid #ddd;
}
/* This removes the border-right from the third story, and adds a divider between stories 2 and 3 as border-left */
.main-plus-three-column .three-other-stories .views-row:nth-child(2) {
  border-right: 0px;
}

/* 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;
}

/* This makes formats the content in "IN CASE YOU MISSED IT" into a column list*/
.main-plus-three-column .in-case-you-missed-it .view-content{
  border: 0px;
  width: 100%;
  display: flex;
  flex-flow: column;
  padding: 0;
  margin: 0;
}
.main-plus-three-column .in-case-you-missed-it .view-header h4 {
  margin-left: 0rem;
  margin-top: 1rem;
  margin-bottom: 0;
  padding-top: 1.5rem;
  padding-left: 0rem;
  border-top: 2px solid #ddd;
  border-bottom: 0px;
}
.main-plus-three-column .in-case-you-missed-it .views-row {
  border-bottom: 2px solid #ddd;
  padding: .5rem 0;
}
.main-plus-three-column .in-case-you-missed-it .views-row:last-child {
  border-bottom: 0px;
}
.main-plus-three-column .in-case-you-missed-it .views-field-title {
  text-align: left;
  padding-left: 0;
}
.main-plus-three-column .in-case-you-missed-it .views-field-title a {
  font-size: 1rem;
  line-height: 1.2rem;
}
.main-plus-three-column .in-case-you-missed-it .brick {
  text-align: left;
  padding-bottom: 0;
  margin-bottom: 0;
}

/************************************************************************************************************************************//*
 * Stacked Views rows
***************************************************************************************************************************************/

.views-stacked .views-row {
  border-bottom: 2px solid #ddd;
  margin: 0;
  padding: 1rem 0;
}

@media screen and (min-width: 1000px) {
  .views-stacked .views-row {
    padding: 2rem 0;
  }
}

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

@media screen and (min-width: 900px) {

    h1 {
        font-size: 2.5rem;
    }


    .main-plus-three-column {
    display: flex;
    flex-flow: row;
    padding-bottom: 2rem;
  }

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

  /* This adds a black border around the MAIN on desktop */
  .main-plus-three-column > .view-content {
  border: 1px solid #707070;
    padding: 1rem;
    min-width: 23rem;
  }
  .main-plus-three-column > .view-content h3 {
  padding: 1rem;
  }

  /* This is the 2-3 COLUMNS + IN CASE YOU MISSED IT on desktop*/
  .main-plus-three-column .view {
  }
  /* These is the wrapper setting the width for 2-3 COLUMNS + IN CASE YOU MISSED IT on desktop */
  .main-plus-three-column .three-other-stories,
  .main-plus-three-column .in-case-you-missed-it {

  }
  /* These are each of the boxes holding the content for 2-3 COLUMNS */
  .main-plus-three-column .three-other-stories .views-row {
    border: 0;
    flex-basis: 33%;
    padding: 1rem;
    border-right: 2px solid #ddd;
  }
  /* This is the container of the 2-3 COLUMNS */
  .main-plus-three-column .three-other-stories .view-content {
    padding-left: 1rem;
  }
  /* This is the content inside the 2-3 COLUMNS */
  .main-plus-three-column .three-other-stories .views-row {
    padding: 0 1rem 1rem 1rem;
  }
  .main-plus-three-column .three-other-stories .views-field-title {
    line-height: 1.3rem;
    padding: 0.5rem 0rem;
  }

  /* This removes the border-right from the third column, and adds a divider between columns 2 and 3 as border-left */
  .main-plus-three-column .three-other-stories .views-row:nth-child(3) {
  border-right: 0px;
  border-left: 2px solid #ddd;
  }

  /* This is the title for IN CASE YOU MISSED IT */
  .main-plus-three-column .in-case-you-missed-it .view-header h4 {
    margin-left: 2rem;
    margin-top: 2rem;
    padding-top: 1rem;
    border: 0px;
    border-top: 0px;
  }

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

  /* This is the horizontal line before the article titles on desktop version of IN CASE YOU MISSED IT */
  .in-case-you-missed-it .views-field-title::before {
    display: inline-block;
    content: "";
    border-top: 1px solid #00A3D9;
    width: 40px;
    margin-right: 1.7rem;
    transform: translateY(-0.5rem);
  }
  .earthbeat-colors .in-case-you-missed-it .views-field-title::before {
    border-top: 1px solid #329F4C;
  }

  .gsr-colors .in-case-you-missed-it .views-field-title::before {
    border-top: 1px solid #480571;
  }

  /* This is the separator above each title in IN CASE YOU MISSED IT on desktop */
  .main-plus-three-column .in-case-you-missed-it .views-field-title {
    border-bottom: 0;
    border-top: 0;
    padding-top: 0;
    padding-bottom: 0;
    text-indent: -4.3rem;
    padding-left: 4.3rem;
    line-height: 2rem;
  }
  .main-plus-three-column .in-case-you-missed-it .views-field-title a {
    font-size: 1.3rem;
    line-height: 2.1rem;
    font-weight: 300;
  }
  .main-plus-three-column .in-case-you-missed-it .views-field-title.small a {
    font-size: 1rem;
    line-height: 1.2rem;
    font-weight: 500;
  }

  /* This is the horizontal line between IN CASE YOU MISSED IT on desktop version*/
  .in-case-you-missed-it .views-row {
    border-bottom: 0px;
  }
  .main-plus-three-column .in-case-you-missed-it .views-row {
    border-bottom: 2px solid #ddd;
    padding: 0.5rem 0;
    margin-left: 2rem;
    margin-right: 1rem;
  }
}