.section-smartpedia-kota {
    position: relative;
    line-height: 1.3em;
} 

header {
	height: 110px;
	background-color: var(--main-color) !important;
}

section { 
	padding: 0;
}

@media (min-width: 1280px) {
    .sp-arrow-down {
        margin: 0 auto;
        display: block;
        text-align: center;
        margin-top: -50px;
        position: absolute;
        top: 100vh;
        left: 0;
        right: 0;
        width: 30px;
        transition: ease 1s;
        -webkit-animation: heartBeat 2s linear infinite;
        animation: heartBeat 2s linear infinite;
        z-index: 10;
    }
    .sp-arrow-top {
        display: block;
        position: absolute;
        bottom: 8rem;
        right: 2rem;
        width: 80px;
        height: 115px;
        transition: ease 1s;
        -webkit-animation: bounce 1s linear infinite;
        animation: bounce 1s linear infinite;
        z-index: 10;
    }
    .share {
        display: block;
        position: absolute;
        bottom: 0;
        right: 2rem;
    }
    .sharethis-inline-share-buttons {
        text-align: right !important;
    }
}

@media (max-width: 747px) {
    .sp-arrow-down {
        display: none;
    }
    .sp-arrow-top img {
        display: block;
        position: absolute;
        bottom: 2rem;
        right: 2rem;
        width: 50px;
        transition: ease 1s;
        -webkit-animation: bounce 1s linear infinite;
        animation: bounce 1s linear infinite;
    }
    .share {
        display: block;
        position: absolute;
        bottom: -10rem;
        width: 95%;
        text-align: center;
    }
    .sharethis-inline-share-buttons {
        text-align: center !important;
    }
}

@media (min-width: 1440px) {
    .sp-arrow-down {
        top: 80vh;
    }
}


/* -------------------- SECTION 1: TITLE & OPENING ------------------------*/

@media (min-width: 1280px) {
    #section1 .background-image {
        background-position: top center;
        background-repeat: no-repeat;
        background-size: cover;
        min-height: 700px;
    }
    #section1 .ikon-kota {
        position: absolute;
        top: 5%;
        left: 0;
        right: 0;
        background: url(../images/smartpedia/kota/miscelanous/icon-kota.png);
        width: 350px;
        height: 120px;
        background-size: cover;
        margin: 0 auto;
    }
    #section1 .opening {
        position: absolute;
        top: 23%;
        left: 0;
        right: 0;
        width: 70%;
        margin: 20px auto;
        background-size: cover;
        letter-spacing: 1px;
        line-height: 1.3;
        color: #1e4b49;
        text-align: center;
    }
    #section1 .balloon {
        position: absolute;
        top: 50%;
        left: 32%;
        background: url('../images/smartpedia/kota/miscelanous/section\ 1\ -\ balon.png');
        width: 149px;
        height: 228px;
        padding: 10px 20px 12px 44px;
        font-weight: bold;
        animation: 2s ease-in-out 0ms 1 normal none running balloon;
        animation-timing-function: ease-out;
    }
    #section1 .bubble {
        position: absolute;
        top: 58%;
        left: 42%;
        background: url('../images/smartpedia/kota/miscelanous/section\ 1\ -\ bubble.png');
        background-size: cover;
        width: 302px;
        height: 105px;
        padding: 15px 20px 12px 50px;
        font-weight: bold;
        animation-delay: 800ms;
    }
}

@media (max-width: 747px) {
    #section1 .background-image {
        min-height: 420px;
        background-size: cover;
        background-position: top center;
    }
    #section1 .ikon-kota {
        position: absolute;
        top: 7%;
        left: 0;
        right: 0;
        background: url(../images/smartpedia/kota/miscelanous/icon-kota.png);
        width: 200px;
        height: 69px;
        background-size: cover;
        margin: 0 auto;
    }
    #section1 .opening {
        position: absolute;
        top: 25%;
        left: 0;
        right: 0;
        background-size: cover;
        width: 100%;
        padding: 10px;
        letter-spacing: 1px;
        line-height: 1.3;
        color: #1e4b49;
        text-align: center;
        font-size: 12px;
    }
    .opening h4 {
        font-size: 12px;
    }
    .opening br {
        display: none;
    }
    #section1 .balloon {
        position: absolute;
        top: 69%;
        left: 18%;
        background: url('../images/smartpedia/kota/miscelanous/section\ 1\ -\ balon.png');
        background-size: 100%;
        width: 81px;
        height: 124px;
        padding: 10px 20px 12px 44px;
        font-weight: bold;
        animation: 2s ease-in-out 0ms 1 normal none running balloon;
        animation-timing-function: ease-out;
    }
    #section1 .bubble {
        position: absolute;
        top: 76%;
        left: 38%;
        background: url('../images/smartpedia/kota/miscelanous/section\ 1\ -\ bubble.png');
        background-size: 100%;
        width: 199px;
        height: 69px;
        padding: 6px 20px 12px 35px;
        line-height: 1.5;
        font-size: 11px;
        font-weight: bold;
    }
}

@media (min-width: 1440px) {
    #section1 .background-image {
        min-height: 768px;
    }
}


/* -------------------- END SECTION 1 ------------------------*/


/* -------------------- SECTION 2: Makassar & Surabaya ------------------------*/

