.hover-effect[data-effect-name='direction-top'] > .smAreaC:last-of-type {
    opacity: 0;
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%);
    pointer-events: none;
}

.hover-effect[data-effect-name='direction-top']:hover > .smAreaC:last-of-type {
    opacity: 1;
    z-index: 2;
    -webkit-transform: translateY(0);
    transform: translateY(0);
    pointer-events: auto;
}

.hover-effect[data-effect-name='direction-right'] > .smAreaC:last-of-type {
    opacity: 0;
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
    pointer-events: none;
}

.hover-effect[data-effect-name='direction-right']:hover > .smAreaC:last-of-type {
    opacity: 1;
    z-index: 2;
    -webkit-transform: translateX(0);
    transform: translateX(0);
    pointer-events: auto;
}

.hover-effect[data-effect-name='direction-bottom'] > .smAreaC:last-of-type {
    opacity: 0;
    -webkit-transform: translateY(100%);
    transform: translateY(100%);
    pointer-events: none;
}

.hover-effect[data-effect-name='direction-bottom']:hover > .smAreaC:last-of-type {
    opacity: 1;
    z-index: 2;
    -webkit-transform: translateY(0);
    transform: translateY(0);
    pointer-events: auto;
}


.hover-effect[data-effect-name='direction-left'] > .smAreaC:last-of-type {
    opacity: 0;
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
    pointer-events: none;
}

.hover-effect[data-effect-name='direction-left']:hover > .smAreaC:last-of-type {
    opacity: 1;
    z-index: 2;
    -webkit-transform: translateX(0);
    transform: translateX(0);
    pointer-events: auto;
}

.hover-effect[data-effect-name='fade-in'] > .smAreaC:last-of-type {
    opacity: 0
}

.hover-effect[data-effect-name='fade-in']:hover > .smAreaC:last-of-type {
    opacity: 1;
    z-index: 2;
    -webkit-animation: fadeIn 1s ease-in-out;
    animation: fadeIn 1s ease-in-out
}

.hover-effect[data-effect-name='fade-out'] > .smAreaC:first-of-type {
    z-index: 2;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out
}

.hover-effect[data-effect-name='fade-out']:hover > .smAreaC:first-of-type {
    -webkit-transform: scale(2);
    transform: scale(2);
    opacity: 0;
    z-index: -1;
}
.hover-effect[data-effect-name='fade-out']:hover > .smAreaC:last-of-type {
    z-index: 2;
    opacity: 1;
}

.hover-effect[data-effect-name='filp-top'] > .smAreaC:last-of-type {
    opacity: 0;
    -webkit-transform-origin: 50% 0;
    transform-origin: 50% 0;
    -webkit-transform: perspective(900px) rotateX(180deg);
    transform: perspective(900px) rotateX(180deg);
    pointer-events: none;
}

.hover-effect[data-effect-name='filp-top']:hover > .smAreaC:last-of-type {
    opacity: 1;
    z-index: 2;
    -webkit-transform: perspective(900px) rotateX(0);
    transform: perspective(900px) rotateX(0);
    -webkit-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
    pointer-events: auto;
}

.hover-effect[data-effect-name='filp-right'] > .smAreaC:last-of-type {
    opacity: 0;
    -webkit-transform-origin: 100% 50%;
    transform-origin: 100% 50%;
    -webkit-transform: perspective(900px) rotateY(180deg);
    transform: perspective(900px) rotateY(180deg);
    pointer-events: none;
}

.hover-effect[data-effect-name='filp-right']:hover > .smAreaC:last-of-type {
    opacity: 1;
    z-index: 2;
    -webkit-transform: perspective(900px) rotateY(0);
    transform: perspective(900px) rotateY(0);
    -webkit-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
    pointer-events: auto;
}

.hover-effect[data-effect-name='filp-bottom'] > .smAreaC:last-of-type {
    opacity: 0;
    -webkit-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
    -webkit-transform: perspective(900px) rotateX(-180deg);
    transform: perspective(900px) rotateX(-180deg);
    pointer-events: none;
}

.hover-effect[data-effect-name='filp-bottom']:hover > .smAreaC:last-of-type {
    opacity: 1;
    z-index: 2;
    -webkit-transform: perspective(900px) rotateX(0);
    transform: perspective(900px) rotateX(0);
    -webkit-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
    pointer-events: auto;
}

.hover-effect[data-effect-name='filp-left'] > .smAreaC:last-of-type {
    opacity: 0;
    -webkit-transform-origin: 0 50%;
    transform-origin: 0 50%;
    -webkit-transform: perspective(900px) rotateY(-180deg);
    transform: perspective(900px) rotateY(-180deg);
    pointer-events: none;
}

.hover-effect[data-effect-name='filp-left']:hover > .smAreaC:last-of-type {
    opacity: 1;
    z-index: 2;
    -webkit-transform: perspective(900px) rotateY(0);
    transform: perspective(900px) rotateY(0);
    -webkit-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
    pointer-events: auto;
}

