/*!
 * stroll.js 1.1 - CSS scroll effects
 * http://lab.hakim.se/scroll-effects
 * MITcensed
 * 
 * Created by Hakim El Hattab, http://hakim.se
 *
 * Updated by Sike, http://codecanyon.net/user/sike
 */

.normal {
    opacity: 1;
    -webkit-transform: rotateX( 0deg );
    -moz-transform: rotateX( 0deg );
    -ms-transform: rotateX( 0deg );
    -o-transform: rotateX( 0deg );
    transform: rotateX( 0deg );
    -webkit-transform: rotateY( 0deg );
    -moz-transform: rotateY( 0deg );
    -ms-transform: rotateY( 0deg );
    -o-transform: rotateY( 0deg );
    transform: rotateY( 0deg );
    -webkit-transform: rotate( 0deg );
    -moz-transform: rotate( 0deg );
    -ms-transform: rotate( 0deg );
    -o-transform: rotate( 0deg );
    transform: rotate( 0deg );
    -webkit-transform: translateX( 0% );
    -moz-transform: translateX( 0% );
    -ms-transform: translateX( 0% );
    -o-transform: translateX( 0% );
    transform: translateX( 0% );
    -webkit-transform: translateY( 0% );
    -moz-transform: translateY( 0% );
    -ms-transform: translateY( 0% );
    -o-transform: translateY( 0% );
    transform: translateY( 0% );
}


/**
 * Flip styles
 */

.flip {
    -webkit-perspective: 400px;
    -moz-perspective: 400px;
    -ms-perspective: 400px;
    -o-perspective: 400px;
    perspective: 400px;
    -webkit-perspective-origin: 50% 50%;
    -moz-perspective-origin: 50% 50%;
    -ms-perspective-origin: 50% 50%;
    -o-perspective-origin: 50% 50%;
    perspective-origin: 50% 50%;
}

.flip {
    -webkit-transition: all 600ms ease, opacity 300ms ease;
    -moz-transition: all 600ms ease;
    -ms-transition: all 600ms ease, opacity 300ms ease;
    -o-transition: all 600ms ease, opacity 300ms ease;
    transition: all 600ms ease, opacity 300ms ease;
    -webkit-transform-origin: 0% 0%;
    -moz-transform-origin: 0% 0%;
    -ms-transform-origin: 0% 0%;
    -o-transform-origin: 0% 0%;
    transform-origin: 0% 0%;
}

    .flip.frontSide {
        opacity: 0;
        -webkit-backface-visibility: hidden;
        -webkit-transform-origin: 0% 100%;
        -moz-transform-origin: 0% 100%;
        -ms-transform-origin: 0% 100%;
        -o-transform-origin: 0% 100%;
        transform-origin: 0% 100%;
        -webkit-transform: rotateX( 80deg );
        -moz-transform: rotateX( 80deg );
        -ms-transform: rotateX( 80deg );
        -o-transform: rotateX( 80deg );
        transform: rotateX( 80deg );
    }

    .flip.backSide {
        opacity: 0;
        -webkit-backface-visibility: hidden;
        -webkit-transform: rotateX( -80deg );
        -moz-transform: rotateX( -80deg );
        -ms-transform: rotateX( -80deg );
        -o-transform: rotateX( -80deg );
        transform: rotateX( -80deg );
    }

/**
 * flipX styles
 */
.flipX {
    -webkit-perspective: 400px;
    -moz-perspective: 400px;
    -ms-perspective: 400px;
    -o-perspective: 400px;
    perspective: 400px;
    -webkit-perspective-origin: 50% 50%;
    -moz-perspective-origin: 50% 50%;
    -ms-perspective-origin: 50% 50%;
    -o-perspective-origin: 50% 50%;
    perspective-origin: 50% 50%;
}

