/**
 * Styling for the homepage
 */
.front .main a {
  text-decoration: none;
}
.main h2,
.main h3,
.front .more-link {
  line-height: 120%;
}
.main h2 {
  font-size: 1.5rem;
  letter-spacing: -0.25px;
  font-weight: 600;
  margin: 0 0 1rem 0;
}
.main h2,
.main h2 a:link,
.main h2 a:visited {
  color: #00A3D9;
}

.main h2::before {
  display: inline-block;
  content: "";
  border-top: 1px solid #00A3D9;
  width: 3.3rem;
  margin-right: .7rem;
  transform: translateY(-0.5rem);
}
.main h3 {
  font-size: 1.3rem;
  letter-spacing: -0.25px;
  font-weight: 400;
  text-decoration: none;
  margin-top: .5rem;
  margin-bottom: .5rem;
}
.main h4 {
  font-size: .9rem;
  margin: 1rem;
  letter-spacing: .1rem;
  font-weight: 300;
  color: #00A3D9;
}
.front .section-subsection a {
  color: #00A3D9;
}
.front .more-link {
  font-family: Roboto, sans-serif;
  font-size: .75rem;
  text-transform: uppercase;
  padding: 2rem 0;
  text-align: left;
  letter-spacing: .03rem;
  margin-left: 4rem;
}
.front .more-link a {
  text-decoration: underline;
  color: #00A3D9;
}
.front .byline-wrapper {
  margin-top: 1rem;
}
.front .byline-wrapper .item-list li {
  margin: 0 !important;
  font-size: .8rem;
}
.front .byline-wrapper .item-list li a {
  font-size: .7rem;
}

/** Give homepage Views rows a different appearance on mobile, having a narrower border between them. */
@media screen and (max-width: 639px) {
  .front .view .views-row.stacked.with-border {
    border-top: none;
  }
  .front .view .views-row.stacked.with-narrow-border:first-child:before {
    display: none;
  }
}

/******************************************************************************************************************
*** TOP THREE STORIES (Hand-curated content)
*******************************************************************************************************************/

.three-quarters-one-quarter .layout__region--second {
  margin-top: 2rem;
  border-top: 2px solid #ddd;
  padding-top: 2rem;
}
.front .layout__region--first h2 {
  display: none;
}
.front .layout__region--first .view-content .views-row:first-child {
  border-top: none;
}
.front .image-style-home-features {
  width: 100%;
}
.front .views-field-title a {
  letter-spacing: -0.25px;
}

/************* HERO STORY ***************/
.front .hero-story .view-content-wrapper {
  margin-bottom: 3rem;
}
.front .hero-story .contains-floated-image {
  margin-left: -5.5%;
  margin-right: -5.5%;
}

/* This creates a bleed on the hero image */
.front .hero-story .views-field-field-lead-media-image {
  width: 120%;
  margin: 0 -2rem;
}
/* This styles the hero title */
.front .hero-story .views-field-title,
.front .hero-story .views-field-field-article-teaser {
  padding: 1rem 4%;
  text-align: center;
}
.front .hero-story .views-field-title {
  font-size: 1.8rem;
}
/* This is the channel on the hero story */
.front .hero-story .section-subsection {
  font-size: 1rem;
  letter-spacing: .05rem;
  text-transform: uppercase;
  text-align: center;
}

/** Take the padding from the hero story. */
.front .three-quarters-one-quarter .layout__region--first > div:first-child .views-row:first-child {
  padding-top: 0;
}

/************* TOP 3 STORIES ***************/
.front .three-quarters-one-quarter .layout__region--first > div:last-child .views-row:first-child {
  border-top: 1px solid #ddd;
}

@media all and (min-width: 640px) {
  .front .hero-story .contains-floated-image {
    margin-left: 0;
    margin-right: 0;
  }

  .front .views-row.stacked.with-narrow-border::before {
    width: 100%;
    border-top: 1px solid #ddd;
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
  }
}

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

  .front .hero-story .view-content-wrapper {
    margin-bottom: 0;
  }

  /* Hero & top 3 stories section */
  .front .three-quarters-one-quarter .layout__region--first > div:first-child .views-row:first-child,
  .front .three-quarters-one-quarter .layout__region--first > div:last-child .views-row:first-child {
    padding-top: 0;
    border-top: none;
  }

  /* This removes the border bottom of the hero story on the DESKTOP */
  .front .hero-story {
    border-bottom: 0;
    padding-left: 1rem;
    box-sizing: border-box;
  }
  .front .hero-story > .view-content-wrapper {
    padding: 0 0 0 1rem;
    border-left: 1px solid #ddd;
  }
  .front .hero-story .views-field-field-lead-media-image {
    width: 100%;
    margin: 0;
    padding: 0;
  }
  .front .hero-story .views-field-field-article-teaser {
    display: none;
  }
  .front .hero-story .views-field-title {
    font-size: 2.6rem;
  }
}

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

  /* This removes the border bottom of the hero story on the DESKTOP */
  .front .hero-story {
    padding-right: 1rem;
  }
  .front .hero-story > .view-content-wrapper {
    padding-right: 1rem;
    border-right: 1px solid #ddd;
  }
}

