/* 4 classes: navInLeft, navInRight, navOutLeft, navOutRight */


/*****************************************/


/* Corner scale */


/*****************************************/

.fxCorner .navOutNext {
    -webkit-transform-origin: 0% 100%;
    transform-origin: 0% 100%;
    -webkit-animation: cornerScaleDown 0.3s forwards ease-in-out;
    animation: cornerScaleDown 0.3s forwards ease-in-out;
}

.fxCorner .navInNext {
    opacity: 1;
    -webkit-transform-origin: 100% 0%;
    transform-origin: 100% 0%;
    -webkit-animation: cornerScaleUp 0.3s 0.1s forwards ease-in-out;
    animation: cornerScaleUp 0.3s 0.1s forwards ease-in-out;
}

.fxCorner .navOutPrev {
    -webkit-transform-origin: 100% 0%;
    transform-origin: 100% 0%;
    -webkit-animation: cornerScaleDown 0.3s forwards ease-in-out;
    animation: cornerScaleDown 0.3s forwards ease-in-out;
}

.fxCorner .navInPrev {
    opacity: 1;
    -webkit-transform-origin: 0% 100%;
    transform-origin: 0% 100%;
    -webkit-animation: cornerScaleUp 0.3s 0.1s forwards ease-in-out;
    animation: cornerScaleUp 0.3s 0.1s forwards ease-in-out;
}

@-webkit-keyframes cornerScaleUp {
    from {
        -webkit-transform: scale(0);
    }
    to {
        -webkit-transform: scale(1);
    }
}

@keyframes cornerScaleUp {
    from {
        transform: scale(0);
    }
    to {
        transform: scale(1);
    }
}

@-webkit-keyframes cornerScaleDown {
    50% {
        -webkit-transform: scale(1.1);
    }
    100% {
        -webkit-transform: scale(0);
    }
}

@keyframes cornerScaleDown {
    50% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(0);
    }
}


/*****************************************/


/* Vertical scale */


/*****************************************/

.fxVScale .navOutNext {
    -webkit-animation: scaleDownNext 0.3s forwards ease-in-out;
    animation: scaleDownNext 0.3s forwards ease-in-out;
}

.fxVScale .navInNext {
    -webkit-animation: scaleUpNext 0.3s 0.2s forwards ease-in-out;
    animation: scaleUpNext 0.3s 0.2s forwards ease-in-out;
}

.fxVScale .navOutPrev {
    -webkit-animation: scaleDownPrev 0.3s forwards ease-in-out;
    animation: scaleDownPrev 0.3s forwards ease-in-out;
}

.fxVScale .navInPrev {
    -webkit-animation: scaleUpPrev 0.3s 0.2s forwards ease-in-out;
    animation: scaleUpPrev 0.3s 0.2s forwards ease-in-out;
}

@-webkit-keyframes scaleDownNext {
    50% {
        -webkit-transform: translateY(-25%) scale(1.1);
        opacity: 1;
    }
    100% {
        -webkit-transform: translateY(75%) scale(0);
        opacity: 0;
    }
}

@keyframes scaleDownNext {
    50% {
        transform: translateY(-25%) scale(1.1);
        opacity: 1;
    }
    100% {
        transform: translateY(75%) scale(0);
        opacity: 0;
    }
}

@-webkit-keyframes scaleUpNext {
    from {
        -webkit-transform: translateY(-75%) scale(0);
    }
    to {
        -webkit-transform: translateY(0) scale(1);
        opacity: 1;
    }
}

