docs/com/css/reveal.scss

   1 /*!
   2  * reveal.js
   3  * http://lab.hakim.se/reveal-js
   4  * MIT licensed
   5  *
   6  * Copyright (C) 2015 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, 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
  61 /*********************************************
  62  * VIEW FRAGMENTS
  63  *********************************************/
  64
  65 .reveal .slides section .fragment {
  66         opacity: 0;
  67         visibility: hidden;
  68         transition: all .2s ease;
  69
  70         &.visible {
  71                 opacity: 1;
  72                 visibility: visible;
  73         }
  74 }
  75
  76 .reveal .slides section .fragment.grow {
  77         opacity: 1;
  78         visibility: visible;
  79
  80         &.visible {
  81                 transform: scale( 1.3 );
  82         }
  83 }
  84
  85 .reveal .slides section .fragment.shrink {
  86         opacity: 1;
  87         visibility: visible;
  88
  89         &.visible {
  90                 transform: scale( 0.7 );
  91         }
  92 }
  93
  94 .reveal .slides section .fragment.zoom-in {
  95         transform: scale( 0.1 );
  96
  97         &.visible {
  98                 transform: none;
  99         }
 100 }
 101
 102 .reveal .slides section .fragment.fade-out {
 103         opacity: 1;
 104         visibility: visible;
 105
 106         &.visible {
 107                 opacity: 0;
 108                 visibility: hidden;
 109         }
 110 }
 111
 112 .reveal .slides section .fragment.semi-fade-out {
 113         opacity: 1;
 114         visibility: visible;
 115
 116         &.visible {
 117                 opacity: 0.5;
 118                 visibility: visible;
 119         }
 120 }
 121
 122 .reveal .slides section .fragment.strike {
 123         opacity: 1;
 124         visibility: visible;
 125
 126         &.visible {
 127                 text-decoration: line-through;
 128         }
 129 }
 130
 131 .reveal .slides section .fragment.current-visible {
 132         opacity: 0;
 133         visibility: hidden;
 134
 135         &.current-fragment {
 136                 opacity: 1;
 137                 visibility: visible;
 138         }
 139 }
 140
 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 {
 147         opacity: 1;
 148         visibility: visible;
 149 }
 150         .reveal .slides section .fragment.highlight-red.visible {
 151                 color: #ff2c2d
 152         }
 153         .reveal .slides section .fragment.highlight-green.visible {
 154                 color: #17ff2e;
 155         }
 156         .reveal .slides section .fragment.highlight-blue.visible {
 157                 color: #1b91ff;
 158         }
 159
 160 .reveal .slides section .fragment.highlight-current-red.current-fragment {
 161         color: #ff2c2d
 162 }
 163 .reveal .slides section .fragment.highlight-current-green.current-fragment {
 164         color: #17ff2e;
 165 }
 166 .reveal .slides section .fragment.highlight-current-blue.current-fragment {
 167         color: #1b91ff;
 168 }
 169
 170
 171 /*********************************************
 172  * DEFAULT ELEMENT STYLES
 173  *********************************************/
 174
 175 /* Fixes issue in Chrome where italic fonts did not appear when printing to PDF */
 176 .reveal:after {
 177   content: '';
 178   font-style: italic;
 179 }
 180
 181 .reveal iframe {
 182         z-index: 1;
 183 }
 184
 185 /** Prevents layering issues in certain browser/transition combinations */
 186 .reveal a {
 187         position: relative;
 188 }
 189
 190 .reveal .stretch {
 191         max-width: none;
 192         max-height: none;
 193 }
 194
 195 .reveal pre.stretch code {
 196         height: 100%;
 197         max-height: 100%;
 198         box-sizing: border-box;
 199 }
 200
 201
 202 /*********************************************
 203  * CONTROLS
 204  *********************************************/
 205
 206 .reveal .controls {
 207         display: none;
 208         position: fixed;
 209         width: 110px;
 210         height: 110px;
 211         z-index: 30;
 212         right: 10px;
 213         bottom: 10px;
 214
 215         -webkit-user-select: none;
 216 }
 217
 218 .reveal .controls button {
 219         padding: 0;
 220         position: absolute;
 221         opacity: 0.05;
 222         width: 0;
 223         height: 0;
 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 );
 230 }
 231
 232 .reveal .controls .enabled {
 233         opacity: 0.7;
 234         cursor: pointer;
 235 }
 236
 237 .reveal .controls .enabled:active {
 238         margin-top: 1px;
 239 }
 240
 241         .reveal .controls .navigate-left {
 242                 top: 42px;
 243
 244                 border-right-width: 22px;
 245                 border-right-color: #000;
 246         }
 247                 .reveal .controls .navigate-left.fragmented {
 248                         opacity: 0.3;
 249                 }
 250
 251         .reveal .controls .navigate-right {
 252                 left: 74px;
 253                 top: 42px;
 254
 255                 border-left-width: 22px;
 256                 border-left-color: #000;
 257         }
 258                 .reveal .controls .navigate-right.fragmented {
 259                         opacity: 0.3;
 260                 }
 261
 262         .reveal .controls .navigate-up {
 263                 left: 42px;
 264
 265                 border-bottom-width: 22px;
 266                 border-bottom-color: #000;
 267         }
 268                 .reveal .controls .navigate-up.fragmented {
 269                         opacity: 0.3;
 270                 }
 271
 272         .reveal .controls .navigate-down {
 273                 left: 42px;
 274                 top: 74px;
 275
 276                 border-top-width: 22px;
 277                 border-top-color: #000;
 278         }
 279                 .reveal .controls .navigate-down.fragmented {
 280                         opacity: 0.3;
 281                 }
 282
 283
 284 /*********************************************
 285  * PROGRESS BAR
 286  *********************************************/
 287
 288 .reveal .progress {
 289         position: fixed;
 290         display: none;
 291         height: 3px;
 292         width: 100%;
 293         bottom: 0;
 294         left: 0;
 295         z-index: 10;
 296
 297         background-color: rgba( 0, 0, 0, 0.2 );
 298 }
 299         .reveal .progress:after {
 300                 content: '';
 301                 display: block;
 302                 position: absolute;
 303                 height: 20px;
 304                 width: 100%;
 305                 top: -20px;
 306         }
 307         .reveal .progress span {
 308                 display: block;
 309                 height: 100%;
 310                 width: 0px;
 311
 312                 background-color: #000;
 313                 transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
 314         }
 315
 316 /*********************************************
 317  * SLIDE NUMBER
 318  *********************************************/
 319
 320 .reveal .slide-number {
 321         position: fixed;
 322         display: block;
 323         right: 15px;
 324         bottom: 15px;
 325         opacity: 0.5;
 326         z-index: 31;
 327         font-size: 12px;
 328 }
 329
 330 /*********************************************
 331  * SLIDES
 332  *********************************************/
 333
 334 .reveal {
 335         position: relative;
 336         width: 100%;
 337         height: 100%;
 338         overflow: hidden;
 339         touch-action: none;
 340 }
 341
 342 .reveal .slides {
 343         position: absolute;
 344         width: 100%;
 345         height: 100%;
 346         top: 0;
 347         right: 0;
 348         bottom: 0;
 349         left: 0;
 350         margin: auto;
 351
 352         overflow: visible;
 353         z-index: 1;
 354         text-align: center;
 355         perspective: 600px;
 356         perspective-origin: 50% 40%;
 357 }
 358
 359 .reveal .slides>section {
 360         -ms-perspective: 600px;
 361 }
 362
 363 .reveal .slides>section,
 364 .reveal .slides>section>section {
 365         display: none;
 366         position: absolute;
 367         width: 100%;
 368         padding: 20px 0px;
 369
 370         z-index: 10;
 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);
 376 }
 377
 378 /* Global transition speed settings */
 379 .reveal[data-transition-speed="fast"] .slides section {
 380         transition-duration: 400ms;
 381 }
 382 .reveal[data-transition-speed="slow"] .slides section {
 383         transition-duration: 1200ms;
 384 }
 385
 386 /* Slide-specific transition speed overrides */
 387 .reveal .slides section[data-transition-speed="fast"] {
 388         transition-duration: 400ms;
 389 }
 390 .reveal .slides section[data-transition-speed="slow"] {
 391         transition-duration: 1200ms;
 392 }
 393
 394 .reveal .slides>section.stack {
 395         padding-top: 0;
 396         padding-bottom: 0;
 397 }
 398
 399 .reveal .slides>section.present,
 400 .reveal .slides>section>section.present {
 401         display: block;
 402         z-index: 11;
 403         opacity: 1;
 404 }
 405
 406 .reveal.center,
 407 .reveal.center .slides,
 408 .reveal.center .slides section {
 409         min-height: 0 !important;
 410 }
 411
 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;
 418 }
 419
 420 .reveal.overview .slides>section,
 421 .reveal.overview .slides>section>section {
 422         pointer-events: auto;
 423 }
 424
 425 .reveal .slides>section.past,
 426 .reveal .slides>section.future,
 427 .reveal .slides>section>section.past,
 428 .reveal .slides>section>section.future {
 429         opacity: 0;
 430 }
 431
 432
 433 /*********************************************
 434  * Mixins for readability of transitions
 435  *********************************************/
 436
 437 @mixin transition-global($style) {
 438         .reveal .slides section[data-transition=#{$style}],
 439         .reveal.#{$style} .slides section:not([data-transition]) {
 440                 @content;
 441         }
 442 }
 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 {
 447                 @content;
 448         }
 449 }
 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 {
 454                 @content;
 455         }
 456 }
 457
 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 {
 462                 @content;
 463         }
 464 }
 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 {
 469                 @content;
 470         }
 471 }
 472
 473 /*********************************************
 474  * SLIDE TRANSITION
 475  * Aliased 'linear' for backwards compatibility
 476  *********************************************/
 477
 478 @each $stylename in slide, linear {
 479         .reveal.#{$stylename} section {
 480                 backface-visibility: hidden;
 481         }
 482         @include transition-horizontal-past(#{$stylename}) {
 483                 transform: translate(-150%, 0);
 484         }
 485         @include transition-horizontal-future(#{$stylename}) {
 486                 transform: translate(150%, 0);
 487         }
 488         @include transition-vertical-past(#{$stylename}) {
 489                 transform: translate(0, -150%);
 490         }
 491         @include transition-vertical-future(#{$stylename}) {
 492                 transform: translate(0, 150%);
 493         }
 494 }
 495
 496 /*********************************************
 497  * CONVEX TRANSITION
 498  * Aliased 'default' for backwards compatibility
 499  *********************************************/
 500
 501 @each $stylename in default, convex {
 502         @include transition-horizontal-past(#{$stylename}) {
 503                 transform: translate3d(-100%, 0, 0) rotateY(-90deg) translate3d(-100%, 0, 0);
 504         }
 505         @include transition-horizontal-future(#{$stylename}) {
 506                 transform: translate3d(100%, 0, 0) rotateY(90deg) translate3d(100%, 0, 0);
 507         }
 508         @include transition-vertical-past(#{$stylename}) {
 509                 transform: translate3d(0, -300px, 0) rotateX(70deg) translate3d(0, -300px, 0);
 510         }
 511         @include transition-vertical-future(#{$stylename}) {
 512                 transform: translate3d(0, 300px, 0) rotateX(-70deg) translate3d(0, 300px, 0);
 513         }
 514 }
 515
 516 /*********************************************
 517  * CONCAVE TRANSITION
 518  *********************************************/
 519
 520 @include transition-horizontal-past(concave) {
 521         transform: translate3d(-100%, 0, 0) rotateY(90deg) translate3d(-100%, 0, 0);
 522 }
 523 @include transition-horizontal-future(concave) {
 524         transform: translate3d(100%, 0, 0) rotateY(-90deg) translate3d(100%, 0, 0);
 525 }
 526 @include transition-vertical-past(concave) {
 527         transform: translate3d(0, -80%, 0) rotateX(-70deg) translate3d(0, -80%, 0);
 528 }
 529 @include transition-vertical-future(concave) {
 530         transform: translate3d(0, 80%, 0) rotateX(70deg) translate3d(0, 80%, 0);
 531 }
 532
 533
 534 /*********************************************
 535  * ZOOM TRANSITION
 536  *********************************************/
 537
 538 @include transition-global(zoom) {
 539         transition-timing-function: ease;
 540 }
 541 @include transition-horizontal-past(zoom) {
 542         visibility: hidden;
 543         transform: scale(16);
 544 }
 545 @include transition-horizontal-future(zoom) {
 546         visibility: hidden;
 547         transform: scale(0.2);
 548 }
 549 @include transition-vertical-past(zoom) {
 550         transform: translate(0, -150%);
 551 }
 552 @include transition-vertical-future(zoom) {
 553         transform: translate(0, 150%);
 554 }
 555
 556
 557 /*********************************************
 558  * CUBE TRANSITION
 559  *********************************************/
 560
 561 .reveal.cube .slides {
 562         perspective: 1300px;
 563 }
 564
 565 .reveal.cube .slides section {
 566         padding: 30px;
 567         min-height: 700px;
 568         backface-visibility: hidden;
 569         box-sizing: border-box;
 570 }
 571         .reveal.center.cube .slides section {
 572                 min-height: 0;
 573         }
 574         .reveal.cube .slides section:not(.stack):before {
 575                 content: '';
 576                 position: absolute;
 577                 display: block;
 578                 width: 100%;
 579                 height: 100%;
 580                 left: 0;
 581                 top: 0;
 582                 background: rgba(0,0,0,0.1);
 583                 border-radius: 4px;
 584                 transform: translateZ( -20px );
 585         }
 586         .reveal.cube .slides section:not(.stack):after {
 587                 content: '';
 588                 position: absolute;
 589                 display: block;
 590                 width: 90%;
 591                 height: 30px;
 592                 left: 5%;
 593                 bottom: 0;
 594                 background: none;
 595                 z-index: 1;
 596
 597                 border-radius: 4px;
 598                 box-shadow: 0px 95px 25px rgba(0,0,0,0.2);
 599                 transform: translateZ(-90px) rotateX( 65deg );
 600         }
 601
 602 .reveal.cube .slides>section.stack {
 603         padding: 0;
 604         background: none;
 605 }
 606
 607 .reveal.cube .slides>section.past {
 608         transform-origin: 100% 0%;
 609         transform: translate3d(-100%, 0, 0) rotateY(-90deg);
 610 }
 611
 612 .reveal.cube .slides>section.future {
 613         transform-origin: 0% 0%;
 614         transform: translate3d(100%, 0, 0) rotateY(90deg);
 615 }
 616
 617 .reveal.cube .slides>section>section.past {
 618         transform-origin: 0% 100%;
 619         transform: translate3d(0, -100%, 0) rotateX(90deg);
 620 }
 621
 622 .reveal.cube .slides>section>section.future {
 623         transform-origin: 0% 0%;
 624         transform: translate3d(0, 100%, 0) rotateX(-90deg);
 625 }
 626
 627
 628 /*********************************************
 629  * PAGE TRANSITION
 630  *********************************************/
 631
 632 .reveal.page .slides {
 633         perspective-origin: 0% 50%;
 634         perspective: 3000px;
 635 }
 636
 637 .reveal.page .slides section {
 638         padding: 30px;
 639         min-height: 700px;
 640         box-sizing: border-box;
 641 }
 642         .reveal.page .slides section.past {
 643                 z-index: 12;
 644         }
 645         .reveal.page .slides section:not(.stack):before {
 646                 content: '';
 647                 position: absolute;
 648                 display: block;
 649                 width: 100%;
 650                 height: 100%;
 651                 left: 0;
 652                 top: 0;
 653                 background: rgba(0,0,0,0.1);
 654                 transform: translateZ( -20px );
 655         }
 656         .reveal.page .slides section:not(.stack):after {
 657                 content: '';
 658                 position: absolute;
 659                 display: block;
 660                 width: 90%;
 661                 height: 30px;
 662                 left: 5%;
 663                 bottom: 0;
 664                 background: none;
 665                 z-index: 1;
 666
 667                 border-radius: 4px;
 668                 box-shadow: 0px 95px 25px rgba(0,0,0,0.2);
 669
 670                 -webkit-transform: translateZ(-90px) rotateX( 65deg );
 671         }
 672
 673 .reveal.page .slides>section.stack {
 674         padding: 0;
 675         background: none;
 676 }
 677
 678 .reveal.page .slides>section.past {
 679         transform-origin: 0% 0%;
 680         transform: translate3d(-40%, 0, 0) rotateY(-80deg);
 681 }
 682
 683 .reveal.page .slides>section.future {
 684         transform-origin: 100% 0%;
 685         transform: translate3d(0, 0, 0);
 686 }
 687
 688 .reveal.page .slides>section>section.past {
 689         transform-origin: 0% 0%;
 690         transform: translate3d(0, -40%, 0) rotateX(80deg);
 691 }
 692
 693 .reveal.page .slides>section>section.future {
 694         transform-origin: 0% 100%;
 695         transform: translate3d(0, 0, 0);
 696 }
 697
 698
 699 /*********************************************
 700  * FADE TRANSITION
 701  *********************************************/
 702
 703 .reveal .slides section[data-transition=fade],
 704 .reveal.fade .slides section:not([data-transition]),
 705 .reveal.fade .slides>section>section:not([data-transition]) {
 706         transform: none;
 707         transition: opacity 0.5s;
 708 }
 709
 710
 711 .reveal.fade.overview .slides section,
 712 .reveal.fade.overview .slides>section>section {
 713         transition: none;
 714 }
 715
 716
 717 /*********************************************
 718  * NO TRANSITION
 719  *********************************************/
 720
 721 @include transition-global(none) {
 722         transform: none;
 723         transition: none;
 724 }
 725
 726
 727 /*********************************************
 728  * PAUSED MODE
 729  *********************************************/
 730
 731 .reveal .pause-overlay {
 732         position: absolute;
 733         top: 0;
 734         left: 0;
 735         width: 100%;
 736         height: 100%;
 737         background: black;
 738         visibility: hidden;
 739         opacity: 0;
 740         z-index: 100;
 741         transition: all 1s ease;
 742 }
 743 .reveal.paused .pause-overlay {
 744         visibility: visible;
 745         opacity: 1;
 746 }
 747
 748
 749 /*********************************************
 750  * FALLBACK
 751  *********************************************/
 752
 753 .no-transforms {
 754         overflow-y: auto;
 755 }
 756
 757 .no-transforms .reveal .slides {
 758         position: relative;
 759         width: 80%;
 760         height: auto !important;
 761         top: 0;
 762         left: 50%;
 763         margin: 0;
 764         text-align: center;
 765 }
 766
 767 .no-transforms .reveal .controls,
 768 .no-transforms .reveal .progress {
 769         display: none !important;
 770 }
 771
 772 .no-transforms .reveal .slides section {
 773         display: block !important;
 774         opacity: 1 !important;
 775         position: relative !important;
 776         height: auto;
 777         min-height: 0;
 778         top: 0;
 779         left: -50%;
 780         margin: 70px 0;
 781         transform: none;
 782 }
 783
 784 .no-transforms .reveal .slides section section {
 785         left: 0;
 786 }
 787
 788 .reveal .no-transition,
 789 .reveal .no-transition * {
 790         transition: none !important;
 791 }
 792
 793
 794 /*********************************************
 795  * PER-SLIDE BACKGROUNDS
 796  *********************************************/
 797
 798 .reveal .backgrounds {
 799         position: absolute;
 800         width: 100%;
 801         height: 100%;
 802         top: 0;
 803         left: 0;
 804         perspective: 600px;
 805 }
 806         .reveal .slide-background {
 807                 display: none;
 808                 position: absolute;
 809                 width: 100%;
 810                 height: 100%;
 811                 opacity: 0;
 812                 visibility: hidden;
 813
 814                 background-color: rgba( 0, 0, 0, 0 );
 815                 background-position: 50% 50%;
 816                 background-repeat: no-repeat;
 817                 background-size: cover;
 818
 819                 transition: all 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
 820         }
 821
 822         .reveal .slide-background.stack {
 823                 display: block;
 824         }
 825
 826         .reveal .slide-background.present {
 827                 opacity: 1;
 828                 visibility: visible;
 829         }
 830
 831         .print-pdf .reveal .slide-background {
 832                 opacity: 1 !important;
 833                 visibility: visible !important;
 834         }
 835
 836 /* Video backgrounds */
 837 .reveal .slide-background video {
 838         position: absolute;
 839         width: 100%;
 840         height: 100%;
 841         max-width: none;
 842         max-height: none;
 843         top: 0;
 844         left: 0;
 845 }
 846
 847 /* Immediate transition style */
 848 .reveal[data-background-transition=none]>.backgrounds .slide-background,
 849 .reveal>.backgrounds .slide-background[data-background-transition=none] {
 850         transition: none;
 851 }
 852
 853 /* Slide */
 854 .reveal[data-background-transition=slide]>.backgrounds .slide-background,
 855 .reveal>.backgrounds .slide-background[data-background-transition=slide] {
 856         opacity: 1;
 857         backface-visibility: hidden;
 858 }
 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);
 862         }
 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);
 866         }
 867
 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%);
 871         }
 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%);
 875         }
 876
 877
 878 /* Convex */
 879 .reveal[data-background-transition=convex]>.backgrounds .slide-background.past,
 880 .reveal>.backgrounds .slide-background.past[data-background-transition=convex] {
 881         opacity: 0;
 882         transform: translate3d(-100%, 0, 0) rotateY(-90deg) translate3d(-100%, 0, 0);
 883 }
 884 .reveal[data-background-transition=convex]>.backgrounds .slide-background.future,
 885 .reveal>.backgrounds .slide-background.future[data-background-transition=convex] {
 886         opacity: 0;
 887         transform: translate3d(100%, 0, 0) rotateY(90deg) translate3d(100%, 0, 0);
 888 }
 889
 890 .reveal[data-background-transition=convex]>.backgrounds .slide-background>.slide-background.past,
 891 .reveal>.backgrounds .slide-background>.slide-background.past[data-background-transition=convex] {
 892         opacity: 0;
 893         transform: translate3d(0, -100%, 0) rotateX(90deg) translate3d(0, -100%, 0);
 894 }
 895 .reveal[data-background-transition=convex]>.backgrounds .slide-background>.slide-background.future,
 896 .reveal>.backgrounds .slide-background>.slide-background.future[data-background-transition=convex] {
 897         opacity: 0;
 898         transform: translate3d(0, 100%, 0) rotateX(-90deg) translate3d(0, 100%, 0);
 899 }
 900
 901
 902 /* Concave */
 903 .reveal[data-background-transition=concave]>.backgrounds .slide-background.past,
 904 .reveal>.backgrounds .slide-background.past[data-background-transition=concave] {
 905         opacity: 0;
 906         transform: translate3d(-100%, 0, 0) rotateY(90deg) translate3d(-100%, 0, 0);
 907 }
 908 .reveal[data-background-transition=concave]>.backgrounds .slide-background.future,
 909 .reveal>.backgrounds .slide-background.future[data-background-transition=concave] {
 910         opacity: 0;
 911         transform: translate3d(100%, 0, 0) rotateY(-90deg) translate3d(100%, 0, 0);
 912 }
 913
 914 .reveal[data-background-transition=concave]>.backgrounds .slide-background>.slide-background.past,
 915 .reveal>.backgrounds .slide-background>.slide-background.past[data-background-transition=concave] {
 916         opacity: 0;
 917         transform: translate3d(0, -100%, 0) rotateX(-90deg) translate3d(0, -100%, 0);
 918 }
 919 .reveal[data-background-transition=concave]>.backgrounds .slide-background>.slide-background.future,
 920 .reveal>.backgrounds .slide-background>.slide-background.future[data-background-transition=concave] {
 921         opacity: 0;
 922         transform: translate3d(0, 100%, 0) rotateX(90deg) translate3d(0, 100%, 0);
 923 }
 924
 925 /* Zoom */
 926 .reveal[data-background-transition=zoom]>.backgrounds .slide-background,
 927 .reveal>.backgrounds .slide-background[data-background-transition=zoom] {
 928         transition-timing-function: ease;
 929 }
 930
 931 .reveal[data-background-transition=zoom]>.backgrounds .slide-background.past,
 932 .reveal>.backgrounds .slide-background.past[data-background-transition=zoom] {
 933         opacity: 0;
 934         visibility: hidden;
 935         transform: scale(16);
 936 }
 937 .reveal[data-background-transition=zoom]>.backgrounds .slide-background.future,
 938 .reveal>.backgrounds .slide-background.future[data-background-transition=zoom] {
 939         opacity: 0;
 940         visibility: hidden;
 941         transform: scale(0.2);
 942 }
 943
 944 .reveal[data-background-transition=zoom]>.backgrounds .slide-background>.slide-background.past,
 945 .reveal>.backgrounds .slide-background>.slide-background.past[data-background-transition=zoom] {
 946         opacity: 0;
 947                 visibility: hidden;
 948                 transform: scale(16);
 949 }
 950 .reveal[data-background-transition=zoom]>.backgrounds .slide-background>.slide-background.future,
 951 .reveal>.backgrounds .slide-background>.slide-background.future[data-background-transition=zoom] {
 952         opacity: 0;
 953         visibility: hidden;
 954         transform: scale(0.2);
 955 }
 956
 957
 958 /* Global transition speed settings */
 959 .reveal[data-transition-speed="fast"]>.backgrounds .slide-background {
 960         transition-duration: 400ms;
 961 }
 962 .reveal[data-transition-speed="slow"]>.backgrounds .slide-background {
 963         transition-duration: 1200ms;
 964 }
 965
 966
 967 /*********************************************
 968  * OVERVIEW
 969  *********************************************/
 970
 971 .reveal.overview {
 972         perspective-origin: 50% 50%;
 973         perspective: 700px;
 974
 975         .slides section {
 976                 height: 700px;
 977                 opacity: 1 !important;
 978                 overflow: hidden;
 979                 visibility: visible !important;
 980                 cursor: pointer;
 981                 box-sizing: border-box;
 982         }
 983         .slides section:hover,
 984         .slides section.present {
 985                 outline: 10px solid rgba(150,150,150,0.4);
 986                 outline-offset: 10px;
 987         }
 988         .slides section .fragment {
 989                 opacity: 1;
 990                 transition: none;
 991         }
 992         .slides section:after,
 993         .slides section:before {
 994                 display: none !important;
 995         }
 996         .slides>section.stack {
 997                 padding: 0;
 998                 top: 0 !important;
 999                 background: none;
1000                 outline: none;
1001                 overflow: visible;
1002         }
1003
1004         .backgrounds {
1005                 perspective: inherit;
1006         }
1007
1008         .backgrounds .slide-background {
1009                 opacity: 1;
1010                 visibility: visible;
1011
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;
1015         }
1016 }
1017
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 {
1022         transition: none;
1023 }
1024
1025 .reveal.overview .backgrounds .slide-background,
1026 .reveal.overview-deactivating .backgrounds .slide-background {
1027         transition: none;
1028 }
1029
1030 .reveal.overview-animated .slides {
1031         transition: transform 0.4s ease;
1032 }
1033
1034
1035 /*********************************************
1036  * RTL SUPPORT
1037  *********************************************/
1038
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 {
1046         direction: rtl;
1047         font-family: sans-serif;
1048 }
1049
1050 .reveal.rtl pre,
1051 .reveal.rtl code {
1052         direction: ltr;
1053 }
1054
1055 .reveal.rtl ol,
1056 .reveal.rtl ul {
1057         text-align: right;
1058 }
1059
1060 .reveal.rtl .progress span {
1061         float: right
1062 }
1063
1064 /*********************************************
1065  * PARALLAX BACKGROUND
1066  *********************************************/
1067
1068 .reveal.has-parallax-background .backgrounds {
1069         transition: all 0.8s ease;
1070 }
1071
1072 /* Global transition speed settings */
1073 .reveal.has-parallax-background[data-transition-speed="fast"] .backgrounds {
1074         transition-duration: 400ms;
1075 }
1076 .reveal.has-parallax-background[data-transition-speed="slow"] .backgrounds {
1077         transition-duration: 1200ms;
1078 }
1079
1080
1081 /*********************************************
1082  * LINK PREVIEW OVERLAY
1083  *********************************************/
1084
1085 .reveal .overlay {
1086         position: absolute;
1087         top: 0;
1088         left: 0;
1089         width: 100%;
1090         height: 100%;
1091         z-index: 1000;
1092         background: rgba( 0, 0, 0, 0.9 );
1093         opacity: 0;
1094         visibility: hidden;
1095         transition: all 0.3s ease;
1096 }
1097         .reveal .overlay.visible {
1098                 opacity: 1;
1099                 visibility: visible;
1100         }
1101
1102         .reveal .overlay .spinner {
1103                 position: absolute;
1104                 display: block;
1105                 top: 50%;
1106                 left: 50%;
1107                 width: 32px;
1108                 height: 32px;
1109                 margin: -16px 0 0 -16px;
1110                 z-index: 10;
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);
1112
1113                 visibility: visible;
1114                 opacity: 0.6;
1115                 transition: all 0.3s ease;
1116         }
1117
1118         .reveal .overlay header {
1119                 position: absolute;
1120                 left: 0;
1121                 top: 0;
1122                 width: 100%;
1123                 height: 40px;
1124                 z-index: 2;
1125                 border-bottom: 1px solid #222;
1126         }
1127                 .reveal .overlay header a {
1128                         display: inline-block;
1129                         width: 40px;
1130                         height: 40px;
1131                         padding: 0 10px;
1132                         float: right;
1133                         opacity: 0.6;
1134
1135                         box-sizing: border-box;
1136                 }
1137                         .reveal .overlay header a:hover {
1138                                 opacity: 1;
1139                         }
1140                         .reveal .overlay header a .icon {
1141                                 display: inline-block;
1142                                 width: 20px;
1143                                 height: 20px;
1144
1145                                 background-position: 50% 50%;
1146                                 background-size: 100%;
1147                                 background-repeat: no-repeat;
1148                         }
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);
1151                         }
1152                         .reveal .overlay header a.external .icon {
1153                                 background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAcElEQVRYR+2WSQoAIQwEzf8f7XiOMkUQxUPlGkM3hVmiQfQR9GYnH1SsAQlI4DiBqkCMoNb9y2e90IAEJPAcgdznU9+engMaeJ7Azh5Y1U67gAho4DqBqmB1buAf0MB1AlVBek83ZPkmJMGc1wAR+AAqod/B97TRpQAAAABJRU5ErkJggg==);
1154                         }
1155
1156         .reveal .overlay .viewport {
1157                 position: absolute;
1158                 top: 40px;
1159                 right: 0;
1160                 bottom: 0;
1161                 left: 0;
1162         }
1163
1164         .reveal .overlay.overlay-preview .viewport iframe {
1165                 width: 100%;
1166                 height: 100%;
1167                 max-width: 100%;
1168                 max-height: 100%;
1169                 border: 0;
1170
1171                 opacity: 0;
1172                 visibility: hidden;
1173                 transition: all 0.3s ease;
1174         }
1175
1176         .reveal .overlay.overlay-preview.loaded .viewport iframe {
1177                 opacity: 1;
1178                 visibility: visible;
1179         }
1180
1181         .reveal .overlay.overlay-preview.loaded .spinner {
1182                 opacity: 0;
1183                 visibility: hidden;
1184                 transform: scale(0.2);
1185         }
1186
1187         .reveal .overlay.overlay-help .viewport {
1188                 overflow: auto;
1189                 color: #fff;
1190         }
1191
1192         .reveal .overlay.overlay-help .viewport .viewport-inner {
1193                 width: 600px;
1194                 margin: 0 auto;
1195                 padding: 60px;
1196                 text-align: center;
1197                 letter-spacing: normal;
1198         }
1199
1200         .reveal .overlay.overlay-help .viewport .viewport-inner .title {
1201                 font-size: 20px;
1202         }
1203
1204         .reveal .overlay.overlay-help .viewport .viewport-inner table {
1205                 border: 1px solid #fff;
1206                 border-collapse: collapse;
1207                 font-size: 14px;
1208         }
1209
1210         .reveal .overlay.overlay-help .viewport .viewport-inner table th,
1211         .reveal .overlay.overlay-help .viewport .viewport-inner table td {
1212                 width: 200px;
1213                 padding: 10px;
1214                 border: 1px solid #fff;
1215                 vertical-align: middle;
1216         }
1217
1218         .reveal .overlay.overlay-help .viewport .viewport-inner table th {
1219                 padding-top: 20px;
1220                 padding-bottom: 20px;
1221         }
1222
1223
1224
1225 /*********************************************
1226  * PLAYBACK COMPONENT
1227  *********************************************/
1228
1229 .reveal .playback {
1230         position: fixed;
1231         left: 15px;
1232         bottom: 20px;
1233         z-index: 30;
1234         cursor: pointer;
1235         transition: all 400ms ease;
1236 }
1237
1238 .reveal.overview .playback {
1239         opacity: 0;
1240         visibility: hidden;
1241 }
1242
1243
1244 /*********************************************
1245  * ROLLING LINKS
1246  *********************************************/
1247
1248 .reveal .roll {
1249         display: inline-block;
1250         line-height: 1.2;
1251         overflow: hidden;
1252
1253         vertical-align: top;
1254         perspective: 400px;
1255         perspective-origin: 50% 50%;
1256 }
1257         .reveal .roll:hover {
1258                 background: none;
1259                 text-shadow: none;
1260         }
1261 .reveal .roll span {
1262         display: block;
1263         position: relative;
1264         padding: 0 2px;
1265
1266         pointer-events: none;
1267         transition: all 400ms ease;
1268         transform-origin: 50% 0%;
1269         transform-style: preserve-3d;
1270         backface-visibility: hidden;
1271 }
1272         .reveal .roll:hover span {
1273             background: rgba(0,0,0,0.5);
1274             transform: translate3d( 0px, 0px, -45px ) rotateX( 90deg );
1275         }
1276 .reveal .roll span:after {
1277         content: attr(data-title);
1278
1279         display: block;
1280         position: absolute;
1281         left: 0;
1282         top: 0;
1283         padding: 0 2px;
1284         backface-visibility: hidden;
1285         transform-origin: 50% 0%;
1286         transform: translate3d( 0px, 110%, 0px ) rotateX( -90deg );
1287 }
1288
1289
1290 /*********************************************
1291  * SPEAKER NOTES
1292  *********************************************/
1293
1294 // Hide on-page notes
1295 .reveal aside.notes {
1296         display: none;
1297 }
1298
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 {
1302         display: none;
1303         position: absolute;
1304         width: 70%;
1305         max-height: 15%;
1306         left: 15%;
1307         bottom: 26px;
1308         padding: 10px;
1309         z-index: 1;
1310         font-size: 18px;
1311         line-height: 1.4;
1312         color: #fff;
1313         background-color: rgba(0,0,0,0.5);
1314         overflow: auto;
1315         box-sizing: border-box;
1316         text-align: left;
1317         font-family: Helvetica, sans-serif;
1318         -webkit-overflow-scrolling: touch;
1319 }
1320
1321 .reveal .speaker-notes.visible:not(:empty) {
1322         display: block;
1323 }
1324
1325 @media screen and (max-width: 1024px) {
1326         .reveal .speaker-notes {
1327                 font-size: 14px;
1328         }
1329 }
1330
1331 @media screen and (max-width: 600px) {
1332         .reveal .speaker-notes {
1333                 width: 90%;
1334                 left: 5%;
1335         }
1336 }
1337
1338
1339 /*********************************************
1340  * ZOOM PLUGIN
1341  *********************************************/
1342
1343 .zoomed .reveal *,
1344 .zoomed .reveal *:before,
1345 .zoomed .reveal *:after {
1346         backface-visibility: visible !important;
1347 }
1348
1349 .zoomed .reveal .progress,
1350 .zoomed .reveal .controls {
1351         opacity: 0;
1352 }
1353
1354 .zoomed .reveal .roll span {
1355         background: none;
1356 }
1357
1358 .zoomed .reveal .roll span:after {
1359         visibility: hidden;
1360 }
1361
1362