.hover-effect[data-effect-name='filp-origin'] > .smAreaC:first-of-type {
    z-index: 3;
    -webkit-backface-visibility: visible;
    backface-visibility: visible;
    -webkit-transition: -webkit-transform 0.5s ease-in-out;
    transition: -webkit-transform 0.5s ease-in-out;
    transition: transform 0.5s ease-in-out;
    transition: transform 0.5s ease-in-out, -webkit-transform 0.5s ease-in-out
}

.hover-effect[data-effect-name='filp-origin']:hover > .smAreaC:first-of-type {
    opacity: 0;
    -webkit-animation: ladderin 0.5s ease-in-out;
    animation: ladderin 0.5s ease-in-out
}

    .hover-effect[data-effect-name='filp-origin'] > .smAreaC:last-of-type{
        z-index: 2;
        opacity: 1;
    }

    .hover-effect[data-effect-name='slash-fly-out'] > .smAreaC:first-of-type {
        z-index: 3;
        -webkit-backface-visibility: visible;
        backface-visibility: visible;
        -webkit-transition: -webkit-transform 0.5s ease-in-out;
        transition: -webkit-transform 0.5s ease-in-out;
        transition: transform 0.5s ease-in-out;
        transition: transform 0.5s ease-in-out, -webkit-transform 0.5s ease-in-out
    }

.hover-effect[data-effect-name='slash-fly-out'] > .smAreaC:last-of-type {
    z-index: 2;
    opacity: 1;
}

.hover-effect[data-effect-name='slash-fly-out']:hover > .smAreaC:first-of-type {
    -webkit-animation: bombout 1s both;
    animation: bombout 1s both;
    pointer-events: none;
}

@-webkit-keyframes fadeIn {
    0% {
        opacity: 0;
        z-index: -1
    }

    40% {
        opacity: 1;
        z-index: 2;
        -webkit-transform: scale(1.2);
        transform: scale(1.2)
    }

    100% {
        opacity: 1;
        z-index: 2;
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}

@keyframes fadeIn {
    0% {
        opacity: 0;
        z-index: -1
    }

    40% {
        opacity: 1;
        z-index: 2;
        -webkit-transform: scale(1.2);
        transform: scale(1.2)
    }

    100% {
        opacity: 1;
        z-index: 2;
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}

@-webkit-keyframes ladderin {
    0% {
        opacity: 1;
        -webkit-transform-origin: 0 0;
        transform-origin: 0 0;
        -webkit-transform: perspective(800px) rotate(0) translateZ(0);
        transform: perspective(800px) rotate(0) translateZ(0)
    }

    100% {
        opacity: 0;
        -webkit-transform-origin: 50% 0;
        transform-origin: 50% 0;
        -webkit-transform: perspective(800px) rotateY(180deg) translateZ(300px);
        transform: perspective(800px) rotateY(180deg) translateZ(300px)
    }
}

@keyframes ladderin {
    0% {
        opacity: 1;
        -webkit-transform-origin: 0 0;
        transform-origin: 0 0;
        -webkit-transform: perspective(800px) rotate(0) translateZ(0);
        transform: perspective(800px) rotate(0) translateZ(0)
    }

    100% {
        opacity: 0;
        -webkit-transform-origin: 50% 0;
        transform-origin: 50% 0;
        -webkit-transform: perspective(800px) rotateY(180deg) translateZ(300px);
        transform: perspective(800px) rotateY(180deg) translateZ(300px)
    }
}

@-webkit-keyframes bombout {
    0% {
        opacity: 1;
        -webkit-transform-origin: 50% 50%;
        transform-origin: 50% 50%;
        -webkit-transform: rotate(0);
        transform: rotate(0)
    }

    50% {
        opacity: 1;
        -webkit-transform-origin: 200% 50%;
        transform-origin: 200% 50%;
        -webkit-transform: rotate(160deg);
        transform: rotate(160deg)
    }

    100% {
        opacity: 0;
        -webkit-transform-origin: 200% 50%;
        transform-origin: 200% 50%;
        -webkit-transform: rotate(160deg);
        transform: rotate(160deg)
    }
}

@keyframes bombout {
    0% {
        opacity: 1;
        -webkit-transform-origin: 50% 50%;
        transform-origin: 50% 50%;
        -webkit-transform: rotate(0);
        transform: rotate(0)
    }

    50% {
        opacity: 1;
        -webkit-transform-origin: 200% 50%;
        transform-origin: 200% 50%;
        -webkit-transform: rotate(160deg);
        transform: rotate(160deg)
    }

    100% {
        opacity: 0;
        -webkit-transform-origin: 200% 50%;
        transform-origin: 200% 50%;
        -webkit-transform: rotate(160deg);
        transform: rotate(160deg)
    }
}