@keyframes scaleUpNext {
    from {
        transform: translateY(-75%) scale(0);
    }
    to {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
}

@-webkit-keyframes scaleDownPrev {
    50% {
        -webkit-transform: translateY(25%) scale(1.1);
        opacity: 1;
    }
    100% {
        -webkit-transform: translateY(-75%) scale(0);
        opacity: 0;
    }
}

@keyframes scaleDownPrev {
    50% {
        transform: translateY(25%) scale(1.1);
        opacity: 1;
    }
    100% {
        transform: translateY(-75%) scale(0);
        opacity: 0;
    }
}

@-webkit-keyframes scaleUpPrev {
    from {
        -webkit-transform: translateY(75%) scale(0);
    }
    to {
        -webkit-transform: translateY(0) scale(1);
        opacity: 1;
    }
}

@keyframes scaleUpPrev {
    from {
        transform: translateY(75%) scale(0);
    }
    to {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
}


/*****************************************/


/* Fall */


/*****************************************/

.fxFall .navOutNext {
    -webkit-animation: slideDown 0.4s forwards;
    animation: slideDown 0.4s forwards;
}

.fxFall .navInNext {
    -webkit-animation: showUp 0.4s forwards;
    animation: showUp 0.4s forwards;
}

.fxFall .navOutPrev {
    -webkit-animation: hideDown 0.4s forwards;
    animation: hideDown 0.4s forwards;
}

.fxFall .navInPrev {
    -webkit-animation: slideUp 0.4s forwards;
    animation: slideUp 0.4s forwards;
}

@-webkit-keyframes slideDown {
    to {
        -webkit-transform: translateY(150%);
        opacity: 0;
    }
}

@keyframes slideDown {
    to {
        transform: translateY(150%);
        opacity: 0;
    }
}

@-webkit-keyframes showUp {
    from {
        -webkit-transform: scale(0.5);
    }
    to {
        -webkit-transform: scale(1);
        opacity: 1;
    }
}

@keyframes showUp {
    from {
        transform: scale(0.5);
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

@-webkit-keyframes hideDown {
    to {
        -webkit-transform: scale(0.5);
        opacity: 0;
    }
}

@keyframes hideDown {
    to {
        transform: scale(0.5);
        opacity: 0;
    }
}

@-webkit-keyframes slideUp {
    from {
        -webkit-transform: translateY(150%);
    }
    to {
        -webkit-transform: translateY(0%);
        opacity: 1;
    }
}

@keyframes slideUp {
    from {
        transform: translateY(150%);
    }
    to {
        transform: translateY(0%);
        opacity: 1;
    }
}


/*****************************************/


/* Forward pulse */


/*****************************************/

.fxFPulse .navOutNext {
    -webkit-animation: elastScaleUp 0.4s forwards;
    animation: elastScaleUp 0.4s forwards;
}

.fxFPulse .navInNext {
    -webkit-animation: growUp 0.4s 0.3s forwards;
    animation: growUp 0.4s 0.3s forwards;
}

.fxFPulse .navOutPrev {
    -webkit-animation: elastScaleDown 0.4s forwards;
    animation: elastScaleDown 0.4s forwards;
}

.fxFPulse .navInPrev {
    -webkit-animation: growDown 0.4s 0.3s forwards;
    animation: growDown 0.4s 0.3s forwards;
}

@-webkit-keyframes elastScaleUp {
    30% {
        -webkit-transform: scale(0.7);
        opacity: 1;
    }
    100% {
        -webkit-transform: scale(1.3);
        opacity: 0;
    }
}

@keyframes elastScaleUp {
    30% {
        transform: scale(0.7);
        opacity: 1;
    }
    100% {
        transform: scale(1.3);
        opacity: 0;
    }
}

@-webkit-keyframes growUp {
    0% {
        -webkit-transform: scale(0);
    }
    100% {
        -webkit-transform: scale(1);
        opacity: 1;
    }
}

@keyframes growUp {
    0% {
        transform: scale(0);
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

@-webkit-keyframes elastScaleDown {
    30% {
        -webkit-transform: scale(1.3);
        opacity: .5;
    }
    100% {
        -webkit-transform: scale(0);
        opacity: 0;
    }
}

@keyframes elastScaleDown {
    30% {
        transform: scale(1.3);
        opacity: .5;
    }
    100% {
        transform: scale(0);
        opacity: 0;
    }
}

@-webkit-keyframes growDown {
    0% {
        -webkit-transform: scale(1.3);
    }
    100% {
        -webkit-transform: scale(1);
        opacity: 1;
    }
}

@keyframes growDown {
    0% {
        transform: scale(1.3);
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}


/*****************************************/


/* Rotate pulse */


/*****************************************/

.fxRPulse .navOutNext {
    -webkit-animation: elastScaleRotateUp 0.4s forwards;
    animation: elastScaleRotateUp 0.4s forwards;
}

.fxRPulse .navInNext {
    -webkit-animation: growRotateUp 0.4s 0.3s forwards;
    animation: growRotateUp 0.4s 0.3s forwards;
}

.fxRPulse .navOutPrev {
    -webkit-animation: elastScaleRotateDown 0.4s forwards;
    animation: elastScaleRotateDown 0.4s forwards;
}

.fxRPulse .navInPrev {
    -webkit-animation: growRotateDown 0.4s 0.3s forwards;
    animation: growRotateDown 0.4s 0.3s forwards;
}

@-webkit-keyframes elastScaleRotateUp {
    30% {
        -webkit-transform: rotate(5deg) scale(0.7);
        opacity: 1;
    }
    100% {
        -webkit-transform: rotate(25deg) scale(1.3);
        opacity: 0;
    }
}

@keyframes elastScaleRotateUp {
    30% {
        transform: rotate(5deg) scale(0.7);
        opacity: 1;
    }
    100% {
        transform: rotate(25deg) scale(1.3);
        opacity: 0;
    }
}

@-webkit-keyframes growRotateUp {
    0% {
        -webkit-transform: rotate(-25deg) scale(0);
    }
    100% {
        -webkit-transform: rotate(0deg) scale(1);
        opacity: 1;
    }
}

@keyframes growRotateUp {
    0% {
        transform: rotate(-25deg) scale(0);
    }
    100% {
        transform: rotate(0deg) scale(1);
        opacity: 1;
    }
}

@-webkit-keyframes elastScaleRotateDown {
    30% {
        -webkit-transform: rotate(-5deg) scale(1.3);
        opacity: .5;
    }
    100% {
        -webkit-transform: rotate(-25deg) scale(0);
        opacity: 0;
    }
}

@keyframes elastScaleRotateDown {
    30% {
        transform: rotate(-5deg) scale(1.3);
        opacity: .5;
    }
    100% {
        transform: rotate(-25deg) scale(0);
        opacity: 0;
    }
}

@-webkit-keyframes growRotateDown {
    0% {
        -webkit-transform: rotate(10deg) scale(1.3);
    }
    100% {
        -webkit-transform: rotate(0deg) scale(1);
        opacity: 1;
    }
}

@keyframes growRotateDown {
    0% {
        transform: rotate(10deg) scale(1.3);
    }
    100% {
        transform: rotate(0deg) scale(1);
        opacity: 1;
    }
}


/*****************************************/


/* Hearbeat */


/*****************************************/

.fxHearbeat .navOutNext {
    -webkit-animation: scaleUpDown 0.4s forwards ease-in;
    animation: scaleUpDown 0.4s forwards ease-in;
}

.fxHearbeat .navInNext {
    -webkit-animation: growUp 0.4s 0.3s forwards;
    animation: growUp 0.4s 0.3s forwards;
}

.fxHearbeat .navOutPrev {
    -webkit-animation: scaleUpDown 0.4s forwards ease-in;
    animation: scaleUpDown 0.4s forwards ease-in;
}

.fxHearbeat .navInPrev {
    -webkit-animation: growUp 0.4s 0.3s forwards;
    animation: growUp 0.4s 0.3s forwards;
}

@-webkit-keyframes scaleUpDown {
    70% {
        -webkit-transform: scale(1.3);
        opacity: .8;
    }
    80% {
        -webkit-transform: scale(1);
        opacity: 1;
        -webkit-animation-timing-function: ease-out;
    }
    100% {
        -webkit-transform: scale(0.5);
        opacity: 0;
        -webkit-animation-timing-function: ease-out;
    }
}

@keyframes scaleUpDown {
    70% {
        transform: scale(1.3);
        opacity: .8;
    }
    80% {
        transform: scale(1);
        opacity: 1;
        animation-timing-function: ease-out;
    }
    100% {
        transform: scale(0.5);
        opacity: 0;
        animation-timing-function: ease-out;
    }
}


/*****************************************/


/* coverflow */


/*****************************************/

.fxCoverflow .itemwrap {
    -webkit-perspective: 1400px;
    perspective: 1400px;
}

.fxCoverflow .navOutNext {
    -webkit-animation: rotate3DSlideOutLeft 0.8s forwards;
    animation: rotate3DSlideOutLeft 0.8s forwards;
}

.fxCoverflow .navInNext {
    -webkit-animation: rotate3DSlideInRight 0.8s 0.1s forwards;
    animation: rotate3DSlideInRight 0.8s 0.1s forwards;
}

.fxCoverflow .navOutPrev {
    -webkit-animation: rotate3DSlideOutRight 0.8s forwards;
    animation: rotate3DSlideOutRight 0.8s forwards;
}

.fxCoverflow .navInPrev {
    -webkit-animation: rotate3DSlideInLeft 0.8s 0.1s forwards;
    animation: rotate3DSlideInLeft 0.8s 0.1s forwards;
}

@-webkit-keyframes rotate3DSlideOutLeft {
    to {
        -webkit-transform: translateX(-40%) rotateY(45deg) translateZ(-300px);
        opacity: 0;
    }
}

@keyframes rotate3DSlideOutLeft {
    to {
        transform: translateX(-40%) rotateY(45deg) translateZ(-300px);
        opacity: 0;
    }
}

@-webkit-keyframes rotate3DSlideInRight {
    from {
        -webkit-transform: translateX(40%) rotateY(-45deg) translateZ(-300px);
    }
    to {
        -webkit-transform: translateX(0) rotateY(0deg) translateZ(0);
        opacity: 1;
    }
}

@keyframes rotate3DSlideInRight {
    from {
        transform: translateX(40%) rotateY(-45deg) translateZ(-300px);
    }
    to {
        transform: translateX(0) rotateY(0deg) translateZ(0);
        opacity: 1;
    }
}

@-webkit-keyframes rotate3DSlideOutRight {
    to {
        -webkit-transform: translateX(40%) rotateY(-45deg) translateZ(-300px);
        opacity: 0;
    }
}

@keyframes rotate3DSlideOutRight {
    to {
        transform: translateX(40%) rotateY(-45deg) translateZ(-300px);
        opacity: 0;
    }
}

@-webkit-keyframes rotate3DSlideInLeft {
    from {
        -webkit-transform: translateX(-40%) rotateY(45deg) translateZ(-300px);
    }
    to {
        -webkit-transform: translateX(0) rotateY(0deg) translateZ(0);
        opacity: 1;
    }
}

@keyframes rotate3DSlideInLeft {
    from {
        transform: translateX(-40%) rotateY(45deg) translateZ(-300px);
    }
    to {
        transform: translateX(0) rotateY(0deg) translateZ(0);
        opacity: 1;
    }
}


/*****************************************/


/* Rotate me softly */


/*****************************************/

.fxRotateSoftly .itemwrap {
    -webkit-perspective: 1600px;
    perspective: 1600px;
}

.fxRotateSoftly .navOutNext {
    -webkit-animation: rotate3DOutRight 1s forwards cubic-bezier(0.7, 0, 0.3, 1);
    animation: rotate3DOutRight 1s forwards cubic-bezier(0.7, 0, 0.3, 1);
}

.fxRotateSoftly .navInNext {
    -webkit-animation: slideInFromLeft 0.4s 0.5s forwards cubic-bezier(0, 0, 0, 1);
    animation: slideInFromLeft 0.4s 0.5s forwards cubic-bezier(0, 0, 0, 1);
}

.fxRotateSoftly .navOutPrev {
    -webkit-animation: rotate3DOutLeft 1s forwards cubic-bezier(0.7, 0, 0.3, 1);
    animation: rotate3DOutLeft 1s forwards cubic-bezier(0.7, 0, 0.3, 1);
}

.fxRotateSoftly .navInPrev {
    -webkit-animation: slideInFromRight 0.4s 0.5s forwards cubic-bezier(0, 0, 0, 1);
    animation: slideInFromRight 0.4s 0.5s forwards cubic-bezier(0, 0, 0, 1);
}

@-webkit-keyframes rotate3DOutRight {
    to {
        -webkit-transform: translate(50%) rotateY(-70deg) rotateX(20deg) translateZ(-300px);
        opacity: 0;
    }
}

@keyframes rotate3DOutRight {
    to {
        transform: translate(50%) rotateY(-70deg) rotateX(20deg) translateZ(-300px);
        opacity: 0;
    }
}

@-webkit-keyframes slideInFromLeft {
    from {
        -webkit-transform: translateX(-200%);
    }
    to {
        -webkit-transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideInFromLeft {
    from {
        transform: translateX(-200%);
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@-webkit-keyframes rotate3DOutLeft {
    to {
        -webkit-transform: translate(-50%) rotateY(70deg) rotateX(20deg) translateZ(-300px);
        opacity: 0;
    }
}

@keyframes rotate3DOutLeft {
    to {
        transform: translate(-50%) rotateY(70deg) rotateX(20deg) translateZ(-300px);
        opacity: 0;
    }
}

@-webkit-keyframes slideInFromRight {
    from {
        -webkit-transform: translateX(200%);
    }
    to {
        -webkit-transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideInFromRight {
    from {
        transform: translateX(200%);
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}


/*****************************************/


/* Deal 'em */


/*****************************************/

.fxDeal .itemwrap {
    -webkit-perspective: 1500px;
    perspective: 1500px;
}

.fxDeal .navOutPrev,
.fxDeal .navOutNext {
    opacity: 1;
    -webkit-animation: scaleDown 0.5s forwards;
    animation: scaleDown 0.5s forwards;
}

.fxDeal .navInNext {
    z-index: 9999;
    -webkit-animation: throwFromRight 0.4s 0.1s forwards ease-out;
    animation: throwFromRight 0.4s 0.1s forwards ease-out;
}

.fxDeal .navInPrev {
    z-index: 9999;
    -webkit-animation: throwFromLeft 0.4s 0.1s forwards ease-out;
    animation: throwFromLeft 0.4s 0.1s forwards ease-out;
}

.fxDeal li::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    pointer-events: none;
    background-color: rgba(0, 0, 0, 0.3);
    -webkit-transition: opacity 0.5s;
    transition: opacity 0.5s;
}

.fxDeal .navOutPrev::after,
.fxDeal .navOutNext::after {
    opacity: 1;
}

@-webkit-keyframes scaleDown {
    to {
        -webkit-transform: scale(0.9);
    }
}

@keyframes scaleDown {
    to {
        transform: scale(0.9);
    }
}

@-webkit-keyframes throwFromRight {
    from {
        -webkit-transform: translateX(20%) rotateZ(10deg) rotateY(40deg) translateZ(500px);
        opacity: 1;
    }
    to {
        -webkit-transform: translateX(0) rotateZ(0) rotateY(0) translateZ(0);
        opacity: 1;
    }
}

@keyframes throwFromRight {
    from {
        transform: translateX(20%) rotateZ(10deg) rotateY(40deg) translateZ(500px);
        opacity: 1;
    }
    to {
        transform: translateX(0) rotateZ(0) rotateY(0) translateZ(0);
        opacity: 1;
    }
}

@-webkit-keyframes throwFromLeft {
    from {
        -webkit-transform: translateX(-20%) rotateZ(-10deg) rotateY(-40deg) translateZ(500px);
        opacity: 1;
    }
    to {
        -webkit-transform: translateX(0) rotateZ(0) rotateY(0) translateZ(0);
        opacity: 1;
    }
}

@keyframes throwFromLeft {
    from {
        transform: translateX(-20%) rotateZ(-10deg) rotateY(-40deg) translateZ(500px);
        opacity: 1;
    }
    to {
        transform: translateX(0) rotateZ(0) rotateY(0) translateZ(0);
        opacity: 1;
    }
}


/*****************************************/


/* Ferris wheel */


/*****************************************/

.fxFerris .navOutNext {
    -webkit-transform-origin: 400% 50%;
    transform-origin: 400% 50%;
    -webkit-animation: RotateTranslatedToRight 0.2s forwards ease-out;
    animation: RotateTranslatedToRight 0.2s forwards ease-out;
}

.fxFerris .navInNext {
    -webkit-transform-origin: 200% 50%;
    transform-origin: 200% 50%;
    -webkit-animation: RotateTranslatedFromRight 0.2s forwards ease-out;
    animation: RotateTranslatedFromRight 0.2s forwards ease-out;
}

.fxFerris .navOutPrev {
    -webkit-transform-origin: -300% 50%;
    transform-origin: -300% 50%;
    -webkit-animation: RotateTranslatedToLeft 0.2s forwards ease-out;
    animation: RotateTranslatedToLeft 0.2s forwards ease-out;
}

.fxFerris .navInPrev {
    -webkit-transform-origin: -100% 50%;
    transform-origin: -100% 50%;
    -webkit-animation: RotateTranslatedFromLeft 0.2s forwards ease-out;
    animation: RotateTranslatedFromLeft 0.2s forwards ease-out;
}

@-webkit-keyframes RotateTranslatedToRight {
    to {
        -webkit-transform: rotateZ(20deg);
        opacity: 0;
    }
}

@keyframes RotateTranslatedToRight {
    to {
        transform: rotateZ(20deg);
        opacity: 0;
    }
}

@-webkit-keyframes RotateTranslatedFromRight {
    from {
        -webkit-transform: rotateZ(-45deg);
        opacity: .5;
    }
    to {
        -webkit-transform: rotateZ(0deg);
        opacity: 1;
    }
}

@keyframes RotateTranslatedFromRight {
    from {
        transform: rotateZ(-45deg);
        opacity: .5;
    }
    to {
        transform: rotateZ(0deg);
        opacity: 1;
    }
}

@-webkit-keyframes RotateTranslatedToLeft {
    to {
        -webkit-transform: rotateZ(-20deg);
        opacity: 0;
    }
}

@keyframes RotateTranslatedToLeft {
    to {
        transform: rotateZ(-20deg);
        opacity: 0;
    }
}

@-webkit-keyframes RotateTranslatedFromLeft {
    from {
        -webkit-transform: rotateZ(45deg);
        opacity: .5;
    }
    to {
        -webkit-transform: rotateZ(0deg);
        opacity: 1;
    }
}

@keyframes RotateTranslatedFromLeft {
    from {
        transform: rotateZ(45deg);
        opacity: .5;
    }
    to {
        transform: rotateZ(0deg);
        opacity: 1;
    }
}


/*****************************************/


/* Shinkansen */


/*****************************************/

.fxShinkansen .navOutNext {
    -webkit-animation: skewOutLeft 0.4s forwards ease-in;
    animation: skewOutLeft 0.4s forwards ease-in;
}

.fxShinkansen .navInNext {
    -webkit-animation: skewInRight 0.4s forwards ease-in;
    animation: skewInRight 0.4s forwards ease-in;
}

.fxShinkansen .navOutPrev {
    -webkit-animation: skewOutRight 0.4s forwards ease-in;
    animation: skewOutRight 0.4s forwards ease-in;
}

.fxShinkansen .navInPrev {
    -webkit-animation: skewInLeft 0.4s forwards ease-in;
    animation: skewInLeft 0.4s forwards ease-in;
}

@-webkit-keyframes skewOutLeft {
    50% {
        -webkit-animation-timing-function: ease-out;
        -webkit-transform: skew(-20deg) translateX(-75%);
        opacity: 0.7;
    }
    100% {
        -webkit-transform: skew(0deg) translateX(-150%);
        opacity: 0;
    }
}

@keyframes skewOutLeft {
    50% {
        animation-timing-function: ease-out;
        transform: skew(-20deg) translateX(-75%);
        opacity: 0.7;
    }
    100% {
        transform: skew(0deg) translateX(-150%);
        opacity: 0;
    }
}

@-webkit-keyframes skewInRight {
    0% {
        -webkit-transform: skew(0deg) translateX(150%);
    }
    50% {
        -webkit-animation-timing-function: ease-out;
        -webkit-transform: skew(-20deg) translateX(75%);
    }
    100% {
        -webkit-transform: skew(0) translateX(0);
        opacity: 1;
    }
}

@keyframes skewInRight {
    0% {
        transform: skew(0deg) translateX(150%);
    }
    50% {
        animation-timing-function: ease-out;
        transform: skew(-20deg) translateX(75%);
    }
    100% {
        transform: skew(0) translateX(0);
        opacity: 1;
    }
}

@-webkit-keyframes skewOutRight {
    50% {
        -webkit-animation-timing-function: ease-out;
        -webkit-transform: skew(20deg) translateX(75%);
        opacity: 0.7;
    }
    100% {
        -webkit-transform: skew(0deg) translateX(150%);
        opacity: 0;
    }
}

@keyframes skewOutRight {
    50% {
        animation-timing-function: ease-out;
        transform: skew(20deg) translateX(75%);
        opacity: 0.7;
    }
    100% {
        transform: skew(0deg) translateX(150%);
        opacity: 0;
    }
}

@-webkit-keyframes skewInLeft {
    0% {
        -webkit-transform: skew(0deg) translateX(-150%);
    }
    50% {
        -webkit-animation-timing-function: ease-out;
        -webkit-transform: skew(20deg) translateX(-75%);
    }
    100% {
        -webkit-transform: skew(0) translateX(0);
        opacity: 1;
    }
}

@keyframes skewInLeft {
    0% {
        transform: skew(0deg) translateX(-150%);
    }
    50% {
        animation-timing-function: ease-out;
        transform: skew(20deg) translateX(-75%);
    }
    100% {
        transform: skew(0) translateX(0);
        opacity: 1;
    }
}


/*****************************************/


/* Snake */


/*****************************************/

.fxSnake li {
    -webkit-transform-origin: 50% 0%;
    transform-origin: 50% 0%;
}

.fxSnake .navOutNext {
    -webkit-animation: slideOutBounceLeft 0.3s forwards linear;
    animation: slideOutBounceLeft 0.3s forwards linear;
}

.fxSnake .navInNext {
    -webkit-animation: slideInBounceRight 0.3s forwards linear;
    animation: slideInBounceRight 0.3s forwards linear;
}

.fxSnake .navOutPrev {
    -webkit-animation: slideOutBounceRight 0.3s forwards linear;
    animation: slideOutBounceRight 0.3s forwards linear;
}

.fxSnake .navInPrev {
    -webkit-animation: slideInBounceLeft 0.3s forwards linear;
    animation: slideInBounceLeft 0.3s forwards linear;
}

@-webkit-keyframes slideOutBounceLeft {
    25% {
        -webkit-transform: translateX(-50%) rotate(-7deg);
    }
    50% {
        -webkit-transform: translateX(-100%) rotate(7deg);
        opacity: 0.7;
    }
    100% {
        -webkit-transform: translateX(-200%) rotate(0deg);
        opacity: 0;
    }
}

@keyframes slideOutBounceLeft {
    25% {
        transform: translateX(-50%) rotate(-7deg);
    }
    50% {
        transform: translateX(-100%) rotate(7deg);
        opacity: 0.7;
    }
    100% {
        transform: translateX(-200%) rotate(0deg);
        opacity: 0;
    }
}

@-webkit-keyframes slideInBounceRight {
    0% {
        -webkit-transform: translateX(200%);
    }
    50% {
        -webkit-transform: translateX(100%) rotate(-7deg);
        opacity: 0.7;
    }
    75% {
        -webkit-transform: translateX(50%) rotate(7deg);
    }
    100% {
        -webkit-transform: translateX(0) rotate(0deg);
        opacity: 1;
    }
}

@keyframes slideInBounceRight {
    0% {
        transform: translateX(200%);
    }
    50% {
        transform: translateX(100%) rotate(-7deg);
        opacity: 0.7;
    }
    75% {
        transform: translateX(50%) rotate(7deg);
    }
    100% {
        transform: translateX(0) rotate(0deg);
        opacity: 1;
    }
}

@-webkit-keyframes slideOutBounceRight {
    25% {
        -webkit-transform: translateX(50%) rotate(7deg);
    }
    50% {
        -webkit-transform: translateX(100%) rotate(-7deg);
        opacity: 0.7;
    }
    100% {
        -webkit-transform: translateX(200%) rotate(0deg);
        opacity: 0;
    }
}

@keyframes slideOutBounceRight {
    25% {
        transform: translateX(50%) rotate(7deg);
    }
    50% {
        transform: translateX(100%) rotate(-7deg);
        opacity: 0.7;
    }
    100% {
        transform: translateX(200%) rotate(0deg);
        opacity: 0;
    }
}

@-webkit-keyframes slideInBounceLeft {
    0% {
        -webkit-transform: translateX(-200%);
    }
    50% {
        -webkit-transform: translateX(-100%) rotate(7deg);
        opacity: 0.7;
    }
    75% {
        -webkit-transform: translateX(-50%) rotate(-7deg);
    }
    100% {
        -webkit-transform: translateX(0) rotate(0deg);
        opacity: 1;
    }
}

@keyframes slideInBounceLeft {
    0% {
        transform: translateX(-200%);
    }
    50% {
        transform: translateX(-100%) rotate(7deg);
        opacity: 0.7;
    }
    75% {
        transform: translateX(-50%) rotate(-7deg);
    }
    100% {
        transform: translateX(0) rotate(0deg);
        opacity: 1;
    }
}


/*****************************************/


/* Shuffle */


/*****************************************/

.fxShuffle li {
    -webkit-transform-origin: -50% -50%;
    transform-origin: -50% -50%;
}

.fxShuffle .navOutNext {
    -webkit-animation: fanBehindDown 0.5s forwards;
    animation: fanBehindDown 0.5s forwards;
}

.fxShuffle .navInNext {
    opacity: 1;
    -webkit-animation: fanFrontUp 0.5s forwards;
    animation: fanFrontUp 0.5s forwards;
}

.fxShuffle .navOutPrev {
    -webkit-animation: fanBehindUp 0.5s forwards;
    animation: fanBehindUp 0.5s forwards;
}

.fxShuffle .navInPrev {
    opacity: 1;
    -webkit-animation: fanFrontDown 0.5s forwards;
    animation: fanFrontDown 0.5s forwards;
}

.fxShuffle li::before,
.fxShuffle li::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    background-color: rgba(0, 0, 0, 0.5);
    -webkit-transition: opacity 0.5s;
    transition: opacity 0.5s;
}

.fxShuffle li::after,
.fxShuffle .navOutNext::before,
.fxShuffle .navOutPrev::before {
    opacity: 1;
}

.fxShuffle .navOutNext::before,
.fxShuffle .navOutPrev::before {
    -webkit-transition-speed: 0.25s;
    transition-speed: 0.25s;
    -webkit-transition-delay: 0.2s;
    transition-delay: 0.2s;
}

.fxShuffle li::before,
.fxShuffle li.current::after,
.fxShuffle .navInNext::after,
.fxShuffle .navInPrev::after {
    opacity: 0;
}

@-webkit-keyframes fanBehindDown {
    50% {
        -webkit-transform: rotate(30deg);
        z-index: 9999;
    }
    100% {
        -webkit-transform: rotate(0deg);
    }
}

@keyframes fanBehindDown {
    50% {
        transform: rotate(30deg);
        z-index: 9999;
    }
    100% {
        transform: rotate(0deg);
    }
}

@-webkit-keyframes fanFrontUp {
    50% {
        -webkit-transform: rotate(-20deg);
    }
    51% {
        -webkit-transform: rotate(-20deg);
        z-index: 9999;
    }
    100% {
        -webkit-transform: rotate(0deg);
        z-index: 9999;
    }
}

@keyframes fanFrontUp {
    50% {
        transform: rotate(-20deg);
    }
    51% {
        transform: rotate(-20deg);
        z-index: 9999;
    }
    100% {
        transform: rotate(0deg);
        z-index: 9999;
    }
}

@-webkit-keyframes fanBehindUp {
    50% {
        -webkit-transform: rotate(-20deg);
        z-index: 9999;
    }
    100% {
        -webkit-transform: rotate(0deg);
    }
}

@keyframes fanBehindUp {
    50% {
        transform: rotate(-20deg);
        z-index: 9999;
    }
    100% {
        transform: rotate(0deg);
    }
}

@-webkit-keyframes fanFrontDown {
    50% {
        -webkit-transform: rotate(30deg);
    }
    51% {
        -webkit-transform: rotate(30deg);
        z-index: 9999;
    }
    100% {
        -webkit-transform: rotate(0deg);
        z-index: 9999;
    }
}

@keyframes fanFrontDown {
    50% {
        transform: rotate(30deg);
    }
    51% {
        transform: rotate(30deg);
        z-index: 9999;
    }
    100% {
        transform: rotate(0deg);
        z-index: 9999;
    }
}


/*****************************************/


/* Photo Browse */


/*****************************************/

.fxPhotoBrowse .itemwrap {
    -webkit-perspective: 1300px;
    perspective: 1300px;
}

.fxPhotoBrowse .navOutNext {
    -webkit-animation: moveBehind 0.5s forwards;
    animation: moveBehind 0.5s forwards;
}

.fxPhotoBrowse .navInNext {
    opacity: 1;
    -webkit-animation: appear 0.5s forwards;
    animation: appear 0.5s forwards;
}

.fxPhotoBrowse .navOutPrev {
    -webkit-animation: disappear 0.5s forwards;
    animation: disappear 0.5s forwards;
}

.fxPhotoBrowse .navInPrev {
    opacity: 1;
    -webkit-animation: moveFront 0.5s forwards;
    animation: moveFront 0.5s forwards;
}

.fxPhotoBrowse li::before,
.fxPhotoBrowse li::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    background-color: rgba(0, 0, 0, 0.6);
    -webkit-transition: opacity 0.5s;
    transition: opacity 0.5s;
}

.fxPhotoBrowse li::after,
.fxPhotoBrowse .navOutNext::before,
.fxPhotoBrowse .navOutPrev::before {
    opacity: 1;
}

.fxPhotoBrowse .navOutNext::before,
.fxPhotoBrowse .navOutPrev::before {
    -webkit-transition-speed: 0.25s;
    transition-speed: 0.25s;
    -webkit-transition-delay: 0.2s;
    transition-delay: 0.2s;
}

.fxPhotoBrowse li::before,
.fxPhotoBrowse li.current::after,
.fxPhotoBrowse .navInNext::after,
.fxPhotoBrowse .navInPrev::after {
    opacity: 0;
}

@-webkit-keyframes moveBehind {
    50% {
        z-index: 9999;
        -webkit-transform: translateX(-105%) rotateY(35deg) rotateX(10deg);
    }
    100% {
        -webkit-transform: translateX(0%) rotateY(0deg) rotateX(0deg);
    }
}

@keyframes moveBehind {
    50% {
        z-index: 9999;
        transform: translateX(-105%) rotateY(35deg) rotateX(10deg);
    }
    100% {
        transform: translateX(0%) rotateY(0deg) rotateX(0deg);
    }
}

@-webkit-keyframes appear {
    0% {
        -webkit-transform: translateZ(-200px);
    }
    51% {
        z-index: 9999;
    }
    70% {
        z-index: 9999;
        -webkit-transform: translateZ(50px);
    }
    100% {
        z-index: 9999;
        -webkit-transform: translateZ(0px);
    }
}

@keyframes appear {
    0% {
        transform: translateZ(-200px);
    }
    51% {
        z-index: 9999;
    }
    70% {
        z-index: 9999;
        transform: translateZ(50px);
    }
    100% {
        z-index: 9999;
        transform: translateZ(0px);
    }
}

@-webkit-keyframes disappear {
    30% {
        -webkit-transform: translateZ(50px);
    }
    50% {
        z-index: 9999;
    }
    100% {
        -webkit-transform: translateZ(-200px);
    }
}

@keyframes disappear {
    30% {
        transform: translateZ(50px);
    }
    50% {
        z-index: 9999;
    }
    100% {
        transform: translateZ(-200px);
    }
}

@-webkit-keyframes moveFront {
    50% {
        -webkit-transform: translateX(-105%) rotateY(35deg) rotateX(10deg);
    }
    51% {
        z-index: 9999;
    }
    100% {
        z-index: 9999;
        -webkit-transform: translateX(0%) rotateY(0deg) rotateX(0deg);
    }
}

@keyframes moveFront {
    50% {
        transform: translateX(-105%) rotateY(35deg) rotateX(10deg);
    }
    51% {
        z-index: 9999;
    }
    100% {
        z-index: 9999;
        transform: translateX(0%) rotateY(0deg) rotateX(0deg);
    }
}


/*****************************************/


/* Slide Behind */


/* From https://github.com/hakimel/kontext by Hakim El Hattab, http://hakim.se */


/*****************************************/

.fxSlideBehind .itemwrap {
    -webkit-perspective: 1000px;
    perspective: 1000px;
}

.fxSlideBehind .navOutNext {
    -webkit-animation: hideLeft 0.5s forwards;
    animation: hideLeft 0.5s forwards;
}

.fxSlideBehind .navInNext {
    -webkit-animation: showRight 0.5s forwards;
    animation: showRight 0.5s forwards;
}

.fxSlideBehind .navOutPrev {
    -webkit-animation: hideRight 0.5s forwards;
    animation: hideRight 0.5s forwards;
}

.fxSlideBehind .navInPrev {
    -webkit-animation: showLeft 0.5s forwards;
    animation: showLeft 0.5s forwards;
}

.fxSlideBehind li::before,
.fxSlideBehind li::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    background-color: rgba(0, 0, 0, 0.5);
    -webkit-transition: opacity 0.5s;
    transition: opacity 0.5s;
}

.fxSlideBehind li::after,
.fxSlideBehind .navOutNext::before,
.fxSlideBehind .navOutPrev::before {
    opacity: 1;
}

.fxSlideBehind li::before,
.fxSlideBehind li.current::after,
.fxSlideBehind .navInNext::after,
.fxSlideBehind .navInPrev::after {
    opacity: 0;
}

@-webkit-keyframes hideLeft {
    0% {
        -webkit-transform: translateZ( 0px);
    }
    40% {
        -webkit-transform: translate( -40%, 0) scale( 0.8) rotateY( 20deg);
        z-index: 9999;
    }
    100% {
        opacity: 1;
        -webkit-transform: translateZ( -400px);
    }
}

@keyframes hideLeft {
    0% {
        transform: translateZ( 0px);
    }
    40% {
        transform: translate( -40%, 0) scale( 0.8) rotateY( 20deg);
        z-index: 9999;
    }
    100% {
        opacity: 1;
        transform: translateZ( -400px);
    }
}

@-webkit-keyframes showRight {
    0% {
        -webkit-transform: translateZ( -400px);
        opacity: 1;
    }
    40% {
        -webkit-transform: translate( 40%, 0) scale( 0.8) rotateY( -20deg);
        opacity: 1;
    }
    41% {
        -webkit-transform: translate( 40%, 0) scale( 0.8) rotateY( -20deg);
        opacity: 1;
        z-index: 9999;
    }
    100% {
        -webkit-transform: translateZ( 0px);
        opacity: 1;
        z-index: 9999;
    }
}

@keyframes showRight {
    0% {
        transform: translateZ( -400px);
        opacity: 1;
    }
    40% {
        transform: translate( 40%, 0) scale( 0.8) rotateY( -20deg);
        opacity: 1;
    }
    41% {
        transform: translate( 40%, 0) scale( 0.8) rotateY( -20deg);
        opacity: 1;
        z-index: 9999;
    }
    100% {
        transform: translateZ( 0px);
        opacity: 1;
        z-index: 9999;
    }
}

@-webkit-keyframes hideRight {
    0% {
        -webkit-transform: translateZ( 0px);
    }
    40% {
        -webkit-transform: translate( 40%, 0) scale( 0.8) rotateY( -20deg);
        z-index: 9999;
    }
    100% {
        opacity: 1;
        -webkit-transform: translateZ( -400px);
    }
}

@keyframes hideRight {
    0% {
        transform: translateZ( 0px);
    }
    40% {
        transform: translate( 40%, 0) scale( 0.8) rotateY( -20deg);
        z-index: 9999;
    }
    100% {
        opacity: 1;
        transform: translateZ( -400px);
    }
}

@-webkit-keyframes showLeft {
    0% {
        -webkit-transform: translateZ( -400px);
        opacity: 1;
    }
    40% {
        -webkit-transform: translate( -40%, 0) scale( 0.8) rotateY( 20deg);
        opacity: 1;
    }
    41% {
        -webkit-transform: translate( -40%, 0) scale( 0.8) rotateY( 20deg);
        opacity: 1;
        z-index: 9999;
    }
    100% {
        -webkit-transform: translateZ( 0px);
        opacity: 1;
        z-index: 9999;
    }
}

@keyframes showLeft {
    0% {
        transform: translateZ( -400px);
        opacity: 1;
    }
    40% {
        transform: translate( -40%, 0) scale( 0.8) rotateY( 20deg);
        opacity: 1;
    }
    41% {
        transform: translate( -40%, 0) scale( 0.8) rotateY( 20deg);
        opacity: 1;
        z-index: 9999;
    }
    100% {
        transform: translateZ( 0px);
        opacity: 1;
        z-index: 9999;
    }
}


/*****************************************/


/* Vacuum */


/*****************************************/

.fxVacuum .navOutNext {
    -webkit-animation: slideScaleOutLeft 0.4s forwards;
    animation: slideScaleOutLeft 0.4s forwards;
}

.fxVacuum .navInNext {
    -webkit-animation: slideScaleInRight 0.4s 0.2s forwards;
    animation: slideScaleInRight 0.4s 0.2s forwards;
}

.fxVacuum .navOutPrev {
    -webkit-animation: slideScaleOutRight 0.4s forwards;
    animation: slideScaleOutRight 0.4s forwards;
}

.fxVacuum .navInPrev {
    -webkit-animation: slideScaleInLeft 0.4s 0.2s forwards;
    animation: slideScaleInLeft 0.4s 0.2s forwards;
}

@-webkit-keyframes slideScaleOutLeft {
    50% {
        -webkit-transform: translateX(25%) scale(1.2);
        opacity: 0.8;
    }
    100% {
        -webkit-transform: translateX(-250%) scale(0);
        opacity: 0;
    }
}

@keyframes slideScaleOutLeft {
    50% {
        transform: translateX(25%) scale(1.2);
        opacity: 0.8;
    }
    100% {
        transform: translateX(-250%) scale(0);
        opacity: 0;
    }
}

@-webkit-keyframes slideScaleInRight {
    from {
        -webkit-transform: translateX(250%) scale(0);
    }
    to {
        -webkit-transform: translateX(0) scale(1);
        opacity: 1;
    }
}

@keyframes slideScaleInRight {
    from {
        transform: translateX(250%) scale(0);
    }
    to {
        transform: translateX(0) scale(1);
        opacity: 1;
    }
}

@-webkit-keyframes slideScaleOutRight {
    50% {
        -webkit-transform: translateX(-25%) scale(1.2);
        opacity: 0.8;
    }
    100% {
        -webkit-transform: translateX(250%) scale(0);
        opacity: 0;
    }
}

@keyframes slideScaleOutRight {
    50% {
        transform: translateX(-25%) scale(1.2);
        opacity: 0.8;
    }
    100% {
        transform: translateX(250%) scale(0);
        opacity: 0;
    }
}

@-webkit-keyframes slideScaleInLeft {
    from {
        -webkit-transform: translateX(-250%) scale(0);
    }
    to {
        -webkit-transform: translateX(0) scale(1);
        opacity: 1;
    }
}

@keyframes slideScaleInLeft {
    from {
        transform: translateX(-250%) scale(0);
    }
    to {
        transform: translateX(0) scale(1);
        opacity: 1;
    }
}


/*****************************************/


/* Hurl it */


/*****************************************/

.fxHurl .navOutNext {
    -webkit-animation: ElastSlideOutLeft 0.5s forwards;
    animation: ElastSlideOutLeft 0.5s forwards;
}

.fxHurl .navInNext {
    -webkit-animation: ElastSlideInRight 0.5s 0.6s forwards;
    animation: ElastSlideInRight 0.5s 0.6s forwards;
}

.fxHurl .navOutPrev {
    -webkit-animation: ElastSlideOutRight 0.5s forwards;
    animation: ElastSlideOutRight 0.5s forwards;
}

.fxHurl .navInPrev {
    -webkit-animation: ElastSlideInLeft 0.5s 0.6s forwards;
    animation: ElastSlideInLeft 0.5s 0.6s forwards;
}

@-webkit-keyframes ElastSlideOutLeft {
    80% {
        -webkit-animation-timing-function: ease-in;
        -webkit-transform: translateX(50%);
        opacity: 1;
    }
    100% {
        -webkit-transform: translateX(-150%);
        opacity: 0;
    }
}

@keyframes ElastSlideOutLeft {
    80% {
        animation-timing-function: ease-in;
        transform: translateX(50%);
        opacity: 1;
    }
    100% {
        transform: translateX(-150%);
        opacity: 0;
    }
}

@-webkit-keyframes ElastSlideInRight {
    0% {
        -webkit-animation-timing-function: ease-in;
        -webkit-transform: translateX(150%);
    }
    20% {
        -webkit-transform: translateX(-50%);
        opacity: 1;
    }
    100% {
        -webkit-transform: translateX(0);
        opacity: 1;
    }
}

@keyframes ElastSlideInRight {
    0% {
        animation-timing-function: ease-in;
        transform: translateX(150%);
    }
    20% {
        transform: translateX(-50%);
        opacity: 1;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

@-webkit-keyframes ElastSlideOutRight {
    80% {
        -webkit-animation-timing-function: ease-in;
        -webkit-transform: translateX(-50%);
        opacity: 1;
    }
    100% {
        -webkit-transform: translateX(150%);
        opacity: 0;
    }
}

@keyframes ElastSlideOutRight {
    80% {
        animation-timing-function: ease-in;
        transform: translateX(-50%);
        opacity: 1;
    }
    100% {
        transform: translateX(150%);
        opacity: 0;
    }
}

@-webkit-keyframes ElastSlideInLeft {
    0% {
        -webkit-animation-timing-function: ease-in;
        -webkit-transform: translateX(-150%);
    }
    20% {
        -webkit-transform: translateX(50%);
        opacity: 1;
    }
    100% {
        -webkit-transform: translateX(0);
        opacity: 1;
    }
}

@keyframes ElastSlideInLeft {
    0% {
        animation-timing-function: ease-in;
        transform: translateX(-150%);
    }
    20% {
        transform: translateX(50%);
        opacity: 1;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}