@media (min-width: 1280px) {
    #section2 .background-image {
        background-position: top center;
        background-repeat: no-repeat;
        background-size: cover;
        min-height: 750px;
    }
    #section2 .bubble-1 {
        position: absolute;
        top: 21%;
        right: 11%;
        background: url('../images/smartpedia/kota/miscelanous/bubble-1.png');
        width: 181px;
        height: 95px;
        padding: 7px 15px;
        text-align: center;
    }
    #section2 .bubble-surabaya {
        position: absolute;
        top: 50%;
        right: 40%;
        background: url('../images/smartpedia/kota/miscelanous/bubble-surabaya.png');
        width: 259px;
        height: 89px;
        padding: 7px 15px;
        text-align: center;
    }
    #section2 .swimmingkids {
        position: absolute;
        top: 4%;
        right: 46%;
        background: url('../images/smartpedia/kota/miscelanous/section\ 2\ -\ swimming.png');
        width: 109px;
        height: 88px;
        animation-duration: 20000ms;
    }
    #section2 .icecreamkid {
        position: absolute;
        top: 34%;
        right: 16%;
        background: url('../images/smartpedia/kota/miscelanous/section\ 2\ -\ kids.png');
        width: 56px;
        height: 126px;
    }
    #section2 .surabayakid {
        position: absolute;
        top: 62%;
        right: 52%;
        background: url('../images/smartpedia/kota/miscelanous/section\ 2\ -\ kids\ surabaya.png');
        width: 80px;
        height: 110px;
        z-index: 1;
    }
    #section2 .losariicon {
        position: absolute;
        top: 39%;
        left: 53%;
        background: url('../images/smartpedia/kota/miscelanous/lupicon.png');
        background-size: cover;
        box-shadow: 3px 3px 5px rgba(0, 0, 0, .4);
        border-radius: 100%;
        width: 43px;
        height: 43px;
        z-index: 10;
        cursor: pointer;
        -webkit-animation: tada linear 1s infinite;
        animation: tada linear 1s infinite;
    }
    #section2 .losarinote {
        position: absolute;
        top: 16%;
        left: 21%;
        background: #f9efa3;
        border-radius: 10px;
        width: 450px;
        font-size: 14px;
        padding: 24px 15px 15px 15px;
        color: #1e4b49;
        display: none;
    }
    #section2 .surabayaicon {
        position: absolute;
        top: 47%;
        left: 26%;
        background: url('../images/smartpedia/kota/miscelanous/lupicon.png');
        background-size: cover;
        box-shadow: 3px 3px 5px rgba(0, 0, 0, .4);
        border-radius: 100%;
        width: 43px;
        height: 43px;
        z-index: 10;
        cursor: pointer;
        -webkit-animation: tada linear 1s infinite;
        animation: tada linear 1s infinite;
    }
    #section2 .surabayanote {
        position: absolute;
        top: 50%;
        left: 2%;
        background: #f9efa3;
        border-radius: 10px;
        width: 350px;
        font-size: 14px;
        padding: 24px 15px 15px 15px;
        color: #1e4b49;
        display: none;
    }
}

@media (max-width: 747px) {
    #section2 .background-image {
        min-height: 320px;
        background-size: cover;
        background-position: top center;
    }
    #section2 .bubble-1 {
        position: absolute;
        top: 16%;
        right: 2%;
        background: url('../images/smartpedia/kota/miscelanous/bubble-1.png');
        background-size: 100%;
        font-size: 10px;
        line-height: 1.5;
        width: 124px;
        height: 66px;
        padding: 6px 15px;
        text-align: center;
    }
    #section2 .bubble-surabaya {
        position: absolute;
        top: 51%;
        right: 20%;
        background: #fff;
        width: 45%;
        border-radius: 5px;
        font-size: 10px;
        line-height: 1.5em;
        padding: 5px;
        text-align: center;
    }
    #section2 .surabayakid {
        position: absolute;
        top: 65%;
        right: 52%;
        background: url('../images/smartpedia/kota/miscelanous/section\ 2\ -\ kids\ surabaya.png');
        background-size: 100%;
        width: 38px;
        height: 53px;
        z-index: 1;
    }
    #section2 .swimmingkids {
        position: absolute;
        top: 4%;
        right: 43%;
        background: url('../images/smartpedia/kota/miscelanous/section\ 2\ -\ swimming.png');
        background-size: 100%;
        width: 54px;
        height: 36px;
        animation-duration: 20000ms;
    }
    #section2 .icecreamkid {
        position: absolute;
        top: 34%;
        right: 10%;
        background: url('../images/smartpedia/kota/miscelanous/section\ 2\ -\ kids.png');
        background-size: 100%;
        width: 25px;
        height: 56px;
    }
    #section2 .losariicon {
        position: absolute;
        top: 25%;
        left: 48%;
        background: url('../images/smartpedia/kota/miscelanous/lupicon.png');
        background-size: cover;
        box-shadow: 3px 3px 5px rgba(0, 0, 0, .4);
        border-radius: 100%;
        width: 24px;
        height: 24px;
        z-index: 20;
        cursor: pointer;
        -webkit-animation: tada linear 1s infinite;
        animation: tada linear 1s infinite;
    }
    #section2 .losarinote {
        position: absolute;
        align-content: center;
        top: 31%;
        left: 0;
        right: 0;
        background: #f9efa3;
        border-radius: 10px;
        width: 90%;
        margin: 0 auto;
        font-size: 11px;
        padding: 12px 8px 8px 8px;
        color: #1e4b49;
        display: none;
        z-index: 19;
    }
    #section2 .surabayaicon {
        position: absolute;
        top: 76%;
        left: 20%;
        background: url('../images/smartpedia/kota/miscelanous/lupicon.png');
        background-size: cover;
        box-shadow: 3px 3px 5px rgba(0, 0, 0, .4);
        border-radius: 100%;
        width: 24px;
        height: 24px;
        z-index: 18;
        cursor: pointer;
        -webkit-animation: tada linear 1s infinite;
        animation: tada linear 1s infinite;
    }
    #section2 .surabayanote {
        position: absolute;
        top: 82%;
        left: 0;
        right: 0;
        margin: 0 auto;
        background: #f9efa3;
        border-radius: 10px;
        width: 90%;
        font-size: 11px;
        padding: 12px 8px 8px 8px;
        color: #1e4b49;
        display: none;
        z-index: 17;
    }
    .surabayanote br {
        display: none;
    }
}

