&.effect-roxy {
    .rbs-img-thumbs {
        background: -webkit-linear-gradient(45deg, #ff89e9 0%, #05abe0 100%);
        background: linear-gradient(45deg, #ff89e9 0%, #05abe0 100%);

        img {
            max-width: none;
            width: -webkit-calc(100% + 80px);
            width: calc(100% + 80px);
            -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
            transition: opacity 0.35s, transform 0.35s;
            -webkit-transform: translate3d(-50px, 0, 0);
            transform: translate3d(-50px, 0, 0);
        }

        figcaption {

            padding: 3em;
            text-align: left;


            h2 {
                padding: 30% 0 0.1em 0;
            }

            p {
                font-size: 0.9em;
                opacity: 0;
                -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
                transition: opacity 0.35s, transform 0.35s;
                -webkit-transform: translate3d(-10px, 0, 0);
                transform: translate3d(-10px, 0, 0)
            }


            &::before {
                position: absolute;
                top: 30px;
                right: 30px;
                bottom: 30px;
                left: 30px;
                border: 1px solid #fff;
                content: '';
                opacity: 0;
                -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
                transition: opacity 0.35s, transform 0.35s;
                -webkit-transform: translate3d(-20px, 0, 0);
                transform: translate3d(-20px, 0, 0);
            }


            &::before,
            p {
                -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
                transition: opacity 0.35s, transform 0.35s;
            }

        }

        &:hover {
            img {
                opacity: 0.7;
                -webkit-transform: translate3d(0, 0, 0);
                transform: translate3d(0, 0, 0)
            }

            figcaption::before,
            p {
                opacity: 1;
                -webkit-transform: translate3d(0, 0, 0);
                transform: translate3d(0, 0, 0)
            }
        }


    }


    &.effect-min {
        .rbs-img-thumbs {
            font-size: 7px;

            img {
            	width: -webkit-calc(100% + 30px);
            	width: calc(100% + 30px);
                -webkit-transform: translate3d(-10px, 0, 0);
                transform: translate3d(-10px, 0, 0);
            }


            figcaption::before {
                top: 10px;
                right: 10px;
                bottom: 10px;
                left: 10px;
            }

            h2 {
                padding: 10% 0 0.1em 0;
            }

            p {
                display: none
            }
        }
    }


    &.effect-150 {
        .rbs-img-thumbs {
            font-size: 8px;

            figcaption::before {
                top: 15px;
                right: 15px;
                bottom: 15px;
                left: 15px;
            }

            h2 {
                padding: 20% 0 0.1em 0;
            }

            figcaption {
                padding: 2.5em;
            }

            p {
                display: none;
            }
        }
    }


    &.effect-200 {
        .rbs-img-thumbs {
            font-size: 10px;

            figcaption::before {
                top: 15px;
                right: 15px;
                bottom: 15px;
                left: 15px;
            }

            h2 {
                padding: 15% 0 0.05em 0;
            }

            figcaption {
                padding: 2.5em;
            }
        }
    }

   
    &.effect-270 {
        .rbs-img-thumbs {
            font-size: 12px;
             h2 {
                padding: 20% 0 0.1em 0;
            }
        }
    }
 
    &.effect-360 {
        .rbs-img-thumbs {
            font-size: 16px;
        }
    }

    &.effect-500 {
        .rbs-img-thumbs {
            font-size: 20px;
        }
    } 
}