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

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


canvas {
    vertical-align: bottom;
}

.checkbox {
    margin-top: 40px;
}

#presentation {
  display: none;
}

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

#neuralFormm {
    visibility: hidden;
    z-index: 999999;
}

/* Code and text snippets in sidebar */
#neuralnets, 
#neurondef,
#perceptrondef, 
#weightsdef,
#wvalues1,
#wvalues2,
#wvalues3,
#threshold1,
#threshold2,
#line1,
#line2,
#line3,
#line4,
#line5,
#line6,
#line7,
#line8,
#line9,
#recursion {
  display: none;
}

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

/* begin button */
#begin {
    margin: 100px;
}

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

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

#spark {
  position: absolute;
  left: 60%;
  bottom: 0;
  height: 80%;
  z-index: 1000;
}

#clickme {
  position: absolute;
  left: 60%;
  bottom: 0;
  height: 80%;
  z-index: 1000;
}

#math {
  position: absolute;
  left: 60%;
  bottom: 0;
  height: 80%;
  z-index: 1000;
}

#sweet {
  position: absolute;
  left: 60%;
  bottom: 4%;
  height: 80%;
  z-index: 1000;
}

#perceptron1 {
  position: absolute;
  left: 32%;
  bottom: 20%;
  width: 60%;
  z-index: 1000;
}

#perceptron2 {
  position: absolute;
  left: 32%;
  bottom: 20%;
  width: 60%;
  z-index: 1000;
}

#perceptron3 {
  position: absolute;
  left: 32%;
  bottom: 20%;
  width: 60%;
  z-index: 1000;
}

#perceptron4 {
  position: absolute;
  left: 32%;
  bottom: 20%;
  width: 60%;
  z-index: 1000;
}


#perceptron5 {
  position: absolute;
  left: 32%;
  bottom: 20%;
  width: 60%;
  z-index: 1000;
}

#hoveroverme {
  position: absolute;
  left: 60%;
  bottom: 0;
  height: 80%;
  z-index: 1000;
}

#hovered {
  position: absolute;
  left: 60%;
  bottom: 0;
  height: 98%;
  z-index: 1000;
}

#question1 {
  position: absolute;
  left: 62%;
  bottom: 3%;
  height: 85%;
  z-index: 1000;
}

#question2 {
  position: absolute;
  left: 62%;
  bottom: 3%;
  height: 85%;
  z-index: 1000;
}

#question3 {
  position: absolute;
  left: 62%;
  bottom: 3%;
  height: 85%;
  z-index: 1000;
}

#weight1 {
  position: absolute;
  left: 62%;
  bottom: 3%;
  height: 85%;
  z-index: 1000;
}

#weight2 {
  position: absolute;
  left: 62%;
  bottom: 3%;
  height: 85%;
  z-index: 1000;
}

#weight3 {
  position: absolute;
  left: 62%;
  bottom: 3%;
  height: 85%;
  z-index: 1000;
}

#values1 {
  position: absolute;
  left: 62%;
  bottom: 3%;
  height: 85%;
  z-index: 1000;
}

#values2 {
  position: absolute;
  left: 62%;
  bottom: 3%;
  height: 85%;
  z-index: 1000;
}

#values3 {
  position: absolute;
  left: 62%;
  bottom: 3%;
  height: 85%;
  z-index: 1000;
}


#answers {
  position: absolute;
  left: 62%;
  bottom: 3%;
  height: 85%;
  z-index: 1000;
}

#decision {
  position: absolute;
  left: 60%;
  bottom: 0;
  height: 81%;
  z-index: 1000;
}

#decision2 {
  position: absolute;
  left: 60%;
  bottom: 0;
  height: 80%;
  z-index: 1000;
}

#go {
  position: absolute;
  z-index: 999999;
  bottom: 1%;
  height: 100%;
}

#dontgo {
  position: absolute;
  z-index: 999999;
  bottom: 1%;
  height: 100%;
}

input[type="radio"] {
    padding-right; 20px;
}

/* Code to "blink" tet when it's highlighted */
.blinkme {
  animation: blinker 1s linear infinite;
}

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