.contenedor-efecto3d {
    width: 100%;
    height: 100%;
    z-index: 30000;
    cursor: pointer;
    
    .adelante,
    .atras-horizontal, .atras-vertical {
        transition: all 0.5s ease;
        width: 100%;
        height: 100%;
        
        backface-visibility: hidden;
        -webkit-backface-visibility: hidden; 
        -moz-backface-visibility: hidden;
        -o-backface-visibility: hidden;
    }

    .atras-vertical, .atras-horizontal {
        position: absolute;
        z-index: 30000;
        top: 0;
        bottom: 0;
        
    }

    .contenedor-vertical, 
    .contenedor-horizontal {
        width: 100%;
        height: 100%;
        transition: all 0.5s ease;
        transform-style: preserve-3d;
        top: 0;
        -webkit-transform-style: preserve-3d;
        -moz-transform-style: preserve-3d;
        -o-transform-style: preserve-3d;
    }

    .contenedor-vertical {
        transform: perspective(600px) rotateY(0deg);
        -moz-transform: perspective(600px) rotateY(0deg);
        -webkit-transform: perspective(600px) rotateY(0deg);
        -o-transform: perspective(600px) rotateY(0deg);

        .atras-vertical {
            transform: perspective(600px) rotateY(180deg);
            -moz-transform: perspective(600px) rotateY(180deg);
            -webkit-transform: perspective(600px) rotateY(180deg);
            -o-transform: perspective(600px) rotateY(180deg);
        }
    }

    .contenedor-horizontal {
        transform: perspective(600px) rotateX(0deg);
        -moz-transform: perspective(600px) rotateX(0deg);
        -webkit-transform: perspective(600px) rotateX(0deg);
        -o-transform: perspective(600px) rotateX(0deg);

        .atras-horizontal {
            transform: perspective(600px) rotateX(180deg);
            -moz-transform: perspective(600px) rotateX(180deg);
            -webkit-transform: perspective(600px) rotateX(180deg);
            -o-transform: perspective(600px) rotateX(180deg);
        }
    }


    &:hover .contenedor-vertical {
        transform: perspective(600px) rotateY(180deg);
        -webkit-transform: perspective(600px) rotateY(180deg);
        -moz-transform: perspective(600px) rotateY(180deg);
        -o-transform: perspective(600px) rotateY(180deg);
        -webkit-box-shadow: 0px 0px 14px 4px rgba(117,117,117,0.71);
        -moz-box-shadow: 0px 0px 14px 4px rgba(117,117,117,0.71);
        box-shadow: 0px 0px 14px 4px rgba(117,117,117,0.71);
    }

    &:hover .contenedor-horizontal {
        transform: perspective(600px) rotateX(180deg);
        -webkit-transform: perspective(600px) rotateX(180deg);
        -moz-transform: perspective(600px) rotateX(180deg);
        -o-transform: perspective(600px) rotateX(180deg);
        -webkit-box-shadow: 0px 0px 14px 4px rgba(117,117,117,0.71);
        -moz-box-shadow: 0px 0px 14px 4px rgba(117,117,117,0.71);
        box-shadow: 0px 0px 14px 4px rgba(117,117,117,0.71);
    }

}