kornerr
/
2019-08_presentation-teaching-kids-to-program
1
0
Rozštěpit 0
Zdrojový kód Úkoly 0 Požadavky na natažení 0 Vydání 0 Wiki Aktivita
Слайды на основе Reveal.js для презентации обучения детей в 2018-м году для конференции eKIDS в августе 2019-го
Nelze vybrat více než 25 témat Téma musí začínat písmenem nebo číslem, může obsahovat pomlčky („-“) a může být dlouhé až 35 znaků.
2 Revize
1 Větev
16MB
Strom: 44d3410fb5
Větve Značky
${ item.name }
Vytvořit větev ${ searchTerm }
z „44d3410fb5“
${ noResults }
2019-08_presentation-teachi.../index.html

1951 řádky
63KB
Surový Blame Historie 

  1. <!doctype html>

  2. <html>

  3. 	<head>

  4. 		<meta charset="utf-8">

  5. 		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

  6. 

  7.         <style>

  8. /* reset.css */

  9. 

  10. /* http://meyerweb.com/eric/tools/css/reset/

  11.    v4.0 | 20180602

  12.    License: none (public domain)

  13. */

  14. html, body, div, span, applet, object, iframe,

  15. h1, h2, h3, h4, h5, h6, p, blockquote, pre,

  16. a, abbr, acronym, address, big, cite, code,

  17. del, dfn, em, img, ins, kbd, q, s, samp,

  18. small, strike, strong, sub, sup, tt, var,

  19. b, u, i, center,

  20. dl, dt, dd, ol, ul, li,

  21. fieldset, form, label, legend,

  22. table, caption, tbody, tfoot, thead, tr, th, td,

  23. article, aside, canvas, details, embed,

  24. figure, figcaption, footer, header, hgroup,

  25. main, menu, nav, output, ruby, section, summary,

  26. time, mark, audio, video {

  27.   margin: 0;

  28.   padding: 0;

  29.   border: 0;

  30.   font-size: 100%;

  31.   font: inherit;

  32.   vertical-align: baseline;

  33. }

  34. /* HTML5 display-role reset for older browsers */

  35. article, aside, details, figcaption, figure,

  36. footer, header, hgroup, main, menu, nav, section {

  37.   display: block;

  38. }

  39. 

  40. /*!

  41.  * reveal.js

  42.  * http://revealjs.com

  43.  * MIT licensed

  44.  *

  45.  * Copyright (C) 2019 Hakim El Hattab, http://hakim.se

  46.  */

  47. /*********************************************

  48.  * GLOBAL STYLES

  49.  *********************************************/

  50. html {

  51.   width: 100%;

  52.   height: 100%;

  53.   height: 100vh;

  54.   height: calc( var(--vh, 1vh) * 100);

  55.   overflow: hidden; }

  56. 

  57. body {

  58.   height: 100%;

  59.   overflow: hidden;

  60.   position: relative;

  61.   line-height: 1;

  62.   margin: 0;

  63.   background-color: #fff;

  64.   color: #000; }

  65. 

  66. /*********************************************

  67.  * VIEW FRAGMENTS

  68.  *********************************************/

  69. .reveal .slides section .fragment {

  70.   opacity: 0;

  71.   visibility: hidden;

  72.   transition: all .2s ease; }

  73.   .reveal .slides section .fragment.visible {

  74.     opacity: 1;

  75.     visibility: inherit; }

  76. 

  77. .reveal .slides section .fragment.grow {

  78.   opacity: 1;

  79.   visibility: inherit; }

  80.   .reveal .slides section .fragment.grow.visible {

  81.     -webkit-transform: scale(1.3);

  82.             transform: scale(1.3); }

  83. 

  84. .reveal .slides section .fragment.shrink {

  85.   opacity: 1;

  86.   visibility: inherit; }

  87.   .reveal .slides section .fragment.shrink.visible {

  88.     -webkit-transform: scale(0.7);

  89.             transform: scale(0.7); }

  90. 

  91. .reveal .slides section .fragment.zoom-in {

  92.   -webkit-transform: scale(0.1);

  93.           transform: scale(0.1); }

  94.   .reveal .slides section .fragment.zoom-in.visible {

  95.     -webkit-transform: none;

  96.             transform: none; }

  97. 

  98. .reveal .slides section .fragment.fade-out {

  99.   opacity: 1;

  100.   visibility: inherit; }

  101.   .reveal .slides section .fragment.fade-out.visible {

  102.     opacity: 0;

  103.     visibility: hidden; }

  104. 

  105. .reveal .slides section .fragment.semi-fade-out {

  106.   opacity: 1;

  107.   visibility: inherit; }

  108.   .reveal .slides section .fragment.semi-fade-out.visible {

  109.     opacity: 0.5;

  110.     visibility: inherit; }

  111. 

  112. .reveal .slides section .fragment.strike {

  113.   opacity: 1;

  114.   visibility: inherit; }

  115.   .reveal .slides section .fragment.strike.visible {

  116.     text-decoration: line-through; }

  117. 

  118. .reveal .slides section .fragment.fade-up {

  119.   -webkit-transform: translate(0, 20%);

  120.           transform: translate(0, 20%); }

  121.   .reveal .slides section .fragment.fade-up.visible {

  122.     -webkit-transform: translate(0, 0);

  123.             transform: translate(0, 0); }

  124. 

  125. .reveal .slides section .fragment.fade-down {

  126.   -webkit-transform: translate(0, -20%);

  127.           transform: translate(0, -20%); }

  128.   .reveal .slides section .fragment.fade-down.visible {

  129.     -webkit-transform: translate(0, 0);

  130.             transform: translate(0, 0); }

  131. 

  132. .reveal .slides section .fragment.fade-right {

  133.   -webkit-transform: translate(-20%, 0);

  134.           transform: translate(-20%, 0); }

  135.   .reveal .slides section .fragment.fade-right.visible {

  136.     -webkit-transform: translate(0, 0);

  137.             transform: translate(0, 0); }

  138. 

  139. .reveal .slides section .fragment.fade-left {

  140.   -webkit-transform: translate(20%, 0);

  141.           transform: translate(20%, 0); }

  142.   .reveal .slides section .fragment.fade-left.visible {

  143.     -webkit-transform: translate(0, 0);

  144.             transform: translate(0, 0); }

  145. 

  146. .reveal .slides section .fragment.fade-in-then-out,

  147. .reveal .slides section .fragment.current-visible {

  148.   opacity: 0;

  149.   visibility: hidden; }

  150.   .reveal .slides section .fragment.fade-in-then-out.current-fragment,

  151.   .reveal .slides section .fragment.current-visible.current-fragment {

  152.     opacity: 1;

  153.     visibility: inherit; }

  154. 

  155. .reveal .slides section .fragment.fade-in-then-semi-out {

  156.   opacity: 0;

  157.   visibility: hidden; }

  158.   .reveal .slides section .fragment.fade-in-then-semi-out.visible {

  159.     opacity: 0.5;

  160.     visibility: inherit; }

  161.   .reveal .slides section .fragment.fade-in-then-semi-out.current-fragment {

  162.     opacity: 1;

  163.     visibility: inherit; }

  164. 

  165. .reveal .slides section .fragment.highlight-red,

  166. .reveal .slides section .fragment.highlight-current-red,

  167. .reveal .slides section .fragment.highlight-green,

  168. .reveal .slides section .fragment.highlight-current-green,

  169. .reveal .slides section .fragment.highlight-blue,

  170. .reveal .slides section .fragment.highlight-current-blue {

  171.   opacity: 1;

  172.   visibility: inherit; }

  173. 

  174. .reveal .slides section .fragment.highlight-red.visible {

  175.   color: #ff2c2d; }

  176. 

  177. .reveal .slides section .fragment.highlight-green.visible {

  178.   color: #17ff2e; }

  179. 

  180. .reveal .slides section .fragment.highlight-blue.visible {

  181.   color: #1b91ff; }

  182. 

  183. .reveal .slides section .fragment.highlight-current-red.current-fragment {

  184.   color: #ff2c2d; }

  185. 

  186. .reveal .slides section .fragment.highlight-current-green.current-fragment {

  187.   color: #17ff2e; }

  188. 

  189. .reveal .slides section .fragment.highlight-current-blue.current-fragment {

  190.   color: #1b91ff; }

  191. 

  192. /*********************************************

  193.  * DEFAULT ELEMENT STYLES

  194.  *********************************************/

  195. /* Fixes issue in Chrome where italic fonts did not appear when printing to PDF */

  196. .reveal:after {

  197.   content: '';

  198.   font-style: italic; }

  199. 

  200. .reveal iframe {

  201.   z-index: 1; }

  202. 

  203. /** Prevents layering issues in certain browser/transition combinations */

  204. .reveal a {

  205.   position: relative; }

  206. 

  207. .reveal .stretch {

  208.   max-width: none;

  209.   max-height: none; }

  210. 

  211. .reveal pre.stretch code {

  212.   height: 100%;

  213.   max-height: 100%;

  214.   box-sizing: border-box; }

  215. 

  216. /*********************************************

  217.  * CONTROLS

  218.  *********************************************/

  219. @-webkit-keyframes bounce-right {

  220.   0%, 10%, 25%, 40%, 50% {

  221.     -webkit-transform: translateX(0);

  222.             transform: translateX(0); }

  223.   20% {

  224.     -webkit-transform: translateX(10px);

  225.             transform: translateX(10px); }

  226.   30% {

  227.     -webkit-transform: translateX(-5px);

  228.             transform: translateX(-5px); } }

  229. @keyframes bounce-right {

  230.   0%, 10%, 25%, 40%, 50% {

  231.     -webkit-transform: translateX(0);

  232.             transform: translateX(0); }

  233.   20% {

  234.     -webkit-transform: translateX(10px);

  235.             transform: translateX(10px); }

  236.   30% {

  237.     -webkit-transform: translateX(-5px);

  238.             transform: translateX(-5px); } }

  239. 

  240. @-webkit-keyframes bounce-down {

  241.   0%, 10%, 25%, 40%, 50% {

  242.     -webkit-transform: translateY(0);

  243.             transform: translateY(0); }

  244.   20% {

  245.     -webkit-transform: translateY(10px);

  246.             transform: translateY(10px); }

  247.   30% {

  248.     -webkit-transform: translateY(-5px);

  249.             transform: translateY(-5px); } }

  250. 

  251. @keyframes bounce-down {

  252.   0%, 10%, 25%, 40%, 50% {

  253.     -webkit-transform: translateY(0);

  254.             transform: translateY(0); }

  255.   20% {

  256.     -webkit-transform: translateY(10px);

  257.             transform: translateY(10px); }

  258.   30% {

  259.     -webkit-transform: translateY(-5px);

  260.             transform: translateY(-5px); } }

  261. 

  262. .reveal .controls {

  263.   display: none;

  264.   position: absolute;

  265.   top: auto;

  266.   bottom: 12px;

  267.   right: 12px;

  268.   left: auto;

  269.   z-index: 1;

  270.   color: #000;

  271.   pointer-events: none;

  272.   font-size: 10px; }

  273.   .reveal .controls button {

  274.     position: absolute;

  275.     padding: 0;

  276.     background-color: transparent;

  277.     border: 0;

  278.     outline: 0;

  279.     cursor: pointer;

  280.     color: currentColor;

  281.     -webkit-transform: scale(0.9999);

  282.             transform: scale(0.9999);

  283.     transition: color 0.2s ease, opacity 0.2s ease, -webkit-transform 0.2s ease;

  284.     transition: color 0.2s ease, opacity 0.2s ease, transform 0.2s ease;

  285.     z-index: 2;

  286.     pointer-events: auto;

  287.     font-size: inherit;

  288.     visibility: hidden;

  289.     opacity: 0;

  290.     -webkit-appearance: none;

  291.     -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }

  292.   .reveal .controls .controls-arrow:before,

  293.   .reveal .controls .controls-arrow:after {

  294.     content: '';

  295.     position: absolute;

  296.     top: 0;

  297.     left: 0;

  298.     width: 2.6em;

  299.     height: 0.5em;

  300.     border-radius: 0.25em;

  301.     background-color: currentColor;

  302.     transition: all 0.15s ease, background-color 0.8s ease;

  303.     -webkit-transform-origin: 0.2em 50%;

  304.             transform-origin: 0.2em 50%;

  305.     will-change: transform; }

  306.   .reveal .controls .controls-arrow {

  307.     position: relative;

  308.     width: 3.6em;

  309.     height: 3.6em; }

  310.     .reveal .controls .controls-arrow:before {

  311.       -webkit-transform: translateX(0.5em) translateY(1.55em) rotate(45deg);

  312.               transform: translateX(0.5em) translateY(1.55em) rotate(45deg); }

  313.     .reveal .controls .controls-arrow:after {

  314.       -webkit-transform: translateX(0.5em) translateY(1.55em) rotate(-45deg);

  315.               transform: translateX(0.5em) translateY(1.55em) rotate(-45deg); }

  316.     .reveal .controls .controls-arrow:hover:before {

  317.       -webkit-transform: translateX(0.5em) translateY(1.55em) rotate(40deg);

  318.               transform: translateX(0.5em) translateY(1.55em) rotate(40deg); }

  319.     .reveal .controls .controls-arrow:hover:after {

  320.       -webkit-transform: translateX(0.5em) translateY(1.55em) rotate(-40deg);

  321.               transform: translateX(0.5em) translateY(1.55em) rotate(-40deg); }

  322.     .reveal .controls .controls-arrow:active:before {

  323.       -webkit-transform: translateX(0.5em) translateY(1.55em) rotate(36deg);

  324.               transform: translateX(0.5em) translateY(1.55em) rotate(36deg); }

  325.     .reveal .controls .controls-arrow:active:after {

  326.       -webkit-transform: translateX(0.5em) translateY(1.55em) rotate(-36deg);

  327.               transform: translateX(0.5em) translateY(1.55em) rotate(-36deg); }

  328.   .reveal .controls .navigate-left {

  329.     right: 6.4em;

  330.     bottom: 3.2em;

  331.     -webkit-transform: translateX(-10px);

  332.             transform: translateX(-10px); }

  333.   .reveal .controls .navigate-right {

  334.     right: 0;

  335.     bottom: 3.2em;

  336.     -webkit-transform: translateX(10px);

  337.             transform: translateX(10px); }

  338.     .reveal .controls .navigate-right .controls-arrow {

  339.       -webkit-transform: rotate(180deg);

  340.               transform: rotate(180deg); }

  341.     .reveal .controls .navigate-right.highlight {

  342.       -webkit-animation: bounce-right 2s 50 both ease-out;

  343.               animation: bounce-right 2s 50 both ease-out; }

  344.   .reveal .controls .navigate-up {

  345.     right: 3.2em;

  346.     bottom: 6.4em;

  347.     -webkit-transform: translateY(-10px);

  348.             transform: translateY(-10px); }

  349.     .reveal .controls .navigate-up .controls-arrow {

  350.       -webkit-transform: rotate(90deg);

  351.               transform: rotate(90deg); }

  352.   .reveal .controls .navigate-down {

  353.     right: 3.2em;

  354.     bottom: 0;

  355.     -webkit-transform: translateY(10px);

  356.             transform: translateY(10px); }

  357.     .reveal .controls .navigate-down .controls-arrow {

  358.       -webkit-transform: rotate(-90deg);

  359.               transform: rotate(-90deg); }

  360.     .reveal .controls .navigate-down.highlight {

  361.       -webkit-animation: bounce-down 2s 50 both ease-out;

  362.               animation: bounce-down 2s 50 both ease-out; }

  363.   .reveal .controls[data-controls-back-arrows="faded"] .navigate-left.enabled,

  364.   .reveal .controls[data-controls-back-arrows="faded"] .navigate-up.enabled {

  365.     opacity: 0.3; }

  366.     .reveal .controls[data-controls-back-arrows="faded"] .navigate-left.enabled:hover,

  367.     .reveal .controls[data-controls-back-arrows="faded"] .navigate-up.enabled:hover {

  368.       opacity: 1; }

  369.   .reveal .controls[data-controls-back-arrows="hidden"] .navigate-left.enabled,

  370.   .reveal .controls[data-controls-back-arrows="hidden"] .navigate-up.enabled {

  371.     opacity: 0;

  372.     visibility: hidden; }

  373.   .reveal .controls .enabled {

  374.     visibility: visible;

  375.     opacity: 0.9;

  376.     cursor: pointer;

  377.     -webkit-transform: none;

  378.             transform: none; }

  379.   .reveal .controls .enabled.fragmented {

  380.     opacity: 0.5; }

  381.   .reveal .controls .enabled:hover,

  382.   .reveal .controls .enabled.fragmented:hover {

  383.     opacity: 1; }

  384. 

  385. .reveal[data-navigation-mode="linear"].has-horizontal-slides .navigate-up,

  386. .reveal[data-navigation-mode="linear"].has-horizontal-slides .navigate-down {

  387.   display: none; }

  388. 

  389. .reveal[data-navigation-mode="linear"].has-horizontal-slides .navigate-left,

  390. .reveal:not(.has-vertical-slides) .controls .navigate-left {

  391.   bottom: 1.4em;

  392.   right: 5.5em; }

  393. 

  394. .reveal[data-navigation-mode="linear"].has-horizontal-slides .navigate-right,

  395. .reveal:not(.has-vertical-slides) .controls .navigate-right {

  396.   bottom: 1.4em;

  397.   right: 0.5em; }

  398. 

  399. .reveal:not(.has-horizontal-slides) .controls .navigate-up {

  400.   right: 1.4em;

  401.   bottom: 5em; }

  402. 

  403. .reveal:not(.has-horizontal-slides) .controls .navigate-down {

  404.   right: 1.4em;

  405.   bottom: 0.5em; }

  406. 

  407. .reveal.has-dark-background .controls {

  408.   color: #fff; }

  409. 

  410. .reveal.has-light-background .controls {

  411.   color: #000; }

  412. 

  413. .reveal.no-hover .controls .controls-arrow:hover:before,

  414. .reveal.no-hover .controls .controls-arrow:active:before {

  415.   -webkit-transform: translateX(0.5em) translateY(1.55em) rotate(45deg);

  416.           transform: translateX(0.5em) translateY(1.55em) rotate(45deg); }

  417. 

  418. .reveal.no-hover .controls .controls-arrow:hover:after,

  419. .reveal.no-hover .controls .controls-arrow:active:after {

  420.   -webkit-transform: translateX(0.5em) translateY(1.55em) rotate(-45deg);

  421.           transform: translateX(0.5em) translateY(1.55em) rotate(-45deg); }

  422. 

  423. @media screen and (min-width: 500px) {

  424.   .reveal .controls[data-controls-layout="edges"] {

  425.     top: 0;

  426.     right: 0;

  427.     bottom: 0;

  428.     left: 0; }

  429.   .reveal .controls[data-controls-layout="edges"] .navigate-left,

  430.   .reveal .controls[data-controls-layout="edges"] .navigate-right,

  431.   .reveal .controls[data-controls-layout="edges"] .navigate-up,

  432.   .reveal .controls[data-controls-layout="edges"] .navigate-down {

  433.     bottom: auto;

  434.     right: auto; }

  435.   .reveal .controls[data-controls-layout="edges"] .navigate-left {

  436.     top: 50%;

  437.     left: 8px;

  438.     margin-top: -1.8em; }

  439.   .reveal .controls[data-controls-layout="edges"] .navigate-right {

  440.     top: 50%;

  441.     right: 8px;

  442.     margin-top: -1.8em; }

  443.   .reveal .controls[data-controls-layout="edges"] .navigate-up {

  444.     top: 8px;

  445.     left: 50%;

  446.     margin-left: -1.8em; }

  447.   .reveal .controls[data-controls-layout="edges"] .navigate-down {

  448.     bottom: 8px;

  449.     left: 50%;

  450.     margin-left: -1.8em; } }

  451. 

  452. /*********************************************

  453.  * PROGRESS BAR

  454.  *********************************************/

  455. .reveal .progress {

  456.   position: absolute;

  457.   display: none;

  458.   height: 3px;

  459.   width: 100%;

  460.   bottom: 0;

  461.   left: 0;

  462.   z-index: 10;

  463.   background-color: rgba(0, 0, 0, 0.2);

  464.   color: #fff; }

  465. 

  466. .reveal .progress:after {

  467.   content: '';

  468.   display: block;

  469.   position: absolute;

  470.   height: 10px;

  471.   width: 100%;

  472.   top: -10px; }

  473. 

  474. .reveal .progress span {

  475.   display: block;

  476.   height: 100%;

  477.   width: 0px;

  478.   background-color: currentColor;

  479.   transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); }

  480. 

  481. /*********************************************

  482.  * SLIDE NUMBER

  483.  *********************************************/

  484. .reveal .slide-number {

  485.   position: absolute;

  486.   display: block;

  487.   right: 8px;

  488.   bottom: 8px;

  489.   z-index: 31;

  490.   font-family: Helvetica, sans-serif;

  491.   font-size: 12px;

  492.   line-height: 1;

  493.   color: #fff;

  494.   background-color: rgba(0, 0, 0, 0.4);

  495.   padding: 5px; }

  496. 

  497. .reveal .slide-number a {

  498.   color: currentColor; }

  499. 

  500. .reveal .slide-number-delimiter {

  501.   margin: 0 3px; }

  502. 

  503. /*********************************************

  504.  * SLIDES

  505.  *********************************************/

  506. .reveal {

  507.   position: relative;

  508.   width: 100%;

  509.   height: 100%;

  510.   overflow: hidden;

  511.   -ms-touch-action: pinch-zoom;

  512.       touch-action: pinch-zoom; }

  513. 

  514. .reveal .slides {

  515.   position: absolute;

  516.   width: 100%;

  517.   height: 100%;

  518.   top: 0;

  519.   right: 0;

  520.   bottom: 0;

  521.   left: 0;

  522.   margin: auto;

  523.   pointer-events: none;

  524.   overflow: visible;

  525.   z-index: 1;

  526.   text-align: center;

  527.   -webkit-perspective: 600px;

  528.           perspective: 600px;

  529.   -webkit-perspective-origin: 50% 40%;

  530.           perspective-origin: 50% 40%; }

  531. 

  532. .reveal .slides > section {

  533.   -webkit-perspective: 600px;

  534.           perspective: 600px; }

  535. 

  536. .reveal .slides > section,

  537. .reveal .slides > section > section {

  538.   display: none;

  539.   position: absolute;

  540.   width: 100%;

  541.   padding: 20px 0px;

  542.   pointer-events: auto;

  543.   z-index: 10;

  544.   -webkit-transform-style: flat;

  545.           transform-style: flat;

  546.   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);

  547.   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); }

  548. 

  549. /* Global transition speed settings */

  550. .reveal[data-transition-speed="fast"] .slides section {

  551.   transition-duration: 400ms; }

  552. 

  553. .reveal[data-transition-speed="slow"] .slides section {

  554.   transition-duration: 1200ms; }

  555. 

  556. /* Slide-specific transition speed overrides */

  557. .reveal .slides section[data-transition-speed="fast"] {

  558.   transition-duration: 400ms; }

  559. 

  560. .reveal .slides section[data-transition-speed="slow"] {

  561.   transition-duration: 1200ms; }

  562. 

  563. .reveal .slides > section.stack {

  564.   padding-top: 0;

  565.   padding-bottom: 0;

  566.   pointer-events: none;

  567.   height: 100%; }

  568. 

  569. .reveal .slides > section.present,

  570. .reveal .slides > section > section.present {

  571.   display: block;

  572.   z-index: 11;

  573.   opacity: 1; }

  574. 

  575. .reveal .slides > section:empty,

  576. .reveal .slides > section > section:empty,

  577. .reveal .slides > section[data-background-interactive],

  578. .reveal .slides > section > section[data-background-interactive] {

  579.   pointer-events: none; }

  580. 

  581. .reveal.center,

  582. .reveal.center .slides,

  583. .reveal.center .slides section {

  584.   min-height: 0 !important; }

  585. 

  586. /* Don't allow interaction with invisible slides */

  587. .reveal .slides > section.future,

  588. .reveal .slides > section > section.future,

  589. .reveal .slides > section.past,

  590. .reveal .slides > section > section.past {

  591.   pointer-events: none; }

  592. 

  593. .reveal.overview .slides > section,

  594. .reveal.overview .slides > section > section {

  595.   pointer-events: auto; }

  596. 

  597. .reveal .slides > section.past,

  598. .reveal .slides > section.future,

  599. .reveal .slides > section > section.past,

  600. .reveal .slides > section > section.future {

  601.   opacity: 0; }

  602. 

  603. /*********************************************

  604.  * Mixins for readability of transitions

  605.  *********************************************/

  606. /*********************************************

  607.  * SLIDE TRANSITION

  608.  * Aliased 'linear' for backwards compatibility

  609.  *********************************************/

  610. .reveal.slide section {

  611.   -webkit-backface-visibility: hidden;

  612.           backface-visibility: hidden; }

  613. 

  614. .reveal .slides > section[data-transition=slide].past,

  615. .reveal .slides > section[data-transition~=slide-out].past,

  616. .reveal.slide .slides > section:not([data-transition]).past {

  617.   -webkit-transform: translate(-150%, 0);

  618.           transform: translate(-150%, 0); }

  619. 

  620. .reveal .slides > section[data-transition=slide].future,

  621. .reveal .slides > section[data-transition~=slide-in].future,

  622. .reveal.slide .slides > section:not([data-transition]).future {

  623.   -webkit-transform: translate(150%, 0);

  624.           transform: translate(150%, 0); }

  625. 

  626. .reveal .slides > section > section[data-transition=slide].past,

  627. .reveal .slides > section > section[data-transition~=slide-out].past,

  628. .reveal.slide .slides > section > section:not([data-transition]).past {

  629.   -webkit-transform: translate(0, -150%);

  630.           transform: translate(0, -150%); }

  631. 

  632. .reveal .slides > section > section[data-transition=slide].future,

  633. .reveal .slides > section > section[data-transition~=slide-in].future,

  634. .reveal.slide .slides > section > section:not([data-transition]).future {

  635.   -webkit-transform: translate(0, 150%);

  636.           transform: translate(0, 150%); }

  637. 

  638. .reveal.linear section {

  639.   -webkit-backface-visibility: hidden;

  640.           backface-visibility: hidden; }

  641. 

  642. .reveal .slides > section[data-transition=linear].past,

  643. .reveal .slides > section[data-transition~=linear-out].past,

  644. .reveal.linear .slides > section:not([data-transition]).past {

  645.   -webkit-transform: translate(-150%, 0);

  646.           transform: translate(-150%, 0); }

  647. 

  648. .reveal .slides > section[data-transition=linear].future,

  649. .reveal .slides > section[data-transition~=linear-in].future,

  650. .reveal.linear .slides > section:not([data-transition]).future {

  651.   -webkit-transform: translate(150%, 0);

  652.           transform: translate(150%, 0); }

  653. 

  654. .reveal .slides > section > section[data-transition=linear].past,

  655. .reveal .slides > section > section[data-transition~=linear-out].past,

  656. .reveal.linear .slides > section > section:not([data-transition]).past {

  657.   -webkit-transform: translate(0, -150%);

  658.           transform: translate(0, -150%); }

  659. 

  660. .reveal .slides > section > section[data-transition=linear].future,

  661. .reveal .slides > section > section[data-transition~=linear-in].future,

  662. .reveal.linear .slides > section > section:not([data-transition]).future {

  663.   -webkit-transform: translate(0, 150%);

  664.           transform: translate(0, 150%); }

  665. 

  666. /*********************************************

  667.  * CONVEX TRANSITION

  668.  * Aliased 'default' for backwards compatibility

  669.  *********************************************/

  670. .reveal .slides section[data-transition=default].stack,

  671. .reveal.default .slides section.stack {

  672.   -webkit-transform-style: preserve-3d;

  673.           transform-style: preserve-3d; }

  674. 

  675. .reveal .slides > section[data-transition=default].past,

  676. .reveal .slides > section[data-transition~=default-out].past,

  677. .reveal.default .slides > section:not([data-transition]).past {

  678.   -webkit-transform: translate3d(-100%, 0, 0) rotateY(-90deg) translate3d(-100%, 0, 0);

  679.           transform: translate3d(-100%, 0, 0) rotateY(-90deg) translate3d(-100%, 0, 0); }

  680. 

  681. .reveal .slides > section[data-transition=default].future,

  682. .reveal .slides > section[data-transition~=default-in].future,

  683. .reveal.default .slides > section:not([data-transition]).future {

  684.   -webkit-transform: translate3d(100%, 0, 0) rotateY(90deg) translate3d(100%, 0, 0);

  685.           transform: translate3d(100%, 0, 0) rotateY(90deg) translate3d(100%, 0, 0); }

  686. 

  687. .reveal .slides > section > section[data-transition=default].past,

  688. .reveal .slides > section > section[data-transition~=default-out].past,

  689. .reveal.default .slides > section > section:not([data-transition]).past {

  690.   -webkit-transform: translate3d(0, -300px, 0) rotateX(70deg) translate3d(0, -300px, 0);

  691.           transform: translate3d(0, -300px, 0) rotateX(70deg) translate3d(0, -300px, 0); }

  692. 

  693. .reveal .slides > section > section[data-transition=default].future,

  694. .reveal .slides > section > section[data-transition~=default-in].future,

  695. .reveal.default .slides > section > section:not([data-transition]).future {

  696.   -webkit-transform: translate3d(0, 300px, 0) rotateX(-70deg) translate3d(0, 300px, 0);

  697.           transform: translate3d(0, 300px, 0) rotateX(-70deg) translate3d(0, 300px, 0); }

  698. 

  699. .reveal .slides section[data-transition=convex].stack,

  700. .reveal.convex .slides section.stack {

  701.   -webkit-transform-style: preserve-3d;

  702.           transform-style: preserve-3d; }

  703. 

  704. .reveal .slides > section[data-transition=convex].past,

  705. .reveal .slides > section[data-transition~=convex-out].past,

  706. .reveal.convex .slides > section:not([data-transition]).past {

  707.   -webkit-transform: translate3d(-100%, 0, 0) rotateY(-90deg) translate3d(-100%, 0, 0);

  708.           transform: translate3d(-100%, 0, 0) rotateY(-90deg) translate3d(-100%, 0, 0); }

  709. 

  710. .reveal .slides > section[data-transition=convex].future,

  711. .reveal .slides > section[data-transition~=convex-in].future,

  712. .reveal.convex .slides > section:not([data-transition]).future {

  713.   -webkit-transform: translate3d(100%, 0, 0) rotateY(90deg) translate3d(100%, 0, 0);

  714.           transform: translate3d(100%, 0, 0) rotateY(90deg) translate3d(100%, 0, 0); }

  715. 

  716. .reveal .slides > section > section[data-transition=convex].past,

  717. .reveal .slides > section > section[data-transition~=convex-out].past,

  718. .reveal.convex .slides > section > section:not([data-transition]).past {

  719.   -webkit-transform: translate3d(0, -300px, 0) rotateX(70deg) translate3d(0, -300px, 0);

  720.           transform: translate3d(0, -300px, 0) rotateX(70deg) translate3d(0, -300px, 0); }

  721. 

  722. .reveal .slides > section > section[data-transition=convex].future,

  723. .reveal .slides > section > section[data-transition~=convex-in].future,

  724. .reveal.convex .slides > section > section:not([data-transition]).future {

  725.   -webkit-transform: translate3d(0, 300px, 0) rotateX(-70deg) translate3d(0, 300px, 0);

  726.           transform: translate3d(0, 300px, 0) rotateX(-70deg) translate3d(0, 300px, 0); }

  727. 

  728. /*********************************************

  729.  * CONCAVE TRANSITION

  730.  *********************************************/

  731. .reveal .slides section[data-transition=concave].stack,

  732. .reveal.concave .slides section.stack {

  733.   -webkit-transform-style: preserve-3d;

  734.           transform-style: preserve-3d; }

  735. 

  736. .reveal .slides > section[data-transition=concave].past,

  737. .reveal .slides > section[data-transition~=concave-out].past,

  738. .reveal.concave .slides > section:not([data-transition]).past {

  739.   -webkit-transform: translate3d(-100%, 0, 0) rotateY(90deg) translate3d(-100%, 0, 0);

  740.           transform: translate3d(-100%, 0, 0) rotateY(90deg) translate3d(-100%, 0, 0); }

  741. 

  742. .reveal .slides > section[data-transition=concave].future,

  743. .reveal .slides > section[data-transition~=concave-in].future,

  744. .reveal.concave .slides > section:not([data-transition]).future {

  745.   -webkit-transform: translate3d(100%, 0, 0) rotateY(-90deg) translate3d(100%, 0, 0);

  746.           transform: translate3d(100%, 0, 0) rotateY(-90deg) translate3d(100%, 0, 0); }

  747. 

  748. .reveal .slides > section > section[data-transition=concave].past,

  749. .reveal .slides > section > section[data-transition~=concave-out].past,

  750. .reveal.concave .slides > section > section:not([data-transition]).past {

  751.   -webkit-transform: translate3d(0, -80%, 0) rotateX(-70deg) translate3d(0, -80%, 0);

  752.           transform: translate3d(0, -80%, 0) rotateX(-70deg) translate3d(0, -80%, 0); }

  753. 

  754. .reveal .slides > section > section[data-transition=concave].future,

  755. .reveal .slides > section > section[data-transition~=concave-in].future,

  756. .reveal.concave .slides > section > section:not([data-transition]).future {

  757.   -webkit-transform: translate3d(0, 80%, 0) rotateX(70deg) translate3d(0, 80%, 0);

  758.           transform: translate3d(0, 80%, 0) rotateX(70deg) translate3d(0, 80%, 0); }

  759. 

  760. /*********************************************

  761.  * ZOOM TRANSITION

  762.  *********************************************/

  763. .reveal .slides section[data-transition=zoom],

  764. .reveal.zoom .slides section:not([data-transition]) {

  765.   transition-timing-function: ease; }

  766. 

  767. .reveal .slides > section[data-transition=zoom].past,

  768. .reveal .slides > section[data-transition~=zoom-out].past,

  769. .reveal.zoom .slides > section:not([data-transition]).past {

  770.   visibility: hidden;

  771.   -webkit-transform: scale(16);

  772.           transform: scale(16); }

  773. 

  774. .reveal .slides > section[data-transition=zoom].future,

  775. .reveal .slides > section[data-transition~=zoom-in].future,

  776. .reveal.zoom .slides > section:not([data-transition]).future {

  777.   visibility: hidden;

  778.   -webkit-transform: scale(0.2);

  779.           transform: scale(0.2); }

  780. 

  781. .reveal .slides > section > section[data-transition=zoom].past,

  782. .reveal .slides > section > section[data-transition~=zoom-out].past,

  783. .reveal.zoom .slides > section > section:not([data-transition]).past {

  784.   -webkit-transform: scale(16);

  785.           transform: scale(16); }

  786. 

  787. .reveal .slides > section > section[data-transition=zoom].future,

  788. .reveal .slides > section > section[data-transition~=zoom-in].future,

  789. .reveal.zoom .slides > section > section:not([data-transition]).future {

  790.   -webkit-transform: scale(0.2);

  791.           transform: scale(0.2); }

  792. 

  793. /*********************************************

  794.  * CUBE TRANSITION

  795.  *

  796.  * WARNING:

  797.  * this is deprecated and will be removed in a

  798.  * future version.

  799.  *********************************************/

  800. .reveal.cube .slides {

  801.   -webkit-perspective: 1300px;

  802.           perspective: 1300px; }

  803. 

  804. .reveal.cube .slides section {

  805.   padding: 30px;

  806.   min-height: 700px;

  807.   -webkit-backface-visibility: hidden;

  808.           backface-visibility: hidden;

  809.   box-sizing: border-box;

  810.   -webkit-transform-style: preserve-3d;

  811.           transform-style: preserve-3d; }

  812. 

  813. .reveal.center.cube .slides section {

  814.   min-height: 0; }

  815. 

  816. .reveal.cube .slides section:not(.stack):before {

  817.   content: '';

  818.   position: absolute;

  819.   display: block;

  820.   width: 100%;

  821.   height: 100%;

  822.   left: 0;

  823.   top: 0;

  824.   background: rgba(0, 0, 0, 0.1);

  825.   border-radius: 4px;

  826.   -webkit-transform: translateZ(-20px);

  827.           transform: translateZ(-20px); }

  828. 

  829. .reveal.cube .slides section:not(.stack):after {

  830.   content: '';

  831.   position: absolute;

  832.   display: block;

  833.   width: 90%;

  834.   height: 30px;

  835.   left: 5%;

  836.   bottom: 0;

  837.   background: none;

  838.   z-index: 1;

  839.   border-radius: 4px;

  840.   box-shadow: 0px 95px 25px rgba(0, 0, 0, 0.2);

  841.   -webkit-transform: translateZ(-90px) rotateX(65deg);

  842.           transform: translateZ(-90px) rotateX(65deg); }

  843. 

  844. .reveal.cube .slides > section.stack {

  845.   padding: 0;

  846.   background: none; }

  847. 

  848. .reveal.cube .slides > section.past {

  849.   -webkit-transform-origin: 100% 0%;

  850.           transform-origin: 100% 0%;

  851.   -webkit-transform: translate3d(-100%, 0, 0) rotateY(-90deg);

  852.           transform: translate3d(-100%, 0, 0) rotateY(-90deg); }

  853. 

  854. .reveal.cube .slides > section.future {

  855.   -webkit-transform-origin: 0% 0%;

  856.           transform-origin: 0% 0%;

  857.   -webkit-transform: translate3d(100%, 0, 0) rotateY(90deg);

  858.           transform: translate3d(100%, 0, 0) rotateY(90deg); }

  859. 

  860. .reveal.cube .slides > section > section.past {

  861.   -webkit-transform-origin: 0% 100%;

  862.           transform-origin: 0% 100%;

  863.   -webkit-transform: translate3d(0, -100%, 0) rotateX(90deg);

  864.           transform: translate3d(0, -100%, 0) rotateX(90deg); }

  865. 

  866. .reveal.cube .slides > section > section.future {

  867.   -webkit-transform-origin: 0% 0%;

  868.           transform-origin: 0% 0%;

  869.   -webkit-transform: translate3d(0, 100%, 0) rotateX(-90deg);

  870.           transform: translate3d(0, 100%, 0) rotateX(-90deg); }

  871. 

  872. /*********************************************

  873.  * PAGE TRANSITION

  874.  *

  875.  * WARNING:

  876.  * this is deprecated and will be removed in a

  877.  * future version.

  878.  *********************************************/

  879. .reveal.page .slides {

  880.   -webkit-perspective-origin: 0% 50%;

  881.           perspective-origin: 0% 50%;

  882.   -webkit-perspective: 3000px;

  883.           perspective: 3000px; }

  884. 

  885. .reveal.page .slides section {

  886.   padding: 30px;

  887.   min-height: 700px;

  888.   box-sizing: border-box;

  889.   -webkit-transform-style: preserve-3d;

  890.           transform-style: preserve-3d; }

  891. 

  892. .reveal.page .slides section.past {

  893.   z-index: 12; }

  894. 

  895. .reveal.page .slides section:not(.stack):before {

  896.   content: '';

  897.   position: absolute;

  898.   display: block;

  899.   width: 100%;

  900.   height: 100%;

  901.   left: 0;

  902.   top: 0;

  903.   background: rgba(0, 0, 0, 0.1);

  904.   -webkit-transform: translateZ(-20px);

  905.           transform: translateZ(-20px); }

  906. 

  907. .reveal.page .slides section:not(.stack):after {

  908.   content: '';

  909.   position: absolute;

  910.   display: block;

  911.   width: 90%;

  912.   height: 30px;

  913.   left: 5%;

  914.   bottom: 0;

  915.   background: none;

  916.   z-index: 1;

  917.   border-radius: 4px;

  918.   box-shadow: 0px 95px 25px rgba(0, 0, 0, 0.2);

  919.   -webkit-transform: translateZ(-90px) rotateX(65deg); }

  920. 

  921. .reveal.page .slides > section.stack {

  922.   padding: 0;

  923.   background: none; }

  924. 

  925. .reveal.page .slides > section.past {

  926.   -webkit-transform-origin: 0% 0%;

  927.           transform-origin: 0% 0%;

  928.   -webkit-transform: translate3d(-40%, 0, 0) rotateY(-80deg);

  929.           transform: translate3d(-40%, 0, 0) rotateY(-80deg); }

  930. 

  931. .reveal.page .slides > section.future {

  932.   -webkit-transform-origin: 100% 0%;

  933.           transform-origin: 100% 0%;

  934.   -webkit-transform: translate3d(0, 0, 0);

  935.           transform: translate3d(0, 0, 0); }

  936. 

  937. .reveal.page .slides > section > section.past {

  938.   -webkit-transform-origin: 0% 0%;

  939.           transform-origin: 0% 0%;

  940.   -webkit-transform: translate3d(0, -40%, 0) rotateX(80deg);

  941.           transform: translate3d(0, -40%, 0) rotateX(80deg); }

  942. 

  943. .reveal.page .slides > section > section.future {

  944.   -webkit-transform-origin: 0% 100%;

  945.           transform-origin: 0% 100%;

  946.   -webkit-transform: translate3d(0, 0, 0);

  947.           transform: translate3d(0, 0, 0); }

  948. 

  949. /*********************************************

  950.  * FADE TRANSITION

  951.  *********************************************/

  952. .reveal .slides section[data-transition=fade],

  953. .reveal.fade .slides section:not([data-transition]),

  954. .reveal.fade .slides > section > section:not([data-transition]) {

  955.   -webkit-transform: none;

  956.           transform: none;

  957.   transition: opacity 0.5s; }

  958. 

  959. .reveal.fade.overview .slides section,

  960. .reveal.fade.overview .slides > section > section {

  961.   transition: none; }

  962. 

  963. /*********************************************

  964.  * NO TRANSITION

  965.  *********************************************/

  966. .reveal .slides section[data-transition=none],

  967. .reveal.none .slides section:not([data-transition]) {

  968.   -webkit-transform: none;

  969.           transform: none;

  970.   transition: none; }

  971. 

  972. /*********************************************

  973.  * PAUSED MODE

  974.  *********************************************/

  975. .reveal .pause-overlay {

  976.   position: absolute;

  977.   top: 0;

  978.   left: 0;

  979.   width: 100%;

  980.   height: 100%;

  981.   background: black;

  982.   visibility: hidden;

  983.   opacity: 0;

  984.   z-index: 100;

  985.   transition: all 1s ease; }

  986. 

  987. .reveal .pause-overlay .resume-button {

  988.   position: absolute;

  989.   bottom: 20px;

  990.   right: 20px;

  991.   color: #ccc;

  992.   border-radius: 2px;

  993.   padding: 6px 14px;

  994.   border: 2px solid #ccc;

  995.   font-size: 16px;

  996.   background: transparent;

  997.   cursor: pointer; }

  998.   .reveal .pause-overlay .resume-button:hover {

  999.     color: #fff;

  1000.     border-color: #fff; }

  1001. 

  1002. .reveal.paused .pause-overlay {

  1003.   visibility: visible;

  1004.   opacity: 1; }

  1005. 

  1006. /*********************************************

  1007.  * FALLBACK

  1008.  *********************************************/

  1009. .no-transforms {

  1010.   overflow-y: auto; }

  1011. 

  1012. .no-transforms .reveal {

  1013.   overflow: visible; }

  1014. 

  1015. .no-transforms .reveal .slides {

  1016.   position: relative;

  1017.   width: 80%;

  1018.   max-width: 1280px;

  1019.   height: auto;

  1020.   top: 0;

  1021.   margin: 0 auto;

  1022.   text-align: center; }

  1023. 

  1024. .no-transforms .reveal .controls,

  1025. .no-transforms .reveal .progress {

  1026.   display: none; }

  1027. 

  1028. .no-transforms .reveal .slides section {

  1029.   display: block;

  1030.   opacity: 1;

  1031.   position: relative;

  1032.   height: auto;

  1033.   min-height: 0;

  1034.   top: 0;

  1035.   left: 0;

  1036.   margin: 10vh 0;

  1037.   margin: 70px 0;

  1038.   -webkit-transform: none;

  1039.           transform: none; }

  1040. 

  1041. .reveal .no-transition,

  1042. .reveal .no-transition * {

  1043.   transition: none !important; }

  1044. 

  1045. /*********************************************

  1046.  * PER-SLIDE BACKGROUNDS

  1047.  *********************************************/

  1048. .reveal .backgrounds {

  1049.   position: absolute;

  1050.   width: 100%;

  1051.   height: 100%;

  1052.   top: 0;

  1053.   left: 0;

  1054.   -webkit-perspective: 600px;

  1055.           perspective: 600px; }

  1056. 

  1057. .reveal .slide-background {

  1058.   display: none;

  1059.   position: absolute;

  1060.   width: 100%;

  1061.   height: 100%;

  1062.   opacity: 0;

  1063.   visibility: hidden;

  1064.   overflow: hidden;

  1065.   background-color: rgba(0, 0, 0, 0);

  1066.   transition: all 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); }

  1067. 

  1068. .reveal .slide-background-content {

  1069.   position: absolute;

  1070.   width: 100%;

  1071.   height: 100%;

  1072.   background-position: 50% 50%;

  1073.   background-repeat: no-repeat;

  1074.   background-size: cover; }

  1075. 

  1076. .reveal .slide-background.stack {

  1077.   display: block; }

  1078. 

  1079. .reveal .slide-background.present {

  1080.   opacity: 1;

  1081.   visibility: visible;

  1082.   z-index: 2; }

  1083. 

  1084. .print-pdf .reveal .slide-background {

  1085.   opacity: 1 !important;

  1086.   visibility: visible !important; }

  1087. 

  1088. /* Video backgrounds */

  1089. .reveal .slide-background video {

  1090.   position: absolute;

  1091.   width: 100%;

  1092.   height: 100%;

  1093.   max-width: none;

  1094.   max-height: none;

  1095.   top: 0;

  1096.   left: 0;

  1097.   -o-object-fit: cover;

  1098.      object-fit: cover; }

  1099. 

  1100. .reveal .slide-background[data-background-size="contain"] video {

  1101.   -o-object-fit: contain;

  1102.      object-fit: contain; }

  1103. 

  1104. /* Immediate transition style */

  1105. .reveal[data-background-transition=none] > .backgrounds .slide-background,

  1106. .reveal > .backgrounds .slide-background[data-background-transition=none] {

  1107.   transition: none; }

  1108. 

  1109. /* Slide */

  1110. .reveal[data-background-transition=slide] > .backgrounds .slide-background,

  1111. .reveal > .backgrounds .slide-background[data-background-transition=slide] {

  1112.   opacity: 1;

  1113.   -webkit-backface-visibility: hidden;

  1114.           backface-visibility: hidden; }

  1115. 

  1116. .reveal[data-background-transition=slide] > .backgrounds .slide-background.past,

  1117. .reveal > .backgrounds .slide-background.past[data-background-transition=slide] {

  1118.   -webkit-transform: translate(-100%, 0);

  1119.           transform: translate(-100%, 0); }

  1120. 

  1121. .reveal[data-background-transition=slide] > .backgrounds .slide-background.future,

  1122. .reveal > .backgrounds .slide-background.future[data-background-transition=slide] {

  1123.   -webkit-transform: translate(100%, 0);

  1124.           transform: translate(100%, 0); }

  1125. 

  1126. .reveal[data-background-transition=slide] > .backgrounds .slide-background > .slide-background.past,

  1127. .reveal > .backgrounds .slide-background > .slide-background.past[data-background-transition=slide] {

  1128.   -webkit-transform: translate(0, -100%);

  1129.           transform: translate(0, -100%); }

  1130. 

  1131. .reveal[data-background-transition=slide] > .backgrounds .slide-background > .slide-background.future,

  1132. .reveal > .backgrounds .slide-background > .slide-background.future[data-background-transition=slide] {

  1133.   -webkit-transform: translate(0, 100%);

  1134.           transform: translate(0, 100%); }

  1135. 

  1136. /* Convex */

  1137. .reveal[data-background-transition=convex] > .backgrounds .slide-background.past,

  1138. .reveal > .backgrounds .slide-background.past[data-background-transition=convex] {

  1139.   opacity: 0;

  1140.   -webkit-transform: translate3d(-100%, 0, 0) rotateY(-90deg) translate3d(-100%, 0, 0);

  1141.           transform: translate3d(-100%, 0, 0) rotateY(-90deg) translate3d(-100%, 0, 0); }

  1142. 

  1143. .reveal[data-background-transition=convex] > .backgrounds .slide-background.future,

  1144. .reveal > .backgrounds .slide-background.future[data-background-transition=convex] {

  1145.   opacity: 0;

  1146.   -webkit-transform: translate3d(100%, 0, 0) rotateY(90deg) translate3d(100%, 0, 0);

  1147.           transform: translate3d(100%, 0, 0) rotateY(90deg) translate3d(100%, 0, 0); }

  1148. 

  1149. .reveal[data-background-transition=convex] > .backgrounds .slide-background > .slide-background.past,

  1150. .reveal > .backgrounds .slide-background > .slide-background.past[data-background-transition=convex] {

  1151.   opacity: 0;

  1152.   -webkit-transform: translate3d(0, -100%, 0) rotateX(90deg) translate3d(0, -100%, 0);

  1153.           transform: translate3d(0, -100%, 0) rotateX(90deg) translate3d(0, -100%, 0); }

  1154. 

  1155. .reveal[data-background-transition=convex] > .backgrounds .slide-background > .slide-background.future,

  1156. .reveal > .backgrounds .slide-background > .slide-background.future[data-background-transition=convex] {

  1157.   opacity: 0;

  1158.   -webkit-transform: translate3d(0, 100%, 0) rotateX(-90deg) translate3d(0, 100%, 0);

  1159.           transform: translate3d(0, 100%, 0) rotateX(-90deg) translate3d(0, 100%, 0); }

  1160. 

  1161. /* Concave */

  1162. .reveal[data-background-transition=concave] > .backgrounds .slide-background.past,

  1163. .reveal > .backgrounds .slide-background.past[data-background-transition=concave] {

  1164.   opacity: 0;

  1165.   -webkit-transform: translate3d(-100%, 0, 0) rotateY(90deg) translate3d(-100%, 0, 0);

  1166.           transform: translate3d(-100%, 0, 0) rotateY(90deg) translate3d(-100%, 0, 0); }

  1167. 

  1168. .reveal[data-background-transition=concave] > .backgrounds .slide-background.future,

  1169. .reveal > .backgrounds .slide-background.future[data-background-transition=concave] {

  1170.   opacity: 0;

  1171.   -webkit-transform: translate3d(100%, 0, 0) rotateY(-90deg) translate3d(100%, 0, 0);

  1172.           transform: translate3d(100%, 0, 0) rotateY(-90deg) translate3d(100%, 0, 0); }

  1173. 

  1174. .reveal[data-background-transition=concave] > .backgrounds .slide-background > .slide-background.past,

  1175. .reveal > .backgrounds .slide-background > .slide-background.past[data-background-transition=concave] {

  1176.   opacity: 0;

  1177.   -webkit-transform: translate3d(0, -100%, 0) rotateX(-90deg) translate3d(0, -100%, 0);

  1178.           transform: translate3d(0, -100%, 0) rotateX(-90deg) translate3d(0, -100%, 0); }

  1179. 

  1180. .reveal[data-background-transition=concave] > .backgrounds .slide-background > .slide-background.future,

  1181. .reveal > .backgrounds .slide-background > .slide-background.future[data-background-transition=concave] {

  1182.   opacity: 0;

  1183.   -webkit-transform: translate3d(0, 100%, 0) rotateX(90deg) translate3d(0, 100%, 0);

  1184.           transform: translate3d(0, 100%, 0) rotateX(90deg) translate3d(0, 100%, 0); }

  1185. 

  1186. /* Zoom */

  1187. .reveal[data-background-transition=zoom] > .backgrounds .slide-background,

  1188. .reveal > .backgrounds .slide-background[data-background-transition=zoom] {

  1189.   transition-timing-function: ease; }

  1190. 

  1191. .reveal[data-background-transition=zoom] > .backgrounds .slide-background.past,

  1192. .reveal > .backgrounds .slide-background.past[data-background-transition=zoom] {

  1193.   opacity: 0;

  1194.   visibility: hidden;

  1195.   -webkit-transform: scale(16);

  1196.           transform: scale(16); }

  1197. 

  1198. .reveal[data-background-transition=zoom] > .backgrounds .slide-background.future,

  1199. .reveal > .backgrounds .slide-background.future[data-background-transition=zoom] {

  1200.   opacity: 0;

  1201.   visibility: hidden;

  1202.   -webkit-transform: scale(0.2);

  1203.           transform: scale(0.2); }

  1204. 

  1205. .reveal[data-background-transition=zoom] > .backgrounds .slide-background > .slide-background.past,

  1206. .reveal > .backgrounds .slide-background > .slide-background.past[data-background-transition=zoom] {

  1207.   opacity: 0;

  1208.   visibility: hidden;

  1209.   -webkit-transform: scale(16);

  1210.           transform: scale(16); }

  1211. 

  1212. .reveal[data-background-transition=zoom] > .backgrounds .slide-background > .slide-background.future,

  1213. .reveal > .backgrounds .slide-background > .slide-background.future[data-background-transition=zoom] {

  1214.   opacity: 0;

  1215.   visibility: hidden;

  1216.   -webkit-transform: scale(0.2);

  1217.           transform: scale(0.2); }

  1218. 

  1219. /* Global transition speed settings */

  1220. .reveal[data-transition-speed="fast"] > .backgrounds .slide-background {

  1221.   transition-duration: 400ms; }

  1222. 

  1223. .reveal[data-transition-speed="slow"] > .backgrounds .slide-background {

  1224.   transition-duration: 1200ms; }

  1225. 

  1226. /*********************************************

  1227.  * OVERVIEW

  1228.  *********************************************/

  1229. .reveal.overview {

  1230.   -webkit-perspective-origin: 50% 50%;

  1231.           perspective-origin: 50% 50%;

  1232.   -webkit-perspective: 700px;

  1233.           perspective: 700px; }

  1234.   .reveal.overview .slides {

  1235.     -moz-transform-style: preserve-3d; }

  1236.   .reveal.overview .slides section {

  1237.     height: 100%;

  1238.     top: 0 !important;

  1239.     opacity: 1 !important;

  1240.     overflow: hidden;

  1241.     visibility: visible !important;

  1242.     cursor: pointer;

  1243.     box-sizing: border-box; }

  1244.   .reveal.overview .slides section:hover,

  1245.   .reveal.overview .slides section.present {

  1246.     outline: 10px solid rgba(150, 150, 150, 0.4);

  1247.     outline-offset: 10px; }

  1248.   .reveal.overview .slides section .fragment {

  1249.     opacity: 1;

  1250.     transition: none; }

  1251.   .reveal.overview .slides section:after,

  1252.   .reveal.overview .slides section:before {

  1253.     display: none !important; }

  1254.   .reveal.overview .slides > section.stack {

  1255.     padding: 0;

  1256.     top: 0 !important;

  1257.     background: none;

  1258.     outline: none;

  1259.     overflow: visible; }

  1260.   .reveal.overview .backgrounds {

  1261.     -webkit-perspective: inherit;

  1262.             perspective: inherit;

  1263.     -moz-transform-style: preserve-3d; }

  1264.   .reveal.overview .backgrounds .slide-background {

  1265.     opacity: 1;

  1266.     visibility: visible;

  1267.     outline: 10px solid rgba(150, 150, 150, 0.1);

  1268.     outline-offset: 10px; }

  1269.   .reveal.overview .backgrounds .slide-background.stack {

  1270.     overflow: visible; }

  1271. 

  1272. .reveal.overview .slides section,

  1273. .reveal.overview-deactivating .slides section {

  1274.   transition: none; }

  1275. 

  1276. .reveal.overview .backgrounds .slide-background,

  1277. .reveal.overview-deactivating .backgrounds .slide-background {

  1278.   transition: none; }

  1279. 

  1280. /*********************************************

  1281.  * RTL SUPPORT

  1282.  *********************************************/

  1283. .reveal.rtl .slides,

  1284. .reveal.rtl .slides h1,

  1285. .reveal.rtl .slides h2,

  1286. .reveal.rtl .slides h3,

  1287. .reveal.rtl .slides h4,

  1288. .reveal.rtl .slides h5,

  1289. .reveal.rtl .slides h6 {

  1290.   direction: rtl;

  1291.   font-family: sans-serif; }

  1292. 

  1293. .reveal.rtl pre,

  1294. .reveal.rtl code {

  1295.   direction: ltr; }

  1296. 

  1297. .reveal.rtl ol,

  1298. .reveal.rtl ul {

  1299.   text-align: right; }

  1300. 

  1301. .reveal.rtl .progress span {

  1302.   float: right; }

  1303. 

  1304. /*********************************************

  1305.  * PARALLAX BACKGROUND

  1306.  *********************************************/

  1307. .reveal.has-parallax-background .backgrounds {

  1308.   transition: all 0.8s ease; }

  1309. 

  1310. /* Global transition speed settings */

  1311. .reveal.has-parallax-background[data-transition-speed="fast"] .backgrounds {

  1312.   transition-duration: 400ms; }

  1313. 

  1314. .reveal.has-parallax-background[data-transition-speed="slow"] .backgrounds {

  1315.   transition-duration: 1200ms; }

  1316. 

  1317. /*********************************************

  1318.  * OVERLAY FOR LINK PREVIEWS AND HELP

  1319.  *********************************************/

  1320. .reveal > .overlay {

  1321.   position: absolute;

  1322.   top: 0;

  1323.   left: 0;

  1324.   width: 100%;

  1325.   height: 100%;

  1326.   z-index: 1000;

  1327.   background: rgba(0, 0, 0, 0.9);

  1328.   opacity: 0;

  1329.   visibility: hidden;

  1330.   transition: all 0.3s ease; }

  1331. 

  1332. .reveal > .overlay.visible {

  1333.   opacity: 1;

  1334.   visibility: visible; }

  1335. 

  1336. .reveal > .overlay .spinner {

  1337.   position: absolute;

  1338.   display: block;

  1339.   top: 50%;

  1340.   left: 50%;

  1341.   width: 32px;

  1342.   height: 32px;

  1343.   margin: -16px 0 0 -16px;

  1344.   z-index: 10;

  1345.   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);

  1346.   visibility: visible;

  1347.   opacity: 0.6;

  1348.   transition: all 0.3s ease; }

  1349. 

  1350. .reveal > .overlay header {

  1351.   position: absolute;

  1352.   left: 0;

  1353.   top: 0;

  1354.   width: 100%;

  1355.   height: 40px;

  1356.   z-index: 2;

  1357.   border-bottom: 1px solid #222; }

  1358. 

  1359. .reveal > .overlay header a {

  1360.   display: inline-block;

  1361.   width: 40px;

  1362.   height: 40px;

  1363.   line-height: 36px;

  1364.   padding: 0 10px;

  1365.   float: right;

  1366.   opacity: 0.6;

  1367.   box-sizing: border-box; }

  1368. 

  1369. .reveal > .overlay header a:hover {

  1370.   opacity: 1; }

  1371. 

  1372. .reveal > .overlay header a .icon {

  1373.   display: inline-block;

  1374.   width: 20px;

  1375.   height: 20px;

  1376.   background-position: 50% 50%;

  1377.   background-size: 100%;

  1378.   background-repeat: no-repeat; }

  1379. 

  1380. .reveal > .overlay header a.close .icon {

  1381.   background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAABkklEQVRYR8WX4VHDMAxG6wnoJrABZQPYBCaBTWAD2g1gE5gg6OOsXuxIlr40d81dfrSJ9V4c2VLK7spHuTJ/5wpM07QXuXc5X0opX2tEJcadjHuV80li/FgxTIEK/5QBCICBD6xEhSMGHgQPgBgLiYVAB1dpSqKDawxTohFw4JSEA3clzgIBPCURwE2JucBR7rhPJJv5OpJwDX+SfDjgx1wACQeJG1aChP9K/IMmdZ8DtESV1WyP3Bt4MwM6sj4NMxMYiqUWHQu4KYA/SYkIjOsm3BXYWMKFDwU2khjCQ4ELJUJ4SmClRArOCmSXGuKma0fYD5CbzHxFpCSGAhfAVSSUGDUk2BWZaff2g6GE15BsBQ9nwmpIGDiyHQddwNTMKkbZaf9fajXQca1EX44puJZUsnY0ObGmITE3GVLCbEhQUjGVt146j6oasWN+49Vph2w1pZ5EansNZqKBm1txbU57iRRcZ86RWMDdWtBJUHBHwoQPi1GV+JCbntmvok7iTX4/Up9mgyTc/FJYDTcndgH/AA5A/CHsyEkVAAAAAElFTkSuQmCC); }

  1382. 

  1383. .reveal > .overlay header a.external .icon {

  1384.   background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAcElEQVRYR+2WSQoAIQwEzf8f7XiOMkUQxUPlGkM3hVmiQfQR9GYnH1SsAQlI4DiBqkCMoNb9y2e90IAEJPAcgdznU9+engMaeJ7Azh5Y1U67gAho4DqBqmB1buAf0MB1AlVBek83ZPkmJMGc1wAR+AAqod/B97TRpQAAAABJRU5ErkJggg==); }

  1385. 

  1386. .reveal > .overlay .viewport {

  1387.   position: absolute;

  1388.   display: -webkit-box;

  1389.   display: -ms-flexbox;

  1390.   display: flex;

  1391.   top: 40px;

  1392.   right: 0;

  1393.   bottom: 0;

  1394.   left: 0; }

  1395. 

  1396. .reveal > .overlay.overlay-preview .viewport iframe {

  1397.   width: 100%;

  1398.   height: 100%;

  1399.   max-width: 100%;

  1400.   max-height: 100%;

  1401.   border: 0;

  1402.   opacity: 0;

  1403.   visibility: hidden;

  1404.   transition: all 0.3s ease; }

  1405. 

  1406. .reveal > .overlay.overlay-preview.loaded .viewport iframe {

  1407.   opacity: 1;

  1408.   visibility: visible; }

  1409. 

  1410. .reveal > .overlay.overlay-preview.loaded .viewport-inner {

  1411.   position: absolute;

  1412.   z-index: -1;

  1413.   left: 0;

  1414.   top: 45%;

  1415.   width: 100%;

  1416.   text-align: center;

  1417.   letter-spacing: normal; }

  1418. 

  1419. .reveal > .overlay.overlay-preview .x-frame-error {

  1420.   opacity: 0;

  1421.   transition: opacity 0.3s ease 0.3s; }

  1422. 

  1423. .reveal > .overlay.overlay-preview.loaded .x-frame-error {

  1424.   opacity: 1; }

  1425. 

  1426. .reveal > .overlay.overlay-preview.loaded .spinner {

  1427.   opacity: 0;

  1428.   visibility: hidden;

  1429.   -webkit-transform: scale(0.2);

  1430.           transform: scale(0.2); }

  1431. 

  1432. .reveal > .overlay.overlay-help .viewport {

  1433.   overflow: auto;

  1434.   color: #fff; }

  1435. 

  1436. .reveal > .overlay.overlay-help .viewport .viewport-inner {

  1437.   width: 600px;

  1438.   margin: auto;

  1439.   padding: 20px 20px 80px 20px;

  1440.   text-align: center;

  1441.   letter-spacing: normal; }

  1442. 

  1443. .reveal > .overlay.overlay-help .viewport .viewport-inner .title {

  1444.   font-size: 20px; }

  1445. 

  1446. .reveal > .overlay.overlay-help .viewport .viewport-inner table {

  1447.   border: 1px solid #fff;

  1448.   border-collapse: collapse;

  1449.   font-size: 16px; }

  1450. 

  1451. .reveal > .overlay.overlay-help .viewport .viewport-inner table th,

  1452. .reveal > .overlay.overlay-help .viewport .viewport-inner table td {

  1453.   width: 200px;

  1454.   padding: 14px;

  1455.   border: 1px solid #fff;

  1456.   vertical-align: middle; }

  1457. 

  1458. .reveal > .overlay.overlay-help .viewport .viewport-inner table th {

  1459.   padding-top: 20px;

  1460.   padding-bottom: 20px; }

  1461. 

  1462. /*********************************************

  1463.  * PLAYBACK COMPONENT

  1464.  *********************************************/

  1465. .reveal .playback {

  1466.   position: absolute;

  1467.   left: 15px;

  1468.   bottom: 20px;

  1469.   z-index: 30;

  1470.   cursor: pointer;

  1471.   transition: all 400ms ease;

  1472.   -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }

  1473. 

  1474. .reveal.overview .playback {

  1475.   opacity: 0;

  1476.   visibility: hidden; }

  1477. 

  1478. /*********************************************

  1479.  * CODE HIGHLGIHTING

  1480.  *********************************************/

  1481. .reveal .hljs table {

  1482.   margin: initial; }

  1483. 

  1484. .reveal .hljs-ln-code,

  1485. .reveal .hljs-ln-numbers {

  1486.   padding: 0;

  1487.   border: 0; }

  1488. 

  1489. .reveal .hljs-ln-numbers {

  1490.   opacity: 0.6;

  1491.   padding-right: 0.75em;

  1492.   text-align: right;

  1493.   vertical-align: top; }

  1494. 

  1495. .reveal .hljs[data-line-numbers]:not([data-line-numbers=""]) tr:not(.highlight-line) {

  1496.   opacity: 0.4; }

  1497. 

  1498. /*********************************************

  1499.  * ROLLING LINKS

  1500.  *********************************************/

  1501. .reveal .roll {

  1502.   display: inline-block;

  1503.   line-height: 1.2;

  1504.   overflow: hidden;

  1505.   vertical-align: top;

  1506.   -webkit-perspective: 400px;

  1507.           perspective: 400px;

  1508.   -webkit-perspective-origin: 50% 50%;

  1509.           perspective-origin: 50% 50%; }

  1510. 

  1511. .reveal .roll:hover {

  1512.   background: none;

  1513.   text-shadow: none; }

  1514. 

  1515. .reveal .roll span {

  1516.   display: block;

  1517.   position: relative;

  1518.   padding: 0 2px;

  1519.   pointer-events: none;

  1520.   transition: all 400ms ease;

  1521.   -webkit-transform-origin: 50% 0%;

  1522.           transform-origin: 50% 0%;

  1523.   -webkit-transform-style: preserve-3d;

  1524.           transform-style: preserve-3d;

  1525.   -webkit-backface-visibility: hidden;

  1526.           backface-visibility: hidden; }

  1527. 

  1528. .reveal .roll:hover span {

  1529.   background: rgba(0, 0, 0, 0.5);

  1530.   -webkit-transform: translate3d(0px, 0px, -45px) rotateX(90deg);

  1531.           transform: translate3d(0px, 0px, -45px) rotateX(90deg); }

  1532. 

  1533. .reveal .roll span:after {

  1534.   content: attr(data-title);

  1535.   display: block;

  1536.   position: absolute;

  1537.   left: 0;

  1538.   top: 0;

  1539.   padding: 0 2px;

  1540.   -webkit-backface-visibility: hidden;

  1541.           backface-visibility: hidden;

  1542.   -webkit-transform-origin: 50% 0%;

  1543.           transform-origin: 50% 0%;

  1544.   -webkit-transform: translate3d(0px, 110%, 0px) rotateX(-90deg);

  1545.           transform: translate3d(0px, 110%, 0px) rotateX(-90deg); }

  1546. 

  1547. /*********************************************

  1548.  * SPEAKER NOTES

  1549.  *********************************************/

  1550. .reveal aside.notes {

  1551.   display: none; }

  1552. 

  1553. .reveal .speaker-notes {

  1554.   display: none;

  1555.   position: absolute;

  1556.   width: 33.3333333333%;

  1557.   height: 100%;

  1558.   top: 0;

  1559.   left: 100%;

  1560.   padding: 14px 18px 14px 18px;

  1561.   z-index: 1;

  1562.   font-size: 18px;

  1563.   line-height: 1.4;

  1564.   border: 1px solid rgba(0, 0, 0, 0.05);

  1565.   color: #222;

  1566.   background-color: #f5f5f5;

  1567.   overflow: auto;

  1568.   box-sizing: border-box;

  1569.   text-align: left;

  1570.   font-family: Helvetica, sans-serif;

  1571.   -webkit-overflow-scrolling: touch; }

  1572.   .reveal .speaker-notes .notes-placeholder {

  1573.     color: #ccc;

  1574.     font-style: italic; }

  1575.   .reveal .speaker-notes:focus {

  1576.     outline: none; }

  1577.   .reveal .speaker-notes:before {

  1578.     content: 'Speaker notes';

  1579.     display: block;

  1580.     margin-bottom: 10px;

  1581.     opacity: 0.5; }

  1582. 

  1583. .reveal.show-notes {

  1584.   max-width: 75%;

  1585.   overflow: visible; }

  1586. 

  1587. .reveal.show-notes .speaker-notes {

  1588.   display: block; }

  1589. 

  1590. @media screen and (min-width: 1600px) {

  1591.   .reveal .speaker-notes {

  1592.     font-size: 20px; } }

  1593. 

  1594. @media screen and (max-width: 1024px) {

  1595.   .reveal.show-notes {

  1596.     border-left: 0;

  1597.     max-width: none;

  1598.     max-height: 70%;

  1599.     max-height: 70vh;

  1600.     overflow: visible; }

  1601.   .reveal.show-notes .speaker-notes {

  1602.     top: 100%;

  1603.     left: 0;

  1604.     width: 100%;

  1605.     height: 42.8571428571%;

  1606.     height: 30vh;

  1607.     border: 0; } }

  1608. 

  1609. @media screen and (max-width: 600px) {

  1610.   .reveal.show-notes {

  1611.     max-height: 60%;

  1612.     max-height: 60vh; }

  1613.   .reveal.show-notes .speaker-notes {

  1614.     top: 100%;

  1615.     height: 66.6666666667%;

  1616.     height: 40vh; }

  1617.   .reveal .speaker-notes {

  1618.     font-size: 14px; } }

  1619. 

  1620. /*********************************************

  1621.  * ZOOM PLUGIN

  1622.  *********************************************/

  1623. .zoomed .reveal *,

  1624. .zoomed .reveal *:before,

  1625. .zoomed .reveal *:after {

  1626.   -webkit-backface-visibility: visible !important;

  1627.           backface-visibility: visible !important; }

  1628. 

  1629. .zoomed .reveal .progress,

  1630. .zoomed .reveal .controls {

  1631.   opacity: 0; }

  1632. 

  1633. .zoomed .reveal .roll span {

  1634.   background: none; }

  1635. 

  1636. .zoomed .reveal .roll span:after {

  1637.   visibility: hidden; }

  1638. 

  1639. /**

  1640.  * White theme for reveal.js. This is the opposite of the 'black' theme.

  1641.  *

  1642.  * By Hakim El Hattab, http://hakim.se

  1643.  */

  1644. /*@import url(../../lib/font/source-sans-pro/source-sans-pro.css);*/

  1645. section.has-dark-background, section.has-dark-background h1, section.has-dark-background h2, section.has-dark-background h3, section.has-dark-background h4, section.has-dark-background h5, section.has-dark-background h6 {

  1646.   color: #fff; }

  1647. 

  1648. /*********************************************

  1649.  * GLOBAL STYLES

  1650.  *********************************************/

  1651. body {

  1652.   background: #fff;

  1653.   background-color: #fff; }

  1654. 

  1655. .reveal {

  1656.   font-family: "Source Sans Pro", Helvetica, sans-serif;

  1657.   font-size: 42px;

  1658.   font-weight: normal;

  1659.   color: #222; }

  1660. 

  1661. ::selection {

  1662.   color: #fff;

  1663.   background: #98bdef;

  1664.   text-shadow: none; }

  1665. 

  1666. ::-moz-selection {

  1667.   color: #fff;

  1668.   background: #98bdef;

  1669.   text-shadow: none; }

  1670. 

  1671. .reveal .slides section,

  1672. .reveal .slides section > section {

  1673.   line-height: 1.3;

  1674.   font-weight: inherit; }

  1675. 

  1676. /*********************************************

  1677.  * HEADERS

  1678.  *********************************************/

  1679. .reveal h1,

  1680. .reveal h2,

  1681. .reveal h3,

  1682. .reveal h4,

  1683. .reveal h5,

  1684. .reveal h6 {

  1685.   margin: 0 0 20px 0;

  1686.   color: #222;

  1687.   font-family: "Source Sans Pro", Helvetica, sans-serif;

  1688.   font-weight: 600;

  1689.   line-height: 1.2;

  1690.   letter-spacing: normal;

  1691.   text-transform: uppercase;

  1692.   text-shadow: none;

  1693.   word-wrap: break-word; }

  1694. 

  1695. .reveal h1 {

  1696.   font-size: 2.5em; }

  1697. 

  1698. .reveal h2 {

  1699.   font-size: 1.6em; }

  1700. 

  1701. .reveal h3 {

  1702.   font-size: 1.3em; }

  1703. 

  1704. .reveal h4 {

  1705.   font-size: 1em; }

  1706. 

  1707. .reveal h1 {

  1708.   text-shadow: none; }

  1709. 

  1710. /*********************************************

  1711.  * OTHER

  1712.  *********************************************/

  1713. .reveal p {

  1714.   margin: 20px 0;

  1715.   line-height: 1.3; }

  1716. 

  1717. /* Ensure certain elements are never larger than the slide itself */

  1718. .reveal img,

  1719. .reveal video,

  1720. .reveal iframe {

  1721.   max-width: 95%;

  1722.   max-height: 95%; }

  1723. 

  1724. .reveal strong,

  1725. .reveal b {

  1726.   font-weight: bold; }

  1727. 

  1728. .reveal em {

  1729.   font-style: italic; }

  1730. 

  1731. .reveal ol,

  1732. .reveal dl,

  1733. .reveal ul {

  1734.   display: inline-block;

  1735.   text-align: left;

  1736.   margin: 0 0 0 1em; }

  1737. 

  1738. .reveal ol {

  1739.   list-style-type: decimal; }

  1740. 

  1741. .reveal ul {

  1742.   list-style-type: disc; }

  1743. 

  1744. .reveal ul ul {

  1745.   list-style-type: square; }

  1746. 

  1747. .reveal ul ul ul {

  1748.   list-style-type: circle; }

  1749. 

  1750. .reveal ul ul,

  1751. .reveal ul ol,

  1752. .reveal ol ol,

  1753. .reveal ol ul {

  1754.   display: block;

  1755.   margin-left: 40px; }

  1756. 

  1757. .reveal dt {

  1758.   font-weight: bold; }

  1759. 

  1760. .reveal dd {

  1761.   margin-left: 40px; }

  1762. 

  1763. .reveal blockquote {

  1764.   display: block;

  1765.   position: relative;

  1766.   width: 70%;

  1767.   margin: 20px auto;

  1768.   padding: 5px;

  1769.   font-style: italic;

  1770.   background: rgba(255, 255, 255, 0.05);

  1771.   box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2); }

  1772. 

  1773. .reveal blockquote p:first-child,

  1774. .reveal blockquote p:last-child {

  1775.   display: inline-block; }

  1776. 

  1777. .reveal q {

  1778.   font-style: italic; }

  1779. 

  1780. .reveal pre {

  1781.   display: block;

  1782.   position: relative;

  1783.   width: 90%;

  1784.   margin: 20px auto;

  1785.   text-align: left;

  1786.   font-size: 0.55em;

  1787.   font-family: monospace;

  1788.   line-height: 1.2em;

  1789.   word-wrap: break-word;

  1790.   box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.15); }

  1791. 

  1792. .reveal code {

  1793.   font-family: monospace;

  1794.   text-transform: none; }

  1795. 

  1796. .reveal pre code {

  1797.   display: block;

  1798.   padding: 5px;

  1799.   overflow: auto;

  1800.   max-height: 400px;

  1801.   word-wrap: normal; }

  1802. 

  1803. .reveal table {

  1804.   margin: auto;

  1805.   border-collapse: collapse;

  1806.   border-spacing: 0; }

  1807. 

  1808. .reveal table th {

  1809.   font-weight: bold; }

  1810. 

  1811. .reveal table th,

  1812. .reveal table td {

  1813.   text-align: left;

  1814.   padding: 0.2em 0.5em 0.2em 0.5em;

  1815.   border-bottom: 1px solid; }

  1816. 

  1817. .reveal table th[align="center"],

  1818. .reveal table td[align="center"] {

  1819.   text-align: center; }

  1820. 

  1821. .reveal table th[align="right"],

  1822. .reveal table td[align="right"] {

  1823.   text-align: right; }

  1824. 

  1825. .reveal table tbody tr:last-child th,

  1826. .reveal table tbody tr:last-child td {

  1827.   border-bottom: none; }

  1828. 

  1829. .reveal sup {

  1830.   vertical-align: super;

  1831.   font-size: smaller; }

  1832. 

  1833. .reveal sub {

  1834.   vertical-align: sub;

  1835.   font-size: smaller; }

  1836. 

  1837. .reveal small {

  1838.   display: inline-block;

  1839.   font-size: 0.6em;

  1840.   line-height: 1.2em;

  1841.   vertical-align: top; }

  1842. 

  1843. .reveal small * {

  1844.   vertical-align: top; }

  1845. 

  1846. /*********************************************

  1847.  * LINKS

  1848.  *********************************************/

  1849. .reveal a {

  1850.   color: #2a76dd;

  1851.   text-decoration: none;

  1852.   -webkit-transition: color .15s ease;

  1853.   -moz-transition: color .15s ease;

  1854.   transition: color .15s ease; }

  1855. 

  1856. .reveal a:hover {

  1857.   color: #6ca0e8;

  1858.   text-shadow: none;

  1859.   border: none; }

  1860. 

  1861. .reveal .roll span:after {

  1862.   color: #fff;

  1863.   background: #1a53a1; }

  1864. 

  1865. /*********************************************

  1866.  * IMAGES

  1867.  *********************************************/

  1868. .reveal section img {

  1869.   margin: 15px 0px;

  1870.   background: rgba(255, 255, 255, 0.12);

  1871.   border: 4px solid #222;

  1872.   box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); }

  1873. 

  1874. .reveal section img.plain {

  1875.   border: 0;

  1876.   box-shadow: none; }

  1877. 

  1878. .reveal a img {

  1879.   -webkit-transition: all .15s linear;

  1880.   -moz-transition: all .15s linear;

  1881.   transition: all .15s linear; }

  1882. 

  1883. .reveal a:hover img {

  1884.   background: rgba(255, 255, 255, 0.2);

  1885.   border-color: #2a76dd;

  1886.   box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); }

  1887. 

  1888. /*********************************************

  1889.  * NAVIGATION CONTROLS

  1890.  *********************************************/

  1891. .reveal .controls {

  1892.   color: #2a76dd; }

  1893. 

  1894. /*********************************************

  1895.  * PROGRESS BAR

  1896.  *********************************************/

  1897. .reveal .progress {

  1898.   background: rgba(0, 0, 0, 0.2);

  1899.   color: #2a76dd; }

  1900. 

  1901. .reveal .progress span {

  1902.   -webkit-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);

  1903.   -moz-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);

  1904.   transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); }

  1905. 

  1906. /*********************************************

  1907.  * PRINT BACKGROUND

  1908.  *********************************************/

  1909. @media print {

  1910.   .backgrounds {

  1911.     background-color: #fff; } }

  1912. 

  1913.         </style>

  1914. 

  1915. 		<title>Обучение детей программированию</title>

  1916. 	</head>

  1917. 	<body>

  1918. 		<div class="reveal">

  1919. 			<div class="slides">

  1920. 

  1921. <section data-markdown><textarea data-template>

  1922. 

  1923. Slide 1 contains some points:

  1924. 

  1925. * point no. 1

  1926. * point no. 2

  1927. 

  1928. </textarea></section>

  1929. 

  1930. <section data-markdown><textarea data-template>

  1931. 

  1932. Slide 2 will be here, too

  1933. 

  1934. </textarea></section>

  1935. 

  1936. 			</div>

  1937. 		</div>

  1938. 

  1939. 		<script src="js/reveal.js"></script>

  1940. 

  1941. 		<script>

  1942. 			Reveal.initialize({

  1943. 				dependencies: [

  1944. 					{ src: 'plugin/markdown/marked.js' },

  1945. 					{ src: 'plugin/markdown/markdown.js' },

  1946. 				]

  1947. 			});

  1948. 		</script>

  1949. 	</body>

  1950. </html>