sipadu_mbip/public/bower_components/stroll/css/stroll.css

/*!
 * 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 );
		}