.oxi_image_e_e_27 .oxi-image-effects-hover .oxi-image-hover-image{
    z-index: 22;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    pointer-events: none;
}
.oxi_image_e_e_27 .oxi-image-effects-hover .oxi-image-hover-overlay-wrapper{
    z-index: 22;
}

.oxi_image_e_e_27 .oxi-image-effects-hover.left_to_right .oxi-image-hover-image{
    -webkit-animation-name: tinRightIn;
    animation-name: tinRightIn;
}
.oxi_image_e_e_27 .oxi-image-effects-hover.left_to_right:hover .oxi-image-hover-image{
    -webkit-animation-name: tinRightOut;
    animation-name: tinRightOut;
    opacity: 0 ;
}
.oxi_image_e_e_27 .oxi-image-effects-hover.right_to_left .oxi-image-hover-image{
    -webkit-animation-name: tinLeftIn;
    animation-name: tinLeftIn;
}
.oxi_image_e_e_27 .oxi-image-effects-hover.right_to_left:hover .oxi-image-hover-image{
    -webkit-animation-name: tinLeftOut;
    animation-name: tinLeftOut;
    opacity: 0 ;
}
.oxi_image_e_e_27 .oxi-image-effects-hover.top_to_bottom .oxi-image-hover-image{
    -webkit-animation-name: tinTopIn;
    animation-name: tinTopIn;
}
.oxi_image_e_e_27 .oxi-image-effects-hover.top_to_bottom:hover .oxi-image-hover-image{
    -webkit-animation-name: tinTopOut;
    animation-name: tinTopOut;
    opacity: 0 ;
}
.oxi_image_e_e_27 .oxi-image-effects-hover.bottom_to_top .oxi-image-hover-image{
    -webkit-animation-name: tinBottomIn;
    animation-name: tinBottomIn;
}
.oxi_image_e_e_27 .oxi-image-effects-hover.bottom_to_top:hover .oxi-image-hover-image{
    -webkit-animation-name: tinBottomOut;
    animation-name: tinBottomOut;
    opacity: 0 ;
}


@-webkit-keyframes tinRightIn {
    0% {
        opacity: 0;
        -webkit-transform: scale(1, 1) translateX(900%);
        transform: scale(1, 1) translateX(900%);
    }
    50%, 70%, 90% {
        opacity: 1;
        -webkit-transform: scale(1.1, 1.1) translateX(0px);
        transform: scale(1.1, 1.1) translateX(0px);
    }
    60%, 80%, 100% {
        opacity: 1;
        -webkit-transform: scale(1, 1) translateX(0px);
        transform: scale(1, 1) translateX(0px);
    }
}
@keyframes tinRightIn {
    0% {
        opacity: 0;
        -webkit-transform: scale(1, 1) translateX(900%);
        transform: scale(1, 1) translateX(900%);
    }
    50%, 70%, 90% {
        opacity: 1;
        -webkit-transform: scale(1.1, 1.1) translateX(0px);
        transform: scale(1.1, 1.1) translateX(0px);
    }
    60%, 80%, 100% {
        opacity: 1;
        -webkit-transform: scale(1, 1) translateX(0px);
        transform: scale(1, 1) translateX(0px);
    }
}
@-webkit-keyframes tinRightOut {
    0%, 20%, 40%, 50% {
        opacity: 1;
        -webkit-transform: scale(1, 1) translateX(0px);
        transform: scale(1, 1) translateX(0px);
    }
    10%, 30% {
        opacity: 1;
        -webkit-transform: scale(1.1, 1.1) translateX(0px);
        transform: scale(1.1, 1.1) translateX(0px);
    }
    100% {
        opacity: 0;
        -webkit-transform: scale(1, 1) translateX(900%);
        transform: scale(1, 1) translateX(900%);
    }
}
@keyframes tinRightOut {
    0%, 20%, 40%, 50% {
        opacity: 1;
        -webkit-transform: scale(1, 1) translateX(0px);
        transform: scale(1, 1) translateX(0px);
    }
    10%, 30% {
        opacity: 1;
        -webkit-transform: scale(1.1, 1.1) translateX(0px);
        transform: scale(1.1, 1.1) translateX(0px);
    }
    100% {
        opacity: 0;
        -webkit-transform: scale(1, 1) translateX(900%);
        transform: scale(1, 1) translateX(900%);
    }
}


@-webkit-keyframes tinLeftIn {
    0% {
        opacity: 0;
        -webkit-transform: scale(1, 1) translateX(-900%);
        transform: scale(1, 1) translateX(-900%);
    }
    50%, 70%, 90% {
        opacity: 1;
        -webkit-transform: scale(1.1, 1.1) translateX(0px);
        transform: scale(1.1, 1.1) translateX(0px);
    }
    60%, 80%, 100% {
        opacity: 1;
        -webkit-transform: scale(1, 1) translateX(0px);
        transform: scale(1, 1) translateX(0px);
    }
}
@keyframes tinLeftIn {
    0% {
        opacity: 0;
        -webkit-transform: scale(1, 1) translateX(-900%);
        transform: scale(1, 1) translateX(-900%);
    }
    50%, 70%, 90% {
        opacity: 1;
        -webkit-transform: scale(1.1, 1.1) translateX(0px);
        transform: scale(1.1, 1.1) translateX(0px);
    }
    60%, 80%, 100% {
        opacity: 1;
        -webkit-transform: scale(1, 1) translateX(0px);
        transform: scale(1, 1) translateX(0px);
    }
}
@-webkit-keyframes tinLeftOut {
    0%, 20%, 40%, 50% {
        opacity: 1;
        -webkit-transform: scale(1, 1) translateX(0px);
        transform: scale(1, 1) translateX(0px);
    }
    10%, 30% {
        opacity: 1;
        -webkit-transform: scale(1.1, 1.1) translateX(0px);
        transform: scale(1.1, 1.1) translateX(0px);
    }
    100% {
        opacity: 0;
        -webkit-transform: scale(1, 1) translateX(-900%);
        transform: scale(1, 1) translateX(-900%);
    }
}
@keyframes tinLeftOut {
    0%, 20%, 40%, 50% {
        opacity: 1;
        -webkit-transform: scale(1, 1) translateX(0px);
        transform: scale(1, 1) translateX(0px);
    }
    10%, 30% {
        opacity: 1;
        -webkit-transform: scale(1.1, 1.1) translateX(0px);
        transform: scale(1.1, 1.1) translateX(0px);
    }
    100% {
        opacity: 0;
        -webkit-transform: scale(1, 1) translateX(-900%);
        transform: scale(1, 1) translateX(-900%);
    }
}

