/* ============
  FONTS
==============*/  
@font-face  {
    font-family: "Beiko Heavy SemiRounded";
    src: url(fonts/Beiko-Heavy-Semi-Rounded.otf);
    font-weight: bold;
}
@font-face  {
    font-family: "Beiko Heavy";
    src: url(fonts/Beiko-Heavy.otf);
    font-weight: bold;
}
@font-face  {
    font-family: "Futura Book";
    src: url(fonts/FuturaStd-Book.otf);
}
@font-face  {
    font-family: "Futura";
    src: url(fonts/Futura.ttc);
}

/* ============
  GENERAL
==============*/  
body {background-color: #f3f2ef; padding: 0px;font-family: "Public Sans Thin", sans-serif;font-size: 16px;}
#bodycontent{width: 100%; z-index:3;}
#main{padding-bottom: 50px; z-index:3;}
#maincontent{display: table; z-index:3;margin: 0px auto;}

.container, .container-fluid, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
    --mdb-gutter-x: 1.5rem!important;
    z-index:3;
}
.container-fluid {padding: 0px 5rem!important;z-index:3;}

a {color: #3c3b89;}
#story p {font-size: 18px;}
#story p.small{font-size: 14px;}
.text-muted-edited{
  color: grey;
}
.offcanvas-body{z-index: 95000;}

.text-blue{color: #3c3b89;}
.text-gray{color:#cfcdd2;}
.text-white{color: #ffffff;}
.text-invisible{color: #f3f2ef;}
.text-dark{color: #23223f !important;}
a.text-white:hover{color: #cfcdd2!important;}
.bg-dark{background-color: #23223f !important;}
.bg-blue{background-color: #3c3b89 !important;}
.bg-white{background-color: #FFF !important;}
.bg-gray{background-color: #B7B9BC !important;}
.bg-dkgray{background-color: #939598 !important;}
.text-shadow{text-shadow: 1px 1px 2px #000000;}
.border-primary{color: #23223f;}
.hr{background-color: #cfcdd2!important;height: 1px!important;}

.footer-brand{display:inline-block;padding:30px 16px; margin: -220px 0 30px;background-color: #23223f;}

img.logo-footer{width:65px;}
img.logo-tiny{width:50px;height:23px;}
img.partnerLogo{padding-bottom: 1em; display: block; margin-left: auto; margin-right: auto; width: 50%;}
.footer-text{opacity: .8;color:#FFF!important;}
.copyright-text{padding:1.5rem;}
.copyright-text-viewable{padding:1.5rem; padding-bottom:3.5rem;}
.ml-4 {margin-left: 40px !important;}

.clearfix{clear:both;}
.fs-7 {font-size: .7rem!important; line-height: .7rem;}

.bg-dark, .bg-dark>H2, .bg-dark>H3, .bg-dark>H6, .bg-dark p , .bg-dark p.card-author{color: #FFF !important;}

.ratio-16x9 {overflow: hidden;}
.alert-warning{background-color: #faecd1!important;}
.alert-sponsor{background-color: rgb(219, 6, 6);color: #fff;padding: 10px 24px; border-radius: 0!important;}

img.specialReportImage{width:75px;}
.fa-2xl{font-size: 3em;}

.partnerImage {
  padding-right: 2em;
  max-height: 20em;
  max-width: 100%;
  height: auto;
}
.btn-floating, [class*=btn-outline-].btn-floating{padding: 10px 0;}

/* ================
   MODALS 
==================*/
.modal-backdrop{z-index: 50;}
#newsletterSignupModal{z-index: 1021;}
#newsletterSignupModal .modal-content{
  background-repeat: no-repeat;
  background-position: center top;
}

#newsletterSignupModal .modal-body{padding-top: 160px !important;}
#newsletterSignupModal .modal-footer{justify-content: center !important;}


#adBlockWarning{z-index: 1021;}



/* ============
  HEADERS
==============*/  

#headerAds{z-index:5;}

H1 {
  font: 30px "Beiko Heavy SemiRounded", sans-serif;
  color: #102547;
}
H1 a{color: #102547;}

H2{
  font: 26px "Beiko Heavy SemiRounded", sans-serif;
  color: #102547;
}
H2 a{color: #102547;}


H3{
  font: 24px "Public Sans", sans-serif;
  color: #3c3b89;
}
H3.futura{font-family: "Futura Book", sans-serif;}
H3.beiko{font-family: "Beiko Heavy SemiRounded", sans-serif;}

H1.buttonH1{ font: 20px "Public Sans", sans-serif;weight: 700;color: #FFF;padding:0px;margin:0px;}

H4{font-family: "Public Sans", sans-serif;}

H5 a{color: #102547;}

H6{font-family: "Beiko Heavy SemiRounded", sans-serif;}
H6.futura{font-family: "Futura Book", sans-serif;font-weight: 800;}

h5.modal-title{font-size: 1.15rem !important;}

/* ============
  ADS
==============*/  
.ad-content-tall{width:300px;height:250px;margin:0 auto;}
.ad-content, .ad-leaderboard{width:100%;max-width:320px; margin:20px auto;overflow:hidden;text-align: center;}
.ad-leaderboard{height: 50px;}
.ad-content{height: 250px;}
.ad-risingstar{width:100%; max-width:970px; height:auto; margin:20px auto;text-align: center;}
.ad-stickybottom{width:100%;max-width:320px; height:50px;margin: 4px auto;text-align: center;}

.slider-ad {
    top: -255px;  /* the height of the header bar plus the video box height */
    position: fixed;
    background-color: rgba(0, 0, 0, 0.45);
    left: 0;
    width: 100%;
    height: 164px;
    z-index: 1030;
  }
  button#close-ad{
    position: absolute;
    right: -20px;
    top: 0px;
    z-index: 1031;
    box-shadow: none !important;
  }
  #videoAd-container{
    position: relative;
    width: 256px;
    height: 144px;
    margin: 10px auto;
  }


/* ============
  BUTTONS
==============*/  

.btn-primary{background-color: #3c3b89 !important;border-color:#3c3b89 !important;}
.subchannel-btn-group{box-shadow: none !important;}
.btn-clear{background:none !important;}

/* .btn-subchannel {display:none;} */

.btn-subchannel {
  padding:6px 10px;
  line-height: 23px;
  font-size: 14px;
  border-radius: 0 !important; 
  text-transform: uppercase;
  color:#3c3b89;
  box-shadow: none !important;
}
.btn-subchannel.active{ color: #FFFFFF;}
.btn-subchannel:hover{
  box-shadow: 0 2px 15px -3px rgba(0,0,0,0.56), 0 10px 20px -2px rgba(0,0,0,0.1) !important;
}

/* ============
  HOMEPAGE
==============*/  

/* homepage date*/
.home-date{
  font: 14px "Futura", sans-serif;
  color: #1C4C9D;
  font-weight: bold;
  letter-spacing: 2px;
}

.carousel-caption{
  text-align: left;
  left:5%;
  right:5%;
  bottom: .15rem;
  text-shadow: 1px 1px 2px black;
  font-family: "Beiko Heavy SemiRounded", sans-serif; 
  color:white;
}

/* ============
   COOKIE ALERT
==============*/

.cookiealert {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    margin: 0 !important;
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    border-radius: 0;
    transform: translateY(100%);
    transition: all 500ms ease-out;
    color: #ecf0f1;
    background-color:#212327;
}

.cookiealert.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0%);
    transition-delay: 1000ms;
}

.cookiealert a {
    text-decoration: none;
}

.cookiealert .acceptcookies {
    margin-left: 10px;
    vertical-align: baseline;
}

/*==============
STICKY FOOTER AD MOBILE
=================*/
.stickyFooterAd {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  margin: 0 !important;
  z-index: 998;
  height: 64px; /* Set the fixed height of the footer here */
  padding-bottom: 4px;
  background-color: #23223f;
}

/*=================
    STORY CARDS 
=================*/
.card-image{display: block;position: relative;height: 0;padding: 56.25% 0 0 0;overflow: hidden;}
.card-image img {border-radius: 0;}
.card{border-radius: 0;}
.card H2{font-size: 28px;}

.card H5 {
  font: 16px "Public Sans", sans-serif;
  color: #102547;
  font-weight: 700;
}

.card-author {
  font: 14px "Public Sans", sans-serif !important;
  color: #9D9D9D;
  weight: 100;
}
.card-sponsor, .card-sponsor-sm {
  border-width:1px;
  border-style:solid;
  border-color: #9D9D9D;
  background-color: #9D9D9D;
  border-radius: 10px;
  color: white;
  padding: 0em;
  font: 14px 'Public Sans', sans-serif !important;
  width: fit-content;
  padding: 5px;
}
.card-sponsor-sm{
  font: 10px 'Public Sans', sans-serif !important;
  padding: 2px;
  border-radius: 5px;

}

.card.hovershadow:hover{
  box-shadow: 0 2px 15px -3px rgba(0,0,0,0.4), 10px 10px 20px -2px rgba(0,0,0,0.8);
}

.ratio-4x3{overflow:hidden;}


/*=================
  STORY PAGES
=================*/
/* For story text, increase left and right margins on mobile devices */

#storyText {
    margin-left: 10px;
    margin-right: 10px;
}

H3.author{font-size: 16px; font-weight: bold; font-weight: 700;line-height:26px;}
.story-date, .story-readtime {font: 16px "Public Sans", sans-serif;color: #9D9D9D;weight: 200;}
.author{font-size:14px;}

.video-responsive{overflow:hidden; padding-bottom:56.25%; position:relative; height:0;margin: 0px auto;}
.video-responsive iframe{left:0; top:0; height:100%; width:100%; position:absolute;}

.figure{
    display:table;
}
.figure-caption{
    display:table-caption;
    caption-side:bottom;
    margin-top:.5em;
    margin-bottom:2em;
}
#mainImgCaption.figure-caption{font-size: x-small;}

/* FIX FOR SHARE-THIS SOCIAL BUTTONS */
#st-1{z-index:100!important;text-align:center!important; margin-bottom:20px!important;}

/* SUGGESTED STORY TOAST */
.toastWrapper{
  width: 60%;
  padding: 30px 20px;
  position: fixed;
  bottom: 100px;
  right: 0;
  z-index: 98;
  overflow: hidden;
}
#toast{
  width: 100%;
  padding: 20px;
  padding-right: 30px;
  background-color: #ffffff;
  box-shadow: 0 2px 15px -3px rgba(0,0,0,0.4), 10px 10px 20px -2px rgba(0,0,0,0.4);
  border-left: 8px solid #23223f;
  border-radius: 7px;
  transform: translate(600px);
  transition: 1s;
}
#toast button{
  position: fixed;
  top: 10px;
  right: 20px;
  width: 20px;
  height: 20px;
  padding: 6px;
  z-index: 99;
  font-size: 14px;
  line-height: 0;
  color: #FFF;
  cursor: pointer;
}
#toast h5{font-size: 1rem;padding-top:1rem;}
#toast p{font-size: 12px;}

/*=================
    RESPONSIVE 
=================*/


@media (min-width: 576px) {
    /* #videoAd-container{width: 400px; height: 300px;}
    .slider-ad {top: -360px; height: 340px;}
    button#close-ad{right: 10px;top: 2px;} */
    .container{max-width:95%;}
    .ad-content{width:300px; max-width:320px;height:250px;}
    H1{font-size:34px;}
    H2{font-size:30px;}
    H3{ font-size: 24px}
    .card H5{font-size: 18px;}
    .carousel-caption{padding-bottom:0px;font-size:22px;line-height:28px;}
    #st-1{text-align:right!important; margin-bottom:0px!important;}
    #mainImgCaption.figure-caption{font-size:small;}
    .btn-xlarge{font-size:18px;}


}
@media (min-width: 576px) and (max-width: 997.98px) and (orientation: landscape){
  .container {max-width: 90% !important;}
  .toastWrapper{bottom: 30px; width: 75%;}
  #toast h5{padding-top:0px;}
  #toast{padding-right: 40px;}
  #storyText {
    margin-left: 20px;
    margin-right: 20px;
}
}

@media (min-width: 768px) {
  h5.modal-title{font-size: 1.25rem !important;}

  .stickyFooterAd{display:none;}
  .copyright-text-viewable{padding-bottom:1.5rem;}
  .btn-xlarge{font-size:20px;}

  .footer-inner{padding:0px 30px;}
  .footer-right{background-color: #23223f;}
  .ad-leaderboard{width:728px;max-width:728px;height:90px;margin: 40px auto;}
  .home-date{font-size:20px;}
  .container{max-width:992px;}
  .story-date {font-size: 16px;}
  .story-readtime {font-size: 20px;}
  H3.author{font-size: 20px;}
  .tallCard{min-height: 250px;}
  .card H2{font-size: 34px;}
  .card H5{font-size: 20px;}
  H1{font-size:36px;}
  H2{font-size:32px;}
  H3{ font-size: 28px}
  .carousel-caption{font-size:40px;line-height:46px;}
  .toastWrapper{width: 620px;bottom:200px;}
  #toast{padding-right: 40px;}
  #toast h5{font-size: 1.2rem;padding-top:0px;}
  #toast p{font-size: 14px;}  
}

@media all and (min-width: 768px) and (orientation:landscape){
  .stickyFooterAd{display:inline-block;}
}

@media (min-width: 992px) {
    .container, .container-fluid, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
        --mdb-gutter-x: 0rem!important;
    }
    
    .ad-content-tall{height:600px;}
    h1{font-size:46px;}
    H2{font-size:44px;}
    H3{ font-size: 30px}
    .carousel-caption{font-size:64px;line-height:68px;}
    .container{max-width:1100px;}
    .footer-brand{margin-top:-50px!important;margin-left: 20px!important;}
    .btn-subchannel{
        padding:20px 20px;
        font-size: 20px;
        letter-spacing: 2px;
    }
    .alert-sponsor{ border-bottom-left-radius: 6px!important; border-bottom-right-radius: 6px!important;}
    #storyText {
        margin-left: 0px;
        margin-right: 0px;
    }
}