/*TRAIN*/
.train {
  position: absolute;
  top: 55%;
  width:100%;
  overflow:hidden;
  z-index: 2;
  background-image: url(../images/icons/track.svg);
	background-repeat: repeat-x;
}
 
.wagon {
	display: inline-block;
	position: relative; 
	background-image: url(../images/train.png);
	background-repeat: no-repeat;
	background-position: center center;
	width:488px;
	height:28px;  -webkit-animation: voyage 20s linear infinite;
    animation: voyage 20s linear infinite;
}
 
 
 

/*ANIMATIONS*/
@-webkit-keyframes dayTime {
  0% {
    background-color: #cce6fd;
  }
  50% {
    background-color: #252645;
  }
  100% {
    background-color: #cce6fd;
  }
}
@keyframes dayTime {
  0% {
    background-color: #cce6fd;
  }
  50% {
    background-color: #252645;
  }
  100% {
    background-color: #cce6fd;
  }
}
@-webkit-keyframes puf {
  0% {
    bottom: 0px;
  }
  25% {
    bottom: -1px;
  }
  100% {
    bottom: 5px;
  }
}
@keyframes puf {
  0% {
    bottom: 0px;
  }
  25% {
    bottom: -1px;
  }
  100% {
    bottom: 5px;
  }
}
@-webkit-keyframes wind {
  0% {
    right: 0;
  }
  100% {
    right: 110%;
  }
}
@keyframes wind {
  0% {
    right: 0;
  }
  100% {
    right: 110%;
  }
}
@-webkit-keyframes voyage {
  0% {
    left: -310px;
  }
  100% {
    left: 100%;
  }
}
@keyframes voyage {
  0% {
    left: -310px;
  }
  100% {
    left: 100%;
  }
}
@-webkit-keyframes spin {
  100% {
    -webkit-transform: rotate(360deg);
  }
}
@keyframes spin {
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}


@media only screen and (max-width: 1199.99px) {
 
.train {
  top:35%;
}
 
}