@keyframes backgound-scene-anim{
  0%{
    background-position: 0 0;
  }
  100%{
    background-position: -10000% 0;
  }
}
#main-aimation-scene{
  width: 100vw;
  height: 40vw;
  max-height: 80vh;
  margin: 0 auto;
  position: relative;
}

@keyframes backgound-grass-anim{
  0%{
    background-position: 0 0;
  }
  100%{
    background-position: 10000% 0;
  }
}
#el-grass{
  background: url('../images/grass.png') repeat-x left bottom;
  background-size: auto 100%;
  animation: backgound-grass-anim 1000s linear infinite;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 92%;
}

#el-tree{
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: url('../images/_tree.png') repeat-x left top;
  animation: backgound-scene-anim 4000s linear infinite;
  background-size: auto 100%;
}

@keyframes backgound-wall-anim{
  0%{
    background-position: 0 100%;
  }
  100%{
    background-position: -10000% 100%;
  }
}
#el-wall{
  position: absolute;
  left: 0
  top: 0;
  width: 100%;
  height: 100%;
  background: url('../images/_wall.png') repeat-x left top;
  animation: backgound-wall-anim 3200s linear infinite;
  background-size: auto 100%;
}

@keyframes background-rail-anim{
  0%{
    background-position: 0 0;
  }
  100%{
    background-position: 100% 0;
  }
}
#el-rail{
  background: url('../images/track-2.png') repeat-x left top;
  background-size: auto 100%;
  height: 2%;
  width: 100%;
  position: absolute;
  left: 0;
  bottom: 6.5%;
  animation: background-rail-anim 20s linear infinite;
}

#el-train{
  position: absolute;
  bottom: 4.5%;
  height: 48%;
  width: 100%;
  background: url('../images/train.png') no-repeat center bottom;
  background-size: auto 100%;
}

#el-slogan-image{
  position: absolute;
  left: 50%;
  top: 4%;
  width: 40%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  text-align: center;
}
#el-slogan-image img{
  max-width: 100%;
}