/**
 * Styling for the homepage
 */
.front a {
  text-decoration: none;
}
.front .main h2 {
  font-size: 1.3rem;
  line-height: 1.8rem;
  letter-spacing: -0.25px;
  color: #00A3D9;
  font-weight: 100;
  margin: 0rem 0rem 1rem 0rem;
  border-top: 2px solid #ddd;
  padding-top: 2rem;
}
.front .main h2 a {
  color: #00A3D9;
  font-size: 1.3rem;
  line-height: 1.8rem;
  letter-spacing: -0.25px;
  font-weight: 100;
}

.front .main h2::before {
  display: inline-block;
  content: "";
  border-top: 1px solid #00A3D9;
  width: 3.3rem;
  margin-right: .7rem;
  transform: translateY(-0.5rem);
}
.front .main h3 {
  font-size: 1.3rem;
  line-height: 1.5rem;
  letter-spacing: -0.25px;
  text-align: left;
  font-family: Merriweather, serif;
  font-weight: 400;
  text-decoration: none;
  margin-top: .5rem;
  margin-bottom: .5rem;
}
.front .main h3 a {
  color: black;
}
.front .main h4 {
  font-size: .9rem;
  margin: 1rem;
  letter-spacing: .1rem;
  font-weight: 300;
  color: #00A3D9;
}
.front .main p {
  font-size: .9rem;
  line-height: 1.3rem;
  padding-top: .8rem;
}
.front .layout.gray {
  border-top: 0.1rem solid #ddd;
  background: #F2F2F2;
}
.front .latest-news-date {
  font-family: roboto, sans-serif;
  font-size: .75rem;
  line-height: .9rem;
  letter-spacing: .50px;
  padding-top: .5rem;
  color: #666666;
}
.front .section-subsection {
  font-family: Roboto, sans-serif;
  font-weight: 400;
  font-size: .8rem;
  letter-spacing: .25px;
  text-transform: uppercase;
}
.front .section-subsection a {
  color: #00A3D9;
}
.front .more-link {
  font-family: Roboto, sans-serif;
  font-size: .75rem;
  line-height: 1rem;
  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 {
  color: black;
  font-size: .7rem;
}


/******************************************************************************************************************
*******************************************************************************************************************
*** TOP THREE STORIES (Hand-curated content)
*******************************************************************************************************************
*******************************************************************************************************************/
.front .layout--twocol-section {
  display: block;
}
.front .layout--twocol-section.layout--twocol-section--75-25 > .layout__region--second {
  flex: auto;
}
.front .layout--twocol-section.layout--twocol-section--75-25 > .layout__region--second{
  flex: 0 0 100%;
}
.front .layout__twocol-section {
  display: flex;
  flex-flow: column;
  border-bottom: 2px solid #ddd;
  padding-bottom: 20px;
  margin-bottom: 20px;
  min-width: 100%;
}
.front .layout__region--first { /* <---------- shared container with hero + other 2 stories  */
  display: flex;
  flex-flow: column;
}
.front .layout__region--first h2 {
  display: none;
}
.front .layout__region--first .view-content .views-row,
.front .hero-story {
  /* <---------- other 2 stories container */
  padding-bottom: 1rem;
  border-bottom: 2px solid #ddd;
  margin-bottom: 1rem;
}

.front .layout__region--first .view-content .views-row:last-child {
  border-bottom: 0;
  margin-bottom: 0;
}

@media screen and (min-width: 900px) {
  .front .layout--twocol-section {
    display: flex;
  }
  .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;
  }
}
.front .image-style-home-features {
  width: 100%;
}
.front .views-field-title {
  padding: 0rem;
}
.front .views-field-title a {
  font-size: 1.3rem;
  line-height: 1.5rem;
  letter-spacing: -0.25px;
  color: black;
  text-align: left;
  font-family: Merriweather, serif;
}

/************* HERO STORY ***************/

