3 * http://lab.hakim.se/reveal-js
6 * Copyright (C) 2015 Hakim El Hattab, http://hakim.se
10 /*********************************************
12 *********************************************/
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, video {
32 vertical-align: baseline;
35 .reveal article, .reveal aside, .reveal details, .reveal figcaption, .reveal figure,
36 .reveal footer, .reveal header, .reveal hgroup, .reveal menu, .reveal nav, .reveal section {
41 /*********************************************
43 *********************************************/
56 background-color: #fff;
61 /*********************************************
63 *********************************************/
65 .reveal .slides section .fragment {
68 transition: all .2s ease;
76 .reveal .slides section .fragment.grow {
81 transform: scale( 1.3 );
85 .reveal .slides section .fragment.shrink {
90 transform: scale( 0.7 );
94 .reveal .slides section .fragment.zoom-in {
95 transform: scale( 0.1 );
102 .reveal .slides section .fragment.fade-out {
112 .reveal .slides section .fragment.semi-fade-out {
122 .reveal .slides section .fragment.strike {
127 text-decoration: line-through;
131 .reveal .slides section .fragment.current-visible {
141 .reveal .slides section .fragment.highlight-red,
142 .reveal .slides section .fragment.highlight-current-red,
143 .reveal .slides section .fragment.highlight-green,
144 .reveal .slides section .fragment.highlight-current-green,
145 .reveal .slides section .fragment.highlight-blue,
146 .reveal .slides section .fragment.highlight-current-blue {
150 .reveal .slides section .fragment.highlight-red.visible {
153 .reveal .slides section .fragment.highlight-green.visible {
156 .reveal .slides section .fragment.highlight-blue.visible {
160 .reveal .slides section .fragment.highlight-current-red.current-fragment {
163 .reveal .slides section .fragment.highlight-current-green.current-fragment {
166 .reveal .slides section .fragment.highlight-current-blue.current-fragment {
171 /*********************************************
172 * DEFAULT ELEMENT STYLES
173 *********************************************/
175 /* Fixes issue in Chrome where italic fonts did not appear when printing to PDF */
185 /** Prevents layering issues in certain browser/transition combinations */
195 .reveal pre.stretch code {
198 box-sizing: border-box;
202 /*********************************************
204 *********************************************/
215 -webkit-user-select: none;
218 .reveal .controls button {
224 background-color: transparent;
225 border: 12px solid transparent;
226 transform: scale(.9999);
227 transition: all 0.2s ease;
228 -webkit-appearance: none;
229 -webkit-tap-highlight-color: rgba( 0, 0, 0, 0 );
232 .reveal .controls .enabled {
237 .reveal .controls .enabled:active {
241 .reveal .controls .navigate-left {
244 border-right-width: 22px;
245 border-right-color: #000;
247 .reveal .controls .navigate-left.fragmented {
251 .reveal .controls .navigate-right {
255 border-left-width: 22px;
256 border-left-color: #000;
258 .reveal .controls .navigate-right.fragmented {
262 .reveal .controls .navigate-up {
265 border-bottom-width: 22px;
266 border-bottom-color: #000;
268 .reveal .controls .navigate-up.fragmented {
272 .reveal .controls .navigate-down {
276 border-top-width: 22px;
277 border-top-color: #000;
279 .reveal .controls .navigate-down.fragmented {
284 /*********************************************
286 *********************************************/
297 background-color: rgba( 0, 0, 0, 0.2 );
299 .reveal .progress:after {
307 .reveal .progress span {
312 background-color: #000;
313 transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
316 /*********************************************
318 *********************************************/
320 .reveal .slide-number {
330 /*********************************************
332 *********************************************/
356 perspective-origin: 50% 40%;
359 .reveal .slides>section {
360 -ms-perspective: 600px;
363 .reveal .slides>section,
364 .reveal .slides>section>section {
371 transform-style: preserve-3d;
372 transition: transform-origin 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985),
373 transform 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985),
374 visibility 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985),
375 opacity 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
378 /* Global transition speed settings */
379 .reveal[data-transition-speed="fast"] .slides section {
380 transition-duration: 400ms;
382 .reveal[data-transition-speed="slow"] .slides section {
383 transition-duration: 1200ms;
386 /* Slide-specific transition speed overrides */
387 .reveal .slides section[data-transition-speed="fast"] {
388 transition-duration: 400ms;
390 .reveal .slides section[data-transition-speed="slow"] {
391 transition-duration: 1200ms;
394 .reveal .slides>section.stack {
399 .reveal .slides>section.present,
400 .reveal .slides>section>section.present {
407 .reveal.center .slides,
408 .reveal.center .slides section {
409 min-height: 0 !important;
412 /* Don't allow interaction with invisible slides */
413 .reveal .slides>section.future,
414 .reveal .slides>section>section.future,
415 .reveal .slides>section.past,
416 .reveal .slides>section>section.past {
417 pointer-events: none;
420 .reveal.overview .slides>section,
421 .reveal.overview .slides>section>section {
422 pointer-events: auto;
425 .reveal .slides>section.past,
426 .reveal .slides>section.future,
427 .reveal .slides>section>section.past,
428 .reveal .slides>section>section.future {
433 /*********************************************
434 * Mixins for readability of transitions
435 *********************************************/
437 @mixin transition-global($style) {
438 .reveal .slides section[data-transition=#{$style}],
439 .reveal.#{$style} .slides section:not([data-transition]) {
443 @mixin transition-horizontal-past($style) {
444 .reveal .slides>section[data-transition=#{$style}].past,
445 .reveal .slides>section[data-transition~=#{$style}-out].past,
446 .reveal.#{$style} .slides>section:not([data-transition]).past {
450 @mixin transition-horizontal-future($style) {
451 .reveal .slides>section[data-transition=#{$style}].future,
452 .reveal .slides>section[data-transition~=#{$style}-in].future,
453 .reveal.#{$style} .slides>section:not([data-transition]).future {
458 @mixin transition-vertical-past($style) {
459 .reveal .slides>section>section[data-transition=#{$style}].past,
460 .reveal .slides>section>section[data-transition~=#{$style}-out].past,
461 .reveal.#{$style} .slides>section>section:not([data-transition]).past {
465 @mixin transition-vertical-future($style) {
466 .reveal .slides>section>section[data-transition=#{$style}].future,
467 .reveal .slides>section>section[data-transition~=#{$style}-in].future,
468 .reveal.#{$style} .slides>section>section:not([data-transition]).future {
473 /*********************************************
475 * Aliased 'linear' for backwards compatibility
476 *********************************************/
478 @each $stylename in slide, linear {
479 .reveal.#{$stylename} section {
480 backface-visibility: hidden;
482 @include transition-horizontal-past(#{$stylename}) {
483 transform: translate(-150%, 0);
485 @include transition-horizontal-future(#{$stylename}) {
486 transform: translate(150%, 0);
488 @include transition-vertical-past(#{$stylename}) {
489 transform: translate(0, -150%);
491 @include transition-vertical-future(#{$stylename}) {
492 transform: translate(0, 150%);
496 /*********************************************
498 * Aliased 'default' for backwards compatibility
499 *********************************************/
501 @each $stylename in default, convex {
502 @include transition-horizontal-past(#{$stylename}) {
503 transform: translate3d(-100%, 0, 0) rotateY(-90deg) translate3d(-100%, 0, 0);
505 @include transition-horizontal-future(#{$stylename}) {
506 transform: translate3d(100%, 0, 0) rotateY(90deg) translate3d(100%, 0, 0);
508 @include transition-vertical-past(#{$stylename}) {
509 transform: translate3d(0, -300px, 0) rotateX(70deg) translate3d(0, -300px, 0);
511 @include transition-vertical-future(#{$stylename}) {
512 transform: translate3d(0, 300px, 0) rotateX(-70deg) translate3d(0, 300px, 0);
516 /*********************************************
518 *********************************************/
520 @include transition-horizontal-past(concave) {
521 transform: translate3d(-100%, 0, 0) rotateY(90deg) translate3d(-100%, 0, 0);
523 @include transition-horizontal-future(concave) {
524 transform: translate3d(100%, 0, 0) rotateY(-90deg) translate3d(100%, 0, 0);
526 @include transition-vertical-past(concave) {
527 transform: translate3d(0, -80%, 0) rotateX(-70deg) translate3d(0, -80%, 0);
529 @include transition-vertical-future(concave) {
530 transform: translate3d(0, 80%, 0) rotateX(70deg) translate3d(0, 80%, 0);
534 /*********************************************
536 *********************************************/
538 @include transition-global(zoom) {
539 transition-timing-function: ease;
541 @include transition-horizontal-past(zoom) {
543 transform: scale(16);
545 @include transition-horizontal-future(zoom) {
547 transform: scale(0.2);
549 @include transition-vertical-past(zoom) {
550 transform: translate(0, -150%);
552 @include transition-vertical-future(zoom) {
553 transform: translate(0, 150%);
557 /*********************************************
559 *********************************************/
561 .reveal.cube .slides {
565 .reveal.cube .slides section {
568 backface-visibility: hidden;
569 box-sizing: border-box;
571 .reveal.center.cube .slides section {
574 .reveal.cube .slides section:not(.stack):before {
582 background: rgba(0,0,0,0.1);
584 transform: translateZ( -20px );
586 .reveal.cube .slides section:not(.stack):after {
598 box-shadow: 0px 95px 25px rgba(0,0,0,0.2);
599 transform: translateZ(-90px) rotateX( 65deg );
602 .reveal.cube .slides>section.stack {
607 .reveal.cube .slides>section.past {
608 transform-origin: 100% 0%;
609 transform: translate3d(-100%, 0, 0) rotateY(-90deg);
612 .reveal.cube .slides>section.future {
613 transform-origin: 0% 0%;
614 transform: translate3d(100%, 0, 0) rotateY(90deg);
617 .reveal.cube .slides>section>section.past {
618 transform-origin: 0% 100%;
619 transform: translate3d(0, -100%, 0) rotateX(90deg);
622 .reveal.cube .slides>section>section.future {
623 transform-origin: 0% 0%;
624 transform: translate3d(0, 100%, 0) rotateX(-90deg);
628 /*********************************************
630 *********************************************/
632 .reveal.page .slides {
633 perspective-origin: 0% 50%;
637 .reveal.page .slides section {
640 box-sizing: border-box;
642 .reveal.page .slides section.past {
645 .reveal.page .slides section:not(.stack):before {
653 background: rgba(0,0,0,0.1);
654 transform: translateZ( -20px );
656 .reveal.page .slides section:not(.stack):after {
668 box-shadow: 0px 95px 25px rgba(0,0,0,0.2);
670 -webkit-transform: translateZ(-90px) rotateX( 65deg );
673 .reveal.page .slides>section.stack {
678 .reveal.page .slides>section.past {
679 transform-origin: 0% 0%;
680 transform: translate3d(-40%, 0, 0) rotateY(-80deg);
683 .reveal.page .slides>section.future {
684 transform-origin: 100% 0%;
685 transform: translate3d(0, 0, 0);
688 .reveal.page .slides>section>section.past {
689 transform-origin: 0% 0%;
690 transform: translate3d(0, -40%, 0) rotateX(80deg);
693 .reveal.page .slides>section>section.future {
694 transform-origin: 0% 100%;
695 transform: translate3d(0, 0, 0);
699 /*********************************************
701 *********************************************/
703 .reveal .slides section[data-transition=fade],
704 .reveal.fade .slides section:not([data-transition]),
705 .reveal.fade .slides>section>section:not([data-transition]) {
707 transition: opacity 0.5s;
711 .reveal.fade.overview .slides section,
712 .reveal.fade.overview .slides>section>section {
717 /*********************************************
719 *********************************************/
721 @include transition-global(none) {
727 /*********************************************
729 *********************************************/
731 .reveal .pause-overlay {
741 transition: all 1s ease;
743 .reveal.paused .pause-overlay {
749 /*********************************************
751 *********************************************/
757 .no-transforms .reveal .slides {
760 height: auto !important;
767 .no-transforms .reveal .controls,
768 .no-transforms .reveal .progress {
769 display: none !important;
772 .no-transforms .reveal .slides section {
773 display: block !important;
774 opacity: 1 !important;
775 position: relative !important;
784 .no-transforms .reveal .slides section section {
788 .reveal .no-transition,
789 .reveal .no-transition * {
790 transition: none !important;
794 /*********************************************
795 * PER-SLIDE BACKGROUNDS
796 *********************************************/
798 .reveal .backgrounds {
806 .reveal .slide-background {
814 background-color: rgba( 0, 0, 0, 0 );
815 background-position: 50% 50%;
816 background-repeat: no-repeat;
817 background-size: cover;
819 transition: all 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
822 .reveal .slide-background.stack {
826 .reveal .slide-background.present {
831 .print-pdf .reveal .slide-background {
832 opacity: 1 !important;
833 visibility: visible !important;
836 /* Video backgrounds */
837 .reveal .slide-background video {
847 /* Immediate transition style */
848 .reveal[data-background-transition=none]>.backgrounds .slide-background,
849 .reveal>.backgrounds .slide-background[data-background-transition=none] {
854 .reveal[data-background-transition=slide]>.backgrounds .slide-background,
855 .reveal>.backgrounds .slide-background[data-background-transition=slide] {
857 backface-visibility: hidden;
859 .reveal[data-background-transition=slide]>.backgrounds .slide-background.past,
860 .reveal>.backgrounds .slide-background.past[data-background-transition=slide] {
861 transform: translate(-100%, 0);
863 .reveal[data-background-transition=slide]>.backgrounds .slide-background.future,
864 .reveal>.backgrounds .slide-background.future[data-background-transition=slide] {
865 transform: translate(100%, 0);
868 .reveal[data-background-transition=slide]>.backgrounds .slide-background>.slide-background.past,
869 .reveal>.backgrounds .slide-background>.slide-background.past[data-background-transition=slide] {
870 transform: translate(0, -100%);
872 .reveal[data-background-transition=slide]>.backgrounds .slide-background>.slide-background.future,
873 .reveal>.backgrounds .slide-background>.slide-background.future[data-background-transition=slide] {
874 transform: translate(0, 100%);
879 .reveal[data-background-transition=convex]>.backgrounds .slide-background.past,
880 .reveal>.backgrounds .slide-background.past[data-background-transition=convex] {
882 transform: translate3d(-100%, 0, 0) rotateY(-90deg) translate3d(-100%, 0, 0);
884 .reveal[data-background-transition=convex]>.backgrounds .slide-background.future,
885 .reveal>.backgrounds .slide-background.future[data-background-transition=convex] {
887 transform: translate3d(100%, 0, 0) rotateY(90deg) translate3d(100%, 0, 0);
890 .reveal[data-background-transition=convex]>.backgrounds .slide-background>.slide-background.past,
891 .reveal>.backgrounds .slide-background>.slide-background.past[data-background-transition=convex] {
893 transform: translate3d(0, -100%, 0) rotateX(90deg) translate3d(0, -100%, 0);
895 .reveal[data-background-transition=convex]>.backgrounds .slide-background>.slide-background.future,
896 .reveal>.backgrounds .slide-background>.slide-background.future[data-background-transition=convex] {
898 transform: translate3d(0, 100%, 0) rotateX(-90deg) translate3d(0, 100%, 0);
903 .reveal[data-background-transition=concave]>.backgrounds .slide-background.past,
904 .reveal>.backgrounds .slide-background.past[data-background-transition=concave] {
906 transform: translate3d(-100%, 0, 0) rotateY(90deg) translate3d(-100%, 0, 0);
908 .reveal[data-background-transition=concave]>.backgrounds .slide-background.future,
909 .reveal>.backgrounds .slide-background.future[data-background-transition=concave] {
911 transform: translate3d(100%, 0, 0) rotateY(-90deg) translate3d(100%, 0, 0);
914 .reveal[data-background-transition=concave]>.backgrounds .slide-background>.slide-background.past,
915 .reveal>.backgrounds .slide-background>.slide-background.past[data-background-transition=concave] {
917 transform: translate3d(0, -100%, 0) rotateX(-90deg) translate3d(0, -100%, 0);
919 .reveal[data-background-transition=concave]>.backgrounds .slide-background>.slide-background.future,
920 .reveal>.backgrounds .slide-background>.slide-background.future[data-background-transition=concave] {
922 transform: translate3d(0, 100%, 0) rotateX(90deg) translate3d(0, 100%, 0);
926 .reveal[data-background-transition=zoom]>.backgrounds .slide-background,
927 .reveal>.backgrounds .slide-background[data-background-transition=zoom] {
928 transition-timing-function: ease;
931 .reveal[data-background-transition=zoom]>.backgrounds .slide-background.past,
932 .reveal>.backgrounds .slide-background.past[data-background-transition=zoom] {
935 transform: scale(16);
937 .reveal[data-background-transition=zoom]>.backgrounds .slide-background.future,
938 .reveal>.backgrounds .slide-background.future[data-background-transition=zoom] {
941 transform: scale(0.2);
944 .reveal[data-background-transition=zoom]>.backgrounds .slide-background>.slide-background.past,
945 .reveal>.backgrounds .slide-background>.slide-background.past[data-background-transition=zoom] {
948 transform: scale(16);
950 .reveal[data-background-transition=zoom]>.backgrounds .slide-background>.slide-background.future,
951 .reveal>.backgrounds .slide-background>.slide-background.future[data-background-transition=zoom] {
954 transform: scale(0.2);
958 /* Global transition speed settings */
959 .reveal[data-transition-speed="fast"]>.backgrounds .slide-background {
960 transition-duration: 400ms;
962 .reveal[data-transition-speed="slow"]>.backgrounds .slide-background {
963 transition-duration: 1200ms;
967 /*********************************************
969 *********************************************/
972 perspective-origin: 50% 50%;
977 opacity: 1 !important;
979 visibility: visible !important;
981 box-sizing: border-box;
983 .slides section:hover,
984 .slides section.present {
985 outline: 10px solid rgba(150,150,150,0.4);
986 outline-offset: 10px;
988 .slides section .fragment {
992 .slides section:after,
993 .slides section:before {
994 display: none !important;
996 .slides>section.stack {
1005 perspective: inherit;
1008 .backgrounds .slide-background {
1010 visibility: visible;
1012 // This can't be applied to the slide itself in Safari
1013 outline: 10px solid rgba(150,150,150,0.1);
1014 outline-offset: 10px;
1018 // Disable transitions transitions while we're activating
1019 // or deactivating the overview mode.
1020 .reveal.overview .slides section,
1021 .reveal.overview-deactivating .slides section {
1025 .reveal.overview .backgrounds .slide-background,
1026 .reveal.overview-deactivating .backgrounds .slide-background {
1030 .reveal.overview-animated .slides {
1031 transition: transform 0.4s ease;
1035 /*********************************************
1037 *********************************************/
1039 .reveal.rtl .slides,
1040 .reveal.rtl .slides h1,
1041 .reveal.rtl .slides h2,
1042 .reveal.rtl .slides h3,
1043 .reveal.rtl .slides h4,
1044 .reveal.rtl .slides h5,
1045 .reveal.rtl .slides h6 {
1047 font-family: sans-serif;
1060 .reveal.rtl .progress span {
1064 /*********************************************
1065 * PARALLAX BACKGROUND
1066 *********************************************/
1068 .reveal.has-parallax-background .backgrounds {
1069 transition: all 0.8s ease;
1072 /* Global transition speed settings */
1073 .reveal.has-parallax-background[data-transition-speed="fast"] .backgrounds {
1074 transition-duration: 400ms;
1076 .reveal.has-parallax-background[data-transition-speed="slow"] .backgrounds {
1077 transition-duration: 1200ms;
1081 /*********************************************
1082 * LINK PREVIEW OVERLAY
1083 *********************************************/
1092 background: rgba( 0, 0, 0, 0.9 );
1095 transition: all 0.3s ease;
1097 .reveal .overlay.visible {
1099 visibility: visible;
1102 .reveal .overlay .spinner {
1109 margin: -16px 0 0 -16px;
1111 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);
1113 visibility: visible;
1115 transition: all 0.3s ease;
1118 .reveal .overlay header {
1125 border-bottom: 1px solid #222;
1127 .reveal .overlay header a {
1128 display: inline-block;
1135 box-sizing: border-box;
1137 .reveal .overlay header a:hover {
1140 .reveal .overlay header a .icon {
1141 display: inline-block;
1145 background-position: 50% 50%;
1146 background-size: 100%;
1147 background-repeat: no-repeat;
1149 .reveal .overlay header a.close .icon {
1150 background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAABkklEQVRYR8WX4VHDMAxG6wnoJrABZQPYBCaBTWAD2g1gE5gg6OOsXuxIlr40d81dfrSJ9V4c2VLK7spHuTJ/5wpM07QXuXc5X0opX2tEJcadjHuV80li/FgxTIEK/5QBCICBD6xEhSMGHgQPgBgLiYVAB1dpSqKDawxTohFw4JSEA3clzgIBPCURwE2JucBR7rhPJJv5OpJwDX+SfDjgx1wACQeJG1aChP9K/IMmdZ8DtESV1WyP3Bt4MwM6sj4NMxMYiqUWHQu4KYA/SYkIjOsm3BXYWMKFDwU2khjCQ4ELJUJ4SmClRArOCmSXGuKma0fYD5CbzHxFpCSGAhfAVSSUGDUk2BWZaff2g6GE15BsBQ9nwmpIGDiyHQddwNTMKkbZaf9fajXQca1EX44puJZUsnY0ObGmITE3GVLCbEhQUjGVt146j6oasWN+49Vph2w1pZ5EansNZqKBm1txbU57iRRcZ86RWMDdWtBJUHBHwoQPi1GV+JCbntmvok7iTX4/Up9mgyTc/FJYDTcndgH/AA5A/CHsyEkVAAAAAElFTkSuQmCC);
1152 .reveal .overlay header a.external .icon {
1153 background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAcElEQVRYR+2WSQoAIQwEzf8f7XiOMkUQxUPlGkM3hVmiQfQR9GYnH1SsAQlI4DiBqkCMoNb9y2e90IAEJPAcgdznU9+engMaeJ7Azh5Y1U67gAho4DqBqmB1buAf0MB1AlVBek83ZPkmJMGc1wAR+AAqod/B97TRpQAAAABJRU5ErkJggg==);
1156 .reveal .overlay .viewport {
1164 .reveal .overlay.overlay-preview .viewport iframe {
1173 transition: all 0.3s ease;
1176 .reveal .overlay.overlay-preview.loaded .viewport iframe {
1178 visibility: visible;
1181 .reveal .overlay.overlay-preview.loaded .spinner {
1184 transform: scale(0.2);
1187 .reveal .overlay.overlay-help .viewport {
1192 .reveal .overlay.overlay-help .viewport .viewport-inner {
1197 letter-spacing: normal;
1200 .reveal .overlay.overlay-help .viewport .viewport-inner .title {
1204 .reveal .overlay.overlay-help .viewport .viewport-inner table {
1205 border: 1px solid #fff;
1206 border-collapse: collapse;
1210 .reveal .overlay.overlay-help .viewport .viewport-inner table th,
1211 .reveal .overlay.overlay-help .viewport .viewport-inner table td {
1214 border: 1px solid #fff;
1215 vertical-align: middle;
1218 .reveal .overlay.overlay-help .viewport .viewport-inner table th {
1220 padding-bottom: 20px;
1225 /*********************************************
1226 * PLAYBACK COMPONENT
1227 *********************************************/
1235 transition: all 400ms ease;
1238 .reveal.overview .playback {
1244 /*********************************************
1246 *********************************************/
1249 display: inline-block;
1253 vertical-align: top;
1255 perspective-origin: 50% 50%;
1257 .reveal .roll:hover {
1261 .reveal .roll span {
1266 pointer-events: none;
1267 transition: all 400ms ease;
1268 transform-origin: 50% 0%;
1269 transform-style: preserve-3d;
1270 backface-visibility: hidden;
1272 .reveal .roll:hover span {
1273 background: rgba(0,0,0,0.5);
1274 transform: translate3d( 0px, 0px, -45px ) rotateX( 90deg );
1276 .reveal .roll span:after {
1277 content: attr(data-title);
1284 backface-visibility: hidden;
1285 transform-origin: 50% 0%;
1286 transform: translate3d( 0px, 110%, 0px ) rotateX( -90deg );
1290 /*********************************************
1292 *********************************************/
1294 // Hide on-page notes
1295 .reveal aside.notes {
1299 // An interface element that can optionally be used to show the
1300 // speaker notes to all viewers, on top of the presentation
1301 .reveal .speaker-notes {
1313 background-color: rgba(0,0,0,0.5);
1315 box-sizing: border-box;
1317 font-family: Helvetica, sans-serif;
1318 -webkit-overflow-scrolling: touch;
1321 .reveal .speaker-notes.visible:not(:empty) {
1325 @media screen and (max-width: 1024px) {
1326 .reveal .speaker-notes {
1331 @media screen and (max-width: 600px) {
1332 .reveal .speaker-notes {
1339 /*********************************************
1341 *********************************************/
1344 .zoomed .reveal *:before,
1345 .zoomed .reveal *:after {
1346 backface-visibility: visible !important;
1349 .zoomed .reveal .progress,
1350 .zoomed .reveal .controls {
1354 .zoomed .reveal .roll span {
1358 .zoomed .reveal .roll span:after {