/**

       Basic CSS so that the slideshow script functions as a slideshow
       @author Lea Verou
       @version 1.0
*/

/**

* "Variables"
*/

.slide, .delayed, .delayed-children > * {

transition:1s;
transition-property: -webkit-transform, opacity, left, top, right, bottom;

}

/**

* Styles
*/

html, body {
       height: 100%;
}

body {
       margin: 0;
}

.slide {
       display: none;
       position:absolute;
       top:0;
       right:0;
       bottom:0;
       left:0;
       z-index:1;

       font-size:250%;
       line-height:1.6;
}

.slide.previous,
.slide:target,
.slide.next {
       display: block;
       opacity:0;
       overflow:hidden;
}

.slide:target {
       z-index:100;
       opacity:1;
       overflow: visible;

}

/**

       Slide numbers
*/

indicator {

position: absolute;
top: .05in;
right: .5em;
z-index: 1010;

font-size: .15in;
color: white;
background: rgba(0,0,0,.25);
font-weight: 900;
text-shadow: .05em .05em .1em black;
text-align: center;
padding: .1em .3em 0;
min-width: 1.6em;
box-sizing: border-box;
border-radius: 999px;

}

/* If there's nothing selected, show the first */ .slide:first-child {

z-index:2;

}

/* Delayed items that are shown incrementally after the slide is */ .delayed, .delayed-children > * {

opacity: 0;

}

.delayed.displayed, .delayed-children > .displayed {

opacity: .3;

}

.delayed.current, .delayed-children > .current, .delayed.displayed.non-dismissable, .delayed-children > .displayed.non-dismissable {

opacity: 1;

}

/**

       iframe slides
*/

.iframe.slide {

padding: 0;
text-align: center;

}

.iframe.slide > h1 {
        position: absolute;
        bottom: 0; right: 0; left: 0;
        background: rgba(0,0,0,.5);
        font-size: 100%;
}

        .iframe.slide > h1 > a {
                display: inline-block;
                padding: .2em .5em;

                color: white;
                text-align: center;
                text-decoration: none;
                text-shadow: .05em .05em .1em black;
        }

.slide > iframe:only-of-type {
        display: none;
        position: absolute;
        border: 0;
        width: 100%;
        height: 100%;
        margin: 0;
}

.slide:target > iframe:only-of-type {
        display: block;
}

/**

       Show thumbnails
*/

.show-thumbnails {

overflow-x: hidden;

}

.show-thumbnails .slide, .presenter .slide.next {

width: 1024px;
height: 768px;

-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;

float: left;
overflow: hidden;
position: static;
opacity: 1;
margin:-292px -395px;
cursor: pointer;

transform: scale(.2, .2);
transition:1s transform;

}

.show-thumbnails.headers-only .slide {

display: none;

}

.show-thumbnails.headers-only header.slide {

display: block;

}

.show-thumbnails .slide .delayed, .presenter .slide:target + .slide .delayed {

opacity: 1;

}

.show-thumbnails .slide:hover, .show-thumbnails .slide:target, .presenter .slide:target + .slide {

outline: 20px solid rgba(255, 255, 255, .6);
outline-radius:5px;

box-shadow: 5px 5px 10px black;

}

.show-thumbnails .slide:target {

outline-color: rgba(255, 255, 255, .3);

}

.show-thumbnails .slide:target:hover {

outline-color: rgba(255, 255, 255, .9);

}

/* Display titles */ .show-thumbnails .slide:after {

content: attr(data-title);
position: absolute;
left: 0;
right: 0;
bottom: 0;
padding: .1em 0;
background: rgba(0,0,0,.5);
color: white;
font-size: 250%;
text-align: center;
text-shadow: .05em .05em .1em black;
transform: none;

}

/* Hide all elements in slide by hitting Ctrl + J or Shift + J */ .hide-elements .slide:target > * {

opacity: 0;
transition:.5s;

}

/* Timer */

timer {

position:absolute;
top:0;
left:0;
z-index:101;
width:0%;
height:16px;
line-height: 16px;
padding: 0 5px;
background:rgba(0,0,0,.5);
overflow: hidden;
text-align: right;
box-sizing: border-box;

}

timer:before {

content: 'Progress ';
text-transform: uppercase;
color: white;
font-size: 9px;

}

timer.end {

width: 100%;

}

/* Presenter & projector views */

.projector timer {

display: none;

}

.presenter-notes {

display: none;
position: fixed;
right: 230px;
bottom: 0;
left: 0;
max-height: 6em;
overflow: auto;
padding: .6em 1em;
font-size: 60%;
line-height: 1.3;
font-weight: normal;
resize:vertical;
background: rgba(255, 255, 255, .5);
color: black;
text-shadow: 0 1px white;
box-shadow: .1em .1em .3em rgba(0,0,0,.5) inset;

}

.presenter .slide.next {

position: fixed;
top: auto;
right: 0;
bottom: 0;
left: auto;
z-index: 100;

}

.presenter .slide:target > .presenter-notes {

display: block;

}