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