/*

  Custom CSS

*/

/*
<ul class="social-links">
  <li class="sl--twitter"><a href="https://twitter.com/surgeonxcomic" target="_blank" title="Follow @surgeonxcomic on Twitter"></a></li>
  <li class="sl--facebook"><a href="https://www.facebook.com/surgeonxcomic" target="_blank" title="Add surgeonxcomic on Facebook"></a></li>
  <li class="sl--instagram"><a href="https://www.instagram.com/surgeonxcomic" target="_blank" title="Follow @surgeonxcomic in Instagram"></a></li>
  <li class="sl--pinterest"><a href="https://uk.pinterest.com/surgeonxcomic" target="_blank" title="Follow surgeonxcomic on Pinterest"></a></li>
</ul>
*/

.social-links{
  display: block;
  margin: 0 0 0 -20px;
  padding: 0;
  text-align: right;
}

  @media handheld, only screen and (max-width: 767px){
    .social-links{
      text-align: center;
    }
  }

  .social-links li{
    display: inline-block;
    margin: 0;
  }

  .social-links li a{
    display: inline-block;
    height:76px;
    margin: 0;
  }


    .sl--facebook a{
      width:55px;
      background-image: url(/wp-content/uploads/2016/08/facebook_icon-1.png);
    }

   .sl--twitter a{
      width:70px;
      background-image: url(/wp-content/uploads/2016/08/twitter_icon-1.png);
    }


    .sl--instagram a{
      width:70px;
      background-image: url(/wp-content/uploads/2016/08/instagram_icon-1.png);
    }

    .sl--pinterest a{
      width:55px;
      background-image: url(/wp-content/uploads/2016/08/pinterest_icon-1.png);
    }


/* new intro splash image on homepage styles */
body.home .master-holder .mk-page-section .vc_row-fluid { position: static; }


body.home .hero-bottom-bar {
  position: absolute; width: 100%; padding:0; bottom:-500px; height: 243px; background-repeat:repeat-x;
  background-image:url(/wp-content/uploads/2016/09/red_bar.png);
}
body.home .hero-main {
  height:800px;
  width:100%;
  top:-380px;
  position:absolute;
  background-image:url(/wp-content/uploads/2016/09/SurgeonX_hero_desktop_v2.png);
  background-repeat:no-repeat;
  background-position:center;
  background-size: 1200px 800px;
}

@media handheld, only screen and (max-width: 1130px){
  body.home .hero-main {
    background-size: 100% auto;
  }
}

@media handheld, only screen and (max-width: 780px){
  body.home .hero-main {
    background-image:url(/wp-content/uploads/2016/09/SurgeonX_hero_desktop_v2.png);
  }
}

body.home .hero-text {
  top:325px;
  /* left:50%; */
  position:absolute;
  color:#ffffff;
  width:1100px;
  max-width: 96%;
  font-size:12px;
  z-index:10000;
  /* margin: auto; */
  /*margin-left:-305px; */
  line-height:15px;
  left: 0; right: 0;
  margin-left: auto; margin-right: auto;
}

body.home .hero-text p {
  font-size: 14px;
  margin-bottom: 12px;
  font-weight: bold;
  line-height: 1.46em;
}

@media handheld, only screen and (max-width: 850px){
  body.home .hero-text p {
    font-size: 12px;
  }
}

@media handheld, only screen and (max-width: 770px){
  body.home .hero-text {
    top:75px;
  }
}

@media handheld, only screen and (max-width: 455px){
  body.home .hero-text {
    top:45px;
  }
}

body.home .mk-blog-meta,
body.home .blog-grid-footer {background-color: black;}

/* Same height video as image thumbnail on blog posts */
.mk-video-container{
  padding-bottom: 66.75%;
}

/* hide empty login bar */
.mk-header-toolbar{
  display: none;
}

header.header-style-1 .mk-header-padding-wrapper,
header.header-style-2 .mk-header-padding-wrapper,
header.header-style-3 .mk-header-padding-wrapper{
  padding-top: 90px;
}

header.sticky-style-fixed.header-style-1.a-sticky .mk-header-holder,
header.sticky-style-fixed.header-style-3.a-sticky .mk-header-holder{
  top: 0;
}

/* Fix for share icons loading behind blog featured image link */
.mk-blog-modern-item .featured-image a,
.mk-blog-classic-item .featured-image a{
  z-index: 1;
}