.front .hero-story {   /* <---------- hero story main container */
  flex: 0 0 100%;
  border-left: 0;
  border-right: 0;
}
.front .hero-story .contains-floated-image {
  margin-left: -5.5%;
  margin-right: -5.5%;
}
@media all and (min-width: 560px) {
  .front .hero-story .contains-floated-image {
    margin-left: -4.5%;
    margin-right: -4.5%;
  }
}
@media all and (min-width: 900px) {
  .front .hero-story .contains-floated-image {
    margin-left: 0;
    margin-right: 0;
  }
}

/* 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 {
  padding: 1rem;
  text-align: center;
}
.front .hero-story .views-field-title a {
  font-size: 1.8rem;
  line-height: 2rem;
}
/* This is the channel on the hero story */
.front .hero-story .section-subsection {
  font-family: Merriweather, serif;
  font-size: 1rem;
  letter-spacing: .05rem;
  text-transform: uppercase;
  text-align: center;
  padding: .5rem 0rem;
}

/******************************************************************************************************************
*******************************************************************************************************************
    LATEST NEWS (Mobile)
*******************************************************************************************************************
*******************************************************************************************************************/
.front .layout__region--second {
  width: 100%;
  padding-bottom: 2rem;
}
.front .layout__region--second .views-row {
  padding-bottom: 1rem;
  border-bottom: 2px solid #ddd;
}
.front .layout__region--second .views-row:last-of-type {
  border-bottom: 0;
  padding-bottom: 0;
}
.front .layout__region--second h2,
.front .layout__region--second h2 a{
  line-height: 1.5rem;
  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 {
  font-size: 1.1rem;
  line-height: 1.5rem;
  letter-spacing: -0.25px;
  grid-column: 2;
  grid-row: auto;
}
.front .layout__region--second .views-field-title a {
  color: black;
}

/* This positions the items as a grid for mobile */
.front .layout__region--second .views-row {
    display: grid;
    border-bottom: 0;
    grid-template-columns: 3.9rem auto;
}

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

/******************************************************************************************************************
*******************************************************************************************************************
    EDITOR'S CHOICE - MOBILE
*******************************************************************************************************************
*******************************************************************************************************************/
/* This is the wrapper for Editor's Choice */
.front .block-views-blockhomepage-top-3-stories-block-3 {
  padding-top: 0.5rem;
  padding-bottom: 1rem;
}
.front .block-views-blockhomepage-top-3-stories-block-3 .editors-choice .views-row {
  border-bottom: 2px solid #ddd;
  padding-bottom: 1rem;
  padding-top: 1rem;
}
  .front .editors-choice .attachment-after {
    display: flex;
    flex-flow: column-reverse;
  }
.front .editors-choice .more-link {
    display: none;
    text-align: right;
    }
    .front .editors-choice .attachment .more-link {
    display: block;
    padding: 1rem 0;
    }

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

.front .block-views-blockpopular-stories-block-1 {
  margin-top: 1rem;
  margin-bottom: 2rem;
  display: grid;
}
.front .stories-readers-like .views-row {
  /* This is the .views-row for all stories */
  border-bottom: 2px solid #ddd;
  padding-right: 0;
  padding-bottom: 1rem;
  margin-bottom: 1rem;
  display: grid;
  grid-template-columns: 3.9rem auto;
  grid-template-rows: auto;
}
.front .stories-readers-like .views-row .views-field-counter {
  /* This is the COUNTER styling */
  color: #00A3D9;
  font-family: Roboto, sans-serif;
  font-size: 1.5rem;
  letter-spacing: .1rem;
  font-weight: 500;
  text-align: right;
  width: 3rem;
  padding-right: 1rem;
  display: grid;
  grid-column: 1;
  grid-row: 1;
  border-top: 4px solid white;
  margin-top: -20px;
  padding-top: 1.3rem;
}
.front .stories-readers-like .views-row h3 {
  /* This is the TITLE styling of all stories */
  margin-top: 0;
  margin-bottom: 0;
  padding-bottom: 0;
  display: grid;
  grid-column: 2;
  grid-row: 1;
}
.front .stories-readers-like .views-row h3 a {
  /* This is the anchor size for all H3 titles */
  font-size: 1rem;
  line-height: 1.3rem;
}
.front .stories-readers-like .views-row .views-field-field-slug {
  grid-column: 2;
  grid-row: 2;
  padding: 0;
}
/* This is the wrapper of the first three stories */
.front .stories-readers-like .view-content:nth-child(2) {
/*    background: lightpink;*/
}
/* This is the wrapper of the last three stories and also .more-link */
.front .stories-readers-like .view-id-popular_stories {
  /*    background: lightpink;*/
  display: grid;
  border-bottom: 0;
}
/* This is the wrapper of just the last three stories (it does not include .more-link)*/
.front .stories-readers-like .view-id-popular_stories .view-content{
}
/* This styles the slugs */
.front .stories-readers-like .views-row .brick {
  margin-bottom: .5rem;
}
/* This is the SLUG grid position for mobile */
.front .block-views-blockpopular-stories-block-1 .stories-readers-like .views-field-field-brick {
    grid-row: 2;
    grid-column: 2;
    margin-bottom: 1rem;
}
.front .stories-readers-like .views-row .brick,
.front .stories-readers-like .views-row .overlay-brick {
}
.front .stories-readers-like .views-row .overlay-brick a {
  font-size: .7rem;
  padding: .3rem .6rem;
  position: relative;
  bottom: 0;
  left: 0;
  top: .5rem;
}

/****** The following hides those elements the mobile version does not show ******************/

.front .stories-readers-like .views-row img {
  display: none; /* This hides all the IMAGES from the mobile version */
}
.front .stories-readers-like .views-field-field-article-teaser {
  display: none; /* This hides all TEASERS from the mobile version */
}
.front .stories-readers-like .views-field-field-byline {
  display: none; /* This hides all BYLINES from the mobile version */
}

/******* The following is styling specific to only the first story on MOBILE ******************/

/* This selects the first story (and also the first story in the attachment) */
.front .stories-readers-like .views-row:first-child  {
/*    background: pink;*/
}
/* This selects the first story after the attachment, allows to reset so it doesn't match the first story */
.front .stories-readers-like .attachment-after .views-row:first-child {
/*    background: blue;*/
}
/* 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;
  grid-column: 2;
  grid-row: 1;
}
.front .stories-readers-like .views-row:first-child H3 {
  display: block;
  grid-column: 2;
  grid-row: 3;
}
.front .stories-readers-like .views-row:first-child H3 a{
  font-size: 1.3rem;
  line-height: 1.5rem;
}
.front .stories-readers-like .views-row:first-child .views-field-counter {
  grid-row: 2;
}
.front .stories-readers-like .attachment .views-row:first-child .views-field-counter {
  grid-row: 1;
}
/* This removes the image in the first-child of the attachment, correcting for the above */
.front .stories-readers-like .attachment-after .views-row:first-child img {
  display: grid;
  grid-column: 2;
    grid-row: 1;
}
.front .stories-readers-like .attachment-after .views-row:first-child H3 {
  display: grid;
  grid-column: 2;
  grid-row: 1;
}
.front .stories-readers-like .attachment-after .views-row:first-child H3 a{
  font-size: 1rem;
  line-height: 1.3rem;
}
.front .stories-readers-like .attachment-after.views-row:first-child .views-field-counter {
  grid-row: 1;
    grid-column: 1;
}
.front .block-views-blockpopular-stories-block-1 .view-popular-stories.view-display-id-attachment_1 .views-row {
  padding-bottom: 1rem;
}

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

.front .block-views-blockopinion-channel-block-1 {
  display: flex;
  flex-direction: column;
}
.front .block-views-blockopinion-channel-block-1 h2,
.front .block-views-blockopinion-channel-block-1 h2 a{
  text-align: center;
  font-size: 1.3rem;
  padding-top: 1.5rem;
  padding-bottom: 0;
  margin-bottom: 0.5rem;
  margin-left: 0;
  color: #2969ae;
  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);
}
.front .block-views-blockopinion-channel-block-1 h3 {
  padding: 0 1rem;
  margin-bottom: .5rem;
  line-height: 1.6rem;
}
.front .block-views-blockopinion-channel-block-1 h3, .front .block-views-blockopinion-channel-block-1 h3 a {
  text-align: center;
  margin-top: 0;
  font-weight: 200;
  font-size: 1.4rem;
  line-height: 1.8rem;
}
.front .block-views-blockopinion-channel-block-1 .opinion-col2 h3 a,
.front .block-views-blockopinion-channel-block-1 .opinion-col4 h3 a {
  font-style: normal;
}
.front .block-views-blockopinion-channel-block-1 .opinion-col2 h3,
.front .block-views-blockopinion-channel-block-1 .opinion-col4 h3 {
  padding: 0 1.6rem;
}

