/* ==========================================================================
# Image With Text - begin
========================================================================== */

.qodef-image-with-text {

    &.text-on-hover {

        .qodef-image-with-text-image {
            position: relative;
            overflow: hidden;

            img {
                display: block;
            }

            .qodef-image-with-text-holder {
                position: absolute;
                width: 100%;
                height: 100%;
                top: 0;
                left: 0;
                opacity: 0;
                background-color: rgba(0, 0, 0, 0.85);
                @include qodefTransition(opacity .3s ease-out);

            }

            .qodef-image-with-text-overlay {
                @include qodefTableLayout();

                .qodef-image-with-text-inner {
                    position: relative;
                    display: table-cell;
                    height: 100%;
                    width: 100%;
                    vertical-align: middle;
                    text-align: center;
                    padding: 30px;
                }
            }

            .qodef-image-with-text-title {
                color: #fff;
                position: relative;
                top: 50px;
                opacity: 0;
                @include qodefTransition(.3s 0s);
            }

            h5.qodef-image-with-text-title {
                font-size: 23px;
            }

            .qodef-image-with-text-subtitle {
                line-height: 18px;
                display: inline-block;
                margin-top: 8px;
                font-size: 16px;
                font-weight: 700;
                text-transform: capitalize;
                letter-spacing: 0.5px;
                color: #fff;
                position: relative;
                top: 50px;
                opacity: 0;
                @include qodefTransition(.3s 0s);
            }

        }

        &:hover {
            .qodef-image-with-text-holder {
                opacity: 1;
            }

            .qodef-image-with-text-title {
                opacity: 1;
                top: 0;
                transition-delay: 0s;
            }

            .qodef-image-with-text-subtitle {
                opacity: 1;
                top: 0;
                transition-delay: .1s;
            }
        }
    }

    &.text-right {
        @include qodefTableLayout;
        vertical-align: middle;

        .qodef-image-with-text-image {
            position: relative;
            display: table-cell;
            height: 100%;
            width: 30%;
            vertical-align: middle;
            padding-right: 20px;

            img {
                display: block;
            }

            a {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
            }
        }

        .qodef-image-with-text-holder {
            position: relative;
            display: table-cell;
            width: 70%;
            height: 100%;
            vertical-align: middle;
            border-left: 4px solid #c9c9c9;
            padding-left: 26px;
        }
    }

}

/* Image With Text - end
========================================================================== */