/**
 * Bounce animation
 */
.mcs-bounce[data-mode="animation"] .mcs-item[data-action="exit"] {
    -webkit-animation-timing-function: cubic-bezier(.84,0,1,1);
            animation-timing-function: cubic-bezier(.84,0,1,1);
    -webkit-animation-duration: 0.4s;
            animation-duration: 0.4s;
    -webkit-animation-delay: 0s;
            animation-delay: 0s;
}

.mcs-bounce[data-mode="animation"] .mcs-item[data-action="enter"] {
    -webkit-animation-timing-function: cubic-bezier(.12,.37,.25,1);
            animation-timing-function: cubic-bezier(.12,.37,.25,1);
    -webkit-animation-duration: 0.4s;
            animation-duration: 0.4s;
}

/* Horizontal Forward */
.mcs-bounce.MagicScroll-horizontal[data-mode="animation"] [data-forward] .mcs-item[data-action="exit"] {
    -webkit-animation-name: h-forward-exit-bounce;
            animation-name: h-forward-exit-bounce;
}
.mcs-bounce.MagicScroll-horizontal[data-mode="animation"] [data-forward] .mcs-item[data-action="enter"] {
    -webkit-animation-name: h-forward-enter-bounce;
            animation-name: h-forward-enter-bounce;
}

@-webkit-keyframes h-forward-exit-bounce {
    0% {
        opacity: 1;
        -webkit-transform: translateX(0);
                transform: translateX(0);
    }
    40% {
        opacity: 0.6;
    }
    100% {
        opacity: 0;
        -webkit-transform: translateX(-2000px);
                transform: translateX(-2000px);
    }
}
@keyframes h-forward-exit-bounce {
    0% {
        opacity: 1;
        -webkit-transform: translateX(0);
                transform: translateX(0);
    }
    40% {
        opacity: 0.6;
    }
    100% {
        opacity: 0;
        -webkit-transform: translateX(-2000px);
                transform: translateX(-2000px);
    }
}
@-webkit-keyframes h-forward-enter-bounce {
    0%   {
        opacity: 0;
        -webkit-transform: translateX(3000px);
                transform: translateX(3000px);
    }
    60% {
        opacity: 1;
        -webkit-transform: translateX(-30px);
                transform: translateX(-30px);
    }
    75% {
        -webkit-transform:translateX(10px);
                transform:translateX(10px);
    }
    90% {
        -webkit-transform:translateX(-5px);
                transform:translateX(-5px);
    }
    100%   {
        -webkit-transform:translateX(0px);
                transform:translateX(0px);
    }
}
@keyframes h-forward-enter-bounce {
    0%   {
        opacity: 0;
        -webkit-transform: translateX(3000px);
                transform: translateX(3000px);
    }
    60% {
        opacity: 1;
        -webkit-transform: translateX(-30px);
                transform: translateX(-30px);
    }
    75% {
        -webkit-transform:translateX(10px);
                transform:translateX(10px);
    }
    90% {
        -webkit-transform:translateX(-5px);
                transform:translateX(-5px);
    }
    100%   {
        -webkit-transform:translateX(0px);
                transform:translateX(0px);
    }
}

/* Horizontal Backward */
.mcs-bounce.MagicScroll-horizontal[data-mode="animation"] [data-backward] .mcs-item[data-action="exit"] {
    -webkit-animation-name: h-backward-exit-bounce;
            animation-name: h-backward-exit-bounce;
}
.mcs-bounce.MagicScroll-horizontal[data-mode="animation"] [data-backward] .mcs-item[data-action="enter"] {
    -webkit-animation-name: h-backward-enter-bounce;
            animation-name: h-backward-enter-bounce;
}
@-webkit-keyframes h-backward-exit-bounce {
    0% {
        opacity: 1;
        -webkit-transform: translateX(0);
                transform: translateX(0);
    }
    40% {
        opacity: 0.6;
    }
    100% {
        opacity: 0;
        -webkit-transform: translateX(2000px);
                transform: translateX(2000px);
    }
}
@keyframes h-backward-exit-bounce {
    0% {
        opacity: 1;
        -webkit-transform: translateX(0);
                transform: translateX(0);
    }
    40% {
        opacity: 0.6;
    }
    100% {
        opacity: 0;
        -webkit-transform: translateX(2000px);
                transform: translateX(2000px);
    }
}
@-webkit-keyframes h-backward-enter-bounce {
    0%   {
        opacity: 0;
        -webkit-transform: translateX(-3000px);
                transform: translateX(-3000px);
    }
    60% {
        opacity: 1;
        -webkit-transform: translateX(30px);
                transform: translateX(30px);
    }
    75% {
        -webkit-transform:translateX(-10px);
                transform:translateX(-10px);
    }
    90% {
        -webkit-transform:translateX(5px);
                transform:translateX(5px);
    }
    100%   {
        -webkit-transform:translateX(0px);
                transform:translateX(0px);
    }
}
@keyframes h-backward-enter-bounce {
    0%   {
        opacity: 0;
        -webkit-transform: translateX(-3000px);
                transform: translateX(-3000px);
    }
    60% {
        opacity: 1;
        -webkit-transform: translateX(30px);
                transform: translateX(30px);
    }
    75% {
        -webkit-transform:translateX(-10px);
                transform:translateX(-10px);
    }
    90% {
        -webkit-transform:translateX(5px);
                transform:translateX(5px);
    }
    100%   {
        -webkit-transform:translateX(0px);
                transform:translateX(0px);
    }
}

