/* main container for the shape falling down */
.container{
	top:0px;
	width:100%;
	height: 100%;
	position:absolute;
	left:0%;
}

.fallingshape span {
    display: inline-block;
    width: 40px;
    height: 52px;
	margin: -280px 40px -154px  -34px;
	position: absolute;
	background:url("../images/puzzle/puzzle1.png");
    
    -webkit-animation: fallingshape 5s 1s  linear;
    -moz-animation: fallingshape 5s 1s  linear;
}
.fallingshape2 span {
    display: inline-block;
    width: 30px;
    height: 49px;
	margin: -280px 0px -154px  1050px;
	position: absolute;
	background:url("../images/puzzle/puzzle2.png");
    
    -webkit-animation: fallingshape 6s 1s  linear;
    -moz-animation: fallingshape 6s 1s  linear;
}
.fallingshape3 span {
    display: inline-block;
    width: 30px;
    height: 47px;
	margin: -280px 400px -154px  70px;
	position: absolute;
	background:url("../images/puzzle/puzzle3.png");
    
    -webkit-animation: fallingshape 3s 1s  linear;
    -moz-animation: fallingshape 3s 1s  linear;
}
.fallingshape4 span {
    display: inline-block;
    width: 40px;
    height: 59px;
	margin: -280px 600px -154px  100px;
	position: absolute;
	background:url("../images/puzzle/puzzle4.png");
    
    -webkit-animation: fallingshape 7s 1s  linear;
    -moz-animation: fallingshape 7s 1s  linear;
}
.fallingshape5 span {
    display: inline-block;
    width: 30px;
    height: 48px;
	margin: -280px 600px -154px  1024px;
	position: absolute;
	background:url("../images/puzzle/puzzle5.png");
    
    -webkit-animation: fallingshape 9s 1s  linear;
    -moz-animation: fallingshape 9s 1s  linear;
}
.fallingshape6 span {
    display: inline-block;
    width: 25px;
    height: 60px;
	margin: -280px 600px -154px  25px;
	position: absolute;
	background:url("../images/puzzle/puzzle6.png");
    
    -webkit-animation: fallingshape 3s 1s  linear;
    -moz-animation: fallingshape 3s 1s  linear;
}
.fallingshape7 span {
    display: inline-block;
    width: 25px;
    height: 60px;
	margin: -280px 600px -154px  200px;
	position: absolute;
	background:url("../images/puzzle/puzzle7.png");
    
    -webkit-animation: fallingshape 6s 1s  linear;
    -moz-animation: fallingshape 6s 1s  linear;
}
.fallingshape8 span {
    display: inline-block;
    width: 30px;
    height: 61px;
	margin: -280px 600px -154px  1034px;
	position: absolute;
	background:url("../images/puzzle/puzzle8.png");
    
    -webkit-animation: fallingshape 7s 1s  linear;
    -moz-animation: fallingshape 7s 1s  linear;
}
.fallingshape9 span {
    display: inline-block;
    width: 25px;
    height: 50px;
	margin: -280px 600px -154px  394px;
	position: absolute;
	background:url("../images/puzzle/puzzle9.png");
    
    -webkit-animation: fallingshape 3s 1s  linear;
    -moz-animation: fallingshape 3s 1s  linear;
}
.fallingshape10 span {
    display: inline-block;
    width: 30px;
    height: 73px;
	margin: -280px 600px -154px  440px;
	position: absolute;
	background:url("../images/puzzle/puzzle10.png");
    
    -webkit-animation: fallingshape 9s 1s  linear;
    -moz-animation: fallingshape 9s 1s  linear;
}
.fallingshape11 span {
    display: inline-block;
    width: 25px;
    height: 41px;
	margin: -280px 600px -154px  530px;
	position: absolute;
	background:url("../images/puzzle/puzzle11.png");
    
    -webkit-animation: fallingshape 4s 1s  linear;
    -moz-animation: fallingshape 4s 1s  linear;
}
.fallingshape12 span {
    display: inline-block;
    width: 40px;
    height: 53px;
	margin: -280px 600px -154px  600px;
	position: absolute;
	background:url("../images/puzzle/puzzle12.png");
    
    -webkit-animation: fallingshape 4s 1s  linear;
    -moz-animation: fallingshape 4s 1s  linear;
}
.fallingshape13 span {
    display: inline-block;
    width: 30px;
    height: 58px;
	margin: -280px 600px -154px  665px;
	position: absolute;
	background:url("../images/puzzle/puzzle13.png");
    
    -webkit-animation: fallingshape 3s 1s  linear;
    -moz-animation: fallingshape 3s 1s  linear;
}
.fallingshape14 span {
    display: inline-block;
    width: 30px;
    height: 61px;
	margin: -280px 600px -154px  712px;
	position: absolute;
	background:url("../images/puzzle/puzzle14.png");
    
    -webkit-animation: fallingshape 8s 1s  linear;
    -moz-animation: fallingshape 8s 1s  linear;
}
.fallingshape15 span {
    display: inline-block;
    width: 25px;
    height: 40px;
	margin: -280px 600px -154px  824px;
	position: absolute;
	background:url("../images/puzzle/puzzle15.png");
    
    -webkit-animation: fallingshape 2s 1s  linear;
    -moz-animation: fallingshape 2s 1s  linear;
}
.fallingshape16 span {
    display: inline-block;
    width: 30px;
    height: 48px;
	margin: -280px 600px -154px  886px;
	position: absolute;
	background:url("../images/puzzle/puzzle16.png");
    
    -webkit-animation: fallingshape 6s 1s  linear;
    -moz-animation: fallingshape 6s 1s  linear;
}
.fallingshape17 span {
    display: inline-block;
    width: 25px;
    height: 50px;
	margin: -520px 600px -154px  934px;
	position: absolute;
	background:url("../images/puzzle/puzzle17.png");
    
    -webkit-animation: fallingshape 4s 1s  linear;
    -moz-animation: fallingshape 4s 1s  linear;
}
.fallingshape18 span {
    display: inline-block;
    width: 25px;
    height: 51px;
	margin: -480px 600px -154px  987px;
	position: absolute;
	background:url("../images/puzzle/puzzle18.png");
    
    -webkit-animation: fallingshape 7s 1s  linear;
    -moz-animation: fallingshape 7s 1s  linear;
}
.fallingshape19 span {
    display: inline-block;
    width: 30px;
    height: 44px;
	margin: -680px 600px -154px  1033px;
	position: absolute;
	background:url("../images/puzzle/puzzle19.png");
    
    -webkit-animation: fallingshape 5s 1s  linear;
    -moz-animation: fallingshape 5s 1s  linear;
}
.fallingshape20 span {
    display: inline-block;
    width: 30px;
    height: 46px;
	margin: -580px 600px -154px  1176px;
	position: absolute;
	background:url("../images/puzzle/puzzle20.png");
    
    -webkit-animation: fallingshape 3s 1s  linear;
    -moz-animation: fallingshape 3s 1s  linear;
}


