#smiley {
  -webkit-animation: smile 2s 1;
  -moz-animation:    smile 2s 1;
  -o-animation:      smile 2s 1;
  animation:         smile 2s 1;
}

@-webkit-keyframes smile {
  0%   { opacity: 0; }
  50% { opacity: 1; }
}
@-moz-keyframes smile {
  0%   { opacity: 0; }
  50% { opacity: 1; }
}
@-o-keyframes smile {
  0%   { opacity: 0; }
  50% { opacity: 1; }
}
@keyframes smile {
  0%   { opacity: 0; }
  50% { opacity: 1; }
}


#hand {
  -webkit-animation: hand 1s 1;
  -moz-animation:    hand 1s 1;
  -o-animation:      hand 1s 1;
  animation:         hand 1s 1;
}



@-webkit-keyframes hand {
  0%   { opacity: 0; }
  50%  { opacity: 0; }
  100% { opacity: 1; }
}
@-moz-keyframes hand {
  0%   { opacity: 0; }
  50%  { opacity: 0; }
  100% { opacity: 1; }
}
@-o-keyframes hand {
  0%   { opacity: 0; }
  50%  { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes hand {
  0%   { opacity: 0; }
  50%  { opacity: 0; }
  100% { opacity: 1; }
}




/** animated boxes **/
.animBlock {
  display: inline-block;
  -webkit-transition: all .55s ease-out;
  -moz-transition: all .55s ease-out;
  -ms-transition: all .55s ease-out;
  -o-transition: all .55s ease-out;
  transition: all .55s ease-out;
  position: relative;
}


.animBlock[data-position="left"] { left: -120%; top: -90px }
 
.animBlock[data-position="left"].viewed {
  left: 3%;
  top: 0px;
 
  }






 
.floatl { 
  float: left;
  }