.flipX {
    -webkit-transition: all 600ms ease, opacity 300ms ease;
    -moz-transition: all 600ms ease;
    -ms-transition: all 600ms ease, opacity 300ms ease;
    -o-transition: all 600ms ease, opacity 300ms ease;
    transition: all 600ms ease, opacity 300ms ease;
    -webkit-transform-origin: 50% 50% -50px;
    -moz-transform-origin: 50% 50% -50px;
    -ms-transform-origin: 50% 50% -50px;
    -o-transform-origin: 50% 50% -50px;
    transform-origin: 50% 50% -50px;
}

    .flipX.frontSide {
        opacity: 0;
        -webkit-backface-visibility: hidden;
        -webkit-transform: rotateX( 180deg );
        -moz-transform: rotateX( 180deg );
        -ms-transform: rotateX( 180deg );
        -o-transform: rotateX( 180deg );
        transform: rotateX( 180deg );
    }

    .flipX.backSide {
        opacity: 0;
        -webkit-backface-visibility: hidden;
        -webkit-transform: rotateX( -180deg );
        -moz-transform: rotateX( -180deg );
        -ms-transform: rotateX( -180deg );
        -o-transform: rotateX( -180deg );
        transform: rotateX( -180deg );
    }



/**
 * Skew
 */
.skew {
    -webkit-perspective: 600px;
    -moz-perspective: 600px;
    -ms-perspective: 600px;
    -o-perspective: 600px;
    perspective: 600px;
    -webkit-perspective-origin: 0% 50%;
    -moz-perspective-origin: 0% 50%;
    -ms-perspective-origin: 0% 50%;
    -o-perspective-origin: 0% 50%;
    perspective-origin: 0% 50%;
}

.skew {
    -webkit-transition: all 600ms ease, opacity 300ms ease;
    -moz-transition: all 600ms ease;
    -ms-transition: all 600ms ease;
    -o-transition: all 600ms ease;
    transition: all 600ms ease;
    -webkit-transform-origin: 0% 0%;
    -moz-transform-origin: 0% 0%;
    -ms-transform-origin: 0% 0%;
    -o-transform-origin: 0% 0%;
    transform-origin: 0% 0%;
}

    .skew.frontSide {
        opacity: 0;
        -webkit-transform: skewY( 30deg );
        -moz-transform: skewY( 30deg );
        -ms-transform: skewY( 30deg );
        -o-transform: skewY( 30deg );
        transform: skewY( 30deg );
    }

    .skew.backSide {
        opacity: 0;
        z-index: 0;
        -webkit-transform: skewY( -30deg );
        -moz-transform: skewY( -30deg );
        -ms-transform: skewY( -30deg );
        -o-transform: skewY( -30deg );
        transform: skewY( -30deg );
    }


/**
 * flipY styles
 */
.flipY {
    -webkit-perspective: 600px;
    -moz-perspective: 600px;
    -ms-perspective: 600px;
    -o-perspective: 600px;
    perspective: 600px;
    -webkit-perspective-origin: 50% 50%;
    -moz-perspective-origin: 50% 50%;
    -ms-perspective-origin: 50% 50%;
    -o-perspective-origin: 50% 50%;
    perspective-origin: 50% 50%;
}

.flipY {
    -webkit-transition: all 600ms ease, opacity 300ms ease;
    -moz-transition: all 600ms ease;
    -ms-transition: all 600ms ease, opacity 300ms ease;
    -o-transition: all 600ms ease, opacity 300ms ease;
    transition: all 600ms ease, opacity 300ms ease;
    -webkit-transform-origin: 50% 50%;
    -moz-transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    -o-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
}

    .flipY.frontSide {
        opacity: 0;
        -webkit-backface-visibility: hidden;
        -webkit-transform: rotateY( 180deg );
        -moz-transform: rotateY( 180deg );
        -ms-transform: rotateY( 180deg );
        -o-transform: rotateY( 180deg );
        transform: rotateY( 180deg );
    }

    .flipY.backSide {
        opacity: 0;
        -webkit-backface-visibility: hidden;
        -webkit-transform: rotateY( -180deg );
        -moz-transform: rotateY( -180deg );
        -ms-transform: rotateY( -180deg );
        -o-transform: rotateY( -180deg );
        transform: rotateY( -180deg );
    }