@-webkit-keyframes tinTopIn {
    0% {
        opacity: 0;
        -webkit-transform: scale(1, 1) translateY(-900%);
        transform: scale(1, 1) translateY(-900%);
    }
    50%, 70%, 90% {
        opacity: 1;
        -webkit-transform: scale(1.1, 1.1) translateY(0px);
        transform: scale(1.1, 1.1) translateY(0px);
    }
    60%, 80%, 100% {
        opacity: 1;
        -webkit-transform: scale(1, 1) translateY(0px);
        transform: scale(1, 1) translateY(0px);
    }
}
@keyframes tinTopIn {
    0% {
        opacity: 0;
        -webkit-transform: scale(1, 1) translateY(-900%);
        transform: scale(1, 1) translateY(-900%);
    }
    50%, 70%, 90% {
        opacity: 1;
        -webkit-transform: scale(1.1, 1.1) translateY(0px);
        transform: scale(1.1, 1.1) translateY(0px);
    }
    60%, 80%, 100% {
        opacity: 1;
        -webkit-transform: scale(1, 1) translateY(0px);
        transform: scale(1, 1) translateY(0px);
    }
}
@-webkit-keyframes tinTopOut {
    0%, 20%, 40%, 50% {
        opacity: 1;
        -webkit-transform: scale(1, 1) translateY(0px);
        transform: scale(1, 1) translateY(0px);
    }
    10%, 30% {
        opacity: 1;
        -webkit-transform: scale(1.1, 1.1) translateY(0px);
        transform: scale(1.1, 1.1) translateY(0px);
    }
    100% {
        opacity: 0;
        -webkit-transform: scale(1, 1) translateY(-900%);
        transform: scale(1, 1) translateY(-900%);
    }
}
@keyframes tinTopOut {
    0%, 20%, 40%, 50% {
        opacity: 1;
        -webkit-transform: scale(1, 1) translateY(0px);
        transform: scale(1, 1) translateY(0px);
    }
    10%, 30% {
        opacity: 1;
        -webkit-transform: scale(1.1, 1.1) translateY(0px);
        transform: scale(1.1, 1.1) translateY(0px);
    }
    100% {
        opacity: 0;
        -webkit-transform: scale(1, 1) translateY(-900%);
        transform: scale(1, 1) translateY(-900%);
    }
}

@-webkit-keyframes tinBottomIn {
    0% {
        opacity: 0;
        -webkit-transform: scale(1, 1) translateY(900%);
        transform: scale(1, 1) translateY(900%);
    }
    50%, 70%, 90% {
        opacity: 1;
        -webkit-transform: scale(1.1, 1.1) translateY(0px);
        transform: scale(1.1, 1.1) translateY(0px);
    }
    60%, 80%, 100% {
        opacity: 1;
        -webkit-transform: scale(1, 1) translateY(0px);
        transform: scale(1, 1) translateY(0px);
    }
}

@keyframes tinBottomIn {
    0% {
        opacity: 0;
        -webkit-transform: scale(1, 1) translateY(900%);
        transform: scale(1, 1) translateY(900%);
    }
    50%, 70%, 90% {
        opacity: 1;
        -webkit-transform: scale(1.1, 1.1) translateY(0px);
        transform: scale(1.1, 1.1) translateY(0px);
    }
    60%, 80%, 100% {
        opacity: 1;
        -webkit-transform: scale(1, 1) translateY(0px);
        transform: scale(1, 1) translateY(0px);
    }
}
@-webkit-keyframes tinBottomOut {
    0%, 20%, 40%, 50% {
        opacity: 1;
        -webkit-transform: scale(1, 1) translateY(0px);
        transform: scale(1, 1) translateY(0px);
    }
    10%, 30% {
        opacity: 1;
        -webkit-transform: scale(1.1, 1.1) translateY(0px);
        transform: scale(1.1, 1.1) translateY(0px);
    }
    100% {
        opacity: 0;
        -webkit-transform: scale(1, 1) translateY(900%);
        transform: scale(1, 1) translateY(900%);
    }
}
@keyframes tinBottomOut {
    0%, 20%, 40%, 50% {
        opacity: 1;
        -webkit-transform: scale(1, 1) translateY(0px);
        transform: scale(1, 1) translateY(0px);
    }
    10%, 30% {
        opacity: 1;
        -webkit-transform: scale(1.1, 1.1) translateY(0px);
        transform: scale(1.1, 1.1) translateY(0px);
    }
    100% {
        opacity: 0;
        -webkit-transform: scale(1, 1) translateY(900%);
        transform: scale(1, 1) translateY(900%);
    }
}