css/reveal.scss

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