Parallax SVG Bus Animation

HTML

              
                <div class="main-section">
	<div id="scene">
		<div id="background-wrap">
			<div class="x1">
				<div class="cloud"></div>
			</div>

			<div class="x2">
				<div class="cloud"></div>
			</div>

			<div class="x3">
				<div class="cloud"></div>
			</div>
		</div>

		<!-- Clouds -->
		<div class="cloud_3" data-depth="0.2">
			<img src="https://res.cloudinary.com/dyquku6bs/image/upload/v1536209468/ic_cloud-3_ygyuja.svg" alt="">
		</div>
		<div class="heading" data-depth="0.1">
			<h1>A Beautiful Day</h1>
		</div>
		<div class="cloud_1" data-depth="0.6">
			<img src="https://res.cloudinary.com/dyquku6bs/image/upload/v1536209468/ic_cloud-1_y4gj1j.svg" alt=""> </div>
		<div class="cloud_2" data-depth="0.4">
			<img src="https://res.cloudinary.com/dyquku6bs/image/upload/v1536209468/ic_cloud-2_uw3c2v.svg" alt=""> </div>

		<!-- Hill-bg -->
		<div class="hills-background-wrap">
			<div class="inner slide-right-img"></div>
		</div>

		<!-- Rope-line -->
		<div class="rope-line">
			<div class="inner slide-right-rope"></div>
		</div>

		<!-- Buildings Background -->
		<div class="buildings-bg">
			<div class="inner"></div>
		</div>

		<!-- Bus -->
		<div class="bus-wrap">
			<div class="inner">
				<svg width="621px" height="182px" viewBox="0 0 621 182" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                        <!-- Generator: Sketch 50 (54983) - http://www.bohemiancoding.com/sketch -->
                        <title>bus Clipped</title>
                        <desc>Created with Sketch.</desc>
                        <defs>
                            <rect id="path-1" x="0" y="0" width="4860" height="996"></rect>
                            <path d="M594.470881,148.950741 L591.294014,151.571433 C587.638852,154.588205 580.922868,157 576.180772,157 L13.4417459,157 C8.30740914,157 3.75203894,152.860525 3.26480368,147.750913 L0.165709314,115.206205 C-0.267398067,110.664229 0.177608079,103.392385 1.16124897,98.94008 L21.0361416,8.928585 C22.1292344,3.98086207 27.0866126,0 32.1558247,0 L596.577702,0 C601.7631,0 606,4.23362221 606,9.4167241 L606,90.7248068 C606,95.193892 605.602422,102.451447 605.114202,106.886198 L602.037339,134.938957 C601.517669,139.686671 598.157724,145.907821 594.470881,148.950741 Z"
                                id="path-3"></path>
                            <path d="M594.470881,148.950741 L591.294014,151.571433 C587.638852,154.588205 580.922868,157 576.180772,157 L13.4417459,157 C8.30740914,157 3.75203894,152.860525 3.26480368,147.750913 L0.165709314,115.206205 C-0.267398067,110.664229 0.177608079,103.392385 1.16124897,98.94008 L21.0361416,8.928585 C22.1292344,3.98086207 27.0866126,0 32.1558247,0 L596.577702,0 C601.7631,0 606,4.23362221 606,9.4167241 L606,90.7248068 C606,95.193892 605.602422,102.451447 605.114202,106.886198 L602.037339,134.938957 C601.517669,139.686671 598.157724,145.907821 594.470881,148.950741 Z"
                                id="path-5"></path>
                            <path d="M594.470881,148.950741 L591.294014,151.571433 C587.638852,154.588205 580.922868,157 576.180772,157 L13.4417459,157 C8.30740914,157 3.75203894,152.860525 3.26480368,147.750913 L0.165709314,115.206205 C-0.267398067,110.664229 0.177608079,103.392385 1.16124897,98.94008 L21.0361416,8.928585 C22.1292344,3.98086207 27.0866126,0 32.1558247,0 L596.577702,0 C601.7631,0 606,4.23362221 606,9.4167241 L606,90.7248068 C606,95.193892 605.602422,102.451447 605.114202,106.886198 L602.037339,134.938957 C601.517669,139.686671 598.157724,145.907821 594.470881,148.950741 Z"
                                id="path-7"></path>
                            <path d="M594.470881,148.950741 L591.294014,151.571433 C587.638852,154.588205 580.922868,157 576.180772,157 L13.4417459,157 C8.30740914,157 3.75203894,152.860525 3.26480368,147.750913 L0.165709314,115.206205 C-0.267398067,110.664229 0.177608079,103.392385 1.16124897,98.94008 L21.0361416,8.928585 C22.1292344,3.98086207 27.0866126,0 32.1558247,0 L596.577702,0 C601.7631,0 606,4.23362221 606,9.4167241 L606,90.7248068 C606,95.193892 605.602422,102.451447 605.114202,106.886198 L602.037339,134.938957 C601.517669,139.686671 598.157724,145.907821 594.470881,148.950741 Z"
                                id="path-9"></path>
                            <path d="M594.470881,148.950741 L591.294014,151.571433 C587.638852,154.588205 580.922868,157 576.180772,157 L13.4417459,157 C8.30740914,157 3.75203894,152.860525 3.26480368,147.750913 L0.165709314,115.206205 C-0.267398067,110.664229 0.177608079,103.392385 1.16124897,98.94008 L21.0361416,8.928585 C22.1292344,3.98086207 27.0866126,0 32.1558247,0 L596.577702,0 C601.7631,0 606,4.23362221 606,9.4167241 L606,90.7248068 C606,95.193892 605.602422,102.451447 605.114202,106.886198 L602.037339,134.938957 C601.517669,139.686671 598.157724,145.907821 594.470881,148.950741 Z"
                                id="path-11"></path>
                            <path d="M594.470881,148.950741 L591.294014,151.571433 C587.638852,154.588205 580.922868,157 576.180772,157 L13.4417459,157 C8.30740914,157 3.75203894,152.860525 3.26480368,147.750913 L0.165709314,115.206205 C-0.267398067,110.664229 0.177608079,103.392385 1.16124897,98.94008 L21.0361416,8.928585 C22.1292344,3.98086207 27.0866126,0 32.1558247,0 L596.577702,0 C601.7631,0 606,4.23362221 606,9.4167241 L606,90.7248068 C606,95.193892 605.602422,102.451447 605.114202,106.886198 L602.037339,134.938957 C601.517669,139.686671 598.157724,145.907821 594.470881,148.950741 Z"
                                id="path-13"></path>
                            <path d="M594.470881,148.950741 L591.294014,151.571433 C587.638852,154.588205 580.922868,157 576.180772,157 L13.4417459,157 C8.30740914,157 3.75203894,152.860525 3.26480368,147.750913 L0.165709314,115.206205 C-0.267398067,110.664229 0.177608079,103.392385 1.16124897,98.94008 L21.0361416,8.928585 C22.1292344,3.98086207 27.0866126,0 32.1558247,0 L596.577702,0 C601.7631,0 606,4.23362221 606,9.4167241 L606,90.7248068 C606,95.193892 605.602422,102.451447 605.114202,106.886198 L602.037339,134.938957 C601.517669,139.686671 598.157724,145.907821 594.470881,148.950741 Z"
                                id="path-15"></path>
                            <path d="M594.470881,148.950741 L591.294014,151.571433 C587.638852,154.588205 580.922868,157 576.180772,157 L13.4417459,157 C8.30740914,157 3.75203894,152.860525 3.26480368,147.750913 L0.165709314,115.206205 C-0.267398067,110.664229 0.177608079,103.392385 1.16124897,98.94008 L21.0361416,8.928585 C22.1292344,3.98086207 27.0866126,0 32.1558247,0 L596.577702,0 C601.7631,0 606,4.23362221 606,9.4167241 L606,90.7248068 C606,95.193892 605.602422,102.451447 605.114202,106.886198 L602.037339,134.938957 C601.517669,139.686671 598.157724,145.907821 594.470881,148.950741 Z"
                                id="path-17"></path>
                            <path d="M594.470881,148.950741 L591.294014,151.571433 C587.638852,154.588205 580.922868,157 576.180772,157 L13.4417459,157 C8.30740914,157 3.75203894,152.860525 3.26480368,147.750913 L0.165709314,115.206205 C-0.267398067,110.664229 0.177608079,103.392385 1.16124897,98.94008 L21.0361416,8.928585 C22.1292344,3.98086207 27.0866126,0 32.1558247,0 L596.577702,0 C601.7631,0 606,4.23362221 606,9.4167241 L606,90.7248068 C606,95.193892 605.602422,102.451447 605.114202,106.886198 L602.037339,134.938957 C601.517669,139.686671 598.157724,145.907821 594.470881,148.950741 Z"
                                id="path-19"></path>
                            <path d="M594.470881,148.950741 L591.294014,151.571433 C587.638852,154.588205 580.922868,157 576.180772,157 L13.4417459,157 C8.30740914,157 3.75203894,152.860525 3.26480368,147.750913 L0.165709314,115.206205 C-0.267398067,110.664229 0.177608079,103.392385 1.16124897,98.94008 L21.0361416,8.928585 C22.1292344,3.98086207 27.0866126,0 32.1558247,0 L596.577702,0 C601.7631,0 606,4.23362221 606,9.4167241 L606,90.7248068 C606,95.193892 605.602422,102.451447 605.114202,106.886198 L602.037339,134.938957 C601.517669,139.686671 598.157724,145.907821 594.470881,148.950741 Z"
                                id="path-21"></path>
                            <path d="M594.470881,148.950741 L591.294014,151.571433 C587.638852,154.588205 580.922868,157 576.180772,157 L13.4417459,157 C8.30740914,157 3.75203894,152.860525 3.26480368,147.750913 L0.165709314,115.206205 C-0.267398067,110.664229 0.177608079,103.392385 1.16124897,98.94008 L21.0361416,8.928585 C22.1292344,3.98086207 27.0866126,0 32.1558247,0 L596.577702,0 C601.7631,0 606,4.23362221 606,9.4167241 L606,90.7248068 C606,95.193892 605.602422,102.451447 605.114202,106.886198 L602.037339,134.938957 C601.517669,139.686671 598.157724,145.907821 594.470881,148.950741 Z"
                                id="path-23"></path>
                            <path d="M594.470881,148.950741 L591.294014,151.571433 C587.638852,154.588205 580.922868,157 576.180772,157 L13.4417459,157 C8.30740914,157 3.75203894,152.860525 3.26480368,147.750913 L0.165709314,115.206205 C-0.267398067,110.664229 0.177608079,103.392385 1.16124897,98.94008 L21.0361416,8.928585 C22.1292344,3.98086207 27.0866126,0 32.1558247,0 L596.577702,0 C601.7631,0 606,4.23362221 606,9.4167241 L606,90.7248068 C606,95.193892 605.602422,102.451447 605.114202,106.886198 L602.037339,134.938957 C601.517669,139.686671 598.157724,145.907821 594.470881,148.950741 Z"
                                id="path-25"></path>
                            <path d="M51.5733154,43 C52.9138242,43 54,41.9115583 54,40.5673552 L54,2.43543778 C54,1.09024052 52.912832,0 51.5733154,0 L2.42389846,0 C1.08537441,0 0,1.08924605 0,2.43543778 L0,40.5673552 C0,41.9125528 1.08438226,43 2.42389846,43 L51.5733154,43 Z"
                                id="path-27"></path>
                            <path d="M594.470881,148.950741 L591.294014,151.571433 C587.638852,154.588205 580.922868,157 576.180772,157 L13.4417459,157 C8.30740914,157 3.75203894,152.860525 3.26480368,147.750913 L0.165709314,115.206205 C-0.267398067,110.664229 0.177608079,103.392385 1.16124897,98.94008 L21.0361416,8.928585 C22.1292344,3.98086207 27.0866126,0 32.1558247,0 L596.577702,0 C601.7631,0 606,4.23362221 606,9.4167241 L606,90.7248068 C606,95.193892 605.602422,102.451447 605.114202,106.886198 L602.037339,134.938957 C601.517669,139.686671 598.157724,145.907821 594.470881,148.950741 Z"
                                id="path-29"></path>
                            <path d="M51.5733154,43 C52.9138242,43 54,41.9115583 54,40.5673552 L54,2.43543778 C54,1.09024052 52.912832,0 51.5733154,0 L2.42389846,0 C1.08537441,0 0,1.08924605 0,2.43543778 L0,40.5673552 C0,41.9125528 1.08438226,43 2.42389846,43 L51.5733154,43 Z"
                                id="path-31"></path>
                            <path d="M594.470881,148.950741 L591.294014,151.571433 C587.638852,154.588205 580.922868,157 576.180772,157 L13.4417459,157 C8.30740914,157 3.75203894,152.860525 3.26480368,147.750913 L0.165709314,115.206205 C-0.267398067,110.664229 0.177608079,103.392385 1.16124897,98.94008 L21.0361416,8.928585 C22.1292344,3.98086207 27.0866126,0 32.1558247,0 L596.577702,0 C601.7631,0 606,4.23362221 606,9.4167241 L606,90.7248068 C606,95.193892 605.602422,102.451447 605.114202,106.886198 L602.037339,134.938957 C601.517669,139.686671 598.157724,145.907821 594.470881,148.950741 Z"
                                id="path-33"></path>
                            <path d="M51.5733154,43 C52.9138242,43 54,41.9115583 54,40.5673552 L54,2.43543778 C54,1.09024052 52.912832,0 51.5733154,0 L2.42389846,0 C1.08537441,0 0,1.08924605 0,2.43543778 L0,40.5673552 C0,41.9125528 1.08438226,43 2.42389846,43 L51.5733154,43 Z"
                                id="path-35"></path>
                            <path d="M594.470881,148.950741 L591.294014,151.571433 C587.638852,154.588205 580.922868,157 576.180772,157 L13.4417459,157 C8.30740914,157 3.75203894,152.860525 3.26480368,147.750913 L0.165709314,115.206205 C-0.267398067,110.664229 0.177608079,103.392385 1.16124897,98.94008 L21.0361416,8.928585 C22.1292344,3.98086207 27.0866126,0 32.1558247,0 L596.577702,0 C601.7631,0 606,4.23362221 606,9.4167241 L606,90.7248068 C606,95.193892 605.602422,102.451447 605.114202,106.886198 L602.037339,134.938957 C601.517669,139.686671 598.157724,145.907821 594.470881,148.950741 Z"
                                id="path-37"></path>
                            <path d="M51.5733154,43 C52.9138242,43 54,41.9115583 54,40.5673552 L54,2.43543778 C54,1.09024052 52.912832,0 51.5733154,0 L2.42389846,0 C1.08537441,0 0,1.08924605 0,2.43543778 L0,40.5673552 C0,41.9125528 1.08438226,43 2.42389846,43 L51.5733154,43 Z"
                                id="path-39"></path>
                            <path d="M594.470881,148.950741 L591.294014,151.571433 C587.638852,154.588205 580.922868,157 576.180772,157 L13.4417459,157 C8.30740914,157 3.75203894,152.860525 3.26480368,147.750913 L0.165709314,115.206205 C-0.267398067,110.664229 0.177608079,103.392385 1.16124897,98.94008 L21.0361416,8.928585 C22.1292344,3.98086207 27.0866126,0 32.1558247,0 L596.577702,0 C601.7631,0 606,4.23362221 606,9.4167241 L606,90.7248068 C606,95.193892 605.602422,102.451447 605.114202,106.886198 L602.037339,134.938957 C601.517669,139.686671 598.157724,145.907821 594.470881,148.950741 Z"
                                id="path-41"></path>
                            <path d="M51.5733154,43 C52.9138242,43 54,41.9115583 54,40.5673552 L54,2.43543778 C54,1.09024052 52.912832,0 51.5733154,0 L2.42389846,0 C1.08537441,0 0,1.08924605 0,2.43543778 L0,40.5673552 C0,41.9125528 1.08438226,43 2.42389846,43 L51.5733154,43 Z"
                                id="path-43"></path>
                            <path d="M594.470881,148.950741 L591.294014,151.571433 C587.638852,154.588205 580.922868,157 576.180772,157 L13.4417459,157 C8.30740914,157 3.75203894,152.860525 3.26480368,147.750913 L0.165709314,115.206205 C-0.267398067,110.664229 0.177608079,103.392385 1.16124897,98.94008 L21.0361416,8.928585 C22.1292344,3.98086207 27.0866126,0 32.1558247,0 L596.577702,0 C601.7631,0 606,4.23362221 606,9.4167241 L606,90.7248068 C606,95.193892 605.602422,102.451447 605.114202,106.886198 L602.037339,134.938957 C601.517669,139.686671 598.157724,145.907821 594.470881,148.950741 Z"
                                id="path-45"></path>
                            <path d="M51.5733154,43 C52.9138242,43 54,41.9115583 54,40.5673552 L54,2.43543778 C54,1.09024052 52.912832,0 51.5733154,0 L2.42389846,0 C1.08537441,0 0,1.08924605 0,2.43543778 L0,40.5673552 C0,41.9125528 1.08438226,43 2.42389846,43 L51.5733154,43 Z"
                                id="path-47"></path>
                            <path d="M594.470881,148.950741 L591.294014,151.571433 C587.638852,154.588205 580.922868,157 576.180772,157 L13.4417459,157 C8.30740914,157 3.75203894,152.860525 3.26480368,147.750913 L0.165709314,115.206205 C-0.267398067,110.664229 0.177608079,103.392385 1.16124897,98.94008 L21.0361416,8.928585 C22.1292344,3.98086207 27.0866126,0 32.1558247,0 L596.577702,0 C601.7631,0 606,4.23362221 606,9.4167241 L606,90.7248068 C606,95.193892 605.602422,102.451447 605.114202,106.886198 L602.037339,134.938957 C601.517669,139.686671 598.157724,145.907821 594.470881,148.950741 Z"
                                id="path-49"></path>
                            <path d="M51.5733154,43 C52.9138242,43 54,41.9115583 54,40.5673552 L54,2.43543778 C54,1.09024052 52.912832,0 51.5733154,0 L2.42389846,0 C1.08537441,0 0,1.08924605 0,2.43543778 L0,40.5673552 C0,41.9125528 1.08438226,43 2.42389846,43 L51.5733154,43 Z"
                                id="path-51"></path>
                            <path d="M594.470881,148.950741 L591.294014,151.571433 C587.638852,154.588205 580.922868,157 576.180772,157 L13.4417459,157 C8.30740914,157 3.75203894,152.860525 3.26480368,147.750913 L0.165709314,115.206205 C-0.267398067,110.664229 0.177608079,103.392385 1.16124897,98.94008 L21.0361416,8.928585 C22.1292344,3.98086207 27.0866126,0 32.1558247,0 L596.577702,0 C601.7631,0 606,4.23362221 606,9.4167241 L606,90.7248068 C606,95.193892 605.602422,102.451447 605.114202,106.886198 L602.037339,134.938957 C601.517669,139.686671 598.157724,145.907821 594.470881,148.950741 Z"
                                id="path-53"></path>
                            <path d="M594.470881,148.950741 L591.294014,151.571433 C587.638852,154.588205 580.922868,157 576.180772,157 L13.4417459,157 C8.30740914,157 3.75203894,152.860525 3.26480368,147.750913 L0.165709314,115.206205 C-0.267398067,110.664229 0.177608079,103.392385 1.16124897,98.94008 L21.0361416,8.928585 C22.1292344,3.98086207 27.0866126,0 32.1558247,0 L596.577702,0 C601.7631,0 606,4.23362221 606,9.4167241 L606,90.7248068 C606,95.193892 605.602422,102.451447 605.114202,106.886198 L602.037339,134.938957 C601.517669,139.686671 598.157724,145.907821 594.470881,148.950741 Z"
                                id="path-55"></path>
                            <path d="M594.470881,148.950741 L591.294014,151.571433 C587.638852,154.588205 580.922868,157 576.180772,157 L13.4417459,157 C8.30740914,157 3.75203894,152.860525 3.26480368,147.750913 L0.165709314,115.206205 C-0.267398067,110.664229 0.177608079,103.392385 1.16124897,98.94008 L21.0361416,8.928585 C22.1292344,3.98086207 27.0866126,0 32.1558247,0 L596.577702,0 C601.7631,0 606,4.23362221 606,9.4167241 L606,90.7248068 C606,95.193892 605.602422,102.451447 605.114202,106.886198 L602.037339,134.938957 C601.517669,139.686671 598.157724,145.907821 594.470881,148.950741 Z"
                                id="path-57"></path>
                            <path d="M594.470881,148.950741 L591.294014,151.571433 C587.638852,154.588205 580.922868,157 576.180772,157 L13.4417459,157 C8.30740914,157 3.75203894,152.860525 3.26480368,147.750913 L0.165709314,115.206205 C-0.267398067,110.664229 0.177608079,103.392385 1.16124897,98.94008 L21.0361416,8.928585 C22.1292344,3.98086207 27.0866126,0 32.1558247,0 L596.577702,0 C601.7631,0 606,4.23362221 606,9.4167241 L606,90.7248068 C606,95.193892 605.602422,102.451447 605.114202,106.886198 L602.037339,134.938957 C601.517669,139.686671 598.157724,145.907821 594.470881,148.950741 Z"
                                id="path-59"></path>
                            <path d="M594.470881,148.950741 L591.294014,151.571433 C587.638852,154.588205 580.922868,157 576.180772,157 L13.4417459,157 C8.30740914,157 3.75203894,152.860525 3.26480368,147.750913 L0.165709314,115.206205 C-0.267398067,110.664229 0.177608079,103.392385 1.16124897,98.94008 L21.0361416,8.928585 C22.1292344,3.98086207 27.0866126,0 32.1558247,0 L596.577702,0 C601.7631,0 606,4.23362221 606,9.4167241 L606,90.7248068 C606,95.193892 605.602422,102.451447 605.114202,106.886198 L602.037339,134.938957 C601.517669,139.686671 598.157724,145.907821 594.470881,148.950741 Z"
                                id="path-61"></path>
                            <path d="M594.470881,148.950741 L591.294014,151.571433 C587.638852,154.588205 580.922868,157 576.180772,157 L13.4417459,157 C8.30740914,157 3.75203894,152.860525 3.26480368,147.750913 L0.165709314,115.206205 C-0.267398067,110.664229 0.177608079,103.392385 1.16124897,98.94008 L21.0361416,8.928585 C22.1292344,3.98086207 27.0866126,0 32.1558247,0 L596.577702,0 C601.7631,0 606,4.23362221 606,9.4167241 L606,90.7248068 C606,95.193892 605.602422,102.451447 605.114202,106.886198 L602.037339,134.938957 C601.517669,139.686671 598.157724,145.907821 594.470881,148.950741 Z"
                                id="path-63"></path>
                            <path d="M594.470881,148.950741 L591.294014,151.571433 C587.638852,154.588205 580.922868,157 576.180772,157 L13.4417459,157 C8.30740914,157 3.75203894,152.860525 3.26480368,147.750913 L0.165709314,115.206205 C-0.267398067,110.664229 0.177608079,103.392385 1.16124897,98.94008 L21.0361416,8.928585 C22.1292344,3.98086207 27.0866126,0 32.1558247,0 L596.577702,0 C601.7631,0 606,4.23362221 606,9.4167241 L606,90.7248068 C606,95.193892 605.602422,102.451447 605.114202,106.886198 L602.037339,134.938957 C601.517669,139.686671 598.157724,145.907821 594.470881,148.950741 Z"
                                id="path-65"></path>
                        </defs>
                        <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                            <g id="illustration" transform="translate(-4131.000000, -795.000000)">
                                <g id="Group-8">
                                    <g id="bus-Clipped">
                                        <mask id="mask-2" fill="white">
                                            <use xlink:href="#path-1"></use>
                                        </mask>
                                        <g id="path-1"></g>
                                        <g id="bus" mask="url(#mask-2)">
                                            <g transform="translate(4132.000000, 795.000000)" id="Group">
                                                <g>
                                                    <rect id="bus-shadow" fill="#000000" fill-rule="nonzero" opacity="0.100000001" x="27" y="172" width="567" height="10" rx="5"></rect>
                                                    <g id="bus_body" transform="translate(14.000000, 0.000000)">
                                                        <rect id="top-light_red" fill="#E85442" fill-rule="nonzero" x="567" y="0" width="18" height="9" rx="4"></rect>
                                                        <rect id="top-light_white" fill="#FFFFFF" fill-rule="nonzero" x="42" y="0" width="18" height="9" rx="4"></rect>
                                                        <g id="Mask" transform="translate(0.000000, 4.000000)" fill="#6871FF" fill-rule="nonzero">
                                                            <path d="M594.470881,148.950741 L591.294014,151.571433 C587.638852,154.588205 580.922868,157 576.180772,157 L13.4417459,157 C8.30740914,157 3.75203894,152.860525 3.26480368,147.750913 L0.165709314,115.206205 C-0.267398067,110.664229 0.177608079,103.392385 1.16124897,98.94008 L21.0361416,8.928585 C22.1292344,3.98086207 27.0866126,0 32.1558247,0 L596.577702,0 C601.7631,0 606,4.23362221 606,9.4167241 L606,90.7248068 C606,95.193892 605.602422,102.451447 605.114202,106.886198 L602.037339,134.938957 C601.517669,139.686671 598.157724,145.907821 594.470881,148.950741 Z"
                                                                id="path-7"></path>
                                                        </g>
                                                        <g id="headlight-Clipped" transform="translate(0.000000, 4.000000)">
                                                            <mask id="mask-4" fill="white">
                                                                <use xlink:href="#path-3"></use>
                                                            </mask>
                                                            <g id="path-7"></g>
                                                            <path d="M-3,121 L7.16188365,116.3099 C8.16478789,115.847021 9.35303989,116.284798 9.81591877,117.287702 C9.93719422,117.550466 10,117.836419 10,118.125819 L10,142.34854 C10,143.45311 9.1045695,144.34854 8,144.34854 C7.81416695,144.34854 7.62924068,144.32264 7.45055774,144.271588 L-4,141 L-3,121 Z"
                                                                id="headlight" fill="#FAEE5A" fill-rule="nonzero" mask="url(#mask-4)"></path>
                                                        </g>
                                                        <g id="Stroke-3-Clipped" transform="translate(0.000000, 4.000000)">
                                                            <mask id="mask-6" fill="white">
                                                                <use xlink:href="#path-5"></use>
                                                            </mask>
                                                            <g id="path-7"></g>
                                                            <path d="M1.16124897,98.94008 L21.0361416,8.928585 C21.5362725,6.6648164 27.0782373,7.7824808 27.0782373,9.4167241 L7.31745291,97.378459 C7.11236557,98.29137 6.30175224,98.94008 5.3660881,98.94008 L1.16124897,98.94008 Z"
                                                                id="Stroke-3" fill="#A6C3FF" fill-rule="nonzero" mask="url(#mask-6)"></path>
                                                        </g>
                                                        <g id="bus_sidelights-Clipped" transform="translate(0.000000, 4.000000)">
                                                            <mask id="mask-8" fill="white">
                                                                <use xlink:href="#path-7"></use>
                                                            </mask>
                                                            <g id="path-7"></g>
                                                            <rect id="bus_sidelights" fill="#FAEE5A" fill-rule="nonzero" mask="url(#mask-8)" x="98" y="128" width="7" height="4" rx="2"></rect>
                                                        </g>
                                                        <g id="bus_sidelights-Clipped" transform="translate(0.000000, 4.000000)">
                                                            <mask id="mask-10" fill="white">
                                                                <use xlink:href="#path-9"></use>
                                                            </mask>
                                                            <g id="path-7"></g>
                                                            <rect id="bus_sidelights" fill="#FAEE5A" fill-rule="nonzero" mask="url(#mask-10)" x="310" y="128" width="7" height="4" rx="2"></rect>
                                                        </g>
                                                        <g id="bus_sidelights-copy-Clipped" transform="translate(0.000000, 4.000000)">
                                                            <mask id="mask-12" fill="white">
                                                                <use xlink:href="#path-11"></use>
                                                            </mask>
                                                            <g id="path-7"></g>
                                                            <rect id="bus_sidelights-copy" fill="#FAEE5A" fill-rule="nonzero" mask="url(#mask-12)" x="203" y="128" width="7" height="4"
                                                                rx="2"></rect>
                                                        </g>
                                                        <g id="bus_sidelights-Clipped" transform="translate(0.000000, 4.000000)">
                                                            <mask id="mask-14" fill="white">
                                                                <use xlink:href="#path-13"></use>
                                                            </mask>
                                                            <g id="path-7"></g>
                                                            <rect id="bus_sidelights" fill="#FAEE5A" fill-rule="nonzero" mask="url(#mask-14)" x="451" y="128" width="7" height="4" rx="2"></rect>
                                                        </g>
                                                        <g id="bus_sidelights-copy-2-Clipped" transform="translate(0.000000, 4.000000)">
                                                            <mask id="mask-16" fill="white">
                                                                <use xlink:href="#path-15"></use>
                                                            </mask>
                                                            <g id="path-7"></g>
                                                            <rect id="bus_sidelights-copy-2" fill="#FAEE5A" fill-rule="nonzero" mask="url(#mask-16)" x="556" y="128" width="7" height="4"
                                                                rx="2"></rect>
                                                        </g>
                                                        <g id="Rectangle-8-Clipped" transform="translate(0.000000, 4.000000)">
                                                            <mask id="mask-18" fill="white">
                                                                <use xlink:href="#path-17"></use>
                                                            </mask>
                                                            <g id="path-7"></g>
                                                            <rect id="Rectangle-8" fill="#E3E4F6" fill-rule="nonzero" mask="url(#mask-18)" x="13" y="103" width="581" height="9"></rect>
                                                        </g>
                                                        <g id="Rectangle-8-Copy-Clipped" transform="translate(0.000000, 4.000000)">
                                                            <mask id="mask-20" fill="white">
                                                                <use xlink:href="#path-19"></use>
                                                            </mask>
                                                            <g id="path-7"></g>
                                                            <rect id="Rectangle-8-Copy" fill="#FAEE5A" fill-rule="nonzero" mask="url(#mask-20)" x="13" y="115" width="581" height="3"></rect>
                                                        </g>
                                                        <g id="Group-26-Clipped" transform="translate(0.000000, 4.000000)">
                                                            <mask id="mask-22" fill="white">
                                                                <use xlink:href="#path-21"></use>
                                                            </mask>
                                                            <g id="path-7"></g>
                                                            <g id="Group-26" mask="url(#mask-22)">
                                                                <g transform="translate(32.000000, 26.000000)" id="Group">
                                                                    <g>
                                                                        <path d="M2,0 L55,0 C56.1045695,-2.02906125e-16 57,0.8954305 57,2 L57,131 L0,131 L0,2 C-1.3527075e-16,0.8954305 0.8954305,2.02906125e-16 2,0 Z"
                                                                            id="door" fill="#4E54AA" fill-rule="nonzero"></path>
                                                                        <path d="M0.5,130.5 L56.5,130.5 L56.5,2 C56.5,1.17157288 55.8284271,0.5 55,0.5 L2,0.5 C1.17157288,0.5 0.5,1.17157288 0.5,2 L0.5,130.5 Z"
                                                                            id="door" stroke="#373064"></path>
                                                                        <rect id="Rectangle-22" fill="#6871FF" fill-rule="nonzero" x="28" y="1" width="1" height="129"></rect>
                                                                        <rect id="glass" fill="#A6C3FF" fill-rule="nonzero" x="7" y="7" width="14" height="100" rx="2"></rect>
                                                                        <rect id="glass" fill="#A6C3FF" fill-rule="nonzero" x="36" y="7" width="14" height="100" rx="2"></rect>
                                                                    </g>
                                                                </g>
                                                            </g>
                                                        </g>
                                                        <g id="Group-26-Copy-Clipped" transform="translate(0.000000, 4.000000)">
                                                            <mask id="mask-24" fill="white">
                                                                <use xlink:href="#path-23"></use>
                                                            </mask>
                                                            <g id="path-7"></g>
                                                            <g id="Group-26-Copy" mask="url(#mask-24)">
                                                                <g transform="translate(471.000000, 26.000000)" id="Group-28">
                                                                    <g>
                                                                        <g id="Group">
                                                                            <path d="M2,0 L55,0 C56.1045695,-2.02906125e-16 57,0.8954305 57,2 L57,131 L0,131 L0,2 C-1.3527075e-16,0.8954305 0.8954305,2.02906125e-16 2,0 Z"
                                                                                id="door" fill="#4E54AA" fill-rule="nonzero"></path>
                                                                            <path d="M0.5,130.5 L56.5,130.5 L56.5,2 C56.5,1.17157288 55.8284271,0.5 55,0.5 L2,0.5 C1.17157288,0.5 0.5,1.17157288 0.5,2 L0.5,130.5 Z"
                                                                                id="door" stroke="#373064"></path>
                                                                            <rect id="Rectangle-22" fill="#6871FF" fill-rule="nonzero" x="28" y="1" width="1" height="129"></rect>
                                                                            <rect id="glass" fill="#A6C3FF" fill-rule="nonzero" x="7" y="7" width="14" height="100" rx="2"></rect>
                                                                            <rect id="glass" fill="#A6C3FF" fill-rule="nonzero" x="36" y="7" width="14" height="100" rx="2"></rect>
                                                                        </g>
                                                                    </g>
                                                                </g>
                                                            </g>
                                                        </g>
                                                        <g id="window-5-copy-Clipped" transform="translate(0.000000, 4.000000)">
                                                            <mask id="mask-26" fill="white">
                                                                <use xlink:href="#path-25"></use>
                                                            </mask>
                                                            <g id="path-7"></g>
                                                            <g id="window-5-copy" mask="url(#mask-26)">
                                                                <g transform="translate(99.000000, 38.000000)" id="Group">
                                                                    <g>
                                                                        <g id="Mask" fill="#373064" fill-rule="nonzero">
                                                                            <path d="M51.5733154,43 C52.9138242,43 54,41.9115583 54,40.5673552 L54,2.43543778 C54,1.09024052 52.912832,0 51.5733154,0 L2.42389846,0 C1.08537441,0 0,1.08924605 0,2.43543778 L0,40.5673552 C0,41.9125528 1.08438226,43 2.42389846,43 L51.5733154,43 Z"
                                                                                id="path-9"></path>
                                                                        </g>
                                                                        <g id="window-5-copy-Clipped">
                                                                            <mask id="mask-28" fill="white">
                                                                                <use xlink:href="#path-27"></use>
                                                                            </mask>
                                                                            <g id="path-9"></g>
                                                                            <path d="M56.6631927,43 C57.9540529,43 59,42.2406221 59,41.3028059 L59,14.6991426 C59,13.7606329 57.9530975,13 56.6631927,13 L9.33412445,13 C8.04517536,13 7,13.7599391 7,14.6991426 L7,41.3028059 C7,42.2413159 8.04421995,43 9.33412445,43 L56.6631927,43 Z"
                                                                                id="window-5-copy" fill="#453C7D" fill-rule="nonzero"
                                                                                mask="url(#mask-28)"></path>
                                                                        </g>
                                                                    </g>
                                                                </g>
                                                            </g>
                                                        </g>
                                                        <g id="window-3-copy-Clipped" transform="translate(0.000000, 4.000000)">
                                                            <mask id="mask-30" fill="white">
                                                                <use xlink:href="#path-29"></use>
                                                            </mask>
                                                            <g id="path-7"></g>
                                                            <g id="window-3-copy" mask="url(#mask-30)">
                                                                <g transform="translate(157.000000, 38.000000)" id="Group">
                                                                    <g>
                                                                        <g id="Mask" fill="#373064" fill-rule="nonzero">
                                                                            <path d="M51.5733154,43 C52.9138242,43 54,41.9115583 54,40.5673552 L54,2.43543778 C54,1.09024052 52.912832,0 51.5733154,0 L2.42389846,0 C1.08537441,0 0,1.08924605 0,2.43543778 L0,40.5673552 C0,41.9125528 1.08438226,43 2.42389846,43 L51.5733154,43 Z"
                                                                                id="path-11"></path>
                                                                        </g>
                                                                        <g id="window-3-copy-Clipped">
                                                                            <mask id="mask-32" fill="white">
                                                                                <use xlink:href="#path-31"></use>
                                                                            </mask>
                                                                            <g id="path-11"></g>
                                                                            <path d="M54.6631927,43 C55.9540529,43 57,42.2406221 57,41.3028059 L57,14.6991426 C57,13.7606329 55.9530975,13 54.6631927,13 L7.33412445,13 C6.04517536,13 5,13.7599391 5,14.6991426 L5,41.3028059 C5,42.2413159 6.04421995,43 7.33412445,43 L54.6631927,43 Z"
                                                                                id="window-3-copy" fill="#453C7D" fill-rule="nonzero"
                                                                                mask="url(#mask-32)"></path>
                                                                        </g>
                                                                    </g>
                                                                </g>
                                                            </g>
                                                        </g>
                                                        <g id="window-2-copy-Clipped" transform="translate(0.000000, 4.000000)">
                                                            <mask id="mask-34" fill="white">
                                                                <use xlink:href="#path-33"></use>
                                                            </mask>
                                                            <g id="path-7"></g>
                                                            <g id="window-2-copy" mask="url(#mask-34)">
                                                                <g transform="translate(223.000000, 38.000000)" id="Group">
                                                                    <g>
                                                                        <g id="Mask" fill="#373064" fill-rule="nonzero">
                                                                            <path d="M51.5733154,43 C52.9138242,43 54,41.9115583 54,40.5673552 L54,2.43543778 C54,1.09024052 52.912832,0 51.5733154,0 L2.42389846,0 C1.08537441,0 0,1.08924605 0,2.43543778 L0,40.5673552 C0,41.9125528 1.08438226,43 2.42389846,43 L51.5733154,43 Z"
                                                                                id="path-13"></path>
                                                                        </g>
                                                                        <g id="window-2-copy-Clipped">
                                                                            <mask id="mask-36" fill="white">
                                                                                <use xlink:href="#path-35"></use>
                                                                            </mask>
                                                                            <g id="path-13"></g>
                                                                            <path d="M52.6631927,43 C53.9540529,43 55,42.2406221 55,41.3028059 L55,14.6991426 C55,13.7606329 53.9530975,13 52.6631927,13 L5.33412445,13 C4.04517536,13 3,13.7599391 3,14.6991426 L3,41.3028059 C3,42.2413159 4.04421995,43 5.33412445,43 L52.6631927,43 Z"
                                                                                id="window-2-copy" fill="#453C7D" fill-rule="nonzero"
                                                                                mask="url(#mask-36)"></path>
                                                                        </g>
                                                                    </g>
                                                                </g>
                                                            </g>
                                                        </g>
                                                        <g id="window-2-copy-2-Clipped" transform="translate(0.000000, 4.000000)">
                                                            <mask id="mask-38" fill="white">
                                                                <use xlink:href="#path-37"></use>
                                                            </mask>
                                                            <g id="path-7"></g>
                                                            <g id="window-2-copy-2" mask="url(#mask-38)">
                                                                <g transform="translate(347.000000, 38.000000)" id="Group">
                                                                    <g>
                                                                        <g id="Mask" fill="#373064" fill-rule="nonzero">
                                                                            <path d="M51.5733154,43 C52.9138242,43 54,41.9115583 54,40.5673552 L54,2.43543778 C54,1.09024052 52.912832,0 51.5733154,0 L2.42389846,0 C1.08537441,0 0,1.08924605 0,2.43543778 L0,40.5673552 C0,41.9125528 1.08438226,43 2.42389846,43 L51.5733154,43 Z"
                                                                                id="path-15"></path>
                                                                        </g>
                                                                        <g id="window-2-copy-Clipped">
                                                                            <mask id="mask-40" fill="white">
                                                                                <use xlink:href="#path-39"></use>
                                                                            </mask>
                                                                            <g id="path-15"></g>
                                                                            <path d="M52.3486224,43 C53.8132524,43 55,42.2406221 55,41.3028059 L55,14.6991426 C55,13.7606329 53.8121683,13 52.3486224,13 L-1.35166649,13 C-2.81412796,13 -4,13.7599391 -4,14.6991426 L-4,41.3028059 C-4,42.2413159 -2.81521198,43 -1.35166649,43 L52.3486224,43 Z"
                                                                                id="window-2-copy" fill="#453C7D" fill-rule="nonzero"
                                                                                mask="url(#mask-40)"></path>
                                                                        </g>
                                                                    </g>
                                                                </g>
                                                            </g>
                                                        </g>
                                                        <g id="window-2-copy-3-Clipped" transform="translate(0.000000, 4.000000)">
                                                            <mask id="mask-42" fill="white">
                                                                <use xlink:href="#path-41"></use>
                                                            </mask>
                                                            <g id="path-7"></g>
                                                            <g id="window-2-copy-3" mask="url(#mask-42)">
                                                                <g transform="translate(540.000000, 38.000000)" id="Group">
                                                                    <g>
                                                                        <g id="Mask" fill="#373064" fill-rule="nonzero">
                                                                            <path d="M51.5733154,43 C52.9138242,43 54,41.9115583 54,40.5673552 L54,2.43543778 C54,1.09024052 52.912832,0 51.5733154,0 L2.42389846,0 C1.08537441,0 0,1.08924605 0,2.43543778 L0,40.5673552 C0,41.9125528 1.08438226,43 2.42389846,43 L51.5733154,43 Z"
                                                                                id="path-17"></path>
                                                                        </g>
                                                                        <g id="window-2-copy-Clipped">
                                                                            <mask id="mask-44" fill="white">
                                                                                <use xlink:href="#path-43"></use>
                                                                            </mask>
                                                                            <g id="path-17"></g>
                                                                            <path d="M46.3486224,43 C47.8132524,43 49,42.2406221 49,41.3028059 L49,14.6991426 C49,13.7606329 47.8121683,13 46.3486224,13 L-7.35166649,13 C-8.81412796,13 -10,13.7599391 -10,14.6991426 L-10,41.3028059 C-10,42.2413159 -8.81521198,43 -7.35166649,43 L46.3486224,43 Z"
                                                                                id="window-2-copy" fill="#453C7D" fill-rule="nonzero"
                                                                                mask="url(#mask-44)"></path>
                                                                        </g>
                                                                    </g>
                                                                </g>
                                                            </g>
                                                        </g>
                                                        <g id="window-1-copy-Clipped" transform="translate(0.000000, 4.000000)">
                                                            <mask id="mask-46" fill="white">
                                                                <use xlink:href="#path-45"></use>
                                                            </mask>
                                                            <g id="path-7"></g>
                                                            <g id="window-1-copy" mask="url(#mask-46)">
                                                                <g transform="translate(281.000000, 38.000000)" id="Group">
                                                                    <g>
                                                                        <g id="Mask" fill="#373064" fill-rule="nonzero">
                                                                            <path d="M51.5733154,43 C52.9138242,43 54,41.9115583 54,40.5673552 L54,2.43543778 C54,1.09024052 52.912832,0 51.5733154,0 L2.42389846,0 C1.08537441,0 0,1.08924605 0,2.43543778 L0,40.5673552 C0,41.9125528 1.08438226,43 2.42389846,43 L51.5733154,43 Z"
                                                                                id="path-19"></path>
                                                                        </g>
                                                                        <g id="window-1-copy-Clipped">
                                                                            <mask id="mask-48" fill="white">
                                                                                <use xlink:href="#path-47"></use>
                                                                            </mask>
                                                                            <g id="path-19"></g>
                                                                            <path d="M51.6631927,43 C52.9540529,43 54,42.2406221 54,41.3028059 L54,14.6991426 C54,13.7606329 52.9530975,13 51.6631927,13 L4.33412445,13 C3.04517536,13 2,13.7599391 2,14.6991426 L2,41.3028059 C2,42.2413159 3.04421995,43 4.33412445,43 L51.6631927,43 Z"
                                                                                id="window-1-copy" fill="#453C7D" fill-rule="nonzero"
                                                                                mask="url(#mask-48)"></path>
                                                                        </g>
                                                                    </g>
                                                                </g>
                                                            </g>
                                                        </g>
                                                        <g id="window-1-copy-2-Clipped" transform="translate(0.000000, 4.000000)">
                                                            <mask id="mask-50" fill="white">
                                                                <use xlink:href="#path-49"></use>
                                                            </mask>
                                                            <g id="path-7"></g>
                                                            <g id="window-1-copy-2" mask="url(#mask-50)">
                                                                <g transform="translate(405.000000, 38.000000)" id="Group">
                                                                    <g>
                                                                        <g id="Mask" fill="#373064" fill-rule="nonzero">
                                                                            <path d="M51.5733154,43 C52.9138242,43 54,41.9115583 54,40.5673552 L54,2.43543778 C54,1.09024052 52.912832,0 51.5733154,0 L2.42389846,0 C1.08537441,0 0,1.08924605 0,2.43543778 L0,40.5673552 C0,41.9125528 1.08438226,43 2.42389846,43 L51.5733154,43 Z"
                                                                                id="path-21"></path>
                                                                        </g>
                                                                        <g id="window-1-copy-Clipped">
                                                                            <mask id="mask-52" fill="white">
                                                                                <use xlink:href="#path-51"></use>
                                                                            </mask>
                                                                            <g id="path-21"></g>
                                                                            <path d="M49.3486224,43 C50.8132524,43 52,42.2406221 52,41.3028059 L52,14.6991426 C52,13.7606329 50.8121683,13 49.3486224,13 L-4.35166649,13 C-5.81412796,13 -7,13.7599391 -7,14.6991426 L-7,41.3028059 C-7,42.2413159 -5.81521198,43 -4.35166649,43 L49.3486224,43 Z"
                                                                                id="window-1-copy" fill="#453C7D" fill-rule="nonzero"
                                                                                mask="url(#mask-52)"></path>
                                                                        </g>
                                                                    </g>
                                                                </g>
                                                            </g>
                                                        </g>
                                                        <g id="vent-Clipped" transform="translate(0.000000, 4.000000)">
                                                            <mask id="mask-54" fill="white">
                                                                <use xlink:href="#path-53"></use>
                                                            </mask>
                                                            <g id="path-7"></g>
                                                            <rect id="vent" fill="#373064" fill-rule="nonzero" mask="url(#mask-54)" x="99" y="26" width="54" height="10" rx="2"></rect>
                                                        </g>
                                                        <g id="vent-Clipped" transform="translate(0.000000, 4.000000)">
                                                            <mask id="mask-56" fill="white">
                                                                <use xlink:href="#path-55"></use>
                                                            </mask>
                                                            <g id="path-7"></g>
                                                            <rect id="vent" fill="#373064" fill-rule="nonzero" mask="url(#mask-56)" x="157" y="26" width="54" height="10" rx="2"></rect>
                                                        </g>
                                                        <g id="vent-Clipped" transform="translate(0.000000, 4.000000)">
                                                            <mask id="mask-58" fill="white">
                                                                <use xlink:href="#path-57"></use>
                                                            </mask>
                                                            <g id="path-7"></g>
                                                            <rect id="vent" fill="#373064" fill-rule="nonzero" mask="url(#mask-58)" x="223" y="26" width="54" height="10" rx="2"></rect>
                                                        </g>
                                                        <g id="vent-copy-2-Clipped" transform="translate(0.000000, 4.000000)">
                                                            <mask id="mask-60" fill="white">
                                                                <use xlink:href="#path-59"></use>
                                                            </mask>
                                                            <g id="path-7"></g>
                                                            <rect id="vent-copy-2" fill="#373064" fill-rule="nonzero" mask="url(#mask-60)" x="347" y="26" width="54" height="10" rx="2"></rect>
                                                        </g>
                                                        <g id="vent-copy-4-Clipped" transform="translate(0.000000, 4.000000)">
                                                            <mask id="mask-62" fill="white">
                                                                <use xlink:href="#path-61"></use>
                                                            </mask>
                                                            <g id="path-7"></g>
                                                            <rect id="vent-copy-4" fill="#373064" fill-rule="nonzero" mask="url(#mask-62)" x="540" y="26" width="54" height="10" rx="2"></rect>
                                                        </g>
                                                        <g id="vent-Clipped" transform="translate(0.000000, 4.000000)">
                                                            <mask id="mask-64" fill="white">
                                                                <use xlink:href="#path-63"></use>
                                                            </mask>
                                                            <g id="path-7"></g>
                                                            <rect id="vent" fill="#373064" fill-rule="nonzero" mask="url(#mask-64)" x="281" y="26" width="54" height="10" rx="2"></rect>
                                                        </g>
                                                        <g id="vent-copy-3-Clipped" transform="translate(0.000000, 4.000000)">
                                                            <mask id="mask-66" fill="white">
                                                                <use xlink:href="#path-65"></use>
                                                            </mask>
                                                            <g id="path-7"></g>
                                                            <rect id="vent-copy-3" fill="#373064" fill-rule="nonzero" mask="url(#mask-66)" x="405" y="26" width="54" height="10" rx="2"></rect>
                                                        </g>
                                                    </g>
                                                    <g id="Group-4" transform="translate(119.000000, 126.000000)" fill-rule="nonzero">
                                                        <path d="M0.416045371,35.0057497 L59.5844049,35.0052082 C59.8760577,33.2692722 60.0184575,31.4833774 59.9980842,29.6613666 C59.8096181,13.0955169 46.2272824,-0.183356362 29.6582384,0.00191538475 C13.0923888,0.193575812 -0.186484497,13.7727171 0.00198159079,30.3417611 C0.0200432382,31.9296554 0.161118834,33.4873023 0.416045371,35.0057497 Z"
                                                            id="wheel_front" fill="#2D2754"></path>
                                                        <path d="M5.00165133,30.2848009 C5.1587064,44.0923376 16.4773194,55.1554034 30.2821941,54.9983483 C44.0897308,54.8439552 55.1527966,43.5253421 54.9984035,29.7178055 C54.8413484,15.9129308 43.5227354,4.84720303 29.7151987,5.00159615 C15.910324,5.16131318 4.84459625,16.4772643 5.00165133,30.2848009"
                                                            id="wheel_front" fill="#333333"></path>
                                                        <path d="M15.0010482,31.1696222 C15.0926205,39.4542241 21.8851322,46.0959107 30.169734,45.9989518 C38.4543359,45.9019928 45.0906359,39.1148678 44.9990636,30.830266 C44.9021047,22.5456641 38.1149796,15.9093641 29.8249912,16.0009364 C21.5457759,16.0925087 14.9040893,22.8850204 15.0010482,31.1696222"
                                                            id="Fill-31" fill="#9B9B9B"></path>
                                                        <path d="M27.0002096,31.0339244 C27.0185241,32.6908448 28.3770264,34.0191821 30.0339468,33.9997904 C31.6908672,33.9803986 33.0181272,32.6229736 32.9998127,30.9660532 C32.9804209,29.3091328 31.6229959,27.9818728 29.9649982,28.0001873 C28.3091552,28.0185017 26.9808179,29.3770041 27.0002096,31.0339244"
                                                            id="Fill-31" fill="#FFFFFF"></path>
                                                        <path d="M28.0001398,22.0226163 C27.9872119,20.9180027 28.8727701,20.0123345 29.9766655,20.0001249 C31.0819973,19.9879152 31.9869473,20.8727552 31.9998751,21.9773688 C32.0120848,23.0819824 31.1272448,23.9869324 30.0226312,23.9998602 C28.9180176,24.0127881 28.0123494,23.1272299 28.0001398,22.0226163 Z M28.0001398,40.0226163 C27.9872119,38.9180027 28.8727701,38.0123345 29.9766655,38.0001249 C31.0819973,37.9879152 31.9869473,38.8727552 31.9998751,39.9773688 C32.0120848,41.0819824 31.1272448,41.9869324 30.0226312,41.9998602 C28.9180176,42.0127881 28.0123494,41.1272299 28.0001398,40.0226163 Z M36.7747122,24.7793784 C37.7248717,24.2158757 38.9519825,24.5299575 39.5145041,25.4798541 C40.0777438,26.4309947 39.7639249,27.6571244 38.8137654,28.2206271 C37.8632468,28.7835077 36.6371171,28.4696888 36.0736145,27.5195293 C35.5101118,26.5693698 35.8241936,25.342259 36.7747122,24.7793784 Z M21.186255,33.7793784 C22.1364145,33.2158757 23.3635253,33.5299575 23.9260468,34.4798541 C24.4892866,35.4309947 24.1754676,36.6571244 23.2253081,37.2206271 C22.2747895,37.7835077 21.0486598,37.4696888 20.4851572,36.5195293 C19.9216546,35.5693698 20.2357364,34.342259 21.186255,33.7793784 Z M38.7745725,33.7567621 C39.7376598,34.297873 40.0792124,35.517623 39.5378386,36.4797293 C38.9957465,37.4430795 37.7769776,37.7843692 36.8138903,37.2432583 C35.851162,36.7015254 35.5098723,35.4827564 36.0509833,34.5196691 C36.5920942,33.5565817 37.8118442,33.2150292 38.7745725,33.7567621 Z M23.1861152,24.7567621 C24.1492025,25.297873 24.4907551,26.517623 23.9493813,27.4797293 C23.4072893,28.4430795 22.1885203,28.7843692 21.225433,28.2432583 C20.2627047,27.7015254 19.9214151,26.4827564 20.462526,25.5196691 C21.0036369,24.5565817 22.223387,24.2150292 23.1861152,24.7567621 Z"
                                                            id="Combined-Shape" fill="#DDDDDD"></path>
                                                    </g>
                                                    <g id="Group-4-Copy" transform="translate(400.000000, 126.000000)" fill-rule="nonzero">
                                                        <path d="M0.416045371,35.0057497 L59.5844049,35.0052082 C59.8760577,33.2692722 60.0184575,31.4833774 59.9980842,29.6613666 C59.8096181,13.0955169 46.2272824,-0.183356362 29.6582384,0.00191538475 C13.0923888,0.193575812 -0.186484497,13.7727171 0.00198159079,30.3417611 C0.0200432382,31.9296554 0.161118834,33.4873023 0.416045371,35.0057497 Z"
                                                            id="wheel_front" fill="#2D2754"></path>
                                                        <path d="M5.00165133,30.2848009 C5.1587064,44.0923376 16.4773194,55.1554034 30.2821941,54.9983483 C44.0897308,54.8439552 55.1527966,43.5253421 54.9984035,29.7178055 C54.8413484,15.9129308 43.5227354,4.84720303 29.7151987,5.00159615 C15.910324,5.16131318 4.84459625,16.4772643 5.00165133,30.2848009"
                                                            id="wheel_front" fill="#333333"></path>
                                                        <path d="M15.0010482,31.1696222 C15.0926205,39.4542241 21.8851322,46.0959107 30.169734,45.9989518 C38.4543359,45.9019928 45.0906359,39.1148678 44.9990636,30.830266 C44.9021047,22.5456641 38.1149796,15.9093641 29.8249912,16.0009364 C21.5457759,16.0925087 14.9040893,22.8850204 15.0010482,31.1696222"
                                                            id="Fill-31" fill="#9B9B9B"></path>
                                                        <path d="M27.0002096,31.0339244 C27.0185241,32.6908448 28.3770264,34.0191821 30.0339468,33.9997904 C31.6908672,33.9803986 33.0181272,32.6229736 32.9998127,30.9660532 C32.9804209,29.3091328 31.6229959,27.9818728 29.9649982,28.0001873 C28.3091552,28.0185017 26.9808179,29.3770041 27.0002096,31.0339244"
                                                            id="Fill-31" fill="#FFFFFF"></path>
                                                        <path d="M28.0001398,22.0226163 C27.9872119,20.9180027 28.8727701,20.0123345 29.9766655,20.0001249 C31.0819973,19.9879152 31.9869473,20.8727552 31.9998751,21.9773688 C32.0120848,23.0819824 31.1272448,23.9869324 30.0226312,23.9998602 C28.9180176,24.0127881 28.0123494,23.1272299 28.0001398,22.0226163 Z M28.0001398,40.0226163 C27.9872119,38.9180027 28.8727701,38.0123345 29.9766655,38.0001249 C31.0819973,37.9879152 31.9869473,38.8727552 31.9998751,39.9773688 C32.0120848,41.0819824 31.1272448,41.9869324 30.0226312,41.9998602 C28.9180176,42.0127881 28.0123494,41.1272299 28.0001398,40.0226163 Z M36.7747122,24.7793784 C37.7248717,24.2158757 38.9519825,24.5299575 39.5145041,25.4798541 C40.0777438,26.4309947 39.7639249,27.6571244 38.8137654,28.2206271 C37.8632468,28.7835077 36.6371171,28.4696888 36.0736145,27.5195293 C35.5101118,26.5693698 35.8241936,25.342259 36.7747122,24.7793784 Z M21.186255,33.7793784 C22.1364145,33.2158757 23.3635253,33.5299575 23.9260468,34.4798541 C24.4892866,35.4309947 24.1754676,36.6571244 23.2253081,37.2206271 C22.2747895,37.7835077 21.0486598,37.4696888 20.4851572,36.5195293 C19.9216546,35.5693698 20.2357364,34.342259 21.186255,33.7793784 Z M38.7745725,33.7567621 C39.7376598,34.297873 40.0792124,35.517623 39.5378386,36.4797293 C38.9957465,37.4430795 37.7769776,37.7843692 36.8138903,37.2432583 C35.851162,36.7015254 35.5098723,35.4827564 36.0509833,34.5196691 C36.5920942,33.5565817 37.8118442,33.2150292 38.7745725,33.7567621 Z M23.1861152,24.7567621 C24.1492025,25.297873 24.4907551,26.517623 23.9493813,27.4797293 C23.4072893,28.4430795 22.1885203,28.7843692 21.225433,28.2432583 C20.2627047,27.7015254 19.9214151,26.4827564 20.462526,25.5196691 C21.0036369,24.5565817 22.223387,24.2150292 23.1861152,24.7567621 Z"
                                                            id="Combined-Shape" fill="#DDDDDD"></path>
                                                    </g>
                                                    <path d="M0.0944498761,35.0438845 L43,35.0438845" id="Path-11" stroke="#453C7D" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                                                    <polyline id="Path-10" stroke="#453C7D" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" points="43.005124 26.1965944 8.53898841 26.1965944 0.15738471 34.5781981 0.15738471 47.3612825 10.151044 47.3612825"></polyline>
                                                    <rect id="Rectangle-23" fill="#453C7D" fill-rule="nonzero" x="9" y="40" width="4" height="24" rx="2"></rect>
                                                </g>
                                            </g>
                                        </g>
                                    </g>
                                </g>
                            </g>
                        </g>
                    </svg>
				<div class="tyres-wrapper">
					<div class="tyres-content">
						<div class="tyres">
							<div class="rim-section">
								<div class="rim-dot"></div>
							</div>
						</div>
					</div>
					<div class="tyres-content">
						<div class="tyres">
							<div class="rim-section">
								<div class="rim-dot"></div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>

		<!-- Road -->
		<div class="road-wrap">
			<div class="bar slide-right"> </div>
		</div>

	</div>
	<div class="credit-section">
		Illustration by <a target="_blank" href="https://dribbble.com/rowheat">Rohit Shrestha</a>
	</div>
