/* Chapter Two
############################ */

/* Ch2 Panel1 */
#ch2-1-bg {
  background: url(../images/Chapter2/Chapter2_Panel1_BG.png) center no-repeat;
  background-size:contain;
  top:0px;
}
#ch2-1-fg {    
  position:absolute;
  bottom: 0%;
  left: 0%;
  width: 100%;
  height: 100%;
  background: url(../images/Chapter2/Chapter2_Panel1_FG.png) center no-repeat;
  background-size:contain;
}
#ch2-1-tree {    
  position:absolute;
  bottom: 0%;
  left: 0%;
  width: 100%;
  height: 100%;
  background: url(../images/Chapter2/Chapter2_Panel1_tree.png) center no-repeat;
  background-size:contain;
}
#ch2-1-sun {    
  position:absolute;
  bottom: 0%;
  left: 0%;
  width: 100%;
  height: 100%;
  background: url(../images/Chapter2/Chapter2_Panel1_sun.png) center no-repeat;
  background-size:contain;
}
#ch2-1-text1-trigger {
  position:absolute;
  top:50%;
  width:100%;  
}
#ch2-1-end-trigger {
  position:absolute;
  bottom:0%;
  width:100%;  
}

/* Ch2 Panel2 */
#ch2-2-bg {
  background: url(../images/Chapter2/Chapter2_Panel2_BG.jpg) center no-repeat;
  background-size:contain;
  top:0px;
}
#ch2-2-fg {  
  /*1146x1054*/
  position:absolute;
  bottom: 0%;
  left: 20%;
  width: 57.3%;
  height: 93.688%;
  background: url(../images/Chapter2/Chapter2_Panel2_FG.png) center bottom no-repeat;
  background-size:contain;
}
#ch2-2-text1-trigger {
  position:absolute;
  top:10%;
  width:100%;  
}
#ch2-2-end-trigger {
  position:absolute;
  bottom:0%;
  width:100%;  
}
#ch2-2-text1.story-text-wrap {
  bottom:8%;  
}

/* Ch2 Panel3 to 6 */
#ch2-3-trigger {
  position:absolute;
  top:15%;
  width:100%;
}
#ch2-4-trigger {
  position:absolute;
  top:35%;
  width:100%;
}
#ch2-5-trigger {
  position:absolute;
  top:55%;
  width:100%;
}
#ch2-6-trigger {
  position:absolute;
  top:75%;
  width:100%;
}
#ch2-3-bg,
#ch2-4-bg,
#ch2-5-bg,
#ch2-6-bg {    
  position:absolute;
  top:0px;
  opacity:0;
}
#ch2-3-bg {
  background: url(../images/Chapter2/Chapter2_Panel3.jpg) center no-repeat;
  background-size:contain;
}
#ch2-4-bg {
  background: url(../images/Chapter2/Chapter2_Panel4.jpg) center no-repeat;
  background-size:contain;
}
#ch2-5-bg {
  background: url(../images/Chapter2/Chapter2_Panel5.jpg) center no-repeat;
  background-size:contain;
}
#ch2-6-bg {
  background: url(../images/Chapter2/Chapter2_Panel6.jpg) center no-repeat;
  background-size:contain;
}
#ch2-5-text1,
#ch2-6-text1,
#ch2-6-text2 {
  bottom:8%;
}
#ch2-5-text1-trigger,
#ch2-6-text1-trigger {
  position:absolute;
  top:60%;
  width:100%;  
}
#ch2-5-end-trigger,
#ch2-6-end-trigger {
  position:absolute;
  bottom:0%;
  width:100%;  
}

/* Ch2 Panel7 & 8 */
#ch2-7-bg {
  background: url(../images/Chapter2/Chapter2_Panel7.jpg) center no-repeat;
  background-size:contain;
  top:0px;
}
#ch2-8-bg {
  position:absolute;
  top:0px;
  opacity:0;
  background: url(../images/Chapter2/Chapter2_Panel8_BG.jpg) center no-repeat;
  background-size:contain;  
}
#ch2-8-trigger {
  position:absolute;
  top:50%;
  width:100%;
}
#ch2-7-text1-trigger,
#ch2-8-text1-trigger {
  position:absolute;
  bottom:55%;
  width:100%;  
}
#ch2-7-end-trigger,
#ch2-8-end-trigger {
  position:absolute;
  bottom:0%;
  width:100%;  
}
#ch2-7-text1.story-text-wrap,
#ch2-8-text1.story-text-wrap {
  bottom:8%;  
}

#ch2-8-fg {  
  /*1125x1125*/
  position:absolute;
  bottom: 0%;
  left: 25%;
  width: 56.25%;
  height: 1000%;
  background: url(../images/Chapter2/Chapter2_Panel8.png) center bottom no-repeat;
  background-size:contain;
}

#ch2-thunder {  
  margin:0 auto;
  width:100%;
  height:100%;
  /*  
  background-color: #222;
  background-image: url("images/Chapter2/storm-bg.jpg");
  background-size: cover;
  background-position: 0 0;
  background-repeat: no-repeat;
  */
  position: absolute;
  top:0%;
  left:0%;
  z-index: 0;  
  background-color: rgba(34, 34, 34, 0.5);
}
#ch2-thunder.active {
  -webkit-animation: thunder-bg 6s infinite;
          animation: thunder-bg 6s infinite;
}
#ch2-thunder canvas {
  display: block;
  position: absolute;
  top: 0%;
  left: 0%;
  width:100%;
  height:100%;
}

#ch2-thunder-canvas3 {
  z-index: 0;
}

#ch2-thunder-canvas2 {
  z-index: 1;
}

#ch2-thunder-canvas1 {
  z-index: 2;
}

@-webkit-keyframes thunder-bg {
  0% {
    background-color: rgba(34, 34, 34, 0.5);
  }
  9% {
    background-color: rgba(34, 34, 34, 0.5);
  }
  10% {
    background-color: rgba(59, 59, 59, 0.3);
  }
  10.5% {
    background-color: rgba(34, 34, 34, 0.5);
  }
  80% {
    background-color: rgba(34, 34, 34, 0.5);
  }
  82% {
    background-color: rgba(59, 59, 59, 0.3);
  }
  83% {
    background-color: rgba(34, 34, 34, 0.5);
  }
  83.5% {
    background-color: rgba(59, 59, 59, 0.3);
  }
  100% {
    background-color: rgba(34, 34, 34, 0.5);
  }
}