@media (min-width: 1440px) {
    #section2 .background-image {
        min-height: 830px;
    }
}


/* -------------------- END SECTION 2 ------------------------*/


/* --------------------- SECTION 3 : BANDUNG & PADANG ------------------- */

@media (min-width: 1280px) {
    #section3 .background-image {
        background-position: top center;
        background-repeat: no-repeat;
        background-size: cover;
        min-height: 719px;
    }
    #section3 .bubble-2 {
        position: absolute;
        top: 3%;
        right: 38%;
        background: url('../images/smartpedia/kota/miscelanous/bubble-2.png');
        width: 160px;
        height: 91px;
        padding: 7px 15px;
        text-align: center;
    }
    #section3 .bubble-3 {
        position: absolute;
        top: 53%;
        right: 44%;
        background: url('../images/smartpedia/kota/miscelanous/bubble-3.png');
        width: 182px;
        height: 82px;
        padding: 7px 15px;
        text-align: center;
    }
    #section3 .topkid {
        position: absolute;
        top: 5%;
        left: 44%;
        background: url('../images/smartpedia/kota/miscelanous/section\ 3\ -\ 1\ kids.png');
        width: 73px;
        height: 121px;
    }
    #section3 .car {
        position: absolute;
        top: 20%;
        left: 27%;
        background: url('../images/smartpedia/kota/miscelanous/section\ 3\ -\ 2\ \ car.png');
        width: 160px;
        height: 84px;
    }
    #section3 .bottomkid {
        position: absolute;
        top: 63%;
        right: 44%;
        background: url('../images/smartpedia/kota/miscelanous/section\ 3\ -\ 3\ kids.png');
        width: 78px;
        height: 122px;
    }
    #section3 .bandungicon {
        position: absolute;
        top: 8%;
        right: 24%;
        background: url('../images/smartpedia/kota/miscelanous/lupicon.png');
        background-size: cover;
        box-shadow: 3px 3px 5px rgba(0, 0, 0, .4);
        border-radius: 100%;
        width: 43px;
        height: 43px;
        z-index: 10;
        cursor: pointer;
        -webkit-animation: tada linear 1s infinite;
        animation: tada linear 1s infinite;
    }
    #section3 .bandungnote {
        position: absolute;
        top: 12%;
        right: 3%;
        background: #f9efa3;
        border-radius: 10px;
        width: 300px;
        font-size: 14px;
        padding: 24px 15px 15px 15px;
        color: #1e4b49;
        display: none;
    }
    #section3 .padangicon {
        position: absolute;
        top: 45%;
        left: 31%;
        background: url('../images/smartpedia/kota/miscelanous/lupicon.png');
        background-size: cover;
        box-shadow: 3px 3px 5px rgba(0, 0, 0, .4);
        border-radius: 100%;
        width: 43px;
        height: 43px;
        z-index: 10;
        cursor: pointer;
        -webkit-animation: tada linear 1s infinite;
        animation: tada linear 1s infinite;
    }
    #section3 .padangnote {
        position: absolute;
        top: 48%;
        left: 6%;
        background: #f9efa3;
        border-radius: 10px;
        width: 350px;
        font-size: 14px;
        padding: 24px 15px 15px 15px;
        color: #1e4b49;
        display: none;
    }
}

