<div class="wrap">
<div class="inner">
	<div class="trees">
		<div class="left">
			<div class="tree tree-a"><div><i></i></div></div>
			<div class="tree tree-b"><div><i></i></div></div>
			<div class="tree tree-c"><div><i></i></div></div>
			<div class="tree tree-d"><div><i></i></div></div>
			<div class="tree tree-e"><div><i></i></div></div>
		</div>
		<div class="right">
			<div class="tree tree-a"><div><i></i></div></div>
			<div class="tree tree-b"><div><i></i></div></div>
			<div class="tree tree-c"><div><i></i></div></div>
			<div class="tree tree-d"><div><i></i></div></div>
			<div class="tree tree-e"><div><i></i></div></div>
		</div>
	</div>
	<div class="building">
		<div class="middle"></div>
		<div class="bottom"></div>
		<div class="line"></div>
	</div>
	<div class="clouds">
		<div class="cloud a"></div>
		<div class="cloud b"></div>
	</div>
	<div class="cycling">
		<div class="legs">
			<div class="leg left"><i></i></div>
			<div class="leg right"><i></i></div>
		</div>
		<div class="main">
			<div class="head">
				<i class="helmet"><i class="dtl"></i></i>
				<i class="face"><i class="dtl"></i></i>
				<i class="glass"></i>
			</div>
			<div class="chest"></div>
			<div class="hand-wrap">
				<div class="hand left"><i class="top"></i><i class="bottom"></i></div>
				<div class="hand right"><i class="top"></i><i class="bottom"></i></div>
			</div>
		</div>
		<div class="bike">
			<div class="wheel"></div>
			<div class="handle-wrap">
				<div class="hand left"></div>
				<div class="hand right"></div>
				<div class="handle"></div>
			</div>
		</div>
	</div>
</div>
</div>
body{
	margin:0;
	color:#444;
	background:#664a93;
	font:300 18px/18px Roboto, sans-serif;
}
*,:after,:before{box-sizing:border-box}
.pull-left{float:left}
.pull-right{float:right}
.clearfix:after,.clearfix:before{content:'';display:table}
.clearfix:after{clear:both;display:block}

.cloud:before,
.cloud:after,
.building:before,
.building:after,
.tree>div:before,
.tree>div:after,
.tree>div>i:before,
.tree>div>i:after,
.wrap .building .middle:before,
.wrap .building .middle:after,
.wrap .building .bottom:before,
.wrap .building .bottom:after{
	content:'';
	position:absolute;
}

.wrap{
	top:0;
	left:0;
	right:0;
	bottom:0;
	width:100%;
	height:100%;
	position:fixed;
	overflow:hidden;
}
.inner{
	bottom:22%;
	width:100%;
	position:absolute;
}

.building,
.building .middle,
.building .bottom{margin:auto;position:relative}