/**
 * Wave styles
 */
.wave {
    -webkit-transition: all 600ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
    -moz-transition: all 600ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
    -ms-transition: all 600ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
    -o-transition: all 600ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
    transition: all 600ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
}

    .wave.frontSide {
        opacity: 0;
        -webkit-transform: translateX( -70% );
        -moz-transform: translateX( -70% );
        -ms-transform: translateX( -70% );
        -o-transform: translateX( -70% );
        transform: translateX( -70% );
    }

    .wave.backSide {
        opacity: 0;
        -webkit-transform: translateX( -70% );
        -moz-transform: translateX( -70% );
        -ms-transform: translateX( -70% );
        -o-transform: translateX( -70% );
        transform: translateX( -70% );
    }


/**
 * Fan styles
 */
.fan {
    -webkit-transition: all 600ms cubic-bezier(0.390, 0.575, 0.565, 1.000);
    -moz-transition: all 600ms cubic-bezier(0.390, 0.575, 0.565, 1.000);
    -ms-transition: all 600ms cubic-bezier(0.390, 0.575, 0.565, 1.000);
    -o-transition: all 600ms cubic-bezier(0.390, 0.575, 0.565, 1.000);
    transition: all 600ms cubic-bezier(0.390, 0.575, 0.565, 1.000);
    -webkit-transform-origin: 0% 0%;
    -moz-transform-origin: 0% 0%;
    -ms-transform-origin: 0% 0%;
    -o-transform-origin: 0% 0%;
    transform-origin: 0% 0%;
}

    .fan.frontSide {
        opacity: 0;
        -webkit-backface-visibility: hidden;
        -webkit-transform: rotate( -60deg );
        -moz-transform: rotate( -60deg );
        -ms-transform: rotate( -60deg );
        -o-transform: rotate( -60deg );
        transform: rotate( -60deg );
    }

    .fan.backSide {
        opacity: 0;
        -webkit-backface-visibility: hidden;
        -webkit-transform: rotate( 70deg );
        -moz-transform: rotate( 70deg );
        -ms-transform: rotate( 70deg );
        -o-transform: rotate( 70deg );
        transform: rotate( 70deg );
    }


/**
 * Tilt styles
 */
.tilt {
    -webkit-perspective: 800px;
    -moz-perspective: 800px;
    -ms-perspective: 800px;
    -o-perspective: 800px;
    perspective: 800px;
    -webkit-perspective-origin: 50% 50%;
    -moz-perspective-origin: 50% 50%;
    -ms-perspective-origin: 50% 50%;
    -o-perspective-origin: 50% 50%;
    perspective-origin: 50% 50%;
}

.tilt {
    position: relative;
    -webkit-transition: all 1000ms cubic-bezier(0.260, 0.860, 0.440, 0.985), opacity 300ms ease;
    -moz-transition: all 1000ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
    -ms-transition: all 1000ms cubic-bezier(0.260, 0.860, 0.440, 0.985), opacity 300ms ease;
    -o-transition: all 1000ms cubic-bezier(0.260, 0.860, 0.440, 0.985), opacity 300ms ease;
    transition: all 1000ms cubic-bezier(0.260, 0.860, 0.440, 0.985), opacity 300ms ease;
}

    .tilt.frontSide {
        opacity: 0;
        -webkit-transform: translateY( 100% ) translateZ(-200px);
        -moz-transform: translateY( 100% ) translateZ(-200px);
        -ms-transform: translateY( 100% ) translateZ(-200px);
        -o-transform: translateY( 100% ) translateZ(-200px);
        transform: translateY( 100% ) translateZ(-200px);
    }

    .tilt.backSide {
        opacity: 0;
        -webkit-transform: translateY( -100% ) translateZ(-200px);
        -moz-transform: translateY( -100% ) translateZ(-200px);
        -ms-transform: translateY( -100% ) translateZ(-200px);
        -o-transform: translateY( -100% ) translateZ(-200px);
        transform: translateY( -100% ) translateZ(-200px);
    }


