/*
RESET That's the one by Eric Meyer http://meyerweb.com/eric/tools/css/reset/

You can probably argue if it is needed here, or not, but for sure it doesn't
do any harm and gives us a fresh start.
*/

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p,
blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img,
ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center,
dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody,
tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure,
figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit;
vertical-align: baseline; color:white;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav,
section {
display: block;
} body {
line-height: 1;
} ol, ul {
list-style: none;
} blockquote, q {
quotes: none;
} blockquote:before, blockquote:after, q:before, q:after {
content: ''; content: none;
}

table {
border-collapse: collapse; border-spacing: 0;
}

/*
BODY STYLES */ body {
font-family: 'PT Sans narrow', sans-serif; min-height: 740px;

background: rgb(56,74,112); /* Old browsers */ background:
-moz-linear-gradient(-45deg, rgba(56,74,112,1) 0%, rgba(129,212,226,1) 53%,
rgba(252,248,186,1) 100%); /* FF3.6+ */ background: -webkit-gradient(linear,
left top, right bottom, color-stop(0%,rgba(56,74,112,1)),
color-stop(53%,rgba(129,212,226,1)), color-stop(100%,rgba(252,248,186,1))); /*
Chrome,Safari4+ */ background: -webkit-linear-gradient(-45deg, rgba(56,74,112,1)
0%,rgba(129,212,226,1) 53%,rgba(252,248,186,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(-45deg, rgba(56,74,112,1) 0%,rgba(129,212,226,1)
53%,rgba(252,248,186,1) 100%); /* Opera 11.10+ */ background:
-ms-linear-gradient(-45deg, rgba(56,74,112,1) 0%,rgba(129,212,226,1)
53%,rgba(252,248,186,1) 100%); /* IE10+ */ background: linear-gradient(135deg,
rgba(56,74,112,1) 0%,rgba(129,212,226,1) 53%,rgba(252,248,186,1) 100%); /* W3C
*/ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#384a70',
endColorstr='#fcf8ba',GradientType=1 ); /* IE6-9 fallback on horizontal gradient
*/
}

b, strong { font-weight: bold } i, em { font-style: italic }
a {
color: inherit; text-decoration: none; padding: 0 0.1em; text-shadow: -1px
-1px 2px rgba(100,100,100,0.9); border-radius: 0.2em;
-webkit-transition: 0.5s; -moz-transition: 0.5s; -ms-transition: 0.5s;
-o-transition: 0.5s; transition: 0.5s;
}

a:hover, a:focus {
color:white; text-shadow: -1px -1px 2px rgba(100,100,100,0.5);
}

/*
We display a fallback message for users with browsers that don't support all
the features required by it.

All of the content will be still fully accessible for them, but I want them
to know that they are missing something - that's what the demo is about,
isn't it?

And then we hide the message, when support is detected in the browser.
*/

.fallback-message {
font-family: sans-serif; line-height: 1.3;
width: 780px; padding: 10px 10px 0; margin: 20px auto;
border: 1px solid #E4C652; border-radius: 10px; background: rgba(255, 255,
255, 0.2);
}

.fallback-message p {
margin-bottom: 10px;
}

.impress-supported .fallback-message {
display: none;
}

/*
basics
*/

.step {
position: relative; width: 900px; padding: 40px; margin: 20px auto;
-webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing:
border-box; -o-box-sizing: border-box; box-sizing: border-box;
font-family: 'PT sans narrow', georgia, serif; font-size: 48px; line-height:
1.5; }
} .step-nav { display:block; position:absolute; z-index:100;
padding-top: 10px; font-size: 8px; line-height: 9px;
}

/*
... and we enhance the styles for impress.js.
Basically we remove the margin and make inactive steps a little bit
transparent.
*/
.impress-enabled .step {
margin: 0; opacity: 0.3;

-webkit-transition: opacity 1s; -moz-transition: opacity 1s; -ms-transition:
opacity 1s; -o-transition: opacity 1s; transition: opacity 1s;
}

.impress-enabled .step.active { opacity: 1 }

