/* THIS CSS STYLESHEET IS USED FOR THE "FLOWTIME.JS" FUNCTIONALITY */

/* STRUCTURE */


	html, body {
		width: 100%;
		height: 100%;
		-webkit-text-size-adjust:none;
	}

	body {
		white-space: nowrap; 	/* disable the wrapping of the space between articles */
	}

	.flowtime {
		font-size: 0; 			/* removes the white spaces between inline-block elements */
								/* WARNING! this technique does non remove the white-space in Safari for Windows */
								/* unless you use this hack: http://absolide.tumblr.com/post/36597829434/safari-inline-block-white-spaces-bug-fix */
								/* you can use any other white-space removal technique as per: http://css-tricks.com/fighting-the-space-between-inline-block-elements/ */
		width: 100%;
		height: 100%;
		     -o-transform-origin: 0 0;
		    -ms-transform-origin: 0 0;
		   -moz-transform-origin: 0 0;
		-webkit-transform-origin: 0 0;
				transform-origin: 0 0;
		     -o-transform: translateZ(0);
		    -ms-transform: translateZ(0);
		   -moz-transform: translateZ(0);
		-webkit-transform: translateZ(0);
				transform: translateZ(0);
		     -o-backface-visibility: hidden;
		    -ms-backface-visibility: hidden;
		   -moz-backface-visibility: hidden;
		-webkit-backface-visibility: hidden;
				backface-visibility: hidden;
		     -o-transition:      -o-transform 1.25s cubic-bezier(.77, .10, .22, 1);
		   -moz-transition:    -moz-transform 1.25s cubic-bezier(.77, .10, .22, 1);
		-webkit-transition: -webkit-transform 1.25s cubic-bezier(.77, .10, .22, 1);
				transition:         transform 1.25s cubic-bezier(.77, .10, .22, 1);
	}

	.flowtime.no-transition {
		     -o-transition:      -o-transform 0s;
		   -moz-transition:    -moz-transform 0s;
		-webkit-transition: -webkit-transform 0s;
				transition:         transform 0s;
	}

/* SECTIONS (COLUMNS) */

	/* base section */
	.ft-section {
		width: 100%;
		height: 100%;

		position: relative;
		     -o-transform: translateZ(0);
		    -ms-transform: translateZ(0);
		   -moz-transform: translateZ(0);
		-webkit-transform: translateZ(0);
				transform: translateZ(0);
	}

	/* section and section thumb alignment */
	.ft-section, .ft-section-thumb {
		font-size: 16px; 		/* reset the regular font size, in the old way… */
		font-size: 1rem; 		/* and in the modern way */
		white-space: normal;
		display: inline-block;	/* let the block elements stay on the same line */
								/* used together the white-space: nowrap; declaration */
								/* the elements doesn't break the line */
		vertical-align: top; 	/* fix the default alignement for the inline-block elements (default: baseline) */
								/* if different from "top" set Flowtime.slideWithPx(true) */
	}

/* PAGES */

	/* base page */
	.ft-page {
		   -moz-box-sizing: border-box;
		-webkit-box-sizing: border-box;
		        box-sizing: border-box;
		width: 100%;
		position: relative;
		z-index: auto;
		     -o-transform: translateZ(0);
		    -ms-transform: translateZ(0);
		   -moz-transform: translateZ(0);
		-webkit-transform: translateZ(0);
				transform: translateZ(0);
	}

	.ft-page.actual {
		z-index: 100;
	}

	/* pages in overview mode */
	.ft-overview .ft-page {
		opacity: 0.5;
		cursor: pointer;
		     -o-transition: all 0.5s cubic-bezier(.77, .10, .22, 1);
		   -moz-transition: all 0.5s cubic-bezier(.77, .10, .22, 1);
		-webkit-transition: all 0.5s cubic-bezier(.77, .10, .22, 1);
				transition: all 0.5s cubic-bezier(.77, .10, .22, 1);
		     -o-transform: scale(0.95);
		    -ms-transform: scale(0.95);
		   -moz-transform: scale(0.95);
		-webkit-transform: scale(0.95);
				transform: scale(0.95);
		     -o-transform-origin: 50% 50%;
		    -ms-transform-origin: 50% 50%;
		   -moz-transform-origin: 50% 50%;
		-webkit-transform-origin: 50% 50%;
				transform-origin: 50% 50%;
	}

	.ft-overview .ft-page * {
		pointer-events: none;
	}

/* JAVASCRIPT NAVIGATION HOOKS */

	.ft-absolute-nav {
		overflow: hidden;
	}


	.ft-absolute-nav .flowtime {
		position: absolute;
	}

