/* ============
  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%; display: table;}
#main{padding-bottom: 50px;}

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

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;}

.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;}

.partnerImage {
  padding-right: 2em;
  max-height: 20em;
  max-width: 100%;
  height: auto;
}

/* ================
  NEWSLETTER MODAL 
==================*/
#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;}

/* ============
  SKINS
==============*/

.skin-side-back {
  background-repeat: repeat;
  display: table-row;
  height: 100px;
}

.skin-right {
  display: none;
}

.skin-left {
  display: none;
}

img.skin-side-left {
  display: none;
}

img.skin-side-right {
  display: none;
}

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

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

/* ============
  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
=================*/
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: 350px){
  .container, .container-fluid, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
      --mdb-gutter-x: 1.5rem!important;
  }
}

@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;}
  .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;}


}

@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) {
  .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;}
}