/*
These 'slide' step styles were heavily inspired by HTML5 Slides:
http://html5slides.googlecode.com/svn/trunk/styles.css
;)
They cover everything what you see on first three steps of the demo.
*/
.slide {
display: block;
width: 900px; height: 700px; padding: 40px 60px;
background-color: transparent; border: 1px solid rgba(0, 0, 0, .3);
border-radius: 10px; box-shadow: 0 2px 6px rgba(0, 0, 0, .1);
color: rgb(255, 255, 255); text-shadow: 0 2px 2px rgba(0, 0, 0, .1);
font-size: 30px; line-height: 36px; letter-spacing: -1px;
}

.slide q {
display: block; font-size: 50px; line-height: 72px;

margin-top: 100px;
}

.slide q strong {
white-space: nowrap;
} .film {
font-size:1.3em;font-style:italic;
} .auteur{
font-size:0.8em;
}

.ft{
font-size:0.6em; line-height:0.9em;
}
/*
And now we start to style each step separately.
Most of steps have quite a custom look and
typography tricks here and there, so they had to be styled separately.
*/
#title {
padding: 0;
}

#title .try {
font-size: 64px; position: absolute; top: -0.5em; left: 1.5em;
-webkit-transform: translateZ(20px); -moz-transform: translateZ(20px);
-ms-transform: translateZ(20px); -o-transform: translateZ(20px); transform:
translateZ(20px);
}

#title h1 {
font-size: 190px;
-webkit-transform: translateZ(50px); -moz-transform: translateZ(50px);
-ms-transform: translateZ(50px); -o-transform: translateZ(50px); transform:
translateZ(50px);
}

#title .footnote {
font-size: 53px;
}

/*
STEPS one-more-thing 1 to n : nothing special, just a text with a link, so it doesn't need
any special styling.
*/

/*
Let's move to 'big thoughts' with centered text and custom font sizes.
*/

#big {
width: 800px; text-align:left; font-size: 60px; line-height: 1;
}

#big b {
display: block; font-size: 250px; line-height: 250px;

}

#big .thoughts {
font-size: 90px; line-height: 150px;
}

/*
'Tiny ideas' just need some tiny styling.
*/
#tiny0, #tiny1, #tiny2, #tiny3, #tiny4 {
width: 800px; text-align:left; }

#tiny5, #tiny6, #tiny7, #tiny8, #tiny9 {
width:900px;
text-align:right; }

#tiny0, #tiny1, #tiny2, #tiny3, #tiny4, #tiny5, #tiny6,#tiny7, #tiny8, #tiny9
#span {
text-shadow:1px 1px 1px #111; }

#tiny0 .present .rotating {
-webkit-transform: rotate(50deg); -moz-transform: rotate(50deg);
-ms-transform: rotate(50deg); -o-transform: rotate(50deg); transform:
rotate(50deg);
-webkit-transition-delay: 0.40s; -moz-transition-delay: 0.40s;
-ms-transition-delay: 0.40s; -o-transition-delay: 0.40s; transition-delay:
0.40s;
}

#tiny4 .present .rotating {
-webkit-transform: rotate(-60deg); -moz-transform: rotate(-60deg);
-ms-transform: rotate(-60deg); -o-transform: rotate(-60deg); transform:
rotate(-60deg);
-webkit-transition-delay: 0.25s; -moz-transition-delay: 0.25s;
-ms-transition-delay: 0.25s; -o-transition-delay: 0.25s; transition-delay:
0.25s;
}

#tiny5 .present .rotating {
-webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg); -o-transform: rotate(-90deg); transform:
rotate(-90deg);
-webkit-transition-delay: 0.30s; -moz-transition-delay: 0.30s;
-ms-transition-delay: 0.30s; -o-transition-delay: 0.30s; transition-delay:
0.30s;
}

/*
These steps have some animated text ...
*/
#ing { width: 900px; }
#ing2 { width: 800px; }

/*
... so we define display to `inline-block` to enable transforms and
transition duration to 0.5s ...
*/
#ing b {
display: inline-block; -webkit-transition: 0.5s; -moz-transition: 0.5s;
-ms-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s;
}

#ing2 b {
display: inline-block; -webkit-transition: 0.5s; -moz-transition: 0.5s;
-ms-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s;
}
/*
... and we want 'positioning` word to move up a bit when the step gets
`present` class ...
*/
#ing.present .positioning {
-webkit-transform: translateY(-10px); -moz-transform: translateY(-10px);
-ms-transform: translateY(-10px); -o-transform: translateY(-10px);
transform: translateY(-10px);
}
#ing2.present .positioning {
-webkit-transform: translateY(-10px); -moz-transform: translateY(-10px);
-ms-transform: translateY(-10px); -o-transform: translateY(-10px);
transform: translateY(-10px);
}

