/*!
 * stroll.js 1.2 - CSS scroll effects
 * http://lab.hakim.se/scroll-effects
 * MIT licensed
 *
 * Copyright (C) 2012 Hakim El Hattab, http://hakim.se
 */


/**
 * Shrink styles
 */
.cards {
    -webkit-perspective: 300px;
    -moz-perspective: 300px;
    -ms-perspective: 300px;
    -o-perspective: 300px;
    perspective: 300px;

    -webkit-perspective-origin: 50% 50%;
    -moz-perspective-origin: 50% 50%;
    -ms-perspective-origin: 50% 50%;
    -o-perspective-origin: 50% 50%;
    perspective-origin: 50% 50%;
}

.cards li {
    -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: 100% 50%;
    -moz-transform-origin: 100% 50%;
    -ms-transform-origin: 100% 50%;
    -o-transform-origin: 100% 50%;
    transform-origin: 100% 50%;
}
.cards li.past {
    -webkit-transform: translate3d( 0, -100px, -100px ) rotateX( -90deg );
    -moz-transform: translate3d( 0, -100px, -100px ) rotateX( -90deg );
    -ms-transform: translate3d( 0, -100px, -100px ) rotateX( -90deg );
    -o-transform: translate3d( 0, -100px, -100px ) rotateX( -90deg );
    transform: translate3d( 0, -100px, -100px ) rotateX( -90deg );
}
.cards li.future {
    -webkit-transform: translate3d( 0, 100px, -100px ) rotateX( 90deg );
    -moz-transform: translate3d( 0, 100px, -100px ) rotateX( 90deg );
    -ms-transform: translate3d( 0, 100px, -100px ) rotateX( 90deg );
    -o-transform: translate3d( 0, 100px, -100px ) rotateX( 90deg );
    transform: translate3d( 0, 100px, -100px ) rotateX( 90deg );
}


/**
 * Grow styles
 */
.grow li {
    -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: 50% 50%;
    -moz-transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    -o-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
}
.grow li.past {
    -webkit-transform: scale( 0.01 );
    -moz-transform: scale( 0.01 );
    -ms-transform: scale( 0.01 );
    -o-transform: scale( 0.01 );
    transform: scale( 0.01 );
}
.grow li.future {
    -webkit-transform: scale( 0.01 );
    -moz-transform: scale( 0.01 );
    -ms-transform: scale( 0.01 );
    -o-transform: scale( 0.01 );
    transform: scale( 0.01 );
}


/**
 * 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 li {
    -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 li.past {
    opacity: 0;

    -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 li.future {
    opacity: 0;

    -webkit-transform: rotateX( -80deg );
    -moz-transform: rotateX( -80deg );
    -ms-transform: rotateX( -80deg );
    -o-transform: rotateX( -80deg );
    transform: rotateX( -80deg );
}

/**
 * Fly styles
 */
.fly {
    -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%;
}

.fly li {
    -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;
}
.fly li.past {
    opacity: 0;

    -webkit-transform: rotateX( 180deg );
    -moz-transform: rotateX( 180deg );
    -ms-transform: rotateX( 180deg );
    -o-transform: rotateX( 180deg );
    transform: rotateX( 180deg );
}
.fly li.future {
    opacity: 0;

    -webkit-transform: rotateX( -180deg );
    -moz-transform: rotateX( -180deg );
    -ms-transform: rotateX( -180deg );
    -o-transform: rotateX( -180deg );
    transform: rotateX( -180deg );
}

.fly-simplified {
    -webkit-perspective: 300px;
    -moz-perspective: 300px;
    -ms-perspective: 300px;
    -o-perspective: 300px;
    perspective: 300px;

    -webkit-perspective-origin: 50% 50%;
    -moz-perspective-origin: 50% 50%;
    -ms-perspective-origin: 50% 50%;
    -o-perspective-origin: 50% 50%;
    perspective-origin: 50% 50%;
}

.fly-simplified li {
    -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: 100% 50%;
    -moz-transform-origin: 100% 50%;
    -ms-transform-origin: 100% 50%;
    -o-transform-origin: 100% 50%;
    transform-origin: 100% 50%;
}
.fly-simplified li.past {
    -webkit-transform: translate3d( 0, -100px, -100px ) rotateX( 90deg );
    -moz-transform: translate3d( 0, -100px, -100px ) rotateX( 90deg );
    -ms-transform: translate3d( 0, -100px, -100px ) rotateX( 90deg );
    -o-transform: translate3d( 0, -100px, -100px ) rotateX( 90deg );
    transform: translate3d( 0, -100px, -100px ) rotateX( 90deg );
}
.fly-simplified li.future {
    -webkit-transform: translate3d( 0, 100px, -100px ) rotateX( -90deg );
    -moz-transform: translate3d( 0, 100px, -100px ) rotateX( -90deg );
    -ms-transform: translate3d( 0, 100px, -100px ) rotateX( -90deg );
    -o-transform: translate3d( 0, 100px, -100px ) rotateX( -90deg );
    transform: translate3d( 0, 100px, -100px ) rotateX( -90deg );
}

/**
 * Reverse fly styles
 */
.fly-reverse {
    -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%;
}

