/* Overriding default CSS */
:root {
    --scrolling-video-text-background: #efe2d1DD;
    --scrolling-video-text-color: #050505;
    --scrolling-video-text-font-family: var(--serif);
    --scrolling-video-text-font-size: unset;
    --selection-bg-color: #d1513b;
    --selection-color: #efe2d1;
}


/*** Works on common browsers ***/
::selection{
    background-color: var(--selection-bg-color);
    color: var(--selection-color);
}
/*** Mozilla based browsers ***/
::-moz-selection{
    background-color: var(--selection-bg-color);
    color: var(--selection-color);
}

/***For Other Browsers ***/
::-o-selection{
    background-color: var(--selection-bg-color);
    color: var(--selection-color);
}

::-ms-selection{
    background-color: var(--selection-bg-color);
    color: var(--selection-color);
}

/*** For Webkit ***/
::-webkit-selection{
    background-color: var(--selection-bg-color);
    color: var(--selection-color);
}

pre {
    overflow-x: auto;
    background: #EEE;
    tab-width: 4;
    font-size: 16px;
    padding: var(--page-padding);
}

.intro {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, 0%);
    background: linear-gradient(#efe2d1, #efe2d1BB, #efe2d1AA, #efe2d1AA, #efe2d144, #efe2d100);
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: var(--scrolling-video-text-color);
    width: 100%;
    z-index: 1;
}
.intro .title {
    margin: 0px 5vw;
    font: 70px / 1.5em var(--sans);
    text-align: center;
    margin: 30px auto;
    padding: 20px 0;
    width: 90%;
    color: var(--selection-color);
    background: linear-gradient(to left, #d1513b, #d1513b, #d1513b, #d1513b, #d1513b, #d1513b);
    max-width: 950px;
}

.embed-infographic {
    position: relative;
    margin: 0 auto !important;
}

/* Changing CSS on existing page */
.intro .h1 {
    position: relative;
    display: flex;
    display: -webkit-flex;
    flex-direction: column;
    align-items: center;
    text-transform: none !important;
    font-family: var(--sans) !important;
    line-height: 1.3 !important;
    font-weight: 400 !important;
    text-align: center !important;
    margin: 0 auto;
    margin-top: 0px !important;
    font-weight: 700 !important;
    font-size: 24px !important;
    max-width: 650px !important;
    z-index: 10;
}

section {
    margin: 0 auto !important;
}

.byline, .time {
  color: #050505;
}
.bio {
    font-family: var(--sans) !important;
    text-align: center;
    display: grid;
    gap: 15px;
    margin: 0 auto;
    margin-top: 30px;
    margin-bottom: 5vh;
    max-width: var(--story-width);
    padding: 0 var(--page-padding);
}

.social-network-macro {
    margin: 0 auto;
}

header, #bar_popup, .header + figure, .trinity-player-iframe-wrapper, #mastheadVueContainer, #trending-stories, .upper-nav, .cc-grower, #w_popup, #lightbox_popup {
    display: none !important;
}


.vertical-divider {
    margin: 0;
    width: 1px;
    height: 30px;
    background: #d1513b;
    margin: 0 12px;
    margin-top: 2px;
}
.simple-flag {
    right: 0;
    left: 0;
    position: absolute;
    top: 0;
    z-index: 2;
    text-align: center;
    display: flex;
    display: -webkit-flex;
    flex-direction: row;
    justify-content: center;
    max-width: 600px;
    margin: auto;
    margin-top: 15px;
}
#news-logo {
    height: 28px;
}
.simple-flag  a {
    display: inline-block;
    height: 30px;
}
.filtered-logo {
    opacity: 1;
    height: inherit;
    filter: brightness(0) invert(0%) sepia(41%) saturate(561%) hue-rotate(50deg) brightness(108%) contrast(96%);
}
#charlotte-logo {
    margin-top: 5px;
}

@media only screen and (max-width: 1000px) {
    .intro .title {
      font: 60px/1.5em var(--sans);
    }
}
@media only screen and (max-width: 900px) {
    .intro .title {
      font: 50px/1.5em var(--sans);
    }
}
@media only screen and (max-width: 800px) {
    .intro .title {
      font: 40px/1.5em var(--sans);
    }
}

@media only screen and (max-width: 650px) {
    .intro .h1 {
        margin: 0 20px;
    }
}

@media only screen and (max-width: 600px) {
      .simple-flag {
        max-width: 100%;
        padding: 10px 0;
        margin-top: 7px;
      }
      #news-logo {
        height: 18px;
      }
      .simple-flag a {
        height: 19px;
      }
      .vertical-divider { 
        height: 22px;
        margin: 0 11px;
        margin-top: 5px;
      }
      .bio {
        margin-bottom: 5vh;
      }
}