html {
  height: 95%;
  margin: 0;
  padding: 0;
}

body {
  background-color: #F8F8F8;
  font-family: 'Open Sans', sans-serif;
  font-size: 1em;
  font-weight: normal;
  /*line-height: 1.2em;*/
  margin: 0;
  padding: 0;
  height: 95%;
}

h1, h2, h3, h4, h5, p {
  margin: 1em;
}

h1 {
  text-align: center;
}

p {
  color: #333;
}

#header {
  height: 15%  
}

/* render acts as a window into the 3d scene and controls the perspective of the virtual "camera" */
#render {
  font-size: 1em;
  width: 95%;
  /*height: 31em;*/
  height: 84%;
  position: relative;
  margin-left: auto;
  margin-right: auto;
  border: 1px solid #ccc;
  background-color: #DDDDDD;
  overflow-y:hidden;
  overflow-x:hidden;
  
  perspective: 800px;
  -ms-perspective: 800px;
  -moz-perspective: 800px;
  -webkit-perspective: 800px;
}

/* common css for all slides */
.slide {
  width: 90%;
  max-height: 100%;
  font-size: 10em;
  line-height: 1.0em;
  text-align: center;
  /*width: 50%;*/
  /*height: 25em;*/
  /*border: 2px solid #aaa;*/
  /*background-color: rgba(150,150,240,60);*/
  margin: 0px 0px 0px 0px;
  padding: 0.1em;
  overflow-y: auto;
}

.backgroundSlide {
  font-size: 10em;
  line-height: 0.9em;
  text-align: center;
  margin: 0;
  padding: 0;
  overflow: visible;
}

/* The slide in focus gains this style */ 
.focused {
  opacity: 1;
}

/* Non-background out of focus slides should use this style. */ 
.unfocused {
  opacity: 0.3; 
}