.fly-reverse li {
    -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;
}
.fly-reverse li.past {
    opacity: 0;

    -webkit-transform: rotateX( -180deg );
    -moz-transform: rotateX( -180deg );
    -ms-transform: rotateX( -180deg );
    -o-transform: rotateX( -180deg );
    transform: rotateX( -180deg );
}
.fly-reverse li.future {
    opacity: 0;

    -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 li {
    -webkit-transition: all 600ms ease,
    opacity 200ms 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 li.past {
    -webkit-transform: skewY( 30deg );
    -moz-transform: skewY( 30deg );
    -ms-transform: skewY( 30deg );
    -o-transform: skewY( 30deg );
    transform: skewY( 30deg );
}
.skew li.future {
    z-index: 0;

    -webkit-transform: skewY( -30deg );
    -moz-transform: skewY( -30deg );
    -ms-transform: skewY( -30deg );
    -o-transform: skewY( -30deg );
    transform: skewY( -30deg );
}


/**
 * Helix styles
 */
.helix {
    -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%;
}

.helix li {
    -webkit-transition: all 600ms ease,
    opacity 200ms ease;
    -moz-transition: all 600ms ease;
    -ms-transition: all 600ms ease,
    opacity 200ms ease;
    -o-transition: all 600ms ease,
    opacity 200ms ease;
    transition: all 600ms ease,
    opacity 200ms 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%;
}
.helix li.past {
    opacity: 0;

    -webkit-transform: rotateY( 180deg );
    -moz-transform: rotateY( 180deg );
    -ms-transform: rotateY( 180deg );
    -o-transform: rotateY( 180deg );
    transform: rotateY( 180deg );
}
.helix li.future {
    opacity: 0;

    -webkit-transform: rotateY( -180deg );
    -moz-transform: rotateY( -180deg );
    -ms-transform: rotateY( -180deg );
    -o-transform: rotateY( -180deg );
    transform: rotateY( -180deg );
}


/**
 * Wave styles
 */
.wave li {
    -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 li.past {
    -webkit-transform: translateX( -70% );
    -moz-transform: translateX( -70% );
    -ms-transform: translateX( -70% );
    -o-transform: translateX( -70% );
    transform: translateX( -70% );
}
.wave li.future {
    -webkit-transform: translateX( -70% );
    -moz-transform: translateX( -70% );
    -ms-transform: translateX( -70% );
    -o-transform: translateX( -70% );
    transform: translateX( -70% );
}


/**
 * Fan styles
 */
.fan li {
    -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 li.past {
    -webkit-transform: rotate( -60deg );
    -moz-transform: rotate( -60deg );
    -ms-transform: rotate( -60deg );
    -o-transform: rotate( -60deg );
    transform: rotate( -60deg );
}
.fan li.future {
    -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 li {
    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 li.past {
    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 li.future {
    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 li {
    -webkit-transition: all 600ms ease,
    opacity 200ms ease;
    -moz-transition: all 600ms ease;
    -ms-transition: all 600ms ease,
    opacity 200ms ease;
    -o-transition: all 600ms ease,
    opacity 200ms ease;
    transition: all 600ms ease,
    opacity 200ms 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%;

    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    backface-visibility: hidden;
}
.curl li.past {
    opacity: 0;

    -webkit-transform: rotateY( 90deg );
    -moz-transform: rotateY( 90deg );
    -ms-transform: rotateY( 90deg );
    -o-transform: rotateY( 90deg );
    transform: rotateY( 90deg );
}
.curl li.future {
    opacity: 0;

    -webkit-transform: rotateY( 90deg );
    -moz-transform: rotateY( 90deg );
    -ms-transform: rotateY( 90deg );
    -o-transform: rotateY( 90deg );
    transform: rotateY( 90deg );
}


.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 li {
    -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 li.past {
    -webkit-transform: skewY( -30deg );
    -moz-transform: skewY( -30deg );
    -ms-transform: skewY( -30deg );
    -o-transform: skewY( -30deg );
    transform: skewY( -30deg );
}
.papercut li.future {
    -webkit-transform: skewY( 30deg );
    -moz-transform: skewY( 30deg );
    -ms-transform: skewY( 30deg );
    -o-transform: skewY( 30deg );
    transform: skewY( 30deg );
}


/**
 * Zipper styles
 */
.zipper li {
    -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 li.past:nth-child(odd),
.zipper li.future:nth-child(odd) {
    -webkit-transform: translateX( 80% );
    -moz-transform: translateX( 80% );
    -ms-transform: translateX( 80% );
    -o-transform: translateX( 80% );
    transform: translateX( 80% );
}
.zipper li.past:nth-child(even),
.zipper li.future:nth-child(even) {
    -webkit-transform: translateX( -80% );
    -moz-transform: translateX( -80% );
    -ms-transform: translateX( -80% );
    -o-transform: translateX( -80% );
    transform: translateX( -80% );
}


/**
 * Fade styles
 */
.fade li {
    -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 li.past {
    opacity: 0;
}
.fade li.future {
    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 li {
    -webkit-transition: all 600ms ease,
    opacity 200ms ease;
    -moz-transition: all 600ms ease;
    -ms-transition: all 600ms ease,
    opacity 200ms ease;
    -o-transition: all 600ms ease,
    opacity 200ms ease;
    transition: all 600ms ease,
    opacity 200ms 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 li.past {
    opacity: 0;

    -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 li.future {
    opacity: 0;

    -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 );
}