.building{width:305px;text-align:right}
.building:before{
	left:70px;
	width:98px;
	height:12px;
	bottom:36px;
}
.building:after{
	width:72px;
	right:48px;
	bottom:36px;
	height:16px;
}
.building .line,
.building:before,
.building:after,
.building .middle,
.building .bottom{
	color:#5d418a;
	background-color:#5d418a;
}
.building .middle{height:15px;width:290px;display:inline-block;vertical-align:middle}
.building .bottom{height:22px;width:305px}
.building .middle:before,
.building .middle:after,
.building .bottom:before,
.building .bottom:after{background-color:inherit}
.building .middle:before{
	bottom:36px;
	right:137px;
	background-color:transparent;
	border:20px solid transparent;
	border-bottom:14px solid;
}
.building .middle:after{
	width:40px;
	height:10px;
	bottom:26px;
	right:137px;
}
.building .bottom:before{
	left:70px;
	width:35px;
	height:25px;
	bottom:48px;
}
.building .bottom:after{
	width:25px;
	right:95px;
	height:25px;
	bottom:40px;
	transform:skewY(-18deg);
}
.building .line{
	left:50%;
	bottom:0;
	height:2px;
	width:610px;
	position:absolute;
	margin-left:-305px;
}
.tree{
	bottom:0;
	position:absolute;
	transform-origin:50% 100%;
}
.tree>div{
	bottom:0;
	width:6px;
	height:200px;
	position:absolute;
	background-color:#4d3486;
}
.tree>div:before,
.tree>div:after{
	z-index:1;
	height:32px;
	width:inherit;
	background-color:inherit;
}
.tree>div:before{
	top:66px;
	left:-12px;
	transform:rotate(-40deg);
}
.tree>div:after{
	top:46px;
	right:-12px;
	transform:rotate(40deg);
}
.tree>div>i,
.tree>div>i:before,
.tree>div>i:after{
	border-radius:50%;
	background-color:#5d418a;
}
.tree>div>i{
	left:50%;
	top:-35px;
	z-index:-10;
	width:70px;
	height:70px;
	margin-left:-35px;
	position:absolute;
}
.tree>div>i:before{
	top:88px;
	left:-2px;
	width:30px;
	height:30px;
}
.tree>div>i:after{
	top:74px;
	right:1px;
	width:22px;
	height:22px;
}
.trees .tree-b>div:after,
.trees .tree-c>div:before,.trees .tree-c>div>i:before,
.trees .tree-d>div:after,.trees .tree-d>div>i:after,
.trees .tree-e>div:before,.trees .tree-e>div:after,.trees .tree-e>div>i:after{display:none}
.trees .tree-e>div>i:before{top:80px;left:5px;width:22px;height:22px}

.trees .left .tree{left:-5%;animation:move-left-tree 3s linear infinite}
.trees .left .tree-a{animation-delay:.5s}
.trees .left .tree-b{animation-delay:1.5s}
.trees .left .tree-c{animation-delay:1s}
.trees .left .tree-d{animation-delay:2s}
@keyframes move-left-tree{
	0%{left:-5%;opacity:1;transform:scale(2)}
	75%{opacity:1}
	100%{left:40%;opacity:0;transform:scale(0)}
}

.trees .right .tree{right:-5%;animation:move-right-tree 3s linear infinite}
.trees .right .tree-a{animation-delay:2s}
.trees .right .tree-b{animation-delay:1.5s}
.trees .right .tree-c{animation-delay:1s}
.trees .right .tree-d{animation-delay:.5s}
@keyframes move-right-tree{
	0%{right:-5%;opacity:1;transform:scale(2)}
	75%{opacity:1}
	100%{right:40%;opacity:0;transform:scale(0)}
}
.clouds{
	left:50%;
	width:300px;
	bottom:400px;
	position:absolute;
	margin-left:-150px;
}
.cloud{
	height:38px;
	width:118px;
	position:absolute;
	border-radius:38px;
	border-top-left-radius:100px 65px;
	border-bottom-left-radius:0;
	background-color:#795dae;
	transform-origin:50% 100%;
}
.cloud:before,
.cloud:after{bottom:0;background-color:inherit}
.cloud:before{
	left:50%;
	width:58px;
	height:58px;
	margin-left:-29px;
	border-radius:50%;
}
.cloud:after{
	width:30px;
	height:16px;
	right:-40px;
	border-radius:inherit;
}
.cloud.a{left:-100px}
.cloud.b{right:-100px;transform:scale(.75)}

