.portfolioITems{
    &.style-4{
        .filters button{
            padding: 10px 15px; 
            @include min-mq(992) {
                font-size: 18px;
            }
            @include mq(992) {
                padding: 7px 35px;
            }
            overflow: hidden; 
            span{ 
                font-size: 45px;
                color: #fff; 
                opacity: .1;
                position: absolute;
                width: 100%;
                height: 100%;
                top: 0; 
                left: 0;
                display: flex; 
                justify-content: center;
                align-items: center;
                pointer-events: none;
            }
            &.active{
                span{
                    opacity: 0;
                }
            }
        }
        .protItem{
            // margin: 0;
            // padding: 0;
        }
        .port-item {
            position: relative;
            overflow: hidden;
            img{
                position: relative;
                transition: all .5s;
                transform: scale(1);
                transform-origin: 50% 0;
            }
            a.port_popup {
                position: absolute;
                width: 70px;
                height: 70px;
                // right: 0;
                // top: 0;
                display: flex;
                align-items: center;
                justify-content: center;
                background: #ffffffdb;
                transition: all .5s;
                opacity: 0;
                font-size: 30px;
                left: 20px;
                margin: auto;
                bottom: 20px;
                transform: scale(.1);
                z-index: 9;
            }
            .demoBox{
                bottom: -100px !important;
                width: 100% !important;
                right: 0 !important;
                z-index: 9;
                height: 110px !important;
                background: #fff !important;
            }
            h3.pTitle {
                bottom: 47px  !important;
                left: 110px  !important;
                text-align: left  !important;
            }
            p.pCat {
                bottom: -5px  !important;
                left: 110px  !important;
                text-align: left  !important;
            }

            .portTag{
                position: absolute;
                right: 15px;
                top: 15px;
                font-size: 12px;
                padding: 7px 17px;
                color: #fff;
                text-transform: capitalize;
                // border-radius: 3px;
            }
        }
        
        .port-item:hover{
            img{
                transform: scale(1.2);
            }
            .img-box .port_popup {
                width: 70px;
                height: 70px;
                border-radius: 50%;
                top: auto;
                left: 20px;
                right: auto; 
                bottom: 20px;
                margin: auto;
                opacity: 1;
                transform: scale(1);
                border: 1px solid #ddd;
                // background: #1b856b;
                color: #fff;
            }
            .demoBox{
                bottom: 0 !important;
            }
        }
    }
}
 

@include mq(991){
    .portfolioITems .filters .filter-menu{
        background-color: #fff !important;
    }
}
@include min-mq(992) {

    .portfolioITems {
        .filter-v4{
            text-align: center; 
            .filter-menu{
                position: relative;
                display: inline-block;
                margin: 0 auto;
                padding:5px;
            }
            button{
                width: 150px;
                background: transparent !important;
                color: #fff !important;
                margin: 0 !important;
                position: relative;
                &:before{
                    width: 1px !important;
                    height: 50% !important;
                    position: absolute !important;
                    right: 0 !important;
                    background: #fff !important;
                    opacity: 0.4 !important;
                    display: block !important;
                    top: 0!important;
                    z-index: 99 !important;
                    bottom: 0 !important;
                    margin: auto;
                }
                &:last-child{
                    &::before{
                        display: none !important;
                    }
                }
            }
            .btn-overlay{
                left: 5px;
                // background: rgba(104,166,145,0.65);
                height: calc(100% - 10px);
                position: absolute;
                width: 150px;
                top: 5px;
                transition: all .3s;
            }
        }
    }
}