.fix-wrp{
	position: fixed;
	height: 100%;
	width: 100%;
	z-index: -111;
}
.animate-wrp {
	background: #8fd7f1;
	position: absolute;
	top: 0px;
	left: 0px;
	z-index: -1;
	overflow: hidden;
	height: 100%;
	width: 100%;
}
.januriawan {
	position: absolute;
	height: 3000px;
	width: 5000px;
	bottom: 0px;
	left: 0px;
	border: 1px solid;
}
.januriawan > div,
.animate {
	background-repeat: repeat-x;
	/* background-size: contain; */
	background-size: auto 100%; 
	position: absolute;
	background-position: 0 0;
	-webkit-animation-iteration-count: infinite;
	-moz-animation-iteration-count: infinite;
	-ms-animation-iteration-count: infinite;
	-o-animation-iteration-count: infinite;
	animation-iteration-count: infinite;
	-webkit-animation-timing-function: linear;
	-moz-animation-timing-function: linear;
	-ms-animation-timing-function: linear;
	-o-animation-timing-function: linear;
	animation-timing-function: linear;
}

.c1,
.mobil,
.mobil-roda {
	width: 180px;
	bottom: 110px;
	left: 70px;
	position: absolute;
	z-index: 7;
}
.mobil-roda {
	z-index: 8;
	bottom: 90px;
}
.c1 { left: 600px; bottom: 90px; z-index: 9; }
.mobil-roda.c1 { z-index: 10; bottom: 75px; }
.msg {
	position: absolute;
	width: 220px;
	height: 200px;
	top: -165px;
	left: 0;
	background: url(../images/pesan-popup.png) no-repeat;
	background-size: 100%;
}
.msg b {
	position: absolute;
	width: 100%;
	text-align: center;
}
.msg b span { display: block;}

.jalan-depan,
.jalan {
	height: 150px;
	background-color: #333;
	position: absolute;
	bottom: 0px;
	left: 0px;
	z-index: 0;
	width: 100%;
}
.jalan-depan {
	height: 60px;
	background-color: #72521e;
}
.rumput, .rumput1, .pohon, .gunung, .gunung1 {
	bottom: 150px;
}
.rumput2 { bottom: 0px; z-index: 16; }
.pohon {}
.pohon-depan { bottom: 15px; z-index: 15; }
.gunung, .gunung1 {}

.awan { bottom: 15%; }
.awan1 { bottom: 24%; }
.awan2 { bottom: 20%; }


/* rumput
=========================== */
@-moz-keyframes rumput {
	0% { background-position: 0 bottom; }
	100% { background-position: -1100px bottom; }
}
@-webkit-keyframes rumput {
	0% { background-position: 0 bottom; }
	100% { background-position: -1100px bottom; }
}
@-o-keyframes rumput {
	0% { background-position: 0 bottom; }
	100% { background-position: -1100px bottom; }
}
@-ms-keyframes rumput {
	0% { background-position: 0 bottom; }
	100% { background-position: -1100px bottom; }
}
@keyframes rumput {
	0% { background-position: 0 bottom; }
	100% { background-position: -1100px bottom; }
}
.rumput {
	position: absolute;
	background: url(../images/rumput1.png) repeat-x;
	height: 76px;
	width: 100%;
	left: 0px;
	z-index: 1;
	-webkit-animation-name: rumput;
	-moz-animation-name: rumput;
	-ms-animation-name: rumput;
	-o-animation-name: rumput;
	animation-name: rumput;
	-webkit-animation-duration: 14s;
	-moz-animation-duration: 14s;
	-ms-animation-duration: 14s;
	-o-animation-duration: 14s;
	animation-duration: 14s;
}

@-moz-keyframes rumput1 {
	0% { background-position: 0 0; }
	100% { background-position: -876px 0; }
}
@-webkit-keyframes rumput1 {
	0% { background-position: 0 0; }
	100% { background-position: -876px 0; }
}
@-o-keyframes rumput1 {
	0% { background-position: 0 0; }
	100% { background-position: -876px 0; }
}
@-ms-keyframes rumput1 {
	0% { background-position: 0 0; }
	100% { background-position: -876px 0; }
}
@keyframes rumput1 {
	0% { background-position: 0 0; }
	100% { background-position: -876px 0; }
}
.rumput1 {
	background: url(../images/rumput2.png);
	left: 0px;
	width: 100%;
	height: 73px;
	z-index: 3;
	-webkit-animation-name: rumput1;
	-moz-animation-name: rumput1;
	-ms-animation-name: rumput1;
	-o-animation-name: rumput1;
	animation-name: rumput1;
	-webkit-animation-duration: 10.4s;
	-moz-animation-duration: 10.4s;
	-ms-animation-duration: 10.4s;
	-o-animation-duration: 10.4s;
	animation-duration: 10.4s;
}