@media (max-width: 747px) {
    #section3 .background-image {
        min-height: 306px;
        background-size: cover;
        background-position: top center;
    }
    #section3 .bubble-2 {
        position: absolute;
        top: -10%;
        right: 8%;
        background: #fff;
        border-radius: 5px;
        font-size: 10px;
        line-height: 1.5em;
        padding: 5px;
    }
    #section3 .bubble-3 {
        position: absolute;
        top: 50%;
        right: 33%;
        font-size: 10px;
        background: #fff;
        line-height: 1.5em;
        padding: 5px;
        border-radius: 5px;
    }
    #section3 .topkid {
        position: absolute;
        top: 0;
        left: 49%;
        background: url('../images/smartpedia/kota/miscelanous/section\ 3\ -\ 1\ kids.png');
        background-size: cover;
        width: 38px;
        height: 62px;
    }
    #section3 .car {
        position: absolute;
        top: 18%;
        left: 12%;
        background: url('../images/smartpedia/kota/miscelanous/section\ 3\ -\ 2\ \ car.png');
        background-size: cover;
        width: 83px;
        height: 43px;
    }
    #section3 .bottomkid {
        position: absolute;
        top: 63%;
        right: 42%;
        background: url('../images/smartpedia/kota/miscelanous/section\ 3\ -\ 3\ kids.png');
        background-size: cover;
        width: 39px;
        height: 62px;
    }
    #section3 .bandungicon {
        position: absolute;
        top: 0%;
        right: 26%;
        background: url('../images/smartpedia/kota/miscelanous/lupicon.png');
        background-size: cover;
        box-shadow: 3px 3px 5px rgba(0, 0, 0, .4);
        border-radius: 100%;
        width: 24px;
        height: 24px;
        z-index: 16;
        cursor: pointer;
        -webkit-animation: tada linear 1s infinite;
        animation: tada linear 1s infinite;
    }
    #section3 .bandungnote {
        position: absolute;
        top: 6%;
        right: 0;
        left: 0;
        margin: 0 auto;
        background: #f9efa3;
        border-radius: 10px;
        width: 90%;
        font-size: 11px;
        padding: 12px 8px 8px 8px;
        color: #1e4b49;
        display: none;
        z-index: 15;
    }
    .bandungnote br {
        display: none;
    }
    #section3 .padangicon {
        position: absolute;
        top: 59%;
        left: 21%;
        background: url('../images/smartpedia/kota/miscelanous/lupicon.png');
        background-size: cover;
        box-shadow: 3px 3px 5px rgba(0, 0, 0, .4);
        border-radius: 100%;
        width: 24px;
        height: 24px;
        z-index: 14;
        cursor: pointer;
        -webkit-animation: tada linear 1s infinite;
        animation: tada linear 1s infinite;
    }
    #section3 .padangnote {
        position: absolute;
        top: 65%;
        left: 0;
        right: 0;
        background: #f9efa3;
        border-radius: 10px;
        width: 90%;
        margin: 0 auto;
        font-size: 11px;
        z-index: 13;
        display: none;
        padding: 12px 8px 8px 8px;
        color: #1e4b49;
    }
    .padangnote br {
        display: none;
    }
}

@media (min-width: 1440px) {
    #section3 .background-image {
        min-height: 789px;
    }
}


/* ---------------------- END SECTION 3 ----------------------- */


/* --------------------- SECTION 4 : PALEMBANG & PONTIANAK ------------------- */

@media (min-width: 1280px) {
    #section4 .background-image {
        background-position: top center;
        background-repeat: no-repeat;
        background-size: cover;
        min-height: 658px;
    }
    #section4 .topkid {
        position: absolute;
        top: 15%;
        left: 30%;
        background: url('../images/smartpedia/kota/miscelanous/section\ 4\ -\ 1\ kid.png');
        width: 102px;
        height: 144px;
    }
    #section4 .bubble-4 {
        position: absolute;
        top: 1%;
        right: 55%;
        background: url('../images/smartpedia/kota/miscelanous/bubble-4.png');
        width: 219px;
        height: 119px;
        padding: 10px 15px;
        text-align: center;
    }
    #section4 .bubble-pontianak {
        position: absolute;
        top: 68%;
        right: 30%;
        background: url('../images/smartpedia/kota/miscelanous/bubble-pontianak.png');
        width: 212px;
        height: 82px;
        padding: 10px 15px;
        text-align: center;
    }
    #section4 .car {
        position: absolute;
        top: 48%;
        left: 49%;
        background: url('../images/smartpedia/kota/miscelanous/section\ 4\ -\ 2\ car.png');
        width: 178px;
        height: 96px;
    }
    #section4 .bottomkid {
        position: absolute;
        top: 80%;
        right: 40%;
        background: url('../images/smartpedia/kota/miscelanous/section\ 4\ -\ 3\ kid\ rev.png');
        width: 68px;
        height: 94px;
    }
    #section4 .palembangicon {
        position: absolute;
        top: 23%;
        right: 33%;
        background: url('../images/smartpedia/kota/miscelanous/lupicon.png');
        background-size: cover;
        box-shadow: 3px 3px 5px rgba(0, 0, 0, .4);
        border-radius: 100%;
        width: 43px;
        height: 43px;
        z-index: 10;
        cursor: pointer;
        -webkit-animation: tada linear 1s infinite;
        animation: tada linear 1s infinite;
    }
    #section4 .palembangnote {
        position: absolute;
        top: 26%;
        right: 5%;
        background: #f9efa3;
        border-radius: 10px;
        width: 400px;
        font-size: 14px;
        padding: 24px 15px 15px 15px;
        color: #1e4b49;
        display: none;
    }
    #section4 .pontianakicon {
        position: absolute;
        top: 55%;
        left: 30%;
        background: url('../images/smartpedia/kota/miscelanous/lupicon.png');
        background-size: cover;
        box-shadow: 3px 3px 5px rgba(0, 0, 0, .4);
        border-radius: 100%;
        width: 43px;
        height: 43px;
        z-index: 10;
        cursor: pointer;
        -webkit-animation: tada linear 1s infinite;
        animation: tada linear 1s infinite;
    }
    #section4 .pontianaknote {
        position: absolute;
        top: 58%;
        left: 5%;
        background: #f9efa3;
        border-radius: 10px;
        width: 350px;
        font-size: 14px;
        padding: 24px 15px 15px 15px;
        color: #1e4b49;
        display: none;
    }
}

