/*  This code is inspired by DZ-slides. <https://github.com/paulrouget/dzslides/>
*/
html.slideshow { /* Transition effect */  /* Feel free to change the transition effect for original
animations. See here:
https://developer.mozilla.org/en/CSS/CSS_transitions
How to use CSS3 Transitions: */ /* Before */ /* Now */ /* After */ /* Incremental elements */ /* By default, visible */ /* The current item */ /* The items to-be-selected */  /* The progressbar, at the bottom of the slides, show the global
progress of the presentation. */  /* Figures are displayed full-page, with the caption
on top of the image/video */ }
html.slideshow, html.slideshow.view body { background-color: black; counter-reset: slideidx; }
html.slideshow body, html.slideshow.view section { background-color: white; border-radius: 12px; }
html.slideshow section, html.slideshow.view head > title { /*    font-size: 25px;*/ }
html.slideshow section { -moz-transition: left 400ms linear 0s; -webkit-transition: left 400ms linear 0s; -ms-transition: left 400ms linear 0s; transition: left 400ms linear 0s; }
html.slideshow section { left: -150%; }
html.slideshow section[aria-selected] { left: 0; cursor: url(../assets/laser.cur) 8 8, url(../assets/laser.png) 8 8, default; }
html.slideshow section[aria-selected] ~ section { left: +150%; }
html.slideshow .incremental > * { opacity: 1; }
html.slideshow .incremental > *[aria-selected] { opacity: 1; }
html.slideshow .incremental > *[aria-selected] ~ * { opacity: 0; }
html.slideshow #progress-bar { height: 4px; background: #F00; opacity: 0.5; left: 0; }
html.slideshow.view section:after { counter-increment: slideidx; content: counter(slideidx,decimal-leading-zero); position: absolute; bottom: -80px; right: 100px; color: white; }
html.slideshow.view section { -moz-transition: none; -webkit-transition: none; -ms-transition: none; transition: none; }
html.slideshow.view section[aria-selected] { border: 5px red solid; }
html.slideshow.view head > title { color: white; text-align: center; margin: 1em 0 1em 0; }
html.slideshow .title-slide > div { position: absolute; width: 100%; height: 100%; top: 0; }
html.slideshow .title-slide h1 { position: absolute; width: 100%; top: 40%; margin: 0; transform: translateY(-50%); -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); }
html.slideshow .subtitle { display: block; color: black; margin: 2%; text-align: center; }
html.slideshow #slides-license { text-align: center; position: absolute; width: 100%; bottom: 10px; line-height: 1.1; }
html.slideshow #slides-license small { display: inline-block; font-size: 50%; }
html.slideshow #slides-license sup { vertical-align: 20%; }
html.slideshow h1 { margin: 1% 2% 1% 2%; text-align: center; font-size: 80px; }
html.slideshow h2:before { content: ''; }
html.slideshow h2 { font-size: 2em; margin: 2% 1% 2% 8%; }
html.slideshow h3, html.slideshow h4, html.slideshow h5, html.slideshow h6, html.slideshow p, html.slideshow pre, html.slideshow .content { margin: 1% 4%; }
html.slideshow ul, html.slideshow ol, html.slideshow dl { margin: 2% 4% 2% 8%; }
html.slideshow li > ul, html.slideshow li > ol, html.slideshow li > dl { margin: 0.5% 4%; }
html.slideshow li > * { margin-left: 0; }
html.slideshow dl { margin: 2% 4%; }
html.slideshow dd { margin-left: 4%; }
html.slideshow blockquote { margin: 2% 4%; }
html.slideshow pre { padding: 2px; }
html.slideshow figure { background-color: black; width: 100%; height: 100%; }
html.slideshow figure > * { position: absolute; }
html.slideshow figure > img, html.slideshow figure > video { width: 100%; height: 100%; }
html.slideshow figcaption { margin: 7%; font-size: 50px; }
html.slideshow .compact > * { font-size: 85%; margin-top: 1%; margin-bottom: 1%; }
html.slideshow .compact > h1, html.slideshow .compact > h2 { font-size: 120%; margin-top: 2%; margin-bottom: 2%; }
html.slideshow .no-wrap { white-space: nowrap; }
html.slideshow #exit-slide h3 { margin-top: 20%; }
html.slideshow .two-cols { margin: 1% 0; padding: 0 2%; }
html.slideshow .two-cols > * { margin: 0 2%; }