@-moz-keyframes rumput2 {
	0% { background-position: 0 bottom; }
	100% { background-position: -1189px bottom; }
}
@-webkit-keyframes rumput2 {
	0% { background-position: 0 bottom; }
	100% { background-position: -1189px bottom; }
}
@-o-keyframes rumput2 {
	0% { background-position: 0 bottom; }
	100% { background-position: -1189px bottom; }
}
@-ms-keyframes rumput2 {
	0% { background-position: 0 bottom; }
	100% { background-position: -1189px bottom; }
}
@keyframes rumput2 {
	0% { background-position: 0 bottom; }
	100% { background-position: -1189px bottom; }
}
.rumput2 {
	position: absolute;
	background: url(../images/rumput3.png) repeat-x;
	height: 89px;
	width: 100%;
	left: 0px;
	-webkit-animation-name: rumput2;
	-moz-animation-name: rumput2;
	-ms-animation-name: rumput2;
	-o-animation-name: rumput2;
	animation-name: rumput2;
	-webkit-animation-duration: 28s;
	-moz-animation-duration: 28s;
	-ms-animation-duration: 28s;
	-o-animation-duration: 28s;
	animation-duration: 28s;
}


/* pohon
=========================== */
@-moz-keyframes pohon {
	0% { background-position: 0 0; }
	100% { background-position: -2302px 0; }
}
@-webkit-keyframes pohon {
	0% { background-position: 0 0; }
	100% { background-position: -2302px 0; }
}
@-o-keyframes pohon {
	0% { background-position: 0 0; }
	100% { background-position: -2302px 0; }
}
@-ms-keyframes pohon {
	0% { background-position: 0 0; }
	100% { background-position: -2302px 0; }
}
@keyframes pohon {
	0% { background-position: 0 0; }
	100% { background-position: -2302px 0; }
}
.pohon {
	background: url(../images/pohon.png);
	width: 100%;
	height: 181px;
	position: absolute;
	z-index: 5;
	-webkit-animation-name: pohon;
	-moz-animation-name: pohon;
	-ms-animation-name: pohon;
	-o-animation-name: pohon;
	animation-name: pohon;
	-webkit-animation-duration: 20s;
	-moz-animation-duration: 20s;
	-ms-animation-duration: 20s;
	-o-animation-duration: 20s;
	animation-duration: 20s;
}

@-moz-keyframes pohon-depan {
	0% { background-position: 0 0; }
	100% { background-position: -1359px 0; }
}
@-webkit-keyframes pohon-depan {
	0% { background-position: 0 0; }
	100% { background-position: -1359px 0; }
}
@-o-keyframes pohon-depan {
	0% { background-position: 0 0; }
	100% { background-position: -1359px 0; }
}
@-ms-keyframes pohon-depan {
	0% { background-position: 0 0; }
	100% { background-position: -1359px 0; }
}
@keyframes pohon-depan {
	0% { background-position: 0 0; }
	100% { background-position: -1359px 0; }
}
.pohon-depan {
	background: url(../images/pohon-depan.png);
	width: 100%;
	height: 181px;
	position: absolute;
	-webkit-animation-name: pohon-depan;
	-moz-animation-name: pohon-depan;
	-ms-animation-name: pohon-depan;
	-o-animation-name: pohon-depan;
	animation-name: pohon-depan;
	-webkit-animation-duration: 20s;
	-moz-animation-duration: 20s;
	-ms-animation-duration: 20s;
	-o-animation-duration: 20s;
	animation-duration: 20s;
}


/* gunung
=========================== */
@-moz-keyframes gunung {
	0% { background-position: 0 0; }
	100% { background-position: -1275px 0; }
}
@-webkit-keyframes gunung {
	0% { background-position: 0 0; }
	100% { background-position: -1275px 0; }
}
@-o-keyframes gunung {
	0% { background-position: 0 0; }
	100% { background-position: -1275px 0; }
}
@-ms-keyframes gunung {
	0% { background-position: 0 0; }
	100% { background-position: -1275px 0; }
}
@keyframes gunung {
	0% { background-position: 0 0; }
	100% { background-position: -1275px 0; }
}
.gunung {
	background: url(../images/gunung.png);
	left: 0px;
	width: 100%;
	height: 105px;
	z-index: 0;
	-webkit-animation-name: gunung;
	-moz-animation-name: gunung;
	-ms-animation-name: gunung;
	-o-animation-name: gunung;
	animation-name: gunung;
	-webkit-animation-duration: 14s;
	-moz-animation-duration: 14s;
	-ms-animation-duration: 14s;
	-o-animation-duration: 14s;
	animation-duration: 14s;
}

