.sp-module.ondemand  { ;}


.pipage .media {display:block;}


.pipage ul, .pipage ul li  { margin:0 0 0 0; padding:0 0 0 0; }

.pipage .sermon-index .media .media-top .tabset.primary-tabs .tab { width: auto; }
.pipage .sermon-index .media .media-top .tabset.primary-tabs .tab span { width: auto; }

.pipage .piplayer { padding:0; }
.pipage .piplayer .piplayer-header { padding-top: 50px; padding-right: 50px; padding-left: 20px; }

#piaudiocontainer .video-js { background:none; }

/* for the watch live, fix some videojs problems with the play button */
/* #tabernacleplayerdiv button { font-size: 10px; border: none; padding: 0; margin:0; color: #ffffff; }  */
 #tabernacleplayerdiv button.vjs-big-play-button { font-size: 80px;   } 
#tabernacleplayerdiv #tabernacleliveplayer {width:100%;}

/* for the on demand version of the liveplayer */


/* for the front page boxes */

div.servicebox {  padding:0; }

div.servicebox:hover { opacity:0.9; }
div.servicebox, div.servicebox:hover {  background-size: auto 120%; background-repeat:no-repeat; background-position: center center; min-height:200px; position:relative; }
div.servicebox img { padding:0; margin:0 ;width:100%; }


/* for the front page precachit on demand boxes */
div.servicebox div.studyname   {  margin-top: 6rem; padding-left: 1rem; padding-right:1rem;     }
div.servicebox div.studyname a {  font-size:200%;      }
div.ondemand a.pilink { display:block; padding-top: 20px;    }
div.ondemand img.messageimage {  width: 100%; border: none; margin:0; padding:0     }
div.ondemand ul { padding-left: 0px; }


/* simple portfolio bits */
div.sp-simpleportfolio-btns a.btn-zoom::after { content:none; }
.portfolio-wrapper #sp-portfolio .sp-module-content .sp-simpleportfolio .sp-simpleportfolio-item .sp-simpleportfolio-overlay-wrapper .sp-simpleportfolio-overlay .sp-simpleportfolio-btns a.btn-zoom { display:none;    }

/* for the inside preachit pages */
.pipage .filter-series .series-group { width:30%;    }


/* for darkening images */
.darken-right::before {
  content:"";
  display:block;
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  right:0;
  background:linear-gradient(to right, rgba(0,0,0,0), rgba(0,0,0,0.5));;
  width:100%;
  height:100%;
  z-index:3000;
}
.darken-left::before {
  content:"";
  display:block;
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  right:0;
  background:linear-gradient(to right, rgba(0,0,0,0.5), rgba(0,0,0,0));;
  width:100%;
  height:100%;
  z-index:3000;
}


.ww-imageblock {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    min-height: 300px;
    display:flex;
    position: relative;
}



/* used in pages like the childrens ministries */
.wwimagebox {
     position:relative;
     background-color:#000;
}

.wwimagebox a {
     display:block;
}
.wwimagebox div {
       position:absolute;
       top:0;
       left:40%;
       right:0;
       bottom:0;
       padding-top:15%; 
       padding-right:2%;
       padding-left:10%;
       
       /* background-image: linear-gradient(to right, rgba(0,0,0,0),rgba(0,0,0,0.5), rgba(0,0,0,0.5),rgba(0,0,0,0.5),rgba(0,0,0,0.5)); */


}

.wwimagebox div h3 {
     /* transform: translate(-50%,-50%); */
     color:#ffffff;
     text-align:center;
     
}

.wwimagebox div p {
     color:#ffffff;
     text-align:center;
}

@media screen and (max-width: 768px) {
      .wwimagebox div h3 {
           font-size:1.2em ;

}
      .wwimagebox  div p {
          display:none;
}
}

@media screen and (min-width:768px) {
      .wwimagebox div h3 {
          font-size: 2em; }

      .wwimagebox div p {
         font-size:1.5em;
      }

}


/* Change overlow to avoid scrollbars on some pages namely ministries/serve */
.body-innerwrapper {
  overflow-x: inherit;
}  


/* styling for cookie stuff */
div#sp-cookie-notice h3 {
     display:none;
}

div#sp-cookie-notice p {
    font-size: 0.8em;
}

div#sp-cookie-notice button {
   font-size: 0.8em;
   padding:0;
}


/* increase the height of all the pagetop pictures */

   .sp-page-title {
        padding: 100px 0 100px; 
     }


@media screen and (min-width:768px) {
   .sp-page-title {
         padding: 200px 0 200px; }
}


/* changes to the top fixed header to make it deeper */
 #sp-header {
     height:90px;
} 



/* changes to preachit text sizes */
.sermon-listing-info h4 { font-size: 1.2em;    }
span.sermon-listing-detail { padding-left: 1em; display: block;}
.one-whitewell-sermon {  border-bottom: 1px solid #cccccc; margin-bottom: 1em; }


/* for lower cookie notice */
div.cadre_inner_texte_alert_cookies 
{
     margin:0; padding:0;
     font-size: 75%;
}

div.cadre_inner_texte_alert_cookies p
{
     margin:0; padding:0;
}

.container.fastlinks .card {
   min-height: 20rem;
    transition: background .25s ease-in-out, opacity 0.25s ease-in-out;
}

.container.fastlinks .card:hover {opacity:0.9; 
                                   background-color:#eeeeee; }



/* make top menu non-sticky */
#sp-header.header-sticky {
  position: static;
  z-index: 9999;
}



/* some items for the shepherds academy pages */

ol.tsa {list-style: none;counter-reset:li}

ol.tsa li::before { content: counter(li); color:#555555; font-weight: 400;
                     display: inline-block; width: 2em; margin-left: -2em}

ol.tsa li {counter-increment: li;
           font-weight: 400;}

ol.tsa li p {font-weight: 100;}

div.tsa-nav { text-align: center;}

div.tsa-nav p a { font-size:100%; color:#e1a02d; font-weight:800; }

body.tsa #sp-header, body.tsa #sp-footer, body.tsa #sp-bottom { background-color: #e1a02d; }



/* for recolouring the front page */

/* #sp-header,#sp-footer,#sp-bottom,#sp-skill { background-color: #2b579a } */
/* #sp-header,#sp-footer,#sp-bottom { background-color: #333333 !important; } */


/* extra for pagination */
.icon-angle-left::before {   content:"\00AB";                      }
.icon-angle-double-left::before {   content:"Start";                      }
.icon-angle-right::before {   content:"\00BB";                      }
.icon-angle-double-right::before {   content:"End";                      }


/* for videos */
.video-16x9 {
    aspect-ratio:16 / 9;
    width: 100%;
}