/*---------------*/
/***** Rodiba *****/
/*---------------*/

figure.effect-rodiba {
}

    figure.effect-rodiba:after {
        content: "";
        height: 30%;
        width: 100%;
        bottom: 0;
        right: 0;
        position: absolute;
        transition: height ease 400ms;
        background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.71) 98%, rgba(0,0,0,0.72) 100%);
        background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.71) 98%,rgba(0,0,0,0.72) 100%);
        background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.71) 98%,rgba(0,0,0,0.72) 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#b8000000',GradientType=0 );
        z-index: 1;
    }


    figure.effect-rodiba figcaption::after,
    figure.effect-rodiba img,
    figure.effect-rodiba p {
        -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
        transition: opacity 0.35s, transform 0.35s;
    }

    figure.effect-rodiba figcaption::after {
        position: absolute;
        bottom: 0;
        right: 0;
        width: 100%;
        height: 100%;
        content: '';
    }

    figure.effect-rodiba h2,
    figure.effect-rodiba p {
        position: absolute;
        bottom: 15px;
        right: 15px;
        z-index: 5;
    }

    figure.effect-rodiba h2 {
        bottom: 15px;
        transition: transform ease 400ms;
        font-weight: bold;
        right: 13px;
    }

    figure.effect-rodiba p {
        font-size: 0.85em;
        opacity: 0;
    }

    figure.effect-rodiba:hover:after {
        height: 100%;
    }

    figure.effect-rodiba:hover h2 {
        transform: translateY(-23px);
    }

    figure.effect-rodiba:hover p {
        opacity: 1;
    }


html[lang='en-US'] figure.effect-rodiba h2,
html[lang='en-US'] figure.effect-rodiba p {
    right: auto;
    left: 13px;
    direction: ltr;
}