@-moz-keyframes gunung1 {
	0% { background-position: 0 0; }
	100% { background-position: -1874px 0; }
}
@-webkit-keyframes gunung1 {
	0% { background-position: 0 0; }
	100% { background-position: -1874px 0; }
}
@-o-keyframes gunung1 {
	0% { background-position: 0 0; }
	100% { background-position: -1874px 0; }
}
@-ms-keyframes gunung1 {
	0% { background-position: 0 0; }
	100% { background-position: -1874px 0; }
}
@keyframes gunung1 {
	0% { background-position: 0 0; }
	100% { background-position: -1874px 0; }
}
.gunung1 {
	background: url(../images/gunung1.png);
	left: 0px;
	width: 100%;
	height: 171px;
	z-index: 2;
	-webkit-animation-name: gunung1;
	-moz-animation-name: gunung1;
	-ms-animation-name: gunung1;
	-o-animation-name: gunung1;
	animation-name: gunung1;
	-webkit-animation-duration: 22s;
	-moz-animation-duration: 22s;
	-ms-animation-duration: 22s;
	-o-animation-duration: 22s;
	animation-duration: 22s;
}

/* awans
=========================== */
@-moz-keyframes awan {
	0% { background-position: 0 0; }
	100% { background-position: -600px 0; }
}
@-webkit-keyframes awan {
	0% { background-position: 0 0; }
	100% { background-position: -600px 0; }
}
@-o-keyframes awan {
	0% { background-position: 0 0; }
	100% { background-position: -600px 0; }
}
@-ms-keyframes awan {
	0% { background-position: 0 0; }
	100% { background-position: -600px 0; }
}
@keyframes awan {
	0% { background-position: 0 0; }
	100% { background-position: -600px 0; }
}
.awan {
	position: absolute;
	background: url(../images/awan.png) repeat-x;
	height: 84px;
	width: 100%;
	left: 0px;
	z-index: 1;
	-webkit-animation-name: awan;
	-moz-animation-name: awan;
	-ms-animation-name: awan;
	-o-animation-name: awan;
	animation-name: awan;
	-webkit-animation-duration: 12s;
	-moz-animation-duration: 12s;
	-ms-animation-duration: 12s;
	-o-animation-duration: 12s;
	animation-duration: 12s;
}

@-moz-keyframes awan1 {
	0% { background-position: 0 bottom; }
	100% { background-position: -700px bottom; }
}
@-webkit-keyframes awan1 {
	0% { background-position: 0 bottom; }
	100% { background-position: -700px bottom; }
}
@-o-keyframes awan1 {
	0% { background-position: 0 bottom; }
	100% { background-position: -700px bottom; }
}
@-ms-keyframes awan1 {
	0% { background-position: 0 bottom; }
	100% { background-position: -700px bottom; }
}
@keyframes awan1 {
	0% { background-position: 0 bottom; }
	100% { background-position: -700px bottom; }
}
.awan1 {
	position: absolute;
	background: url(../images/awan1.png) repeat-x;
	background-size: cover;
	height: 60px;
	width: 100%;
	left: 0px;
	z-index: 1;
	-webkit-animation-name: awan1;
	-moz-animation-name: awan1;
	-ms-animation-name: awan1;
	-o-animation-name: awan1;
	animation-name: awan1;
	-webkit-animation-duration: 12s;
	-moz-animation-duration: 12s;
	-ms-animation-duration: 12s;
	-o-animation-duration: 12s;
	animation-duration: 12s;
}

@-moz-keyframes awan2 {
	0% { background-position: 0 bottom; }
	100% { background-position: -1200px bottom; }
}
@-webkit-keyframes awan2 {
	0% { background-position: 0 bottom; }
	100% { background-position: -1200px bottom; }
}
@-o-keyframes awan2 {
	0% { background-position: 0 bottom; }
	100% { background-position: -1200px bottom; }
}
@-ms-keyframes awan2 {
	0% { background-position: 0 bottom; }
	100% { background-position: -1200px bottom; }
}
@keyframes awan2 {
	0% { background-position: 0 bottom; }
	100% { background-position: -1200px bottom; }
}
.awan2 {
	position: absolute;
	background: url(../images/awan2.png) repeat-x;
	height: 30px;
	width: 100%;
	left: 0px;
	z-index: 1;
	-webkit-animation-name: awan2;
	-moz-animation-name: awan2;
	-ms-animation-name: awan2;
	-o-animation-name: awan2;
	animation-name: awan2;
	-webkit-animation-duration: 20s;
	-moz-animation-duration: 20s;
	-ms-animation-duration: 20s;
	-o-animation-duration: 20s;
	animation-duration: 20s;
}

