html, .view body { background-color: black; counter-reset: slideidx; }
body, .view section { background-color: white; border-radius: 12px }
section, .view head > title {
    font-family: 'DejaVu Sans Condensed', 'Liberation Sans', 'Nimbus Sans L', arial, serif;
    font-size: 30px;
}

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

h1, h2 {
  margin-top: 200px;
  text-align: center;
  font-size: 80px;
}
h3 {
  margin: 100px 0 50px 100px;
}

ul {
    margin: 50px 200px;
}
li > ul {
    margin: 15px 50px;
}

p {
  margin: 75px;
  font-size: 50px;
}

blockquote {
  height: 100%;
  background-color: black;
  color: white;
  font-size: 60px;
  padding: 50px;
}
blockquote:before {
  content: open-quote;
}
blockquote:after {
  content: close-quote;
}

/* 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;
}

footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  padding: 40px;
  text-align: right;
  background-color: #F3F4F8;
  border-top: 1px solid #CCC;
}

/* 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; }
/* 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: 2px;
  background: #AAA;
}