</div>

CSS

              
                @import url("https://fonts.googleapis.com/css?family=Dancing+Script");

/**
 * index.scss
 * - Add any styles you want here!
 */

body {
	background: #fff7b0;
	width: 100%;
	height: 100vh;
	margin: 0;
	padding: 0;
	position: relative;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-family: "Dancing Script", cursive;
}

.credit-section {
	position: absolute;
	text-align: left;
	left: 15px;
	bottom: 20px;
	color: #fff;
	font-size: 16px;

	a {
		color: #faee5a;
		cursor: pointer;
	}
}

.heading {
	top: 50px !important;
	left: 30% !important;
	font-family: "Dancing Script", cursive;

	h1 {
		font-size: 60px;
		color: #68b69f;
	}
}

.main-section {
	height: 700px;
	max-width: 992px;
	margin: 0 auto;
	border: 15px solid #fff;
	background: #68cdaf;
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
	transform: translateY(-50%);
}

#scene {
	height: 100%;
	overflow: hidden;
}

.cloud_3 {
	top: 20px !important;
	left: -150px !important;
	width: 400px;
	animation: animateCloud3 15s linear infinite alternate both;

	img {
		width: 100%;
	}
}

.cloud_1 {
	top: 200px !important;
	left: -150px !important;
}

.cloud_2 {
	left: auto !important;
	top: -50px !important;
	right: -50px !important;
	width: 300px;
	animation: animateCloud4 15s linear infinite alternate both;
}