.front .block-views-blockopinion-channel-block-1 .byline-wrapper .node--type-author {
    flex-flow: column;
}
.front .block-views-blockopinion-channel-block-1 .view-opinion-channel.view-display-id-block_1 .views-row {
  display: flex;
  flex-flow: column;
  align-items: center;
  padding: 1rem 3rem;
}

.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;
  padding-bottom: 1rem;
  line-height: 1.4rem;
  text-align: center;
}
.front .block-views-blockopinion-channel-block-1 .view-opinion-channel.view-display-id-block_1 .views-row::after {
  content: "";
  border-top: 0.14rem solid #ddd;
  width: 82px;
  margin: 1rem 0;
}
.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 {
  padding-bottom: 1rem;
  margin-top: 0;
}

/**************************************************************************
**************************************************************************
    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;
  line-height: 1.5rem;
  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 {
    border-top: 2px solid #ddd;
}
.front .block-views-blockchannels-for-front-page-block-1 h2 {
    border-top: none;
}


/****************************************************************
*** IN FOCUS - MOBILE
*****************************************************************/
/* This is the main container for Small Earth Stories */
.front .block-views-blockfocus-block-for-front-page-block-1 {
/*    border: 2px solid coral;*/
  margin: 2rem 0 2rem 0;
  height: fit-content;
  overflow: hidden;
  left: 50%;
	margin-left: -50vw;
	margin-right: -50vw;
	max-width: 100vw;
	position: relative;
	right: 50%;
	width: 100vw;
}
.block-views.block-views-blockfocus-block-for-front-page-block-1 h2 {
  display: none;
}
.front .block-views-blockfocus-block-for-front-page-block-1 .views-field-field-article-teaser {
  display: none;
}
.front .in-focus .views-field-field-lead-media-image {
}

