/* ==========================================================================
# Portfolio Masonry  - begin
========================================================================== */

.qodef-ptf-masonry {

    .qodef-portfolio-list-holder{

        margin: -15px;
        width: calc(100% + 30px);
        opacity: 0;
        @include qodefTransition(opacity 0.15s ease-out);

        &.qodef-appeared{
            opacity: 1;
        }

        article{
            box-sizing:border-box;

            .qodef-item-image-holder{
                height: 100%;
                overflow: hidden;
                backface-visibility: hidden;

                img{
                    width: 100%;
                    height: 100%;
                    display: block;
                }
            }

            .qodef-portfolio-link{
                position: absolute;
                width: 100%;
                height: 100%;
                top: 0;
                left: 0;
                z-index: 2;
            }

            .qodef-portfolio-item-inner {
                overflow:hidden;
                height: 100%;
            }

            .qodef-item-text-overlay {
                position: absolute;
                width: 100%;
                height: 100%;
                left: 0;
                top: 0;
                opacity: 0;
                background-color: rgba(0, 0, 0, 0.8);
                @include qodefTransition(opacity .25s ease-out);
            }

            .qodef-item-text-overlay-inner{
                display: inline-block;
                width: 100%;
                height: 100%;
                vertical-align: middle;
            }

            .qodef-item-text-holder {
                @include  qodefTableLayout;
            }

            .qodef-item-text-holder-inner {
                @include qodefTableCellLayout;
                padding: 0 10%;
                top: -20px;
                @include qodefTransition(top .3s cubic-bezier(.22,.61,.36,1));
            }

            .qodef-item-icon-holder {
                color: #fff;
                font-size: 30px;
            }

            &:hover {
                .qodef-item-text-overlay {
                    opacity: 1;
                }
                .qodef-item-text-holder-inner {
                    top: 0;
                }
            }
        }

        .qodef-portfolio-list-masonry-grid-sizer,
        .qodef-default-masonry-item,
        .qodef-large-height-masonry-item{
            width: 25%;
        }
        .qodef-large-width-masonry-item,
        .qodef-large-width-height-masonry-item{
            width: 50%;
        }
    }

}

/* ==========================================================================
# Portfolio Masonry  - end
========================================================================== */