kmaull
/
talk_2016_may19_datapalooza_yourdataasaservice
1
0
Разклонения 0
Код Задачи 0 Заявки за сливане 0 Версии 0 Уики Activity
Talk given at Datapalooza Denver 2016 titled "(Your) Data as a Service: The Easy Way to Build an API for Your Data".
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
9 Ревизии
1 Клон
3.7 MiB
 
 
 
 
 
ИН на ревизия: f8cadbad15
Клонове Маркери
${ item.name }
Create branch ${ searchTerm }
от 'f8cadbad15'
${ noResults }
talk_2016_may19_datapalooza.../slides/reveal/css/reveal.scss

1412 lines
36 KiB
Директен файл Blame История 

  1. /*!

  2.  * reveal.js

  3.  * http://lab.hakim.se/reveal-js

  4.  * MIT licensed

  5.  *

  6.  * Copyright (C) 2016 Hakim El Hattab, http://hakim.se

  7.  */

  8. 

  9. 

  10. /*********************************************

  11.  * RESET STYLES

  12.  *********************************************/

  13. 

  14. html, body, .reveal div, .reveal span, .reveal applet, .reveal object, .reveal iframe,

  15. .reveal h1, .reveal h2, .reveal h3, .reveal h4, .reveal h5, .reveal h6, .reveal p, .reveal blockquote, .reveal pre,

  16. .reveal a, .reveal abbr, .reveal acronym, .reveal address, .reveal big, .reveal cite, .reveal code,

  17. .reveal del, .reveal dfn, .reveal em, .reveal img, .reveal ins, .reveal kbd, .reveal q, .reveal s, .reveal samp,

  18. .reveal small, .reveal strike, .reveal strong, .reveal sub, .reveal sup, .reveal tt, .reveal var,

  19. .reveal b, .reveal u, .reveal center,

  20. .reveal dl, .reveal dt, .reveal dd, .reveal ol, .reveal ul, .reveal li,

  21. .reveal fieldset, .reveal form, .reveal label, .reveal legend,

  22. .reveal table, .reveal caption, .reveal tbody, .reveal tfoot, .reveal thead, .reveal tr, .reveal th, .reveal td,

  23. .reveal article, .reveal aside, .reveal canvas, .reveal details, .reveal embed,

  24. .reveal figure, .reveal figcaption, .reveal footer, .reveal header, .reveal hgroup,

  25. .reveal menu, .reveal nav, .reveal output, .reveal ruby, .reveal section, .reveal summary,

  26. .reveal time, .reveal mark, .reveal audio, .reveal video {

  27. 	margin: 0;

  28. 	padding: 0;

  29. 	border: 0;

  30. 	font-size: 100%;

  31. 	font: inherit;

  32. 	vertical-align: baseline;

  33. }

  34. 

  35. .reveal article, .reveal aside, .reveal details, .reveal figcaption, .reveal figure,

  36. .reveal footer, .reveal header, .reveal hgroup, .reveal menu, .reveal nav, .reveal section {

  37. 	display: block;

  38. }

  39. 

  40. 

  41. /*********************************************

  42.  * GLOBAL STYLES

  43.  *********************************************/

  44. 

  45. html,

  46. body {

  47. 	width: 100%;

  48. 	height: 100%;

  49. 	overflow: hidden;

  50. }

  51. 

  52. body {

  53. 	position: relative;

  54. 	line-height: 1;

  55. 

  56. 	background-color: #fff;

  57. 	color: #000;

  58. }

  59. 

  60. // Ensures that the main background color matches the

  61. // theme in fullscreen mode

  62. html:-webkit-full-screen-ancestor {

  63. 	background-color: inherit;

  64. }

  65. html:-moz-full-screen-ancestor {

  66. 	background-color: inherit;

  67. }

  68. 

  69. 

  70. /*********************************************

  71.  * VIEW FRAGMENTS

  72.  *********************************************/

  73. 

  74. .reveal .slides section .fragment {

  75. 	opacity: 0;

  76. 	visibility: hidden;

  77. 	transition: all .2s ease;

  78. 

  79. 	&.visible {

  80. 		opacity: 1;

  81. 		visibility: visible;

  82. 	}

  83. }

  84. 

  85. .reveal .slides section .fragment.grow {

  86. 	opacity: 1;

  87. 	visibility: visible;

  88. 

  89. 	&.visible {

  90. 		transform: scale( 1.3 );

  91. 	}

  92. }

  93. 

  94. .reveal .slides section .fragment.shrink {

  95. 	opacity: 1;

  96. 	visibility: visible;

  97. 

  98. 	&.visible {

  99. 		transform: scale( 0.7 );

  100. 	}

  101. }

  102. 

  103. .reveal .slides section .fragment.zoom-in {

  104. 	transform: scale( 0.1 );

  105. 

  106. 	&.visible {

  107. 		transform: none;

  108. 	}

  109. }

  110. 

  111. .reveal .slides section .fragment.fade-out {

  112. 	opacity: 1;

  113. 	visibility: visible;

  114. 

  115. 	&.visible {

  116. 		opacity: 0;

  117. 		visibility: hidden;

  118. 	}

  119. }

  120. 

  121. .reveal .slides section .fragment.semi-fade-out {

  122. 	opacity: 1;

  123. 	visibility: visible;

  124. 

  125. 	&.visible {

  126. 		opacity: 0.5;

  127. 		visibility: visible;

  128. 	}

  129. }

  130. 

  131. .reveal .slides section .fragment.strike {

  132. 	opacity: 1;

  133. 	visibility: visible;

  134. 

  135. 	&.visible {

  136. 		text-decoration: line-through;

  137. 	}

  138. }

  139. 

  140. .reveal .slides section .fragment.fade-up {

  141. 	transform: translate(0, 20%);

  142. 

  143. 	&.visible {

  144. 		transform: translate(0, 0);

  145. 	}

  146. }

  147. 

  148. .reveal .slides section .fragment.fade-down {

  149. 	transform: translate(0, -20%);

  150. 

  151. 	&.visible {

  152. 		transform: translate(0, 0);

  153. 	}

  154. }

  155. 

  156. .reveal .slides section .fragment.fade-right {

  157. 	transform: translate(-20%, 0);

  158. 

  159. 	&.visible {

  160. 		transform: translate(0, 0);

  161. 	}

  162. }

  163. 

  164. .reveal .slides section .fragment.fade-left {

  165. 	transform: translate(20%, 0);

  166. 

  167. 	&.visible {

  168. 		transform: translate(0, 0);

  169. 	}

  170. }

  171. 

  172. .reveal .slides section .fragment.current-visible {

  173. 	opacity: 0;

  174. 	visibility: hidden;

  175. 

  176. 	&.current-fragment {

  177. 		opacity: 1;

  178. 		visibility: visible;

  179. 	}

  180. }

  181. 

  182. .reveal .slides section .fragment.highlight-red,

  183. .reveal .slides section .fragment.highlight-current-red,

  184. .reveal .slides section .fragment.highlight-green,

  185. .reveal .slides section .fragment.highlight-current-green,

  186. .reveal .slides section .fragment.highlight-blue,

  187. .reveal .slides section .fragment.highlight-current-blue {

  188. 	opacity: 1;

  189. 	visibility: visible;

  190. }

  191. 	.reveal .slides section .fragment.highlight-red.visible {

  192. 		color: #ff2c2d

  193. 	}

  194. 	.reveal .slides section .fragment.highlight-green.visible {

  195. 		color: #17ff2e;

  196. 	}

  197. 	.reveal .slides section .fragment.highlight-blue.visible {

  198. 		color: #1b91ff;

  199. 	}

  200. 

  201. .reveal .slides section .fragment.highlight-current-red.current-fragment {

  202. 	color: #ff2c2d

  203. }

  204. .reveal .slides section .fragment.highlight-current-green.current-fragment {

  205. 	color: #17ff2e;

  206. }

  207. .reveal .slides section .fragment.highlight-current-blue.current-fragment {

  208. 	color: #1b91ff;

  209. }

  210. 

  211. 

  212. /*********************************************

  213.  * DEFAULT ELEMENT STYLES

  214.  *********************************************/

  215. 

  216. /* Fixes issue in Chrome where italic fonts did not appear when printing to PDF */

  217. .reveal:after {

  218.   content: '';

  219.   font-style: italic;

  220. }

  221. 

  222. .reveal iframe {

  223. 	z-index: 1;

  224. }

  225. 

  226. /** Prevents layering issues in certain browser/transition combinations */

  227. .reveal a {

  228. 	position: relative;

  229. }

  230. 

  231. .reveal .stretch {

  232. 	max-width: none;

  233. 	max-height: none;

  234. }

  235. 

  236. .reveal pre.stretch code {

  237. 	height: 100%;

  238. 	max-height: 100%;

  239. 	box-sizing: border-box;

  240. }

  241. 

  242. 

  243. /*********************************************

  244.  * CONTROLS

  245.  *********************************************/

  246. 

  247. .reveal .controls {

  248. 	display: none;

  249. 	position: fixed;

  250. 	width: 110px;

  251. 	height: 110px;

  252. 	z-index: 30;

  253. 	right: 10px;

  254. 	bottom: 10px;

  255. 

  256. 	-webkit-user-select: none;

  257. }

  258. 

  259. .reveal .controls button {

  260. 	padding: 0;

  261. 	position: absolute;

  262. 	opacity: 0.05;

  263. 	width: 0;

  264. 	height: 0;

  265. 	background-color: transparent;

  266. 	border: 12px solid transparent;

  267. 	transform: scale(.9999);

  268. 	transition: all 0.2s ease;

  269. 	-webkit-appearance: none;

  270. 	-webkit-tap-highlight-color: rgba( 0, 0, 0, 0 );

  271. }

  272. 

  273. .reveal .controls .enabled {

  274. 	opacity: 0.7;

  275. 	cursor: pointer;

  276. }

  277. 

  278. .reveal .controls .enabled:active {

  279. 	margin-top: 1px;

  280. }

  281. 

  282. 	.reveal .controls .navigate-left {

  283. 		top: 42px;

  284. 

  285. 		border-right-width: 22px;

  286. 		border-right-color: #000;

  287. 	}

  288. 		.reveal .controls .navigate-left.fragmented {

  289. 			opacity: 0.3;

  290. 		}

  291. 

  292. 	.reveal .controls .navigate-right {

  293. 		left: 74px;

  294. 		top: 42px;

  295. 

  296. 		border-left-width: 22px;

  297. 		border-left-color: #000;

  298. 	}

  299. 		.reveal .controls .navigate-right.fragmented {

  300. 			opacity: 0.3;

  301. 		}

  302. 

  303. 	.reveal .controls .navigate-up {

  304. 		left: 42px;

  305. 

  306. 		border-bottom-width: 22px;

  307. 		border-bottom-color: #000;

  308. 	}

  309. 		.reveal .controls .navigate-up.fragmented {

  310. 			opacity: 0.3;

  311. 		}

  312. 

  313. 	.reveal .controls .navigate-down {

  314. 		left: 42px;

  315. 		top: 74px;

  316. 

  317. 		border-top-width: 22px;

  318. 		border-top-color: #000;

  319. 	}

  320. 		.reveal .controls .navigate-down.fragmented {

  321. 			opacity: 0.3;

  322. 		}

  323. 

  324. 

  325. /*********************************************

  326.  * PROGRESS BAR

  327.  *********************************************/

  328. 

  329. .reveal .progress {

  330. 	position: fixed;

  331. 	display: none;

  332. 	height: 3px;

  333. 	width: 100%;

  334. 	bottom: 0;

  335. 	left: 0;

  336. 	z-index: 10;

  337. 

  338. 	background-color: rgba( 0, 0, 0, 0.2 );

  339. }

  340. 	.reveal .progress:after {

  341. 		content: '';

  342. 		display: block;

  343. 		position: absolute;

  344. 		height: 20px;

  345. 		width: 100%;

  346. 		top: -20px;

  347. 	}

  348. 	.reveal .progress span {

  349. 		display: block;

  350. 		height: 100%;

  351. 		width: 0px;

  352. 

  353. 		background-color: #000;

  354. 		transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);

  355. 	}

  356. 

  357. /*********************************************

  358.  * SLIDE NUMBER

  359.  *********************************************/

  360. 

  361. .reveal .slide-number {

  362. 	position: fixed;

  363. 	display: block;

  364. 	right: 8px;

  365. 	bottom: 8px;

  366. 	z-index: 31;

  367. 	font-family: Helvetica, sans-serif;

  368. 	font-size: 12px;

  369. 	line-height: 1;

  370. 	color: #fff;

  371. 	background-color: rgba( 0, 0, 0, 0.4 );

  372. 	padding: 5px;

  373. }

  374. 

  375. .reveal .slide-number-delimiter {

  376. 	margin: 0 3px;

  377. }

  378. 

  379. /*********************************************

  380.  * SLIDES

  381.  *********************************************/

  382. 

  383. .reveal {

  384. 	position: relative;

  385. 	width: 100%;

  386. 	height: 100%;

  387. 	overflow: hidden;

  388. 	touch-action: none;

  389. }

  390. 

  391. .reveal .slides {

  392. 	position: absolute;

  393. 	width: 100%;

  394. 	height: 100%;

  395. 	top: 0;

  396. 	right: 0;

  397. 	bottom: 0;

  398. 	left: 0;

  399. 	margin: auto;

  400. 

  401. 	overflow: visible;

  402. 	z-index: 1;

  403. 	text-align: center;

  404. 	perspective: 600px;

  405. 	perspective-origin: 50% 40%;

  406. }

  407. 

  408. .reveal .slides>section {

  409. 	-ms-perspective: 600px;

  410. }

  411. 

  412. .reveal .slides>section,

  413. .reveal .slides>section>section {

  414. 	display: none;

  415. 	position: absolute;

  416. 	width: 100%;

  417. 	padding: 20px 0px;

  418. 

  419. 	z-index: 10;

  420. 	transform-style: preserve-3d;

  421. 	transition: transform-origin 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985),

  422. 				transform 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985),

  423. 				visibility 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985),

  424. 				opacity 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);

  425. }

  426. 

  427. /* Global transition speed settings */

  428. .reveal[data-transition-speed="fast"] .slides section {

  429. 	transition-duration: 400ms;

  430. }

  431. .reveal[data-transition-speed="slow"] .slides section {

  432. 	transition-duration: 1200ms;

  433. }

  434. 

  435. /* Slide-specific transition speed overrides */

  436. .reveal .slides section[data-transition-speed="fast"] {

  437. 	transition-duration: 400ms;

  438. }

  439. .reveal .slides section[data-transition-speed="slow"] {

  440. 	transition-duration: 1200ms;

  441. }

  442. 

  443. .reveal .slides>section.stack {

  444. 	padding-top: 0;

  445. 	padding-bottom: 0;

  446. }

  447. 

  448. .reveal .slides>section.present,

  449. .reveal .slides>section>section.present {

  450. 	display: block;

  451. 	z-index: 11;

  452. 	opacity: 1;

  453. }

  454. 

  455. .reveal.center,

  456. .reveal.center .slides,

  457. .reveal.center .slides section {

  458. 	min-height: 0 !important;

  459. }

  460. 

  461. /* Don't allow interaction with invisible slides */

  462. .reveal .slides>section.future,

  463. .reveal .slides>section>section.future,

  464. .reveal .slides>section.past,

  465. .reveal .slides>section>section.past {

  466. 	pointer-events: none;

  467. }

  468. 

  469. .reveal.overview .slides>section,

  470. .reveal.overview .slides>section>section {

  471. 	pointer-events: auto;

  472. }

  473. 

  474. .reveal .slides>section.past,

  475. .reveal .slides>section.future,

  476. .reveal .slides>section>section.past,

  477. .reveal .slides>section>section.future {

  478. 	opacity: 0;

  479. }

  480. 

  481. 

  482. /*********************************************

  483.  * Mixins for readability of transitions

  484.  *********************************************/

  485. 

  486. @mixin transition-global($style) {

  487. 	.reveal .slides section[data-transition=#{$style}],

  488. 	.reveal.#{$style} .slides section:not([data-transition]) {

  489. 		@content;

  490. 	}

  491. }

  492. @mixin transition-horizontal-past($style) {

  493. 	.reveal .slides>section[data-transition=#{$style}].past,

  494. 	.reveal .slides>section[data-transition~=#{$style}-out].past,

  495. 	.reveal.#{$style} .slides>section:not([data-transition]).past {

  496. 		@content;

  497. 	}

  498. }

  499. @mixin transition-horizontal-future($style) {

  500. 	.reveal .slides>section[data-transition=#{$style}].future,

  501. 	.reveal .slides>section[data-transition~=#{$style}-in].future,

  502. 	.reveal.#{$style} .slides>section:not([data-transition]).future {

  503. 		@content;

  504. 	}

  505. }

  506. 

  507. @mixin transition-vertical-past($style) {

  508. 	.reveal .slides>section>section[data-transition=#{$style}].past,

  509. 	.reveal .slides>section>section[data-transition~=#{$style}-out].past,

  510. 	.reveal.#{$style} .slides>section>section:not([data-transition]).past {

  511. 		@content;

  512. 	}

  513. }

  514. @mixin transition-vertical-future($style) {

  515. 	.reveal .slides>section>section[data-transition=#{$style}].future,

  516. 	.reveal .slides>section>section[data-transition~=#{$style}-in].future,

  517. 	.reveal.#{$style} .slides>section>section:not([data-transition]).future {

  518. 		@content;

  519. 	}

  520. }

  521. 

  522. /*********************************************

  523.  * SLIDE TRANSITION

  524.  * Aliased 'linear' for backwards compatibility

  525.  *********************************************/

  526. 

  527. @each $stylename in slide, linear {

  528. 	.reveal.#{$stylename} section {

  529. 		backface-visibility: hidden;

  530. 	}

  531. 	@include transition-horizontal-past(#{$stylename}) {

  532. 		transform: translate(-150%, 0);

  533. 	}

  534. 	@include transition-horizontal-future(#{$stylename}) {

  535. 		transform: translate(150%, 0);

  536. 	}

  537. 	@include transition-vertical-past(#{$stylename}) {

  538. 		transform: translate(0, -150%);

  539. 	}

  540. 	@include transition-vertical-future(#{$stylename}) {

  541. 		transform: translate(0, 150%);

  542. 	}

  543. }

  544. 

  545. /*********************************************

  546.  * CONVEX TRANSITION

  547.  * Aliased 'default' for backwards compatibility

  548.  *********************************************/

  549. 

  550. @each $stylename in default, convex {

  551. 	@include transition-horizontal-past(#{$stylename}) {

  552. 		transform: translate3d(-100%, 0, 0) rotateY(-90deg) translate3d(-100%, 0, 0);

  553. 	}

  554. 	@include transition-horizontal-future(#{$stylename}) {

  555. 		transform: translate3d(100%, 0, 0) rotateY(90deg) translate3d(100%, 0, 0);

  556. 	}

  557. 	@include transition-vertical-past(#{$stylename}) {

  558. 		transform: translate3d(0, -300px, 0) rotateX(70deg) translate3d(0, -300px, 0);

  559. 	}

  560. 	@include transition-vertical-future(#{$stylename}) {

  561. 		transform: translate3d(0, 300px, 0) rotateX(-70deg) translate3d(0, 300px, 0);

  562. 	}

  563. }

  564. 

  565. /*********************************************

  566.  * CONCAVE TRANSITION

  567.  *********************************************/

  568. 

  569. @include transition-horizontal-past(concave) {

  570. 	transform: translate3d(-100%, 0, 0) rotateY(90deg) translate3d(-100%, 0, 0);

  571. }

  572. @include transition-horizontal-future(concave) {

  573. 	transform: translate3d(100%, 0, 0) rotateY(-90deg) translate3d(100%, 0, 0);

  574. }

  575. @include transition-vertical-past(concave) {

  576. 	transform: translate3d(0, -80%, 0) rotateX(-70deg) translate3d(0, -80%, 0);

  577. }

  578. @include transition-vertical-future(concave) {

  579. 	transform: translate3d(0, 80%, 0) rotateX(70deg) translate3d(0, 80%, 0);

  580. }

  581. 

  582. 

  583. /*********************************************

  584.  * ZOOM TRANSITION

  585.  *********************************************/

  586. 

  587. @include transition-global(zoom) {

  588. 	transition-timing-function: ease;

  589. }

  590. @include transition-horizontal-past(zoom) {

  591. 	visibility: hidden;

  592. 	transform: scale(16);

  593. }

  594. @include transition-horizontal-future(zoom) {

  595. 	visibility: hidden;

  596. 	transform: scale(0.2);

  597. }

  598. @include transition-vertical-past(zoom) {

  599. 	transform: translate(0, -150%);

  600. }

  601. @include transition-vertical-future(zoom) {

  602. 	transform: translate(0, 150%);

  603. }

  604. 

  605. 

  606. /*********************************************

  607.  * CUBE TRANSITION

  608.  *********************************************/

  609. 

  610. .reveal.cube .slides {

  611. 	perspective: 1300px;

  612. }

  613. 

  614. .reveal.cube .slides section {

  615. 	padding: 30px;

  616. 	min-height: 700px;

  617. 	backface-visibility: hidden;

  618. 	box-sizing: border-box;

  619. }

  620. 	.reveal.center.cube .slides section {

  621. 		min-height: 0;

  622. 	}

  623. 	.reveal.cube .slides section:not(.stack):before {

  624. 		content: '';

  625. 		position: absolute;

  626. 		display: block;

  627. 		width: 100%;

  628. 		height: 100%;

  629. 		left: 0;

  630. 		top: 0;

  631. 		background: rgba(0,0,0,0.1);

  632. 		border-radius: 4px;

  633. 		transform: translateZ( -20px );

  634. 	}

  635. 	.reveal.cube .slides section:not(.stack):after {

  636. 		content: '';

  637. 		position: absolute;

  638. 		display: block;

  639. 		width: 90%;

  640. 		height: 30px;

  641. 		left: 5%;

  642. 		bottom: 0;

  643. 		background: none;

  644. 		z-index: 1;

  645. 

  646. 		border-radius: 4px;

  647. 		box-shadow: 0px 95px 25px rgba(0,0,0,0.2);

  648. 		transform: translateZ(-90px) rotateX( 65deg );

  649. 	}

  650. 

  651. .reveal.cube .slides>section.stack {

  652. 	padding: 0;

  653. 	background: none;

  654. }

  655. 

  656. .reveal.cube .slides>section.past {

  657. 	transform-origin: 100% 0%;

  658. 	transform: translate3d(-100%, 0, 0) rotateY(-90deg);

  659. }

  660. 

  661. .reveal.cube .slides>section.future {

  662. 	transform-origin: 0% 0%;

  663. 	transform: translate3d(100%, 0, 0) rotateY(90deg);

  664. }

  665. 

  666. .reveal.cube .slides>section>section.past {

  667. 	transform-origin: 0% 100%;

  668. 	transform: translate3d(0, -100%, 0) rotateX(90deg);

  669. }

  670. 

  671. .reveal.cube .slides>section>section.future {

  672. 	transform-origin: 0% 0%;

  673. 	transform: translate3d(0, 100%, 0) rotateX(-90deg);

  674. }

  675. 

  676. 

  677. /*********************************************

  678.  * PAGE TRANSITION

  679.  *********************************************/

  680. 

  681. .reveal.page .slides {

  682. 	perspective-origin: 0% 50%;

  683. 	perspective: 3000px;

  684. }

  685. 

  686. .reveal.page .slides section {

  687. 	padding: 30px;

  688. 	min-height: 700px;

  689. 	box-sizing: border-box;

  690. }

  691. 	.reveal.page .slides section.past {

  692. 		z-index: 12;

  693. 	}

  694. 	.reveal.page .slides section:not(.stack):before {

  695. 		content: '';

  696. 		position: absolute;

  697. 		display: block;

  698. 		width: 100%;

  699. 		height: 100%;

  700. 		left: 0;

  701. 		top: 0;

  702. 		background: rgba(0,0,0,0.1);

  703. 		transform: translateZ( -20px );

  704. 	}

  705. 	.reveal.page .slides section:not(.stack):after {

  706. 		content: '';

  707. 		position: absolute;

  708. 		display: block;

  709. 		width: 90%;

  710. 		height: 30px;

  711. 		left: 5%;

  712. 		bottom: 0;

  713. 		background: none;

  714. 		z-index: 1;

  715. 

  716. 		border-radius: 4px;

  717. 		box-shadow: 0px 95px 25px rgba(0,0,0,0.2);

  718. 

  719. 		-webkit-transform: translateZ(-90px) rotateX( 65deg );

  720. 	}

  721. 

  722. .reveal.page .slides>section.stack {

  723. 	padding: 0;

  724. 	background: none;

  725. }

  726. 

  727. .reveal.page .slides>section.past {

  728. 	transform-origin: 0% 0%;

  729. 	transform: translate3d(-40%, 0, 0) rotateY(-80deg);

  730. }

  731. 

  732. .reveal.page .slides>section.future {

  733. 	transform-origin: 100% 0%;

  734. 	transform: translate3d(0, 0, 0);

  735. }

  736. 

  737. .reveal.page .slides>section>section.past {

  738. 	transform-origin: 0% 0%;

  739. 	transform: translate3d(0, -40%, 0) rotateX(80deg);

  740. }

  741. 

  742. .reveal.page .slides>section>section.future {

  743. 	transform-origin: 0% 100%;

  744. 	transform: translate3d(0, 0, 0);

  745. }

  746. 

  747. 

  748. /*********************************************

  749.  * FADE TRANSITION

  750.  *********************************************/

  751. 

  752. .reveal .slides section[data-transition=fade],

  753. .reveal.fade .slides section:not([data-transition]),

  754. .reveal.fade .slides>section>section:not([data-transition]) {

  755. 	transform: none;

  756. 	transition: opacity 0.5s;

  757. }

  758. 

  759. 

  760. .reveal.fade.overview .slides section,

  761. .reveal.fade.overview .slides>section>section {

  762. 	transition: none;

  763. }

  764. 

  765. 

  766. /*********************************************

  767.  * NO TRANSITION

  768.  *********************************************/

  769. 

  770. @include transition-global(none) {

  771. 	transform: none;

  772. 	transition: none;

  773. }

  774. 

  775. 

  776. /*********************************************

  777.  * PAUSED MODE

  778.  *********************************************/

  779. 

  780. .reveal .pause-overlay {

  781. 	position: absolute;

  782. 	top: 0;

  783. 	left: 0;

  784. 	width: 100%;

  785. 	height: 100%;

  786. 	background: black;

  787. 	visibility: hidden;

  788. 	opacity: 0;

  789. 	z-index: 100;

  790. 	transition: all 1s ease;

  791. }

  792. .reveal.paused .pause-overlay {

  793. 	visibility: visible;

  794. 	opacity: 1;

  795. }

  796. 

  797. 

  798. /*********************************************

  799.  * FALLBACK

  800.  *********************************************/

  801. 

  802. .no-transforms {

  803. 	overflow-y: auto;

  804. }

  805. 

  806. .no-transforms .reveal .slides {

  807. 	position: relative;

  808. 	width: 80%;

  809. 	height: auto !important;

  810. 	top: 0;

  811. 	left: 50%;

  812. 	margin: 0;

  813. 	text-align: center;

  814. }

  815. 

  816. .no-transforms .reveal .controls,

  817. .no-transforms .reveal .progress {

  818. 	display: none !important;

  819. }

  820. 

  821. .no-transforms .reveal .slides section {

  822. 	display: block !important;

  823. 	opacity: 1 !important;

  824. 	position: relative !important;

  825. 	height: auto;

  826. 	min-height: 0;

  827. 	top: 0;

  828. 	left: -50%;

  829. 	margin: 70px 0;

  830. 	transform: none;

  831. }

  832. 

  833. .no-transforms .reveal .slides section section {

  834. 	left: 0;

  835. }

  836. 

  837. .reveal .no-transition,

  838. .reveal .no-transition * {

  839. 	transition: none !important;

  840. }

  841. 

  842. 

  843. /*********************************************

  844.  * PER-SLIDE BACKGROUNDS

  845.  *********************************************/

  846. 

  847. .reveal .backgrounds {

  848. 	position: absolute;

  849. 	width: 100%;

  850. 	height: 100%;

  851. 	top: 0;

  852. 	left: 0;

  853. 	perspective: 600px;

  854. }

  855. 	.reveal .slide-background {

  856. 		display: none;

  857. 		position: absolute;

  858. 		width: 100%;

  859. 		height: 100%;

  860. 		opacity: 0;

  861. 		visibility: hidden;

  862. 

  863. 		background-color: rgba( 0, 0, 0, 0 );

  864. 		background-position: 50% 50%;

  865. 		background-repeat: no-repeat;

  866. 		background-size: cover;

  867. 

  868. 		transition: all 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);

  869. 	}

  870. 

  871. 	.reveal .slide-background.stack {

  872. 		display: block;

  873. 	}

  874. 

  875. 	.reveal .slide-background.present {

  876. 		opacity: 1;

  877. 		visibility: visible;

  878. 	}

  879. 

  880. 	.print-pdf .reveal .slide-background {

  881. 		opacity: 1 !important;

  882. 		visibility: visible !important;

  883. 	}

  884. 

  885. /* Video backgrounds */

  886. .reveal .slide-background video {

  887. 	position: absolute;

  888. 	width: 100%;

  889. 	height: 100%;

  890. 	max-width: none;

  891. 	max-height: none;

  892. 	top: 0;

  893. 	left: 0;

  894. }

  895. 

  896. /* Immediate transition style */

  897. .reveal[data-background-transition=none]>.backgrounds .slide-background,

  898. .reveal>.backgrounds .slide-background[data-background-transition=none] {

  899. 	transition: none;

  900. }

  901. 

  902. /* Slide */

  903. .reveal[data-background-transition=slide]>.backgrounds .slide-background,

  904. .reveal>.backgrounds .slide-background[data-background-transition=slide] {

  905. 	opacity: 1;

  906. 	backface-visibility: hidden;

  907. }

  908. 	.reveal[data-background-transition=slide]>.backgrounds .slide-background.past,

  909. 	.reveal>.backgrounds .slide-background.past[data-background-transition=slide] {

  910. 		transform: translate(-100%, 0);

  911. 	}

  912. 	.reveal[data-background-transition=slide]>.backgrounds .slide-background.future,

  913. 	.reveal>.backgrounds .slide-background.future[data-background-transition=slide] {

  914. 		transform: translate(100%, 0);

  915. 	}

  916. 

  917. 	.reveal[data-background-transition=slide]>.backgrounds .slide-background>.slide-background.past,

  918. 	.reveal>.backgrounds .slide-background>.slide-background.past[data-background-transition=slide] {

  919. 		transform: translate(0, -100%);

  920. 	}

  921. 	.reveal[data-background-transition=slide]>.backgrounds .slide-background>.slide-background.future,

  922. 	.reveal>.backgrounds .slide-background>.slide-background.future[data-background-transition=slide] {

  923. 		transform: translate(0, 100%);

  924. 	}

  925. 

  926. 

  927. /* Convex */

  928. .reveal[data-background-transition=convex]>.backgrounds .slide-background.past,

  929. .reveal>.backgrounds .slide-background.past[data-background-transition=convex] {

  930. 	opacity: 0;

  931. 	transform: translate3d(-100%, 0, 0) rotateY(-90deg) translate3d(-100%, 0, 0);

  932. }

  933. .reveal[data-background-transition=convex]>.backgrounds .slide-background.future,

  934. .reveal>.backgrounds .slide-background.future[data-background-transition=convex] {

  935. 	opacity: 0;

  936. 	transform: translate3d(100%, 0, 0) rotateY(90deg) translate3d(100%, 0, 0);

  937. }

  938. 

  939. .reveal[data-background-transition=convex]>.backgrounds .slide-background>.slide-background.past,

  940. .reveal>.backgrounds .slide-background>.slide-background.past[data-background-transition=convex] {

  941. 	opacity: 0;

  942. 	transform: translate3d(0, -100%, 0) rotateX(90deg) translate3d(0, -100%, 0);

  943. }

  944. .reveal[data-background-transition=convex]>.backgrounds .slide-background>.slide-background.future,

  945. .reveal>.backgrounds .slide-background>.slide-background.future[data-background-transition=convex] {

  946. 	opacity: 0;

  947. 	transform: translate3d(0, 100%, 0) rotateX(-90deg) translate3d(0, 100%, 0);

  948. }

  949. 

  950. 

  951. /* Concave */

  952. .reveal[data-background-transition=concave]>.backgrounds .slide-background.past,

  953. .reveal>.backgrounds .slide-background.past[data-background-transition=concave] {

  954. 	opacity: 0;

  955. 	transform: translate3d(-100%, 0, 0) rotateY(90deg) translate3d(-100%, 0, 0);

  956. }

  957. .reveal[data-background-transition=concave]>.backgrounds .slide-background.future,

  958. .reveal>.backgrounds .slide-background.future[data-background-transition=concave] {

  959. 	opacity: 0;

  960. 	transform: translate3d(100%, 0, 0) rotateY(-90deg) translate3d(100%, 0, 0);

  961. }

  962. 

  963. .reveal[data-background-transition=concave]>.backgrounds .slide-background>.slide-background.past,

  964. .reveal>.backgrounds .slide-background>.slide-background.past[data-background-transition=concave] {

  965. 	opacity: 0;

  966. 	transform: translate3d(0, -100%, 0) rotateX(-90deg) translate3d(0, -100%, 0);

  967. }

  968. .reveal[data-background-transition=concave]>.backgrounds .slide-background>.slide-background.future,

  969. .reveal>.backgrounds .slide-background>.slide-background.future[data-background-transition=concave] {

  970. 	opacity: 0;

  971. 	transform: translate3d(0, 100%, 0) rotateX(90deg) translate3d(0, 100%, 0);

  972. }

  973. 

  974. /* Zoom */

  975. .reveal[data-background-transition=zoom]>.backgrounds .slide-background,

  976. .reveal>.backgrounds .slide-background[data-background-transition=zoom] {

  977. 	transition-timing-function: ease;

  978. }

  979. 

  980. .reveal[data-background-transition=zoom]>.backgrounds .slide-background.past,

  981. .reveal>.backgrounds .slide-background.past[data-background-transition=zoom] {

  982. 	opacity: 0;

  983. 	visibility: hidden;

  984. 	transform: scale(16);

  985. }

  986. .reveal[data-background-transition=zoom]>.backgrounds .slide-background.future,

  987. .reveal>.backgrounds .slide-background.future[data-background-transition=zoom] {

  988. 	opacity: 0;

  989. 	visibility: hidden;

  990. 	transform: scale(0.2);

  991. }

  992. 

  993. .reveal[data-background-transition=zoom]>.backgrounds .slide-background>.slide-background.past,

  994. .reveal>.backgrounds .slide-background>.slide-background.past[data-background-transition=zoom] {

  995. 	opacity: 0;

  996. 		visibility: hidden;

  997. 		transform: scale(16);

  998. }

  999. .reveal[data-background-transition=zoom]>.backgrounds .slide-background>.slide-background.future,

  1000. .reveal>.backgrounds .slide-background>.slide-background.future[data-background-transition=zoom] {

  1001. 	opacity: 0;

  1002. 	visibility: hidden;

  1003. 	transform: scale(0.2);

  1004. }

  1005. 

  1006. 

  1007. /* Global transition speed settings */

  1008. .reveal[data-transition-speed="fast"]>.backgrounds .slide-background {

  1009. 	transition-duration: 400ms;

  1010. }

  1011. .reveal[data-transition-speed="slow"]>.backgrounds .slide-background {

  1012. 	transition-duration: 1200ms;

  1013. }

  1014. 

  1015. 

  1016. /*********************************************

  1017.  * OVERVIEW

  1018.  *********************************************/

  1019. 

  1020. .reveal.overview {

  1021. 	perspective-origin: 50% 50%;

  1022. 	perspective: 700px;

  1023. 

  1024. 	.slides section {

  1025. 		height: 100%;

  1026. 		top: 0 !important;

  1027. 		opacity: 1 !important;

  1028. 		overflow: hidden;

  1029. 		visibility: visible !important;

  1030. 		cursor: pointer;

  1031. 		box-sizing: border-box;

  1032. 	}

  1033. 	.slides section:hover,

  1034. 	.slides section.present {

  1035. 		outline: 10px solid rgba(150,150,150,0.4);

  1036. 		outline-offset: 10px;

  1037. 	}

  1038. 	.slides section .fragment {

  1039. 		opacity: 1;

  1040. 		transition: none;

  1041. 	}

  1042. 	.slides section:after,

  1043. 	.slides section:before {

  1044. 		display: none !important;

  1045. 	}

  1046. 	.slides>section.stack {

  1047. 		padding: 0;

  1048. 		top: 0 !important;

  1049. 		background: none;

  1050. 		outline: none;

  1051. 		overflow: visible;

  1052. 	}

  1053. 

  1054. 	.backgrounds {

  1055. 		perspective: inherit;

  1056. 	}

  1057. 

  1058. 	.backgrounds .slide-background {

  1059. 		opacity: 1;

  1060. 		visibility: visible;

  1061. 

  1062. 		// This can't be applied to the slide itself in Safari

  1063. 		outline: 10px solid rgba(150,150,150,0.1);

  1064. 		outline-offset: 10px;

  1065. 	}

  1066. }

  1067. 

  1068. // Disable transitions transitions while we're activating

  1069. // or deactivating the overview mode.

  1070. .reveal.overview .slides section,

  1071. .reveal.overview-deactivating .slides section {

  1072. 	transition: none;

  1073. }

  1074. 

  1075. .reveal.overview .backgrounds .slide-background,

  1076. .reveal.overview-deactivating .backgrounds .slide-background {

  1077. 	transition: none;

  1078. }

  1079. 

  1080. .reveal.overview-animated .slides {

  1081. 	transition: transform 0.4s ease;

  1082. }

  1083. 

  1084. 

  1085. /*********************************************

  1086.  * RTL SUPPORT

  1087.  *********************************************/

  1088. 

  1089. .reveal.rtl .slides,

  1090. .reveal.rtl .slides h1,

  1091. .reveal.rtl .slides h2,

  1092. .reveal.rtl .slides h3,

  1093. .reveal.rtl .slides h4,

  1094. .reveal.rtl .slides h5,

  1095. .reveal.rtl .slides h6 {

  1096. 	direction: rtl;

  1097. 	font-family: sans-serif;

  1098. }

  1099. 

  1100. .reveal.rtl pre,

  1101. .reveal.rtl code {

  1102. 	direction: ltr;

  1103. }

  1104. 

  1105. .reveal.rtl ol,

  1106. .reveal.rtl ul {

  1107. 	text-align: right;

  1108. }

  1109. 

  1110. .reveal.rtl .progress span {

  1111. 	float: right

  1112. }

  1113. 

  1114. /*********************************************

  1115.  * PARALLAX BACKGROUND

  1116.  *********************************************/

  1117. 

  1118. .reveal.has-parallax-background .backgrounds {

  1119. 	transition: all 0.8s ease;

  1120. }

  1121. 

  1122. /* Global transition speed settings */

  1123. .reveal.has-parallax-background[data-transition-speed="fast"] .backgrounds {

  1124. 	transition-duration: 400ms;

  1125. }

  1126. .reveal.has-parallax-background[data-transition-speed="slow"] .backgrounds {

  1127. 	transition-duration: 1200ms;

  1128. }

  1129. 

  1130. 

  1131. /*********************************************

  1132.  * LINK PREVIEW OVERLAY

  1133.  *********************************************/

  1134. 

  1135. .reveal .overlay {

  1136. 	position: absolute;

  1137. 	top: 0;

  1138. 	left: 0;

  1139. 	width: 100%;

  1140. 	height: 100%;

  1141. 	z-index: 1000;

  1142. 	background: rgba( 0, 0, 0, 0.9 );

  1143. 	opacity: 0;

  1144. 	visibility: hidden;

  1145. 	transition: all 0.3s ease;

  1146. }

  1147. 	.reveal .overlay.visible {

  1148. 		opacity: 1;

  1149. 		visibility: visible;

  1150. 	}

  1151. 

  1152. 	.reveal .overlay .spinner {

  1153. 		position: absolute;

  1154. 		display: block;

  1155. 		top: 50%;

  1156. 		left: 50%;

  1157. 		width: 32px;

  1158. 		height: 32px;

  1159. 		margin: -16px 0 0 -16px;

  1160. 		z-index: 10;

  1161. 		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);

  1162. 

  1163. 		visibility: visible;

  1164. 		opacity: 0.6;

  1165. 		transition: all 0.3s ease;

  1166. 	}

  1167. 

  1168. 	.reveal .overlay header {

  1169. 		position: absolute;

  1170. 		left: 0;

  1171. 		top: 0;

  1172. 		width: 100%;

  1173. 		height: 40px;

  1174. 		z-index: 2;

  1175. 		border-bottom: 1px solid #222;

  1176. 	}

  1177. 		.reveal .overlay header a {

  1178. 			display: inline-block;

  1179. 			width: 40px;

  1180. 			height: 40px;

  1181. 			padding: 0 10px;

  1182. 			float: right;

  1183. 			opacity: 0.6;

  1184. 

  1185. 			box-sizing: border-box;

  1186. 		}

  1187. 			.reveal .overlay header a:hover {

  1188. 				opacity: 1;

  1189. 			}

  1190. 			.reveal .overlay header a .icon {

  1191. 				display: inline-block;

  1192. 				width: 20px;

  1193. 				height: 20px;

  1194. 

  1195. 				background-position: 50% 50%;

  1196. 				background-size: 100%;

  1197. 				background-repeat: no-repeat;

  1198. 			}

  1199. 			.reveal .overlay header a.close .icon {

  1200. 				background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAABkklEQVRYR8WX4VHDMAxG6wnoJrABZQPYBCaBTWAD2g1gE5gg6OOsXuxIlr40d81dfrSJ9V4c2VLK7spHuTJ/5wpM07QXuXc5X0opX2tEJcadjHuV80li/FgxTIEK/5QBCICBD6xEhSMGHgQPgBgLiYVAB1dpSqKDawxTohFw4JSEA3clzgIBPCURwE2JucBR7rhPJJv5OpJwDX+SfDjgx1wACQeJG1aChP9K/IMmdZ8DtESV1WyP3Bt4MwM6sj4NMxMYiqUWHQu4KYA/SYkIjOsm3BXYWMKFDwU2khjCQ4ELJUJ4SmClRArOCmSXGuKma0fYD5CbzHxFpCSGAhfAVSSUGDUk2BWZaff2g6GE15BsBQ9nwmpIGDiyHQddwNTMKkbZaf9fajXQca1EX44puJZUsnY0ObGmITE3GVLCbEhQUjGVt146j6oasWN+49Vph2w1pZ5EansNZqKBm1txbU57iRRcZ86RWMDdWtBJUHBHwoQPi1GV+JCbntmvok7iTX4/Up9mgyTc/FJYDTcndgH/AA5A/CHsyEkVAAAAAElFTkSuQmCC);

  1201. 			}

  1202. 			.reveal .overlay header a.external .icon {

  1203. 				background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAcElEQVRYR+2WSQoAIQwEzf8f7XiOMkUQxUPlGkM3hVmiQfQR9GYnH1SsAQlI4DiBqkCMoNb9y2e90IAEJPAcgdznU9+engMaeJ7Azh5Y1U67gAho4DqBqmB1buAf0MB1AlVBek83ZPkmJMGc1wAR+AAqod/B97TRpQAAAABJRU5ErkJggg==);

  1204. 			}

  1205. 

  1206. 	.reveal .overlay .viewport {

  1207. 		position: absolute;

  1208. 		display: flex;

  1209. 		top: 40px;

  1210. 		right: 0;

  1211. 		bottom: 0;

  1212. 		left: 0;

  1213. 	}

  1214. 

  1215. 	.reveal .overlay.overlay-preview .viewport iframe {

  1216. 		width: 100%;

  1217. 		height: 100%;

  1218. 		max-width: 100%;

  1219. 		max-height: 100%;

  1220. 		border: 0;

  1221. 

  1222. 		opacity: 0;

  1223. 		visibility: hidden;

  1224. 		transition: all 0.3s ease;

  1225. 	}

  1226. 

  1227. 	.reveal .overlay.overlay-preview.loaded .viewport iframe {

  1228. 		opacity: 1;

  1229. 		visibility: visible;

  1230. 	}

  1231. 

  1232. 	.reveal .overlay.overlay-preview.loaded .spinner {

  1233. 		opacity: 0;

  1234. 		visibility: hidden;

  1235. 		transform: scale(0.2);

  1236. 	}

  1237. 

  1238. 	.reveal .overlay.overlay-help .viewport {

  1239. 		overflow: auto;

  1240. 		color: #fff;

  1241. 	}

  1242. 

  1243. 	.reveal .overlay.overlay-help .viewport .viewport-inner {

  1244. 		width: 600px;

  1245. 		margin: auto;

  1246. 		padding: 20px 20px 80px 20px;

  1247. 		text-align: center;

  1248. 		letter-spacing: normal;

  1249. 	}

  1250. 

  1251. 	.reveal .overlay.overlay-help .viewport .viewport-inner .title {

  1252. 		font-size: 20px;

  1253. 	}

  1254. 

  1255. 	.reveal .overlay.overlay-help .viewport .viewport-inner table {

  1256. 		border: 1px solid #fff;

  1257. 		border-collapse: collapse;

  1258. 		font-size: 16px;

  1259. 	}

  1260. 

  1261. 	.reveal .overlay.overlay-help .viewport .viewport-inner table th,

  1262. 	.reveal .overlay.overlay-help .viewport .viewport-inner table td {

  1263. 		width: 200px;

  1264. 		padding: 14px;

  1265. 		border: 1px solid #fff;

  1266. 		vertical-align: middle;

  1267. 	}

  1268. 

  1269. 	.reveal .overlay.overlay-help .viewport .viewport-inner table th {

  1270. 		padding-top: 20px;

  1271. 		padding-bottom: 20px;

  1272. 	}

  1273. 

  1274. 

  1275. 

  1276. /*********************************************

  1277.  * PLAYBACK COMPONENT

  1278.  *********************************************/

  1279. 

  1280. .reveal .playback {

  1281. 	position: fixed;

  1282. 	left: 15px;

  1283. 	bottom: 20px;

  1284. 	z-index: 30;

  1285. 	cursor: pointer;

  1286. 	transition: all 400ms ease;

  1287. }

  1288. 

  1289. .reveal.overview .playback {

  1290. 	opacity: 0;

  1291. 	visibility: hidden;

  1292. }

  1293. 

  1294. 

  1295. /*********************************************

  1296.  * ROLLING LINKS

  1297.  *********************************************/

  1298. 

  1299. .reveal .roll {

  1300. 	display: inline-block;

  1301. 	line-height: 1.2;

  1302. 	overflow: hidden;

  1303. 

  1304. 	vertical-align: top;

  1305. 	perspective: 400px;

  1306. 	perspective-origin: 50% 50%;

  1307. }

  1308. 	.reveal .roll:hover {

  1309. 		background: none;

  1310. 		text-shadow: none;

  1311. 	}

  1312. .reveal .roll span {

  1313. 	display: block;

  1314. 	position: relative;

  1315. 	padding: 0 2px;

  1316. 

  1317. 	pointer-events: none;

  1318. 	transition: all 400ms ease;

  1319. 	transform-origin: 50% 0%;

  1320. 	transform-style: preserve-3d;

  1321. 	backface-visibility: hidden;

  1322. }

  1323. 	.reveal .roll:hover span {

  1324. 	    background: rgba(0,0,0,0.5);

  1325. 	    transform: translate3d( 0px, 0px, -45px ) rotateX( 90deg );

  1326. 	}

  1327. .reveal .roll span:after {

  1328. 	content: attr(data-title);

  1329. 

  1330. 	display: block;

  1331. 	position: absolute;

  1332. 	left: 0;

  1333. 	top: 0;

  1334. 	padding: 0 2px;

  1335. 	backface-visibility: hidden;

  1336. 	transform-origin: 50% 0%;

  1337. 	transform: translate3d( 0px, 110%, 0px ) rotateX( -90deg );

  1338. }

  1339. 

  1340. 

  1341. /*********************************************

  1342.  * SPEAKER NOTES

  1343.  *********************************************/

  1344. 

  1345. // Hide on-page notes

  1346. .reveal aside.notes {

  1347. 	display: none;

  1348. }

  1349. 

  1350. // An interface element that can optionally be used to show the

  1351. // speaker notes to all viewers, on top of the presentation

  1352. .reveal .speaker-notes {

  1353. 	display: none;

  1354. 	position: absolute;

  1355. 	width: 70%;

  1356. 	max-height: 15%;

  1357. 	left: 15%;

  1358. 	bottom: 26px;

  1359. 	padding: 10px;

  1360. 	z-index: 1;

  1361. 	font-size: 18px;

  1362. 	line-height: 1.4;

  1363. 	color: #fff;

  1364. 	background-color: rgba(0,0,0,0.5);

  1365. 	overflow: auto;

  1366. 	box-sizing: border-box;

  1367. 	text-align: left;

  1368. 	font-family: Helvetica, sans-serif;

  1369. 	-webkit-overflow-scrolling: touch;

  1370. }

  1371. 

  1372. .reveal .speaker-notes.visible:not(:empty) {

  1373. 	display: block;

  1374. }

  1375. 

  1376. @media screen and (max-width: 1024px) {

  1377. 	.reveal .speaker-notes {

  1378. 		font-size: 14px;

  1379. 	}

  1380. }

  1381. 

  1382. @media screen and (max-width: 600px) {

  1383. 	.reveal .speaker-notes {

  1384. 		width: 90%;

  1385. 		left: 5%;

  1386. 	}

  1387. }

  1388. 

  1389. 

  1390. /*********************************************

  1391.  * ZOOM PLUGIN

  1392.  *********************************************/

  1393. 

  1394. .zoomed .reveal *,

  1395. .zoomed .reveal *:before,

  1396. .zoomed .reveal *:after {

  1397. 	backface-visibility: visible !important;

  1398. }

  1399. 

  1400. .zoomed .reveal .progress,

  1401. .zoomed .reveal .controls {

  1402. 	opacity: 0;

  1403. }

  1404. 

  1405. .zoomed .reveal .roll span {

  1406. 	background: none;

  1407. }

  1408. 

  1409. .zoomed .reveal .roll span:after {

  1410. 	visibility: hidden;

  1411. }