
.gallery-wrapper {
    overflow: hidden;
    &.style1 {
        .swiper {
            overflow: visible;
        } 
    }
}



.gallery-thumb {
    position: relative;
    transition: all 0.4s;
    -webkit-transition: all 0.4s;
    -moz-transition: all 0.4s;
    -ms-transition: all 0.4s;
    -o-transition: all 0.4s;
    img {
        position: relative;
        width: 100%;
        z-index: 2;
        transition: all 0.4s;
        -webkit-transition: all 0.4s;
        -moz-transition: all 0.4s;
        -ms-transition: all 0.4s;
        -o-transition: all 0.4s;
    }

    .icon {
        opacity: 0;
        visibility: hidden;
        position: absolute;
        top: 50%;
        left: 50%;
        z-index: 4;
        transform: translate(-50%, -50%); 
        transition: all 0.4s;
        -webkit-transition: all 0.4s;
        -moz-transition: all 0.4s;
        -ms-transition: all 0.4s;
        -o-transition: all 0.4s;
        -webkit-transform: translate(-50%, -50%);
        -moz-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        -o-transform: translate(-50%, -50%);
    }


    &:before { 
        opacity: 0;
        visibility: hidden;
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        opacity: 0.6;
        background: $title-color;
        z-index: 3; 
        transform: translateY(100%);
        transition: all 0.4s;
        -webkit-transition: all 0.4s;
        -moz-transition: all 0.4s;
        -ms-transition: all 0.4s;
        -o-transition: all 0.4s;
        -webkit-transform: translateY(100%);
        -moz-transform: translateY(100%);
        -ms-transform: translateY(100%);
        -o-transform: translateY(100%);
}

 &:hover {
    img {
        transform: scale(1.1);
        -webkit-transform: scale(1.1);
        -moz-transform: scale(1.1);
        -ms-transform: scale(1.1);
        -o-transform: scale(1.1);
}
    .icon { 
        opacity: 1;
        visibility: visible;
    }
    &:before {
        opacity: 0.6;
        visibility: visible;
        transform: translateY(0%);
        -webkit-transform: translateY(0%);
        -moz-transform: translateY(0%);
        -ms-transform: translateY(0%);
        -o-transform: translateY(0%);
}
}

&.style2 {
    position: relative;
    overflow: hidden;
    transition: all 0.4s;
    -webkit-transition: all 0.4s;
    -moz-transition: all 0.4s;
    -ms-transition: all 0.4s;
    -o-transition: all 0.4s;
    img {
        position: relative;
        width: 100%;
        height: 100%;
        z-index: 2;
        transition: all 0.4s;
        -webkit-transition: all 0.4s;
        -moz-transition: all 0.4s;
        -ms-transition: all 0.4s;
        -o-transition: all 0.4s;
    }

    .icon {
        opacity: 0;
        visibility: hidden;
        position: absolute;
        width: 56px;
        height: 56px;
        line-height: 56px;
        text-align: center;
        background: $white;
        border: 1px solid $theme-color;
        border-radius: 50%;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        -ms-border-radius: 50%;
        -o-border-radius: 50%;
        top: 50%;
        left: 50%;
        z-index: 4;
        transform: translate(-50%, -50%); 
        transition: all 0.4s;
        -webkit-transition: all 0.4s;
        -moz-transition: all 0.4s;
        -ms-transition: all 0.4s;
        -o-transition: all 0.4s;
        -webkit-transform: translate(-50%, -50%);
        -moz-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        -o-transform: translate(-50%, -50%);

        img {
            width: 1.3rem;
            height: 1.3rem;
        }
    }


    &:before { 
        opacity: 0;
        visibility: hidden;
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 95%;
        height: 95%;
        opacity: 0.6;
        background: rgba(1, 15, 28, 0.60);
        z-index: 3; 
        transform: translate(-50%, -50%);
        -webkit-transform: translate(-50%, -50%);
        -moz-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        -o-transform: translate(-50%, -50%);
        transition: all 0.4s;
        -webkit-transition: all 0.4s;
        -moz-transition: all 0.4s;
        -ms-transition: all 0.4s;
        -o-transition: all 0.4s; 
}

 &:hover {
    img {
        transform: scale(1.1);
        -webkit-transform: scale(1.1);
        -moz-transform: scale(1.1);
        -ms-transform: scale(1.1);
        -o-transform: scale(1.1);
}
    .icon { 
        opacity: 1;
        visibility: visible;
    }
    &:before {
        opacity: 0.6;
        visibility: visible;
}
}
}
}



 