/* Vertical Forward */
.mcs-bounce.MagicScroll-vertical[data-mode="animation"] [data-forward] div[data-action="exit"] {
    -webkit-animation-name: v-forward-exit-bounce;
            animation-name: v-forward-exit-bounce;
}
.mcs-bounce.MagicScroll-vertical[data-mode="animation"] [data-forward] div[data-action="enter"] {
    -webkit-animation-name: v-forward-enter-bounce;
            animation-name: v-forward-enter-bounce;
}
.mcs-bounce.MagicScroll-vertical[data-mode="animation"] [data-forward] [data-entering] {
    -webkit-transform: translateY(100000px);
            transform: translateY(100000px);
}
.mcs-bounce.MagicScroll-vertical[data-mode="animation"] [data-forward] [data-exited] {
    -webkit-transform: translateY(100000px);
            transform: translateY(100000px);
}
@-webkit-keyframes v-forward-exit-bounce {
    0% {
        opacity: 1;
        -webkit-transform: translateY(0);
                transform: translateY(0);
    }
    40% {
        opacity: 0.6;
    }
    100% {
        opacity: 0;
        -webkit-transform: translateY(-2000px);
                transform: translateY(-2000px);
    }
}
@keyframes v-forward-exit-bounce {
    0% {
        opacity: 1;
        -webkit-transform: translateY(0);
                transform: translateY(0);
    }
    40% {
        opacity: 0.6;
    }
    100% {
        opacity: 0;
        -webkit-transform: translateY(-2000px);
                transform: translateY(-2000px);
    }
}
@-webkit-keyframes v-forward-enter-bounce {
    0%   {
        opacity: 0;
        -webkit-transform: translateY(3000px);
                transform: translateY(3000px);
    }
    60% {
        opacity: 1;
        -webkit-transform: translateY(-30px);
                transform: translateY(-30px);
    }
    75% {
        -webkit-transform:translateY(10px);
                transform:translateY(10px);
    }
    90% {
        -webkit-transform:translateY(-5px);
                transform:translateY(-5px);
    }
    100%   {
        -webkit-transform:translateY(0px);
                transform:translateY(0px);
    }
}
@keyframes v-forward-enter-bounce {
    0%   {
        opacity: 0;
        -webkit-transform: translateY(3000px);
                transform: translateY(3000px);
    }
    60% {
        opacity: 1;
        -webkit-transform: translateY(-30px);
                transform: translateY(-30px);
    }
    75% {
        -webkit-transform:translateY(10px);
                transform:translateY(10px);
    }
    90% {
        -webkit-transform:translateY(-5px);
                transform:translateY(-5px);
    }
    100%   {
        -webkit-transform:translateY(0px);
                transform:translateY(0px);
    }
}

/* Vertical Backward */
.mcs-bounce.MagicScroll-vertical[data-mode="animation"] [data-backward] div[data-action="exit"] {
    -webkit-animation-name: v-backward-exit-bounce;
            animation-name: v-backward-exit-bounce;
}
.mcs-bounce.MagicScroll-vertical[data-mode="animation"] [data-backward] div[data-action="enter"] {
    -webkit-animation-name: v-backward-enter-bounce;
            animation-name: v-backward-enter-bounce;
}
@-webkit-keyframes v-backward-exit-bounce {
    0% {
        opacity: 1;
        -webkit-transform: translateY(0);
                transform: translateY(0);
    }
    40% {
        opacity: 0.6;
    }
    100% {
        opacity: 0;
        -webkit-transform: translateY(2000px);
                transform: translateY(2000px);
    }
}
@keyframes v-backward-exit-bounce {
    0% {
        opacity: 1;
        -webkit-transform: translateY(0);
                transform: translateY(0);
    }
    40% {
        opacity: 0.6;
    }
    100% {
        opacity: 0;
        -webkit-transform: translateY(2000px);
                transform: translateY(2000px);
    }
}
@-webkit-keyframes v-backward-enter-bounce {
    0%   {
        opacity: 0;
        -webkit-transform: translateY(-3000px);
                transform: translateY(-3000px);
    }
    60% {
        opacity: 1;
        -webkit-transform: translateY(30px);
                transform: translateY(30px);
    }
    75% {
        -webkit-transform:translateY(-10px);
                transform:translateY(-10px);
    }
    90% {
        -webkit-transform:translateY(5px);
                transform:translateY(5px);
    }
    100%   {
        -webkit-transform:translateY(0px);
                transform:translateY(0px);
    }
}
@keyframes v-backward-enter-bounce {
    0%   {
        opacity: 0;
        -webkit-transform: translateY(-3000px);
                transform: translateY(-3000px);
    }
    60% {
        opacity: 1;
        -webkit-transform: translateY(30px);
                transform: translateY(30px);
    }
    75% {
        -webkit-transform:translateY(-10px);
                transform:translateY(-10px);
    }
    90% {
        -webkit-transform:translateY(5px);
                transform:translateY(5px);
    }
    100%   {
        -webkit-transform:translateY(0px);
                transform:translateY(0px);
    }
}