@media (min-width: 768px) {
    #module .container {
        padding-top: 40px;
        padding-bottom: 0;
    }   
}

#module {
    margin-bottom: 0;
    padding-bottom: 0;
    background-size: cover;
}

/* preload all future background images for call via popcorn*/
#module:before{
     content: '';
     background:  url(../img/fractals-clouds.jpg), url(../img/fractals-mountains.jpg),url(../img/fractals-trees.jpg), url(../img/logo.png), url(../img/recursion.jpg), url(../img/math.png), url(../img/computers.png);
     width:0;
     height:0;
     visibility:hidden;
}

canvas {
    vertical-align: bottom;
}

.checkbox {
    margin-top: 40px;
}

#presentation {
  display: none;
}

/* UI */

button {
  margin: 10px;
}

#pause {
  position:absolute;
  display: none;
  right: 12px;
  bottom: 12px;
  z-index: 1000;
  font-size: 32px;
  cursor: pointer;
  vertical-align:bottom;
  color: #ccc;
}

#pause:hover {
  color: #F57F20;
}


.sidebar h2, .sidebar h3 {
    text-align: center;
}

.sidebar h2 {
    font-size: 42px;
}

.sidebar h3 {
    font-size: 18px;
}

#treeForm {
    display: none;
}

/* Code and text snippets in sidebar */

#pseudocode, 
#fractaltitle, 
#line1,
#line2,
#line3,
#line4,
#line5,
#line6,
#line7,
#line8,
#line9,
#deterministic,
#stochastic,
#recursion {
  display: none;
}


/*hide pseudocode submenu bullet*/
.sub {
  list-style: none;
}

/**
 * Sketch
 */

#sketchCanvas, #sketchOverlay {
    position: absolute;
    width: 100%;
    z-index:100;
}

#sketchCanvas.foreground, #sketchOverlay {
    z-index: 600;
}


/**
 * Video
 */

 #welcome {
  height: 550px;
 }

 #main {
    width: 800px;
    height: 550px;
    /*background: white;*/
    /* set the origin of any transforms of scale from JS */
    transform-origin: bottom left;
}

/*display loading message until assets load */
#loading {
  position: absolute;
  top:250px;
  left: -250px;
  z-index: 300;
  display: none;
}

/* begin button */

#begin {
    margin: 100px;
}

#videoClip {
    position: absolute;
    display: none;
    pointer-events: none;
}

#videoCanvas {
    position: absolute;
    bottom: 0px;
    right: 0;
    width: 480px;
    height: 360px;
    pointer-events: none;
    display:none;
    z-index: 200;
}


#twoHundred, #oneHundred, #fifty, #twentyFive, #twelve, #six {
  font-size: 14px;
  font-weight: 700;
  position: absolute;
  color: #2c3e50;
  background-color: white;
  text-align: center;
  z-index: 800;
  display: none;
}

#twoHundred {
  top: 450px;
  left: 220px;
}

#oneHundred {
  top: 310px;
  left: 220px;
}

#fifty {
  top: 220px;
  left: 220px;
}

#twentyFive {
  top: 175px;
  left: 220px;
}

#twelve {
  top: 130px;
  left: 220px;
}

#six {
  top: 80px;
  left: 200px;
}

/* Code to "blink" text when it's highlighted */

.blinkme {
  animation: blinker 1s linear infinite;
}

@keyframes blinker {  
  50% { color: orange; }
}

/*Code to blink a button*/

.blinkbtn {
  animation: blinkButton 1s linear infinite;
}

@keyframes blinkButton {  
  50% { 
    background-color: orange; 
    border-color: orange;
  }
}