.gallery-bg{
    background: url(../img/home/gallery-bg.png) left center no-repeat;
    background-size: cover;
}

.gallery-area{

    .img-gal{
        display: block;
    }

    .single-imgs{
        position: relative;
        overflow: hidden;

        .overlay{
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(1, 1, 14, 0.4);
            transform: translateY(60px);
            opacity: 0;
            z-index: -1;
            @include transition;
        }

        .overlay-content{
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

        .overlay-icon{
            width: 60px;
            height: 60px;
            display: block;
            border-radius: 50%;
            background: rgba($primary-color2, .8);
            text-align: center;

            i,span{
                font-size: 20px;
                color: $white;
                line-height: 60px;
            }
        }

        &:hover{

            .overlay{
                transform: translateY(0);
                opacity: 1;
                z-index: 1;
            }
        }

        // img{
        //     width:100%;
        // }
        // .overlay-bg{
        //     background: rgba($primary-color,.85);
        //     opacity: 0;
        //     @include transition();
        //     z-index: 2;
        // }
        // &:hover{
        //     .overlay-bg{
        //         opacity:1;
        //     }
        // }
    }
}