/* ==========================================================================
# Portfolio Pinterest  - begin
========================================================================== */

.qodef-ptf-pinterest {

    .qodef-portfolio-list-holder{

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

        &.qodef-appeared{
            opacity: 1;
        }

        article{
            box-sizing:border-box;
            padding:1.25%;

            .qodef-portfolio-item-inner {
                position: relative;
                overflow: hidden;
            }

            .qodef-item-image-holder{
                overflow: hidden;

                img {
                    backface-visibility: hidden;
                    @include qodefTransform(scale(1.15));
                    @include qodefTransition(all .5s cubic-bezier(0.21,0.87,0.52,1.02));
                }
            }

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

            .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 .3s ease-out);
            }

            .qodef-item-text-overlay-inner{
                @include  qodefTableLayout;
            }

            .qodef-item-text-holder {
                position: relative;
                display: table-cell;
                height: 100%;
                width: 100%;
                vertical-align: top;
                text-align: left;
                padding:30px;
                box-sizing: border-box;


                .qodef-ptf-category-holder {
                    line-height:18px;
                    color: #fff;
                    font-size: 14px;
                    font-weight: 700;
                    text-transform: capitalize;
                    letter-spacing: 0.5px;
                    left: -120%;
                    position: relative;
                    @include qodefTransition(all .5s cubic-bezier(0.21,0.87,0.52,1.02));
                }

                .qodef-item-title {
                    color: #fff;
                    margin-bottom: 6px;
                    left: -120%;
                    position: relative;
                    @include qodefTransition(all .3s cubic-bezier(0.21,0.87,0.52,1.02));
                }
            }

            &:hover {
                .qodef-item-text-overlay {
                    opacity: 1;
                }

                .qodef-item-title,
                .qodef-ptf-category-holder {
                    left: 0;
                }

                img {
                    @include qodefTransform(scale(1.15) translateX(20px));
                }
            }
        }

    }

    &.qodef-ptf-pinterest-three-columns{
        .qodef-portfolio-list-masonry-grid-sizer{
            width: 33.33%;
        }
        .qodef-portfolio-list-masonry-grid-gutter{
            width: 0;
        }
        article{
            width: 33.33%;
        }
    }

    &.qodef-ptf-pinterest-four-columns{

        .qodef-portfolio-list-masonry-grid-sizer,
        article{
            width: 25%;
        }
        .qodef-portfolio-list-masonry-grid-gutter{
            width: 0;
        }
    }

    &.qodef-ptf-pinterest-five-columns{

        .qodef-portfolio-list-masonry-grid-sizer,
        article{
            width: 20%;
        }
        .qodef-portfolio-list-masonry-grid-gutter{
            width: 0;
        }

    }

}


/* ==========================================================================
# Portfolio Pinterest  - end
========================================================================== */