/******************************************************************************************************************
 LATEST NEWS (Mobile)
*******************************************************************************************************************/

.front .layout__region--second .views-row:last-of-type {
  border-bottom: 0;
  padding-bottom: 0;
}
.front .layout__region--second h2 {
  letter-spacing: -0.25px;
  margin: 1.3rem 0;
}
.front .layout__region--second h2::before {
  display: inline-block;
  content: "";
  border-top: 1px solid;
  margin-right: .7rem;
  transform: translateY(-0.5rem);
}
.front .layout__region--second .views-field-title {
  letter-spacing: -0.25px;
}

/* This positions the slug on MOBILE */
.front .layout__region--second .view-content .views-row .brick {
  margin-bottom: .5rem;
}
.front .layout__region--second .byline-wrapper .node--type-author {
  margin-top: .5rem;
  grid-column: 2;
}

/******************************************************************************************************************
    EDITOR'S CHOICE - MOBILE
*******************************************************************************************************************/

.front .editors-choice .more-link {
  display: none;
  text-align: right;
}
.front .editors-choice .attachment .more-link {
  display: block;
  padding: 1rem 0;
}
.front .editors-choice .view-content-wrapper > .view-content {
  margin-bottom: 3rem;
}
.front .editors-choice h3 {
  margin: 0.5rem 0;
}
.front .editors-choice .editors-choice-list h3 {
  margin-bottom: 0;
}

/******************************************************************************************************************
 *** STORIES READERS LIKE - MOBILE
*******************************************************************************************************************/

.front .block-views-blockpopular-stories-block-1 {
  margin-top: 1rem;
  margin-bottom: 2rem;
  display: grid;
}
.front .stories-readers-like .view-content-wrapper > .view-content {
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid #ddd;
}
.front .stories-readers-like .views-row .views-field-counter {
  color: #00A3D9;
}
.front .stories-readers-like .view-content-wrapper > .view-content .views-row h3 {
  margin: 1rem 0;
}

/* This styles the slugs */
.front .stories-readers-like .views-row .brick {
  margin-bottom: .5rem;
}
.front .views-row .overlay-brick a {
  font-size: .7rem;
  padding: .3rem .6rem;
  position: absolute;
}
.front .stories-readers-like .views-field-field-byline {
  display: none; /* This hides all BYLINES from the mobile version */
}

/* This positions the story that has an image on MOBILE into a grid */
.front .stories-readers-like .views-row:first-child .image-style-homepage-features-medium {
  display: block;
}

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

  .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 {
    margin-left: 0;
  }

  /* This styles the counter on DESKTOP */
  .front .stories-readers-like .views-row .views-field-counter {
    font-size: 1.4rem;
  }
  .front .stories-readers-like .view-content-wrapper > .view-content .views-field-counter {
    text-align: left;
    margin-bottom: 0.5rem
  }
  .front .stories-readers-like .view-content-wrapper > .view-content .views-row:before {
    display: none;
  }
  .front .stories-readers-like .view-content-wrapper > .view-content {
    margin-bottom: 2rem;
    padding-bottom: 0;
    border-bottom: none;
  }
  .front .stories-readers-like .view-content-wrapper > .view-content .views-row h3 {
    display: block;
  }
}

@media screen and (min-width: 900px) {
  .front .stories-readers-like .view-content-wrapper > .view-content {
    margin-bottom: 3rem;
  }
  .front .stories-readers-like .view-content-wrapper > .view-content .views-field-counter {
    margin: 1rem 0 0.5rem;
  }

  /* This resets the overlay slug to an absolute position + returns bottom left margins for DESKTOP */
  .front .stories-readers-like .view-content:nth-child(2) .views-row:nth-child(1) .overlay-brick a,
  .front .stories-readers-like .view-content:nth-child(2) .views-row:nth-child(2) .overlay-brick a,
  .front .stories-readers-like .view-content:nth-child(2) .views-row:nth-child(3) .overlay-brick a{
    position: absolute;
    font-size: .8rem;
    padding: .5rem .7rem;
    bottom: 5px;
    left: 5px;
    top: inherit;
  }

  /* This displays the byline on the desktop, hidden on the mobile */
  .front .stories-readers-like .views-field-field-byline {
    display: block;
    margin: 1rem 0;
  }
  .front .stories-readers-like .more-link {
    margin-left: 1rem;
    margin-top: 2rem;
  }
}