.rope-line {
	top: auto !important;
	bottom: 140px;
	height: 85px;
	left: -50px !important;
	right: -50px;
	z-index: 2;

	> .inner {
		background: url("https://res.cloudinary.com/dyquku6bs/image/upload/v1537333317/rope-line_zd9qwz.png");
		background-size: 1500px;
		background-repeat: repeat-x;
		height: 100%;
	}
}

.hills-background-wrap {
	top: auto !important;
	bottom: 145px;
	z-index: -1;
	height: 230px;
	left: -50px !important;
	right: -50px;

	> .inner {
		background: url("https://res.cloudinary.com/dyquku6bs/image/upload/v1537333316/hill-bg_rzukmt.png");
		background-size: 3000px;
		background-repeat: repeat-x;
		height: 100%;
	}
}

.buildings-bg {
	top: auto !important;
	bottom: 145px;
	z-index: 1;
	height: 255px;
	left: -50px !important;
	right: -50px;

	> .inner {
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		height: 100%;
		background: url("https://res.cloudinary.com/dyquku6bs/image/upload/v1537333316/buildings-background_rxiq0u.png")
			0% 0% repeat-x;
		animation: move-bg 1000s linear reverse;
		background-size: 3000px;
	}
}

.bus-wrap {
	position: absolute;
	bottom: 15px;
	top: auto !important;
	z-index: 3;
	left: auto !important;
	right: 80px;
	width: 400px;

	> .inner {
		position: relative;
		animation: bus-bounce 0.75s linear infinite;
	}

	svg {
		width: 100%;
	}

	.tyres-wrapper {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;

		.tyres-content {
			&:nth-child(1) {
				position: absolute;
				bottom: 36px;
				left: 80px;
			}

			&:nth-child(2) {
				position: absolute;
				bottom: 36px;
				right: 105px;
			}
		}
	}

	.tyres {
		position: relative;
		z-index: 1;
		width: 18px;
		height: 18px;
		background: #f4f4f4;
		border-radius: 50%;
		border: 8px solid #333;
	}

	.rim-section {
		position: relative;
		width: 14px;
		height: 14px;
		background: #f3f3f3;
		border-radius: 50%;
		border: 2px solid #f1f1f1;
	}

	.rim-dot {
		position: absolute;
		width: 10px;
		height: 10px;
		border: 2px dashed #4e5066;
		border-radius: 50%;
		animation: rim-dot 2s linear infinite;
	}
}

