* { box-sizing: border-box; }

body {
  font-family: 'Source Sans Pro', sans-serif;
  padding-top: 10px;
  background: #ddd;
}

a { color: #428bca; text-decoration: none; }
a:hover, a:focus { color: #2a6496; text-decoration: underline; }
a:focus { outline: thin dotted; outline: 5px auto -webkit-focus-ring-color; outline-offset: -2px; }

.deck-container {
  background: #f8f8f8;
  color: #333;
  text-align: center;
  margin: 0 auto;
  min-height: 0;
  overflow-y: hidden;
  font-size: 35px;

  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -640px;
  margin-top: -360px;
  // margin-top: -390px; // online? 
}

.deck-menu { overflow: auto; }

.deck-menu > .deck-current,
.deck-menu > .deck-child-current {
  outline: 10px solid teal;
}

.deck-menu iframe {
  pointer-events: none;
}

.deck-container,
.deck-container > .slide {
  width: 1280px;
  height: 720px;
}

.slide {
  width: 100%;
}

.page-cover {
  position: absolute;
  width: 100%;
  height: 100%;
  display: table;
}

.cover-title { display: table-cell; vertical-align: middle; font-size: 96px; line-height: 1 }
.cover-inverted { color: #fff; text-shadow: 4px 4px 1px rgba(0,0,0,0.7); }
.cover-title small { font-size: 60%; display: block; }

h2 { margin: 0; padding-top: 20px; font-size: 56px; }

// p { margin: 25px 0; }

img.spotlight,
video.spotlight {
  position: absolute; top: 0; left: 0; width: 100%;
}

iframe {
  // border: 1px dotted red;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

pre { margin: 0; }
code { font-family: 'Source Code Pro', monospace; }

 // TEMP: hide past subitem if marked 
.deck-container > .slide .deck-before.temp,
.deck-container > .slide .deck-previous.temp,
.deck-container > .slide.deck-before .temp:not(.slide),
.deck-container > .slide.deck-previous .temp:not(.slide) {
  opacity: 0;
  position: absolute;
  // .transition-transform-opacity(300ms);
}

.deck-container > .slide .deck-current.temp,
.deck-container > .slide.deck-current .temp:not(.slide) {
  position: relative;
}

.slide.abs-bc,
.abs-bc {
  width: 100%;
  position: absolute !important;
  top: auto;
  bottom: 30px;
  left: 0;
  right: 0;
  text-align: center;
  z-index: 2;

  // pre[class*="language-"] { text-align: center; }
}

.slide.abs-tc,
.abs-tc {
  width: 100%;
  position: absolute !important;
  top: auto;
  top: 30px;
  left: 0;
  right: 0;
  text-align: center;
  z-index: 2;
}

.deck-container .bc-text {
  bottom: 50px;
  padding: 35px 0;
  // background: rgba(255,255,255,0.75);
}

.outline {
  text-shadow:
    3px 0px 1px rgb(255, 255, 255), -3px 0px 1px rgb(255, 255, 255),
    0px -3px 1px rgb(255, 255, 255), 0px 3px 1px rgb(255, 255, 255),
    2px 2px 1px rgb(255, 255, 255), -2px 2px 1px rgb(255, 255, 255),
    2px -2px 1px rgb(255, 255, 255), -2px -2px 1px rgb(255, 255, 255),
    3px 2px 1px rgb(255, 255, 255), -3px 2px 1px rgb(255, 255, 255),
    3px -2px 1px rgb(255, 255, 255), -3px -2px 1px rgb(255, 255, 255),
    1px 3px 1px rgb(255, 255, 255), -1px 3px 1px rgb(255, 255, 255),
    1px -3px 1px rgb(255, 255, 255), -1px -3px 1px rgb(255, 255, 255),
    -1px -1px 1px rgb(255, 255, 255), -1px 1px 1px rgb(255, 255, 255),
    1px -1px 1px rgb(255, 255, 255), 1px 1px 1px rgb(255, 255, 255);
}

.overlay-full {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0 !important;
}

// extensions

// navigation

// bottom center
.deck-nav {
  text-align: center;
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 100;
  margin-top: 370px;
  width: 100px;
  margin-left: -50px;
}

.deck-prev-link { left: auto; }
.deck-next-link { right: auto; }

.deck-prev-link,
.deck-next-link {
  font-size: 28px;
  position: relative;
  display: inline-block;
  border-radius: 6px;
  background: rgba(0,0,0,0.3);
  width: 40px;
  height: 40px;
  line-height: 38px;
  margin-top: 0px;

  &:hover {
    text-decoration: none;
    background: rgba(0,0,0,0.5);
  }

  &:focus {
    text-decoration: none;
  }
}

// status
.deck-status {
  font-size: 18px;
  right: 10px;
  text-shadow: 0 0 1px #fff;
  position: absolute;
}

// go to
.goto-form {
  height: auto;
  font-size: 20px;
}
.goto-form label, .goto-form input {
  font-size: inherit;
}

#goto-slide {
  height: auto;
}

// active states
.on-slide-scene-required .scene-required,
.on-slide-scene-object .scene-object,
.on-slide-render-loop .render-loop {
  // color: red;
  font-weight: 700;
}


#camera-demo { transition: height 400ms, top 400ms; }
.on-slide-camera-iframe-resize #camera-demo {
  top: 150px;
  height: 50%;
}

.on-slide-interaction1 .interaction1,
.on-slide-interaction2 .interaction2,
.on-slide-interaction3 .interaction3,
.on-slide-interaction4 .interaction4 {
  font-weight: 700;
}


#info-left {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: 370px;
  margin-left: -640px;
}

#info-right {
  position: absolute;
  top: 50%;
  right: 50%;
  margin-top: 370px;
  margin-right: -640px;
  text-align: right;
}