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

@font-face  {
    font-family: "Futura Book";
    src: url(fonts/FuturaStd-Book.otf);
} */

/* ============
  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;}
.offcanvas-body{z-index: 95000;}

.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;}
.text-muted-edited{color: grey;}
.text-white{color: #ffffff !important;}
.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;}
img.logo-footer{width:65px;}
.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;}
.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;}
.btn-floating, [class*=btn-outline-].btn-floating{padding: 10px 0;}

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

.hero-image, .storycard-image{
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
}

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

#headerAds{z-index:5;}
/* H1{font: 30px "Beiko Heavy SemiRounded", sans-serif;color: #102547;} */
H1{font: 30px "Passion One", sans-serif;color: #102547;font-weight: 900;}
H1.buttonH1{font: 20px "Public Sans",sans-serif;font-weight: 700;color: #FFF;padding:0px;margin:0px;}
/* H2{font: 26px "Beiko Heavy SemiRounded", sans-serif;color: #102547;} */
H2{font: 26px "Passion One", sans-serif;color: #102547;font-weight: 700;}
H3{font: 24px "Public Sans", sans-serif;color: #3c3b89;font-weight: 700;}
H4{font-family: "Public Sans", sans-serif;}
H1 a, H2 a, H5 a{color: #102547;}
.footer-brand{display:inline-block;padding:30px 16px; margin: -220px 0 30px;background-color: #23223f;}
.btn-primary{background-color: #3c3b89 !important;border-color:#3c3b89 !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;
  }




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


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

@media (min-width: 576px) {
    .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;}
}
@media (min-width: 576px) and (max-width: 997.98px) and (orientation: landscape){
  .container {max-width: 90% !important;}
}

@media (min-width: 768px) {

  .stickyFooterAd{display:none;}
  .copyright-text-viewable{padding-bottom:1.5rem;}
  .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;}
  .card H2{font-size: 34px;}
  .card H5{font-size: 20px;}
  H1{font-size:36px;}
  H2{font-size:32px;}
  H3{ font-size: 28px}
}

@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;}
    .ml-lg-4 {margin-left: 40px !important;}

    h1{font-size:46px;}
    H2{font-size:44px;}
    H3{ font-size: 30px}
    .footer-brand{margin-top:-50px!important;margin-left: 20px!important;}
    .ml-lg-4 {margin-left: 40px !important;}
}
@media (min-width: 1150px){
    .container{max-width:1100px;}
}