.road-wrap {
	height: 150px;
	background: #4a4953;
	position: absolute;
	top: auto !important;
	left: 0;
	right: 0;
	bottom: 0;

	.bar {
		position: absolute;
		content: "";
		background-image: linear-gradient(
			to right,
			rgba(255, 255, 255, 0.3) 40%,
			rgba(255, 255, 255, 0) 0%
		);
		background-position: bottom;
		background-size: 39px 9px;
		background-repeat: repeat-x;
		height: 4px;
		left: 0;
		width: 100%;
		right: 0;
		top: 50%;
		transform: translateY(-50%);

		&:before {
			content: "";
			position: absolute;
			background-image: linear-gradient(
				to right,
				rgba(255, 255, 255, 0.3) 40%,
				rgba(255, 255, 255, 0) 0%
			);
			background-size: 39px 9px;
			height: 4px;
			left: -101%;
			display: block;
			width: 100%;
		}
	}

	&:before {
		position: absolute;
		content: "";
		left: 0;
		right: 0;
		top: 10px;
		border-top: 5px solid #e6db69;
	}
}

/* KEYFRAMES */

@keyframes animateCloud {
	0% {
		left: -20%;
	}
	100% {
		left: 100%;
	}
}

@keyframes animateCloud1 {
	0% {
		left: -10%;
	}
	100% {
		left: 100%;
	}
}

