reveal.css 29 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141
  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. min-height: 600px;
  44. overflow: hidden;
  45. }
  46. body {
  47. position: relative;
  48. line-height: 1;
  49. }
  50. ::selection {
  51. background:#FF5E99;
  52. color:#fff;
  53. text-shadow: none;
  54. }
  55. @media screen and (max-width: 900px) {
  56. .reveal {
  57. font-size: 30px;
  58. }
  59. }
  60. /*********************************************
  61. * HEADERS
  62. *********************************************/
  63. .reveal h1 { font-size: 3.77em; }
  64. .reveal h2 { font-size: 2.11em; }
  65. .reveal h3 { font-size: 1.55em; }
  66. .reveal h4 { font-size: 1em; }
  67. /*********************************************
  68. * VIEW FRAGMENTS
  69. *********************************************/
  70. .reveal .slides section .fragment {
  71. opacity: 0;
  72. -webkit-transition: all .2s ease;
  73. -moz-transition: all .2s ease;
  74. -ms-transition: all .2s ease;
  75. -o-transition: all .2s ease;
  76. transition: all .2s ease;
  77. }
  78. .reveal .slides section .fragment.visible {
  79. opacity: 1;
  80. }
  81. .reveal .slides section .fragment.grow {
  82. opacity: 1;
  83. }
  84. .reveal .slides section .fragment.grow.visible {
  85. -webkit-transform: scale( 1.3 );
  86. -moz-transform: scale( 1.3 );
  87. -ms-transform: scale( 1.3 );
  88. -o-transform: scale( 1.3 );
  89. transform: scale( 1.3 );
  90. }
  91. .reveal .slides section .fragment.shrink {
  92. opacity: 1;
  93. }
  94. .reveal .slides section .fragment.shrink.visible {
  95. -webkit-transform: scale( 0.7 );
  96. -moz-transform: scale( 0.7 );
  97. -ms-transform: scale( 0.7 );
  98. -o-transform: scale( 0.7 );
  99. transform: scale( 0.7 );
  100. }
  101. .reveal .slides section .fragment.roll-in {
  102. opacity: 0;
  103. -webkit-transform: rotateX( 90deg );
  104. -moz-transform: rotateX( 90deg );
  105. -ms-transform: rotateX( 90deg );
  106. -o-transform: rotateX( 90deg );
  107. transform: rotateX( 90deg );
  108. }
  109. .reveal .slides section .fragment.roll-in.visible {
  110. opacity: 1;
  111. -webkit-transform: rotateX( 0 );
  112. -moz-transform: rotateX( 0 );
  113. -ms-transform: rotateX( 0 );
  114. -o-transform: rotateX( 0 );
  115. transform: rotateX( 0 );
  116. }
  117. .reveal .slides section .fragment.fade-out {
  118. opacity: 1;
  119. }
  120. .reveal .slides section .fragment.fade-out.visible {
  121. opacity: 0;
  122. }
  123. .reveal .slides section .fragment.highlight-red,
  124. .reveal .slides section .fragment.highlight-green,
  125. .reveal .slides section .fragment.highlight-blue {
  126. opacity: 1;
  127. }
  128. .reveal .slides section .fragment.highlight-red.visible {
  129. color: #ff2c2d
  130. }
  131. .reveal .slides section .fragment.highlight-green.visible {
  132. color: #17ff2e;
  133. }
  134. .reveal .slides section .fragment.highlight-blue.visible {
  135. color: #1b91ff;
  136. }
  137. /*********************************************
  138. * DEFAULT ELEMENT STYLES
  139. *********************************************/
  140. .reveal .slides section {
  141. line-height: 1.2em;
  142. font-weight: normal;
  143. }
  144. .reveal img {
  145. /* preserve aspect ratio and scale image so it's bound within the section */
  146. max-width: 100%;
  147. max-height: 100%;
  148. }
  149. .reveal strong,
  150. .reveal b {
  151. font-weight: bold;
  152. }
  153. .reveal em,
  154. .reveal i {
  155. font-style: italic;
  156. }
  157. .reveal ol,
  158. .reveal ul {
  159. display: inline-block;
  160. text-align: left;
  161. margin: 0 0 0 1em;
  162. }
  163. .reveal ol {
  164. list-style-type: decimal;
  165. }
  166. .reveal ul {
  167. list-style-type: disc;
  168. }
  169. .reveal ul ul {
  170. list-style-type: square;
  171. }
  172. .reveal ul ul ul {
  173. list-style-type: circle;
  174. }
  175. .reveal ul ul,
  176. .reveal ul ol,
  177. .reveal ol ol,
  178. .reveal ol ul {
  179. display: block;
  180. margin-left: 40px;
  181. }
  182. .reveal p {
  183. margin-bottom: 10px;
  184. line-height: 1.2em;
  185. }
  186. .reveal q,
  187. .reveal blockquote {
  188. quotes: none;
  189. }
  190. .reveal blockquote {
  191. display: block;
  192. position: relative;
  193. width: 70%;
  194. margin: 5px auto;
  195. padding: 5px;
  196. font-style: italic;
  197. background: rgba(255, 255, 255, 0.05);
  198. box-shadow: 0px 0px 2px rgba(0,0,0,0.2);
  199. }
  200. .reveal blockquote:before {
  201. content: '“';
  202. }
  203. .reveal blockquote:after {
  204. content: '”';
  205. }
  206. .reveal q {
  207. font-style: italic;
  208. }
  209. .reveal q:before {
  210. content: '“';
  211. }
  212. .reveal q:after {
  213. content: '”';
  214. }
  215. .reveal pre {
  216. display: block;
  217. position: relative;
  218. width: 90%;
  219. margin: 15px auto;
  220. text-align: left;
  221. font-size: 0.55em;
  222. font-family: monospace;
  223. line-height: 1.2em;
  224. word-wrap: break-word;
  225. box-shadow: 0px 0px 6px rgba(0,0,0,0.3);
  226. }
  227. .reveal pre code {
  228. padding: 5px;
  229. }
  230. .reveal code {
  231. font-family: monospace;
  232. overflow: auto;
  233. max-height: 400px;
  234. }
  235. .reveal table th,
  236. .reveal table td {
  237. text-align: left;
  238. padding-right: .3em;
  239. }
  240. .reveal table th {
  241. text-shadow: rgb(255,255,255) 1px 1px 2px;
  242. }
  243. .reveal sup {
  244. vertical-align: super;
  245. }
  246. .reveal sub {
  247. vertical-align: sub;
  248. }
  249. .reveal small {
  250. display: inline-block;
  251. font-size: 0.6em;
  252. line-height: 1.2em;
  253. vertical-align: top;
  254. }
  255. .reveal small * {
  256. vertical-align: top;
  257. }
  258. /*********************************************
  259. * CONTROLS
  260. *********************************************/
  261. .reveal .controls {
  262. display: none;
  263. position: fixed;
  264. width: 90px;
  265. height: 90px;
  266. z-index: 30;
  267. right: 10px;
  268. bottom: 10px;
  269. }
  270. .reveal .controls div {
  271. position: absolute;
  272. opacity: 0.1;
  273. width: 0;
  274. height: 0;
  275. border: 12px solid transparent;
  276. }
  277. .reveal .controls div.enabled {
  278. opacity: 0.6;
  279. }
  280. .reveal .controls div.enabled:active {
  281. margin-top: 1px;
  282. }
  283. .reveal .controls div.left {
  284. top: 30px;
  285. border-right-color: #eee;
  286. }
  287. .reveal .controls div.right {
  288. left: 60px;
  289. top: 30px;
  290. border-left-color: #eee;
  291. }
  292. .reveal .controls div.up {
  293. left: 30px;
  294. border-bottom-color: #eee;
  295. }
  296. .reveal .controls div.down {
  297. left: 30px;
  298. top: 60px;
  299. border-top-color: #eee;
  300. }
  301. /*********************************************
  302. * PROGRESS BAR
  303. *********************************************/
  304. .reveal .progress {
  305. position: fixed;
  306. display: none;
  307. height: 3px;
  308. width: 100%;
  309. bottom: 0;
  310. left: 0;
  311. z-index: 10;
  312. }
  313. .reveal .progress:after {
  314. content: '';
  315. display: 'block';
  316. position: absolute;
  317. height: 20px;
  318. width: 100%;
  319. top: -20px;
  320. }
  321. .reveal .progress span {
  322. display: block;
  323. height: 100%;
  324. width: 0px;
  325. -webkit-transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
  326. -moz-transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
  327. -ms-transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
  328. -o-transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
  329. transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
  330. }
  331. /*********************************************
  332. * ROLLING LINKS
  333. *********************************************/
  334. .reveal .roll {
  335. display: inline-block;
  336. line-height: 1.2;
  337. overflow: hidden;
  338. vertical-align: top;
  339. -webkit-perspective: 400px;
  340. -moz-perspective: 400px;
  341. -ms-perspective: 400px;
  342. perspective: 400px;
  343. -webkit-perspective-origin: 50% 50%;
  344. -moz-perspective-origin: 50% 50%;
  345. -ms-perspective-origin: 50% 50%;
  346. perspective-origin: 50% 50%;
  347. }
  348. .reveal .roll:hover {
  349. background: none;
  350. text-shadow: none;
  351. }
  352. .reveal .roll span {
  353. display: block;
  354. position: relative;
  355. padding: 0 2px;
  356. pointer-events: none;
  357. -webkit-transition: all 400ms ease;
  358. -moz-transition: all 400ms ease;
  359. -ms-transition: all 400ms ease;
  360. transition: all 400ms ease;
  361. -webkit-transform-origin: 50% 0%;
  362. -moz-transform-origin: 50% 0%;
  363. -ms-transform-origin: 50% 0%;
  364. transform-origin: 50% 0%;
  365. -webkit-transform-style: preserve-3d;
  366. -moz-transform-style: preserve-3d;
  367. -ms-transform-style: preserve-3d;
  368. transform-style: preserve-3d;
  369. -webkit-backface-visibility: hidden;
  370. -moz-backface-visibility: hidden;
  371. backface-visibility: hidden;
  372. }
  373. .reveal .roll:hover span {
  374. background: rgba(0,0,0,0.5);
  375. -webkit-transform: translate3d( 0px, 0px, -45px ) rotateX( 90deg );
  376. -moz-transform: translate3d( 0px, 0px, -45px ) rotateX( 90deg );
  377. -ms-transform: translate3d( 0px, 0px, -45px ) rotateX( 90deg );
  378. transform: translate3d( 0px, 0px, -45px ) rotateX( 90deg );
  379. }
  380. .reveal .roll span:after {
  381. content: attr(data-title);
  382. display: block;
  383. position: absolute;
  384. left: 0;
  385. top: 0;
  386. padding: 0 2px;
  387. -webkit-transform-origin: 50% 0%;
  388. -moz-transform-origin: 50% 0%;
  389. -ms-transform-origin: 50% 0%;
  390. transform-origin: 50% 0%;
  391. -webkit-transform: translate3d( 0px, 110%, 0px ) rotateX( -90deg );
  392. -moz-transform: translate3d( 0px, 110%, 0px ) rotateX( -90deg );
  393. -ms-transform: translate3d( 0px, 110%, 0px ) rotateX( -90deg );
  394. transform: translate3d( 0px, 110%, 0px ) rotateX( -90deg );
  395. }
  396. /*********************************************
  397. * SLIDES
  398. *********************************************/
  399. .reveal .slides {
  400. position: absolute;
  401. max-width: 900px;
  402. width: 80%;
  403. height: 60%;
  404. left: 50%;
  405. top: 50%;
  406. margin-top: -320px;
  407. padding: 20px 0px;
  408. overflow: visible;
  409. z-index: 1;
  410. text-align: center;
  411. -webkit-transition: -webkit-perspective .4s ease;
  412. -moz-transition: -moz-perspective .4s ease;
  413. -ms-transition: -ms-perspective .4s ease;
  414. -o-transition: -o-perspective .4s ease;
  415. transition: perspective .4s ease;
  416. -webkit-perspective: 600px;
  417. -moz-perspective: 600px;
  418. -ms-perspective: 600px;
  419. perspective: 600px;
  420. -webkit-perspective-origin: 0% 25%;
  421. -moz-perspective-origin: 0% 25%;
  422. -ms-perspective-origin: 0% 25%;
  423. perspective-origin: 0% 25%;
  424. }
  425. .reveal .slides>section,
  426. .reveal .slides>section>section {
  427. display: none;
  428. position: absolute;
  429. width: 100%;
  430. min-height: 600px;
  431. z-index: 10;
  432. -webkit-transform-style: preserve-3d;
  433. -moz-transform-style: preserve-3d;
  434. -ms-transform-style: preserve-3d;
  435. transform-style: preserve-3d;
  436. -webkit-transition: all 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
  437. -moz-transition: all 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
  438. -ms-transition: all 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
  439. -o-transition: all 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
  440. transition: all 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
  441. }
  442. .reveal .slides>section.present {
  443. display: block;
  444. z-index: 11;
  445. opacity: 1;
  446. }
  447. .reveal .slides>section {
  448. margin-left: -50%;
  449. }
  450. /*********************************************
  451. * DEFAULT TRANSITION
  452. *********************************************/
  453. .reveal .slides>section.past {
  454. display: block;
  455. opacity: 0;
  456. -webkit-transform: translate3d(-100%, 0, 0) rotateY(-90deg) translate3d(-100%, 0, 0);
  457. -moz-transform: translate3d(-100%, 0, 0) rotateY(-90deg) translate3d(-100%, 0, 0);
  458. -ms-transform: translate3d(-100%, 0, 0) rotateY(-90deg) translate3d(-100%, 0, 0);
  459. transform: translate3d(-100%, 0, 0) rotateY(-90deg) translate3d(-100%, 0, 0);
  460. }
  461. .reveal .slides>section.future {
  462. display: block;
  463. opacity: 0;
  464. -webkit-transform: translate3d(100%, 0, 0) rotateY(90deg) translate3d(100%, 0, 0);
  465. -moz-transform: translate3d(100%, 0, 0) rotateY(90deg) translate3d(100%, 0, 0);
  466. -ms-transform: translate3d(100%, 0, 0) rotateY(90deg) translate3d(100%, 0, 0);
  467. transform: translate3d(100%, 0, 0) rotateY(90deg) translate3d(100%, 0, 0);
  468. }
  469. .reveal .slides>section>section.past {
  470. display: block;
  471. opacity: 0;
  472. -webkit-transform: translate3d(0, -50%, 0) rotateX(70deg) translate3d(0, -50%, 0);
  473. -moz-transform: translate3d(0, -50%, 0) rotateX(70deg) translate3d(0, -50%, 0);
  474. -ms-transform: translate3d(0, -50%, 0) rotateX(70deg) translate3d(0, -50%, 0);
  475. transform: translate3d(0, -50%, 0) rotateX(70deg) translate3d(0, -50%, 0);
  476. }
  477. .reveal .slides>section>section.future {
  478. display: block;
  479. opacity: 0;
  480. -webkit-transform: translate3d(0, 50%, 0) rotateX(-70deg) translate3d(0, 50%, 0);
  481. -moz-transform: translate3d(0, 50%, 0) rotateX(-70deg) translate3d(0, 50%, 0);
  482. -ms-transform: translate3d(0, 50%, 0) rotateX(-70deg) translate3d(0, 50%, 0);
  483. transform: translate3d(0, 50%, 0) rotateX(-70deg) translate3d(0, 50%, 0);
  484. }
  485. /*********************************************
  486. * CONCAVE TRANSITION
  487. *********************************************/
  488. .reveal.concave .slides>section.past {
  489. -webkit-transform: translate3d(-100%, 0, 0) rotateY(90deg) translate3d(-100%, 0, 0);
  490. -moz-transform: translate3d(-100%, 0, 0) rotateY(90deg) translate3d(-100%, 0, 0);
  491. -ms-transform: translate3d(-100%, 0, 0) rotateY(90deg) translate3d(-100%, 0, 0);
  492. transform: translate3d(-100%, 0, 0) rotateY(90deg) translate3d(-100%, 0, 0);
  493. }
  494. .reveal.concave .slides>section.future {
  495. -webkit-transform: translate3d(100%, 0, 0) rotateY(-90deg) translate3d(100%, 0, 0);
  496. -moz-transform: translate3d(100%, 0, 0) rotateY(-90deg) translate3d(100%, 0, 0);
  497. -ms-transform: translate3d(100%, 0, 0) rotateY(-90deg) translate3d(100%, 0, 0);
  498. transform: translate3d(100%, 0, 0) rotateY(-90deg) translate3d(100%, 0, 0);
  499. }
  500. .reveal.concave .slides>section>section.past {
  501. -webkit-transform: translate3d(0, -80%, 0) rotateX(-70deg) translate3d(0, -80%, 0);
  502. -moz-transform: translate3d(0, -80%, 0) rotateX(-70deg) translate3d(0, -80%, 0);
  503. -ms-transform: translate3d(0, -80%, 0) rotateX(-70deg) translate3d(0, -80%, 0);
  504. transform: translate3d(0, -80%, 0) rotateX(-70deg) translate3d(0, -80%, 0);
  505. }
  506. .reveal.concave .slides>section>section.future {
  507. -webkit-transform: translate3d(0, 80%, 0) rotateX(70deg) translate3d(0, 80%, 0);
  508. -moz-transform: translate3d(0, 80%, 0) rotateX(70deg) translate3d(0, 80%, 0);
  509. -ms-transform: translate3d(0, 80%, 0) rotateX(70deg) translate3d(0, 80%, 0);
  510. transform: translate3d(0, 80%, 0) rotateX(70deg) translate3d(0, 80%, 0);
  511. }
  512. /*********************************************
  513. * ZOOM TRANSITION
  514. *********************************************/
  515. .reveal.zoom .slides>section,
  516. .reveal.zoom .slides>section>section {
  517. -webkit-transition: all 600ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
  518. -moz-transition: all 600ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
  519. -ms-transition: all 600ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
  520. -o-transition: all 600ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
  521. transition: all 600ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
  522. }
  523. .reveal.zoom .slides>section.past {
  524. opacity: 0;
  525. visibility: hidden;
  526. -webkit-transform: scale(16);
  527. -moz-transform: scale(16);
  528. -ms-transform: scale(16);
  529. -o-transform: scale(16);
  530. transform: scale(16);
  531. }
  532. .reveal.zoom .slides>section.future {
  533. opacity: 0;
  534. visibility: hidden;
  535. -webkit-transform: scale(0.2);
  536. -moz-transform: scale(0.2);
  537. -ms-transform: scale(0.2);
  538. -o-transform: scale(0.2);
  539. transform: scale(0.2);
  540. }
  541. .reveal.zoom .slides>section>section.past {
  542. -webkit-transform: translate(0, -150%);
  543. -moz-transform: translate(0, -150%);
  544. -ms-transform: translate(0, -150%);
  545. -o-transform: translate(0, -150%);
  546. transform: translate(0, -150%);
  547. }
  548. .reveal.zoom .slides>section>section.future {
  549. -webkit-transform: translate(0, 150%);
  550. -moz-transform: translate(0, 150%);
  551. -ms-transform: translate(0, 150%);
  552. -o-transform: translate(0, 150%);
  553. transform: translate(0, 150%);
  554. }
  555. /*********************************************
  556. * LINEAR TRANSITION
  557. *********************************************/
  558. .reveal.linear .slides>section.past {
  559. -webkit-transform: translate(-150%, 0);
  560. -moz-transform: translate(-150%, 0);
  561. -ms-transform: translate(-150%, 0);
  562. -o-transform: translate(-150%, 0);
  563. transform: translate(-150%, 0);
  564. }
  565. .reveal.linear .slides>section.future {
  566. -webkit-transform: translate(150%, 0);
  567. -moz-transform: translate(150%, 0);
  568. -ms-transform: translate(150%, 0);
  569. -o-transform: translate(150%, 0);
  570. transform: translate(150%, 0);
  571. }
  572. .reveal.linear .slides>section>section.past {
  573. -webkit-transform: translate(0, -150%);
  574. -moz-transform: translate(0, -150%);
  575. -ms-transform: translate(0, -150%);
  576. -o-transform: translate(0, -150%);
  577. transform: translate(0, -150%);
  578. }
  579. .reveal.linear .slides>section>section.future {
  580. -webkit-transform: translate(0, 150%);
  581. -moz-transform: translate(0, 150%);
  582. -ms-transform: translate(0, 150%);
  583. -o-transform: translate(0, 150%);
  584. transform: translate(0, 150%);
  585. }
  586. /*********************************************
  587. * CUBE TRANSITION
  588. *********************************************/
  589. .reveal.cube .slides {
  590. -webkit-perspective-origin: 0% 25%;
  591. -moz-perspective-origin: 0% 25%;
  592. -ms-perspective-origin: 0% 25%;
  593. perspective-origin: 0% 25%;
  594. -webkit-perspective: 1300px;
  595. -moz-perspective: 1300px;
  596. -ms-perspective: 1300px;
  597. perspective: 1300px;
  598. }
  599. .reveal.cube .slides section {
  600. padding: 30px;
  601. -webkit-backface-visibility: hidden;
  602. -moz-backface-visibility: hidden;
  603. -ms-backface-visibility: hidden;
  604. backface-visibility: hidden;
  605. -webkit-box-sizing: border-box;
  606. -moz-box-sizing: border-box;
  607. box-sizing: border-box;
  608. }
  609. .reveal.cube .slides section:not(.stack):before {
  610. content: '';
  611. position: absolute;
  612. display: block;
  613. width: 100%;
  614. height: 100%;
  615. left: 0;
  616. top: 0;
  617. background: rgba(0,0,0,0.1);
  618. border-radius: 4px;
  619. -webkit-transform: translateZ( -20px );
  620. -moz-transform: translateZ( -20px );
  621. -ms-transform: translateZ( -20px );
  622. -o-transform: translateZ( -20px );
  623. transform: translateZ( -20px );
  624. }
  625. .reveal.cube .slides section:not(.stack):after {
  626. content: '';
  627. position: absolute;
  628. display: block;
  629. width: 90%;
  630. height: 30px;
  631. left: 5%;
  632. bottom: 0;
  633. background: none;
  634. z-index: 1;
  635. border-radius: 4px;
  636. box-shadow: 0px 95px 25px rgba(0,0,0,0.2);
  637. -webkit-transform: translateZ(-90px) rotateX( 65deg );
  638. -moz-transform: translateZ(-90px) rotateX( 65deg );
  639. -ms-transform: translateZ(-90px) rotateX( 65deg );
  640. -o-transform: translateZ(-90px) rotateX( 65deg );
  641. transform: translateZ(-90px) rotateX( 65deg );
  642. }
  643. .reveal.cube .slides>section.stack {
  644. padding: 0;
  645. background: none;
  646. }
  647. .reveal.cube .slides>section.past {
  648. -webkit-transform-origin: 100% 0%;
  649. -moz-transform-origin: 100% 0%;
  650. -ms-transform-origin: 100% 0%;
  651. transform-origin: 100% 0%;
  652. -webkit-transform: translate3d(-100%, 0, 0) rotateY(-90deg);
  653. -moz-transform: translate3d(-100%, 0, 0) rotateY(-90deg);
  654. -ms-transform: translate3d(-100%, 0, 0) rotateY(-90deg);
  655. transform: translate3d(-100%, 0, 0) rotateY(-90deg);
  656. }
  657. .reveal.cube .slides>section.future {
  658. -webkit-transform-origin: 0% 0%;
  659. -moz-transform-origin: 0% 0%;
  660. -ms-transform-origin: 0% 0%;
  661. transform-origin: 0% 0%;
  662. -webkit-transform: translate3d(100%, 0, 0) rotateY(90deg);
  663. -moz-transform: translate3d(100%, 0, 0) rotateY(90deg);
  664. -ms-transform: translate3d(100%, 0, 0) rotateY(90deg);
  665. transform: translate3d(100%, 0, 0) rotateY(90deg);
  666. }
  667. .reveal.cube .slides>section>section.past {
  668. -webkit-transform-origin: 0% 100%;
  669. -moz-transform-origin: 0% 100%;
  670. -ms-transform-origin: 0% 100%;
  671. transform-origin: 0% 100%;
  672. -webkit-transform: translate3d(0, -100%, 0) rotateX(90deg);
  673. -moz-transform: translate3d(0, -100%, 0) rotateX(90deg);
  674. -ms-transform: translate3d(0, -100%, 0) rotateX(90deg);
  675. transform: translate3d(0, -100%, 0) rotateX(90deg);
  676. }
  677. .reveal.cube .slides>section>section.future {
  678. -webkit-transform-origin: 0% 0%;
  679. -moz-transform-origin: 0% 0%;
  680. -ms-transform-origin: 0% 0%;
  681. transform-origin: 0% 0%;
  682. -webkit-transform: translate3d(0, 100%, 0) rotateX(-90deg);
  683. -moz-transform: translate3d(0, 100%, 0) rotateX(-90deg);
  684. -ms-transform: translate3d(0, 100%, 0) rotateX(-90deg);
  685. transform: translate3d(0, 100%, 0) rotateX(-90deg);
  686. }
  687. /*********************************************
  688. * PAGE TRANSITION
  689. *********************************************/
  690. .reveal.page .slides {
  691. -webkit-perspective-origin: 0% 50%;
  692. -moz-perspective-origin: 0% 50%;
  693. -ms-perspective-origin: 0% 50%;
  694. perspective-origin: 0% 50%;
  695. -webkit-perspective: 3000px;
  696. -moz-perspective: 3000px;
  697. -ms-perspective: 3000px;
  698. perspective: 3000px;
  699. }
  700. .reveal.page .slides section {
  701. padding: 30px;
  702. -webkit-box-sizing: border-box;
  703. -moz-box-sizing: border-box;
  704. box-sizing: border-box;
  705. }
  706. .reveal.page .slides section.past {
  707. z-index: 12;
  708. }
  709. .reveal.page .slides section:not(.stack):before {
  710. content: '';
  711. position: absolute;
  712. display: block;
  713. width: 100%;
  714. height: 100%;
  715. left: 0;
  716. top: 0;
  717. background: rgba(0,0,0,0.1);
  718. -webkit-transform: translateZ( -20px );
  719. -moz-transform: translateZ( -20px );
  720. -ms-transform: translateZ( -20px );
  721. -o-transform: translateZ( -20px );
  722. transform: translateZ( -20px );
  723. }
  724. .reveal.page .slides section:not(.stack):after {
  725. content: '';
  726. position: absolute;
  727. display: block;
  728. width: 90%;
  729. height: 30px;
  730. left: 5%;
  731. bottom: 0;
  732. background: none;
  733. z-index: 1;
  734. border-radius: 4px;
  735. box-shadow: 0px 95px 25px rgba(0,0,0,0.2);
  736. -webkit-transform: translateZ(-90px) rotateX( 65deg );
  737. }
  738. .reveal.page .slides>section.stack {
  739. padding: 0;
  740. background: none;
  741. }
  742. .reveal.page .slides>section.past {
  743. -webkit-transform-origin: 0% 0%;
  744. -moz-transform-origin: 0% 0%;
  745. -ms-transform-origin: 0% 0%;
  746. transform-origin: 0% 0%;
  747. -webkit-transform: translate3d(-40%, 0, 0) rotateY(-80deg);
  748. -moz-transform: translate3d(-40%, 0, 0) rotateY(-80deg);
  749. -ms-transform: translate3d(-40%, 0, 0) rotateY(-80deg);
  750. transform: translate3d(-40%, 0, 0) rotateY(-80deg);
  751. }
  752. .reveal.page .slides>section.future {
  753. -webkit-transform-origin: 100% 0%;
  754. -moz-transform-origin: 100% 0%;
  755. -ms-transform-origin: 100% 0%;
  756. transform-origin: 100% 0%;
  757. -webkit-transform: translate3d(0, 0, 0);
  758. -moz-transform: translate3d(0, 0, 0);
  759. -ms-transform: translate3d(0, 0, 0);
  760. transform: translate3d(0, 0, 0);
  761. }
  762. .reveal.page .slides>section>section.past {
  763. -webkit-transform-origin: 0% 0%;
  764. -moz-transform-origin: 0% 0%;
  765. -ms-transform-origin: 0% 0%;
  766. transform-origin: 0% 0%;
  767. -webkit-transform: translate3d(0, -40%, 0) rotateX(80deg);
  768. -moz-transform: translate3d(0, -40%, 0) rotateX(80deg);
  769. -ms-transform: translate3d(0, -40%, 0) rotateX(80deg);
  770. transform: translate3d(0, -40%, 0) rotateX(80deg);
  771. }
  772. .reveal.page .slides>section>section.future {
  773. -webkit-transform-origin: 0% 100%;
  774. -moz-transform-origin: 0% 100%;
  775. -ms-transform-origin: 0% 100%;
  776. transform-origin: 0% 100%;
  777. -webkit-transform: translate3d(0, 0, 0);
  778. -moz-transform: translate3d(0, 0, 0);
  779. -ms-transform: translate3d(0, 0, 0);
  780. transform: translate3d(0, 0, 0);
  781. }
  782. /*********************************************
  783. * TILE-FLIP TRANSITION (CSS shader)
  784. *********************************************/
  785. .reveal.tileflip .slides section.present {
  786. -webkit-transform: none;
  787. -webkit-transition-duration: 800ms;
  788. -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),
  789. amount 0, randomness 0, flipAxis 0 1 0, tileOutline 1
  790. );
  791. }
  792. .reveal.tileflip .slides section.past {
  793. -webkit-transform: none;
  794. -webkit-transition-duration: 800ms;
  795. -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),
  796. amount 1, randomness 0, flipAxis 0 1 0, tileOutline 1
  797. );
  798. }
  799. .reveal.tileflip .slides section.future {
  800. -webkit-transform: none;
  801. -webkit-transition-duration: 800ms;
  802. -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),
  803. amount 1, randomness 0, flipAxis 0 1 0, tileOutline 1
  804. );
  805. }
  806. .reveal.tileflip .slides>section>section.present {
  807. -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),
  808. amount 0, randomness 2, flipAxis 1 0 0, tileOutline 1
  809. );
  810. }
  811. .reveal.tileflip .slides>section>section.past {
  812. -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),
  813. amount 1, randomness 2, flipAxis 1 0 0, tileOutline 1
  814. );
  815. }
  816. .reveal.tileflip .slides>section>section.future {
  817. -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),
  818. amount 1, randomness 2, flipAxis 1 0 0, tileOutline 1
  819. );
  820. }
  821. /*********************************************
  822. * NO TRANSITION
  823. *********************************************/
  824. .reveal.none .slides section {
  825. -webkit-transform: none;
  826. -moz-transform: none;
  827. -ms-transform: none;
  828. -o-transform: none;
  829. transform: none;
  830. -webkit-transition: none;
  831. -moz-transition: none;
  832. -ms-transition: none;
  833. -o-transition: none;
  834. transition: none;
  835. }
  836. /*********************************************
  837. * OVERVIEW
  838. *********************************************/
  839. .reveal.overview .slides {
  840. -webkit-perspective: 700px;
  841. -moz-perspective: 700px;
  842. -ms-perspective: 700px;
  843. perspective: 700px;
  844. }
  845. .reveal.overview .slides section {
  846. padding: 20px 0;
  847. max-height: 600px;
  848. overflow: hidden;
  849. opacity: 1!important;
  850. visibility: visible!important;
  851. cursor: pointer;
  852. background: rgba(0,0,0,0.1);
  853. }
  854. .reveal.overview .slides section .fragment {
  855. opacity: 1;
  856. }
  857. .reveal.overview .slides section:after,
  858. .reveal.overview .slides section:before {
  859. display: none !important;
  860. }
  861. .reveal.overview .slides section>section {
  862. opacity: 1;
  863. cursor: pointer;
  864. }
  865. .reveal.overview .slides section:hover {
  866. background: rgba(0,0,0,0.3);
  867. }
  868. .reveal.overview .slides section.present {
  869. background: rgba(0,0,0,0.3);
  870. }
  871. .reveal.overview .slides>section.stack {
  872. background: none;
  873. padding: 0;
  874. overflow: visible;
  875. }
  876. /*********************************************
  877. * PAUSED MODE
  878. *********************************************/
  879. .reveal .pause-overlay {
  880. position: absolute;
  881. top: 0;
  882. left: 0;
  883. width: 100%;
  884. height: 100%;
  885. background: black;
  886. visibility: hidden;
  887. opacity: 0;
  888. z-index: 100;
  889. -webkit-transition: all 1s ease;
  890. -moz-transition: all 1s ease;
  891. -ms-transition: all 1s ease;
  892. -o-transition: all 1s ease;
  893. transition: all 1s ease;
  894. }
  895. .reveal.paused .pause-overlay {
  896. visibility: visible;
  897. opacity: 1;
  898. }
  899. /*********************************************
  900. * FALLBACK
  901. *********************************************/
  902. .no-transforms {
  903. overflow-y: auto;
  904. }
  905. .no-transforms .slides section {
  906. display: block!important;
  907. opacity: 1!important;
  908. position: relative!important;
  909. height: auto;
  910. min-height: auto;
  911. margin-bottom: 100px;
  912. -webkit-transform: none;
  913. -moz-transform: none;
  914. -ms-transform: none;
  915. transform: none;
  916. }
  917. /*********************************************
  918. * BACKGROUND STATES
  919. *********************************************/
  920. .reveal .state-background {
  921. position: absolute;
  922. width: 100%;
  923. height: 100%;
  924. background: rgba( 0, 0, 0, 0 );
  925. -webkit-transition: background 800ms ease;
  926. -moz-transition: background 800ms ease;
  927. -ms-transition: background 800ms ease;
  928. -o-transition: background 800ms ease;
  929. transition: background 800ms ease;
  930. }
  931. .alert .reveal .state-background {
  932. background: rgba( 200, 50, 30, 0.6 );
  933. }
  934. .soothe .reveal .state-background {
  935. background: rgba( 50, 200, 90, 0.4 );
  936. }
  937. .blackout .reveal .state-background {
  938. background: rgba( 0, 0, 0, 0.6 );
  939. }
  940. /*********************************************
  941. * SPEAKER NOTES
  942. *********************************************/
  943. .reveal aside.notes {
  944. display: none;
  945. }