css/reveal.css

   1 @charset "UTF-8";
   2
   3 /**
   4  * reveal.js
   5  * http://lab.hakim.se/reveal-js
   6  * MIT licensed
   7  *
   8  * Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se
   9  */
  10
  11
  12 /*********************************************
  13  * RESET STYLES
  14  *********************************************/
  15
  16 html, body, div, span, applet, object, iframe,
  17 h1, h2, h3, h4, h5, h6, p, blockquote, pre,
  18 a, abbr, acronym, address, big, cite, code,
  19 del, dfn, em, img, ins, kbd, q, s, samp,
  20 small, strike, strong, sub, sup, tt, var,
  21 b, u, i, center,
  22 dl, dt, dd, ol, ul, li,
  23 fieldset, form, label, legend,
  24 table, caption, tbody, tfoot, thead, tr, th, td,
  25 article, aside, canvas, details, embed,
  26 figure, figcaption, footer, header, hgroup,
  27 menu, nav, output, ruby, section, summary,
  28 time, mark, audio, video {
  29         margin: 0;
  30         padding: 0;
  31         border: 0;
  32         font-size: 100%;
  33         font: inherit;
  34         vertical-align: baseline;
  35 }
  36
  37 article, aside, details, figcaption, figure,
  38 footer, header, hgroup, menu, nav, section {
  39         display: block;
  40 }
  41
  42
  43 /*********************************************
  44  * GLOBAL STYLES
  45  *********************************************/
  46
  47 html,
  48 body {
  49         padding: 0;
  50         margin: 0;
  51         width: 100%;
  52         height: 100%;
  53         min-height: 600px;
  54         overflow: hidden;
  55 }
  56
  57 body {
  58         position: relative;
  59         line-height: 1;
  60 }
  61
  62 @media screen and (max-width: 900px) {
  63         body {
  64                 font-size: 30px;
  65         }
  66 }
  67
  68 ::selection {
  69         background:#FF5E99;
  70         color:#fff;
  71         text-shadow: none;
  72 }
  73
  74 /*********************************************
  75  * HEADERS
  76  *********************************************/
  77
  78 .reveal h1 { font-size: 3.77em; }
  79 .reveal h2 { font-size: 2.11em; }
  80 .reveal h3 { font-size: 1.55em; }
  81 .reveal h4 { font-size: 1em;    }
  82
  83
  84 /*********************************************
  85  * VIEW FRAGMENTS
  86  *********************************************/
  87
  88 .reveal .slides section .fragment {
  89         opacity: 0;
  90
  91         -webkit-transition: all .2s ease;
  92            -moz-transition: all .2s ease;
  93             -ms-transition: all .2s ease;
  94              -o-transition: all .2s ease;
  95                 transition: all .2s ease;
  96 }
  97         .reveal .slides section .fragment.visible {
  98                 opacity: 1;
  99         }
 100
 101
 102 /*********************************************
 103  * DEFAULT ELEMENT STYLES
 104  *********************************************/
 105
 106 .reveal .slides section {
 107         line-height: 1.2em;
 108         font-weight: normal;
 109 }
 110
 111 .reveal img {
 112         /* preserve aspect ratio and scale image so it's bound within the section */
 113         max-width: 100%;
 114         max-height: 100%;
 115 }
 116
 117 .reveal strong,
 118 .reveal b {
 119         font-weight: bold;
 120 }
 121
 122 .reveal em,
 123 .reveal i {
 124         font-style: italic;
 125 }
 126
 127 .reveal ol,
 128 .reveal ul {
 129         display: inline-block;
 130
 131         text-align: left;
 132         margin: 0 0 0 1em;
 133 }
 134
 135 .reveal ol {
 136         list-style-type: decimal;
 137 }
 138
 139 .reveal ul {
 140         list-style-type: disc;
 141 }
 142
 143 .reveal ul ul {
 144         list-style-type: square;
 145 }
 146
 147 .reveal ul ul ul {
 148         list-style-type: circle;
 149 }
 150
 151 .reveal ul ul,
 152 .reveal ul ol,
 153 .reveal ol ol,
 154 .reveal ol ul {
 155         display: block;
 156         margin-left: 40px;
 157 }
 158
 159 .reveal p {
 160         margin-bottom: 10px;
 161         line-height: 1.2em;
 162 }
 163
 164 .reveal q,
 165 .reveal blockquote {
 166         quotes: none;
 167 }
 168
 169 .reveal blockquote {
 170         display: block;
 171         position: relative;
 172         width: 70%;
 173         margin: 5px auto;
 174         padding: 5px;
 175
 176         font-style: italic;
 177         background: rgba(255, 255, 255, 0.05);
 178         box-shadow: 0px 0px 2px rgba(0,0,0,0.2);
 179 }
 180         .reveal blockquote:before {
 181                 content: '“';
 182         }
 183         .reveal blockquote:after {
 184                 content: '”';
 185         }
 186
 187 .reveal q {
 188         font-style: italic;
 189 }
 190         .reveal q:before {
 191                 content: '“';
 192         }
 193         .reveal q:after {
 194                 content: '”';
 195         }
 196
 197 .reveal pre {
 198         display: block;
 199         position: relative;
 200         width: 90%;
 201         margin: 10px auto;
 202
 203         text-align: left;
 204         font-size: 0.55em;
 205         font-family: monospace;
 206         line-height: 1.2em;
 207
 208         word-wrap: break-word;
 209
 210         box-shadow: 0px 0px 6px rgba(0,0,0,0.3);
 211 }
 212
 213 .reveal code {
 214         font-family: monospace;
 215         overflow: auto;
 216         max-height: 400px;
 217 }
 218
 219 .reveal table th,
 220 .reveal table td {
 221         text-align: left;
 222         padding-right: .3em;
 223 }
 224
 225 .reveal table th {
 226         text-shadow: rgb(255,255,255) 1px 1px 2px;
 227 }
 228
 229 .reveal sup {
 230         vertical-align: super;
 231 }
 232 .reveal sub {
 233         vertical-align: sub;
 234 }
 235
 236 .reveal small {
 237         display: inline-block;
 238         font-size: 0.6em;
 239         line-height: 1.2em;
 240         vertical-align: top;
 241 }
 242
 243 .reveal small * {
 244         vertical-align: top;
 245 }
 246
 247
 248 /*********************************************
 249  * CONTROLS
 250  *********************************************/
 251
 252 .reveal .controls {
 253         display: none;
 254         position: fixed;
 255         width: 100px;
 256         height: 100px;
 257         z-index: 30;
 258
 259         right: 0;
 260         bottom: 0;
 261 }
 262
 263         .reveal .controls a {
 264                 font-family: Arial;
 265                 font-size: 0.83em;
 266                 position: absolute;
 267                 opacity: 0.1;
 268         }
 269                 .reveal .controls a.enabled {
 270                         opacity: 0.6;
 271                 }
 272                 .reveal .controls a.enabled:active {
 273                         margin-top: 1px;
 274                 }
 275
 276         .reveal .controls .left {
 277                 top: 30px;
 278         }
 279
 280         .reveal .controls .right {
 281                 left: 60px;
 282                 top: 30px;
 283         }
 284
 285         .reveal .controls .up {
 286                 left: 30px;
 287         }
 288
 289         .reveal .controls .down {
 290                 left: 30px;
 291                 top: 60px;
 292         }
 293
 294
 295 /*********************************************
 296  * PROGRESS BAR
 297  *********************************************/
 298
 299 .reveal .progress {
 300         position: fixed;
 301         display: none;
 302         height: 3px;
 303         width: 100%;
 304         bottom: 0;
 305         left: 0;
 306 }
 307
 308         .reveal .progress span {
 309                 display: block;
 310                 height: 100%;
 311                 width: 0px;
 312
 313                 -webkit-transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
 314                    -moz-transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
 315                     -ms-transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
 316                      -o-transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
 317                         transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
 318         }
 319
 320
 321 /*********************************************
 322  * ROLLING LINKS
 323  *********************************************/
 324
 325 .reveal .roll {
 326         display: inline-block;
 327         line-height: 1.2;
 328         overflow: hidden;
 329
 330         vertical-align: top;
 331
 332         -webkit-perspective: 400px;
 333            -moz-perspective: 400px;
 334             -ms-perspective: 400px;
 335                 perspective: 400px;
 336
 337         -webkit-perspective-origin: 50% 50%;
 338            -moz-perspective-origin: 50% 50%;
 339             -ms-perspective-origin: 50% 50%;
 340                 perspective-origin: 50% 50%;
 341 }
 342         .reveal .roll:hover {
 343                 background: none;
 344                 text-shadow: none;
 345         }
 346 .reveal .roll span {
 347         display: block;
 348         position: relative;
 349         padding: 0 2px;
 350
 351         pointer-events: none;
 352
 353         -webkit-transition: all 400ms ease;
 354            -moz-transition: all 400ms ease;
 355             -ms-transition: all 400ms ease;
 356                 transition: all 400ms ease;
 357
 358         -webkit-transform-origin: 50% 0%;
 359            -moz-transform-origin: 50% 0%;
 360             -ms-transform-origin: 50% 0%;
 361                 transform-origin: 50% 0%;
 362
 363         -webkit-transform-style: preserve-3d;
 364            -moz-transform-style: preserve-3d;
 365             -ms-transform-style: preserve-3d;
 366                 transform-style: preserve-3d;
 367
 368         -webkit-backface-visibility: hidden;
 369            -moz-backface-visibility: hidden;
 370                 backface-visibility: hidden;
 371 }
 372         .reveal .roll:hover span {
 373             background: rgba(0,0,0,0.5);
 374
 375             -webkit-transform: translate3d( 0px, 0px, -45px ) rotateX( 90deg );
 376                -moz-transform: translate3d( 0px, 0px, -45px ) rotateX( 90deg );
 377                 -ms-transform: translate3d( 0px, 0px, -45px ) rotateX( 90deg );
 378                     transform: translate3d( 0px, 0px, -45px ) rotateX( 90deg );
 379         }
 380 .reveal .roll span:after {
 381         content: attr(data-title);
 382
 383         display: block;
 384         position: absolute;
 385         left: 0;
 386         top: 0;
 387         padding: 0 2px;
 388
 389         -webkit-transform-origin: 50% 0%;
 390            -moz-transform-origin: 50% 0%;
 391             -ms-transform-origin: 50% 0%;
 392                 transform-origin: 50% 0%;
 393
 394         -webkit-transform: translate3d( 0px, 110%, 0px ) rotateX( -90deg );
 395            -moz-transform: translate3d( 0px, 110%, 0px ) rotateX( -90deg );
 396             -ms-transform: translate3d( 0px, 110%, 0px ) rotateX( -90deg );
 397                 transform: translate3d( 0px, 110%, 0px ) rotateX( -90deg );
 398 }
 399
 400
 401 /*********************************************
 402  * SLIDES
 403  *********************************************/
 404
 405 .reveal .slides {
 406         position: absolute;
 407         max-width: 900px;
 408         width: 80%;
 409         height: 60%;
 410         left: 50%;
 411         top: 50%;
 412         margin-top: -320px;
 413         padding: 20px 0px;
 414         overflow: visible;
 415
 416         text-align: center;
 417
 418         -webkit-transition: -webkit-perspective .4s ease;
 419            -moz-transition: -moz-perspective .4s ease;
 420             -ms-transition: -ms-perspective .4s ease;
 421              -o-transition: -o-perspective .4s ease;
 422                 transition: perspective .4s ease;
 423
 424         -webkit-perspective: 600px;
 425            -moz-perspective: 600px;
 426             -ms-perspective: 600px;
 427                 perspective: 600px;
 428
 429         -webkit-perspective-origin: 0% 25%;
 430            -moz-perspective-origin: 0% 25%;
 431             -ms-perspective-origin: 0% 25%;
 432                 perspective-origin: 0% 25%;
 433 }
 434
 435 .reveal .slides>section,
 436 .reveal .slides>section>section {
 437         display: none;
 438         position: absolute;
 439         width: 100%;
 440         min-height: 600px;
 441
 442         z-index: 10;
 443
 444         -webkit-transform-style: preserve-3d;
 445            -moz-transform-style: preserve-3d;
 446             -ms-transform-style: preserve-3d;
 447                 transform-style: preserve-3d;
 448
 449         -webkit-transition: all 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
 450            -moz-transition: all 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
 451             -ms-transition: all 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
 452              -o-transition: all 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
 453                 transition: all 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
 454 }
 455
 456 .reveal .slides>section.present {
 457         display: block;
 458         z-index: 11;
 459         opacity: 1;
 460 }
 461
 462 .reveal .slides>section {
 463         margin-left: -50%;
 464 }
 465
 466
 467 /*********************************************
 468  * DEFAULT TRANSITION
 469  *********************************************/
 470
 471 .reveal .slides>section.past {
 472         display: block;
 473         opacity: 0;
 474
 475         -webkit-transform: translate3d(-100%, 0, 0) rotateY(-90deg) translate3d(-100%, 0, 0);
 476            -moz-transform: translate3d(-100%, 0, 0) rotateY(-90deg) translate3d(-100%, 0, 0);
 477             -ms-transform: translate3d(-100%, 0, 0) rotateY(-90deg) translate3d(-100%, 0, 0);
 478                 transform: translate3d(-100%, 0, 0) rotateY(-90deg) translate3d(-100%, 0, 0);
 479 }
 480 .reveal .slides>section.future {
 481         display: block;
 482         opacity: 0;
 483
 484         -webkit-transform: translate3d(100%, 0, 0) rotateY(90deg) translate3d(100%, 0, 0);
 485            -moz-transform: translate3d(100%, 0, 0) rotateY(90deg) translate3d(100%, 0, 0);
 486             -ms-transform: translate3d(100%, 0, 0) rotateY(90deg) translate3d(100%, 0, 0);
 487                 transform: translate3d(100%, 0, 0) rotateY(90deg) translate3d(100%, 0, 0);
 488 }
 489
 490 .reveal .slides>section>section.past {
 491         display: block;
 492         opacity: 0;
 493
 494         -webkit-transform: translate3d(0, -50%, 0) rotateX(70deg) translate3d(0, -50%, 0);
 495            -moz-transform: translate3d(0, -50%, 0) rotateX(70deg) translate3d(0, -50%, 0);
 496             -ms-transform: translate3d(0, -50%, 0) rotateX(70deg) translate3d(0, -50%, 0);
 497                 transform: translate3d(0, -50%, 0) rotateX(70deg) translate3d(0, -50%, 0);
 498 }
 499 .reveal .slides>section>section.future {
 500         display: block;
 501         opacity: 0;
 502
 503         -webkit-transform: translate3d(0, 50%, 0) rotateX(-70deg) translate3d(0, 50%, 0);
 504            -moz-transform: translate3d(0, 50%, 0) rotateX(-70deg) translate3d(0, 50%, 0);
 505             -ms-transform: translate3d(0, 50%, 0) rotateX(-70deg) translate3d(0, 50%, 0);
 506                 transform: translate3d(0, 50%, 0) rotateX(-70deg) translate3d(0, 50%, 0);
 507 }
 508
 509
 510 /*********************************************
 511  * CONCAVE TRANSITION
 512  *********************************************/
 513
 514 .reveal.concave  .slides>section.past {
 515         -webkit-transform: translate3d(-100%, 0, 0) rotateY(90deg) translate3d(-100%, 0, 0);
 516            -moz-transform: translate3d(-100%, 0, 0) rotateY(90deg) translate3d(-100%, 0, 0);
 517             -ms-transform: translate3d(-100%, 0, 0) rotateY(90deg) translate3d(-100%, 0, 0);
 518                 transform: translate3d(-100%, 0, 0) rotateY(90deg) translate3d(-100%, 0, 0);
 519 }
 520 .reveal.concave  .slides>section.future {
 521         -webkit-transform: translate3d(100%, 0, 0) rotateY(-90deg) translate3d(100%, 0, 0);
 522            -moz-transform: translate3d(100%, 0, 0) rotateY(-90deg) translate3d(100%, 0, 0);
 523             -ms-transform: translate3d(100%, 0, 0) rotateY(-90deg) translate3d(100%, 0, 0);
 524                 transform: translate3d(100%, 0, 0) rotateY(-90deg) translate3d(100%, 0, 0);
 525 }
 526
 527 .reveal.concave  .slides>section>section.past {
 528         -webkit-transform: translate3d(0, -80%, 0) rotateX(-70deg) translate3d(0, -80%, 0);
 529            -moz-transform: translate3d(0, -80%, 0) rotateX(-70deg) translate3d(0, -80%, 0);
 530             -ms-transform: translate3d(0, -80%, 0) rotateX(-70deg) translate3d(0, -80%, 0);
 531                 transform: translate3d(0, -80%, 0) rotateX(-70deg) translate3d(0, -80%, 0);
 532 }
 533 .reveal.concave  .slides>section>section.future {
 534         -webkit-transform: translate3d(0, 80%, 0) rotateX(70deg) translate3d(0, 80%, 0);
 535            -moz-transform: translate3d(0, 80%, 0) rotateX(70deg) translate3d(0, 80%, 0);
 536             -ms-transform: translate3d(0, 80%, 0) rotateX(70deg) translate3d(0, 80%, 0);
 537                 transform: translate3d(0, 80%, 0) rotateX(70deg) translate3d(0, 80%, 0);
 538 }
 539
 540
 541 /*********************************************
 542  * LINEAR TRANSITION
 543  *********************************************/
 544
 545 .reveal.linear .slides>section.past {
 546         -webkit-transform: translate(-150%, 0);
 547            -moz-transform: translate(-150%, 0);
 548             -ms-transform: translate(-150%, 0);
 549              -o-transform: translate(-150%, 0);
 550                 transform: translate(-150%, 0);
 551 }
 552 .reveal.linear .slides>section.future {
 553         -webkit-transform: translate(150%, 0);
 554            -moz-transform: translate(150%, 0);
 555             -ms-transform: translate(150%, 0);
 556              -o-transform: translate(150%, 0);
 557                 transform: translate(150%, 0);
 558 }
 559
 560 .reveal.linear .slides>section>section.past {
 561         -webkit-transform: translate(0, -150%);
 562            -moz-transform: translate(0, -150%);
 563             -ms-transform: translate(0, -150%);
 564              -o-transform: translate(0, -150%);
 565                 transform: translate(0, -150%);
 566 }
 567 .reveal.linear .slides>section>section.future {
 568         -webkit-transform: translate(0, 150%);
 569            -moz-transform: translate(0, 150%);
 570             -ms-transform: translate(0, 150%);
 571              -o-transform: translate(0, 150%);
 572                 transform: translate(0, 150%);
 573 }
 574
 575
 576 /*********************************************
 577  * CUBE TRANSITION
 578  *********************************************/
 579
 580 .reveal.cube .slides {
 581         margin-top: -350px;
 582
 583         -webkit-perspective-origin: 50% 25%;
 584            -moz-perspective-origin: 50% 25%;
 585             -ms-perspective-origin: 50% 25%;
 586                 perspective-origin: 50% 25%;
 587
 588         -webkit-perspective: 1300px;
 589            -moz-perspective: 1300px;
 590             -ms-perspective: 1300px;
 591                 perspective: 1300px;
 592 }
 593
 594 .reveal.cube .slides section {
 595         padding: 30px;
 596
 597         -webkit-backface-visibility: hidden;
 598            -moz-backface-visibility: hidden;
 599             -ms-backface-visibility: hidden;
 600                 backface-visibility: hidden;
 601
 602         -webkit-box-sizing: border-box;
 603            -moz-box-sizing: border-box;
 604                 box-sizing: border-box;
 605 }
 606         .reveal.cube .slides section:not(.stack):before {
 607                 content: '';
 608                 position: absolute;
 609                 display: block;
 610                 width: 100%;
 611                 height: 100%;
 612                 left: 0;
 613                 top: 0;
 614                 background: #232628;
 615                 border-radius: 4px;
 616
 617                 -webkit-transform: translateZ( -20px );
 618                    -moz-transform: translateZ( -20px );
 619                     -ms-transform: translateZ( -20px );
 620                      -o-transform: translateZ( -20px );
 621                         transform: translateZ( -20px );
 622         }
 623         .reveal.cube .slides section:not(.stack):after {
 624                 content: '';
 625                 position: absolute;
 626                 display: block;
 627                 width: 90%;
 628                 height: 30px;
 629                 left: 5%;
 630                 bottom: 0;
 631                 background: none;
 632                 z-index: 1;
 633
 634                 border-radius: 4px;
 635                 box-shadow: 0px 95px 25px rgba(0,0,0,0.2);
 636
 637                 -webkit-transform: translateZ(-90px) rotateX( 65deg );
 638                    -moz-transform: translateZ(-90px) rotateX( 65deg );
 639                     -ms-transform: translateZ(-90px) rotateX( 65deg );
 640                      -o-transform: translateZ(-90px) rotateX( 65deg );
 641                         transform: translateZ(-90px) rotateX( 65deg );
 642         }
 643
 644 .reveal.cube .slides>section.stack {
 645         padding: 0;
 646         background: none;
 647 }
 648
 649 .reveal.cube .slides>section.past {
 650         -webkit-transform-origin: 100% 0%;
 651            -moz-transform-origin: 100% 0%;
 652             -ms-transform-origin: 100% 0%;
 653                 transform-origin: 100% 0%;
 654
 655         -webkit-transform: translate3d(-100%, 0, 0) rotateY(-90deg);
 656            -moz-transform: translate3d(-100%, 0, 0) rotateY(-90deg);
 657             -ms-transform: translate3d(-100%, 0, 0) rotateY(-90deg);
 658                 transform: translate3d(-100%, 0, 0) rotateY(-90deg);
 659 }
 660
 661 .reveal.cube .slides>section.future {
 662         -webkit-transform-origin: 0% 0%;
 663            -moz-transform-origin: 0% 0%;
 664             -ms-transform-origin: 0% 0%;
 665                 transform-origin: 0% 0%;
 666
 667         -webkit-transform: translate3d(100%, 0, 0) rotateY(90deg);
 668            -moz-transform: translate3d(100%, 0, 0) rotateY(90deg);
 669             -ms-transform: translate3d(100%, 0, 0) rotateY(90deg);
 670                 transform: translate3d(100%, 0, 0) rotateY(90deg);
 671 }
 672
 673 .reveal.cube .slides>section>section.past {
 674         -webkit-transform-origin: 0% 100%;
 675            -moz-transform-origin: 0% 100%;
 676             -ms-transform-origin: 0% 100%;
 677                 transform-origin: 0% 100%;
 678
 679         -webkit-transform: translate3d(0, -100%, 0) rotateX(90deg);
 680            -moz-transform: translate3d(0, -100%, 0) rotateX(90deg);
 681             -ms-transform: translate3d(0, -100%, 0) rotateX(90deg);
 682                 transform: translate3d(0, -100%, 0) rotateX(90deg);
 683 }
 684
 685 .reveal.cube .slides>section>section.future {
 686         -webkit-transform-origin: 0% 0%;
 687            -moz-transform-origin: 0% 0%;
 688             -ms-transform-origin: 0% 0%;
 689                 transform-origin: 0% 0%;
 690
 691         -webkit-transform: translate3d(0, 100%, 0) rotateX(-90deg);
 692            -moz-transform: translate3d(0, 100%, 0) rotateX(-90deg);
 693             -ms-transform: translate3d(0, 100%, 0) rotateX(-90deg);
 694                 transform: translate3d(0, 100%, 0) rotateX(-90deg);
 695 }
 696
 697
 698 /*********************************************
 699  * PAGE TRANSITION
 700  *********************************************/
 701
 702 .reveal.page .slides {
 703         margin-top: -350px;
 704
 705         -webkit-perspective-origin: 50% 50%;
 706            -moz-perspective-origin: 50% 50%;
 707             -ms-perspective-origin: 50% 50%;
 708                 perspective-origin: 50% 50%;
 709
 710         -webkit-perspective: 3000px;
 711            -moz-perspective: 3000px;
 712             -ms-perspective: 3000px;
 713                 perspective: 3000px;
 714 }
 715
 716 .reveal.page .slides section {
 717         padding: 30px;
 718
 719         -webkit-box-sizing: border-box;
 720            -moz-box-sizing: border-box;
 721                 box-sizing: border-box;
 722 }
 723         .reveal.page .slides section.past {
 724                 z-index: 12;
 725         }
 726         .reveal.page .slides section:not(.stack):before {
 727                 content: '';
 728                 position: absolute;
 729                 display: block;
 730                 width: 100%;
 731                 height: 100%;
 732                 left: 0;
 733                 top: 0;
 734                 background: rgba(0,0,0,0.2);
 735
 736                 -webkit-transform: translateZ( -20px );
 737                    -moz-transform: translateZ( -20px );
 738                     -ms-transform: translateZ( -20px );
 739                      -o-transform: translateZ( -20px );
 740                         transform: translateZ( -20px );
 741         }
 742         .reveal.page .slides section:not(.stack):after {
 743                 content: '';
 744                 position: absolute;
 745                 display: block;
 746                 width: 90%;
 747                 height: 30px;
 748                 left: 5%;
 749                 bottom: 0;
 750                 background: none;
 751                 z-index: 1;
 752
 753                 border-radius: 4px;
 754                 box-shadow: 0px 95px 25px rgba(0,0,0,0.2);
 755
 756                 -webkit-transform: translateZ(-90px) rotateX( 65deg );
 757         }
 758
 759 .reveal.page .slides>section.stack {
 760         padding: 0;
 761         background: none;
 762 }
 763
 764 .reveal.page .slides>section.past {
 765         -webkit-transform-origin: 0% 0%;
 766            -moz-transform-origin: 0% 0%;
 767             -ms-transform-origin: 0% 0%;
 768                 transform-origin: 0% 0%;
 769
 770         -webkit-transform: translate3d(-40%, 0, 0) rotateY(-80deg);
 771            -moz-transform: translate3d(-40%, 0, 0) rotateY(-80deg);
 772             -ms-transform: translate3d(-40%, 0, 0) rotateY(-80deg);
 773                 transform: translate3d(-40%, 0, 0) rotateY(-80deg);
 774 }
 775
 776 .reveal.page .slides>section.future {
 777         -webkit-transform-origin: 100% 0%;
 778            -moz-transform-origin: 100% 0%;
 779             -ms-transform-origin: 100% 0%;
 780                 transform-origin: 100% 0%;
 781
 782         -webkit-transform: translate3d(0, 0, 0);
 783            -moz-transform: translate3d(0, 0, 0);
 784             -ms-transform: translate3d(0, 0, 0);
 785                 transform: translate3d(0, 0, 0);
 786 }
 787
 788 .reveal.page .slides>section>section.past {
 789         -webkit-transform-origin: 0% 0%;
 790            -moz-transform-origin: 0% 0%;
 791             -ms-transform-origin: 0% 0%;
 792                 transform-origin: 0% 0%;
 793
 794         -webkit-transform: translate3d(0, -40%, 0) rotateX(80deg);
 795            -moz-transform: translate3d(0, -40%, 0) rotateX(80deg);
 796             -ms-transform: translate3d(0, -40%, 0) rotateX(80deg);
 797                 transform: translate3d(0, -40%, 0) rotateX(80deg);
 798 }
 799
 800 .reveal.page .slides>section>section.future {
 801         -webkit-transform-origin: 0% 100%;
 802            -moz-transform-origin: 0% 100%;
 803             -ms-transform-origin: 0% 100%;
 804                 transform-origin: 0% 100%;
 805
 806         -webkit-transform: translate3d(0, 0, 0);
 807            -moz-transform: translate3d(0, 0, 0);
 808             -ms-transform: translate3d(0, 0, 0);
 809                 transform: translate3d(0, 0, 0);
 810 }
 811
 812
 813 /*********************************************
 814  * TILE-FLIP TRANSITION (CSS shader)
 815  *********************************************/
 816
 817 .reveal.tileflip .slides section.present {
 818         -webkit-transform: none;
 819         -webkit-transition-duration: 800ms;
 820
 821         -webkit-filter: custom( url(shaders/tile-flip.vs) mix(url(shaders/tile-flip.fs) multiply source-atop), 10 10 border-box detached, transform perspective(1000) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg),
 822                 amount 0, randomness 0, flipAxis 0 1 0, tileOutline 1
 823         );
 824 }
 825
 826 .reveal.tileflip .slides section.past {
 827         -webkit-transform: none;
 828         -webkit-transition-duration: 800ms;
 829
 830         -webkit-filter: custom( url(shaders/tile-flip.vs) mix(url(shaders/tile-flip.fs) multiply source-atop), 10 10 border-box detached, transform perspective(1000) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg),
 831                 amount 1, randomness 0, flipAxis 0 1 0, tileOutline 1
 832         );
 833 }
 834
 835 .reveal.tileflip .slides section.future {
 836         -webkit-transform: none;
 837         -webkit-transition-duration: 800ms;
 838
 839         -webkit-filter: custom( url(shaders/tile-flip.vs) mix(url(shaders/tile-flip.fs) multiply source-atop), 10 10 border-box detached, transform perspective(1000) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg),
 840                 amount 1, randomness 0, flipAxis 0 1 0, tileOutline 1
 841         );
 842 }
 843
 844 .reveal.tileflip .slides>section>section.present {
 845         -webkit-filter: custom( url(shaders/tile-flip.vs) mix(url(shaders/tile-flip.fs) multiply source-atop), 10 10 border-box detached, transform perspective(1000) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg),
 846                 amount 0, randomness 2, flipAxis 1 0 0, tileOutline 1
 847         );
 848 }
 849
 850 .reveal.tileflip .slides>section>section.past {
 851         -webkit-filter: custom( url(shaders/tile-flip.vs) mix(url(shaders/tile-flip.fs) multiply source-atop), 10 10 border-box detached, transform perspective(1000) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg),
 852                 amount 1, randomness 2, flipAxis 1 0 0, tileOutline 1
 853         );
 854 }
 855
 856 .reveal.tileflip .slides>section>section.future {
 857         -webkit-filter: custom( url(shaders/tile-flip.vs) mix(url(shaders/tile-flip.fs) multiply source-atop), 10 10 border-box detached, transform perspective(1000) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg),
 858                 amount 1, randomness 2, flipAxis 1 0 0, tileOutline 1
 859         );
 860 }
 861
 862
 863 /*********************************************
 864  * NO TRANSITION
 865  *********************************************/
 866
 867 .reveal.none .slides section {
 868         -webkit-transform: none;
 869            -moz-transform: none;
 870             -ms-transform: none;
 871              -o-transform: none;
 872                 transform: none;
 873
 874         -webkit-transition: none;
 875            -moz-transition: none;
 876             -ms-transition: none;
 877              -o-transition: none;
 878                 transition: none;
 879 }
 880
 881
 882 /*********************************************
 883  * OVERVIEW
 884  *********************************************/
 885
 886 .reveal.overview .slides {
 887         -webkit-perspective: 700px;
 888            -moz-perspective: 700px;
 889             -ms-perspective: 700px;
 890                 perspective: 700px;
 891 }
 892
 893 .reveal.overview .slides section {
 894         padding: 20px 0;
 895         max-height: 600px;
 896         overflow: hidden;
 897         opacity: 1;
 898         cursor: pointer;
 899         background: rgba(0,0,0,0.1);
 900 }
 901 .reveal.overview .slides section .fragment {
 902         opacity: 1;
 903 }
 904 .reveal.overview .slides section:after,
 905 .reveal.overview .slides section:before {
 906         display: none !important;
 907 }
 908 .reveal.overview .slides section>section {
 909         opacity: 1;
 910         cursor: pointer;
 911 }
 912         .reveal.overview .slides section:hover {
 913                 background: rgba(0,0,0,0.3);
 914         }
 915
 916         .reveal.overview .slides section.present {
 917                 background: rgba(0,0,0,0.3);
 918         }
 919 .reveal.overview .slides>section.stack {
 920         background: none;
 921         padding: 0;
 922         overflow: visible;
 923 }
 924
 925
 926 /*********************************************
 927  * FALLBACK
 928  *********************************************/
 929
 930 .no-transforms {
 931         overflow-y: auto;
 932 }
 933
 934 .no-transforms .slides section {
 935         display: block!important;
 936         opacity: 1!important;
 937         position: relative!important;
 938         height: auto;
 939         min-height: auto;
 940         margin-bottom: 100px;
 941
 942         -webkit-transform: none;
 943            -moz-transform: none;
 944             -ms-transform: none;
 945                 transform: none;
 946 }
 947
 948
 949 /*********************************************
 950  * DEFAULT STATES
 951  *********************************************/
 952
 953 .state-background {
 954         position: absolute;
 955         width: 100%;
 956         height: 100%;
 957         background: rgba( 0, 0, 0, 0 );
 958
 959         -webkit-transition: background 800ms ease;
 960            -moz-transition: background 800ms ease;
 961             -ms-transition: background 800ms ease;
 962              -o-transition: background 800ms ease;
 963                 transition: background 800ms ease;
 964 }
 965 .alert .state-background {
 966         background: rgba( 200, 50, 30, 0.6 );
 967 }
 968 .soothe .state-background {
 969         background: rgba( 50, 200, 90, 0.4 );
 970 }
 971 .blackout .state-background {
 972         background: rgba( 0, 0, 0, 0.6 );
 973 }
 974
 975
 976 /*********************************************
 977  * SPEAKER NOTES
 978  *********************************************/
 979
 980 .reveal aside.notes {
 981         display: none;
 982 }
 983
 984