@keyframes animateCloud2 {
	0% {
		left: -30%;
	}
	100% {
		left: 100%;
	}
}

@keyframes animateCloud3 {
	0% {
		margin-left: 0;
	}
	100% {
		margin-left: 100px;
	}
}

@keyframes animateCloud4 {
	0% {
		margin-right: 0;
	}
	100% {
		margin-right: 150px;
	}
}

@keyframes wire-move {
	0% {
		margin-bottom: 0;
	}
	100% {
		margin-bottom: -30px;
	}
}

/* ANIMATIONS */

#background-wrap {
	opacity: 0.7;
}

.x1 {
	animation: animateCloud 100s linear infinite;
	transform: scale(0.2);
	position: absolute;
	top: 50px;
}

.x2 {
	animation: animateCloud1 200s linear infinite;
	transform: scale(0.3);
	position: absolute;
	top: 300px;
}

.x3 {
	animation: animateCloud2 150s linear infinite;
	transform: scale(0.4);
	position: absolute;
	top: 150px;
}

/* Clouds */

.cloud {
	background: #fff;
	background: linear-gradient(top, #fff 5%, #f1f1f1 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(
			startColorstr="#fff",
			endColorstr="#f1f1f1",
			GradientType=0
		);
	border-radius: 100px;
	box-shadow: 0 8px 5px rgba(0, 0, 0, 0.1);
	height: 120px;
	position: relative;
	width: 350px;
}