.front .in-focus .views-field-field-lead-media-image img{
  position: absolute;
  object-fit: cover;
  max-width: 200% !important;
  z-index: 0;
  padding-bottom: 3rem;
  height: fit-content;
}

.front .in-focus .attachment {
  position: relative;
  z-index: 1;
  padding: 1.5rem;
  display: flex;
  justify-content: center;
  padding-bottom: 1rem;
  background: radial-gradient(circle 40rem at 78%, transparent -13%, transparent 9%, black 55%);
}
.front .block-views-blockfocus-block-for-front-page-block-1 .attachment .view-content {
  width: 80%;
}
.front .block-views-blockfocus-block-for-front-page-block-1 .attachment .views-row {
  display: grid;
}
.front .block-views-blockfocus-block-for-front-page-block-1 .attachment .in-focus h2 {
  display: block;
  font-size: 1.1rem;
  top: 0;
  margin-left: 0;
  width: 8rem;
  line-height: 1.5rem;
  font-weight: 600;
  padding-bottom: 0.5rem;
  padding-top: 0;
border-top: 0;
}
.front .in-focus h2::before {
  content: none;
  margin-left: 0;

}

.front .block-views-blockfocus-block-for-front-page-block-1 .attachment .in-focus .view-header h3{
  margin-bottom: 1rem;
}

.front .in-focus h3 a {
  font-size: 1.8rem;
  line-height: 2.3rem;
  color: white;
}

