/* 
   This code is inspired by DZ-slides.
   <https://github.com/paulrouget/dzslides/>
*/

html, .view body { 
    background-color: black;
    counter-reset: slideidx;
}
body, .view section { background-color: white; border-radius: 12px }
/* A section is a slide. It's size is 800x600, and this will never change */
section, .view head > title {
/*    font-size: 25px;*/
}

.view section:after {
    counter-increment: slideidx;
    content: counter(slideidx, decimal-leading-zero);
    position: absolute; bottom: -80px; right: 100px;
    color: white;
}

.view head > title {
    color: white;
    text-align: center;
    margin: 1em 0 1em 0;
}

.title-slide > div {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
}
.title-slide h1 {
    position: absolute;
    width: 100%;
    top: 40%;
    margin: 0;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
}
.subtitle {
    display: block;
    color: black;
    margin: 20px;
    text-align: center;
}
#slides-license { 
    text-align: center;
    position: absolute;
    width: 100%;
    bottom: 10px;
    line-height: 1.1;
}
#slides-license small {
    display: inline-block;
    font-size: 50%; 
}
#slides-license sup { vertical-align: 20%; }

h1 {
    margin: 100px 20px 100px 20px;
    text-align: center;
    font-size: 80px;
}
h2:before { content: ''; }
h2 {
    font-size: 2em;
    margin: 20px 10px 20px 80px; 
}
h3, h4, h5, h6, p, pre { margin: 10px 40px 10px 40px; }
ul, ol, dl { margin: 20px 40px 20px 80px; }
li > ul, li > ol, li > dl { margin: 5px 40px; }
li > * { margin-left: 0; }
dl { margin: 20px 40px; }
dd { margin-left: 40px; }
blockquote { margin: 20px 40px; }

/* Figures are displayed full-page, with the caption
   on top of the image/video */
figure {
    background-color: black;
    width: 100%;
    height: 100%;
}
figure > * {
    position: absolute;
}
figure > img, figure > video {
    width: 100%; height: 100%;
}
figcaption {
    margin: 70px;
    font-size: 50px;
}

/* 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: */
section {
    -moz-transition: left 400ms linear 0s;
    -webkit-transition: left 400ms linear 0s;
    -ms-transition: left 400ms linear 0s;
    transition: left 400ms linear 0s;
}
.view section {
    -moz-transition: none;
    -webkit-transition: none;
    -ms-transition: none;
    transition: none;
}

.view section[aria-selected] {
    border: 5px red solid;
}

/* Before */
section { left: -150%; }
/* Now */
section[aria-selected] { 
    left: 0;
    cursor: url(../assets/laser.cur) 8 8, url(../assets/laser.png) 8 8, default;
}
/* After */
section[aria-selected] ~ section { left: +150%; }

/* Incremental elements */

/* By default, visible */
.incremental > * { opacity: 1; }

/* The current item */
.incremental > *[aria-selected] { opacity: 1; }

/* The items to-be-selected */
.incremental > *[aria-selected] ~ * { opacity: 0; }

/* The progressbar, at the bottom of the slides, show the global
   progress of the presentation. */
#progress-bar {
    height: 4px;
    background: #F00;
    opacity: 0.5;
    left: 0;
}

.compact > * {
    font-size: 85%;
    margin-top: 10px;
    margin-bottom: 10px;
}
.compact > h1, .compact > h2 {
    font-size: 120%;
    margin-top: 20px;
    margin-bottom: 20px;
}
.no-wrap {
    white-space: nowrap;
}
#exit-slide h3 {
    margin-top: 200px;
}