﻿figure.effect-merlin {
    color: #fff;
    position: relative;
    float: left;
    overflow: hidden;
    margin: 10px 1%;
    width: 100%;
    background: #000000;
    text-align: left;
}

    figure.effect-merlin * {
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }

    figure.effect-merlin img {
        max-width: 100%;
        opacity: 1;
        /*width: 100%;*/
        -webkit-transition: opacity 0.35s;
        transition: opacity 0.35s;
    }

    figure.effect-merlin figcaption {
        position: absolute;
        bottom: 0;
        left: 0;
        padding: 30px 3em;
        width: 100%;
        height: 100%;
    }

        figure.effect-merlin figcaption::before {
            position: absolute;
            top: 30px;
            right: 30px;
            bottom: 30px;
            left: 100%;
            border-left: 4px solid rgba(255, 255, 255, 0.8);
            content: '';
            opacity: 0;
            background-color: rgba(255, 255, 255, 0.5);
            -webkit-transition: all 0.5s;
            transition: all 0.5s;
            -webkit-transition-delay: 0.6s;
            transition-delay: 0.6s;
        }

    figure.effect-merlin h2,
    figure.effect-merlin p {
        margin: 0 0 5px;
        opacity: 0;
        -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
        transition: opacity 0.35s,-webkit-transform 0.35s,-moz-transform 0.35s,-o-transform 0.35s,transform 0.35s;
    }

    figure.effect-merlin h2 {
        word-spacing: -0.15em;
        font-weight: 300;
        text-transform: uppercase;
        -webkit-transform: translate3d(30%, 0%, 0);
        transform: translate3d(30%, 0%, 0);
        -webkit-transition-delay: 0.3s;
        transition-delay: 0.3s;
    }

        figure.effect-merlin h2 span {
            font-weight: 800;
        }

    figure.effect-merlin p {
        font-weight: 200;
        -webkit-transform: translate3d(0%, 30%, 0);
        transform: translate3d(0%, 30%, 0);
        -webkit-transition-delay: 0s;
        transition-delay: 0s;
    }

    figure.effect-merlin:hover img {
        opacity: 0.3;
    }

    figure.effect-merlin:hover figcaption h2 {
        opacity: 1;
        -webkit-transform: translate3d(0%, 0%, 0);
        transform: translate3d(0%, 0%, 0);
        -webkit-transition-delay: 0.4s;
        transition-delay: 0.4s;
    }

    figure.effect-merlin:hover figcaption p {
        opacity: 0.9;
        -webkit-transform: translate3d(0%, 0%, 0);
        transform: translate3d(0%, 0%, 0);
        -webkit-transition-delay: 0.6s;
        transition-delay: 0.6s;
    }

    figure.effect-merlin:hover figcaption::before {
        background: rgba(255, 255, 255, 0);
        left: 30px;
        opacity: 1;
        -webkit-transition-delay: 0s;
        transition-delay: 0s;
    }
/*----------------------------------------------*/
.effect-merlin figcaption div {
    height: 100%;
}

.effect-merlin figcaption {
    padding: 1em 1em 1em 3em !important;
}

    .effect-merlin figcaption h2 {
        margin-bottom: 20px;
    }