@media (max-width: 747px) {
    #section4 .background-image {
        min-height: 280px;
        background-size: cover;
        background-position: top center;
    }
    #section4 .topkid {
        position: absolute;
        top: 7%;
        left: 26%;
        background: url('../images/smartpedia/kota/miscelanous/section\ 4\ -\ 1\ kid.png');
        background-size: cover;
        width: 53px;
        height: 74px;
    }
    #section4 .bubble-4 {
        position: absolute;
        top: -10%;
        left: 5%;
        width: 50%;
        font-size: 10px;
        background: #fff;
        line-height: 1.5em;
        padding: 5px;
        border-radius: 5px;
        text-align: center;
    }
    #section4 .bubble-pontianak {
        position: absolute;
        top: 63%;
        right: 13%;
        width: 35%;
        font-size: 10px;
        background: #fff;
        line-height: 1.5em;
        padding: 5px;
        border-radius: 5px;
        text-align: center;
    }
    #section4 .car {
        position: absolute;
        top: 47%;
        left: 48%;
        background: url('../images/smartpedia/kota/miscelanous/section\ 4\ -\ 2\ car.png');
        background-size: cover;
        width: 80px;
        height: 42px;
    }
    #section4 .bottomkid {
        position: absolute;
        top: 80%;
        right: 38%;
        background: url('../images/smartpedia/kota/miscelanous/section\ 4\ -\ 3\ kid\ rev.png');
        background-size: cover;
        width: 29px;
        height: 41px;
    }
    #section4 .palembangicon {
        position: absolute;
        top: 7%;
        right: 21%;
        background: url('../images/smartpedia/kota/miscelanous/lupicon.png');
        background-size: cover;
        box-shadow: 3px 3px 5px rgba(0, 0, 0, .4);
        border-radius: 100%;
        width: 24px;
        height: 24px;
        z-index: 12;
        cursor: pointer;
        -webkit-animation: tada linear 1s infinite;
        animation: tada linear 1s infinite;
    }
    #section4 .palembangnote {
        position: absolute;
        top: 13%;
        left: 0;
        right: 0;
        margin: 0 auto;
        background: #f9efa3;
        border-radius: 10px;
        width: 90%;
        font-size: 11px;
        padding: 12px 8px 8px 8px;
        color: #1e4b49;
        display: none;
        z-index: 11;
    }
    .palembangnote br {
        display: none;
    }
    #section4 .pontianakicon {
        position: absolute;
        top: 50%;
        left: 23%;
        background: url('../images/smartpedia/kota/miscelanous/lupicon.png');
        background-size: cover;
        box-shadow: 3px 3px 5px rgba(0, 0, 0, .4);
        border-radius: 100%;
        width: 24px;
        height: 24px;
        z-index: 10;
        cursor: pointer;
        -webkit-animation: tada linear 1s infinite;
        animation: tada linear 1s infinite;
    }
    #section4 .pontianaknote {
        position: absolute;
        top: 55%;
        left: 0;
        right: 0;
        margin: 0 auto;
        background: #f9efa3;
        border-radius: 10px;
        width: 90%;
        font-size: 11px;
        padding: 12px 8px 8px 8px;
        color: #1e4b49;
        display: none;
        z-index: 9;
    }
    .pontianaknote br {
        display: none;
    }
}

@media (min-width: 1440px) {
    #section4 .background-image {
        min-height: 725px;
    }
}


/* ---------------------- END SECTION 4 ----------------------- */


/* ---------------------- SECTION 5 : ACEH KEDIRI ------------------*/

@media (min-width: 1280px) {
    #section5 .background-image {
        background-position: top center;
        background-repeat: no-repeat;
        background-size: cover;
        min-height: 792px;
    }
    #section5 .acehkid {
        position: absolute;
        top: 23%;
        right: 35%;
        background: url('../images/smartpedia/kota/miscelanous/section\ 5\ -\ kid\ aceh.png');
        width: 89px;
        height: 116px;
        z-index: 1;
    }
    #section5 .bubble-aceh {
        position: absolute;
        top: 12%;
        right: 36%;
        background: url('../images/smartpedia/kota/miscelanous/bubble-aceh.png');
        width: 247px;
        height: 100px;
        padding: 9px 15px;
        text-align: center;
    }
    #section5 .kid {
        position: absolute;
        top: 74%;
        right: 49%;
        background: url('../images/smartpedia/kota/miscelanous/section\ 5\ -\ kid.png');
        width: 55px;
        height: 112px;
        z-index: 1;
    }
    #section5 .bubble-5 {
        position: absolute;
        top: 67%;
        right: 51%;
        background: url('../images/smartpedia/kota/miscelanous/bubble-5.png');
        width: 226px;
        height: 102px;
        padding: 9px 15px;
        text-align: center;
    }
    #section5 .acehicon {
        position: absolute;
        top: 10%;
        left: 29%;
        background: url('../images/smartpedia/kota/miscelanous/lupicon.png');
        background-size: cover;
        box-shadow: 3px 3px 5px rgba(0, 0, 0, .4);
        border-radius: 100%;
        width: 43px;
        height: 43px;
        z-index: 10;
        cursor: pointer;
        -webkit-animation: tada linear 1s infinite;
        animation: tada linear 1s infinite;
    }
    #section5 .acehnote {
        position: absolute;
        top: 13%;
        left: 5%;
        background: #f9efa3;
        border-radius: 10px;
        width: 350px;
        font-size: 14px;
        padding: 24px 15px 15px 15px;
        color: #1e4b49;
        display: none;
    }
    #section5 .kediriicon {
        position: absolute;
        top: 43%;
        right: 26%;
        background: url('../images/smartpedia/kota/miscelanous/lupicon.png');
        background-size: cover;
        box-shadow: 3px 3px 5px rgba(0, 0, 0, .4);
        border-radius: 100%;
        width: 43px;
        height: 43px;
        z-index: 10;
        cursor: pointer;
        -webkit-animation: tada linear 1s infinite;
        animation: tada linear 1s infinite;
    }
    #section5 .kedirinote {
        position: absolute;
        top: 46%;
        right: 2%;
        background: #f9efa3;
        border-radius: 10px;
        width: 350px;
        font-size: 14px;
        padding: 24px 15px 15px 15px;
        color: #1e4b49;
        display: none;
    }
}