@media all and (min-width: 1000px) {
  .view.stories-readers-like > .view-content-wrapper {
    grid-template-columns: 67% 33%;
  }
  .front .stories-readers-like .view-content-wrapper > .attachment-after {
    width: 90%;
    margin-left: 10%;
  }
  .front .stories-readers-like .attachment-after .views-row h3 {
    display: block;
    font-size: 1.1rem;
  }
}

@media all and (min-width: 1100px) {
  .view.stories-readers-like > .view-content-wrapper {
    grid-template-columns: 75% 25%;
  }
  .front .stories-readers-like .view-content-wrapper > .view-content {
    margin-bottom: 0;
  }
}

@media all and (min-width: 1250px) {
  .front .stories-readers-like .attachment-after .views-row h3 {
    font-size: 1.2rem;
  }
}

/******************************************************************************************************************
 ** OPINION - MOBILE
*******************************************************************************************************************/

.front .block-views-blockopinion-channel-block-1 h2,
.front .block-views-blockopinion-channel-block-1 h2 a:link,
.front .block-views-blockopinion-channel-block-1 h2 a:visited {
  color: #2969ae;
}
.front .block-views-blockopinion-channel-block-1 h2 {
  text-align: center;
  font-size: 1.3rem;
  padding: 0;
  margin: 0.5rem 0;
  border-top: 0;
}
.front .block-views-blockopinion-channel-block-1 h2::before {
  display: inline-block;
  content: "";
  border-top: 1px solid #2969ae;
  width: 40px;
  margin-right: 1.3rem;
  transform: translateY(-0.5rem);
}
.front .block-views-blockopinion-channel-block-1 h2::after {
  display: inline-block;
  content: "";
  border-top: 1px solid #2969ae;
  width: 40px;
  margin-left: 1.3rem;
  transform: translateY(-0.5rem);
}
.view-opinion-channel .views-row h3 {
  text-align: center;
  font-weight: 200;
  font-size: 1.4rem;
  margin: 1rem 0;
  padding: 0 4%;
}
.front .block-views-blockopinion-channel-block-1 .byline-wrapper .node--type-author {
  flex-flow: column;
}
.front .block-views-blockopinion-channel-block-1 .opinion-col2 .views-row,
.front .block-views-blockopinion-channel-block-1 .opinion-col4 .views-row {
  position: relative;
}
.front .block-views-blockopinion-channel-block-1 .opinion-col3 .views-field-field-byline span {
  padding-right: .2rem;
}
.front .block-views-blockopinion-channel-block-1 .views-field.views-field-field-column {
  text-transform: uppercase;
  color: #2969ae;
  font-size: .7rem;
  letter-spacing: .05rem;
  padding-bottom: 1rem;
}
.block-views-blockopinion-channel-block-1 p {
  padding: 0 1.6rem 1rem;
  text-align: center;
}
.front .block-views-blockopinion-channel-block-1 .opinion-col1 .views-row:nth-child(2) .image-style-thumbnail,
.front .block-views-blockopinion-channel-block-1 .opinion-col1 .views-row:nth-child(2) .views-field-field-byline {
  display: none;
}
.front .block-views-blockopinion-channel-block-1 .opinion-col3 .views-row:nth-child(2) .image-style-thumbnail,
.front .block-views-blockopinion-channel-block-1 .opinion-col3 .views-row:nth-child(2) .views-field-field-byline {
  display: inherit;
  justify-content: center;
}
.front .block-views-blockopinion-channel-block-1 .opinion-col3 .views-row:nth-child(1) .image-style-thumbnail,
.front .block-views-blockopinion-channel-block-1 .opinion-col3 .views-row:nth-child(1) .views-field-field-byline {
  display: none;
}
.front .view-opinion-channel.view-id-opinion_channel.view-display-id-block_1 .byline-wrapper {
  margin: 0 0 1rem 0;
}
.front .view-opinion-channel .views-row::before {
  content: "";
  border-top: 0.14rem solid #ccc;
  width: 82px;
  margin: 1rem auto 1.5rem auto;
  display: block;
}
.front .block-views-blockopinion-channel-block-1 .view-opinion-channel.view-display-id-block_1 .views-row:first-child:before {
  content: "";
  border-top: none;
  width: 0;
  margin: 0;
}
.front .view-opinion-channel .brick {
  text-align: center;
}
.front .view-opinion-channel .views-field-field-lead-media-image img {
  width: 100%;
}

