/* also uses tremble classes and keyframes from chap 24. found in master css file */

#wrapper.animate-ch16 {
  background-color: #424039;
  -webkit-animation: wrapper-fade 2.0s 1.00s ease-in forwards;
     -moz-animation: wrapper-fade 2.0s 1.00s ease-in forwards;
       -o-animation: wrapper-fade 2.0s 1.00s ease-in forwards;
          animation: wrapper-fade 2.0s 1.00s ease-in forwards;
}

@-webkit-keyframes wrapper-fade{ 100%{background-color: #FFFFFF;} }
@-moz-keyframes wrapper-fade{ 100%{background-color: #FFFFFF;} }
@-o-keyframes wrapper-fade{ 100%{background-color: #FFFFFF;} }
@keyframes wrapper-fade{ 100%{background-color: #FFFFFF;} }
 
.suddenly-stretch{
  display:inline-block;
  position:relative;
  text-indent:0;
  opacity:0;
  text-shadow:0px 0px 0px #ffffff;
  width:8em;
  top:120px;
  left:67px;
  -webkit-transform-origin:left bottom;
     -moz-transform-origin:left bottom;
      -ms-transform-origin:left bottom;
       -o-transform-origin:left bottom;
          transform-origin:left bottom;
  -webkit-transform: rotate(-28deg) translateX(0em) skewX(-05deg) scale(1);
     -moz-transform: rotate(-28deg) translateX(0em) skewX(-05deg) scale(1);
      -ms-transform: rotate(-28deg) translateX(0em) skewX(-05deg) scale(1);
       -o-transform: rotate(-28deg) translateX(0em) skewX(-05deg) scale(1);
          transform: rotate(-28deg) translateX(0em) skewX(-05deg) scale(1);
  -webkit-animation:suddenly-stretch 0.33s linear forwards;
     -moz-animation:suddenly-stretch 0.33s linear forwards;
       -o-animation:suddenly-stretch 0.33s linear forwards;
          animation:suddenly-stretch 0.33s linear forwards;
}

@-webkit-keyframes suddenly-stretch {
     70%{-webkit-transform: rotate(-28deg) translateX(8.9em) skewX(-05deg) scale(1);transform: rotate(-28deg) translateX(8.9em) skewX(-05deg) scale(1); letter-spacing:0px; opacity:1.0; text-shadow:-01px 0px 1px #5E5E5E;}
     80%{-webkit-transform: rotate(-28deg) translateX(8.9em) skewX(-05deg) scale(1.3,0.9);transform: rotate(-28deg) translateX(8.9em) skewX(-05deg) scale(1.3,0.9); letter-spacing:5px; opacity:1.0; text-shadow:-01px 0px 1px #5E5E5E;}
    100%{-webkit-transform: rotate(-28deg) translateX(8.0em) skewX(-28deg) scale(1);transform: rotate(-28deg) translateX(8.0em) skewX(-28deg) scale(1); letter-spacing:1px; opacity:1.0; text-shadow:-01px 0px 1px #8A8A8A;}
}
@-moz-keyframes suddenly-stretch {
     70%{-moz-transform: rotate(-28deg) translateX(8.9em) skewX(-05deg) scale(1);transform: rotate(-28deg) translateX(8.9em) skewX(-05deg) scale(1); letter-spacing:0px; opacity:1.0; text-shadow:-01px 0px 1px #5E5E5E;}
     80%{-moz-transform: rotate(-28deg) translateX(8.9em) skewX(-05deg) scale(1.3,0.9);transform: rotate(-28deg) translateX(8.9em) skewX(-05deg) scale(1.3,0.9); letter-spacing:5px; opacity:1.0; text-shadow:-01px 0px 1px #5E5E5E;}
    100%{-moz-transform: rotate(-28deg) translateX(8.0em) skewX(-28deg) scale(1);transform: rotate(-28deg) translateX(8.0em) skewX(-28deg) scale(1); letter-spacing:1px; opacity:1.0; text-shadow:-01px 0px 1px #8A8A8A;}
}
@-o-keyframes suddenly-stretch {
     70%{-o-transform: rotate(-28deg) translateX(8.9em) skewX(-05deg) scale(1);transform: rotate(-28deg) translateX(8.9em) skewX(-05deg) scale(1); letter-spacing:0px; opacity:1.0; text-shadow:-01px 0px 1px #5E5E5E;}
     80%{-o-transform: rotate(-28deg) translateX(8.9em) skewX(-05deg) scale(1.3,0.9);transform: rotate(-28deg) translateX(8.9em) skewX(-05deg) scale(1.3,0.9); letter-spacing:5px; opacity:1.0; text-shadow:-01px 0px 1px #5E5E5E;}
    100%{-o-transform: rotate(-28deg) translateX(8.0em) skewX(-28deg) scale(1);transform: rotate(-28deg) translateX(8.0em) skewX(-28deg) scale(1); letter-spacing:1px; opacity:1.0; text-shadow:-01px 0px 1px #8A8A8A;}
}
@keyframes suddenly-stretch {
     70%{-webkit-transform: rotate(-28deg) translateX(8.9em) skewX(-05deg) scale(1);-moz-transform: rotate(-28deg) translateX(8.9em) skewX(-05deg) scale(1);-o-transform: rotate(-28deg) translateX(8.9em) skewX(-05deg) scale(1);transform: rotate(-28deg) translateX(8.9em) skewX(-05deg) scale(1); letter-spacing:0px; opacity:1.0; text-shadow:-01px 0px 1px #5E5E5E;}
     80%{-webkit-transform: rotate(-28deg) translateX(8.9em) skewX(-05deg) scale(1.3,0.9);-moz-transform: rotate(-28deg) translateX(8.9em) skewX(-05deg) scale(1.3,0.9);-o-transform: rotate(-28deg) translateX(8.9em) skewX(-05deg) scale(1.3,0.9);transform: rotate(-28deg) translateX(8.9em) skewX(-05deg) scale(1.3,0.9); letter-spacing:5px; opacity:1.0; text-shadow:-01px 0px 1px #5E5E5E;}
    100%{-webkit-transform: rotate(-28deg) translateX(8.0em) skewX(-28deg) scale(1);-moz-transform: rotate(-28deg) translateX(8.0em) skewX(-28deg) scale(1);-o-transform: rotate(-28deg) translateX(8.0em) skewX(-28deg) scale(1);transform: rotate(-28deg) translateX(8.0em) skewX(-28deg) scale(1); letter-spacing:1px; opacity:1.0; text-shadow:-01px 0px 1px #8A8A8A;}
}

.aroof {
  display: inline-block;
  text-indent:0;
  opacity:0;
  letter-spacing:0;
  text-shadow:-0px 0px 1px #5e5e5e;
  -webkit-transform-origin:left 80%;
     -moz-transform-origin:left 80%;
      -ms-transform-origin:left 80%;
       -o-transform-origin:left 80%;
          transform-origin:left 80%;
  -webkit-transform: scale(0.90,0.90) translate(0.00em,0.00em) skewX( -00deg);
     -moz-transform: scale(0.90,0.90) translate(0.00em,0.00em) skewX( -00deg);
      -ms-transform: scale(0.90,0.90) translate(0.00em,0.00em) skewX( -00deg);
       -o-transform: scale(0.90,0.90) translate(0.00em,0.00em) skewX( -00deg);
          transform: scale(0.90,0.90) translate(0.00em,0.00em) skewX( -00deg); 
  -webkit-animation: aroof 0.70s 0.70s linear forwards;
  -moz-animation: aroof 0.70s 0.70s linear forwards;
  -o-animation: aroof 0.70s 0.70s linear forwards;
  animation: aroof 0.70s 0.70s linear forwards;
}

@-moz-keyframes aroof {
   30% {-moz-transform: scale(0.80,1.80) translate(1.20em,-.10em) skewX( -05deg); opacity:1.0; letter-spacing:0px; text-shadow:-0px 0px 1px #5e5e5e;}
   60% {-moz-transform: scale(1.60,1.50) translate(1.40em,-.20em) skewX( -35deg); opacity:1.0; letter-spacing:3px; text-shadow:-4px 1px 1px #5e5e5e;}
  100% {-moz-transform: scale(1.10,1.30) translate(1.40em,-.10em) skewX( -25deg); opacity:1.0; letter-spacing:1px; text-shadow:-2px 0px 1px #5e5e5e;}
}
@-webkit-keyframes aroof {
   30% {-webkit-transform: scale(0.80,1.80) translate(1.20em,-.10em) skewX( -05deg); opacity:1.0; letter-spacing:0px; text-shadow:-0px 0px 1px #5e5e5e;}
   60% {-webkit-transform: scale(1.60,1.50) translate(1.40em,-.20em) skewX( -35deg); opacity:1.0; letter-spacing:3px; text-shadow:-4px 1px 1px #5e5e5e;}
  100% {-webkit-transform: scale(1.10,1.30) translate(1.40em,-.10em) skewX( -25deg); opacity:1.0; letter-spacing:1px; text-shadow:-2px 0px 1px #5e5e5e;}
}
@-o-keyframes aroof {
   30% {-o-transform: scale(0.80,1.80) translate(1.20em,-.10em) skewX( -05deg); opacity:1.0; letter-spacing:0px; text-shadow:-0px 0px 1px #5e5e5e;}
   60% {-o-transform: scale(1.60,1.50) translate(1.40em,-.20em) skewX( -35deg); opacity:1.0; letter-spacing:3px; text-shadow:-4px 1px 1px #5e5e5e;}
  100% {-o-transform: scale(1.10,1.30) translate(1.40em,-.10em) skewX( -25deg); opacity:1.0; letter-spacing:1px; text-shadow:-2px 0px 1px #5e5e5e;}
}
@keyframes aroof {
   30% {-webkit-transform: scale(0.80,1.80) translate(1.20em,-.10em) skewX( -05deg);-moz-transform: scale(0.80,1.80) translate(1.20em,-.10em) skewX( -05deg);-o-transform: scale(0.80,1.80) translate(1.20em,-.10em) skewX( -05deg);transform: scale(0.80,1.80) translate(1.20em,-.10em) skewX( -05deg); opacity:1.0; letter-spacing:0px; text-shadow:-0px 0px 1px #5e5e5e;}
   60% {-webkit-transform: scale(1.60,1.50) translate(1.40em,-.20em) skewX( -35deg);-moz-transform: scale(1.60,1.50) translate(1.40em,-.20em) skewX( -35deg);-o-transform: scale(1.60,1.50) translate(1.40em,-.20em) skewX( -35deg);transform: scale(1.60,1.50) translate(1.40em,-.20em) skewX( -35deg); opacity:1.0; letter-spacing:3px; text-shadow:-4px 1px 1px #5e5e5e;}
  100% {-webkit-transform: scale(1.10,1.30) translate(1.40em,-.10em) skewX( -25deg);-moz-transform: scale(1.10,1.30) translate(1.40em,-.10em) skewX( -25deg);-o-transform: scale(1.10,1.30) translate(1.40em,-.10em) skewX( -25deg);transform: scale(1.10,1.30) translate(1.40em,-.10em) skewX( -25deg); opacity:1.0; letter-spacing:1px; text-shadow:-2px 0px 1px #5e5e5e;}
}