/* EYE CANDY OVERRIDABLE CLASSES AND PROPERTIES */

/* FRAGMENTS */

	.ft-fragment {
		opacity: 0;
		     -o-transition: all 0.3s cubic-bezier(.77, .10, .22, 1);
		   -moz-transition: all 0.3s cubic-bezier(.77, .10, .22, 1);
		-webkit-transition: all 0.3s cubic-bezier(.77, .10, .22, 1);
				transition: all 0.3s cubic-bezier(.77, .10, .22, 1);
		     -o-transform: translateZ(0);
		    -ms-transform: translateZ(0);
		   -moz-transform: translateZ(0);
		-webkit-transform: translateZ(0);
				transform: translateZ(0);
	}

	.ft-fragment.revealed.step {
		opacity: 0.3;
	}

	.ft-fragment.revealed.shy {
		opacity: 0;
	}

	.ft-fragment.revealed,
	.ft-fragment.revealed-temp,
	.ft-fragment.revealed.actual {
		opacity: 1;
	}

/* DEFAULT PROGRESS */

	.ft-default-progress {
		position: fixed;
		bottom: 16px;
		bottom: 1rem;
		right: 16px;
		right: 1rem;
		z-index: 1000;
		opacity: 0.3;
		     -o-transition: all 0.5s cubic-bezier(.77, .10, .22, 1);
		   -moz-transition: all 0.5s cubic-bezier(.77, .10, .22, 1);
		-webkit-transition: all 0.5s cubic-bezier(.77, .10, .22, 1);
				transition: all 0.5s cubic-bezier(.77, .10, .22, 1);
	}

	.ft-default-progress:hover {
		opacity: 1;
	}

	/* default progress disappears when in overview mode */
	.ft-overview .ft-default-progress {
		opacity: 0;
		pointer-events: none;
	}

	/* default progress page thumb */
	.ft-page-thumb {
		   -moz-box-sizing: border-box;
		-webkit-box-sizing: border-box;
		        box-sizing: border-box;
		width: 1rem;
		height: 0.7rem;
		margin-right: 1px;
		margin-bottom: 1px;
		background-color: rgba(0,0,0,0.7);
		cursor: pointer;
		     -o-transition: all 0.5s cubic-bezier(.77, .10, .22, 1);
		   -moz-transition: all 0.5s cubic-bezier(.77, .10, .22, 1);
		-webkit-transition: all 0.5s cubic-bezier(.77, .10, .22, 1);
				transition: all 0.5s cubic-bezier(.77, .10, .22, 1);
		display:none;
	}

	.ft-page-thumb:hover {
		background-color: rgba(255,255,255,0.7);
	}

	.ft-page-thumb.actual {
		background-color: rgba(255,255,255,0.5);
		border: 1px solid #ffffff;
	}

	/* overview mode page highlighting */

	.ft-overview .ft-page.actual {
		opacity: 0.25;
	}

	.ft-overview .ft-page.hilite {
		opacity: 1;
	}

	.ft-overview .ft-page:hover {
		opacity: 1;
	}

/* HARDWARE ACCELERATED ELEMENTS */
/* I've not used * because causes issues with current Chrome */

	img {
		     -o-transform: translate3d(0, 0, 0);
		    -ms-transform: translate3d(0, 0, 0);
		   -moz-transform: translate3d(0, 0, 0);
		-webkit-transform: translate3d(0, 0, 0);
				transform: translate3d(0, 0, 0);
		     -o-backface-visibility: hidden;
		    -ms-backface-visibility: hidden;
		   -moz-backface-visibility: hidden;
		-webkit-backface-visibility: hidden;
				backface-visibility: hidden;
	}

/* PARALLAX MANAGEMENT */

 	.parallax {
 		position: relative;
		     -o-transition: all 0.5s cubic-bezier(.50, .10, .50, 1);
		   -moz-transition: all 0.5s cubic-bezier(.50, .10, .50, 1);
		-webkit-transition: all 0.5s cubic-bezier(.50, .10, .50, 1);
				transition: all 0.5s cubic-bezier(.50, .10, .50, 1);
	}

	.ft-overview .parallax {
		     -o-transform: translate3d(0, 0, 0) !important;
		    -ms-transform: translate3d(0, 0, 0) !important;
		   -moz-transform: translate3d(0, 0, 0) !important;
		-webkit-transform: translate3d(0, 0, 0) !important;
				transform: translate3d(0, 0, 0) !important;
	}