.cloud:after,
.cloud:before {
	background: #fff;
	content: "";
	position: absolute;
	z-index: -1;
}

.cloud:after {
	border-radius: 100px;
	height: 100px;
	left: 50px;
	top: -50px;
	width: 100px;
}

.cloud:before {
	border-radius: 200px;
	width: 180px;
	height: 180px;
	right: 50px;
	top: -90px;
}

.slide-right {
	animation: slide-right 30s linear infinite both;
}

.slide-right-img {
	animation: slide-right-img 100s linear infinite;
}

.slide-right-buildings {
	animation: slide-right-buildings 115s linear infinite;
}

.slide-right-rope {
	animation: slide-right-rope 90s linear infinite;
}

@keyframes slide-right {
	0% {
		transform: translateX(0);
	}
	100% {
		transform: translateX(100%);
	}
}

@keyframes slide-right-rope {
	100% {
		background-position: 5000px 0;
	}
}

@keyframes slide-right-buildings {
	0% {
		background-position: 0 0;
	}
	100% {
		background-position: 5000px 0;
	}
}

@keyframes slide-right-img {
	100% {
		background-position: 3000px 0;
	}
}

@keyframes bus-bounce {
	0% {
		top: 1px;
	}
	20% {
		top: 0px;
	}
	40% {
		top: 1px;
	}
	75% {
		top: 0px;
	}
	100% {
		top: 0px;
	}
}

