reveal.css 31 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217
  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 { font-size: 3.77em; }
  68. .reveal h2 { font-size: 2.11em; }
  69. .reveal h3 { font-size: 1.55em; }
  70. .reveal h4 { font-size: 1em; }
  71. /*********************************************
  72. * VIEW FRAGMENTS
  73. *********************************************/
  74. .reveal .slides section .fragment {
  75. opacity: 0;
  76. -webkit-transition: all .2s ease;
  77. -moz-transition: all .2s ease;
  78. -ms-transition: all .2s ease;
  79. -o-transition: all .2s ease;
  80. transition: all .2s ease;
  81. }
  82. .reveal .slides section .fragment.visible {
  83. opacity: 1;
  84. }
  85. .reveal .slides section .fragment.grow {
  86. opacity: 1;
  87. }
  88. .reveal .slides section .fragment.grow.visible {
  89. -webkit-transform: scale( 1.3 );
  90. -moz-transform: scale( 1.3 );
  91. -ms-transform: scale( 1.3 );
  92. -o-transform: scale( 1.3 );
  93. transform: scale( 1.3 );
  94. }
  95. .reveal .slides section .fragment.shrink {
  96. opacity: 1;
  97. }
  98. .reveal .slides section .fragment.shrink.visible {
  99. -webkit-transform: scale( 0.7 );
  100. -moz-transform: scale( 0.7 );
  101. -ms-transform: scale( 0.7 );
  102. -o-transform: scale( 0.7 );
  103. transform: scale( 0.7 );
  104. }
  105. .reveal .slides section .fragment.roll-in {
  106. opacity: 0;
  107. -webkit-transform: rotateX( 90deg );
  108. -moz-transform: rotateX( 90deg );
  109. -ms-transform: rotateX( 90deg );
  110. -o-transform: rotateX( 90deg );
  111. transform: rotateX( 90deg );
  112. }
  113. .reveal .slides section .fragment.roll-in.visible {
  114. opacity: 1;
  115. -webkit-transform: rotateX( 0 );
  116. -moz-transform: rotateX( 0 );
  117. -ms-transform: rotateX( 0 );
  118. -o-transform: rotateX( 0 );
  119. transform: rotateX( 0 );
  120. }
  121. .reveal .slides section .fragment.fade-out {
  122. opacity: 1;
  123. }
  124. .reveal .slides section .fragment.fade-out.visible {
  125. opacity: 0;
  126. }
  127. .reveal .slides section .fragment.highlight-red,
  128. .reveal .slides section .fragment.highlight-green,
  129. .reveal .slides section .fragment.highlight-blue {
  130. opacity: 1;
  131. }
  132. .reveal .slides section .fragment.highlight-red.visible {
  133. color: #ff2c2d
  134. }
  135. .reveal .slides section .fragment.highlight-green.visible {
  136. color: #17ff2e;
  137. }
  138. .reveal .slides section .fragment.highlight-blue.visible {
  139. color: #1b91ff;
  140. }
  141. /*********************************************
  142. * DEFAULT ELEMENT STYLES
  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: '\201C';
  202. }
  203. .reveal blockquote:after {
  204. content: '\201D';
  205. }
  206. .reveal q {
  207. font-style: italic;
  208. }
  209. .reveal q:before {
  210. content: '\201C';
  211. }
  212. .reveal q:after {
  213. content: '\201D';
  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: 110px;
  265. height: 110px;
  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. -webkit-transition: opacity 0.2s ease;
  277. -moz-transition: opacity 0.2s ease;
  278. -ms-transition: opacity 0.2s ease;
  279. -o-transition: opacity 0.2s ease;
  280. transition: opacity 0.2s ease;
  281. }
  282. .reveal .controls div.enabled {
  283. opacity: 0.6;
  284. cursor: pointer;
  285. }
  286. .reveal .controls div.enabled:active {
  287. margin-top: 1px;
  288. }
  289. .reveal .controls div.navigate-left {
  290. top: 42px;
  291. border-right-width: 22px;
  292. border-right-color: #eee;
  293. }
  294. .reveal .controls div.navigate-right {
  295. left: 74px;
  296. top: 42px;
  297. border-left-width: 22px;
  298. border-left-color: #eee;
  299. }
  300. .reveal .controls div.navigate-up {
  301. left: 42px;
  302. border-bottom-width: 22px;
  303. border-bottom-color: #eee;
  304. }
  305. .reveal .controls div.navigate-down {
  306. left: 42px;
  307. top: 74px;
  308. border-top-width: 22px;
  309. border-top-color: #eee;
  310. }
  311. /*********************************************
  312. * PROGRESS BAR
  313. *********************************************/
  314. .reveal .progress {
  315. position: fixed;
  316. display: none;
  317. height: 3px;
  318. width: 100%;
  319. bottom: 0;
  320. left: 0;
  321. z-index: 10;
  322. }
  323. .reveal .progress:after {
  324. content: '';
  325. display: 'block';
  326. position: absolute;
  327. height: 20px;
  328. width: 100%;
  329. top: -20px;
  330. }
  331. .reveal .progress span {
  332. display: block;
  333. height: 100%;
  334. width: 0px;
  335. -webkit-transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
  336. -moz-transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
  337. -ms-transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
  338. -o-transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
  339. transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
  340. }
  341. /*********************************************
  342. * ROLLING LINKS
  343. *********************************************/
  344. .reveal .roll {
  345. display: inline-block;
  346. line-height: 1.2;
  347. overflow: hidden;
  348. vertical-align: top;
  349. -webkit-perspective: 400px;
  350. -moz-perspective: 400px;
  351. -ms-perspective: 400px;
  352. perspective: 400px;
  353. -webkit-perspective-origin: 50% 50%;
  354. -moz-perspective-origin: 50% 50%;
  355. -ms-perspective-origin: 50% 50%;
  356. perspective-origin: 50% 50%;
  357. }
  358. .reveal .roll:hover {
  359. background: none;
  360. text-shadow: none;
  361. }
  362. .reveal .roll span {
  363. display: block;
  364. position: relative;
  365. padding: 0 2px;
  366. pointer-events: none;
  367. -webkit-transition: all 400ms ease;
  368. -moz-transition: all 400ms ease;
  369. -ms-transition: all 400ms ease;
  370. transition: all 400ms ease;
  371. -webkit-transform-origin: 50% 0%;
  372. -moz-transform-origin: 50% 0%;
  373. -ms-transform-origin: 50% 0%;
  374. transform-origin: 50% 0%;
  375. -webkit-transform-style: preserve-3d;
  376. -moz-transform-style: preserve-3d;
  377. -ms-transform-style: preserve-3d;
  378. transform-style: preserve-3d;
  379. -webkit-backface-visibility: hidden;
  380. -moz-backface-visibility: hidden;
  381. backface-visibility: hidden;
  382. }
  383. .reveal .roll:hover span {
  384. background: rgba(0,0,0,0.5);
  385. -webkit-transform: translate3d( 0px, 0px, -45px ) rotateX( 90deg );
  386. -moz-transform: translate3d( 0px, 0px, -45px ) rotateX( 90deg );
  387. -ms-transform: translate3d( 0px, 0px, -45px ) rotateX( 90deg );
  388. transform: translate3d( 0px, 0px, -45px ) rotateX( 90deg );
  389. }
  390. .reveal .roll span:after {
  391. content: attr(data-title);
  392. display: block;
  393. position: absolute;
  394. left: 0;
  395. top: 0;
  396. padding: 0 2px;
  397. -webkit-transform-origin: 50% 0%;
  398. -moz-transform-origin: 50% 0%;
  399. -ms-transform-origin: 50% 0%;
  400. transform-origin: 50% 0%;
  401. -webkit-transform: translate3d( 0px, 110%, 0px ) rotateX( -90deg );
  402. -moz-transform: translate3d( 0px, 110%, 0px ) rotateX( -90deg );
  403. -ms-transform: translate3d( 0px, 110%, 0px ) rotateX( -90deg );
  404. transform: translate3d( 0px, 110%, 0px ) rotateX( -90deg );
  405. }
  406. /*********************************************
  407. * SLIDES
  408. *********************************************/
  409. .reveal {
  410. position: relative;
  411. width: 100%;
  412. height: 100%;
  413. min-height: 640px; /* min height + 40 to account for padding */
  414. }
  415. .reveal .slides {
  416. position: absolute;
  417. max-width: 900px;
  418. min-height: 600px;
  419. width: 80%;
  420. left: 50%;
  421. top: 50%;
  422. padding: 20px 0px;
  423. overflow: visible;
  424. z-index: 1;
  425. text-align: center;
  426. -webkit-transition: -webkit-perspective .4s ease;
  427. -moz-transition: -moz-perspective .4s ease;
  428. -ms-transition: -ms-perspective .4s ease;
  429. -o-transition: -o-perspective .4s ease;
  430. transition: perspective .4s ease;
  431. -webkit-perspective: 600px;
  432. -moz-perspective: 600px;
  433. -ms-perspective: 600px;
  434. perspective: 600px;
  435. -webkit-perspective-origin: 0% -25%;
  436. -moz-perspective-origin: 0% -25%;
  437. -ms-perspective-origin: 0% -25%;
  438. perspective-origin: 0% -25%;
  439. }
  440. .reveal .slides>section,
  441. .reveal .slides>section>section {
  442. visibility: hidden;
  443. position: absolute;
  444. width: 100%;
  445. z-index: 10;
  446. line-height: 1.2em;
  447. font-weight: normal;
  448. -webkit-transform-style: preserve-3d;
  449. -moz-transform-style: preserve-3d;
  450. -ms-transform-style: preserve-3d;
  451. transform-style: preserve-3d;
  452. -webkit-transition: -webkit-transform 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985),
  453. visibility 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985),
  454. opacity 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
  455. -moz-transition: -moz-transform 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985),
  456. visibility 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985),
  457. opacity 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
  458. -ms-transition: -ms-transform 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985),
  459. visibility 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985),
  460. opacity 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
  461. -o-transition: -o-transform 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985),
  462. visibility 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985),
  463. opacity 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
  464. transition: transform 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985),
  465. visibility 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985),
  466. opacity 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
  467. }
  468. .reveal .slides>section.present,
  469. .reveal .slides>section>section.present {
  470. visibility: visible;
  471. z-index: 11;
  472. opacity: 1;
  473. }
  474. .reveal .slides>section {
  475. left: -50%;
  476. top: -50%;
  477. }
  478. .reveal.center,
  479. .reveal.center .slides {
  480. min-height: auto;
  481. padding: 0;
  482. }
  483. /*********************************************
  484. * DEFAULT TRANSITION
  485. *********************************************/
  486. .reveal .slides>section.past {
  487. display: block;
  488. opacity: 0;
  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 .slides>section.future {
  495. display: block;
  496. opacity: 0;
  497. -webkit-transform: translate3d(100%, 0, 0) rotateY(90deg) translate3d(100%, 0, 0);
  498. -moz-transform: translate3d(100%, 0, 0) rotateY(90deg) translate3d(100%, 0, 0);
  499. -ms-transform: translate3d(100%, 0, 0) rotateY(90deg) translate3d(100%, 0, 0);
  500. transform: translate3d(100%, 0, 0) rotateY(90deg) translate3d(100%, 0, 0);
  501. }
  502. .reveal .slides>section>section.past {
  503. display: block;
  504. opacity: 0;
  505. -webkit-transform: translate3d(0, -50%, 0) rotateX(70deg) translate3d(0, -50%, 0);
  506. -moz-transform: translate3d(0, -50%, 0) rotateX(70deg) translate3d(0, -50%, 0);
  507. -ms-transform: translate3d(0, -50%, 0) rotateX(70deg) translate3d(0, -50%, 0);
  508. transform: translate3d(0, -50%, 0) rotateX(70deg) translate3d(0, -50%, 0);
  509. }
  510. .reveal .slides>section>section.future {
  511. display: block;
  512. opacity: 0;
  513. -webkit-transform: translate3d(0, 50%, 0) rotateX(-70deg) translate3d(0, 50%, 0);
  514. -moz-transform: translate3d(0, 50%, 0) rotateX(-70deg) translate3d(0, 50%, 0);
  515. -ms-transform: translate3d(0, 50%, 0) rotateX(-70deg) translate3d(0, 50%, 0);
  516. transform: translate3d(0, 50%, 0) rotateX(-70deg) translate3d(0, 50%, 0);
  517. }
  518. /*********************************************
  519. * CONCAVE TRANSITION
  520. *********************************************/
  521. .reveal.concave .slides>section.past {
  522. -webkit-transform: translate3d(-100%, 0, 0) rotateY(90deg) translate3d(-100%, 0, 0);
  523. -moz-transform: translate3d(-100%, 0, 0) rotateY(90deg) translate3d(-100%, 0, 0);
  524. -ms-transform: translate3d(-100%, 0, 0) rotateY(90deg) translate3d(-100%, 0, 0);
  525. transform: translate3d(-100%, 0, 0) rotateY(90deg) translate3d(-100%, 0, 0);
  526. }
  527. .reveal.concave .slides>section.future {
  528. -webkit-transform: translate3d(100%, 0, 0) rotateY(-90deg) translate3d(100%, 0, 0);
  529. -moz-transform: translate3d(100%, 0, 0) rotateY(-90deg) translate3d(100%, 0, 0);
  530. -ms-transform: translate3d(100%, 0, 0) rotateY(-90deg) translate3d(100%, 0, 0);
  531. transform: translate3d(100%, 0, 0) rotateY(-90deg) translate3d(100%, 0, 0);
  532. }
  533. .reveal.concave .slides>section>section.past {
  534. -webkit-transform: translate3d(0, -80%, 0) rotateX(-70deg) translate3d(0, -80%, 0);
  535. -moz-transform: translate3d(0, -80%, 0) rotateX(-70deg) translate3d(0, -80%, 0);
  536. -ms-transform: translate3d(0, -80%, 0) rotateX(-70deg) translate3d(0, -80%, 0);
  537. transform: translate3d(0, -80%, 0) rotateX(-70deg) translate3d(0, -80%, 0);
  538. }
  539. .reveal.concave .slides>section>section.future {
  540. -webkit-transform: translate3d(0, 80%, 0) rotateX(70deg) translate3d(0, 80%, 0);
  541. -moz-transform: translate3d(0, 80%, 0) rotateX(70deg) translate3d(0, 80%, 0);
  542. -ms-transform: translate3d(0, 80%, 0) rotateX(70deg) translate3d(0, 80%, 0);
  543. transform: translate3d(0, 80%, 0) rotateX(70deg) translate3d(0, 80%, 0);
  544. }
  545. /*********************************************
  546. * ZOOM TRANSITION
  547. *********************************************/
  548. .reveal.zoom .slides>section,
  549. .reveal.zoom .slides>section>section {
  550. -webkit-transition: all 600ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
  551. -moz-transition: all 600ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
  552. -ms-transition: all 600ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
  553. -o-transition: all 600ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
  554. transition: all 600ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
  555. }
  556. .reveal.zoom .slides>section.past {
  557. opacity: 0;
  558. visibility: hidden;
  559. -webkit-transform: scale(16);
  560. -moz-transform: scale(16);
  561. -ms-transform: scale(16);
  562. -o-transform: scale(16);
  563. transform: scale(16);
  564. }
  565. .reveal.zoom .slides>section.future {
  566. opacity: 0;
  567. visibility: hidden;
  568. -webkit-transform: scale(0.2);
  569. -moz-transform: scale(0.2);
  570. -ms-transform: scale(0.2);
  571. -o-transform: scale(0.2);
  572. transform: scale(0.2);
  573. }
  574. .reveal.zoom .slides>section>section.past {
  575. -webkit-transform: translate(0, -150%);
  576. -moz-transform: translate(0, -150%);
  577. -ms-transform: translate(0, -150%);
  578. -o-transform: translate(0, -150%);
  579. transform: translate(0, -150%);
  580. }
  581. .reveal.zoom .slides>section>section.future {
  582. -webkit-transform: translate(0, 150%);
  583. -moz-transform: translate(0, 150%);
  584. -ms-transform: translate(0, 150%);
  585. -o-transform: translate(0, 150%);
  586. transform: translate(0, 150%);
  587. }
  588. /*********************************************
  589. * LINEAR TRANSITION
  590. *********************************************/
  591. .reveal.linear .slides>section.past {
  592. -webkit-transform: translate(-150%, 0);
  593. -moz-transform: translate(-150%, 0);
  594. -ms-transform: translate(-150%, 0);
  595. -o-transform: translate(-150%, 0);
  596. transform: translate(-150%, 0);
  597. }
  598. .reveal.linear .slides>section.future {
  599. -webkit-transform: translate(150%, 0);
  600. -moz-transform: translate(150%, 0);
  601. -ms-transform: translate(150%, 0);
  602. -o-transform: translate(150%, 0);
  603. transform: translate(150%, 0);
  604. }
  605. .reveal.linear .slides>section>section.past {
  606. -webkit-transform: translate(0, -150%);
  607. -moz-transform: translate(0, -150%);
  608. -ms-transform: translate(0, -150%);
  609. -o-transform: translate(0, -150%);
  610. transform: translate(0, -150%);
  611. }
  612. .reveal.linear .slides>section>section.future {
  613. -webkit-transform: translate(0, 150%);
  614. -moz-transform: translate(0, 150%);
  615. -ms-transform: translate(0, 150%);
  616. -o-transform: translate(0, 150%);
  617. transform: translate(0, 150%);
  618. }
  619. /*********************************************
  620. * CUBE TRANSITION
  621. *********************************************/
  622. .reveal.cube .slides {
  623. -webkit-perspective-origin: 0% 25%;
  624. -moz-perspective-origin: 0% 25%;
  625. -ms-perspective-origin: 0% 25%;
  626. perspective-origin: 0% 25%;
  627. -webkit-perspective: 1300px;
  628. -moz-perspective: 1300px;
  629. -ms-perspective: 1300px;
  630. perspective: 1300px;
  631. }
  632. .reveal.cube .slides section {
  633. padding: 30px;
  634. -webkit-backface-visibility: hidden;
  635. -moz-backface-visibility: hidden;
  636. -ms-backface-visibility: hidden;
  637. backface-visibility: hidden;
  638. -webkit-box-sizing: border-box;
  639. -moz-box-sizing: border-box;
  640. box-sizing: border-box;
  641. }
  642. .reveal.cube .slides section:not(.stack):before {
  643. content: '';
  644. position: absolute;
  645. display: block;
  646. width: 100%;
  647. height: 100%;
  648. left: 0;
  649. top: 0;
  650. background: rgba(0,0,0,0.1);
  651. border-radius: 4px;
  652. -webkit-transform: translateZ( -20px );
  653. -moz-transform: translateZ( -20px );
  654. -ms-transform: translateZ( -20px );
  655. -o-transform: translateZ( -20px );
  656. transform: translateZ( -20px );
  657. }
  658. .reveal.cube .slides section:not(.stack):after {
  659. content: '';
  660. position: absolute;
  661. display: block;
  662. width: 90%;
  663. height: 30px;
  664. left: 5%;
  665. bottom: 0;
  666. background: none;
  667. z-index: 1;
  668. border-radius: 4px;
  669. box-shadow: 0px 95px 25px rgba(0,0,0,0.2);
  670. -webkit-transform: translateZ(-90px) rotateX( 65deg );
  671. -moz-transform: translateZ(-90px) rotateX( 65deg );
  672. -ms-transform: translateZ(-90px) rotateX( 65deg );
  673. -o-transform: translateZ(-90px) rotateX( 65deg );
  674. transform: translateZ(-90px) rotateX( 65deg );
  675. }
  676. .reveal.cube .slides>section.stack {
  677. padding: 0;
  678. background: none;
  679. }
  680. .reveal.cube .slides>section.past {
  681. -webkit-transform-origin: 100% 0%;
  682. -moz-transform-origin: 100% 0%;
  683. -ms-transform-origin: 100% 0%;
  684. transform-origin: 100% 0%;
  685. -webkit-transform: translate3d(-100%, 0, 0) rotateY(-90deg);
  686. -moz-transform: translate3d(-100%, 0, 0) rotateY(-90deg);
  687. -ms-transform: translate3d(-100%, 0, 0) rotateY(-90deg);
  688. transform: translate3d(-100%, 0, 0) rotateY(-90deg);
  689. }
  690. .reveal.cube .slides>section.future {
  691. -webkit-transform-origin: 0% 0%;
  692. -moz-transform-origin: 0% 0%;
  693. -ms-transform-origin: 0% 0%;
  694. transform-origin: 0% 0%;
  695. -webkit-transform: translate3d(100%, 0, 0) rotateY(90deg);
  696. -moz-transform: translate3d(100%, 0, 0) rotateY(90deg);
  697. -ms-transform: translate3d(100%, 0, 0) rotateY(90deg);
  698. transform: translate3d(100%, 0, 0) rotateY(90deg);
  699. }
  700. .reveal.cube .slides>section>section.past {
  701. -webkit-transform-origin: 0% 100%;
  702. -moz-transform-origin: 0% 100%;
  703. -ms-transform-origin: 0% 100%;
  704. transform-origin: 0% 100%;
  705. -webkit-transform: translate3d(0, -100%, 0) rotateX(90deg);
  706. -moz-transform: translate3d(0, -100%, 0) rotateX(90deg);
  707. -ms-transform: translate3d(0, -100%, 0) rotateX(90deg);
  708. transform: translate3d(0, -100%, 0) rotateX(90deg);
  709. }
  710. .reveal.cube .slides>section>section.future {
  711. -webkit-transform-origin: 0% 0%;
  712. -moz-transform-origin: 0% 0%;
  713. -ms-transform-origin: 0% 0%;
  714. transform-origin: 0% 0%;
  715. -webkit-transform: translate3d(0, 100%, 0) rotateX(-90deg);
  716. -moz-transform: translate3d(0, 100%, 0) rotateX(-90deg);
  717. -ms-transform: translate3d(0, 100%, 0) rotateX(-90deg);
  718. transform: translate3d(0, 100%, 0) rotateX(-90deg);
  719. }
  720. /*********************************************
  721. * PAGE TRANSITION
  722. *********************************************/
  723. .reveal.page .slides {
  724. -webkit-perspective-origin: 0% 50%;
  725. -moz-perspective-origin: 0% 50%;
  726. -ms-perspective-origin: 0% 50%;
  727. perspective-origin: 0% 50%;
  728. -webkit-perspective: 3000px;
  729. -moz-perspective: 3000px;
  730. -ms-perspective: 3000px;
  731. perspective: 3000px;
  732. }
  733. .reveal.page .slides section {
  734. padding: 30px;
  735. -webkit-box-sizing: border-box;
  736. -moz-box-sizing: border-box;
  737. box-sizing: border-box;
  738. }
  739. .reveal.page .slides section.past {
  740. z-index: 12;
  741. }
  742. .reveal.page .slides section:not(.stack):before {
  743. content: '';
  744. position: absolute;
  745. display: block;
  746. width: 100%;
  747. height: 100%;
  748. left: 0;
  749. top: 0;
  750. background: rgba(0,0,0,0.1);
  751. -webkit-transform: translateZ( -20px );
  752. -moz-transform: translateZ( -20px );
  753. -ms-transform: translateZ( -20px );
  754. -o-transform: translateZ( -20px );
  755. transform: translateZ( -20px );
  756. }
  757. .reveal.page .slides section:not(.stack):after {
  758. content: '';
  759. position: absolute;
  760. display: block;
  761. width: 90%;
  762. height: 30px;
  763. left: 5%;
  764. bottom: 0;
  765. background: none;
  766. z-index: 1;
  767. border-radius: 4px;
  768. box-shadow: 0px 95px 25px rgba(0,0,0,0.2);
  769. -webkit-transform: translateZ(-90px) rotateX( 65deg );
  770. }
  771. .reveal.page .slides>section.stack {
  772. padding: 0;
  773. background: none;
  774. }
  775. .reveal.page .slides>section.past {
  776. -webkit-transform-origin: 0% 0%;
  777. -moz-transform-origin: 0% 0%;
  778. -ms-transform-origin: 0% 0%;
  779. transform-origin: 0% 0%;
  780. -webkit-transform: translate3d(-40%, 0, 0) rotateY(-80deg);
  781. -moz-transform: translate3d(-40%, 0, 0) rotateY(-80deg);
  782. -ms-transform: translate3d(-40%, 0, 0) rotateY(-80deg);
  783. transform: translate3d(-40%, 0, 0) rotateY(-80deg);
  784. }
  785. .reveal.page .slides>section.future {
  786. -webkit-transform-origin: 100% 0%;
  787. -moz-transform-origin: 100% 0%;
  788. -ms-transform-origin: 100% 0%;
  789. transform-origin: 100% 0%;
  790. -webkit-transform: translate3d(0, 0, 0);
  791. -moz-transform: translate3d(0, 0, 0);
  792. -ms-transform: translate3d(0, 0, 0);
  793. transform: translate3d(0, 0, 0);
  794. }
  795. .reveal.page .slides>section>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(0, -40%, 0) rotateX(80deg);
  801. -moz-transform: translate3d(0, -40%, 0) rotateX(80deg);
  802. -ms-transform: translate3d(0, -40%, 0) rotateX(80deg);
  803. transform: translate3d(0, -40%, 0) rotateX(80deg);
  804. }
  805. .reveal.page .slides>section>section.future {
  806. -webkit-transform-origin: 0% 100%;
  807. -moz-transform-origin: 0% 100%;
  808. -ms-transform-origin: 0% 100%;
  809. transform-origin: 0% 100%;
  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. /*********************************************
  816. * TILE-FLIP TRANSITION (CSS shader)
  817. *********************************************/
  818. .reveal.tileflip .slides section.present {
  819. -webkit-transform: none;
  820. -webkit-transition-duration: 800ms;
  821. -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),
  822. amount 0, randomness 0, flipAxis 0 1 0, tileOutline 1
  823. );
  824. }
  825. .reveal.tileflip .slides section.past {
  826. -webkit-transform: none;
  827. -webkit-transition-duration: 800ms;
  828. -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),
  829. amount 1, randomness 0, flipAxis 0 1 0, tileOutline 1
  830. );
  831. }
  832. .reveal.tileflip .slides section.future {
  833. -webkit-transform: none;
  834. -webkit-transition-duration: 800ms;
  835. -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),
  836. amount 1, randomness 0, flipAxis 0 1 0, tileOutline 1
  837. );
  838. }
  839. .reveal.tileflip .slides>section>section.present {
  840. -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),
  841. amount 0, randomness 2, flipAxis 1 0 0, tileOutline 1
  842. );
  843. }
  844. .reveal.tileflip .slides>section>section.past {
  845. -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),
  846. amount 1, randomness 2, flipAxis 1 0 0, tileOutline 1
  847. );
  848. }
  849. .reveal.tileflip .slides>section>section.future {
  850. -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),
  851. amount 1, randomness 2, flipAxis 1 0 0, tileOutline 1
  852. );
  853. }
  854. /*********************************************
  855. * NO TRANSITION
  856. *********************************************/
  857. .reveal.none .slides section {
  858. -webkit-transform: none;
  859. -moz-transform: none;
  860. -ms-transform: none;
  861. -o-transform: none;
  862. transform: none;
  863. -webkit-transition: none;
  864. -moz-transition: none;
  865. -ms-transition: none;
  866. -o-transition: none;
  867. transition: none;
  868. }
  869. /*********************************************
  870. * OVERVIEW
  871. *********************************************/
  872. .reveal.overview .slides {
  873. -webkit-perspective: 700px;
  874. -moz-perspective: 700px;
  875. -ms-perspective: 700px;
  876. perspective: 700px;
  877. }
  878. .reveal.overview .slides section {
  879. padding: 20px 0;
  880. max-height: 600px;
  881. overflow: hidden;
  882. opacity: 1!important;
  883. visibility: visible!important;
  884. cursor: pointer;
  885. background: rgba(0,0,0,0.1);
  886. }
  887. .reveal.overview .slides section .fragment {
  888. opacity: 1;
  889. }
  890. .reveal.overview .slides section:after,
  891. .reveal.overview .slides section:before {
  892. display: none !important;
  893. }
  894. .reveal.overview .slides section>section {
  895. opacity: 1;
  896. cursor: pointer;
  897. }
  898. .reveal.overview .slides section:hover {
  899. background: rgba(0,0,0,0.3);
  900. }
  901. .reveal.overview .slides section.present {
  902. background: rgba(0,0,0,0.3);
  903. }
  904. .reveal.overview .slides>section.stack {
  905. background: none;
  906. padding: 0;
  907. overflow: visible;
  908. }
  909. /*********************************************
  910. * PAUSED MODE
  911. *********************************************/
  912. .reveal .pause-overlay {
  913. position: absolute;
  914. top: 0;
  915. left: 0;
  916. width: 100%;
  917. height: 100%;
  918. background: black;
  919. visibility: hidden;
  920. opacity: 0;
  921. z-index: 100;
  922. -webkit-transition: all 1s ease;
  923. -moz-transition: all 1s ease;
  924. -ms-transition: all 1s ease;
  925. -o-transition: all 1s ease;
  926. transition: all 1s ease;
  927. }
  928. .reveal.paused .pause-overlay {
  929. visibility: visible;
  930. opacity: 1;
  931. }
  932. /*********************************************
  933. * FALLBACK
  934. *********************************************/
  935. .no-transforms {
  936. overflow-y: auto;
  937. }
  938. .no-transforms .slides section {
  939. display: block!important;
  940. opacity: 1!important;
  941. position: relative!important;
  942. height: auto;
  943. min-height: auto;
  944. margin-bottom: 100px;
  945. -webkit-transform: none;
  946. -moz-transform: none;
  947. -ms-transform: none;
  948. transform: none;
  949. }
  950. .no-transition {
  951. -webkit-transition: none;
  952. -moz-transition: none;
  953. -ms-transition: none;
  954. -o-transition: none;
  955. transition: none;
  956. }
  957. /*********************************************
  958. * BACKGROUND STATES
  959. *********************************************/
  960. .reveal .state-background {
  961. position: absolute;
  962. width: 100%;
  963. height: 100%;
  964. background: rgba( 0, 0, 0, 0 );
  965. -webkit-transition: background 800ms ease;
  966. -moz-transition: background 800ms ease;
  967. -ms-transition: background 800ms ease;
  968. -o-transition: background 800ms ease;
  969. transition: background 800ms ease;
  970. }
  971. .alert .reveal .state-background {
  972. background: rgba( 200, 50, 30, 0.6 );
  973. }
  974. .soothe .reveal .state-background {
  975. background: rgba( 50, 200, 90, 0.4 );
  976. }
  977. .blackout .reveal .state-background {
  978. background: rgba( 0, 0, 0, 0.6 );
  979. }
  980. /*********************************************
  981. * SPEAKER NOTES
  982. *********************************************/
  983. .reveal aside.notes {
  984. display: none;
  985. }
  986. /*********************************************
  987. * ZOOM PLUGIN
  988. *********************************************/
  989. .zoomed .reveal *,
  990. .zoomed .reveal *:before,
  991. .zoomed .reveal *:after {
  992. -webkit-transform: none !important;
  993. -moz-transform: none !important;
  994. -ms-transform: none !important;
  995. transform: none !important;
  996. -webkit-backface-visibility: visible !important;
  997. -moz-backface-visibility: visible !important;
  998. -ms-backface-visibility: visible !important;
  999. backface-visibility: visible !important;
  1000. }
  1001. .zoomed .reveal .progress,
  1002. .zoomed .reveal .controls {
  1003. opacity: 0;
  1004. }
  1005. .zoomed .reveal .roll span {
  1006. background: none;
  1007. }
  1008. .zoomed .reveal .roll span:after {
  1009. visibility: hidden;
  1010. }