/* slider css */
@-webkit-keyframes fadeOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

.fadeOut {
  -webkit-animation-name: fadeOut;
  animation-name: fadeOut;
}



@-webkit-keyframes slideOutLeft {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  to {
    visibility: hidden;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}

@keyframes slideOutLeft {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  to {
    visibility: hidden;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}

.slideOutLeft {
  -webkit-animation-name: slideOutLeft;
  animation-name: slideOutLeft;
}

.d-table {
  width: 100%;
  height: 100%;
  display: flex; 
  justify-content: stretch; 
  align-items: center;
}
.d-tablecell {
    display: block;
    vertical-align: middle;
    width: 100%;
    flex-basis: 100%;
}
.custom-btn1 {background-color: #FFFFFF;color: #000000;border: 1px solid #FFFFFF;display: inline-block;padding: 12px 30px;text-transform: uppercase;border-radius: 30px;text-decoration: none;}
.custom-btn1:hover {background-color: #FFFFFF;text-decoration: none;color: #000000;}
/*
Hero slider style
==========================*/
.hero-slider {position: relative;} 
 .single-hs-item {height: 100vh;background-size: cover;background-position: center center;position: relative; overflow: hidden;} 
 /* .single-hs-item:before {content: '';position: absolute;width: 100%;height: 100%;left: 0;top: 0;background-color: #000;opacity: .6;} 
 */ .item-bg1 { /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#222244+0,222244+50,c38151+50,c38151+100 */ background: #222244; /* Old browsers */ background: -moz-linear-gradient(left,  #222244 0%, #222244 50%, #c38151 50%, #c38151 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(left,  #222244 0%,#222244 50%,#c38151 50%,#c38151 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to right,  #222244 0%,#222244 50%,#c38151 50%,#c38151 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#222244', endColorstr='#c38151',GradientType=1 ); /* IE6-9 */   } 
 .item-bg2 {     /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#0c7068+0,4ba997+100 */ background: #0c7068; /* Old browsers */ background: -moz-linear-gradient(-45deg,  #0c7068 0%, #4ba997 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(-45deg,  #0c7068 0%,#4ba997 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(135deg,  #0c7068 0%,#4ba997 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0c7068', endColorstr='#4ba997',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */ } 
 .item-bg3 { background-color: #ce986a; } 
 .hero-text {width: 88%; padding: 0 15px;text-align: center;max-width: 1140px;margin-left: auto;margin-right: auto;position: relative; z-index: 9} 
 .hero-text h2 {color: #fff;text-transform: initial;margin: 0;} 
 .hero-text h3 {color: #fff; text-transform: capitalize; margin: 0 0 10px 0;} 
 .hero-text p {color: #fff; margin-left: auto;margin-right: auto;line-height: 1.56;margin-top: 20px;margin-bottom: 35px;} 
  .hero-text .rw {color: #fff; margin-left: auto;margin-right: auto;line-height: 1.56;margin-top: 20px;margin-bottom: 35px;} 
  .hero-text a, .hero-text a:hover{ color: #fff; }
 .hero-slider .owl-item.active h2,  .hero-slider .owl-item.active h3, .hero-slider .owl-item.active .anim-fadeIn {-animation: 1s .3s fadeIn both; animation: 1s .3s fadeIn both;} 
 .hero-slider .owl-item.active p {-webkit-animation: 1s .3s fadeIn both;animation: 1s .3s fadeIn both; } 
 .hero-slider .owl-item.active .slider-btn {-webkit-animation: 1s .3s fadeIn both;animation: 1s .3s fadeIn both;} 
 .owl-carousel .owl-nav button.owl-prev {background-color: rgba(0,0,0,.5);position: absolute;left: 50px;top: 50%; color: #fff;font-size: 30px;margin: -40px 0 0;border-radius: 50%;height: 50px;width: 50px; outline: none !important;} 
 .owl-carousel .owl-nav button.owl-next {background-color: rgba(0,0,0,.5);position: absolute;right: 50px;top: 50%;color: #fff;font-size: 30px;margin: -40px 0 0;border-radius: 50%;height: 50px;width: 50px; outline: none !important;} 
 button.owl-next.disabled, button.owl-prev.disabled {
    display: none;
}
 .owl-theme .owl-nav {margin-top: 0;} 
 .owl-dots {position: absolute;left: 0;right: 0; bottom: 20px;} 
 .owl-theme .owl-dots .owl-dot span {width: 11px;height: 20px;} 
 .owl-theme .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span {background: #ff3547;} 
 .stp>div { padding: 10px 5px; } 
 img {  max-width: 100%; } 
 .stp { display: flex;  max-width: 350px;  margin: auto; } 
 .ps_p{ display: none !important; } 
 .stp .disabled {  pointer-events: none;  opacity: .6;} 
 .stp .disabled:hover { background: transparent !important; }
 .slider_outer_div{ position: relative; } 
 .d-table .container{ max-width: 1200px !important;width:100% !important;} 
 .d-table .row{ margin: 0 auto !important; } 
 .step_nav {  position: absolute;  width: 110px;  z-index: 99;  left: 0;  top: 50%;  transform: translateY(-50%);  cursor: pointer;  align-items: center;     justify-content: center;  height: 70%; } 
 .step_nav.navNext{ left: auto; right: 0; }
 .step_nav { background: transparent !important; } 
 .np_img { position: absolute;  height: 90%; width: 0;  left: 0; transition: .3s;  background-size: cover;  background-position: left center; top: 50%; transform: translateY(-45%); } 
 .step_nav.navNext .np_img{ left: auto;  right: 0; transition: .4s; } 
 .step_nav.navNext .np_hover {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none;
    opacity: 0.5;
}
.step_nav.navNext:hover .np_hover {
    display: block;
}
.step_nav.navNext.disabled:hover .np_hover {
  display: none;
}

.single_sld_bg {
    position: absolute;
    width: 100%;
    height: 100%;
    background-size: cover;
}
.single-hs-item:before, .single_sld_bg:before{ position: absolute; display: block; content: '';  left: 0; width: 100%; height: 100%; top: 0; 
  background: rgb(0,0,0);
  background: -moz-linear-gradient(157deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.5) 33%, rgba(0,0,0,0) 68%, rgba(0,0,0,0) 98%);
  background: -webkit-linear-gradient(157deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.5) 33%, rgba(0,0,0,0) 68%, rgba(0,0,0,0) 98%);
  background: linear-gradient(157deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.5) 33%, rgba(0,0,0,0) 68%, rgba(0,0,0,0) 98%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#000000",endColorstr="#000000",GradientType=1);
    opacity: .25;
}

 .step_nav:hover .np_img{   width: 100%; } 
 .np_text { position: absolute; top: 50%; right: 50px; font-size: 13px; color: #fff; z-index: 999;  display: flex; align-items: center;
     background: rgba(0, 0, 0, 0.65); border-radius: 100px;    box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.53);} 
 .np_text i { font-size: 35px; width: 50px;  height: 50px;}
 .np_label { width: 0; padding:4px 0px 0; overflow: hidden; transition: .3s; text-transform: uppercase; white-space: nowrap; }
  .np_text:hover{ background: #fff; color:#000; }
 .np_text:hover .np_label{ width: auto; padding: 4px 20px 0;}
 .navPrev .np_text { left: 50px;  right: auto; }

.np_text i svg * { fill: #fff;}
.np_text i svg { width: 25px; height: 25px; margin: 12.5px; }
.np_text:hover i svg *{ fill:#000; }

.sld_op, .sld_opv3 { right: 10% }
 .sld_op.sld_bottom, .sld_opv3.sld_bottom {     position: absolute;     bottom: 0;         right: 0;     max-width: 100% !important; } 
 .sld_op.sld_middle, .sld_opv3.sld_middle {     position: absolute;     top: 50%;     transform: translateY(-50%);     max-width: 100% !important; } 
 .sld_op.sld_bottom_middle, .sld_opv3.sld_bottom_middle {     position: absolute;     bottom: 0; left: 50%;   max-width: 100% !important; } 
 .sld_op.sld_center_right, .sld_opv3.sld_center_right { position: absolute; bottom: 50%; transform: translateY(50%); right: 0; max-width: 100% !important; }
 .sld_op.sld_top_right, .sld_opv3.sld_top_right { position: absolute; bottom: auto; top:0; right: 0; max-width: 100% !important; }
 
  .anim-delay-500{ animation-delay: 500ms !important; -webkit-animation-delay: 500ms !important; } 
 .anim-delay-1000{ animation-delay: 1000ms !important; -webkit-animation-delay: 1000ms !important; } 
 .anim-delay-1500{ animation-delay: 1500ms !important; -webkit-animation-delay: 1500ms !important; } 
 .anim-delay-2000{ animation-delay: 2000ms !important; -webkit-animation-delay: 2000ms !important; } 
 .anim-delay-2500{ animation-delay: 2500ms !important; -webkit-animation-delay: 2500ms !important; } 
 .sld_pop_box>div { flex-basis: 50%; } 
 .sld_pop_box { display: flex; align-items: center; justify-content: center; background: #fff; } 
 .pop_text{ max-width: 400px; margin: auto; padding: 20px;} 
 .fancybox-button svg * { fill: #fff !important; opacity: 1; } 
 .fancybox-close:after{ color:#fff !important; } 
 .sld_pop_outer {     background: transparent; } 
 .sld_pop_outer img{display: block;} 
 .fancybox-skin {     background: transparent !important;     -webkit-box-shadow:none !important;     -moz-box-shadow: none !important;     box-shadow: none !important;  } 
 #mercury_slider .owl-item.active {
    background: #000;
}
.navPrev.disabled { display: none; }
 .sld_pop_act{box-shadow: 0px 0px 7px -2px hsla(0, 0%, 0%, 0.45);}

 .navNext a.wm_showcase {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 2;
    display: none;
}
 .navNext.last a.wm_showcase{ display: block; }
.slider_thumb_small_ct {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    max-width: 350px;
    position: relative;
    align-items: center;
    justify-content: space-between;
    color: #fff;
}
.bt_img, .split_sld_thumb{ display: flex; align-items: center;  flex-direction: row-reverse;}
.split_sld_thumb{ flex-direction: row; }
 .slider_thumb_small_ct .bt_img>div, .split_sld_thumb .split_sld_inn{
    width: 50px;
    height: 50px;
    border: 4px solid #fff;
    border-radius: 50%;
    overflow: hidden;
    cursor: pointer;
    margin-right: -10px;
     box-shadow: 0px 0px 4px 0px #000;
     background: #fff;
     position: relative;
}

.slider_opt img, .split_sld_thumb img {
    box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.60) inset;
    border-radius: 50%;
    position: absolute;
    left: 0; 
    top: 0;
    width: 100%; height: 100%;
}
.slider_opt.t_img_active, .split_sld_inn.active {
    border-color: #000 !important;
   
}
.next_img, .next_project {
    font-size: 13px;
    text-transform: uppercase;
    color: #fff;
    cursor: pointer;
        margin-left: 30px;
}
.next_img i, .next_project i {
    margin-left: 20px;
}
.split_outer {
    display: flex;
    width: 420px;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 10px;
}
  .np_hover, .np_img{ display: none !important }

  .edit_this_slide {
    pointer-events: auto;
    z-index: 99999;
    position: absolute;
    left: 0;
    background: #f00;
    padding: 3px 10px;
}
.edit_this_slide a{ color:#fff; }

#popup_slide_popup {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 999999;
    background: #fff;
    transform: translateX(-100%);
    
}
#popup_slide_popup.pop-active {
    transform: translateX(0);
}

.close_popup {
    position: absolute;   
    z-index: 999;
    cursor: pointer;
    border: 2px solid #b8244b;
    right: 10px;
    top: 10px;
    border-radius: 50%;
    padding: 0px;
    width: 60px;
    height: 60px;
    text-align: center;
    line-height: 0;
    font-size: 50px;
    background: #fff;
}
.close_popup svg *{ fill:#b8244b; }
.close_popup i {
    line-height: 60px;
    color: #b8244b;
    font-size: 40px;
    margin-left: -.2rem;
    font-style: normal;
}
.plb_out{ display: table; }
.pop_link_btn{ display: inline-block; }
.slider_content-fh { min-height: 350px; }



.active  .sl-hs h2,  .active .sl-hs h3, .active .sl-hs .anim-fadeIn {-animation: 1s .3s fadeIn both; animation: 1s .3s fadeIn both;} 
.active .sl-hs p {-webkit-animation: 1s .3s fadeIn both;animation: 1s .3s fadeIn both; } 
.active .sl-hs .slider-btn {-webkit-animation: 1s .3s fadeIn both;animation: 1s .3s fadeIn both;} 



  @media only screen and (max-width: 991px) {   .d-tablecell {      display: block;         } 
  .d-tablecell  .hero-text { padding: 30px 10px !important; } 
  
  .sld_op {     position: relative !important;     width: 100% !important;     left: 0 !important;     right: 0 !important;     top: 0 !important;     bottom: 0 !important;     transform: translate(0,0) !important;  padding-bottom: 100%;      margin: auto;  overflow: hidden;} 
    .sld_op img{ position: absolute; top: 0; left: 0 max-width:100%; width: 100%; }
 .single-hs-item{ height: auto; } 
    .step_nav{ width: 60px; height: 30%; } 
 } 
 @media screen and (max-width: 768px){
    .d-tablecell .hero-text {
      padding: 20px 0px !important;
      min-height: 400px;
      display: flex;
  }
  .hero-text p, .hero-text .rw {
      margin: 20px auto 20px;
  }
  .step_nav {
    top: calc(100% - 80px);
    height: 100px;
  }
  .slider_thumb_small_ct {
      flex-direction: column;
      margin: auto;
      padding: 10px;
  }
  .next_img {
    padding-top: 15px;
}
.bt_img {
    padding-right: 10px;
}
.stp {
    position: absolute;
    width: 100%;
    max-width: unset;
    left: 0;
    top: 85vh;
    display: none;
}
.step_nav {
    top: 0;
    height: 100px;
}
 }
 @media only screen and (max-width: 600px) {   
     .hero-text p, .hero-text .rw {         font-size: 15px;         margin-bottom: 25px;     } 
     .hero-text .fs_40 { font-size: 24px; margin-bottom: 25px; padding-top: 20px; }
     .owl-carousel .owl-nav button.owl-next {         top: auto;         margin: 0;         bottom: 0px;     } 
     .owl-carousel .owl-nav button.owl-prev {         top: auto;         margin: 0;         bottom: 0px;     } 
     .owl-dots {         bottom: 10px;         left: 50px;         right: 50px;     } 

     .sld_pop_box>div {
          flex-basis: 100%;
      }
      .sld_pop_box {
          flex-wrap: wrap;
      }
      .np_text { right: 10px;}
      .navPrev .np_text{ left: 10px}
      .np_text i { font-size: 18px; width: 35px; height: 35px; line-height: 35px; }
      .np_text i svg {  margin: 5px;}
      .np_text:hover .np_label {  padding: 4px 10px 0; }
      .close_popup { width: 50px; height: 50px; padding:13px;  }
        .close_popup i { line-height: 50px; }
        ..slider_content-fh{ min-height: unset; }
  } 
.sld_op img {
    width: 100%;
}
@media screen and (max-width: 767px){
   #popup_slide_popup {
      overflow: auto;
    }
    .split_outer {
      margin: auto;
      flex-direction: column;
      width: auto;
      padding: 50px 0 20px; 
  }
  .split_sld_thumb {
    padding-bottom: 15px;
    padding-right: 10px;
}
.hero-text .rw {
    font-size: 30px;
    margin-bottom: 10px;
}
.next_img, .next_project {
    margin: 0 auto;
}
.d-table .container{ padding: 0; }
.slider_content-fh { min-height: unset; }
.d-table .row>div{ padding:0; }
}


.sl-hs .single-hs-item:before, .sl-hs .single_sld_bg:before{
background: transparent !important;
}

.sld_web_bg>div img{ width: 100%; }