/*AWAN*/
.awan {
    position: absolute;
    z-index: 0;
    left: 0;
    -webkit-animation: slide 20s linear infinite;
    -moz-animation: slide 20s linear infinite;
    animation: slide 20s linear infinite;
    width: 100%;
}

.awan img {
    position: absolute;
    width: 200%;
    left: 0;
}

@-webkit-keyframes slide {
    0% {
        left: 0;
    }

    100% {
        left: -182%;
    };
}

@-moz-keyframes slide {
    0% {
        left: 0;
    }

    100% {
        left: -182%;
    };
}

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

    100% {
        left: -182%;
    };
}

/*CONTENT*/
.building {
    width: 101%;
    position: absolute;
    bottom: 0;
    left: 0;
    height: 30%;
    background: #35b769;
}

.building div {
}

.building img {
    width: 100%;
    bottom: 0%;
    position: absolute;
}

.rumput {
    background: #497931;
    position: absolute;
    width: 100%;
    bottom: 35%;
    left: 0;
    height: 10%;
    z-index: 1;
}

.rumput img {
    width: 45%;
    margin-top: -5%;
    max-width: 230px;
}

.jalan {
    position: absolute;
    bottom: 29%;
    width: 100%;
    height: 11%;
    left: 0;
    z-index: 1;
}

.jalan .jalanan-wrap {
    position: relative;
    width: 100%;
    height: 100%;
}

.jalan .jalanan-wrap .line-finish {
    position: absolute;
    z-index: 3;
    width: 70px;
    left: 50%;
    margin-left: -35px;
    display: none;
}

.jalan .jalanan-wrap .line-finish img {
    width: 100%;
}

.jalan .jalanan-wrap .bg-road {
    background: #999999;
    position: absolute;
    width: 100%;
    height: 100%;
}

.jalan .jalanan-wrap .list {
    width: 100%;
    height: 30%;
    bottom: 0;
    background: url(image/swipe/road.png);
    background-size: contain;
    position: absolute;
    z-index: 4;
}

.bottom-wrap {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 30%;
    background: #666666;
    z-index: 0;
    left: 0;
    font-size: 0.9em;
}

.bottom-wrap>div {
    width: 100%;
    position: absolute;
    left: 0;
    height: 100%;
    display: table;
}

.bottom-wrap>div>div {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    color: #fff;
    padding: 0 10px;
}

.bottom-wrap div span span {
    color: #FFCC33;
    display: inline-block;
    padding: 0;
}

.history_wrapper {
    width: 100%;
    height: 100%;
    position: relative;
    outline: none;
    overflow: hidden;
}

.slick-track {
    height: 100%;
}

.list_history {
    width: 100%;
    height: 100%;
}

.slick-list {
    width: 100%;
    height: 100%;
}

.man {
    position: absolute;
    z-index: 3;
    bottom: 5%;
    width: 140px;
    left: 50%;
    margin-left: -180px;
}

.man img {
    width: 100%;
}

.sign {
    min-width: 70px;
    position: absolute;
    left: 50%;
    margin-left: -35px;
    bottom: 42%;
    width: 10%;
}

.sign .logo-sign {
    position: absolute;
    width: 90%;
    left: 50%;
    margin-left: -45%;
    top: 4%;
}

.sign .logo-sign img {
    width: 100%;
}

.sign .txt_sej {
    position: absolute;
    top: 37%;
    width: 140%;
    text-align: center;
    font-size: 0.9em;
    color: #333333;
    font-weight: 600;
    line-height: 1.5em;
    height: 15%;
    margin-left: -20%;
}

.sign .txt_sej span {
    display: table;
    width: 100%;
    height: 100%;
}

.sign .txt_sej span span {
    display: table-cell;
    vertical-align: middle;
    background: #fff;
    border-radius: 10px;
    border: 3px solid #666666;
}

.sign .img_sign {
    width: 100%;
}

.peti {
    position: absolute;
    width: 120px;
    height: 116px;
    bottom: 33%;
    z-index: 4;
    left: 50%;
    margin-left: -54px;
    display: none;
    animation-duration: .5s;
}

.peti .ptnjk_klik {
    position: absolute;
    bottom: -9%;
    left: 18%;
    width: 50%;
    z-index: 2;
}

.peti .img_peti {
    width: 100%;
    z-index: 1;
    position: relative;
}

.header_wrap {
    position: absolute;
    width: 100%;
    z-index: 20;
}

.header_wrap .star_wrap {
    float: left;
    margin-left: 10px;
    margin-top: 10px;
}

.header_wrap .star_wrap .star {
    background: url(image/star.png);
    width: 28px;
    height: 27px;
    display: inline-block;
    background-size: cover;
    background-position: -40px;
    opacity: .5;
    position: relative;
}

.header_wrap .star_wrap .star img {
    display: none;
}

.header_wrap .star_wrap .star.active {
    opacity: 1;
}

.header_wrap .star_wrap .star.active img {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    -webkit-animation: staractive .5s linear;
    -moz-animation: staractive .5s linear;
    animation: staractive .5s linear;
}

.header_wrap .pita_title {
    width: 150px;
    float: right;
    position: relative;
    margin-top: 10px;
}

.header_wrap .pita_title img {
    width: 100%;
}

.header_wrap .pita_title div {
    position: absolute;
    top: 0;
    text-align: center;
    height: 31px;
    display: table;
    width: 100%;
    color: #fff;
    font-size: .9em;
    padding-left: 10px;
}

.header_wrap .pita_title div span {
    display: table-cell;
    vertical-align: middle;
}

.btn-submit.btn_try_again {
    background: #FF9900;
    border-bottom: #D17E02 5px solid;
}

.btn-submit.next_page,
.btn-submit.btn_try_again {
    margin-top: 10px;
    margin-bottom: 10px;
    display: none;
}

@-webkit-keyframes staractive {
    0% {
        top: 205%;
        left: 200%;
        width: 100px;
    }

    100% {
        top: 0;
        left: 0;
        width: 100%;
    };
}

@-moz-keyframes staractive {
    0% {
        top: 205%;
        left: 200%;
        width: 100px;
    }

    100% {
        top: 0;
        left: 0;
        width: 100%;
    };
}

@keyframes staractive {
    0% {
        top: 205%;
        left: 200%;
        width: 100px;
    }

    100% {
        top: 0;
        left: 0;
        width: 100%;
    };
}

.history_wrapper .box {
    display: none;
    position: absolute;
}

.history_wrapper .box .img_box {
    width: 100%;
}

.history_wrapper .box .ptnjk_klik {
    position: absolute;
    top: 20%;
    width: 100%;
    left: 30%;
  /*margin-left: -15px;*/;
}

.pnjk_swipe {
    width: 200px;
    position: absolute;
    bottom: 0;
    margin-top: -100px;
    left: 50%;
    margin-left: -100px;
    z-index: 30;
    display: none;
}

.pnjk_swipe img {
    width: 100%;
}