.front .block-views-blockfocus-block-for-front-page-block-1 .attachment .views-field-field-article-teaser p {
  font-size: 1.1rem !important;
  line-height: 1.5rem !important;
  font-weight: 100;
  color: white;
  width: 50%;
}
.front .in-focus .views-field-field-byline a,
.front .in-focus .byline,
.front .in-focus .byline a {
  color: white;
  font-weight: 600;
}

.front .in-focus .avaåtar {
margin: 0;
  padding-top: 3rem;
}

/*
WAS THIS INTENTIONAL? -- NATHAN
.front .byline-wrapper img {
  display: none;
}
*/


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

@media screen and (min-width: 900px) {
  .front .layout--twocol-section.layout--twocol-section--25-75 > .layout__region--first,
  .front .layout--twocol-section.layout--twocol-section--75-25 > .layout__region--second {
    flex: 0 1 75%;
  }

  .front .main h2 {
    margin-left: -4.1rem;
    border-top: 0;
    }
    .front .main h2,
    .front .main h2 a {
    font-size: 1.65rem;
    }

  .front .more-link {
    margin-left: 0;
  }

  .front .layout--twocol-section.layout--twocol-section--75-25 {
    padding-bottom: 3rem;
    border-bottom: 2px solid #ddd;
  }
   .front .layout--twocol-section.layout--twocol-section--75-25 > .layout__region--second {
    flex: 0 0 24%;
  }
  .front .block-views-blockhomepage-top-3-stories-block-1 {
    width: 33%;
  }
  /* This is the container for the hero + 2 other top stories - DESKTOP */
  .front .layout__region--first {

  }
  /* This removes the border bottom of the hero story on the DESKTOP */
  .front .hero-story {
    border-bottom: 0px;
  }
  /* This makes the top three stories reverse order on the desktop, allowing the hero story to be to the right of the other two */
  .front .layout__region--first {
    flex-flow: row-reverse;
  }

  .front .region-content-top {
    display: flex;
    flex-direction: column;
  }
  .front .view-homepage-top-3-stories {
    display: flex;
    flex-direction: column;
  }
  .front #block-views-block-latest-news-block-2 {
    width: 100%;
  }

  .front .layout__threecol-section {
    flex-flow: row;
    flex-wrap: wrap;
    border-bottom: 2px solid #ddd;
  }
  .front .layout--onecol {
    padding-top: 1.5rem;
    border-top: 2px solid #ddd 0;
    border-bottom: 2px solid #ddd 0;
  }
  .front .block-views-blockhomepage-top-3-stories-block-2 {
    border-bottom: 0;
    border-right: 2px solid #ddd;
    border-left: 2px solid #ddd;
    padding-left: 1rem;
    padding-right: 1rem;
    margin-right: 1rem;
    margin-left: 1rem;
    width: 66%; /*Hero story*/
  }
  .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,
  .front .hero-story .views-field-title a {
    font-size: 2.6rem;
    line-height: 3rem;
  }



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

  /* This is the container for Latest News */
  .layout__region-second {}

  /* This is the title for Latest News */
  .front .layout__region--second h2 {
    margin-top: 0px;
    padding-top: 0px;
    margin-bottom: 0;
    padding-bottom: 1rem;
  }
    .front .layout__region--second h2,
    .front .layout__region--second h2 a {
    font-size: 1.3rem;
    margin-left: 0rem;
    }

  .front .layout__region--second .view-content {
    display: flex;
    flex-flow: column;
  }
  .front .layout__region--second .views-field-title {
    border-top: 0;
  }
  .front .layout__region--second .views-field-title a {
    font-size: 1.3rem;
    line-height: 1.5rem;
  }
  .front .layout__region--second .brick  {
    grid-column: 2;
    grid-row: 3;
  }
  .front .layout__region--second .views-field-field-byline {
    padding-bottom: 1rem;
    margin-top: 0;
  }
  .front .layout__region--second .views-row {
    display: flex;
    flex-flow: column;
    margin-bottom: 1rem;
    padding-bottom: 0;
    border-bottom: 2px solid #ddd;
  }

  /* This removes the border of the bottom top story */
  .front .layout__region--second .view-content .views-row:last-child {
    border-bottom: 0;
    padding-bottom: 0;
    margin-bottom: 0;
  }
  .front .layout__region--second .more-link {
    padding-top: 2rem;
  }

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

  .front .editors-choice {
    display: flex;
    flex-flow: row;
  }
  .front .editors-choice h3 {
    padding-bottom: .5rem;
  }
  .front .block-views-blockhomepage-top-3-stories-block-3 .byline-wrapper {
    margin-top: 0;
  }
  .front .editors-choice .view-content {
    display: flex;
    flex-flow: row;
  }
  .front .editors-choice .view-content .views-row {
    border-right: 2px solid #ddd;
    margin-bottom: 1rem;
    padding-top: 0;
    padding-right: 1rem;
    margin-right: 1rem;
    position: relative;
    border-bottom: 0;
  }
  .front .editors-choice .attachment-after {
    display: flex;
    flex-flow: row;
  }
  .front .editors-choice .attachment-after .editors-choice-list .view-content {
    display: flex;
    flex-flow: column;
  }
  .front .editors-choice .attachment-after .editors-choice-list .view-content .views-row {
    border-top: 2px solid #ddd;
    padding-top: .7rem;
    border-bottom: 0;
    border-right: 0;
  }
  .front .editors-choice .attachment-after .editors-choice-last .views-row {
    border-left: 2px solid #ddd;
    margin-bottom: 1rem;
    padding-left: 1rem;
    margin-left: 1rem;
    padding-right: 0;
    margin-right: 0;
    border-right: 0;
  }
  .front .editors-choice .more-link {
    text-align: right;
  }

  .front .block-views-blockhomepage-top-3-stories-block-3 {
    border-bottom: 2px solid #ddd;
    padding-bottom: 2rem;
    margin-bottom: 1.5rem;
  }


  /************************************************************************************************
   STORIES READERS LIKE - DESKTOP ***************************************************************
  *************************************************************************************************/
  /* This is the main container, including the title (H2) */
  .front .block-views-blockpopular-stories-block-1 {
    border-top: 2px solid #ddd;
    padding-top: 0;
    margin-top: 2rem;
    margin-bottom: 2rem;
  }
  /* This removes the line separator above the title from the mobile version for DESKTOP  */
  .front .block-views-blockpopular-stories-block-1 h2 {
    border-top: 0;
  }
  /* This is the main container, without the title (H2) */
  .front .stories-readers-like {
  /*    border: 1px solid coral;*/
    display: flex;
    flex-flow: row;
  }

  .front .stories-readers-like .views-row .overlay-brick a {
    display: flex;
    padding-top: .3rem 0;
    top: inherit;
    font-size: inherit;
    position: absolute;
    bottom: 5px;
    left: 5px;
  }
    .front .stories-readers-like .views-row .views-field-field-slug {
    display: inherit;
    }

  /* This styles the counter on DESKTOP */
  .front .block-views-blockpopular-stories-block-1 .stories-readers-like .views-field-counter {
    font-size: 1.4rem;
    letter-spacing: .1rem;
    padding-top: 0;
    padding-bottom: .5rem;
    margin-top: .5rem;
    text-align: left;
    border: 0;
  }
  .front .stories-readers-like .views-row:first-child img {
    display: block;
  }
  /* This styles the article titles on DESKTOP */
  .front .stories-readers-like .views-row h3 a {
    font-size: 1.3rem;
    line-height: 1.5rem;
  }

  /* This is the wrapper of the first three stories */
  .front .block-views-blockpopular-stories-block-1 .stories-readers-like .view-content {
    display: flex;
    flex-flow: row;
    flex: 0 1 100%;
    }
  /* This is each wrapper item of the first three stories */
    .front .block-views-blockpopular-stories-block-1 .stories-readers-like .view-content .views-row {
    margin-bottom: 1rem;
    padding-right: 1rem;
    margin-right: 1rem;
    padding-top: 0;
    border-right: 2px solid #ddd;
    border-bottom: 0;
    display: flex;
    flex-flow: column;
    flex: 1 0 30%;
  }

  /* This makes a flex (instead of grid) inside the .views-row of the first story on the DESKTOP */
  .front .stories-readers-like .view-content:nth-child(2) .views-row:first-child {
    display: flex;
    flex-flow: column;
  }

  /* 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;
    bottom: 13px;
    left: 5px;
    font-size: .8rem;
    padding: .5rem .7rem;
    bottom: 5px;
    left: 5px;
    top: inherit;
  }

  /* This makes appear the teasers on the DESKTOP, hidden on the mobile */
  .front .block-views-blockpopular-stories-block-1 .views-field-field-article-teaser {
    display: contents;
  }
  /* This makes appear on the DESKTOP version the images hidden on the mobile version */
  .front .block-views-blockpopular-stories-block-1 .image-style-homepage-features-medium {
    display: block;
  }
  /* This removes the padding-top from the mobile on the main story for DESKTOP */
  .front .block-views-blockpopular-stories-block-1 .views-row:first-child .image-style-homepage-features-medium {
    padding-top: 0rem;
  }

  /* This displays the image on the desktop's first three stories, hidden on mobile */
  .front .block-views-blockpopular-stories-block-1 .views-row:nth-child(2) .image-style-homepage-features-medium,
  .front .block-views-blockpopular-stories-block-1 .views-row:nth-child(3) .image-style-homepage-features-medium {
  display: block;
  }
  /* This displays the byline on the desktop, hidden on the mobile */
  .front .block-views-blockpopular-stories-block-1 .stories-readers-like .views-field-field-byline {
    display: flex;
    flex-flow: row;
    padding-top: 0;
    margin-top: 0;
  }

    /************** Stories Readers Like "attachment" on DESKTOP *****/

  /* This is the container for the last 3 stories*/
    .front .stories-readers-like .attachment {
        display: flex;
        flex: 0 35%;
        flex-wrap: wrap;
    }
    .front .stories-readers-like .attachment .view-content {
  /*        background: azure;*/
    display: flex;
    flex-flow: column;
    border-right: 0;
    padding-left: 1rem;
    margin-right: 0;
    flex: 1 0 auto;
    }
  /* This is the .views-row for last 3 stories*/
  .front .stories-readers-like .attachment .views-row {
    display: flex;
    flex-flow: column;
    border-bottom: 2px solid #ddd !important;
    border-right: 0 !important;
    padding-bottom: 1.5rem;
    padding-top: 0;
    margin-bottom: 0;
    margin-right: 0;
  }
  /* This makes the article titles smaller for last three stories on DESKTOP */
  .front .stories-readers-like .attachment h3 a {
    font-size: 1.1rem;
    line-height: 1.3rem;
  }
  /* This styles the counter on the last three stories on DESKTOP */
  .front .block-views-blockpopular-stories-block-1 .stories-readers-like .attachment .views-field-counter {
    padding-top: .6rem;
    padding-bottom: 0;
    margin-top: 0;
  }
  .front .block-views-blockpopular-stories-block-1 .view-popular-stories.view-display-id-attachment_1 .views-row {
    padding-bottom: 1rem;
    margin: 0;
  }
  .front .stories-readers-like .more-link {
    margin-left: 1rem;
    margin-top: 2rem;
  }

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

  .front .block-views-blockopinion-channel-block-1 .contextual-region {
    display: flex;
    justify-content: center;
  }
  .front .view-opinion-channel.view-display-id-block_1 {
    max-width: 1270px;
    padding: 2rem 0rem 3rem 0rem;
    display: flex;
    flex-flow: row;
  }
  .front .view-opinion-channel.view-display-id-block_1 .view-content {
    max-width: 315px;
  }
  .front .view-opinion-channel .attachment {
    display: flex;
    flex-flow: row;
  }
  .front .block-views-blockopinion-channel-block-1 h2 {
    padding-top: 3rem;
  }
    .front .block-views-blockopinion-channel-block-1 h2,
    .front .block-views-blockopinion-channel-block-1 h2 a {
    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;
  }
  .front .block-views-blockopinion-channel-block-1 .view-opinion-channel.view-display-id-block_1 .views-row {
    padding: 0 1rem;
  }
  .front .view-opinion-channel .attachment .views-element-container {
    border-left: 0.1rem solid #ddd;
    padding-bottom: 2rem;
  }
  .front .view-opinion-channel.view-id-opinion_channel.view-display-id-block_1 .views-row:last-of-type::after {
    content: "";
    border-top: 0.14rem solid #F2F2F2;
    width: 82px;
  }
  .front .view-opinion-channel.view-id-opinion_channel.view-display-id-block_1 .views-row::after {
    margin: 1rem 0 2.5rem 0;
  }
  .front .view-opinion-channel.view-id-opinion_channel.view-display-id-block_1 .views-row:first-of-type {
    padding-top: 0;
  }