@media handheld, only screen and (max-width: 1140px){

  /* fix gap between red image and side of browsers */
  #page-section-2 .mk-padding-wrapper {
      padding-left: 0;
      padding-right: 0;
  }

  /* fix hero text to stop overflowing */
  body.home .hero-text.mk-text-block p{
    width: auto;
    left: 20px; right: 20px;
    margin-left: 0;
  }

}

@media handheld, only screen and (max-width: 675px){

  /* Hero image on mobile */
  body.home .hero-main{
    background-size: 140% auto;
  }

}

@media handheld, only screen and (max-width: 540px){

  body.home .hero-text.mk-text-block p{
    top: 100px;
  }

}

@media handheld, only screen and (max-width: 440px){

  body.home .hero-text.mk-text-block p{
    top: 70px;
  }

}

/* make footer container align with content */
#sub-footer .mk-grid{
  max-width: 1070px;
}

/* help show contact bubble on ipads */
.bottom-corner-btns #mk-quick-contact{max-height: 510px;}

/* smaller mobile menu on tablet */
.mk-header-holder .mk-responsive-wrap{
  width: 50%;
  right: 0;
}

@media handheld, only screen and (max-width: 560px){

  .mk-header-holder .mk-responsive-wrap{
    width: 100%;
  }

}

/* keep showing contact/scroll up tabs on mobile */
@media handheld, only screen and (max-width: 768px){

  .mk-quick-contact-wrapper .mk-quick-contact-link,
  a.mk-go-top {
    display: block;
  }

}


/* Footer comic icons */

/*
<ul class="comic-icons">
<li><img src="http://placehold.it/50x50"></li>
<li><img src="http://placehold.it/50x50"></li>
<li><img src="http://placehold.it/50x50"></li>
</ul>
*/

.comic-icons{
  display: block;
  text-align: left;
}

@media handheld, only screen and (max-width: 767px){
  .comic-icons{
    text-align: center;
  }
}

.comic-icons li{
  display: inline-block;
  /*margin: 0 10px 0 0;*/
}


/* New Hero */
.main-hero{}

  .main-hero .wpb_single_image,
  .main-hero .mk-text-block{
    display: block;
    width: 50%;
    float: left;
    margin: 0;
  }

  @media handheld, only screen and (max-width: 767px){
    .main-hero .wpb_single_image,
    .main-hero .mk-text-block{
      width: 100%;
    }
  }

  .main-hero .mk-text-block{
    padding-top: 100px;
    padding-left: 50px;
    font-weight: bold;
  }

  @media handheld, only screen and (max-width: 767px){
    .main-hero .mk-text-block{
      padding-top: 50px;
      padding-bottom: 50px;
      padding-left:0;
    }
  }

/* hide admin arrow on mobile */
@media handheld, only screen and (max-width: 780px){
  .mk-toolbar-resposnive-icon {
    display: none;
  }
}


/* extra space above titles/buttons on mobile, on bio page */
div.biog-title{
  margin-top: 20px;
  margin-bottom: 15px;
}

@media handheld, only screen and (max-width: 780px){
  div.biog-title{
    margin-top: 65px;
    margin-bottom: 10px;
  }
}

/* New sub-hero block */

.hero-text-bar{
  /*background-image:url(/wp-content/uploads/2016/08/red_bar.png);*/
  background-image:url(/wp-content/uploads/2016/09/red_bar.png);
  /*background-color: #be1e2d;*/
  background-position: bottom left;
  background-repeat: repeat-x;
  padding-bottom: 15px;
  padding-top: 0;
}

@media handheld, only screen and (max-width: 977px){
  .hero-text-bar{
    position: relative;
    background-image: none;
  }
  /*.hero-text-bar .mk-text-block{
    position: relative;
  }
  .hero-text-bar .mk-text-block:after{
    position: absolute;
    top: -15px;
    left: 0; right: 0;
    height: 40px;
    content: 'red bar';
    text-indent: -999px; overflow: hidden;
    background: top center repeat-x url(/wp-content/uploads/2016/09/red_bar.png);
  }*/
}

  .hero-text-bar > div{
    display: block;
    margin: 0 auto;
    width: 1100px !important;
    max-width: 90%;
  }

  @media handheld, only screen and (max-width: 1140px){
    body.home .mk-padding-wrapper {
      padding-left: 0;
      padding-right: 0;
    }
  }

