reveal.css 33 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311
  1. @charset "UTF-8";
  2. /*!
  3. * reveal.js
  4. * http://lab.hakim.se/reveal-js
  5. * MIT licensed
  6. *
  7. * Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se
  8. */
  9. /*********************************************
  10. * RESET STYLES
  11. *********************************************/
  12. html, body, .reveal div, .reveal span, .reveal applet, .reveal object, .reveal iframe,
  13. .reveal h1, .reveal h2, .reveal h3, .reveal h4, .reveal h5, .reveal h6, .reveal p, .reveal blockquote, .reveal pre,
  14. .reveal a, .reveal abbr, .reveal acronym, .reveal address, .reveal big, .reveal cite, .reveal code,
  15. .reveal del, .reveal dfn, .reveal em, .reveal img, .reveal ins, .reveal kbd, .reveal q, .reveal s, .reveal samp,
  16. .reveal small, .reveal strike, .reveal strong, .reveal sub, .reveal sup, .reveal tt, .reveal var,
  17. .reveal b, .reveal u, .reveal i, .reveal center,
  18. .reveal dl, .reveal dt, .reveal dd, .reveal ol, .reveal ul, .reveal li,
  19. .reveal fieldset, .reveal form, .reveal label, .reveal legend,
  20. .reveal table, .reveal caption, .reveal tbody, .reveal tfoot, .reveal thead, .reveal tr, .reveal th, .reveal td,
  21. .reveal article, .reveal aside, .reveal canvas, .reveal details, .reveal embed,
  22. .reveal figure, .reveal figcaption, .reveal footer, .reveal header, .reveal hgroup,
  23. .reveal menu, .reveal nav, .reveal output, .reveal ruby, .reveal section, .reveal summary,
  24. .reveal time, .reveal mark, .reveal audio, video {
  25. margin: 0;
  26. padding: 0;
  27. border: 0;
  28. font-size: 100%;
  29. font: inherit;
  30. vertical-align: baseline;
  31. }
  32. .reveal article, .reveal aside, .reveal details, .reveal figcaption, .reveal figure,
  33. .reveal footer, .reveal header, .reveal hgroup, .reveal menu, .reveal nav, .reveal section {
  34. display: block;
  35. }
  36. /*********************************************
  37. * GLOBAL STYLES
  38. *********************************************/
  39. html,
  40. body {
  41. width: 100%;
  42. height: 100%;
  43. overflow: hidden;
  44. }
  45. body {
  46. position: relative;
  47. line-height: 1;
  48. }
  49. ::selection {
  50. background: #FF5E99;
  51. color: #fff;
  52. text-shadow: none;
  53. }
  54. @media screen and (max-width: 900px), (max-height: 600px) {
  55. .reveal .slides {
  56. font-size: 0.82em;
  57. }
  58. }
  59. @media screen and (max-width: 700px), (max-height: 400px) {
  60. .reveal .slides {
  61. font-size: 0.66em;
  62. }
  63. }
  64. /*********************************************
  65. * HEADERS
  66. *********************************************/
  67. .reveal h1,
  68. .reveal h2,
  69. .reveal h3,
  70. .reveal h4,
  71. .reveal h5,
  72. .reveal h6 {
  73. -webkit-hyphens: auto;
  74. -moz-hyphens: auto;
  75. hyphens: auto;
  76. word-break: break-all;
  77. word-break: break-word;
  78. }
  79. .reveal h1 { font-size: 3.77em; }
  80. .reveal h2 { font-size: 2.11em; }
  81. .reveal h3 { font-size: 1.55em; }
  82. .reveal h4 { font-size: 1em; }
  83. /*********************************************
  84. * VIEW FRAGMENTS
  85. *********************************************/
  86. .reveal .slides section .fragment {
  87. opacity: 0;
  88. -webkit-transition: all .2s ease;
  89. -moz-transition: all .2s ease;
  90. -ms-transition: all .2s ease;
  91. -o-transition: all .2s ease;
  92. transition: all .2s ease;
  93. }
  94. .reveal .slides section .fragment.visible {
  95. opacity: 1;
  96. }
  97. .reveal .slides section .fragment.grow {
  98. opacity: 1;
  99. }
  100. .reveal .slides section .fragment.grow.visible {
  101. -webkit-transform: scale( 1.3 );
  102. -moz-transform: scale( 1.3 );
  103. -ms-transform: scale( 1.3 );
  104. -o-transform: scale( 1.3 );
  105. transform: scale( 1.3 );
  106. }
  107. .reveal .slides section .fragment.shrink {
  108. opacity: 1;
  109. }
  110. .reveal .slides section .fragment.shrink.visible {
  111. -webkit-transform: scale( 0.7 );
  112. -moz-transform: scale( 0.7 );
  113. -ms-transform: scale( 0.7 );
  114. -o-transform: scale( 0.7 );
  115. transform: scale( 0.7 );
  116. }
  117. .reveal .slides section .fragment.roll-in {
  118. opacity: 0;
  119. -webkit-transform: rotateX( 90deg );
  120. -moz-transform: rotateX( 90deg );
  121. -ms-transform: rotateX( 90deg );
  122. -o-transform: rotateX( 90deg );
  123. transform: rotateX( 90deg );
  124. }
  125. .reveal .slides section .fragment.roll-in.visible {
  126. opacity: 1;
  127. -webkit-transform: rotateX( 0 );
  128. -moz-transform: rotateX( 0 );
  129. -ms-transform: rotateX( 0 );
  130. -o-transform: rotateX( 0 );
  131. transform: rotateX( 0 );
  132. }
  133. .reveal .slides section .fragment.fade-out {
  134. opacity: 1;
  135. }
  136. .reveal .slides section .fragment.fade-out.visible {
  137. opacity: 0;
  138. }
  139. .reveal .slides section .fragment.highlight-red,
  140. .reveal .slides section .fragment.highlight-green,
  141. .reveal .slides section .fragment.highlight-blue {
  142. opacity: 1;
  143. }
  144. .reveal .slides section .fragment.highlight-red.visible {
  145. color: #ff2c2d
  146. }
  147. .reveal .slides section .fragment.highlight-green.visible {
  148. color: #17ff2e;
  149. }
  150. .reveal .slides section .fragment.highlight-blue.visible {
  151. color: #1b91ff;
  152. }
  153. /*********************************************
  154. * DEFAULT ELEMENT STYLES
  155. *********************************************/
  156. /* Fixes issue in Chrome where italic fonts did not appear when printing to PDF */
  157. .reveal:after {
  158. content: '';
  159. font-style: italic;
  160. }
  161. /* Preserve aspect ratio and scale image so it's bound within the section */
  162. .reveal img,
  163. .reveal iframe {
  164. max-width: 100%;
  165. max-height: 100%;
  166. }
  167. .reveal strong,
  168. .reveal b {
  169. font-weight: bold;
  170. }
  171. .reveal em,
  172. .reveal i {
  173. font-style: italic;
  174. }
  175. .reveal ol,
  176. .reveal ul {
  177. display: inline-block;
  178. text-align: left;
  179. margin: 0 0 0 1em;
  180. }
  181. .reveal ol {
  182. list-style-type: decimal;
  183. }
  184. .reveal ul {
  185. list-style-type: disc;
  186. }
  187. .reveal ul ul {
  188. list-style-type: square;
  189. }
  190. .reveal ul ul ul {
  191. list-style-type: circle;
  192. }
  193. .reveal ul ul,
  194. .reveal ul ol,
  195. .reveal ol ol,
  196. .reveal ol ul {
  197. display: block;
  198. margin-left: 40px;
  199. }
  200. .reveal p {
  201. margin-bottom: 10px;
  202. line-height: 1.2em;
  203. }
  204. .reveal q,
  205. .reveal blockquote {
  206. quotes: none;
  207. }
  208. .reveal blockquote {
  209. display: block;
  210. position: relative;
  211. width: 70%;
  212. margin: 5px auto;
  213. padding: 5px;
  214. font-style: italic;
  215. background: rgba(255, 255, 255, 0.05);
  216. box-shadow: 0px 0px 2px rgba(0,0,0,0.2);
  217. }
  218. .reveal blockquote p:first-child,
  219. .reveal blockquote p:last-child {
  220. display: inline-block;
  221. }
  222. .reveal blockquote:before {
  223. content: '\201C';
  224. }
  225. .reveal blockquote:after {
  226. content: '\201D';
  227. }
  228. .reveal q {
  229. font-style: italic;
  230. }
  231. .reveal q:before {
  232. content: '\201C';
  233. }
  234. .reveal q:after {
  235. content: '\201D';
  236. }
  237. .reveal pre {
  238. display: block;
  239. position: relative;
  240. width: 90%;
  241. margin: 15px auto;
  242. text-align: left;
  243. font-size: 0.55em;
  244. font-family: monospace;
  245. line-height: 1.2em;
  246. word-wrap: break-word;
  247. box-shadow: 0px 0px 6px rgba(0,0,0,0.3);
  248. }
  249. .reveal pre code {
  250. padding: 5px;
  251. }
  252. .reveal code {
  253. font-family: monospace;
  254. overflow: auto;
  255. max-height: 400px;
  256. }
  257. .reveal table th,
  258. .reveal table td {
  259. text-align: left;
  260. padding-right: .3em;
  261. }
  262. .reveal table th {
  263. text-shadow: rgb(255,255,255) 1px 1px 2px;
  264. }
  265. .reveal sup {
  266. vertical-align: super;
  267. }
  268. .reveal sub {
  269. vertical-align: sub;
  270. }
  271. .reveal small {
  272. display: inline-block;
  273. font-size: 0.6em;
  274. line-height: 1.2em;
  275. vertical-align: top;
  276. }
  277. .reveal small * {
  278. vertical-align: top;
  279. }
  280. /*********************************************
  281. * CONTROLS
  282. *********************************************/
  283. .reveal .controls {
  284. display: none;
  285. position: fixed;
  286. width: 110px;
  287. height: 110px;
  288. z-index: 30;
  289. right: 10px;
  290. bottom: 10px;
  291. }
  292. .reveal .controls div {
  293. position: absolute;
  294. opacity: 0.1;
  295. width: 0;
  296. height: 0;
  297. border: 12px solid transparent;
  298. -webkit-transition: opacity 0.2s ease;
  299. -moz-transition: opacity 0.2s ease;
  300. -ms-transition: opacity 0.2s ease;
  301. -o-transition: opacity 0.2s ease;
  302. transition: opacity 0.2s ease;
  303. }
  304. .reveal .controls div.enabled {
  305. opacity: 0.6;
  306. cursor: pointer;
  307. }
  308. .reveal .controls div.enabled:active {
  309. margin-top: 1px;
  310. }
  311. .reveal .controls div.navigate-left {
  312. top: 42px;
  313. border-right-width: 22px;
  314. border-right-color: #eee;
  315. }
  316. .reveal .controls div.navigate-right {
  317. left: 74px;
  318. top: 42px;
  319. border-left-width: 22px;
  320. border-left-color: #eee;
  321. }
  322. .reveal .controls div.navigate-up {
  323. left: 42px;
  324. border-bottom-width: 22px;
  325. border-bottom-color: #eee;
  326. }
  327. .reveal .controls div.navigate-down {
  328. left: 42px;
  329. top: 74px;
  330. border-top-width: 22px;
  331. border-top-color: #eee;
  332. }
  333. /*********************************************
  334. * PROGRESS BAR
  335. *********************************************/
  336. .reveal .progress {
  337. position: fixed;
  338. display: none;
  339. height: 3px;
  340. width: 100%;
  341. bottom: 0;
  342. left: 0;
  343. z-index: 10;
  344. }
  345. .reveal .progress:after {
  346. content: '';
  347. display: 'block';
  348. position: absolute;
  349. height: 20px;
  350. width: 100%;
  351. top: -20px;
  352. }
  353. .reveal .progress span {
  354. display: block;
  355. height: 100%;
  356. width: 0px;
  357. -webkit-transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
  358. -moz-transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
  359. -ms-transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
  360. -o-transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
  361. transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
  362. }
  363. /*********************************************
  364. * ROLLING LINKS
  365. *********************************************/
  366. .reveal .roll {
  367. display: inline-block;
  368. line-height: 1.2;
  369. overflow: hidden;
  370. vertical-align: top;
  371. -webkit-perspective: 400px;
  372. -moz-perspective: 400px;
  373. -ms-perspective: 400px;
  374. perspective: 400px;
  375. -webkit-perspective-origin: 50% 50%;
  376. -moz-perspective-origin: 50% 50%;
  377. -ms-perspective-origin: 50% 50%;
  378. perspective-origin: 50% 50%;
  379. }
  380. .reveal .roll:hover {
  381. background: none;
  382. text-shadow: none;
  383. }
  384. .reveal .roll span {
  385. display: block;
  386. position: relative;
  387. padding: 0 2px;
  388. pointer-events: none;
  389. -webkit-transition: all 400ms ease;
  390. -moz-transition: all 400ms ease;
  391. -ms-transition: all 400ms ease;
  392. transition: all 400ms ease;
  393. -webkit-transform-origin: 50% 0%;
  394. -moz-transform-origin: 50% 0%;
  395. -ms-transform-origin: 50% 0%;
  396. transform-origin: 50% 0%;
  397. -webkit-transform-style: preserve-3d;
  398. -moz-transform-style: preserve-3d;
  399. -ms-transform-style: preserve-3d;
  400. transform-style: preserve-3d;
  401. -webkit-backface-visibility: hidden;
  402. -moz-backface-visibility: hidden;
  403. backface-visibility: hidden;
  404. }
  405. .reveal .roll:hover span {
  406. background: rgba(0,0,0,0.5);
  407. -webkit-transform: translate3d( 0px, 0px, -45px ) rotateX( 90deg );
  408. -moz-transform: translate3d( 0px, 0px, -45px ) rotateX( 90deg );
  409. -ms-transform: translate3d( 0px, 0px, -45px ) rotateX( 90deg );
  410. transform: translate3d( 0px, 0px, -45px ) rotateX( 90deg );
  411. }
  412. .reveal .roll span:after {
  413. content: attr(data-title);
  414. display: block;
  415. position: absolute;
  416. left: 0;
  417. top: 0;
  418. padding: 0 2px;
  419. -webkit-transform-origin: 50% 0%;
  420. -moz-transform-origin: 50% 0%;
  421. -ms-transform-origin: 50% 0%;
  422. transform-origin: 50% 0%;
  423. -webkit-transform: translate3d( 0px, 110%, 0px ) rotateX( -90deg );
  424. -moz-transform: translate3d( 0px, 110%, 0px ) rotateX( -90deg );
  425. -ms-transform: translate3d( 0px, 110%, 0px ) rotateX( -90deg );
  426. transform: translate3d( 0px, 110%, 0px ) rotateX( -90deg );
  427. }
  428. /*********************************************
  429. * SLIDES
  430. *********************************************/
  431. .reveal {
  432. position: relative;
  433. width: 100%;
  434. height: 100%;
  435. min-height: 640px; /* min height + 40 to account for padding */
  436. }
  437. .reveal .slides {
  438. position: absolute;
  439. max-width: 900px;
  440. min-height: 600px;
  441. width: 80%;
  442. left: 50%;
  443. top: 50%;
  444. overflow: visible;
  445. z-index: 1;
  446. text-align: center;
  447. -webkit-transition: -webkit-perspective .4s ease;
  448. -moz-transition: -moz-perspective .4s ease;
  449. -ms-transition: -ms-perspective .4s ease;
  450. -o-transition: -o-perspective .4s ease;
  451. transition: perspective .4s ease;
  452. -webkit-perspective: 600px;
  453. -moz-perspective: 600px;
  454. -ms-perspective: 600px;
  455. perspective: 600px;
  456. -webkit-perspective-origin: 0px -100px;
  457. -moz-perspective-origin: 0px -100px;
  458. -ms-perspective-origin: 0px -100px;
  459. perspective-origin: 0px -100px;
  460. }
  461. .reveal .slides>section,
  462. .reveal .slides>section>section {
  463. display: none;
  464. position: absolute;
  465. width: 100%;
  466. padding: 20px 0px;
  467. z-index: 10;
  468. line-height: 1.2em;
  469. font-weight: normal;
  470. -webkit-transform-style: preserve-3d;
  471. -moz-transform-style: preserve-3d;
  472. -ms-transform-style: preserve-3d;
  473. transform-style: preserve-3d;
  474. -webkit-transition: -webkit-transform-origin 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985),
  475. -webkit-transform 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985),
  476. visibility 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985),
  477. opacity 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
  478. -moz-transition: -moz-transform-origin 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985),
  479. -moz-transform 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985),
  480. visibility 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985),
  481. opacity 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
  482. -ms-transition: -ms-transform-origin 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985),
  483. -ms-transform 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985),
  484. visibility 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985),
  485. opacity 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
  486. -o-transition: -o-transform-origin 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985),
  487. -o-transform 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985),
  488. visibility 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985),
  489. opacity 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
  490. transition: transform-origin 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985),
  491. transform 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985),
  492. visibility 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985),
  493. opacity 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
  494. }
  495. .reveal .slides>section {
  496. left: -50%;
  497. top: -50%;
  498. }
  499. .reveal .slides>section.present,
  500. .reveal .slides>section>section.present {
  501. display: block;
  502. z-index: 11;
  503. opacity: 1;
  504. }
  505. .reveal.center,
  506. .reveal.center .slides,
  507. .reveal.center .slides section {
  508. min-height: auto !important;
  509. }
  510. /*********************************************
  511. * DEFAULT TRANSITION
  512. *********************************************/
  513. .reveal .slides>section.past {
  514. display: block;
  515. opacity: 0;
  516. -webkit-transform: translate3d(-100%, 0, 0) rotateY(-90deg) translate3d(-100%, 0, 0);
  517. -moz-transform: translate3d(-100%, 0, 0) rotateY(-90deg) translate3d(-100%, 0, 0);
  518. -ms-transform: translate3d(-100%, 0, 0) rotateY(-90deg) translate3d(-100%, 0, 0);
  519. transform: translate3d(-100%, 0, 0) rotateY(-90deg) translate3d(-100%, 0, 0);
  520. }
  521. .reveal .slides>section.future {
  522. display: block;
  523. opacity: 0;
  524. -webkit-transform: translate3d(100%, 0, 0) rotateY(90deg) translate3d(100%, 0, 0);
  525. -moz-transform: translate3d(100%, 0, 0) rotateY(90deg) translate3d(100%, 0, 0);
  526. -ms-transform: translate3d(100%, 0, 0) rotateY(90deg) translate3d(100%, 0, 0);
  527. transform: translate3d(100%, 0, 0) rotateY(90deg) translate3d(100%, 0, 0);
  528. }
  529. .reveal .slides>section>section.past {
  530. display: block;
  531. opacity: 0;
  532. -webkit-transform: translate3d(0, -300px, 0) rotateX(70deg) translate3d(0, -300px, 0);
  533. -moz-transform: translate3d(0, -300px, 0) rotateX(70deg) translate3d(0, -300px, 0);
  534. -ms-transform: translate3d(0, -300px, 0) rotateX(70deg) translate3d(0, -300px, 0);
  535. transform: translate3d(0, -300px, 0) rotateX(70deg) translate3d(0, -300px, 0);
  536. }
  537. .reveal .slides>section>section.future {
  538. display: block;
  539. opacity: 0;
  540. -webkit-transform: translate3d(0, 300px, 0) rotateX(-70deg) translate3d(0, 300px, 0);
  541. -moz-transform: translate3d(0, 300px, 0) rotateX(-70deg) translate3d(0, 300px, 0);
  542. -ms-transform: translate3d(0, 300px, 0) rotateX(-70deg) translate3d(0, 300px, 0);
  543. transform: translate3d(0, 300px, 0) rotateX(-70deg) translate3d(0, 300px, 0);
  544. }
  545. /*********************************************
  546. * CONCAVE TRANSITION
  547. *********************************************/
  548. .reveal.concave .slides>section.past {
  549. -webkit-transform: translate3d(-100%, 0, 0) rotateY(90deg) translate3d(-100%, 0, 0);
  550. -moz-transform: translate3d(-100%, 0, 0) rotateY(90deg) translate3d(-100%, 0, 0);
  551. -ms-transform: translate3d(-100%, 0, 0) rotateY(90deg) translate3d(-100%, 0, 0);
  552. transform: translate3d(-100%, 0, 0) rotateY(90deg) translate3d(-100%, 0, 0);
  553. }
  554. .reveal.concave .slides>section.future {
  555. -webkit-transform: translate3d(100%, 0, 0) rotateY(-90deg) translate3d(100%, 0, 0);
  556. -moz-transform: translate3d(100%, 0, 0) rotateY(-90deg) translate3d(100%, 0, 0);
  557. -ms-transform: translate3d(100%, 0, 0) rotateY(-90deg) translate3d(100%, 0, 0);
  558. transform: translate3d(100%, 0, 0) rotateY(-90deg) translate3d(100%, 0, 0);
  559. }
  560. .reveal.concave .slides>section>section.past {
  561. -webkit-transform: translate3d(0, -80%, 0) rotateX(-70deg) translate3d(0, -80%, 0);
  562. -moz-transform: translate3d(0, -80%, 0) rotateX(-70deg) translate3d(0, -80%, 0);
  563. -ms-transform: translate3d(0, -80%, 0) rotateX(-70deg) translate3d(0, -80%, 0);
  564. transform: translate3d(0, -80%, 0) rotateX(-70deg) translate3d(0, -80%, 0);
  565. }
  566. .reveal.concave .slides>section>section.future {
  567. -webkit-transform: translate3d(0, 80%, 0) rotateX(70deg) translate3d(0, 80%, 0);
  568. -moz-transform: translate3d(0, 80%, 0) rotateX(70deg) translate3d(0, 80%, 0);
  569. -ms-transform: translate3d(0, 80%, 0) rotateX(70deg) translate3d(0, 80%, 0);
  570. transform: translate3d(0, 80%, 0) rotateX(70deg) translate3d(0, 80%, 0);
  571. }
  572. /*********************************************
  573. * ZOOM TRANSITION
  574. *********************************************/
  575. .reveal.zoom .slides>section.past {
  576. opacity: 0;
  577. visibility: hidden;
  578. -webkit-transform: scale(16);
  579. -moz-transform: scale(16);
  580. -ms-transform: scale(16);
  581. -o-transform: scale(16);
  582. transform: scale(16);
  583. }
  584. .reveal.zoom .slides>section.future {
  585. opacity: 0;
  586. visibility: hidden;
  587. -webkit-transform: scale(0.2);
  588. -moz-transform: scale(0.2);
  589. -ms-transform: scale(0.2);
  590. -o-transform: scale(0.2);
  591. transform: scale(0.2);
  592. }
  593. .reveal.zoom .slides>section>section.past {
  594. -webkit-transform: translate(0, -150%);
  595. -moz-transform: translate(0, -150%);
  596. -ms-transform: translate(0, -150%);
  597. -o-transform: translate(0, -150%);
  598. transform: translate(0, -150%);
  599. }
  600. .reveal.zoom .slides>section>section.future {
  601. -webkit-transform: translate(0, 150%);
  602. -moz-transform: translate(0, 150%);
  603. -ms-transform: translate(0, 150%);
  604. -o-transform: translate(0, 150%);
  605. transform: translate(0, 150%);
  606. }
  607. /*********************************************
  608. * LINEAR TRANSITION
  609. *********************************************/
  610. .reveal.linear .slides>section.past {
  611. -webkit-transform: translate(-150%, 0);
  612. -moz-transform: translate(-150%, 0);
  613. -ms-transform: translate(-150%, 0);
  614. -o-transform: translate(-150%, 0);
  615. transform: translate(-150%, 0);
  616. }
  617. .reveal.linear .slides>section.future {
  618. -webkit-transform: translate(150%, 0);
  619. -moz-transform: translate(150%, 0);
  620. -ms-transform: translate(150%, 0);
  621. -o-transform: translate(150%, 0);
  622. transform: translate(150%, 0);
  623. }
  624. .reveal.linear .slides>section>section.past {
  625. -webkit-transform: translate(0, -150%);
  626. -moz-transform: translate(0, -150%);
  627. -ms-transform: translate(0, -150%);
  628. -o-transform: translate(0, -150%);
  629. transform: translate(0, -150%);
  630. }
  631. .reveal.linear .slides>section>section.future {
  632. -webkit-transform: translate(0, 150%);
  633. -moz-transform: translate(0, 150%);
  634. -ms-transform: translate(0, 150%);
  635. -o-transform: translate(0, 150%);
  636. transform: translate(0, 150%);
  637. }
  638. /*********************************************
  639. * CUBE TRANSITION
  640. *********************************************/
  641. .reveal.cube .slides {
  642. -webkit-perspective: 1300px;
  643. -moz-perspective: 1300px;
  644. -ms-perspective: 1300px;
  645. perspective: 1300px;
  646. }
  647. .reveal.cube .slides section {
  648. padding: 30px;
  649. min-height: 600px;
  650. -webkit-backface-visibility: hidden;
  651. -moz-backface-visibility: hidden;
  652. -ms-backface-visibility: hidden;
  653. backface-visibility: hidden;
  654. -webkit-box-sizing: border-box;
  655. -moz-box-sizing: border-box;
  656. box-sizing: border-box;
  657. }
  658. .reveal.center.cube .slides section {
  659. min-height: auto;
  660. }
  661. .reveal.cube .slides section:not(.stack):before {
  662. content: '';
  663. position: absolute;
  664. display: block;
  665. width: 100%;
  666. height: 100%;
  667. left: 0;
  668. top: 0;
  669. background: rgba(0,0,0,0.1);
  670. border-radius: 4px;
  671. -webkit-transform: translateZ( -20px );
  672. -moz-transform: translateZ( -20px );
  673. -ms-transform: translateZ( -20px );
  674. -o-transform: translateZ( -20px );
  675. transform: translateZ( -20px );
  676. }
  677. .reveal.cube .slides section:not(.stack):after {
  678. content: '';
  679. position: absolute;
  680. display: block;
  681. width: 90%;
  682. height: 30px;
  683. left: 5%;
  684. bottom: 0;
  685. background: none;
  686. z-index: 1;
  687. border-radius: 4px;
  688. box-shadow: 0px 95px 25px rgba(0,0,0,0.2);
  689. -webkit-transform: translateZ(-90px) rotateX( 65deg );
  690. -moz-transform: translateZ(-90px) rotateX( 65deg );
  691. -ms-transform: translateZ(-90px) rotateX( 65deg );
  692. -o-transform: translateZ(-90px) rotateX( 65deg );
  693. transform: translateZ(-90px) rotateX( 65deg );
  694. }
  695. .reveal.cube .slides>section.stack {
  696. padding: 0;
  697. background: none;
  698. }
  699. .reveal.cube .slides>section.past {
  700. -webkit-transform-origin: 100% 0%;
  701. -moz-transform-origin: 100% 0%;
  702. -ms-transform-origin: 100% 0%;
  703. transform-origin: 100% 0%;
  704. -webkit-transform: translate3d(-100%, 0, 0) rotateY(-90deg);
  705. -moz-transform: translate3d(-100%, 0, 0) rotateY(-90deg);
  706. -ms-transform: translate3d(-100%, 0, 0) rotateY(-90deg);
  707. transform: translate3d(-100%, 0, 0) rotateY(-90deg);
  708. }
  709. .reveal.cube .slides>section.future {
  710. -webkit-transform-origin: 0% 0%;
  711. -moz-transform-origin: 0% 0%;
  712. -ms-transform-origin: 0% 0%;
  713. transform-origin: 0% 0%;
  714. -webkit-transform: translate3d(100%, 0, 0) rotateY(90deg);
  715. -moz-transform: translate3d(100%, 0, 0) rotateY(90deg);
  716. -ms-transform: translate3d(100%, 0, 0) rotateY(90deg);
  717. transform: translate3d(100%, 0, 0) rotateY(90deg);
  718. }
  719. .reveal.cube .slides>section>section.past {
  720. -webkit-transform-origin: 0% 100%;
  721. -moz-transform-origin: 0% 100%;
  722. -ms-transform-origin: 0% 100%;
  723. transform-origin: 0% 100%;
  724. -webkit-transform: translate3d(0, -100%, 0) rotateX(90deg);
  725. -moz-transform: translate3d(0, -100%, 0) rotateX(90deg);
  726. -ms-transform: translate3d(0, -100%, 0) rotateX(90deg);
  727. transform: translate3d(0, -100%, 0) rotateX(90deg);
  728. }
  729. .reveal.cube .slides>section>section.future {
  730. -webkit-transform-origin: 0% 0%;
  731. -moz-transform-origin: 0% 0%;
  732. -ms-transform-origin: 0% 0%;
  733. transform-origin: 0% 0%;
  734. -webkit-transform: translate3d(0, 100%, 0) rotateX(-90deg);
  735. -moz-transform: translate3d(0, 100%, 0) rotateX(-90deg);
  736. -ms-transform: translate3d(0, 100%, 0) rotateX(-90deg);
  737. transform: translate3d(0, 100%, 0) rotateX(-90deg);
  738. }
  739. /*********************************************
  740. * PAGE TRANSITION
  741. *********************************************/
  742. .reveal.page .slides {
  743. -webkit-perspective-origin: 0% 50%;
  744. -moz-perspective-origin: 0% 50%;
  745. -ms-perspective-origin: 0% 50%;
  746. perspective-origin: 0% 50%;
  747. -webkit-perspective: 3000px;
  748. -moz-perspective: 3000px;
  749. -ms-perspective: 3000px;
  750. perspective: 3000px;
  751. }
  752. .reveal.page .slides section {
  753. padding: 30px;
  754. min-height: 600px;
  755. -webkit-box-sizing: border-box;
  756. -moz-box-sizing: border-box;
  757. box-sizing: border-box;
  758. }
  759. .reveal.page .slides section.past {
  760. z-index: 12;
  761. }
  762. .reveal.page .slides section:not(.stack):before {
  763. content: '';
  764. position: absolute;
  765. display: block;
  766. width: 100%;
  767. height: 100%;
  768. left: 0;
  769. top: 0;
  770. background: rgba(0,0,0,0.1);
  771. -webkit-transform: translateZ( -20px );
  772. -moz-transform: translateZ( -20px );
  773. -ms-transform: translateZ( -20px );
  774. -o-transform: translateZ( -20px );
  775. transform: translateZ( -20px );
  776. }
  777. .reveal.page .slides section:not(.stack):after {
  778. content: '';
  779. position: absolute;
  780. display: block;
  781. width: 90%;
  782. height: 30px;
  783. left: 5%;
  784. bottom: 0;
  785. background: none;
  786. z-index: 1;
  787. border-radius: 4px;
  788. box-shadow: 0px 95px 25px rgba(0,0,0,0.2);
  789. -webkit-transform: translateZ(-90px) rotateX( 65deg );
  790. }
  791. .reveal.page .slides>section.stack {
  792. padding: 0;
  793. background: none;
  794. }
  795. .reveal.page .slides>section.past {
  796. -webkit-transform-origin: 0% 0%;
  797. -moz-transform-origin: 0% 0%;
  798. -ms-transform-origin: 0% 0%;
  799. transform-origin: 0% 0%;
  800. -webkit-transform: translate3d(-40%, 0, 0) rotateY(-80deg);
  801. -moz-transform: translate3d(-40%, 0, 0) rotateY(-80deg);
  802. -ms-transform: translate3d(-40%, 0, 0) rotateY(-80deg);
  803. transform: translate3d(-40%, 0, 0) rotateY(-80deg);
  804. }
  805. .reveal.page .slides>section.future {
  806. -webkit-transform-origin: 100% 0%;
  807. -moz-transform-origin: 100% 0%;
  808. -ms-transform-origin: 100% 0%;
  809. transform-origin: 100% 0%;
  810. -webkit-transform: translate3d(0, 0, 0);
  811. -moz-transform: translate3d(0, 0, 0);
  812. -ms-transform: translate3d(0, 0, 0);
  813. transform: translate3d(0, 0, 0);
  814. }
  815. .reveal.page .slides>section>section.past {
  816. -webkit-transform-origin: 0% 0%;
  817. -moz-transform-origin: 0% 0%;
  818. -ms-transform-origin: 0% 0%;
  819. transform-origin: 0% 0%;
  820. -webkit-transform: translate3d(0, -40%, 0) rotateX(80deg);
  821. -moz-transform: translate3d(0, -40%, 0) rotateX(80deg);
  822. -ms-transform: translate3d(0, -40%, 0) rotateX(80deg);
  823. transform: translate3d(0, -40%, 0) rotateX(80deg);
  824. }
  825. .reveal.page .slides>section>section.future {
  826. -webkit-transform-origin: 0% 100%;
  827. -moz-transform-origin: 0% 100%;
  828. -ms-transform-origin: 0% 100%;
  829. transform-origin: 0% 100%;
  830. -webkit-transform: translate3d(0, 0, 0);
  831. -moz-transform: translate3d(0, 0, 0);
  832. -ms-transform: translate3d(0, 0, 0);
  833. transform: translate3d(0, 0, 0);
  834. }
  835. /*********************************************
  836. * TILE-FLIP TRANSITION (CSS shader)
  837. *********************************************/
  838. .reveal.tileflip .slides section.present {
  839. -webkit-transform: none;
  840. -webkit-transition-duration: 800ms;
  841. -webkit-filter: custom( url(shaders/tile-flip.vs) mix(url(shaders/tile-flip.fs) multiply source-atop), 10 10 border-box detached, transform perspective(1000) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg),
  842. amount 0, randomness 0, flipAxis 0 1 0, tileOutline 1
  843. );
  844. }
  845. .reveal.tileflip .slides section.past {
  846. -webkit-transform: none;
  847. -webkit-transition-duration: 800ms;
  848. -webkit-filter: custom( url(shaders/tile-flip.vs) mix(url(shaders/tile-flip.fs) multiply source-atop), 10 10 border-box detached, transform perspective(1000) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg),
  849. amount 1, randomness 0, flipAxis 0 1 0, tileOutline 1
  850. );
  851. }
  852. .reveal.tileflip .slides section.future {
  853. -webkit-transform: none;
  854. -webkit-transition-duration: 800ms;
  855. -webkit-filter: custom( url(shaders/tile-flip.vs) mix(url(shaders/tile-flip.fs) multiply source-atop), 10 10 border-box detached, transform perspective(1000) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg),
  856. amount 1, randomness 0, flipAxis 0 1 0, tileOutline 1
  857. );
  858. }
  859. .reveal.tileflip .slides>section>section.present {
  860. -webkit-filter: custom( url(shaders/tile-flip.vs) mix(url(shaders/tile-flip.fs) multiply source-atop), 10 10 border-box detached, transform perspective(1000) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg),
  861. amount 0, randomness 2, flipAxis 1 0 0, tileOutline 1
  862. );
  863. }
  864. .reveal.tileflip .slides>section>section.past {
  865. -webkit-filter: custom( url(shaders/tile-flip.vs) mix(url(shaders/tile-flip.fs) multiply source-atop), 10 10 border-box detached, transform perspective(1000) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg),
  866. amount 1, randomness 2, flipAxis 1 0 0, tileOutline 1
  867. );
  868. }
  869. .reveal.tileflip .slides>section>section.future {
  870. -webkit-filter: custom( url(shaders/tile-flip.vs) mix(url(shaders/tile-flip.fs) multiply source-atop), 10 10 border-box detached, transform perspective(1000) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg),
  871. amount 1, randomness 2, flipAxis 1 0 0, tileOutline 1
  872. );
  873. }
  874. /*********************************************
  875. * FADE TRANSITION
  876. *********************************************/
  877. .reveal.fade .slides section,
  878. .reveal.fade .slides>section>section {
  879. -webkit-transform: none;
  880. -moz-transform: none;
  881. -ms-transform: none;
  882. -o-transform: none;
  883. transform: none;
  884. -webkit-transition: opacity 0.5s;
  885. -moz-transition: opacity 0.5s;
  886. -ms-transition: opacity 0.5s;
  887. -o-transition: opacity 0.5s;
  888. transition: opacity 0.5s;
  889. }
  890. .reveal.fade.overview .slides section,
  891. .reveal.fade.overview .slides>section>section,
  892. .reveal.fade.exit-overview .slides section,
  893. .reveal.fade.exit-overview .slides>section>section {
  894. -webkit-transition: none;
  895. -moz-transition: none;
  896. -ms-transition: none;
  897. -o-transition: none;
  898. transition: none;
  899. }
  900. /*********************************************
  901. * NO TRANSITION
  902. *********************************************/
  903. .reveal.none .slides section {
  904. -webkit-transform: none;
  905. -moz-transform: none;
  906. -ms-transform: none;
  907. -o-transform: none;
  908. transform: none;
  909. -webkit-transition: none;
  910. -moz-transition: none;
  911. -ms-transition: none;
  912. -o-transition: none;
  913. transition: none;
  914. }
  915. /*********************************************
  916. * OVERVIEW
  917. *********************************************/
  918. .reveal.overview .slides {
  919. -webkit-perspective-origin: 0% 0%;
  920. -moz-perspective-origin: 0% 0%;
  921. -ms-perspective-origin: 0% 0%;
  922. perspective-origin: 0% 0%;
  923. -webkit-perspective: 700px;
  924. -moz-perspective: 700px;
  925. -ms-perspective: 700px;
  926. perspective: 700px;
  927. }
  928. .reveal.overview .slides section {
  929. height: 600px;
  930. overflow: hidden;
  931. opacity: 1!important;
  932. visibility: visible!important;
  933. cursor: pointer;
  934. background: rgba(0,0,0,0.1);
  935. }
  936. .reveal.overview .slides section .fragment {
  937. opacity: 1;
  938. }
  939. .reveal.overview .slides section:after,
  940. .reveal.overview .slides section:before {
  941. display: none !important;
  942. }
  943. .reveal.overview .slides section>section {
  944. opacity: 1;
  945. cursor: pointer;
  946. }
  947. .reveal.overview .slides section:hover {
  948. background: rgba(0,0,0,0.3);
  949. }
  950. .reveal.overview .slides section.present {
  951. background: rgba(0,0,0,0.3);
  952. }
  953. .reveal.overview .slides>section.stack {
  954. padding: 0;
  955. background: none;
  956. overflow: visible;
  957. }
  958. /*********************************************
  959. * PAUSED MODE
  960. *********************************************/
  961. .reveal .pause-overlay {
  962. position: absolute;
  963. top: 0;
  964. left: 0;
  965. width: 100%;
  966. height: 100%;
  967. background: black;
  968. visibility: hidden;
  969. opacity: 0;
  970. z-index: 100;
  971. -webkit-transition: all 1s ease;
  972. -moz-transition: all 1s ease;
  973. -ms-transition: all 1s ease;
  974. -o-transition: all 1s ease;
  975. transition: all 1s ease;
  976. }
  977. .reveal.paused .pause-overlay {
  978. visibility: visible;
  979. opacity: 1;
  980. }
  981. /*********************************************
  982. * FALLBACK
  983. *********************************************/
  984. .no-transforms {
  985. overflow-y: auto;
  986. }
  987. .no-transforms .slides {
  988. top: 0;
  989. left: 50%;
  990. margin: 0;
  991. text-align: center;
  992. }
  993. .no-transforms .slides section {
  994. display: block!important;
  995. opacity: 1!important;
  996. position: relative!important;
  997. height: auto;
  998. min-height: auto;
  999. top: 0;
  1000. left: -50%;
  1001. margin: 70px 0;
  1002. -webkit-transform: none;
  1003. -moz-transform: none;
  1004. -ms-transform: none;
  1005. transform: none;
  1006. }
  1007. .no-transforms .slides section section {
  1008. left: 0;
  1009. }
  1010. .no-transition {
  1011. -webkit-transition: none;
  1012. -moz-transition: none;
  1013. -ms-transition: none;
  1014. -o-transition: none;
  1015. transition: none;
  1016. }
  1017. /*********************************************
  1018. * BACKGROUND STATES
  1019. *********************************************/
  1020. .reveal .state-background {
  1021. position: absolute;
  1022. width: 100%;
  1023. height: 100%;
  1024. background: rgba( 0, 0, 0, 0 );
  1025. -webkit-transition: background 800ms ease;
  1026. -moz-transition: background 800ms ease;
  1027. -ms-transition: background 800ms ease;
  1028. -o-transition: background 800ms ease;
  1029. transition: background 800ms ease;
  1030. }
  1031. .alert .reveal .state-background {
  1032. background: rgba( 200, 50, 30, 0.6 );
  1033. }
  1034. .soothe .reveal .state-background {
  1035. background: rgba( 50, 200, 90, 0.4 );
  1036. }
  1037. .blackout .reveal .state-background {
  1038. background: rgba( 0, 0, 0, 0.6 );
  1039. }
  1040. /*********************************************
  1041. * RTL SUPPORT
  1042. *********************************************/
  1043. .reveal.rtl .slides,
  1044. .reveal.rtl .slides h1,
  1045. .reveal.rtl .slides h2,
  1046. .reveal.rtl .slides h3,
  1047. .reveal.rtl .slides h4,
  1048. .reveal.rtl .slides h5,
  1049. .reveal.rtl .slides h6 {
  1050. direction: rtl;
  1051. font-family: sans-serif;
  1052. }
  1053. .reveal.rtl pre,
  1054. .reveal.rtl code {
  1055. direction: ltr;
  1056. }
  1057. .reveal.rtl ol,
  1058. .reveal.rtl ul {
  1059. text-align: right;
  1060. }
  1061. /*********************************************
  1062. * SPEAKER NOTES
  1063. *********************************************/
  1064. .reveal aside.notes {
  1065. display: none;
  1066. }
  1067. /*********************************************
  1068. * ZOOM PLUGIN
  1069. *********************************************/
  1070. .zoomed .reveal *,
  1071. .zoomed .reveal *:before,
  1072. .zoomed .reveal *:after {
  1073. -webkit-transform: none !important;
  1074. -moz-transform: none !important;
  1075. -ms-transform: none !important;
  1076. transform: none !important;
  1077. -webkit-backface-visibility: visible !important;
  1078. -moz-backface-visibility: visible !important;
  1079. -ms-backface-visibility: visible !important;
  1080. backface-visibility: visible !important;
  1081. }
  1082. .zoomed .reveal .progress,
  1083. .zoomed .reveal .controls {
  1084. opacity: 0;
  1085. }
  1086. .zoomed .reveal .roll span {
  1087. background: none;
  1088. }
  1089. .zoomed .reveal .roll span:after {
  1090. visibility: hidden;
  1091. }