/*
... 'rotating' to rotate a quarter of a second later ...
*/
#ing.present .rotating {
-webkit-transform: rotate(-10deg); -moz-transform: rotate(-10deg);
-ms-transform: rotate(-10deg); -o-transform: rotate(-10deg); transform:
rotate(-10deg);
-webkit-transition-delay: 0.25s; -moz-transition-delay: 0.25s;
-ms-transition-delay: 0.25s; -o-transition-delay: 0.25s; transition-delay:
0.25s;
}

#ing2.present .rotating {
-webkit-transform: rotate(-20deg); -moz-transform: rotate(-20deg);
-ms-transform: rotate(-20deg); -o-transform: rotate(-20deg); transform:
rotate(-20deg);
-webkit-transition-delay: 0.30s; -moz-transition-delay: 0.30s;
-ms-transition-delay: 0.30s; -o-transition-delay: 0.30s; transition-delay:
0.30s;
}

/*
... and 'scaling' to scale down after another quarter of a second.
*/
#ing.present .scaling {
-webkit-transform: scale(0.7); -moz-transform: scale(0.7); -ms-transform:
scale(0.7); -o-transform: scale(0.7); transform: scale(0.7);
-webkit-transition-delay: 0.5s; -moz-transition-delay: 0.5s;
-ms-transition-delay: 0.5s; -o-transition-delay: 0.5s; transition-delay:
0.5s;
}

#ing2.present .scaling {
-webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform:
scale(1.1); -o-transform: scale(1.1); transform: scale(1.1);
-webkit-transition-delay: 0.40s; -moz-transition-delay: 0.40s;
-ms-transition-delay: 0.40s; -o-transition-delay: 0.40s; transition-delay:
0.40s;
}


/*
The 'imagination' step is against some boring font-sizing.
*/

#imagination {
width: 600px;
}

#imagination .imagination {
font-size: 78px;
}

/*
The 'source' step 
*/
#source {
width: 700px; padding-bottom: 300px;
}
#source b {
display: inline-block; -webkit-transition: 0.5s; -moz-transition: 0.5s;
-ms-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s;
}

/*
... and we want 'positioning` word to move up a bit when the step gets
`present` class ...
*/
#source.present .positioning {
-webkit-transform: translateY(-20px); -moz-transform: translateY(-20px);
-ms-transform: translateY(-20px); -o-transform: translateY(-20px);
transform: translateY(-20px);
}

/*
... 'rotating' to rotate a quarter of a second later ...
*/
#source.present .rotating {
-webkit-transform: rotate(-20deg); -moz-transform: rotate(-20deg);
-ms-transform: rotate(-20deg); -o-transform: rotate(-20deg); transform:
rotate(-20deg);

-webkit-transition-delay: 0.25s; -moz-transition-delay: 0.25s;
-ms-transition-delay: 0.25s; -o-transition-delay: 0.25s; transition-delay:
0.25s;
}

/*
... and 'scaling' to scale down after another quarter of a second.
*/
#source.present .scaling {
-webkit-transform: scale(0.8); -moz-transform: scale(0.8); -ms-transform:
scale(0.8); -o-transform: scale(0.8); transform: scale(0.8);

-webkit-transition-delay: 0.8s; -moz-transition-delay: 0.8s;
-ms-transition-delay: 0.8s; -o-transition-delay: 0.8s; transition-delay:
0.8s;
}

#source q {
font-size: 60px;
}

/*
The "it's in 3D" step again brings some 3D typography - just for fun.

Because we want to position <span> elements in 3D we set transform-style to
`preserve-3d` on the paragraph. It is not needed by webkit browsers, but it
is in Firefox. It's hard to say which behaviour is correct as 3D transforms
spec is not very clear about it.
*/
#its-in-3d p {
-webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; /*
Y U need this Firefox?! */ -ms-transform-style: preserve-3d;
-o-transform-style: preserve-3d; transform-style: preserve-3d;
}

