.wk-gallery{
  .wk-tab{
    li{
      a{
        padding:5px 15px;
        background:rgba(245, 245, 245, 0.93);
        font-size: 14px;
        text-transform: uppercase;
        color:#3e4b5c;
        border:1px solid #ddd;
        &:hover{
          color:#63b570;
          box-shadow: 0px 2px 2px #ddd;

        }
      }
    }
    .wk-active{
      a{
        color:#63b570;
        box-shadow:0px 2px 2px #ddd;
      }
    }
  }

  .content-overlay {
      img{
        width:100%;
      }
      transition:all 0.3s ease;
      background:transparent;
      &.from-right{
        &:before{
          content:"";
          position:absolute;
          left:100px;
          right:0;
          width:100%;
          height:100%;
          background:rgba(0, 0, 0, 0.58);
          top:0;
          bottom:0;
          opacity:0;
           transition:all 0.3s ease;
        }
          &:hover{
            &:before{
              opacity:1;
              transition:all 0.3s ease;
              left:0;
            }
          }
      }
      &.from-left{
        &:before{
          content:"";
          position:absolute;
          left:-200px;
          right:0;
          width:100%;
          height:100%;
          background:rgba(0, 0, 0, 0.58);
          top:0;
          bottom:0;
          opacity:0;
           transition:all 0.3s ease;
        }
          &:hover{
            &:before{
              opacity:1;
              transition:all 0.3s ease;
              left:0;
            }
          }
      }
      &.square{
        &:before{
          content:"";
          position:absolute;
          left:15px;
          right:15px;
          top:15px;
          bottom:15px;
          width:auto;
          height:auto;
          background:rgba(0, 0, 0, 0.58);
          
          opacity:0;
          margin:auto;
           transition:all 0.3s ease;
        }
          &:hover{
            &:before{
              opacity:1;
              transition:all 0.3s ease;
            }
          }
      }
      .wk-gallery-body{
             color:#fff;
             background:transparent;
            .wk-card-title{
              font-size:24px;
               color:#fff;
            }
           
            a{
              color:#fff;
            }
            opacity:0;
            transition:all 0.3s ease;
              .gallery-lightbox{
                  a{
                    display:inline-block;
                    background: transparent;
                    width: 40px;
                    height: 40px;
                    line-height: 37px;
                    margin: 0 5px;
                    border:1px solid #fff;
                    border-radius: 50px;
                     transition:all 0.3s ease;
                     color:#fff;
                  }
                }
          }
        



        &:hover{
          .wk-gallery-body{
              opacity:1;
              transition:all 0.3s ease;
            }
        }
      }



    .content-bottom {
        transition:all 0.3s ease;
        background:transparent;
          img{
          width:100%;
        }


      &.from-right{
       .caption-button .img-link{
          &:before{
            content:"";
            position:absolute;
            left:100px;
            right:0;
            width:100%;
            height:100%;
            top:0;
            bottom:0;
             transition:all 0.3s ease;
          }
            
        }
        &:hover{
          .caption-button .img-link:before{
            opacity:1;
            transition:all 0.3s ease;
            left:0;
          }
        }
      }
      &.from-left{
        .caption-button .img-link{
            &:before{
              content:"";
              position:absolute;
              left:-200px;
              right:0;
              width:100%;
              height:100%;
              top:0;
              bottom:0;
               transition:all 0.3s ease;
            }

          }
          &:hover{
            .caption-button .img-link:before{
              opacity:1;
              transition:all 0.3s ease;
              left:0;
            }
          }
      }
      &.square{
        .caption-button .img-link{
            &:before{
              content:"";
              position:absolute;
              left:15px;
              right:15px;
              top:15px;
              bottom:15px;
              width:auto;
              height:auto;
              margin:auto;
               transition:all 0.3s ease;
            }
             
          }
           &:hover{
            .caption-button .img-link:before{
              opacity:1;
              transition:all 0.3s ease;
            }
          }
      }


        .caption-button{
          transition:all 0.3s ease;

            .top-icon{
                display:inline-block;
                background: transparent;
                width: 40px;
                height: 40px;
                line-height: 37px;
                margin: 0 5px;
                border:1px solid #fff;
                border-radius: 50px;
                 transition:all 0.3s ease;
                 color:#fff;
                opacity:0;
                text-align:center;
              }


            .button-text{
                display:inline-block;
                background: transparent;
                border:1px solid #fff;
                padding:10px 20px;
                border-radius: 50px;
                transition:all 0.3s ease;
                color:#fff;
                opacity:0;
             
            }
            .img-link{
              &:before{
                  background:rgba(0, 0, 0, 0.58);
                  opacity:0;

              }

          }
        }

        .wk-gallery-body{
           color:#000;
           transition:all 0.3s ease;
              a .wk-card-title{
                font-size:24px;
                 color:#000;
              }
              
        }
          

      &:hover{
        transition:all 0.3s ease;
          .top-icon, .button-text{
            opacity:1;
          }

       }
    }


}

@media(max-width:768px){
  .wk-gallery{
     .wk-tab{
       li {
         a{
            margin-bottom:15px;
          }
       }

     } 

  }
}