/* -------------------------------
SPECIAL CSS FOR THE INTRODUCTION
--------------------------------*/

#intro {
	height: 250px;
	background-color: #b6d9e3;
	overflow: hidden;
	position: relative;
}

#intro.pause>* {
	animation-play-state: paused !important;
}

#intro>div {
	position: absolute;
	top: 0;
	left: 50%;

	transform: translate(-50%, 0);
	height: 100%;
	width: 100%;
}

#intro>.clouds02 {
	width: 4800px;
	background-image: url('../images/intro/clouds-level-2.svg') !important;
	background-repeat: repeat-x;
	background-position: bottom left;
	background-size: 2400px 250px;
}

#intro.running>.clouds02 {

	animation: clouds 20000ms ease-in-out forwards 1;
}

/* #intro.running.stop-running> *  {
	animation-duration: 3000ms !important;
	animation-timing-function: ease-out !important;
} */

#intro>.clouds01 {
	width: 4800px;
	background-image: url('../images/intro/clouds-level-1.svg') !important;
	background-repeat: repeat-x;
	background-position: bottom left;
	background-size: 2400px 250px;
}

#intro.running>.clouds01 {

	animation: clouds 20000ms ease-in-out forwards 1;
}



#intro>.montains {
	width: 3392px;
	background-image: url('../images/intro/montains.svg') !important;
	background-repeat: repeat-x;
	background-position: bottom left;
	background-size: 1696px 250px;
}

#intro.running>.montains {

	animation: montains 20000ms ease-in-out forwards 1;
}



#intro>.town01 {
	width: 3840px;
	background-image: url('../images/intro/town-level-1.svg') !important;
	background-repeat: repeat-x;
	background-position: bottom left;
	background-size: 1920px 250px;
}

#intro.running>.town01 {

	animation: townOne 20000ms ease-in-out forwards 1;
}



#intro>.town02 {
	width: 3986px;
	background-image: url('../images/intro/town-level-2.svg') !important;
	background-repeat: repeat-x;
	background-position: bottom left;
	background-size: 1993px 250px;
}

#intro.running>.town02 {
	animation: townTwo 20000ms ease-in-out forwards 1;
}



#intro>.town03 {
	width: 4800px;
	background-image: url('../images/intro/town-level-3.svg') !important;
	background-repeat: repeat-x;
	background-position: bottom left;
	background-size: 2400px 250px;
	/*this line is needed for ie support NEED TO ADD THIS FOR ALL SVG BG*/
}

#intro.running>.town03 {

	animation: townThree 20000ms ease-in-out forwards 1;
}



#intro>.trees {
	width: 3840px;
	background-image: url('../images/intro/trees.svg') !important;
	background-repeat: repeat-x;
	background-position: bottom left;
	background-size: 2400px 250px;
	/*this line is needed for ie support NEED TO ADD THIS FOR ALL SVG BG*/
}

#intro.running>.trees {
	animation: trees 20000ms ease-in-out forwards 1;
}

/* #intro.stop-running> .trees  {
	animation: trees 3000ms ease-out both calc(17000/7800) !important;

} */


#intro>.logos {
	width: 3986px;
	background-image: url('../images/intro/logos.svg') !important;
	background-repeat: no-repeat;
	background-position: bottom left;
	background-position-x: 1993px;
	background-size: 3986px 250px;
}

#intro.start-logos>.logos {
	animation: startLogos 10000ms linear forwards;
}

#intro.run-logos>.logos {
	animation: runLogos 20000ms ease-in-out forwards 1;
}



#intro>.ground {
	width: 2400px;
	background-image: url('../images/intro/ground.svg') !important;
	background-repeat: repeat-x;
	background-position: bottom -7px left;
	background-size: 100px 250px;
}

#intro>.station {
	width: 6000px;
	top: -1px;
	background-image: url('../images/intro/station.svg') !important;
	background-repeat: repeat-x;
	background-position: 0px bottom;
	background-size: 6000px 250px;

}

#intro.running>.station {
	animation: station 20000ms ease-in-out forwards 1;
}

/* @media screen and (max-width: 640px) {
	#intro>.station {
		background-size: 60% auto;
		background-position: bottom 13px left 480px;
	}

	#intro.running>.station {
		animation: station-resp 20000ms ease-in-out forwards;
	}

} */


#intro>.train {
	width: 1920px;
	transform: translate(-1920px, 0);
	animation: train 2000ms ease-out;
}

#intro>.train>svg {
	width: 1920px;
	height: 250px;
}

@media screen and (max-width: 640px) {
	#intro>.train {
		width: 1280px;
		top: 61px;
		transform: translate(-1280px, 0);
	}

	#intro>.train>svg {
		width: 1280px;
		height: 187.5px;
	}
}


@keyframes clouds {
	0% {
		background-position: 0px bottom;
	}

	100% {
		background-position: -342.8571429px bottom;
	}
}

@keyframes montains {
	0% {
		background-position: 0px bottom;
	}

	100% {
		background-position: -1696px bottom;
	}
}

@keyframes townOne {
	0% {
		background-position: 0px bottom;
	}

	100% {
		background-position: -3413.333333px bottom;
	}
}

@keyframes townTwo {
	0% {
		background-position: 0px bottom;
	}

	100% {
		background-position: -3986px bottom;
	}
}

@keyframes trees {
	0% {
		background-position: 0px bottom;
	}

	100% {
		background-position: -6153px bottom;
	}
}

@keyframes startLogos {
	0% {
		left: 2000px;
	}

	100% {
		left: 0px;
	}
}

@keyframes runLogos {
	0% {
		background-position: 1993px bottom;
	}

	100% {
		background-position: -1993px bottom;
	}
}

@keyframes townThree {
	0% {
		background-position: 0px bottom;
	}

	100% {
		background-position: -6000px bottom;
	}
}

@keyframes station {
	0% {
		background-position: 0px bottom;
	}

	100% {
		background-position: -6000px bottom;
	}
}

@keyframes station-resp {
	0% {
		background-position: bottom 13px left 480px;
	}

	100% {
		background-position: bottom 13px left -1600px;
	}
}

@keyframes train {
	0% {
		left: 0%;
	}

	100% {
		left: 50%;
	}
}