/* mobil
=========================== */
@-moz-keyframes mobil {
    0% { -moz-transform: translateY(0); transform: translateY(0); }
    50% { -moz-transform: translateY(3px); transform: translateY(3px); }
    100% { -moz-transform: translateY(0); transform: translateY(0); }
}
@-webkit-keyframes mobil {
    0% { -webkit-transform: translateY(0); transform: translateY(0); }
    50% { -webkit-transform: translateY(3px); transform: translateY(3px); }
    100% { -webkit-transform: translateY(0); transform: translateY(0); }
}
@-o-keyframes mobil {
    0% { -o-transform: translateY(0); transform: translateY(0); }
    50% { -o-transform: translateY(3px); transform: translateY(3px); }
    100% { -o-transform: translateY(0); transform: translateY(0); }
}
@-ms-keyframes mobil {
    0% { -ms-transform: translateY(0); transform: translateY(0); }
    50% { -ms-transform: translateY(3px); transform: translateY(3px); }
    100% { -ms-transform: translateY(0); transform: translateY(0); }
}
@keyframes mobil {
    0% { transform: translateY(0); }
    50% { transform: translateY(3px); }
    100% { transform: translateY(0); }
}

@-moz-keyframes mobil1 {
    0% { left: -10%; }
    50% { left: 50%; }
    100% { left: 150%; }
}
@-webkit-keyframes mobil1 {
    0% { left: -10%; }
    50% { left: 50%; }
    100% { left: 150%; }
}
@-o-keyframes mobil1 {
    0% { left: -10%; }
    50% { left: 50%; }
    100% { left: 150%; }
}
@-ms-keyframes mobil1 {
    0% { left: -10%; }
    50% { left: 50%; }
    100% { left: 150%; }
}
@keyframes mobil1 {
    0% { transform: translateY(0); }
    50% { transform: translateY(3px); }
    100% { transform: translateY(0); }
}
.mobil-roda {
	background-image: url(../images/mobil-roda.png);
	background-repeat: no-repeat !important;
	background-position: center bottom !important;
	height: 39px;
	width: 204px;
}
.mobil {
	background-image: url(../images/mobil.png);
	height: 74px;
	width: 204px;
	-webkit-animation-timing-function: cubic-bezier(0.25,0.46,0.45,0.94);
    -moz-animation-timing-function: cubic-bezier(0.25,0.46,0.45,0.94);
    -ms-animation-timing-function: cubic-bezier(0.25,0.46,0.45,0.94);
    -o-animation-timing-function: cubic-bezier(0.25,0.46,0.45,0.94);
    animation-timing-function: cubic-bezier(0.25,0.46,0.45,0.94);
	-webkit-animation-name: mobil;
	-moz-animation-name: mobil;
	-ms-animation-name: mobil;
	-o-animation-name: mobil;
	animation-name: mobil;
	-webkit-animation-duration: 0.8s;
	-moz-animation-duration: 0.8s;
	-ms-animation-duration: 0.8s;
	-o-animation-duration: 0.8s;
	animation-duration: 0.8s;
}
.mobil1 {
	background: url(../images/mobil1.png)  no-repeat;
	height: 88px;
	width: 243px;
}
.mobil-roda.c1 {
	height: 45px;
	width: 243px;
	background-image: url(../images/mobil-roda1.png);
}
.c1 {
	-webkit-animation-name: mobil1;
	-moz-animation-name: mobil1;
	-ms-animation-name: mobil1;
	-o-animation-name: mobil1;
	animation-name: mobil1;
	-webkit-animation-timing-function: cubic-bezier(0.25,0.46,0.45,0.94);
    -moz-animation-timing-function: cubic-bezier(0.25,0.46,0.45,0.94);
    -ms-animation-timing-function: cubic-bezier(0.25,0.46,0.45,0.94);
    -o-animation-timing-function: cubic-bezier(0.25,0.46,0.45,0.94);
    animation-timing-function: cubic-bezier(0.25,0.46,0.45,0.94);
	-webkit-animation-duration: 18s;
	-moz-animation-duration: 18s;
	-ms-animation-duration: 18s;
	-o-animation-duration: 18s;
	animation-duration: 18s;
}