/**************************************************************************
    BOTTOM SECTIONS WITH MAIN + 2-3 COLUMNS + IN CASE YOU MISSED IT
***************************************************************************/

/* EB & GSR menus */
.front .gsr-colors ul.menu,
.front .earthbeat-colors ul.menu {
  display: flex;
  flex-flow: row;
  flex-wrap: wrap;
  margin: 0 0 1rem 0;
  text-transform: uppercase;
  font-size: .9rem;
  letter-spacing: .1rem;
  padding-top: .5rem;
}
.front .earthbeat-colors h2 a,
.front .earthbeat-colors ul.menu a {
  color: #329F4C;
}
.front .gsr-colors h2 a,
.front .gsr-colors ul.menu a {
  color: #480571;
}

/* This is the divider for EB & GSR MENUS */
.front .earthbeat-colors ul.menu li::before,
.front .gsr-colors ul.menu li::before {
  content: " / " ;   /* Slash as divider for menu items */
  padding-left: .5rem;
  padding-right: .5rem;
}
.front .earthbeat-colors ul.menu li:first-child::before,
.front .gsr-colors ul.menu li:first-child::before {
  display: none;      /* Remove divider for first menu item */
}

/* This is the full wrapper +  title of each section */
.front .block-views-blockchannels-for-front-page-block-1 h2,
.front .block-views-blockchannels-for-front-page-block-1 h2 a, /*VATICAN*/
.front .menu--earthbeat-menu-for-ncr-front-pag h2,
.front .menu--earthbeat-menu-for-ncr-front-pag h2 a, /*EARTHBEAT*/
.front .block-views-blockchannels-for-front-page-block-3 h2,
.front .block-views-blockchannels-for-front-page-block-3 h2 a, /*CULTURE*/
.front .menu--gsr-menu-for-ncr-front-page h2,
.front .menu--gsr-menu-for-ncr-front-page h2 a/*GLOBAL SISTERS REPORT*/   {
  font-size: 1.65rem; /*The XD Design has these H2s larger on the mobile version than the other H2s on the mobile */
}
.front .block-views-blockchannels-for-front-page-block-1 h2 a, /*VATICAN*/
.front .block-views-blockchannels-for-front-page-block-3 h2 a /*CULTURE*/ {
  margin-left: 0;
}
.front .menu--earthbeat-menu-for-ncr-front-pag h2 a /*EARTHBEAT*/ {
  color: #3dae58;
}
.front .menu--gsr-menu-for-ncr-front-page h2 a/*GLOBAL SISTERS REPORT*/ {
  color: #480571;
}

/* This is the line above the "News" title, before the ad */
.front .block-views-blockchannels-for-front-page-block-1 h2 {
  border-top: none;
}
.block-views.in-focus > h2 {
  display: none;
}
.front .in-focus .attachment .views-element-container {
  max-width: 1250px;
}

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

@media all and (min-width: 640px) {
  .front .two-smaller-top-stories .view-content {
    display: grid;
    grid-template-columns: 48% 48%;
    grid-column-gap: 4%;
  }
  .front .two-smaller-top-stories .views-row.stacked.with-narrow-border::before {
    display: none;
  }
  .front .editors-choice .view-content-wrapper > .view-content .views-row:before {
    display: none;
  }
}

@media all and (min-width: 800px) {
  .front .editors-choice .view-content-wrapper > .view-content {
    margin-bottom: 0;
  }
}

