//Magnific Popup

.mfp-fade.mfp-bg {
    opacity: 0;
    transition: all 0.4s ease-out;
    -webkit-transition: all 0.4s ease-out;
}

.mfp-fade.mfp-bg.mfp-ready {
    opacity: 0.8;
}

.mfp-fade.mfp-bg.mfp-removing {
    opacity: 0;
}

.mfp-fade.mfp-wrap .mfp-content {
    opacity: 0;
    transition: all 0.4s ease-out;
    -webkit-transition: all 0.4s ease-out;
}

.mfp-fade.mfp-wrap.mfp-ready .mfp-content {
    opacity: 1;
}

.mfp-fade.mfp-wrap.mfp-removing .mfp-content {
    opacity: 0;
}

//Portfolio

.portfolio {
    
    .pf-image {
        overflow: hidden;
        position: relative;
        
        img {
            width: 100%;
            display: block;
        }
        
        .overlay {
            
            .overlay-caption {
                display: table;
                height: 100%;
                width: 100%;
                
                .overlay-content {
                    display: table-cell;
                    vertical-align: middle;
                }
                
            }
            
        }
        
    }
       
}


//Portfolio Style

.pf-style {
    
    .overlay {
        height: 100%;
        width: 100%;
        left: 0;
        position: absolute;
        text-align: center;
        top: -100%;
        z-index: 2;
        transition: all 300ms;
        overflow: hidden;
        
        &-content {
            opacity: 0;
            transition: all 300ms;
        }
        
    }
    
    &:hover {
        
        .overlay {
            top: 0;
            
            &-content {
                opacity: 1;
                background-color: fade(@theme-color, 90%);
            }
            
        }
        
    }
    
} 


//Portfolio Gird

.portfolio.no-filter {   
    .pf-item {
        float: left;
    }   
}

.portfolio.gutter {
    .pf-item {
        padding: 10px;
    }
}

.portfolio.col-1 {
    .pf-item {
        width: 100%;
    }
}

.portfolio.col-2 {
    .pf-item {
        width: 49.99%;
    }
}

.portfolio.col-3 {
    .pf-item {
        width: 33.3333333%;
    }
}

.portfolio.col-4 {
    .pf-item {
        width: 25%;
    }
}

//Portfolio Filter

.pf-filter {

    li{
        margin-bottom: 30px;

        .iso-button {
        background-color: @white-color;
        color: @dark-color;
        padding: 10px 15px;
        margin-right: 5px;
        margin-bottom: 5px;
        text-transform: uppercase;
        transition: all 0.6s;
        -webkit-transition: all 0.6s;
        font-size: 12px;
        letter-spacing: 2px;
        
            &:hover {
                color: @theme-color;
            }
            
        }
    
        .iso-active {
            color: @theme-color;
        }       
    }
    
    

}

//Portfolio Filter When White Background

.pf-filter.pf-filter-gray {
    
    .iso-button {
        background-color: @light-background;
        color: @dark-color;
        
        &:hover {
            color: @theme-color;
        }
        
    }
    
    .iso-active {
        color: @theme-color;
    }

}

//Responsive Column
@media screen and (max-width: 992px) {
    
 .portfolio.col-3, .portfolio.col-4 {
    .pf-item {
        width: 49.99%;
    }
 } 

}

@media screen and (max-width: 540px) {
    
  .portfolio.col-2, .portfolio.col-3, .portfolio.col-4 {
    .pf-item {
        width: 100%;
    }
 } 

}