@media (max-width: 747px) {
    #section5 .background-image {
        min-height: 337px;
        background-size: cover;
        background-position: top center;
    }
    #section5 .acehkid {
        position: absolute;
        top: 33%;
        right: 28%;
        background: url('../images/smartpedia/kota/miscelanous/section\ 5\ -\ kid\ aceh.png');
        background-size: cover;
        width: 36px;
        height: 47px;
        z-index: 1;
    }
    #section5 .bubble-aceh {
        position: absolute;
        top: 13%;
        right: 4%;
        font-size: 10px;
        background: #fff;
        width: 40%;
        line-height: 1.5em;
        padding: 5px;
        border-radius: 5px;
        text-align: center;
    }
    #section5 .kid {
        position: absolute;
        top: 74%;
        right: 48%;
        background: url('../images/smartpedia/kota/miscelanous/section\ 5\ -\ kid.png');
        background-size: cover;
        width: 23px;
        height: 47px;
        z-index: 2;
    }
    #section5 .bubble-5 {
        position: absolute;
        top: 60%;
        right: 51%;
        width: 40%;
        font-size: 10px;
        background: #fff;
        line-height: 1.5em;
        padding: 5px;
        border-radius: 5px;
        text-align: center;
        z-index: 1;
    }
    #section5 .acehicon {
        position: absolute;
        top: 5%;
        left: 34%;
        background: url('../images/smartpedia/kota/miscelanous/lupicon.png');
        background-size: cover;
        box-shadow: 3px 3px 5px rgba(0, 0, 0, .4);
        border-radius: 100%;
        width: 24px;
        height: 24px;
        z-index: 8;
        cursor: pointer;
        -webkit-animation: tada linear 1s infinite;
        animation: tada linear 1s infinite;
    }
    #section5 .acehnote {
        position: absolute;
        top: 11%;
        left: 0;
        right: 0;
        margin: 0 auto;
        background: #f9efa3;
        border-radius: 10px;
        width: 90%;
        font-size: 11px;
        padding: 12px 8px 8px 8px;
        color: #1e4b49;
        display: none;
        z-index: 7;
    }
    #section5 .kediriicon {
        position: absolute;
        top: 55%;
        left: 60%;
        background: url('../images/smartpedia/kota/miscelanous/lupicon.png');
        background-size: cover;
        box-shadow: 3px 3px 5px rgba(0, 0, 0, .4);
        border-radius: 100%;
        width: 24px;
        height: 24px;
        z-index: 6;
        cursor: pointer;
        -webkit-animation: tada linear 1s infinite;
        animation: tada linear 1s infinite;
    }
    #section5 .kedirinote {
        position: absolute;
        top: 60%;
        left: 0;
        right: 0;
        margin: 0 auto;
        background: #f9efa3;
        border-radius: 10px;
        width: 90%;
        font-size: 11px;
        padding: 12px 8px 8px 8px;
        color: #1e4b49;
        display: none;
        z-index: 5;
    }
}

@media (min-width: 1440px) {
    #section5 .background-image {
        min-height: 872px;
    }
}


/* ---------------------- END SECTION 5 ----------------------- */


/* ---------------------- SECTION 6 : JOGJAKARTA & JAKARTA ------------------- */

@media (min-width: 1280px) {
    #section6 .background-image {
        background-position: top center;
        background-repeat: no-repeat;
        background-size: cover;
        min-height: 787px;
    }
    #section6 .kid {
        position: absolute;
        top: 20%;
        right: 43%;
        background: url('../images/smartpedia/kota/miscelanous/section\ 6\ -\ kid.png');
        width: 80px;
        height: 127px;
    }
    #section6 .car {
        position: absolute;
        top: 72%;
        right: 39%;
        background: url('../images/smartpedia/kota/miscelanous/section\ 6\ -\ 2\ car.png');
        width: 170px;
        height: 89px;
    }
    #section6 .bubble-6 {
        position: absolute;
        top: 7%;
        right: 32%;
        background: url('../images/smartpedia/kota/miscelanous/bubble-6.png');
        width: 180px;
        height: 111px;
        padding: 10px 15px;
        text-align: center;
    }
    #section6 .bubble-7 {
        position: absolute;
        top: 61%;
        right: 43%;
        background: url('../images/smartpedia/kota/miscelanous/bubble-7.png');
        width: 192px;
        height: 105px;
        padding: 10px 15px;
        text-align: center;
    }
    #section6 .jogjaicon {
        position: absolute;
        top: 8%;
        left: 23%;
        background: url('../images/smartpedia/kota/miscelanous/lupicon.png');
        background-size: cover;
        box-shadow: 3px 3px 5px rgba(0, 0, 0, .4);
        border-radius: 100%;
        width: 43px;
        height: 43px;
        z-index: 10;
        cursor: pointer;
        -webkit-animation: tada linear 1s infinite;
        animation: tada linear 1s infinite;
    }
    #section6 .jogjanote {
        position: absolute;
        top: 11%;
        left: 3%;
        background: #f9efa3;
        border-radius: 10px;
        width: 300px;
        font-size: 14px;
        padding: 24px 15px 15px 15px;
        color: #1e4b49;
        display: none;
    }
    #section6 .jakartaicon {
        position: absolute;
        top: 26%;
        right: 26%;
        background: url('../images/smartpedia/kota/miscelanous/lupicon.png');
        background-size: cover;
        box-shadow: 3px 3px 5px rgba(0, 0, 0, .4);
        border-radius: 100%;
        width: 43px;
        height: 43px;
        z-index: 10;
        cursor: pointer;
        -webkit-animation: tada linear 1s infinite;
        animation: tada linear 1s infinite;
    }
    #section6 .jakartanote {
        position: absolute;
        top: 29%;
        right: 3%;
        background: #f9efa3;
        border-radius: 10px;
        width: 325px;
        font-size: 14px;
        padding: 24px 15px 15px 15px;
        color: #1e4b49;
        display: none;
    }
}