/*
Below we position each word separately along Z axis and we want it to
transition to default position in 0.5s when the step gets `present` class.

Quite a simple idea, but lot's of styles and prefixes.
*/
#its-in-3d span, its-in-3d b {
display: inline-block; -webkit-transform: translateZ(40px); -moz-transform:
translateZ(40px); -ms-transform: translateZ(40px); -o-transform:
translateZ(40px);
 transform: translateZ(40px);

-webkit-transition: 0.5s; -moz-transition: 0.5s; -ms-transition: 0.5s;
-o-transition: 0.5s; transition: 0.5s;
}

#its-in-3d .have {
-webkit-transform: translateZ(-40px); -moz-transform: translateZ(-40px);
-ms-transform: translateZ(-40px); -o-transform: translateZ(-40px);
transform: translateZ(-40px);
}

#its-in-3d .you {
-webkit-transform: translateZ(20px); -moz-transform: translateZ(20px);
-ms-transform: translateZ(20px); -o-transform: translateZ(20px); transform:
translateZ(20px);
}

#its-in-3d .noticed {
-webkit-transform: translateZ(-40px); -moz-transform: translateZ(-40px);
-ms-transform: translateZ(-40px); -o-transform: translateZ(-40px);
transform: translateZ(-40px);
}

#its-in-3d .its {
-webkit-transform: translateZ(60px); -moz-transform: translateZ(60px);
-ms-transform: translateZ(60px); -o-transform: translateZ(60px); transform:
translateZ(60px);
}

#its-in-3d .in {
-webkit-transform: translateZ(-10px); -moz-transform: translateZ(-10px);
-ms-transform: translateZ(-10px); -o-transform: translateZ(-10px);
transform: translateZ(-10px);
}

#its-in-3d .footnote {
font-size: 32px;

-webkit-transform: translateZ(-10px); -moz-transform: translateZ(-10px);
-ms-transform: translateZ(-10px); -o-transform: translateZ(-10px);
transform: translateZ(-10px);
}

#its-in-3d.present span, its-in-3d.present b {
-webkit-transform: translateZ(0px); -moz-transform: translateZ(0px);
-ms-transform: translateZ(0px); -o-transform: translateZ(0px); transform:
translateZ(0px);
}

/*
The last step is an OVERVIEW. There is no content in it, so we make sure
it's not visible because we want to be able to click on other steps.

*/
#overview { display: none }

/*
We also make other steps visible and give them a pointer cursor using the
`impress-on-` class.
*/ .impress-on-overview .step {
opacity: 1; cursor: pointer;
}


/*
La classe hint ci-dessous ne marche pas partout. C'est pourquoi, dans le
fichier index.html, elle est remplacée par un div placé sur la première step
*/

.hint {
display: none;
position: fixed; left: 0; right: 0; bottom: 200px;
background: rgba(0,0,0,0.5); color: #EEE; text-align: center;
font-size: 50px; padding: 20px;
z-index: 100;
opacity: 0;
-webkit-transform: translateY(400px); -moz-transform: translateY(400px);
-ms-transform: translateY(400px); -o-transform: translateY(400px);
transform: translateY(400px);
-webkit-transition: opacity 1s, -webkit-transform 0.5s 1s; -moz-transition:
opacity 1s, -moz-transform 0.5s 1s; -ms-transition: opacity 1s,
-ms-transform 0.5s 1s; -o-transition: opacity 1s, -o-transform 0.5s 1s;
transition: opacity 1s, transform 0.5s 1s;
}

ress-enabled .hint { display: block }


.impress-on-bored .hint {
opacity: 1;
-webkit-transform: translateY(0px); -moz-transform: translateY(0px);
-ms-transform: translateY(0px); -o-transform: translateY(0px); transform:
translateY(0px);

/*
Now for fade in transition we have the oposite situation from the one
above.

First after 4.5s delay we animate the transform property to move the
hint into its correct position and after that we fade it in with opacity
transition.
*/
-webkit-transition: opacity 1s 5s, -webkit-transform 0.5s 4.5s;
-moz-transition: opacity 1s 5s, -moz-transform 0.5s 4.5s; -ms-transition:
opacity 1s 5s, -ms-transform 0.5s 4.5s; -o-transition: opacity 1s 5s,
-o-transform 0.5s 4.5s; transition: opacity 1s 5s, transform 0.5s 4.5s;
}

.impress-enabled { pointer-events: none } .impress-enabled #impress {
pointer-events: auto }