/**
 * Curl styles
 */
.curl {
    -webkit-perspective: 600px;
    -moz-perspective: 600px;
    -ms-perspective: 600px;
    -o-perspective: 600px;
    perspective: 600px;
    -webkit-perspective-origin: 0% 50%;
    -moz-perspective-origin: 0% 50%;
    -ms-perspective-origin: 0% 50%;
    -o-perspective-origin: 0% 50%;
    perspective-origin: 0% 50%;
}

.curl {
    -webkit-transition: all 600ms ease, opacity 300ms ease;
    -moz-transition: all 600ms ease;
    -ms-transition: all 600ms ease, opacity 300ms ease;
    -o-transition: all 600ms ease, opacity 300ms ease;
    transition: all 600ms ease, opacity 300ms ease;
    -webkit-transform-origin: 0% 0%;
    -moz-transform-origin: 0% 0%;
    -ms-transform-origin: 0% 0%;
    -o-transform-origin: 0% 0%;
    transform-origin: 0% 0%;
}

    .curl.frontSide {
        opacity: 0;
        -webkit-backface-visibility: hidden;
        -webkit-transform: rotateY( 90deg );
        -moz-transform: rotateY( 90deg );
        -ms-transform: rotateY( 90deg );
        -o-transform: rotateY( 90deg );
        transform: rotateY( 90deg );
    }

    .curl.backSide {
        opacity: 0;
        -webkit-backface-visibility: hidden;
        -webkit-transform: rotateY( 90deg );
        -moz-transform: rotateY( 90deg );
        -ms-transform: rotateY( 90deg );
        -o-transform: rotateY( 90deg );
        transform: rotateY( 90deg );
    }


/**
 * Papercut styles
 */
/*.test {
	-webkit-transition: all 600ms cubic-bezier(0.175, 0.885, 0.320, 1.275);
	   -moz-transition: all 600ms cubic-bezier(0.175, 0.885, 0.320, 1.275);
	    -ms-transition: all 600ms cubic-bezier(0.175, 0.885, 0.320, 1.275);
	     -o-transition: all 600ms cubic-bezier(0.175, 0.885, 0.320, 1.275);
	        transition: all 600ms cubic-bezier(0.175, 0.885, 0.320, 1.275);
}*/
.papercut {
    -webkit-perspective: 600px;
    -moz-perspective: 600px;
    -ms-perspective: 600px;
    -o-perspective: 600px;
    perspective: 600px;
    -webkit-perspective-origin: 0% 0%;
    -moz-perspective-origin: 0% 0%;
    -ms-perspective-origin: 0% 0%;
    -o-perspective-origin: 0% 0%;
    perspective-origin: 0% 0%;
}

.papercut {
    -webkit-transition: all 600ms ease;
    -moz-transition: all 600ms ease;
    -ms-transition: all 600ms ease;
    -o-transition: all 600ms ease;
    transition: all 600ms ease;
    -webkit-transform-origin: 0% 0%;
    -moz-transform-origin: 0% 0%;
    -ms-transform-origin: 0% 0%;
    -o-transform-origin: 0% 0%;
    transform-origin: 0% 0%;
}

    .papercut.frontSide {
        opacity: 0;
        -webkit-transform: skewY( -30deg );
        -moz-transform: skewY( -30deg );
        -ms-transform: skewY( -30deg );
        -o-transform: skewY( -30deg );
        transform: skewY( -30deg );
    }

    .papercut.backSide {
        opacity: 0;
        -webkit-transform: skewY( 30deg );
        -moz-transform: skewY( 30deg );
        -ms-transform: skewY( 30deg );
        -o-transform: skewY( 30deg );
        transform: skewY( 30deg );
    }


