reveal.scss 44 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402140314041405140614071408140914101411141214131414141514161417141814191420142114221423142414251426142714281429143014311432143314341435143614371438143914401441144214431444144514461447144814491450145114521453145414551456145714581459146014611462146314641465146614671468146914701471147214731474147514761477147814791480148114821483148414851486148714881489149014911492149314941495149614971498149915001501150215031504150515061507150815091510151115121513151415151516151715181519152015211522152315241525152615271528152915301531153215331534153515361537153815391540154115421543154415451546154715481549155015511552155315541555155615571558155915601561156215631564156515661567156815691570157115721573157415751576157715781579158015811582158315841585158615871588158915901591159215931594159515961597159815991600160116021603160416051606160716081609161016111612161316141615161616171618161916201621162216231624162516261627162816291630163116321633163416351636163716381639164016411642164316441645164616471648164916501651165216531654165516561657165816591660166116621663166416651666166716681669167016711672167316741675167616771678167916801681168216831684168516861687168816891690169116921693169416951696169716981699170017011702170317041705170617071708170917101711171217131714171517161717171817191720172117221723172417251726172717281729173017311732173317341735173617371738173917401741174217431744174517461747174817491750175117521753175417551756175717581759176017611762176317641765
  1. /*!
  2. * reveal.js
  3. * http://revealjs.com
  4. * MIT licensed
  5. *
  6. * Copyright (C) 2018 Hakim El Hattab, http://hakim.se
  7. */
  8. /*********************************************
  9. * RESET STYLES
  10. *********************************************/
  11. html, body, .reveal div, .reveal span, .reveal applet, .reveal object, .reveal iframe,
  12. .reveal h1, .reveal h2, .reveal h3, .reveal h4, .reveal h5, .reveal h6, .reveal p, .reveal blockquote, .reveal pre,
  13. .reveal a, .reveal abbr, .reveal acronym, .reveal address, .reveal big, .reveal cite, .reveal code,
  14. .reveal del, .reveal dfn, .reveal em, .reveal img, .reveal ins, .reveal kbd, .reveal q, .reveal s, .reveal samp,
  15. .reveal small, .reveal strike, .reveal strong, .reveal sub, .reveal sup, .reveal tt, .reveal var,
  16. .reveal b, .reveal u, .reveal center,
  17. .reveal dl, .reveal dt, .reveal dd, .reveal ol, .reveal ul, .reveal li,
  18. .reveal fieldset, .reveal form, .reveal label, .reveal legend,
  19. .reveal table, .reveal caption, .reveal tbody, .reveal tfoot, .reveal thead, .reveal tr, .reveal th, .reveal td,
  20. .reveal article, .reveal aside, .reveal canvas, .reveal details, .reveal embed,
  21. .reveal figure, .reveal figcaption, .reveal footer, .reveal header, .reveal hgroup,
  22. .reveal menu, .reveal nav, .reveal output, .reveal ruby, .reveal section, .reveal summary,
  23. .reveal time, .reveal mark, .reveal audio, .reveal video {
  24. margin: 0;
  25. padding: 0;
  26. border: 0;
  27. font-size: 100%;
  28. font: inherit;
  29. vertical-align: baseline;
  30. }
  31. .reveal article, .reveal aside, .reveal details, .reveal figcaption, .reveal figure,
  32. .reveal footer, .reveal header, .reveal hgroup, .reveal menu, .reveal nav, .reveal section {
  33. display: block;
  34. }
  35. /*********************************************
  36. * GLOBAL STYLES
  37. *********************************************/
  38. html,
  39. body {
  40. width: 100%;
  41. height: 100%;
  42. overflow: hidden;
  43. }
  44. body {
  45. position: relative;
  46. line-height: 1;
  47. background-color: #fff;
  48. color: #000;
  49. }
  50. /*********************************************
  51. * VIEW FRAGMENTS
  52. *********************************************/
  53. .reveal .slides section .fragment {
  54. opacity: 0;
  55. visibility: hidden;
  56. transition: all .2s ease;
  57. &.visible {
  58. opacity: 1;
  59. visibility: inherit;
  60. }
  61. }
  62. .reveal .slides section .fragment.grow {
  63. opacity: 1;
  64. visibility: inherit;
  65. &.visible {
  66. transform: scale( 1.3 );
  67. }
  68. }
  69. .reveal .slides section .fragment.shrink {
  70. opacity: 1;
  71. visibility: inherit;
  72. &.visible {
  73. transform: scale( 0.7 );
  74. }
  75. }
  76. .reveal .slides section .fragment.zoom-in {
  77. transform: scale( 0.1 );
  78. &.visible {
  79. transform: none;
  80. }
  81. }
  82. .reveal .slides section .fragment.fade-out {
  83. opacity: 1;
  84. visibility: inherit;
  85. &.visible {
  86. opacity: 0;
  87. visibility: hidden;
  88. }
  89. }
  90. .reveal .slides section .fragment.semi-fade-out {
  91. opacity: 1;
  92. visibility: inherit;
  93. &.visible {
  94. opacity: 0.5;
  95. visibility: inherit;
  96. }
  97. }
  98. .reveal .slides section .fragment.strike {
  99. opacity: 1;
  100. visibility: inherit;
  101. &.visible {
  102. text-decoration: line-through;
  103. }
  104. }
  105. .reveal .slides section .fragment.fade-up {
  106. transform: translate(0, 20%);
  107. &.visible {
  108. transform: translate(0, 0);
  109. }
  110. }
  111. .reveal .slides section .fragment.fade-down {
  112. transform: translate(0, -20%);
  113. &.visible {
  114. transform: translate(0, 0);
  115. }
  116. }
  117. .reveal .slides section .fragment.fade-right {
  118. transform: translate(-20%, 0);
  119. &.visible {
  120. transform: translate(0, 0);
  121. }
  122. }
  123. .reveal .slides section .fragment.fade-left {
  124. transform: translate(20%, 0);
  125. &.visible {
  126. transform: translate(0, 0);
  127. }
  128. }
  129. .reveal .slides section .fragment.fade-in-then-out,
  130. .reveal .slides section .fragment.current-visible {
  131. opacity: 0;
  132. visibility: hidden;
  133. &.current-fragment {
  134. opacity: 1;
  135. visibility: inherit;
  136. }
  137. }
  138. .reveal .slides section .fragment.fade-in-then-semi-out {
  139. opacity: 0;
  140. visibility: hidden;
  141. &.visible {
  142. opacity: 0.5;
  143. visibility: inherit;
  144. }
  145. &.current-fragment {
  146. opacity: 1;
  147. visibility: inherit;
  148. }
  149. }
  150. .reveal .slides section .fragment.highlight-red,
  151. .reveal .slides section .fragment.highlight-current-red,
  152. .reveal .slides section .fragment.highlight-green,
  153. .reveal .slides section .fragment.highlight-current-green,
  154. .reveal .slides section .fragment.highlight-blue,
  155. .reveal .slides section .fragment.highlight-current-blue {
  156. opacity: 1;
  157. visibility: inherit;
  158. }
  159. .reveal .slides section .fragment.highlight-red.visible {
  160. color: #ff2c2d
  161. }
  162. .reveal .slides section .fragment.highlight-green.visible {
  163. color: #17ff2e;
  164. }
  165. .reveal .slides section .fragment.highlight-blue.visible {
  166. color: #1b91ff;
  167. }
  168. .reveal .slides section .fragment.highlight-current-red.current-fragment {
  169. color: #ff2c2d
  170. }
  171. .reveal .slides section .fragment.highlight-current-green.current-fragment {
  172. color: #17ff2e;
  173. }
  174. .reveal .slides section .fragment.highlight-current-blue.current-fragment {
  175. color: #1b91ff;
  176. }
  177. /*********************************************
  178. * DEFAULT ELEMENT STYLES
  179. *********************************************/
  180. /* Fixes issue in Chrome where italic fonts did not appear when printing to PDF */
  181. .reveal:after {
  182. content: '';
  183. font-style: italic;
  184. }
  185. .reveal iframe {
  186. z-index: 1;
  187. }
  188. /** Prevents layering issues in certain browser/transition combinations */
  189. .reveal a {
  190. position: relative;
  191. }
  192. .reveal .stretch {
  193. max-width: none;
  194. max-height: none;
  195. }
  196. .reveal pre.stretch code {
  197. height: 100%;
  198. max-height: 100%;
  199. box-sizing: border-box;
  200. }
  201. /*********************************************
  202. * CONTROLS
  203. *********************************************/
  204. @keyframes bounce-right {
  205. 0%, 10%, 25%, 40%, 50% {transform: translateX(0);}
  206. 20% {transform: translateX(10px);}
  207. 30% {transform: translateX(-5px);}
  208. }
  209. @keyframes bounce-down {
  210. 0%, 10%, 25%, 40%, 50% {transform: translateY(0);}
  211. 20% {transform: translateY(10px);}
  212. 30% {transform: translateY(-5px);}
  213. }
  214. $controlArrowSize: 3.6em;
  215. $controlArrowSpacing: 1.4em;
  216. $controlArrowLength: 2.6em;
  217. $controlArrowThickness: 0.5em;
  218. $controlsArrowAngle: 45deg;
  219. $controlsArrowAngleHover: 40deg;
  220. $controlsArrowAngleActive: 36deg;
  221. @mixin controlsArrowTransform( $angle ) {
  222. &:before {
  223. transform: translateX(($controlArrowSize - $controlArrowLength)/2) translateY(($controlArrowSize - $controlArrowThickness)/2) rotate( $angle );
  224. }
  225. &:after {
  226. transform: translateX(($controlArrowSize - $controlArrowLength)/2) translateY(($controlArrowSize - $controlArrowThickness)/2) rotate( -$angle );
  227. }
  228. }
  229. .reveal .controls {
  230. $spacing: 12px;
  231. display: none;
  232. position: absolute;
  233. top: auto;
  234. bottom: $spacing;
  235. right: $spacing;
  236. left: auto;
  237. z-index: 1;
  238. color: #000;
  239. pointer-events: none;
  240. font-size: 10px;
  241. button {
  242. position: absolute;
  243. padding: 0;
  244. background-color: transparent;
  245. border: 0;
  246. outline: 0;
  247. cursor: pointer;
  248. color: currentColor;
  249. transform: scale(.9999);
  250. transition: color 0.2s ease,
  251. opacity 0.2s ease,
  252. transform 0.2s ease;
  253. z-index: 2; // above slides
  254. pointer-events: auto;
  255. font-size: inherit;
  256. visibility: hidden;
  257. opacity: 0;
  258. -webkit-appearance: none;
  259. -webkit-tap-highlight-color: rgba( 0, 0, 0, 0 );
  260. }
  261. .controls-arrow:before,
  262. .controls-arrow:after {
  263. content: '';
  264. position: absolute;
  265. top: 0;
  266. left: 0;
  267. width: $controlArrowLength;
  268. height: $controlArrowThickness;
  269. border-radius: $controlArrowThickness/2;
  270. background-color: currentColor;
  271. transition: all 0.15s ease, background-color 0.8s ease;
  272. transform-origin: floor(($controlArrowThickness/2)*10)/10 50%;
  273. will-change: transform;
  274. }
  275. .controls-arrow {
  276. position: relative;
  277. width: $controlArrowSize;
  278. height: $controlArrowSize;
  279. @include controlsArrowTransform( $controlsArrowAngle );
  280. &:hover {
  281. @include controlsArrowTransform( $controlsArrowAngleHover );
  282. }
  283. &:active {
  284. @include controlsArrowTransform( $controlsArrowAngleActive );
  285. }
  286. }
  287. .navigate-left {
  288. right: $controlArrowSize + $controlArrowSpacing*2;
  289. bottom: $controlArrowSpacing + $controlArrowSize/2;
  290. transform: translateX( -10px );
  291. }
  292. .navigate-right {
  293. right: 0;
  294. bottom: $controlArrowSpacing + $controlArrowSize/2;
  295. transform: translateX( 10px );
  296. .controls-arrow {
  297. transform: rotate( 180deg );
  298. }
  299. &.highlight {
  300. animation: bounce-right 2s 50 both ease-out;
  301. }
  302. }
  303. .navigate-up {
  304. right: $controlArrowSpacing + $controlArrowSize/2;
  305. bottom: $controlArrowSpacing*2 + $controlArrowSize;
  306. transform: translateY( -10px );
  307. .controls-arrow {
  308. transform: rotate( 90deg );
  309. }
  310. }
  311. .navigate-down {
  312. right: $controlArrowSpacing + $controlArrowSize/2;
  313. bottom: 0;
  314. transform: translateY( 10px );
  315. .controls-arrow {
  316. transform: rotate( -90deg );
  317. }
  318. &.highlight {
  319. animation: bounce-down 2s 50 both ease-out;
  320. }
  321. }
  322. // Back arrow style: "faded":
  323. // Deemphasize backwards navigation arrows in favor of drawing
  324. // attention to forwards navigation
  325. &[data-controls-back-arrows="faded"] .navigate-left.enabled,
  326. &[data-controls-back-arrows="faded"] .navigate-up.enabled {
  327. opacity: 0.3;
  328. &:hover {
  329. opacity: 1;
  330. }
  331. }
  332. // Back arrow style: "hidden":
  333. // Never show arrows for backwards navigation
  334. &[data-controls-back-arrows="hidden"] .navigate-left.enabled,
  335. &[data-controls-back-arrows="hidden"] .navigate-up.enabled {
  336. opacity: 0;
  337. visibility: hidden;
  338. }
  339. // Any control button that can be clicked is "enabled"
  340. .enabled {
  341. visibility: visible;
  342. opacity: 0.9;
  343. cursor: pointer;
  344. transform: none;
  345. }
  346. // Any control button that leads to showing or hiding
  347. // a fragment
  348. .enabled.fragmented {
  349. opacity: 0.5;
  350. }
  351. .enabled:hover,
  352. .enabled.fragmented:hover {
  353. opacity: 1;
  354. }
  355. }
  356. // Adjust the layout when there are no vertical slides
  357. .reveal:not(.has-vertical-slides) .controls .navigate-left {
  358. bottom: $controlArrowSpacing;
  359. right: 0.5em + $controlArrowSpacing + $controlArrowSize;
  360. }
  361. .reveal:not(.has-vertical-slides) .controls .navigate-right {
  362. bottom: $controlArrowSpacing;
  363. right: 0.5em;
  364. }
  365. // Adjust the layout when there are no horizontal slides
  366. .reveal:not(.has-horizontal-slides) .controls .navigate-up {
  367. right: $controlArrowSpacing;
  368. bottom: $controlArrowSpacing + $controlArrowSize;
  369. }
  370. .reveal:not(.has-horizontal-slides) .controls .navigate-down {
  371. right: $controlArrowSpacing;
  372. bottom: 0.5em;
  373. }
  374. // Invert arrows based on background color
  375. .reveal.has-dark-background .controls {
  376. color: #fff;
  377. }
  378. .reveal.has-light-background .controls {
  379. color: #000;
  380. }
  381. // Disable active states on touch devices
  382. .reveal.no-hover .controls .controls-arrow:hover,
  383. .reveal.no-hover .controls .controls-arrow:active {
  384. @include controlsArrowTransform( $controlsArrowAngle );
  385. }
  386. // Edge aligned controls layout
  387. @media screen and (min-width: 500px) {
  388. $spacing: 8px;
  389. .reveal .controls[data-controls-layout="edges"] {
  390. & {
  391. top: 0;
  392. right: 0;
  393. bottom: 0;
  394. left: 0;
  395. }
  396. .navigate-left,
  397. .navigate-right,
  398. .navigate-up,
  399. .navigate-down {
  400. bottom: auto;
  401. right: auto;
  402. }
  403. .navigate-left {
  404. top: 50%;
  405. left: $spacing;
  406. margin-top: -$controlArrowSize/2;
  407. }
  408. .navigate-right {
  409. top: 50%;
  410. right: $spacing;
  411. margin-top: -$controlArrowSize/2;
  412. }
  413. .navigate-up {
  414. top: $spacing;
  415. left: 50%;
  416. margin-left: -$controlArrowSize/2;
  417. }
  418. .navigate-down {
  419. bottom: $spacing;
  420. left: 50%;
  421. margin-left: -$controlArrowSize/2;
  422. }
  423. }
  424. }
  425. /*********************************************
  426. * PROGRESS BAR
  427. *********************************************/
  428. .reveal .progress {
  429. position: absolute;
  430. display: none;
  431. height: 3px;
  432. width: 100%;
  433. bottom: 0;
  434. left: 0;
  435. z-index: 10;
  436. background-color: rgba( 0, 0, 0, 0.2 );
  437. color: #fff;
  438. }
  439. .reveal .progress:after {
  440. content: '';
  441. display: block;
  442. position: absolute;
  443. height: 10px;
  444. width: 100%;
  445. top: -10px;
  446. }
  447. .reveal .progress span {
  448. display: block;
  449. height: 100%;
  450. width: 0px;
  451. background-color: currentColor;
  452. transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
  453. }
  454. /*********************************************
  455. * SLIDE NUMBER
  456. *********************************************/
  457. .reveal .slide-number {
  458. position: absolute;
  459. display: block;
  460. right: 8px;
  461. bottom: 8px;
  462. z-index: 31;
  463. font-family: Helvetica, sans-serif;
  464. font-size: 12px;
  465. line-height: 1;
  466. color: #fff;
  467. background-color: rgba( 0, 0, 0, 0.4 );
  468. padding: 5px;
  469. }
  470. .reveal .slide-number a {
  471. color: currentColor;
  472. }
  473. .reveal .slide-number-delimiter {
  474. margin: 0 3px;
  475. }
  476. /*********************************************
  477. * SLIDES
  478. *********************************************/
  479. .reveal {
  480. position: relative;
  481. width: 100%;
  482. height: 100%;
  483. overflow: hidden;
  484. touch-action: none;
  485. }
  486. // Mobile Safari sometimes overlays a header at the top
  487. // of the page when in landscape mode. Using fixed
  488. // positioning ensures that reveal.js reduces its height
  489. // when this header is visible.
  490. @media only screen and (orientation : landscape) {
  491. .reveal.ua-iphone {
  492. position: fixed;
  493. }
  494. }
  495. .reveal .slides {
  496. position: absolute;
  497. width: 100%;
  498. height: 100%;
  499. top: 0;
  500. right: 0;
  501. bottom: 0;
  502. left: 0;
  503. margin: auto;
  504. pointer-events: none;
  505. overflow: visible;
  506. z-index: 1;
  507. text-align: center;
  508. perspective: 600px;
  509. perspective-origin: 50% 40%;
  510. }
  511. .reveal .slides>section {
  512. -ms-perspective: 600px;
  513. }
  514. .reveal .slides>section,
  515. .reveal .slides>section>section {
  516. display: none;
  517. position: absolute;
  518. width: 100%;
  519. padding: 20px 0px;
  520. pointer-events: auto;
  521. z-index: 10;
  522. transform-style: flat;
  523. transition: transform-origin 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985),
  524. transform 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985),
  525. visibility 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985),
  526. opacity 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
  527. }
  528. /* Global transition speed settings */
  529. .reveal[data-transition-speed="fast"] .slides section {
  530. transition-duration: 400ms;
  531. }
  532. .reveal[data-transition-speed="slow"] .slides section {
  533. transition-duration: 1200ms;
  534. }
  535. /* Slide-specific transition speed overrides */
  536. .reveal .slides section[data-transition-speed="fast"] {
  537. transition-duration: 400ms;
  538. }
  539. .reveal .slides section[data-transition-speed="slow"] {
  540. transition-duration: 1200ms;
  541. }
  542. .reveal .slides>section.stack {
  543. padding-top: 0;
  544. padding-bottom: 0;
  545. pointer-events: none;
  546. }
  547. .reveal .slides>section.present,
  548. .reveal .slides>section>section.present {
  549. display: block;
  550. z-index: 11;
  551. opacity: 1;
  552. }
  553. .reveal .slides>section:empty,
  554. .reveal .slides>section>section:empty,
  555. .reveal .slides>section[data-background-interactive],
  556. .reveal .slides>section>section[data-background-interactive] {
  557. pointer-events: none;
  558. }
  559. .reveal.center,
  560. .reveal.center .slides,
  561. .reveal.center .slides section {
  562. min-height: 0 !important;
  563. }
  564. /* Don't allow interaction with invisible slides */
  565. .reveal .slides>section.future,
  566. .reveal .slides>section>section.future,
  567. .reveal .slides>section.past,
  568. .reveal .slides>section>section.past {
  569. pointer-events: none;
  570. }
  571. .reveal.overview .slides>section,
  572. .reveal.overview .slides>section>section {
  573. pointer-events: auto;
  574. }
  575. .reveal .slides>section.past,
  576. .reveal .slides>section.future,
  577. .reveal .slides>section>section.past,
  578. .reveal .slides>section>section.future {
  579. opacity: 0;
  580. }
  581. /*********************************************
  582. * Mixins for readability of transitions
  583. *********************************************/
  584. @mixin transition-global($style) {
  585. .reveal .slides section[data-transition=#{$style}],
  586. .reveal.#{$style} .slides section:not([data-transition]) {
  587. @content;
  588. }
  589. }
  590. @mixin transition-stack($style) {
  591. .reveal .slides section[data-transition=#{$style}].stack,
  592. .reveal.#{$style} .slides section.stack {
  593. @content;
  594. }
  595. }
  596. @mixin transition-horizontal-past($style) {
  597. .reveal .slides>section[data-transition=#{$style}].past,
  598. .reveal .slides>section[data-transition~=#{$style}-out].past,
  599. .reveal.#{$style} .slides>section:not([data-transition]).past {
  600. @content;
  601. }
  602. }
  603. @mixin transition-horizontal-future($style) {
  604. .reveal .slides>section[data-transition=#{$style}].future,
  605. .reveal .slides>section[data-transition~=#{$style}-in].future,
  606. .reveal.#{$style} .slides>section:not([data-transition]).future {
  607. @content;
  608. }
  609. }
  610. @mixin transition-vertical-past($style) {
  611. .reveal .slides>section>section[data-transition=#{$style}].past,
  612. .reveal .slides>section>section[data-transition~=#{$style}-out].past,
  613. .reveal.#{$style} .slides>section>section:not([data-transition]).past {
  614. @content;
  615. }
  616. }
  617. @mixin transition-vertical-future($style) {
  618. .reveal .slides>section>section[data-transition=#{$style}].future,
  619. .reveal .slides>section>section[data-transition~=#{$style}-in].future,
  620. .reveal.#{$style} .slides>section>section:not([data-transition]).future {
  621. @content;
  622. }
  623. }
  624. /*********************************************
  625. * SLIDE TRANSITION
  626. * Aliased 'linear' for backwards compatibility
  627. *********************************************/
  628. @each $stylename in slide, linear {
  629. .reveal.#{$stylename} section {
  630. backface-visibility: hidden;
  631. }
  632. @include transition-horizontal-past(#{$stylename}) {
  633. transform: translate(-150%, 0);
  634. }
  635. @include transition-horizontal-future(#{$stylename}) {
  636. transform: translate(150%, 0);
  637. }
  638. @include transition-vertical-past(#{$stylename}) {
  639. transform: translate(0, -150%);
  640. }
  641. @include transition-vertical-future(#{$stylename}) {
  642. transform: translate(0, 150%);
  643. }
  644. }
  645. /*********************************************
  646. * CONVEX TRANSITION
  647. * Aliased 'default' for backwards compatibility
  648. *********************************************/
  649. @each $stylename in default, convex {
  650. @include transition-stack(#{$stylename}) {
  651. transform-style: preserve-3d;
  652. }
  653. @include transition-horizontal-past(#{$stylename}) {
  654. transform: translate3d(-100%, 0, 0) rotateY(-90deg) translate3d(-100%, 0, 0);
  655. }
  656. @include transition-horizontal-future(#{$stylename}) {
  657. transform: translate3d(100%, 0, 0) rotateY(90deg) translate3d(100%, 0, 0);
  658. }
  659. @include transition-vertical-past(#{$stylename}) {
  660. transform: translate3d(0, -300px, 0) rotateX(70deg) translate3d(0, -300px, 0);
  661. }
  662. @include transition-vertical-future(#{$stylename}) {
  663. transform: translate3d(0, 300px, 0) rotateX(-70deg) translate3d(0, 300px, 0);
  664. }
  665. }
  666. /*********************************************
  667. * CONCAVE TRANSITION
  668. *********************************************/
  669. @include transition-stack(concave) {
  670. transform-style: preserve-3d;
  671. }
  672. @include transition-horizontal-past(concave) {
  673. transform: translate3d(-100%, 0, 0) rotateY(90deg) translate3d(-100%, 0, 0);
  674. }
  675. @include transition-horizontal-future(concave) {
  676. transform: translate3d(100%, 0, 0) rotateY(-90deg) translate3d(100%, 0, 0);
  677. }
  678. @include transition-vertical-past(concave) {
  679. transform: translate3d(0, -80%, 0) rotateX(-70deg) translate3d(0, -80%, 0);
  680. }
  681. @include transition-vertical-future(concave) {
  682. transform: translate3d(0, 80%, 0) rotateX(70deg) translate3d(0, 80%, 0);
  683. }
  684. /*********************************************
  685. * ZOOM TRANSITION
  686. *********************************************/
  687. @include transition-global(zoom) {
  688. transition-timing-function: ease;
  689. }
  690. @include transition-horizontal-past(zoom) {
  691. visibility: hidden;
  692. transform: scale(16);
  693. }
  694. @include transition-horizontal-future(zoom) {
  695. visibility: hidden;
  696. transform: scale(0.2);
  697. }
  698. @include transition-vertical-past(zoom) {
  699. transform: translate(0, -150%);
  700. }
  701. @include transition-vertical-future(zoom) {
  702. transform: translate(0, 150%);
  703. }
  704. /*********************************************
  705. * CUBE TRANSITION
  706. *
  707. * WARNING:
  708. * this is deprecated and will be removed in a
  709. * future version.
  710. *********************************************/
  711. .reveal.cube .slides {
  712. perspective: 1300px;
  713. }
  714. .reveal.cube .slides section {
  715. padding: 30px;
  716. min-height: 700px;
  717. backface-visibility: hidden;
  718. box-sizing: border-box;
  719. transform-style: preserve-3d;
  720. }
  721. .reveal.center.cube .slides section {
  722. min-height: 0;
  723. }
  724. .reveal.cube .slides section:not(.stack):before {
  725. content: '';
  726. position: absolute;
  727. display: block;
  728. width: 100%;
  729. height: 100%;
  730. left: 0;
  731. top: 0;
  732. background: rgba(0,0,0,0.1);
  733. border-radius: 4px;
  734. transform: translateZ( -20px );
  735. }
  736. .reveal.cube .slides section:not(.stack):after {
  737. content: '';
  738. position: absolute;
  739. display: block;
  740. width: 90%;
  741. height: 30px;
  742. left: 5%;
  743. bottom: 0;
  744. background: none;
  745. z-index: 1;
  746. border-radius: 4px;
  747. box-shadow: 0px 95px 25px rgba(0,0,0,0.2);
  748. transform: translateZ(-90px) rotateX( 65deg );
  749. }
  750. .reveal.cube .slides>section.stack {
  751. padding: 0;
  752. background: none;
  753. }
  754. .reveal.cube .slides>section.past {
  755. transform-origin: 100% 0%;
  756. transform: translate3d(-100%, 0, 0) rotateY(-90deg);
  757. }
  758. .reveal.cube .slides>section.future {
  759. transform-origin: 0% 0%;
  760. transform: translate3d(100%, 0, 0) rotateY(90deg);
  761. }
  762. .reveal.cube .slides>section>section.past {
  763. transform-origin: 0% 100%;
  764. transform: translate3d(0, -100%, 0) rotateX(90deg);
  765. }
  766. .reveal.cube .slides>section>section.future {
  767. transform-origin: 0% 0%;
  768. transform: translate3d(0, 100%, 0) rotateX(-90deg);
  769. }
  770. /*********************************************
  771. * PAGE TRANSITION
  772. *
  773. * WARNING:
  774. * this is deprecated and will be removed in a
  775. * future version.
  776. *********************************************/
  777. .reveal.page .slides {
  778. perspective-origin: 0% 50%;
  779. perspective: 3000px;
  780. }
  781. .reveal.page .slides section {
  782. padding: 30px;
  783. min-height: 700px;
  784. box-sizing: border-box;
  785. transform-style: preserve-3d;
  786. }
  787. .reveal.page .slides section.past {
  788. z-index: 12;
  789. }
  790. .reveal.page .slides section:not(.stack):before {
  791. content: '';
  792. position: absolute;
  793. display: block;
  794. width: 100%;
  795. height: 100%;
  796. left: 0;
  797. top: 0;
  798. background: rgba(0,0,0,0.1);
  799. transform: translateZ( -20px );
  800. }
  801. .reveal.page .slides section:not(.stack):after {
  802. content: '';
  803. position: absolute;
  804. display: block;
  805. width: 90%;
  806. height: 30px;
  807. left: 5%;
  808. bottom: 0;
  809. background: none;
  810. z-index: 1;
  811. border-radius: 4px;
  812. box-shadow: 0px 95px 25px rgba(0,0,0,0.2);
  813. -webkit-transform: translateZ(-90px) rotateX( 65deg );
  814. }
  815. .reveal.page .slides>section.stack {
  816. padding: 0;
  817. background: none;
  818. }
  819. .reveal.page .slides>section.past {
  820. transform-origin: 0% 0%;
  821. transform: translate3d(-40%, 0, 0) rotateY(-80deg);
  822. }
  823. .reveal.page .slides>section.future {
  824. transform-origin: 100% 0%;
  825. transform: translate3d(0, 0, 0);
  826. }
  827. .reveal.page .slides>section>section.past {
  828. transform-origin: 0% 0%;
  829. transform: translate3d(0, -40%, 0) rotateX(80deg);
  830. }
  831. .reveal.page .slides>section>section.future {
  832. transform-origin: 0% 100%;
  833. transform: translate3d(0, 0, 0);
  834. }
  835. /*********************************************
  836. * FADE TRANSITION
  837. *********************************************/
  838. .reveal .slides section[data-transition=fade],
  839. .reveal.fade .slides section:not([data-transition]),
  840. .reveal.fade .slides>section>section:not([data-transition]) {
  841. transform: none;
  842. transition: opacity 0.5s;
  843. }
  844. .reveal.fade.overview .slides section,
  845. .reveal.fade.overview .slides>section>section {
  846. transition: none;
  847. }
  848. /*********************************************
  849. * NO TRANSITION
  850. *********************************************/
  851. @include transition-global(none) {
  852. transform: none;
  853. transition: none;
  854. }
  855. /*********************************************
  856. * PAUSED MODE
  857. *********************************************/
  858. .reveal .pause-overlay {
  859. position: absolute;
  860. top: 0;
  861. left: 0;
  862. width: 100%;
  863. height: 100%;
  864. background: black;
  865. visibility: hidden;
  866. opacity: 0;
  867. z-index: 100;
  868. transition: all 1s ease;
  869. }
  870. .reveal .pause-overlay .resume-button {
  871. position: absolute;
  872. bottom: 20px;
  873. right: 20px;
  874. color: #ccc;
  875. border-radius: 2px;
  876. padding: 6px 14px;
  877. border: 2px solid #ccc;
  878. font-size: 16px;
  879. background: transparent;
  880. cursor: pointer;
  881. &:hover {
  882. color: #fff;
  883. border-color: #fff;
  884. }
  885. }
  886. .reveal.paused .pause-overlay {
  887. visibility: visible;
  888. opacity: 1;
  889. }
  890. /*********************************************
  891. * FALLBACK
  892. *********************************************/
  893. .no-transforms {
  894. overflow-y: auto;
  895. }
  896. .no-transforms .reveal .slides {
  897. position: relative;
  898. width: 80%;
  899. height: auto !important;
  900. top: 0;
  901. left: 50%;
  902. margin: 0;
  903. text-align: center;
  904. }
  905. .no-transforms .reveal .controls,
  906. .no-transforms .reveal .progress {
  907. display: none !important;
  908. }
  909. .no-transforms .reveal .slides section {
  910. display: block !important;
  911. opacity: 1 !important;
  912. position: relative !important;
  913. height: auto;
  914. min-height: 0;
  915. top: 0;
  916. left: -50%;
  917. margin: 70px 0;
  918. transform: none;
  919. }
  920. .no-transforms .reveal .slides section section {
  921. left: 0;
  922. }
  923. .reveal .no-transition,
  924. .reveal .no-transition * {
  925. transition: none !important;
  926. }
  927. /*********************************************
  928. * PER-SLIDE BACKGROUNDS
  929. *********************************************/
  930. .reveal .backgrounds {
  931. position: absolute;
  932. width: 100%;
  933. height: 100%;
  934. top: 0;
  935. left: 0;
  936. perspective: 600px;
  937. }
  938. .reveal .slide-background {
  939. display: none;
  940. position: absolute;
  941. width: 100%;
  942. height: 100%;
  943. opacity: 0;
  944. visibility: hidden;
  945. overflow: hidden;
  946. background-color: rgba( 0, 0, 0, 0 );
  947. transition: all 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
  948. }
  949. .reveal .slide-background-content {
  950. position: absolute;
  951. width: 100%;
  952. height: 100%;
  953. background-position: 50% 50%;
  954. background-repeat: no-repeat;
  955. background-size: cover;
  956. }
  957. .reveal .slide-background.stack {
  958. display: block;
  959. }
  960. .reveal .slide-background.present {
  961. opacity: 1;
  962. visibility: visible;
  963. z-index: 2;
  964. }
  965. .print-pdf .reveal .slide-background {
  966. opacity: 1 !important;
  967. visibility: visible !important;
  968. }
  969. /* Video backgrounds */
  970. .reveal .slide-background video {
  971. position: absolute;
  972. width: 100%;
  973. height: 100%;
  974. max-width: none;
  975. max-height: none;
  976. top: 0;
  977. left: 0;
  978. object-fit: cover;
  979. }
  980. .reveal .slide-background[data-background-size="contain"] video {
  981. object-fit: contain;
  982. }
  983. /* Immediate transition style */
  984. .reveal[data-background-transition=none]>.backgrounds .slide-background,
  985. .reveal>.backgrounds .slide-background[data-background-transition=none] {
  986. transition: none;
  987. }
  988. /* Slide */
  989. .reveal[data-background-transition=slide]>.backgrounds .slide-background,
  990. .reveal>.backgrounds .slide-background[data-background-transition=slide] {
  991. opacity: 1;
  992. backface-visibility: hidden;
  993. }
  994. .reveal[data-background-transition=slide]>.backgrounds .slide-background.past,
  995. .reveal>.backgrounds .slide-background.past[data-background-transition=slide] {
  996. transform: translate(-100%, 0);
  997. }
  998. .reveal[data-background-transition=slide]>.backgrounds .slide-background.future,
  999. .reveal>.backgrounds .slide-background.future[data-background-transition=slide] {
  1000. transform: translate(100%, 0);
  1001. }
  1002. .reveal[data-background-transition=slide]>.backgrounds .slide-background>.slide-background.past,
  1003. .reveal>.backgrounds .slide-background>.slide-background.past[data-background-transition=slide] {
  1004. transform: translate(0, -100%);
  1005. }
  1006. .reveal[data-background-transition=slide]>.backgrounds .slide-background>.slide-background.future,
  1007. .reveal>.backgrounds .slide-background>.slide-background.future[data-background-transition=slide] {
  1008. transform: translate(0, 100%);
  1009. }
  1010. /* Convex */
  1011. .reveal[data-background-transition=convex]>.backgrounds .slide-background.past,
  1012. .reveal>.backgrounds .slide-background.past[data-background-transition=convex] {
  1013. opacity: 0;
  1014. transform: translate3d(-100%, 0, 0) rotateY(-90deg) translate3d(-100%, 0, 0);
  1015. }
  1016. .reveal[data-background-transition=convex]>.backgrounds .slide-background.future,
  1017. .reveal>.backgrounds .slide-background.future[data-background-transition=convex] {
  1018. opacity: 0;
  1019. transform: translate3d(100%, 0, 0) rotateY(90deg) translate3d(100%, 0, 0);
  1020. }
  1021. .reveal[data-background-transition=convex]>.backgrounds .slide-background>.slide-background.past,
  1022. .reveal>.backgrounds .slide-background>.slide-background.past[data-background-transition=convex] {
  1023. opacity: 0;
  1024. transform: translate3d(0, -100%, 0) rotateX(90deg) translate3d(0, -100%, 0);
  1025. }
  1026. .reveal[data-background-transition=convex]>.backgrounds .slide-background>.slide-background.future,
  1027. .reveal>.backgrounds .slide-background>.slide-background.future[data-background-transition=convex] {
  1028. opacity: 0;
  1029. transform: translate3d(0, 100%, 0) rotateX(-90deg) translate3d(0, 100%, 0);
  1030. }
  1031. /* Concave */
  1032. .reveal[data-background-transition=concave]>.backgrounds .slide-background.past,
  1033. .reveal>.backgrounds .slide-background.past[data-background-transition=concave] {
  1034. opacity: 0;
  1035. transform: translate3d(-100%, 0, 0) rotateY(90deg) translate3d(-100%, 0, 0);
  1036. }
  1037. .reveal[data-background-transition=concave]>.backgrounds .slide-background.future,
  1038. .reveal>.backgrounds .slide-background.future[data-background-transition=concave] {
  1039. opacity: 0;
  1040. transform: translate3d(100%, 0, 0) rotateY(-90deg) translate3d(100%, 0, 0);
  1041. }
  1042. .reveal[data-background-transition=concave]>.backgrounds .slide-background>.slide-background.past,
  1043. .reveal>.backgrounds .slide-background>.slide-background.past[data-background-transition=concave] {
  1044. opacity: 0;
  1045. transform: translate3d(0, -100%, 0) rotateX(-90deg) translate3d(0, -100%, 0);
  1046. }
  1047. .reveal[data-background-transition=concave]>.backgrounds .slide-background>.slide-background.future,
  1048. .reveal>.backgrounds .slide-background>.slide-background.future[data-background-transition=concave] {
  1049. opacity: 0;
  1050. transform: translate3d(0, 100%, 0) rotateX(90deg) translate3d(0, 100%, 0);
  1051. }
  1052. /* Zoom */
  1053. .reveal[data-background-transition=zoom]>.backgrounds .slide-background,
  1054. .reveal>.backgrounds .slide-background[data-background-transition=zoom] {
  1055. transition-timing-function: ease;
  1056. }
  1057. .reveal[data-background-transition=zoom]>.backgrounds .slide-background.past,
  1058. .reveal>.backgrounds .slide-background.past[data-background-transition=zoom] {
  1059. opacity: 0;
  1060. visibility: hidden;
  1061. transform: scale(16);
  1062. }
  1063. .reveal[data-background-transition=zoom]>.backgrounds .slide-background.future,
  1064. .reveal>.backgrounds .slide-background.future[data-background-transition=zoom] {
  1065. opacity: 0;
  1066. visibility: hidden;
  1067. transform: scale(0.2);
  1068. }
  1069. .reveal[data-background-transition=zoom]>.backgrounds .slide-background>.slide-background.past,
  1070. .reveal>.backgrounds .slide-background>.slide-background.past[data-background-transition=zoom] {
  1071. opacity: 0;
  1072. visibility: hidden;
  1073. transform: scale(16);
  1074. }
  1075. .reveal[data-background-transition=zoom]>.backgrounds .slide-background>.slide-background.future,
  1076. .reveal>.backgrounds .slide-background>.slide-background.future[data-background-transition=zoom] {
  1077. opacity: 0;
  1078. visibility: hidden;
  1079. transform: scale(0.2);
  1080. }
  1081. /* Global transition speed settings */
  1082. .reveal[data-transition-speed="fast"]>.backgrounds .slide-background {
  1083. transition-duration: 400ms;
  1084. }
  1085. .reveal[data-transition-speed="slow"]>.backgrounds .slide-background {
  1086. transition-duration: 1200ms;
  1087. }
  1088. /*********************************************
  1089. * OVERVIEW
  1090. *********************************************/
  1091. .reveal.overview {
  1092. perspective-origin: 50% 50%;
  1093. perspective: 700px;
  1094. .slides {
  1095. // Fixes overview rendering errors in FF48+, not applied to
  1096. // other browsers since it degrades performance
  1097. -moz-transform-style: preserve-3d;
  1098. }
  1099. .slides section {
  1100. height: 100%;
  1101. top: 0 !important;
  1102. opacity: 1 !important;
  1103. overflow: hidden;
  1104. visibility: visible !important;
  1105. cursor: pointer;
  1106. box-sizing: border-box;
  1107. }
  1108. .slides section:hover,
  1109. .slides section.present {
  1110. outline: 10px solid rgba(150,150,150,0.4);
  1111. outline-offset: 10px;
  1112. }
  1113. .slides section .fragment {
  1114. opacity: 1;
  1115. transition: none;
  1116. }
  1117. .slides section:after,
  1118. .slides section:before {
  1119. display: none !important;
  1120. }
  1121. .slides>section.stack {
  1122. padding: 0;
  1123. top: 0 !important;
  1124. background: none;
  1125. outline: none;
  1126. overflow: visible;
  1127. }
  1128. .backgrounds {
  1129. perspective: inherit;
  1130. // Fixes overview rendering errors in FF48+, not applied to
  1131. // other browsers since it degrades performance
  1132. -moz-transform-style: preserve-3d;
  1133. }
  1134. .backgrounds .slide-background {
  1135. opacity: 1;
  1136. visibility: visible;
  1137. // This can't be applied to the slide itself in Safari
  1138. outline: 10px solid rgba(150,150,150,0.1);
  1139. outline-offset: 10px;
  1140. }
  1141. .backgrounds .slide-background.stack {
  1142. overflow: visible;
  1143. }
  1144. }
  1145. // Disable transitions transitions while we're activating
  1146. // or deactivating the overview mode.
  1147. .reveal.overview .slides section,
  1148. .reveal.overview-deactivating .slides section {
  1149. transition: none;
  1150. }
  1151. .reveal.overview .backgrounds .slide-background,
  1152. .reveal.overview-deactivating .backgrounds .slide-background {
  1153. transition: none;
  1154. }
  1155. /*********************************************
  1156. * RTL SUPPORT
  1157. *********************************************/
  1158. .reveal.rtl .slides,
  1159. .reveal.rtl .slides h1,
  1160. .reveal.rtl .slides h2,
  1161. .reveal.rtl .slides h3,
  1162. .reveal.rtl .slides h4,
  1163. .reveal.rtl .slides h5,
  1164. .reveal.rtl .slides h6 {
  1165. direction: rtl;
  1166. font-family: sans-serif;
  1167. }
  1168. .reveal.rtl pre,
  1169. .reveal.rtl code {
  1170. direction: ltr;
  1171. }
  1172. .reveal.rtl ol,
  1173. .reveal.rtl ul {
  1174. text-align: right;
  1175. }
  1176. .reveal.rtl .progress span {
  1177. float: right
  1178. }
  1179. /*********************************************
  1180. * PARALLAX BACKGROUND
  1181. *********************************************/
  1182. .reveal.has-parallax-background .backgrounds {
  1183. transition: all 0.8s ease;
  1184. }
  1185. /* Global transition speed settings */
  1186. .reveal.has-parallax-background[data-transition-speed="fast"] .backgrounds {
  1187. transition-duration: 400ms;
  1188. }
  1189. .reveal.has-parallax-background[data-transition-speed="slow"] .backgrounds {
  1190. transition-duration: 1200ms;
  1191. }
  1192. /*********************************************
  1193. * LINK PREVIEW OVERLAY
  1194. *********************************************/
  1195. .reveal .overlay {
  1196. position: absolute;
  1197. top: 0;
  1198. left: 0;
  1199. width: 100%;
  1200. height: 100%;
  1201. z-index: 1000;
  1202. background: rgba( 0, 0, 0, 0.9 );
  1203. opacity: 0;
  1204. visibility: hidden;
  1205. transition: all 0.3s ease;
  1206. }
  1207. .reveal .overlay.visible {
  1208. opacity: 1;
  1209. visibility: visible;
  1210. }
  1211. .reveal .overlay .spinner {
  1212. position: absolute;
  1213. display: block;
  1214. top: 50%;
  1215. left: 50%;
  1216. width: 32px;
  1217. height: 32px;
  1218. margin: -16px 0 0 -16px;
  1219. z-index: 10;
  1220. background-image: url(data:image/gif;base64,R0lGODlhIAAgAPMAAJmZmf%2F%2F%2F6%2Bvr8nJybW1tcDAwOjo6Nvb26ioqKOjo7Ozs%2FLy8vz8%2FAAAAAAAAAAAACH%2FC05FVFNDQVBFMi4wAwEAAAAh%2FhpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh%2BQQJCgAAACwAAAAAIAAgAAAE5xDISWlhperN52JLhSSdRgwVo1ICQZRUsiwHpTJT4iowNS8vyW2icCF6k8HMMBkCEDskxTBDAZwuAkkqIfxIQyhBQBFvAQSDITM5VDW6XNE4KagNh6Bgwe60smQUB3d4Rz1ZBApnFASDd0hihh12BkE9kjAJVlycXIg7CQIFA6SlnJ87paqbSKiKoqusnbMdmDC2tXQlkUhziYtyWTxIfy6BE8WJt5YJvpJivxNaGmLHT0VnOgSYf0dZXS7APdpB309RnHOG5gDqXGLDaC457D1zZ%2FV%2FnmOM82XiHRLYKhKP1oZmADdEAAAh%2BQQJCgAAACwAAAAAIAAgAAAE6hDISWlZpOrNp1lGNRSdRpDUolIGw5RUYhhHukqFu8DsrEyqnWThGvAmhVlteBvojpTDDBUEIFwMFBRAmBkSgOrBFZogCASwBDEY%2FCZSg7GSE0gSCjQBMVG023xWBhklAnoEdhQEfyNqMIcKjhRsjEdnezB%2BA4k8gTwJhFuiW4dokXiloUepBAp5qaKpp6%2BHo7aWW54wl7obvEe0kRuoplCGepwSx2jJvqHEmGt6whJpGpfJCHmOoNHKaHx61WiSR92E4lbFoq%2BB6QDtuetcaBPnW6%2BO7wDHpIiK9SaVK5GgV543tzjgGcghAgAh%2BQQJCgAAACwAAAAAIAAgAAAE7hDISSkxpOrN5zFHNWRdhSiVoVLHspRUMoyUakyEe8PTPCATW9A14E0UvuAKMNAZKYUZCiBMuBakSQKG8G2FzUWox2AUtAQFcBKlVQoLgQReZhQlCIJesQXI5B0CBnUMOxMCenoCfTCEWBsJColTMANldx15BGs8B5wlCZ9Po6OJkwmRpnqkqnuSrayqfKmqpLajoiW5HJq7FL1Gr2mMMcKUMIiJgIemy7xZtJsTmsM4xHiKv5KMCXqfyUCJEonXPN2rAOIAmsfB3uPoAK%2B%2BG%2Bw48edZPK%2BM6hLJpQg484enXIdQFSS1u6UhksENEQAAIfkECQoAAAAsAAAAACAAIAAABOcQyEmpGKLqzWcZRVUQnZYg1aBSh2GUVEIQ2aQOE%2BG%2BcD4ntpWkZQj1JIiZIogDFFyHI0UxQwFugMSOFIPJftfVAEoZLBbcLEFhlQiqGp1Vd140AUklUN3eCA51C1EWMzMCezCBBmkxVIVHBWd3HHl9JQOIJSdSnJ0TDKChCwUJjoWMPaGqDKannasMo6WnM562R5YluZRwur0wpgqZE7NKUm%2BFNRPIhjBJxKZteWuIBMN4zRMIVIhffcgojwCF117i4nlLnY5ztRLsnOk%2BaV%2BoJY7V7m76PdkS4trKcdg0Zc0tTcKkRAAAIfkECQoAAAAsAAAAACAAIAAABO4QyEkpKqjqzScpRaVkXZWQEximw1BSCUEIlDohrft6cpKCk5xid5MNJTaAIkekKGQkWyKHkvhKsR7ARmitkAYDYRIbUQRQjWBwJRzChi9CRlBcY1UN4g0%2FVNB0AlcvcAYHRyZPdEQFYV8ccwR5HWxEJ02YmRMLnJ1xCYp0Y5idpQuhopmmC2KgojKasUQDk5BNAwwMOh2RtRq5uQuPZKGIJQIGwAwGf6I0JXMpC8C7kXWDBINFMxS4DKMAWVWAGYsAdNqW5uaRxkSKJOZKaU3tPOBZ4DuK2LATgJhkPJMgTwKCdFjyPHEnKxFCDhEAACH5BAkKAAAALAAAAAAgACAAAATzEMhJaVKp6s2nIkolIJ2WkBShpkVRWqqQrhLSEu9MZJKK9y1ZrqYK9WiClmvoUaF8gIQSNeF1Er4MNFn4SRSDARWroAIETg1iVwuHjYB1kYc1mwruwXKC9gmsJXliGxc%2BXiUCby9ydh1sOSdMkpMTBpaXBzsfhoc5l58Gm5yToAaZhaOUqjkDgCWNHAULCwOLaTmzswadEqggQwgHuQsHIoZCHQMMQgQGubVEcxOPFAcMDAYUA85eWARmfSRQCdcMe0zeP1AAygwLlJtPNAAL19DARdPzBOWSm1brJBi45soRAWQAAkrQIykShQ9wVhHCwCQCACH5BAkKAAAALAAAAAAgACAAAATrEMhJaVKp6s2nIkqFZF2VIBWhUsJaTokqUCoBq%2BE71SRQeyqUToLA7VxF0JDyIQh%2FMVVPMt1ECZlfcjZJ9mIKoaTl1MRIl5o4CUKXOwmyrCInCKqcWtvadL2SYhyASyNDJ0uIiRMDjI0Fd30%2FiI2UA5GSS5UDj2l6NoqgOgN4gksEBgYFf0FDqKgHnyZ9OX8HrgYHdHpcHQULXAS2qKpENRg7eAMLC7kTBaixUYFkKAzWAAnLC7FLVxLWDBLKCwaKTULgEwbLA4hJtOkSBNqITT3xEgfLpBtzE%2FjiuL04RGEBgwWhShRgQExHBAAh%2BQQJCgAAACwAAAAAIAAgAAAE7xDISWlSqerNpyJKhWRdlSAVoVLCWk6JKlAqAavhO9UkUHsqlE6CwO1cRdCQ8iEIfzFVTzLdRAmZX3I2SfZiCqGk5dTESJeaOAlClzsJsqwiJwiqnFrb2nS9kmIcgEsjQydLiIlHehhpejaIjzh9eomSjZR%2BipslWIRLAgMDOR2DOqKogTB9pCUJBagDBXR6XB0EBkIIsaRsGGMMAxoDBgYHTKJiUYEGDAzHC9EACcUGkIgFzgwZ0QsSBcXHiQvOwgDdEwfFs0sDzt4S6BK4xYjkDOzn0unFeBzOBijIm1Dgmg5YFQwsCMjp1oJ8LyIAACH5BAkKAAAALAAAAAAgACAAAATwEMhJaVKp6s2nIkqFZF2VIBWhUsJaTokqUCoBq%2BE71SRQeyqUToLA7VxF0JDyIQh%2FMVVPMt1ECZlfcjZJ9mIKoaTl1MRIl5o4CUKXOwmyrCInCKqcWtvadL2SYhyASyNDJ0uIiUd6GGl6NoiPOH16iZKNlH6KmyWFOggHhEEvAwwMA0N9GBsEC6amhnVcEwavDAazGwIDaH1ipaYLBUTCGgQDA8NdHz0FpqgTBwsLqAbWAAnIA4FWKdMLGdYGEgraigbT0OITBcg5QwPT4xLrROZL6AuQAPUS7bxLpoWidY0JtxLHKhwwMJBTHgPKdEQAACH5BAkKAAAALAAAAAAgACAAAATrEMhJaVKp6s2nIkqFZF2VIBWhUsJaTokqUCoBq%2BE71SRQeyqUToLA7VxF0JDyIQh%2FMVVPMt1ECZlfcjZJ9mIKoaTl1MRIl5o4CUKXOwmyrCInCKqcWtvadL2SYhyASyNDJ0uIiUd6GAULDJCRiXo1CpGXDJOUjY%2BYip9DhToJA4RBLwMLCwVDfRgbBAaqqoZ1XBMHswsHtxtFaH1iqaoGNgAIxRpbFAgfPQSqpbgGBqUD1wBXeCYp1AYZ19JJOYgH1KwA4UBvQwXUBxPqVD9L3sbp2BNk2xvvFPJd%2BMFCN6HAAIKgNggY0KtEBAAh%2BQQJCgAAACwAAAAAIAAgAAAE6BDISWlSqerNpyJKhWRdlSAVoVLCWk6JKlAqAavhO9UkUHsqlE6CwO1cRdCQ8iEIfzFVTzLdRAmZX3I2SfYIDMaAFdTESJeaEDAIMxYFqrOUaNW4E4ObYcCXaiBVEgULe0NJaxxtYksjh2NLkZISgDgJhHthkpU4mW6blRiYmZOlh4JWkDqILwUGBnE6TYEbCgevr0N1gH4At7gHiRpFaLNrrq8HNgAJA70AWxQIH1%2BvsYMDAzZQPC9VCNkDWUhGkuE5PxJNwiUK4UfLzOlD4WvzAHaoG9nxPi5d%2BjYUqfAhhykOFwJWiAAAIfkECQoAAAAsAAAAACAAIAAABPAQyElpUqnqzaciSoVkXVUMFaFSwlpOCcMYlErAavhOMnNLNo8KsZsMZItJEIDIFSkLGQoQTNhIsFehRww2CQLKF0tYGKYSg%2BygsZIuNqJksKgbfgIGepNo2cIUB3V1B3IvNiBYNQaDSTtfhhx0CwVPI0UJe0%2Bbm4g5VgcGoqOcnjmjqDSdnhgEoamcsZuXO1aWQy8KAwOAuTYYGwi7w5h%2BKr0SJ8MFihpNbx%2B4Erq7BYBuzsdiH1jCAzoSfl0rVirNbRXlBBlLX%2BBP0XJLAPGzTkAuAOqb0WT5AH7OcdCm5B8TgRwSRKIHQtaLCwg1RAAAOwAAAAAAAAAAAA%3D%3D);
  1221. visibility: visible;
  1222. opacity: 0.6;
  1223. transition: all 0.3s ease;
  1224. }
  1225. .reveal .overlay header {
  1226. position: absolute;
  1227. left: 0;
  1228. top: 0;
  1229. width: 100%;
  1230. height: 40px;
  1231. z-index: 2;
  1232. border-bottom: 1px solid #222;
  1233. }
  1234. .reveal .overlay header a {
  1235. display: inline-block;
  1236. width: 40px;
  1237. height: 40px;
  1238. line-height: 36px;
  1239. padding: 0 10px;
  1240. float: right;
  1241. opacity: 0.6;
  1242. box-sizing: border-box;
  1243. }
  1244. .reveal .overlay header a:hover {
  1245. opacity: 1;
  1246. }
  1247. .reveal .overlay header a .icon {
  1248. display: inline-block;
  1249. width: 20px;
  1250. height: 20px;
  1251. background-position: 50% 50%;
  1252. background-size: 100%;
  1253. background-repeat: no-repeat;
  1254. }
  1255. .reveal .overlay header a.close .icon {
  1256. background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAABkklEQVRYR8WX4VHDMAxG6wnoJrABZQPYBCaBTWAD2g1gE5gg6OOsXuxIlr40d81dfrSJ9V4c2VLK7spHuTJ/5wpM07QXuXc5X0opX2tEJcadjHuV80li/FgxTIEK/5QBCICBD6xEhSMGHgQPgBgLiYVAB1dpSqKDawxTohFw4JSEA3clzgIBPCURwE2JucBR7rhPJJv5OpJwDX+SfDjgx1wACQeJG1aChP9K/IMmdZ8DtESV1WyP3Bt4MwM6sj4NMxMYiqUWHQu4KYA/SYkIjOsm3BXYWMKFDwU2khjCQ4ELJUJ4SmClRArOCmSXGuKma0fYD5CbzHxFpCSGAhfAVSSUGDUk2BWZaff2g6GE15BsBQ9nwmpIGDiyHQddwNTMKkbZaf9fajXQca1EX44puJZUsnY0ObGmITE3GVLCbEhQUjGVt146j6oasWN+49Vph2w1pZ5EansNZqKBm1txbU57iRRcZ86RWMDdWtBJUHBHwoQPi1GV+JCbntmvok7iTX4/Up9mgyTc/FJYDTcndgH/AA5A/CHsyEkVAAAAAElFTkSuQmCC);
  1257. }
  1258. .reveal .overlay header a.external .icon {
  1259. background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAcElEQVRYR+2WSQoAIQwEzf8f7XiOMkUQxUPlGkM3hVmiQfQR9GYnH1SsAQlI4DiBqkCMoNb9y2e90IAEJPAcgdznU9+engMaeJ7Azh5Y1U67gAho4DqBqmB1buAf0MB1AlVBek83ZPkmJMGc1wAR+AAqod/B97TRpQAAAABJRU5ErkJggg==);
  1260. }
  1261. .reveal .overlay .viewport {
  1262. position: absolute;
  1263. display: flex;
  1264. top: 40px;
  1265. right: 0;
  1266. bottom: 0;
  1267. left: 0;
  1268. }
  1269. .reveal .overlay.overlay-preview .viewport iframe {
  1270. width: 100%;
  1271. height: 100%;
  1272. max-width: 100%;
  1273. max-height: 100%;
  1274. border: 0;
  1275. opacity: 0;
  1276. visibility: hidden;
  1277. transition: all 0.3s ease;
  1278. }
  1279. .reveal .overlay.overlay-preview.loaded .viewport iframe {
  1280. opacity: 1;
  1281. visibility: visible;
  1282. }
  1283. .reveal .overlay.overlay-preview.loaded .viewport-inner {
  1284. position: absolute;
  1285. z-index: -1;
  1286. left: 0;
  1287. top: 45%;
  1288. width: 100%;
  1289. text-align: center;
  1290. letter-spacing: normal;
  1291. }
  1292. .reveal .overlay.overlay-preview .x-frame-error {
  1293. opacity: 0;
  1294. transition: opacity 0.3s ease 0.3s;
  1295. }
  1296. .reveal .overlay.overlay-preview.loaded .x-frame-error {
  1297. opacity: 1;
  1298. }
  1299. .reveal .overlay.overlay-preview.loaded .spinner {
  1300. opacity: 0;
  1301. visibility: hidden;
  1302. transform: scale(0.2);
  1303. }
  1304. .reveal .overlay.overlay-help .viewport {
  1305. overflow: auto;
  1306. color: #fff;
  1307. }
  1308. .reveal .overlay.overlay-help .viewport .viewport-inner {
  1309. width: 600px;
  1310. margin: auto;
  1311. padding: 20px 20px 80px 20px;
  1312. text-align: center;
  1313. letter-spacing: normal;
  1314. }
  1315. .reveal .overlay.overlay-help .viewport .viewport-inner .title {
  1316. font-size: 20px;
  1317. }
  1318. .reveal .overlay.overlay-help .viewport .viewport-inner table {
  1319. border: 1px solid #fff;
  1320. border-collapse: collapse;
  1321. font-size: 16px;
  1322. }
  1323. .reveal .overlay.overlay-help .viewport .viewport-inner table th,
  1324. .reveal .overlay.overlay-help .viewport .viewport-inner table td {
  1325. width: 200px;
  1326. padding: 14px;
  1327. border: 1px solid #fff;
  1328. vertical-align: middle;
  1329. }
  1330. .reveal .overlay.overlay-help .viewport .viewport-inner table th {
  1331. padding-top: 20px;
  1332. padding-bottom: 20px;
  1333. }
  1334. /*********************************************
  1335. * PLAYBACK COMPONENT
  1336. *********************************************/
  1337. .reveal .playback {
  1338. position: absolute;
  1339. left: 15px;
  1340. bottom: 20px;
  1341. z-index: 30;
  1342. cursor: pointer;
  1343. transition: all 400ms ease;
  1344. -webkit-tap-highlight-color: rgba( 0, 0, 0, 0 );
  1345. }
  1346. .reveal.overview .playback {
  1347. opacity: 0;
  1348. visibility: hidden;
  1349. }
  1350. /*********************************************
  1351. * ROLLING LINKS
  1352. *********************************************/
  1353. .reveal .roll {
  1354. display: inline-block;
  1355. line-height: 1.2;
  1356. overflow: hidden;
  1357. vertical-align: top;
  1358. perspective: 400px;
  1359. perspective-origin: 50% 50%;
  1360. }
  1361. .reveal .roll:hover {
  1362. background: none;
  1363. text-shadow: none;
  1364. }
  1365. .reveal .roll span {
  1366. display: block;
  1367. position: relative;
  1368. padding: 0 2px;
  1369. pointer-events: none;
  1370. transition: all 400ms ease;
  1371. transform-origin: 50% 0%;
  1372. transform-style: preserve-3d;
  1373. backface-visibility: hidden;
  1374. }
  1375. .reveal .roll:hover span {
  1376. background: rgba(0,0,0,0.5);
  1377. transform: translate3d( 0px, 0px, -45px ) rotateX( 90deg );
  1378. }
  1379. .reveal .roll span:after {
  1380. content: attr(data-title);
  1381. display: block;
  1382. position: absolute;
  1383. left: 0;
  1384. top: 0;
  1385. padding: 0 2px;
  1386. backface-visibility: hidden;
  1387. transform-origin: 50% 0%;
  1388. transform: translate3d( 0px, 110%, 0px ) rotateX( -90deg );
  1389. }
  1390. /*********************************************
  1391. * SPEAKER NOTES
  1392. *********************************************/
  1393. // Hide on-page notes
  1394. .reveal aside.notes {
  1395. display: none;
  1396. }
  1397. // An interface element that can optionally be used to show the
  1398. // speaker notes to all viewers, on top of the presentation
  1399. .reveal .speaker-notes {
  1400. display: none;
  1401. position: absolute;
  1402. width: 25vw;
  1403. height: 100%;
  1404. top: 0;
  1405. left: 100%;
  1406. padding: 14px 18px 14px 18px;
  1407. z-index: 1;
  1408. font-size: 18px;
  1409. line-height: 1.4;
  1410. border: 1px solid rgba( 0, 0, 0, 0.05 );
  1411. color: #222;
  1412. background-color: #f5f5f5;
  1413. overflow: auto;
  1414. box-sizing: border-box;
  1415. text-align: left;
  1416. font-family: Helvetica, sans-serif;
  1417. -webkit-overflow-scrolling: touch;
  1418. .notes-placeholder {
  1419. color: #ccc;
  1420. font-style: italic;
  1421. }
  1422. &:focus {
  1423. outline: none;
  1424. }
  1425. &:before {
  1426. content: 'Speaker notes';
  1427. display: block;
  1428. margin-bottom: 10px;
  1429. opacity: 0.5;
  1430. }
  1431. }
  1432. .reveal.show-notes {
  1433. max-width: 75vw;
  1434. overflow: visible;
  1435. }
  1436. .reveal.show-notes .speaker-notes {
  1437. display: block;
  1438. }
  1439. @media screen and (min-width: 1600px) {
  1440. .reveal .speaker-notes {
  1441. font-size: 20px;
  1442. }
  1443. }
  1444. @media screen and (max-width: 1024px) {
  1445. .reveal.show-notes {
  1446. border-left: 0;
  1447. max-width: none;
  1448. max-height: 70%;
  1449. overflow: visible;
  1450. }
  1451. .reveal.show-notes .speaker-notes {
  1452. top: 100%;
  1453. left: 0;
  1454. width: 100%;
  1455. height: (30/0.7)*1%;
  1456. }
  1457. }
  1458. @media screen and (max-width: 600px) {
  1459. .reveal.show-notes {
  1460. max-height: 60%;
  1461. }
  1462. .reveal.show-notes .speaker-notes {
  1463. top: 100%;
  1464. height: (40/0.6)*1%;
  1465. }
  1466. .reveal .speaker-notes {
  1467. font-size: 14px;
  1468. }
  1469. }
  1470. /*********************************************
  1471. * ZOOM PLUGIN
  1472. *********************************************/
  1473. .zoomed .reveal *,
  1474. .zoomed .reveal *:before,
  1475. .zoomed .reveal *:after {
  1476. backface-visibility: visible !important;
  1477. }
  1478. .zoomed .reveal .progress,
  1479. .zoomed .reveal .controls {
  1480. opacity: 0;
  1481. }
  1482. .zoomed .reveal .roll span {
  1483. background: none;
  1484. }
  1485. .zoomed .reveal .roll span:after {
  1486. visibility: hidden;
  1487. }