@media (max-width: 747px) {
    #section6 {
        margin-bottom: 100px;
    }
    #section6 .background-image {
        min-height: 333px;
        background-size: cover;
        background-position: top center;
    }
    #section6 .kid {
        position: absolute;
        top: 20%;
        right: 36%;
        background: url('../images/smartpedia/kota/miscelanous/section\ 6\ -\ kid.png');
        background-size: cover;
        width: 31px;
        height: 50px;
    }
    #section6 .car {
        position: absolute;
        top: 72%;
        right: 39%;
        background: url('../images/smartpedia/kota/miscelanous/section\ 6\ -\ 2\ car.png');
        background-size: cover;
        width: 64px;
        height: 35px;
    }
    #section6 .bubble-6 {
        position: absolute;
        top: 7%;
        right: 24%;
        width: 40%;
        font-size: 10px;
        background: #fff;
        line-height: 1.5em;
        padding: 5px;
        border-radius: 5px;
        text-align: center;
        z-index: 1;
    }
    #section6 .bubble-7 {
        position: absolute;
        top: 59%;
        right: 36%;
        width: 40%;
        font-size: 10px;
        background: #fff;
        line-height: 1.5em;
        padding: 5px;
        border-radius: 5px;
        text-align: center;
        z-index: 1;
    }
    #section6 .jogjaicon {
        position: absolute;
        top: 1%;
        left: 23%;
        background: url('../images/smartpedia/kota/miscelanous/lupicon.png');
        background-size: cover;
        box-shadow: 3px 3px 5px rgba(0, 0, 0, .4);
        border-radius: 100%;
        width: 24px;
        height: 24px;
        z-index: 4;
        cursor: pointer;
        -webkit-animation: tada linear 1s infinite;
        animation: tada linear 1s infinite;
    }
    #section6 .jogjanote {
        position: absolute;
        top: 7%;
        left: 0;
        right: 0;
        margin: 0 auto;
        background: #f9efa3;
        border-radius: 10px;
        width: 90%;
        font-size: 11px;
        padding: 12px 8px 8px 8px;
        color: #1e4b49;
        display: none;
        z-index: 3;
    }
    #section6 .jakartaicon {
        position: absolute;
        top: 20%;
        right: 20%;
        background: url('../images/smartpedia/kota/miscelanous/lupicon.png');
        background-size: cover;
        box-shadow: 3px 3px 5px rgba(0, 0, 0, .4);
        border-radius: 100%;
        width: 24px;
        height: 24px;
        z-index: 2;
        cursor: pointer;
        -webkit-animation: tada linear 1s infinite;
        animation: tada linear 1s infinite;
    }
    #section6 .jakartanote {
        position: absolute;
        top: 24%;
        left: 0;
        right: 0;
        margin: 0 auto;
        background: #f9efa3;
        border-radius: 10px;
        width: 90%;
        font-size: 11px;
        padding: 12px 8px 8px 8px;
        color: #1e4b49;
        display: none;
        z-index: 1;
    }
}

@media (min-width: 1440px) {
    #section6 .background-image {
        min-height: 787px;
    }
}


/* ---------------------- END SECTION 6 ----------------------- */


/* Balloon Animation */