/**
 * Zipper styles
 */
.zipper {
    -webkit-transition: all 600ms cubic-bezier(0.390, 0.575, 0.565, 1.000);
    -moz-transition: all 600ms cubic-bezier(0.390, 0.575, 0.565, 1.000);
    -ms-transition: all 600ms cubic-bezier(0.390, 0.575, 0.565, 1.000);
    -o-transition: all 600ms cubic-bezier(0.390, 0.575, 0.565, 1.000);
    transition: all 600ms cubic-bezier(0.390, 0.575, 0.565, 1.000);
    -webkit-transform-origin: 50% 0%;
    -moz-transform-origin: 50% 0%;
    -ms-transform-origin: 50% 0%;
    -o-transform-origin: 50% 0%;
    transform-origin: 50% 0%;
}

    .zipper.frontSide:nth-child(odd),
    .zipper.backSide:nth-child(odd) {
        opacity: 0;
        -webkit-transform: translateX( 80% );
        -moz-transform: translateX( 80% );
        -ms-transform: translateX( 80% );
        -o-transform: translateX( 80% );
        transform: translateX( 80% );
    }

    .zipper.frontSide:nth-child(even),
    .zipper.backSide:nth-child(even) {
        opacity: 0;
        -webkit-transform: translateX( -80% );
        -moz-transform: translateX( -80% );
        -ms-transform: translateX( -80% );
        -o-transform: translateX( -80% );
        transform: translateX( -80% );
    }


/**
 * Fade styles
 */
.fade {
    -webkit-transition: opacity .35s ease-in-out;
    -moz-transition: opacity .35s ease-in-out;
    -ms-transition: opacity .35s ease-in-out;
    -o-transition: opacity .35s ease-in-out;
    transition: opacity .35s ease-in-out;
}

    .fade.frontSide {
        opacity: 0;
    }

    .fade.backSide {
        opacity: 0;
    }


/**
 * Twirl styles
 */
.twirl {
    -webkit-perspective: 400px;
    -moz-perspective: 400px;
    -ms-perspective: 400px;
    -o-perspective: 400px;
    perspective: 400px;
    -webkit-perspective-origin: 50% 50%;
    -moz-perspective-origin: 50% 50%;
    -ms-perspective-origin: 50% 50%;
    -o-perspective-origin: 50% 50%;
    perspective-origin: 50% 50%;
}

.twirl {
    -webkit-transition: all 600ms ease, opacity 300ms ease;
    -moz-transition: all 600ms ease;
    -ms-transition: all 600ms ease, opacity 300ms ease;
    -o-transition: all 600ms ease, opacity 300ms ease;
    transition: all 600ms ease, opacity 300ms ease;
    -webkit-transform-origin: 50% 50%;
    -moz-transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    -o-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
}

    .twirl.frontSide {
        opacity: 0;
        -webkit-backface-visibility: hidden;
        -webkit-transform: rotate3d( 80,-70,10,180deg );
        -moz-transform: rotate3d( 80,70,10,180deg );
        -ms-transform: rotate3d( 80,70,10,180deg );
        -o-transform: rotate3d( 80,70,10,180deg );
        transform: rotate3d( 80,70,10,180deg );
    }

    .twirl.backSide {
        opacity: 0;
        -webkit-backface-visibility: hidden;
        -webkit-transform: rotate3d( 80,70,10,-180deg );
        -moz-transform: rotate3d( 80,70,10,-180deg );
        -ms-transform: rotate3d( 80,70,10,-180deg );
        -o-transform: rotate3d( 80,70,10,-180deg );
        transform: rotate3d( 80,70,10,-180deg );
    }