/* STRUCTURE */

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

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

*, *:before, *:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}


.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 0.5s cubic-bezier(.77, .10, .22, 1);
	   -moz-transition:    -moz-transform 0.5s cubic-bezier(.77, .10, .22, 1);
	-webkit-transition: -webkit-transform 0.5s cubic-bezier(.77, .10, .22, 1);
			transition:         transform 0.5s 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%;
	height: 100%;
	position: relative;
	z-index: auto;
	/**
	 * GPU acceleration disabled to drop down memory consuption on tablet and smartphones
	 */
	/*
		 -o-transform: translateZ(0);
	    -ms-transform: translateZ(0);
	   -moz-transform: translateZ(0);
	-webkit-transform: translateZ(0);
			transform: translateZ(0);
	*/
	}
.ft-page .actual .trame{
	background-image:url(http://www.lacor.info/film/computer_chess/img/pattern.png);
	background-repeat:repeat; 
	z-index:103;
	width:200%;
	height:200%;
	background-position:0 top;
	}

/**
 * GPU acceleration enabled only on the pages involved in the slide animation to ensure no glitches on transition
 */
.ft-page.actual,
.ft-page.actual-out {
	z-index: 100;
	     -o-transform: translateZ(0);
	    -ms-transform: translateZ(0);
	   -moz-transform: translateZ(0);
	-webkit-transform: translateZ(0);
			transform: translateZ(0);
	}

/* pages in overview mode */
.ft-overview .ft-page {
	opacity: 0.6;
	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.4;
	     -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;
	}
	
	
.ft-sound {
	display:block;
	width:6rem;
	height:6rem;
	position:absolute;
	right:0;
	bottom:0;
	z-index:900;
	}
	
	
.ft-chess {
	display:block;
	width:4.5.rem;
	height:4.5rem;
	position:fixed;
	bottom: 16px;
	bottom: 1rem;
	right: 16px;
	right: 1rem;
	z-index:800;
	}

/* 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;
	box-shadow:1px 1px 1px 1px rgba(140,140,140,0.1);
	width: 0.5rem;
	height: 0.5rem;	
	background:transparent;
	margin-right: 0.0625rem;
	margin-bottom:  0.0625rem;
	cursor: pointer;
	-o-transition: all 0.5s cubic-bezier(.77, .10, .22, .4);
	-moz-transition: all 0.5s cubic-bezier(.77, .10, .22, .4);
	-webkit-transition: all 0.5s cubic-bezier(.77, .10, .22, .4);
	transition: all 0.5s cubic-bezier(.77, .10, .22, .4);
	}

.ft-page-thumb:hover {
	width: 0.5625rem;
	height: 0.5625rem;
	background: #fff;
	margin:0;
	border: 1px solid rgba(185,61,48,.4);
	}

.ft-page-thumb.actual {
	width:0.5625rem;
	height: 0.5625rem;
	background: #fff;
	margin:0;
	background-color:rgba(185,61,48,.4);
	border: 1px solid rgba(185,61,48,.6);	
	}


/* overview mode page highlighting */
.ft-overview .ft-page.actual {
	opacity: 0.8;
	}

.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: 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;
	}

/* 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: translateZ(0) !important;
	    -ms-transform: translateZ(0) !important;
	   -moz-transform: translateZ(0) !important;
	-webkit-transform: translateZ(0) !important;
			transform: translateZ(0) !important;
	}