@keyframes rim-dot {
	0% {
		transform: rotateZ(0deg);
	}
	50% {
		transform: rotateZ(-180deg);
	}
	100% {
		transform: rotateZ(-360deg);
	}
}

@keyframes move-bg {
	to {
		background-position-x: 5000%;
	}
}

JS

              
                /**
 * index.js
 * - All our useful JS goes here, awesome!
 */

var scene = $('#scene').get(0);
var parallaxInstance = new Parallax(scene, {
  relativeInput: true,
	hoverOnly: true,
	calibrateX: true
});

999px

Insecure Resource

About JavaScript Preprocessors

About External Resources

About Packages

HTML

CSS

JS

Console

HTML

HTML Preprocessor

About HTML Preprocessors

Add Class(es) to <html>

Adding Classes

Stuff for <head>

About the <head>

Insecure Resource

CSS

CSS Preprocessor

About CSS Preprocessors

CSS Base

About CSS Base

Vendor Prefixing

About Vendor Prefixing

Add External Stylesheets/Pens

About External Resources

JavaScript

JavaScript Preprocessor

About JavaScript Preprocessors

Add External Scripts/Pens

About External Resources

Packages

Add Packages

About Packages

Behavior

Auto Save

Auto-Updating Preview

Format on Save

Editor Settings

Code Indentation

Code Indent width

Want to change your Syntax Highlighting theme, Fonts and more?

HTML

CSS

JS

Console

Editor Commands

Editor Focus

Misc

HTML Specific

Pen Actions