@-webkit-keyframes balloon {
    from {
        opacity: 0;
        -webkit-transform: translate3d(-50%, 0, 0);
        transform: translate3d(-50%, 0, 0);
    }
    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

@keyframes balloon {
    from {
        opacity: 0;
        -webkit-transform: translate3d(-50%, 0, 0);
        transform: translate3d(-50%, 0, 0);
    }
    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}


/* car from left to right animation */

@-webkit-keyframes carLeft {
    from {
        -webkit-transform: translate3d(100%, -15%, 0) skewX(-30deg);
        transform: translate3d(100%, -15%, 0) skewX(-30deg);
        opacity: 1;
    }
    60% {
        -webkit-transform: skewX(20deg);
        transform: skewX(20deg);
        opacity: 1;
    }
    80% {
        -webkit-transform: skewX(-5deg);
        transform: skewX(-5deg);
    }
    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

@keyframes carLeft {
    from {
        -webkit-transform: translate3d(100%, -15%, 0) skewX(-30deg);
        transform: translate3d(100%, -15%, 0) skewX(-30deg);
        opacity: 1;
    }
    60% {
        -webkit-transform: skewX(20deg);
        transform: skewX(20deg);
        opacity: 1;
    }
    80% {
        -webkit-transform: skewX(-5deg);
        transform: skewX(-5deg);
    }
    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

.carLeft {
    -webkit-animation-name: carLeft;
    animation-name: carLeft;
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
}


/* car from right to left animation */

@-webkit-keyframes carRight {
    from {
        -webkit-transform: translate3d(-100%, -15%, 0) skewX(30deg);
        transform: translate3d(-100%, -15%, 0) skewX(30deg);
        opacity: 1;
    }
    60% {
        -webkit-transform: skewX(-20deg);
        transform: skewX(-20deg);
        opacity: 1;
    }
    80% {
        -webkit-transform: skewX(5deg);
        transform: skewX(5deg);
    }
    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

@keyframes carRight {
    from {
        -webkit-transform: translate3d(-100%, -15%, 0) skewX(30deg);
        transform: translate3d(-100%, -15%, 0) skewX(30deg);
        opacity: 1;
    }
    60% {
        -webkit-transform: skewX(-20deg);
        transform: skewX(-20deg);
        opacity: 1;
    }
    80% {
        -webkit-transform: skewX(5deg);
        transform: skewX(5deg);
    }
    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

.carRight {
    -webkit-animation-name: carRight;
    animation-name: carRight;
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
}


/* Lightning Animation */

.flashit {
    -webkit-animation: flash ease-out 4s infinite;
    -moz-animation: flash ease-out 4s infinite;
    animation: flash ease-out 4s infinite;
    animation-duration: 4s;
    animation-delay: 0.5s;
}

@-webkit-keyframes flash {
    from {
        opacity: 0;
    }
    80% {
        opacity: 0;
    }
    81% {
        opacity: 1;
    }
    82% {
        opacity: 1;
    }
    83% {
        opacity: 0.8;
    }
    84% {
        opacity: 0.2;
    }
    85% {
        opacity: 0.6;
    }
    86% {
        opacity: 0.3;
    }
    87% {
        opacity: 0.7;
    }
    88% {
        opacity: 1;
    }
    89% {
        opacity: 1;
    }
    90% {
        opacity: 0;
    }
    91% {
        opacity: 1;
    }
    92% {
        opacity: 1;
    }
    93% {
        opacity: 0.8;
    }
    94% {
        opacity: 0.2;
    }
    95% {
        opacity: 0.6;
    }
    96% {
        opacity: 0.3;
    }
    97% {
        opacity: 0.7;
    }
    98% {
        opacity: 1;
    }
    99% {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

@keyframes flash {
    from {
        opacity: 0;
    }
    80% {
        opacity: 0;
    }
    81% {
        opacity: 1;
    }
    82% {
        opacity: 1;
    }
    83% {
        opacity: 0.8;
    }
    84% {
        opacity: 0.2;
    }
    85% {
        opacity: 0.6;
    }
    86% {
        opacity: 0.3;
    }
    87% {
        opacity: 0.7;
    }
    88% {
        opacity: 1;
    }
    89% {
        opacity: 1;
    }
    90% {
        opacity: 0;
    }
    91% {
        opacity: 1;
    }
    92% {
        opacity: 1;
    }
    93% {
        opacity: 0.8;
    }
    94% {
        opacity: 0.2;
    }
    95% {
        opacity: 0.6;
    }
    96% {
        opacity: 0.3;
    }
    97% {
        opacity: 0.7;
    }
    98% {
        opacity: 1;
    }
    99% {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}


/* Tada Animation */

@-webkit-keyframes tada {
    0% {
        -webkit-transform: scale3d(1, 1, 1);
        -ms-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
    10%,
    20% {
        -webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
        -ms-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
        transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
    }
    30%,
    50%,
    70%,
    90% {
        -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
        -ms-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
        transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
    }
    40%,
    60%,
    80% {
        -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
        -ms-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
        transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
    }
    100% {
        -webkit-transform: scale3d(1, 1, 1);
        -ms-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
}

@keyframes tada {
    0% {
        -webkit-transform: scale3d(1, 1, 1);
        -ms-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
    10%,
    20% {
        -webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
        -ms-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
        transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
    }
    30%,
    50%,
    70%,
    90% {
        -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
        -ms-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
        transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
    }
    40%,
    60%,
    80% {
        -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
        -ms-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
        transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
    }
    100% {
        -webkit-transform: scale3d(1, 1, 1);
        -ms-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
}

@-webkit-keyframes heartBeat {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
    14% {
        -webkit-transform: scale(1.3);
        transform: scale(1.3);
    }
    28% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
    42% {
        -webkit-transform: scale(1.3);
        transform: scale(1.3);
    }
    70% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

@keyframes heartBeat {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
    14% {
        -webkit-transform: scale(1.3);
        transform: scale(1.3);
    }
    28% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
    42% {
        -webkit-transform: scale(1.3);
        transform: scale(1.3);
    }
    70% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

.heartBeat {
    -webkit-animation-name: heartBeat;
    animation-name: heartBeat;
    -webkit-animation-duration: 1.3s;
    animation-duration: 1.3s;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
}