.main-logo {width:100%; height:100%; text-align:center;  position:relative; top:80px; z-index: 4;}

.scene {width: 100%; height:540px; transform:translate3d(0, 0, 0); position: relative; background: url(../images/bg0.jpg) center center  repeat-x; overflow:hidden; margin-top:100px;}
.scene0 {width:1300px; height:540px; position:relative; margin:0 auto; }

.cloud-3 { z-index: 0; position: absolute; top:-200px; left: 0; width: 100%; height: 100%; background-size: ; background: url(../images/cloud.png) 0 100% repeat-x; animation: parallax_fg linear 120s infinite both; }

.layer-1 { z-index: -1; position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; background-size:;  background: url(../images/bg0.jpg) 0 100% repeat-x;}

.container-3 { z-index: 0; position: absolute; top:195px; right:98px; width:237px; height:116px; background: url(../images/container01.png) no-repeat; animation:container ease-out 20s infinite both; }
.caret-3{ z-index: 0; position: absolute; top:107px; right:97px; width:239px; height:127px; background: url(../images/caret.png) no-repeat; animation:caret ease-out 20s infinite both; }
.rope-3{ z-index: 0; position: absolute; top:80px; right:205px; width:14px; height:37px; background: url(../images/rope.png) no-repeat; animation:rope ease-out 20s infinite both; }
.train-3{ z-index: 0; position: absolute; bottom:20px; right:0px; width:2246px; height:212px; background: url(../images/train.png) no-repeat; animation:train ease-out 20s infinite both; }
.truck-3{ z-index: 0; position: absolute; bottom:0px; right:0px; width:615px; height:217px; background: url(../images/truck.png) no-repeat; animation: truck ease-out 20s infinite both; }
.colon-3{ z-index: 500; position: absolute; bottom:0px; right:-273px; width:55px; height:230px; background: url(../images/colon.png) no-repeat; animation:; }

@keyframes rope {
  0% {transform: scaleY(1);}
  10% {transform: scaleY(1);}
  15% {transform: scaleY(4.5) translate(0, 50%); }
 25% {transform: scaleY(3) translate(0, 50%);  }
  35% {transform: scaleY(6) translate(0, 50%);  }
  45% {transform: scaleY(1) translate(0, 50%);  }
  50% {transform: scaleY(1) translate(0, 50%);  }
  55% {transform: scaleY(5) translate(0, 50%); }
 71% {transform: scaleY(1) translate(0, 50%);} 
 74% {transform: scaleY(1) translate(0, 50%);} 
 86% {transform: scaleY(6) translate(0, 50%);} 
 98% {transform: scaleY(2.5) } 
  100% {transform: scaleY(1) ; }
 
  }



@keyframes caret {
  0% {transform: translate(0px, 0);}
  10% {transform: translate(0px, 0);}
  15% {transform: translate(0px, 150px); }
 25% {transform: translate(0px, 50px);  }
  35% {transform: translate(0px,209px);  }
  45% {transform: translate(0px,0);  }
  50% {transform: translate(0px,0);  }
  55% {transform: translate(0px,175px); }
 71% {transform: translate(0px,0px);} 
 74% {transform: translate(0px,0px);} 
 86% {transform: translate(0px,205px);} 
 98% {transform: translate(0px,0px);} 
  100% {transform: translate(0px,0px); }
 
  }




@keyframes container {
  0% {transform: translate(0px, 0);}
  10% {transform: translate(0px, 0);}
  15% {transform: translate(0px, 150px);}
  15% {transform: translate(0px, 150px); opacity:1;}
  16% {opacity:0;}
  17% {transform: translate(0px, 209px); opacity:0; }
  18% {transform: translate(0px, 209px); opacity:1; }
  35% {transform: translate(0px,209px);  }
  45% {transform: translate(0px,0);  }
  50% {transform: translate(0px,0);  }
  55% {transform: translate(0px,175px); }
 71% {transform: translate(0px,175px);opacity:1; } 
 84% {transform: translate(-1250px,175px); opacity:0; } 
 85% {transform: translate(0px,209px); opacity:0; } 
 86% {transform: translate(0px,209px); opacity:1; } 
 98% {transform: translate(0px,0px); opacity:1; } 
  100% {transform: translate(0px, 0); opacity:1;}
 
  }


@keyframes train {
  0% {transform: translate(2800px, 0);}
  30% {transform: translate(2800px, 0);}
  50% {transform: translate(860px, 0);}
  51% {transform: translate(865px, 0);}
  54% {transform: translate(865px, 0);}
  55% {transform: translate(865px, 2px);}
  56% {transform: translate(865px, 0);}
  70% {transform: translate(865px, 0);}
  71% {transform: translate(870px, 0);}
  100% { transform: translate(-1700px,0); }
  }



@keyframes truck {
  0% {transform: translate(1000px, 0);}
 10% { transform: translate(20px, 0); }
 12% { transform: translate(0px, 0); }
 13% { transform: translate(5px, 0); }
 15% { transform: translate(5px, 0); }
 16% { transform: translate(5px, 2px); }
 17% { transform: translate(5px, 0px); }
  30% { transform: translate(5px, 0); }
  31% { transform: translate(10px, 0); }
  60% { transform: translate(-2200px,0); }
  90% { transform: translate(-2200px,0); }
  100% { transform: translate(-2200px,0); }
  }

@keyframes parallax_fg {
  0% { background-position: 2800px 100%;}
  100% { background-position: 0px 100%;}
  }
  
  
 
.sun {animation: sun 100s infinite both;} 
  
@keyframes sun {
  0% { transform: rotate(0deg);}
  100% {transform: rotate(360deg);}
}


@media screen and (max-width: 1024px) {
.logo {max-width:100%; top:100px}
.scene {max-width: 100%; height:540px; }
.scene0 {max-width:100%;}

}
	
@media screen and (max-width: 600px) {
.logo {max-width:100%; background-size:contain;}
.scene {max-width: 100%; height:540px; }
.scene0 {max-width:100%;}
}