@media screen and (min-width: 900px) {
  .front .two-smaller-top-stories .view-content {
    display: block;
  }
  .front .two-smaller-top-stories .views-row.stacked.with-narrow-border::before {
    display: block;
  }
  .front .two-smaller-top-stories .views-row.stacked.with-narrow-border:first-child::before {
    display: none;
  }
  .main h2 {
    text-indent: -4.1rem;
    padding-left: 4.1rem;
    border-top: 0;
  }
  .main h2,
  .main h2 a {
    font-weight: 100;
    font-size: 1.7rem;
  }
  .front .more-link {
    margin-left: 0;
  }
  .front .layout--twocol-section .layout__region--first { /* <---------- shared container with hero + other 2 stories  */
    flex: none;
    display: flex;
    flex-direction: row-reverse;
  }

  /**
   * Make Flexbox force this item to be "175%" of the width it would normally
   * flex to, in order to make the middle column appear wider.
   */
  .front .layout--twocol-section .layout__region--first > div:first-child {
    width: 175%;
  }
  .front .layout__region--first h2,
  .front .layout__region--first h2 a {
    font-size: 1.65rem;
  }
  .front .view-content .views-row:last-child {
    /* <---------- Removes border-bottom from last story on desktop */
    border-bottom: 0px;
  }

  /************************************************************************************************
     LATEST NEWS - DESKTOP ************************************************************************
  *************************************************************************************************/

  .three-quarters-one-quarter .layout__region--second {
    margin-top: 3rem;
    border-top: 2px solid #ddd;
    padding-top: 3rem;
  }

  /* This is the title for Latest News */
  .three-quarters-one-quarter .layout__region--second h2 {
    margin-top: 0;
    padding-top: 0;
    margin-bottom: 0;
    padding-bottom: 1rem;
  }
  .three-quarters-one-quarter .layout__region--second .live-news h2 {
    color: #cc0000;
    text-transform: uppercase;
  }

  .front .layout__region--second .views-field-field-byline {
    margin-top: 0;
  }
  .front .layout__region--second .more-link {
    padding-top: 2rem;
  }

  /************************************************************************************************
     EDITOR'S CHOICE - DESKTOP ********************************************************************
  *************************************************************************************************/

  .front .block-views-blockhomepage-top-3-stories-block-3 .byline-wrapper {
    margin-top: 0;
  }
  .front .editors-choice .view-content-wrapper > .view-content .views-row {
    border-right: 1px solid #ddd;
    border-top: none;
    padding: 0 8% 0 0;
  }
  .front .editors-choice .view-content-wrapper > .view-content,
  .front .editors-choice .view-content-wrapper > .attachment-after {
    display: grid;
    grid-template-columns: 48% 48%;
    grid-column-gap: 4%;
  }
  .front .editors-choice .more-link {
    text-align: right;
  }
  .front .editors-choice .editors-choice-list h3 {
    font-size: 1.1rem;
  }

  /************************************************************************************************
   OPINION - DESKTOP
  *************************************************************************************************/
  .front .view-opinion-channel > .view-content-wrapper {
    display: grid;
    grid-template-columns: 33% 67%;
    padding-top: 2rem;
  }
  .front .view-opinion-channel > .view-content-wrapper > .view-content {
    width: 93%;
    margin-right: 7%;
    padding-right: 7%;
    border-right: 1px solid #ccc;
    box-sizing: border-box;
  }
  .front .block-views-blockopinion-channel-block-1 h2 {
    font-size: 1.65rem;
    margin-left: 0;
  }
  .front .view-opinion-channel.view-id-opinion_channel.view-display-id-block_1 .view-content .views-row {
    padding-top: 0;
  }

  /*****************************************************************************************************
  *** IN FOCUS - DESKTOP ******************************************************************************************************/
  .front .in-focus h2::before {
    border-top: 1px solid #00A3D9 !important;
  }
} /* <------ @media screen and (min-width: 900px) */

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

  /* Remove padding and border, etc., from region. */
  .three-quarters-one-quarter .layout__region--second {
    margin-top: 0;
    border-top: none;
    padding-top: 0;
  }
}

/************************************************************************************************
 OPINION - DESKTOP
*************************************************************************************************/

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

  .front .view-opinion-channel > .view-content-wrapper {
    grid-template-columns: 28% 72%;
  }
  .front .view-opinion-channel > .view-content-wrapper .attachment {
    display: grid;
    grid-template-columns: 30% 40% 30%;
    grid-column-gap: 0;
    margin-bottom: 2rem;
  }
  .front .view-opinion-channel > .view-content-wrapper .attachment .views-element-container: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%;
  }
  .front .view-opinion-channel.view-id-opinion_channel.view-display-id-block_1 .view-content .views-row {
    padding-top: 0;
  }
  .front .view-opinion-channel.view-id-opinion_channel.view-display-id-block_1 .views-row:first-of-type {
    padding-top: 0;
  }
  .front .opinion-col2 .views-row:after,
  .front .opinion-col4 .views-row:after {
    content: "";
    border-top: none;
    width: 0;
    margin: 1rem 0;
  }
}

@media all and (min-width: 1250px) {
  .front .editors-choice .editors-choice-list h3 {
    font-size: 1.3rem;
  }
}