/* Kings Barber Club design: page styles extracted from gallery.html (inline <style> blocks, original order) */

/* ---- block 1 ---- */
.page-template-gallerypage .navbar .nav-black{
            background-color:#171717 !important;
        }
        .page-template-gallerypage .navbar .nav-fff{
            background-color:#171717 !important;
        }
        .page-template-gallerypage .navbar .nav-fff ul.menu li a{
            color:#fff !important;
        }
        .page-template-gallerypage .navbar .nav-fff ul.menu li ul li a{
            color:#000 !important;
        }
        .page-template-gallerypage  .toggler-icon.mb-3 img{
            filter: invert(1)!important;
        }
        /* banner slider off */
        #banner{
            display:none;
        }
        #banner2{
            display:none;
        }
        /* banner slider off */
        /* gallery page 1 start */
        .main-gallery {
            margin: 0px;
            padding: 0px;
        }
        .galleryOuter {
            padding: 148px 81px 236px 82px;
            position: relative;
        }
        .galleryOuter:after {
            content: "";
            background-image: url('https://kingsbarberclub.co.uk/wp-content/themes/Kings-Barber-Club/images/Black Dots.png');
            /* new add */
            background-position: left;
            background-repeat: repeat;
            background-size: cover;
            width: 72px;
            height: 690px;
            position: absolute;
            left: 82px;
            top: 427px;
        }
        .galleryOuter:before {
            content: "";
            background-image: url('https://kingsbarberclub.co.uk/wp-content/themes/Kings-Barber-Club/images/Black Dots.png');
            /* new add */
            background-position: left;
            background-repeat: repeat;
            background-size: cover;
            width: 72px;
            height: 690px;
            position: absolute;
            right: 81px;
            top: 1017px;
            z-index: 1;
        }
        .galleryImagesOuter:before {
            content: "";
            background-image: url('https://kingsbarberclub.co.uk/wp-content/themes/Kings-Barber-Club/images/Black Dots.png');
            /* new add */
            background-position: left;
            background-repeat: repeat;
            background-size: cover;
            width: 72px;
            height: 690px;
            position: absolute;
            left: 82px;
            bottom: 352px;
            z-index: 1;
        }
        .galleryHeading:after {
            content: "";
            background-image: url("https://kingsbarberclub.co.uk/wp-content/themes/Kings-Barber-Club/images/Black Dots.png");
            background-size: cover;
            /* new add */
            background-position: left;
            background-repeat: no-repeat;
            height: 54px;
            width: 248px;
            margin: 0 auto;
            display: none;
        }
        .galleryHeading {
            color: #101525;
            font-family: "Poppins";
            font-size: 70px;
            font-weight: 900;
            line-height: 70px;
            text-align: center;
            margin: 0 auto;
            margin-bottom: 124px;
            height: 80px;
        }
        .galleryImagesOuter {
            max-width: 1036px;
            max-height: 2323px;
            height: 100%;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
        }
        .g-image {
            width: 100%;
            height: 325px;
            max-width: 32.8%;
            max-height: 325px;
            margin-bottom: 8px;
        }
        .g-image img {
            object-position: center;
            object-fit: cover;
            width: 100%;
            height: 100%;
        }
        /* gallery cta section */
        .galleryCTA {
            margin: 0px;
            margin-top: 24.35px;
            width: 100%;
            height: 738px;
        }
        .galleryCTAright {
            position: relative;
            width: 100%;
            max-width: 720px;
        }
        .galleryCTAright a {
            text-decoration: none;
            width: 246px;
            height: 73px;
            color: #fff;
            border-radius: 0px;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #df1f2d;
            font-family: "Poppins Black";
            font-size: 26px;
            font-weight: 900;
            line-height: 70px;
            text-align: center;
            position: absolute;
            top: 318px;
            left: 0;
            right: 0;
            margin: 0 auto;
        }
        .ctaRightImage {
            width: 100%;
            max-width: 720px;
            height: 738px;
        }
        .ctaRightImage img {
            width: 100%;
            max-width: 100%;
            /* new add */
            height: 100.09%;
            object-fit:cover;
            object-position:center;
        }
        .galleryCTALeft {
            position: relative;
            width: 100%;
            max-width: 720px;
        }
        .galleryCTALeft h3 {
            position: absolute;
            width: 498.18px;
            color: #fff;
            font-family: "Poppins";
            font-size: 70px;
            font-weight: 900;
            text-transform: uppercase;
            line-height: 98px;
            transform: rotate(-90deg);
            top: 172px;
            margin-left: 238px;
            z-index: 2;
        }
        .galleryCTALeft .row {
            margin: 0px;
            position: relative;
            z-index: -2;
        }
        .galleryCTALeft:after {
            content: "";
            background-image: url("https://kingsbarberclub.co.uk/wp-content/themes/Kings-Barber-Club/images/white-dot.png");
            background-position: center;
            background-repeat: repeat;
            background-size: cover;
            height: 677.12px;
            max-width: 680px;
            width: 100%;
            opacity: 0.7;
            position: absolute;
            top: 0;
            left: 0;
            z-index: 1;
            margin: 30.96px 19px 29.92px 21px;
        }
        .freshCutLeft {
          position: relative;
          background-color: #131313;
          width: 100%;
          /* new add */
          height: 739px;
        }
        .freshCutLeftImage:before {
            content:"";
            width: 359px;
            height: 469.36px;
            position: absolute;
            left: 0;
            top: 0;
            z-index:0;
            background-color:#00000066;
        }
        .freshCutLeftImage {
            width: 359px;
            height: 469.36px;
            position: absolute;
            margin: 161.78px auto 0px 145px;
            left: 0;
            top: 0;
            z-index:-1;
            padding: 336.54px 0px 0px 27px;
            box-shadow: 0 18px 40px 0 rgba(19, 19, 19, 0.35);
        }
        .freshCutLeftImage::after {
            content: "";
            width: 459px;
            height: 3.99px;
            background-color: rgb(223, 31, 45);
            position: absolute;
            bottom: -2px;
            left: -81px;
        }
        .freshCutLeftImage h4 {
            color: #fff;
            font-family: "Poppins";
            font-size: 30px;
            font-weight: 900;
            line-height: 42px;
            margin: 0px;
            /* new add */
            z-index: 3;
            position: relative;
            padding: 0px;
        }
        .freshCutLeftImage p {
            color: #fff;
            font-family: "Poppins";
            font-size: 14px;
            font-weight: 700;
            line-height: 24px;
            margin: 0px;
            padding: 0px;
            margin-bottom: 23.97px;
            height: 66.91px;
            width: 276px;
            /* new add */
            z-index: 3;
            position: relative;
            text-transform: uppercase;
        }
        .freshCutRight {
            width: 100%;
            /* new add */
            height: 739px;
            position: relative;
            background: #000000;
        }
        .freshCutRight img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center;
            opacity: 0.6;
        }
        /* responsive */
        @media only screen and (max-width: 767px) {
            .page-template-gallerypage .navbar .nav-black{
                background-color:#171717 !important;
            }
            .page-template-gallerypage .navbar .nav-fff{
                background-color:#171717 !important;
            }
            .page-template-gallerypage .navbar .nav-fff ul.menu li a{
                color:#000 !important;
            }
            .page-template-gallerypage .navbar .nav-fff ul.menu li ul li a{
                color:#000 !important;
            }
            .page-template-gallerypage  .toggler-icon.mb-3 img{
                filter: invert(1)!important;
            }
            .galleryOuter {
                padding: 51px 19px 81.21px 18px;
            }
            .galleryImagesOuter:before {
                display: none;
            }
            .galleryOuter:after {
                display: none;
            }
            .galleryOuter:before {
                display: none;
            }
            .galleryHeading {
                font-family: "Poppins";
                color: #131313;
                font-size: 40px;
                font-weight: 900;
                line-height: 40px;
                text-align: center;
                margin: 0 auto;
                margin-bottom: 49px;
                height: 66px;
            }
            .galleryHeading:after {
                display: block;
                background-image: url("https://kingsbarberclub.co.uk/wp-content/themes/Kings-Barber-Club/assets/images/gallery-mob-black-dots.png");
                margin-top: 15.5px;
            }
            .g-image {
                height: 152.15px;
                max-width: 49.5%;
                max-height: 325px;
                margin-bottom: 3px;
            }
            .col-md-4.col-12.g-image.p-0 {
                max-width: 100%;
            }
            .galleryCTA {
                margin: 0px 0px 0px;
                width: 100%;
                height: 838px;
            }
            .galleryCTA .row {
                width: 100%;
                height: 838px;
            }
            .galleryCTALeft {
                max-width: 100%;
                height: 367.58px;
                background-color: #131313;
            }
            .galleryCTALeft::after {
                content: "";
                height: 337.26px;
                max-width: 97%;
                margin: 15.42px 10.85px 14.9px 10.46px;
            }
            .galleryCTAright {
                max-width: 100%;
                height: 470px;
            }
            .galleryCTALeft h1 {
                text-transform: uppercase;
                top: 85px;
                margin-left: 157px;
                z-index: 3;
                height: 69.68px;
                width: 189.46px;
                font-size: 30px;
                line-height: 42px;
            }
            .freshCutLeftImage {
                height: 233.78px;
                width: 174.33px;
                z-index:1;
                margin: 80.58px auto 0px 72.22px;
                padding: 167.62px 0px 0px 13.45px;
            }
            .freshCutLeftImage h4 {
                font-size: 20px;
                font-weight: 900;
                line-height: 28px;
            }
            .freshCutLeftImage p {
                font-size: 10px;
                font-weight: 700;
                line-height: 16px;
                max-width: 191.33px;
                height: 39px;
                margin-bottom: 0px;
            }
            .galleryCTALeft .row {
                height: 100%;
                z-index:0;
            }
            .freshCutLeft {
                height: 100%;
            }
            .freshCutRight {
                height: 100%;
            }
            .ctaRightImage {
                max-width: 100%;
                height: 100%;
            }
            .galleryCTAright a {
                height: 60px;
                width: 135px;
                font-size: 16px;
                font-weight: 900;
                line-height: 22px;
                top: 256.02px;
            }
            .freshCutLeftImage::after {
                content: "";
                width: 228.62px;
                height: 1.99px;
                background-color: rgb(223, 31, 45);
                position: absolute;
                bottom: -2px;
                left: -31px;
            }
        }
        /* gallery page 1 end */