.helmet:before,
.helmet:after,
.helmet .dtl:before,
.helmet .dtl:after,
.face:before,
.face:after,
.glass:before,
.glass:after,
.chest:before,
.chest:after,
.main .hand .bottom:after,
.legs:before,
.legs .leg:after,
.legs .leg:before,
.legs .leg>i:before,
.bike:before,
.bike:after,
.bike .wheel:before,
.bike .wheel:after,
.bike .hand:before,
.bike .hand:after{
	content:'';
	position:absolute;
}
.cycling{
	bottom:0;
	left:50%;
	width:150px;
	margin-left:-75px;
	position:absolute;
}
.legs{
	width:75px;
	margin:auto;
	position:relative;
}
.legs:before{
	top:0;
	width:75px;
	height:90px;
	position:absolute;
	border:20px solid #49829a;
	border-bottom:none;
}
.legs .leg{
	top:80px;
	z-index:1;
	width:20px;
	height:160px;
	position:absolute;
	background:#ff9266;
	border-radius:20px 20px 0 0;
}
.legs .leg:before{
	bottom:0;
	height:80px;
	width:inherit;
}
.leg.left{animation:leg-l 1.2s linear infinite}
.leg.right{right:0;animation:leg-r 1.2s linear infinite}
.leg.left:before{background-color:#5596aa}
.leg.right:before{background-color:#61b2be}
.legs .leg:after{
	left:50%;
	bottom:0;
	width:30px;
	height:12px;
	margin-left:-15px;
	background-color:#55303c;
}
.legs .leg>i{
	bottom:0;
	height:22px;
	width:inherit;
	position:absolute;
	background-color:#fff;
	border-radius:50% 50% 0 0;
}
.legs .leg>i:before{
	height:5px;
	bottom:70px;
	width:inherit;
	background-color:inherit;
}
@keyframes leg-l{
	0%,100%{top:15px}
	50%{top:80px}
}
@keyframes leg-r{
	0%,100%{top:80px}
	50%{top:15px}
}
.head{
	left:50%;
	z-index:10;
	width:40px;
	height:55px;
	bottom:10px;
	margin-left:-20px;
	position:absolute;
	animation:head .8s linear infinite;
}
.helmet{
	top:-30px;
	left:50%;
	width:70px;
	height:50px;
	margin-left:-35px;
	position:absolute;
}
.helmet:before,
.helmet:after{height:28px;width:70px}
.helmet:before{top:0;background-color:#61b2be;border-radius:50px 50px 0 0}
.helmet:after{bottom:0;background-color:#49829a;border-radius:0 0 50px 50px}
.helmet .dtl{width:inherit;display:block}
.helmet .dtl:before,
.helmet .dtl:after{top:10px;width:16px;height:6px;background-color:#49829a}
.helmet .dtl:before{left:10px;border-radius:6px 6px 0 0;border-top-right-radius:14px 8px}
.helmet .dtl:after{right:10px;border-radius:6px 6px 0 0;border-top-left-radius:14px 8px}

.face{
	width:inherit;
	height:inherit;
	position:absolute;
	display:inline-block;
	background-color:#ffae71;
	border-radius:0 0 40px 40px;
	border-top:5px solid #ff9665;
	border-bottom:5px solid #55303c;
}
.face:before,
.face:after{top:13px;width:6px;height:12px;background-color:#ff9665}
.face:before{left:-6px;border-radius:6px 0 0 6px}
.face:after{right:-6px;border-radius:0 6px 6px 0}
.face .dtl{
	left:50%;
	width:8px;
	height:8px;
	bottom:-13px;
	margin-left:-4px;
	position:absolute;
	border-top:2px solid #55303c;
	border-left:2px solid #55303c;
	transform:rotate(45deg);
}
@keyframes head{
	0%,100%{transform:rotate(-4deg)}
	33.33%{transform:rotate(0deg)}
	66.66%{transform:rotate(4deg)}
}


.glass{width:inherit;position:absolute;top:15px}
.glass:before,
.glass:after{width:20px;height:10px;background-color:#55303c}
.glass:before{left:-6px;border-radius:0 0 4px 10px}
.glass:after{right:-6px;border-radius:0 0 10px 4px}

.main{
	left:50%;
	top:-50px;
	width:80px;
	height:60px;
	position:absolute;
	margin-left:-40px;
}
.chest{
	z-index:2;
	width:inherit;
	height:inherit;
	overflow:hidden;
	position:relative;
	border-radius:22px;
	background-color:#559aa6;
	border-top:8px solid #61b2be;
	transform-origin:50%;
	animation:chest 1s linear infinite
}
.chest:before,
.chest:after{
	top:24px;
	width:inherit;
	height:inherit;
	border-radius:inherit;
	border:10px solid #fff;
}
.chest:before{left:-45px}
.chest:after{right:-45px}
@keyframes chest{
	0%,100%{transform:rotate(8deg)}
	33.33%{transform:rotate(0deg)}
	66.66%{transform:rotate(-8deg)}
}
.main .hand{width:20px;position:absolute}
.main .hand.left{left:-38px}
.main .hand.right{right:-38px}
.main .hand>i{width:20px;display:inline-block;position:absolute}
.main .hand>.top{z-index:1;top:-40px;height:75px;background-color:#559aa6;border-radius:0 0 20px 20px}
.main .hand>.bottom{top:10px;height:75px;background-color:#ffae75;border-radius:8px 8px 0 0}
.main .hand.left>.top{left:15px;transform:rotate(45deg)}
.main .hand.right>.top{right:15px;transform:rotate(-45deg)}
.main .hand .bottom:after{
	bottom:0;
	height:15px;
	width:inherit;
	background-color:#559aaa;
	border-radius:15px 15px 0 0;
}
.main .hand.left .top{animation:hand-lt 1.2s linear infinite}
.main .hand.left .bottom{transform-origin:80% 100%;animation:hand-lb 1.2s linear infinite}
.main .hand.right .top{animation:hand-rt 1.2s linear infinite}
.main .hand.right .bottom{transform-origin:80% 100%;animation:hand-rb 1.2s linear infinite}
@keyframes hand-lt{
	0%,100%{transform:translate(-4px,8px) rotate(45deg)}
	50%{transform:translate(8px,-4px) rotate(48deg)}
}
@keyframes hand-lb{
	0%,100%{transform:translate(-8px,8px)}
	50%{transform:translate(15px,-4px) rotate(-8deg)}
}
@keyframes hand-rt{
	0%,100%{transform:translate(-8px,-8px) rotate(-45deg)}
	50%{transform:translate(8px,8px) rotate(-48deg)}
}
@keyframes hand-rb{
	0%,100%{transform:translate(-15px,-4px) rotate(8deg)}
	50%{transform:translate(12px,8px)}
}

.bike{
	z-index:10;
	width:14px;
	margin:auto;
	height:215px;
	margin-top:65px;
	position:relative;
	transform-origin:50% 100%;
	animation:bike 1.2s linear infinite;
}
.bike:before{
	left:50%;
	top:-5px;
	width:32px;
	height:20px;
	margin-left:-16px;
	border-top:10px solid #55303c;
	border-radius:20px;
}
.bike:after{
	width:14px;
	height:70px;
	background-color:#7d61a6;
	border-radius:14px 14px 0 0;
}
.bike .wheel{
	bottom:0;
	left:50%;
	z-index:1;
	width:20px;
	height:160px;
	position:absolute;
	margin-left:-10px;
	border-radius:20px;
	background-color:#55303c;
}
.bike .wheel:before,.bike .wheel:after{top:50%;width:5px;height:10px;margin-top:-5px;background-color:#69cece}
.bike .wheel:before{left:-5px;border-radius:5px 0 0 5px}
.bike .wheel:after{right:-5px;border-radius:0 5px 5px 0}

.bike .handle-wrap{
	top:10px;
	left:50%;
	z-index:1;
	width:150px;
	height:35px;
	margin-left:-75px;
	position:absolute;
}
.bike .handle{
	width:150px;
	height:35px;
	margin:auto;
	position:relative;
	border:10px solid #55303c;
	border-bottom:none;
	border-top-right-radius:25px 30px;
	border-top-left-radius:25px 30px;
}
.bike .hand{
	top:12px;
	width:28px;
	height:34px;
	position:absolute;
	border-radius:34px;
	border:14px solid transparent;
	border-top:none;
	border-bottom:none;
}
.bike .hand.left{left:-6px;border-left-color:#559aa6;border-right-color:#ff9266}
.bike .hand.right{right:-6px;border-left-color:#ff9266;border-right-color:#559aa6}
.bike .hand.left:before,
.bike .hand.right:after{
	bottom:0;
	z-index:1;
	width:33px;
	height:22px;
	color:#ffae75;
	border-radius:8px;
	border-bottom:12px solid;
}
.bike .hand.left:before{left:-17px;border-left:10px solid}
.bike .hand.right:after{right:-17px;border-right:10px solid}
@keyframes bike{
	0%,100%{transform:rotate(-4deg)}
	50%{transform:rotate(4deg)}
}
Rerun