.fallingshape span:nth-child(5n+5) {

    -webkit-animation-delay: 1.3s;
    -moz-animation-delay: 1.3s;
}
.fallingshape8 span:nth-child(5n+5) {

    -webkit-animation-delay: 1.3s;
    -moz-animation-delay: 1.3s;
}
.fallingshape9 span:nth-child(5n+5) {

    -webkit-animation-delay: 1.3s;
    -moz-animation-delay: 1.3s;
}
.fallingshape2 span:nth-child(3n+2) {

    -webkit-animation-delay: 1.5s;
    -moz-animation-delay: 1.5s;
}
.fallingshape10 span:nth-child(3n+2) {

    -webkit-animation-delay: 1.5s;
    -moz-animation-delay: 1.5s;
}
.fallingshape3 span:nth-child(2n+5) {

    -webkit-animation-delay: 1.7s;
    -moz-animation-delay: 1.7s;
}
.fallingshape11 span:nth-child(2n+5) {

    -webkit-animation-delay: 1.7s;
    -moz-animation-delay: 1.7s;
}
.fallingshape12 span:nth-child(2n+5) {

    -webkit-animation-delay: 1.7s;
    -moz-animation-delay: 1.7s;
}
.fallingshape4 span:nth-child(3n+10) {

    -webkit-animation-delay: 2.7s;
    -moz-animation-delay: 2.7s;
}
.fallingshape13 span:nth-child(3n+10) {

    -webkit-animation-delay: 2.7s;
    -moz-animation-delay: 2.7s;
}
.fallingshape14 span:nth-child(3n+10) {

    -webkit-animation-delay: 2.7s;
    -moz-animation-delay: 2.7s;
}
.fallingshape5 span:nth-child(7n+2) {

    -webkit-animation-delay: 3.5s;
    -moz-animation-delay: 3.5s;
}
.fallingshape15 span:nth-child(7n+2) {

    -webkit-animation-delay: 3.5s;
    -moz-animation-delay: 3.5s;
}
.fallingshape16 span:nth-child(7n+2) {

    -webkit-animation-delay: 3.5s;
    -moz-animation-delay: 3.5s;
}
.fallingshape6 span:nth-child(4n+5) {

    -webkit-animation-delay: 5.5s;
    -moz-animation-delay: 5.5s;
}
.fallingshape17 span:nth-child(4n+5) {

    -webkit-animation-delay: 5.5s;
    -moz-animation-delay: 5.5s;
}
.fallingshape18 span:nth-child(4n+5) {

    -webkit-animation-delay: 5.5s;
    -moz-animation-delay: 5.5s;
}
.fallingshape7 span:nth-child(3n+7) {

    -webkit-animation-delay: 8s;
    -moz-animation-delay: 8s;
}
.fallingshape19 span:nth-child(3n+7) {

    -webkit-animation-delay: 8s;
    -moz-animation-delay: 8s;
}
.fallingshape20 span:nth-child( ) {

    -webkit-animation-delay: 8s;
    -moz-animation-delay: 8s;
}
@-webkit-keyframes fallingshape {
  0% {
    opacity: 1;

	-webkit-transform: translate(0, 0px) rotateZ(0deg);
  }
  75% {
    opacity: 1;

	-webkit-transform: translate(100px, 900px) rotateZ(270deg); 
  }
  100% {
    opacity: 0;

	-webkit-transform: translate(150px, 1100px) rotateZ(360deg);
  }
}
@-moz-keyframes fallingshape {
  0% {
    opacity: 1;
    
	-webkit-transform: translate(0, 0px) rotateZ(0deg);
  }
  75% {
    opacity: 1;
   
	-webkit-transform: translate(100px, 900px) rotateZ(270deg); 
  }
  100% {
    opacity: 0;
    
	-webkit-transform: translate(150px, 1100px) rotateZ(360deg);
  }
}