/*****************************************************************************************************
*** IN FOCUS - DESKTOP ******************************************************************************************************/

/* Reappear items hidden in mobile */
.front .in-focus .byline-wrapper img,
.front .in-focus .views-field-field-article-teaser,
.front .in-focus .more-link {
    display: block;
}

    .front .in-focus .view-content {
        margin-left: 10rem;
    }


.front .in-focus .views-field-field-lead-media-image img{
    position: absolute;
    object-fit: cover;
    width: 100%;
    z-index: 0;
    object-position: 0rem;
    z-index: 0;
    height: -webkit-fill-available;
    padding-bottom: 0;
    max-width: 90% !important;
}
.front .block-views-blockfocus-block-for-front-page-block-1 .attachment .views-row {
  margin-left: -1rem;
}
.front .in-focus .attachment {
    display: flex;
    grid-template-columns: 1250px;
    background: radial-gradient(circle 51rem at 59%, transparent 2%, transparent 9%, black 55%);
    padding-bottom: 9rem;
    padding-left: 8rem;
}
.front .in-focus h2 {
    font-size: 1.3rem;
    width: 9rem;
    line-height: 1.5rem;
}
.front .in-focus h2::before {
  display: inline-block;
  content: "";
  border-top: 1px solid #00A3D9;
  width: 3.3rem;
  margin-right: .7rem;
  transform: translateY(-0.5rem);
 margin-left: -11rem;
}
.front .in-focus .views-field.views-field-title {
    padding-bottom: 0;
    padding-top: 1rem;
    width: 70%;
    margin-top: 0rem;
    padding-left: 2rem;
}
.front .in-focus .attachment .in-focus-title  {
    margin-left: 3rem;
}
.front .in-focus h3 {
    padding-bottom: 0;
    margin-left: 2rem;
    margin-top: -1.5rem;
    width: 60%;
}
    .front .in-focus h3 a {
        font-size: 2.3rem;
        line-height: 2.6rem;
        font-weight: 800;
    }
    .front .in-focus .views-field-field-article-teaser {
        display: block;
        font-size: 1.2rem !important;
        line-height: 1.6rem !important;
        font-weight: 100;
        padding-top: 0;
        padding-bottom: 0;
    }
    .front .in-focus .byline,
    .front .in-focus .views-field-field-byline {
        padding-bottom: 0;
        display: block;
    }
    .front .in-focus .avatar {
        line-height: 1rem;
        margin-left: 2rem;
    }
    .front .in-focus .avatar img {
        margin: 0;
        padding-top: 0;
        padding-bottom: 1rem;
    }
    .in-focus .more-link a {
        font-weight: 200;
        border-bottom: 1px solid white;
        color: white;
    }
    .front .in-focus h3,
    .front .in-focus .byline-wrapper,
    .front .in-focus .views-field-field-article-teaser p {
        margin-left: 2rem;
    }

    .front .block-views-blockfocus-block-for-front-page-block-1 .attachment .views-field-field-article-teaser p {
        margin-left: 2rem;
    }


} /* <------ @media screen and (min-width: 900px) */


.front .in-focus h3,
.front .in-focus .byline,
.front .in-focus .views-field-field-article-teaser p {
        margin-left: 0;
}
.front .in-focus h2::before {
    margin-left: -11rem;
}
.front .in-focus .views-field.views-field-title {
    width: 80%;
    margin-left: 0;
}