.hero-text-bar .vc_figure{
  margin-top: -50px !important;
  margin-bottom: -105px !important;
}

@media handheld, only screen and (max-width: 1090px){
  .hero-text-bar .vc_figure{margin-bottom: -107px !important;}
}

@media handheld, only screen and (max-width: 977px){

  .hero-text-bar .vc_figure{
    margin-bottom: -73px !important;
  }

  .hero-text-bar .mk-text-block{
    /*margin-left: -20px;
    margin-right: -20px;*/
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 40px;
    padding-bottom: 40px;
    background: bottom repeat-x url(/wp-content/uploads/2016/09/red_bar.png) #6a0d16;
  }

  body.home .vc_column_container>.vc_column-inner{
    padding-left: 0;
    padding-right: 0;
    max-width: 100%;
  }

}

@media handheld, only screen and (max-width: 600px){

  .hero-text-bar p{
    font-size: 13px;
  }

}

.mk-main-wrapper-holder .mk-blog-modern-item .mk-blog-meta-wrapper a,
.mk-main-wrapper-holder .mk-blog-classic-item .mk-blog-meta-wrapper a{
  color: #bf1e2e;
}

/* fix for scrollbar on mobile menu */
.mk-responsive-wrap.mk-responsive-wrap{
  overflow-y: visible;
}

body #mk-page-introduce.intro-left{
  display: none;
}

.hide{
  display: none !important;
}

.wowbagger {
  width: 152px;
  height: 101px;
}

.image-logo {
  width: 64px;
  height: 80px;
}

.welcome-logo {
  width: 97px;
  height: 101px;
}

.comic-icons li.image-logo,
.comic-icons li.wowbagger{
  margin-left: 5px;
}

@media handheld, only screen and (max-width: 455px){
  .comic-icons li{
    margin-left: -10px !important;
    margin-right: -10px !important;
  }
}

/*
<ul class="comic-icons">
<li class="wowbagger"><img src="http://surgeonx-wp.build02.cms.jellyfish.net/wp-content/uploads/2016/09/wowbagger-logo-retina.png"></li>
<li class="image-logo"><img src="http://surgeonx-wp.build02.cms.jellyfish.net/wp-content/uploads/2016/09/image-logo-retina.png"></li>
<li class="welcome-logo"><img src="http://surgeonx-wp.build02.cms.jellyfish.net/wp-content/uploads/2016/09/welcome-logo-retina.png"></li>
</ul>
*/


.mk-testimonial.avantgarde-style span.mk-testimonial-author{
  margin-top: 0;
  font-size: 24px;
  line-height: 30px;
  color: #ffffff !important;
}

.mk-testimonial.avantgarde-style span.mk-testimonial-company{
  font-size: 24px;
  line-height: 30px;
  color: #444444 !important;
}

.mk-pagination .current-page, .mk-pagination .page-number{
  background: #bf1e2e;
  color: #fff;
}



/* character arrows */

@media handheld, only screen and (min-width: 1214px){

.character-pagination--left,
.character-pagination--right{
    position: fixed !important;
    top: 50%;
    width: auto !important;
    height: auto;
    padding: 0 !important;
}

  .character-pagination--left{left: 5px;}
  .character-pagination--right{right: 5px;}

  .character-pagination--left .vc_icon_element,
  .character-pagination--right .vc_icon_element{
    margin-bottom: 0px;
  }

}

@media handheld, only screen and (max-width: 1215px){

.character-pagination--left,
.character-pagination--right{
  width: 50% !important;
}

.character-pagination--left{float: left;}
.character-pagination--right{float: right;}

}


/*
  Recovery room
  885 - build ID
*/
.post-type-archive-recoveryroom #theme-page{
    background: url('/wp-content/uploads/2016/09/RecoveryRoom_bg_full-1.jpg') top center no-repeat #000;
    min-height: 1070px;
}

body {
    background-color: #000 !important;
}


/*
  The Resurgence
  1085 - Live ID
*/

.page-id-1085 #theme-page{
    background: url('/wp-content/uploads/2016/12/theresurgence.jpeg') center no-repeat #000;
    min-height: 1070px;
}