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