/* ---- block 2 ---- */
html{
      margin:0px !important;
    }
    .caption{
      position: absolute;
      max-width:720px;
      width:100%;
      top: auto;
      left: auto;
      right: auto;
      bottom: 0;
    }
    .carousel-control-prev {    
      z-index: 1;
      height: 14px;
      width: 19.08px;
      margin-top:15px;
      transform: rotate(180deg);
    }
    .carousel-control-next {
      z-index: 1;
      height: 14px;
      width: 19.08px;
    }
    .modal {
      position: fixed;
      top: 0;
      left: 0;
      right:0;
      z-index: 1050;
      display: none;
      width: 100%;
      overflow: scroll !important;
      padding:0px !important;
      max-width: 1440px;
      outline: 0;
      margin: 0 auto;
    }
    .modal-open .modal {
      overflow-x: hidden;
      overflow-y: scroll !important;
    }
    .modal-dialog {
      margin: 0px;
      max-width: 100vw;
      height:900px;
      background:#0009;
    }
    .modal-content{
      max-width: 100vw;
      max-height: 100%;
      height:784px;
      background:#f8f8f8;
    }
    .modal-body{
      position: relative;
      margin-left:104px;
      margin-right:39.57px;
      flex: 0 0 auto;
      padding: 0px;
      height: 663px;
      margin-top: 38px;
    }
    .modal-body .carousel{
      height: 663px;
    }
    .carousel-inner{
      height:100%;
    }
    .carousel-item{
      height:calc(540px + 39px);
      margin-top:84px;
    }
    .close {
      transition: all 200ms;     
    }
    /* gallery open image section start */
    .galleryOPenImage::after {
      content: "";
      background-image: url("https://kingsbarberclub.co.uk/wp-content/themes/Kings-Barber-Club/images/red-net.png");
      background-position:left center;
      background-repeat: repeat-y;
      background-size: cover;
      width: 127px;
      height: 500px;
      position: absolute;
      z-index: 1;
      top: 143px;
      right: 0px;
    }
    #exampleModal2 .galleryOPenImage::after {
      content: "";
      display:none;
    }
    .galleryClose .close:not(:disabled):not(.disabled){
      opacity: 1;
    }
    .galleryClose .close:not(:disabled):not(.disabled):hover{
      filter: invert(27%) sepia(40%) saturate(2878%) hue-rotate(346deg) brightness(104%) contrast(97%);
    }
    .galleryClose {
      width: 42.43px;
      height: 42.43px;
      position: absolute;
      padding:6px;
      z-index:2;
      top: 38px;
      right: 39.57px;
      transform: rotate(45deg);
    }
    .galleryClose a {
      color: #000;
      text-decoration: none;
    }
    .galleryClose a img {
      object-position: center;
      object-fit: cover;
      width: 100%;
      height: 100%;
    }
    .outer {
      max-width: 720px;
      height: 540px;
    }
    .outer img {
      object-fit: cover;
      object-position: center;
      height: 100%;
      width: 100%;
    }
    .slider-left {
      flex: 0 0 55.623%;
      max-width: 55.623%;
      position: relative;
    }
    .heart a img,
    .share a img,
    .zoomIn a img{
      object-fit: contain;
      object-position: center;
      width: 100%;
      height: 100%;
    }
    .heart a,
    .share a,
    .zoomIn a {
      text-decoration: none;
      color: #000;
    }
    .heart {
      position: absolute;
      top: -43px;
      left: 0px;
      width: 24px;
      height: 24px;
    }
    .heart .like {
      display:block;
    }
    .heart .liked {
      display:none;
    }
    .share {
      position: absolute;
      top: -43px;
      left: 51px;
      width: 20.31px;
      height: 22px;
    }
    .socials {
      height: 22px;
      width: 70px;
      position: absolute;
      top: -43px;
      left: 101px;
    }
    .socials .social-link {
      display:flex;
      justify-content:space-between;
      align-items:center;
    }
    .socials .social-link a{
      text-decoration: underline;
      color: #131313;
      font-family: 'Poppins';
      font-size: 16px;
      font-weight: 900;
      line-height: 22px;
    }
    .zoomIn {
      position: absolute;
      top: -43px;
      right: 0px;
      width: 22px;
      height: 22px;
    }
    .slider-right {
      flex: 0 0 29.8%;
      max-width: 29.8%;
      position: relative;
    }
    .sliderRightOuter {
      max-width: 327px;
      margin-left: 75px;
      margin-top: 20px;
    }
    .sliderRightOuter h1{ 
      color: #000;
      font-family: 'Poppins Black';
      font-size: 50px;
      font-weight: 500;
      line-height: 50px;
      margin-bottom: 50px;
    }
    .sliderRightOuter p{ 
      color: #000;
      font-family: 'Poppins';
      font-size: 14px;
      font-weight: 500;
      line-height: 22px;
    }
    .sliderRightOuter a.btn {
      text-decoration: underline;
      color: #df1f2d;
      font-family: "Poppins";
      font-size: 20px;
      font-weight: 900;
      line-height: 20px;
      position: absolute;
      bottom: 20px;
      padding:0px;
      height: 34px;
      display:flex;
      align-items: flex-end;
      padding-left:5.92px;
    }
    .arrow {
      height: 14px;
      width: 19.08px;
    }
    /* responsive */
    @media only screen and (max-width: 767px) {
      html{
        margin:0px !important;
      }
      .galleryClose {
        height: 31.11px;
        width: 31.11px;
        top: 15px;
        left: 26px;
      }
      .modal {
        top: 70px;  
        overflow:scroll;  
      }
      .modal-content {
        height: 856px;
      }
      .modal-body {
        margin-left: 0px;
        margin-right: 0px;
        margin-top: 15px;
      }
      .carousel-item {
        height: calc(605px);
        margin-top: 41px;
      } 
      .caption {
        width: 92%;
        left: 0;
        right: 0;
        margin: 0 auto;
      }
      .slider-left {
        flex: 0 0 100%;
        max-width: 100%;
        height: 270px;
      }
      .outer {
        max-width: 100%;
        height: 270px;
      }
      .slider-right {
        flex: 0 0 100%;
        max-width: 100%;
        height: 398px;
      }
      .sliderRightOuter {
        max-width: 310px;
        margin-left: 33px;
        margin-top: 0px;
        padding-top:53px;
        margin-right: 17px;
      }
      .sliderRightOuter h1 {
        font-size: 35px;
        line-height: 35px;
        padding-bottom: 45px;
        margin-bottom: 0rem;
      }
      .sliderRightOuter p {
        padding-bottom: 27px;
        margin-bottom: 0px;
      }
      p.btn {
        position: inherit;
        bottom: 20px;
        height: 34px;
        padding: 0px;
        display: inline-block;
      }
      .sliderRightOuter a.btn {
        text-decoration: underline;
        color: #df1f2d;
        font-size: 16px;
        font-weight: 900;
        line-height: 50px;
        height: 34px;
        width: 163px;
      }
      .galleryOPenImage::after {
        width: 100%;
        height: 131.33px;
        background-position:top center;
        bottom: 0;
        top: auto;
      }
      .heart {
        position: absolute;
        top: 147%;
        left: 33px;
        width: 24px;
        height: 24px;
      }
      .share {
        position: absolute;
        top: 147%;
        left: 84px;
        width: 20.31px;
        height: 22px;
      }
      .socials{
        position: absolute;
        top: 147%;
        left: 126px;
        height: 22px;
      }
      .zoomIn {
        display: none;
      }
    }
    /* gallery open image section end */
    /*gallery full widt page end */
    /* gallery open image section start */
    #exampleModal2 .modal-content {
      padding-top: 30px;
      padding-bottom: 30px;
      height:900px;
      width: 100%;
      position: relative;
      background-color: #f8f8f8;
    }
    #exampleModal2 .galleryKing {
      margin: 0 auto;
      position: absolute;
      left: 0;
      right: 0;
      width: 45.65px;
      height: 29px;      
    }
    #exampleModal2 .modal-body {
      margin-top:0px;
    }
    #exampleModal2 .modal-body .carousel{
      height:783px;
    }
    #exampleModal2 .modal-body .carousel .carousel-item{
      margin-top:58px;
      height:760px;
      max-width:1240px;
    }
    #exampleModal2 .galleryClose {
      width: 31.11px !important;
      height: 31.11px;
      position: absolute;
      padding:4px;
      top: -45px;
      right: 0px;
      transform: rotate(45deg);
    }
    #exampleModal2 .galleryClose a {
      color: #000;
      text-decoration: none;
    }
    #exampleModal2 .galleryClose a img {
      object-position: center;
      object-fit: cover;
      width: 100%;
      height: 100%;
    }
    #exampleModal2 .outer {
      height:700px;
      max-width: 1240px;
    }
    #exampleModal2 .outer img {
      object-fit: cover;
      object-position: center;
      height: 100%;
      width: 100%;
    }
    #exampleModal2 .zoomOut a img {
      object-fit: cover;
      object-position: center;
      width: 100%;
      height: 100%;
    }
    #exampleModal2 .zoomOut a {
      text-decoration: none;
      color: #000;
    }
    #exampleModal2 .zoomOut {
      position: absolute;
      top: -45.79px;
      left: 0px;
      height: 26.21px;
      width: 27.35px;
    }
    #exampleModal2 .caption {
      position: absolute;
      max-width: 1240px;
      width: 100%;
      top: auto;
      left: auto;
      right: auto;
      bottom: 0;
    }
    /* responsive */
    @media only screen and (max-width: 767px) {
      .galleryClose {
        left: auto;
      }
    }
    @media only screen and (max-width: 540px) {
      .galleryClose {
        left: 20px;
      }
      #carouselExample2 .galleryClose{
        left: auto;
      }
    }
    /* gallery open image section end */