@font-face {
    font-family: "Doremi";
    src: url('../font/app.ttf');
}

#btn-popup {
    position: fixed;
    right: 0;
    bottom: 20vh;
    width: 10vw;
    height: 20vh;
    background: url("../img/btn-popup.png") right no-repeat;
    background-size: contain;
    cursor: pointer;
    z-index: 9998;
}

#popup {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100vw;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.8);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
}

#popup > img {
    width: auto;
    height: auto;
    max-width: 80%;
    max-height: 100%;
    display: block;
    margin: auto;
    cursor: pointer;
}
* {
    font-family: 'Doremi';
}

body {
    box-sizing: border-box;
    padding: 0;
    margin: 0;  
    height: 100%;
}

#background {
    width: 100%;
    object-fit: cover !important;
    height: auto;
}

#logo {
    position: absolute;
    left: 5%;
    top: 5%;
    width: 300px;
}

#about-logo {
    position: absolute;
    top: 20%;
    right: 15%;
    width: 300px;
}

.menu {
    position: absolute;
    right: 10%;
    top: 30px;
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(4, 25%);
}

.menu .menu-item a {
    text-decoration: none;
    height: 40px;
    display: block;
    cursor: pointer;
    color: #fff;
    font-size: 20px;
    text-align: center;
    line-height: 40px;
    padding-left: 20px;
    padding-right: 20px;
}
.menu .menu-item a.active {
    background-color: #fff;
    border-radius: 16px;
    color: gray;
}
#lest-learn {
    position: absolute;
    top: 20vh;
    width: 60%;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
}

#top-schedule {
    position: absolute;
    background: url('../img/top-schedule.png') center center no-repeat;
    background-size: contain;
    width: 800px;
    height: 600px;
    top: 30vh;
    width: 60%;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
}

.top-owl-carousel.owl-carousel {
    width: 80%;
    height: 60%;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto auto;
}

#btn-top-schedule-left {
    position: absolute;
    left: -10%;
    top: 0;
    bottom: 0;
    margin-top: auto;
    margin-bottom: auto;
    cursor: pointer;
}

#btn-top-schedule-right {
    position: absolute;
    right: -10%;
    top: 0;
    bottom: 0;
    margin-top: auto;
    margin-bottom: auto;
    cursor: pointer;
}

#btn-buy-workshop {
    position: absolute;
    top: calc(30vh + 600px);
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    cursor: pointer;
}


#family-schedule {
    position: absolute;
    background: url('../img/family-schedule.png') center center no-repeat;
    background-size: contain;
    width: 800px;
    height: 600px;
    top: calc(50vh + 600px);
    width: 60%;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
}

#btn-buy-workshop-family {
    position: absolute;
    top: calc(50vh + 1200px);
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    cursor: pointer;
}

#workshop-stall {
    position: absolute;
    top: calc(90vh + 1800px);
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    width: 80vw;
    height: 100vh;
    background: url('../img/workshop-stall.png') center center no-repeat;
    background-size: contain;
}

#workshop-title {
    position: absolute;
    top: -5%;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
}

#btn-workshop-left {
    position: absolute;
    left: -20px;
    bottom: 0;
    top: 0;
    margin-bottom: auto;
    margin-top: auto;
    cursor: pointer;
}
#btn-workshop-right {
    position: absolute;
    right: -20px;
    bottom: 0;
    top: 0;
    margin-bottom: auto;
    margin-top: auto;
    cursor: pointer;
}

#workshop-stall .gallery {
    width: 70%;
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top: 140px;
}
.stall-box {
    width: 250px;
    height: 500px;
    cursor: pointer;
}

.stall-box.berkebun{
    background: url('../img/box-berkebun.png') center center no-repeat;
    background-size: contain;
}
.stall-box.hujan{
    background: url('../img/box-hujan-angin.png') center center no-repeat;
    background-size: contain;
}
.stall-box.kincir{
    background: url('../img/box-kincir.png') center center no-repeat;
    background-size: contain;
}

.stall-box.box-maracas{
    background: url('../img/box-maracas.png') center center no-repeat;
    background-size: contain;
}
#footer {
    position: relative;
    width: 100%;
    background-color: #fff;
    height: 120px;
}

#footer .cloud {
    position: absolute;
    width: 100%;
    top: -140px;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: -220px;
}

#footer .grid {
    position: absolute;
    top: 40%;
    display: grid;
    grid-template-columns: 20% 30% 20% 20%;
    justify-content: center;
    /* align-items: center; */
    gap: 30px;
    width: 100%;
}

.footer-logo {
    margin-top: 10%;
    width: 300px;
}

.doremi {
    position: absolute;
    top: 25%;
    left: 0;
    width: 100%;
    height: 300px;
}
.doremi .dodo,.rere,.mimi {
    position: absolute;
}
.dodo {
    left: 5%;
}

.rere {
    top: 8%;
    left: 21%;
}
.mimi {
    left: 35%;
    top: 25%;
}
.island {
    position: absolute;
    right: 0;
    top: 33%;
}

.doremi-cloud {
    position: absolute;
    top: 100%;
    left: 5%;
}

.island-cloud {
    position: absolute;
    right: 0;
    top: 130%;
}

.butterfly {
    position: absolute;
    right: 30%;
    top: 155%;
}
.doremi-enter {
    position: absolute;
    width: 120px;
    top: 160%;
    right: 15%;
    cursor: pointer;
}
.doremi-subtitle {
    position: absolute;
    top: 185%;
    left: 5%;
}
.doremi .bring-magic {
    position: absolute;
    top: 160%;
    left: 5%;
    width: 800px;
}

#program-title {
    position: absolute;
    left: 0;
    right: 0;
    width: 300px;
    margin-left: auto;
    margin-right: auto;
    top: 108vh;
}
#piano {
    position: absolute;
    top: 135vh;
    left: 0;
    width: 240px;
}
#piano-cloud {
    position: absolute;
    top: 160vh;
    left: 0;
    width: 500px;
}
#drum {
    position: absolute;
    top: 132vh;
    left: 22%;
    width: 240px;
}
#home {
    position: absolute;
    top: 132vh;
    left: 63%;   
    width: 240px;
}
#drum-title{
    position: absolute;
    top: 164vh;
    left: 20%;
    width: 280px;
    height: 120px;
    cursor: pointer;
}
#home-title {
    position: absolute;
    top: 164vh;
    left: 62%;   
    width: 280px;
    height: 120px;
    cursor: pointer;
}
#dodo-konduktor {
    position: absolute;
    top: 105vh;
    width: 280px;
    right: 0;
}
#dodo-konduktor-cloud {
    position: absolute;
    top: 148vh;
    width: 280px;
    right: 0;
}

#about-title {
    position: absolute;
    top: 210vh;
    left: 0;
    right: 0;
    width: 300px;
    margin-left: auto;
    margin-right: auto;
}
#about-rere {
    position: absolute;
    top: 220vh;
    left: 0;
    width: 400px;
}

#about-mimi {
    position: absolute;
    top: 220vh;
    right: 0;
    width: 300px;
}
#about-media {
    position: absolute;
    top: 222vh;
    left: 0;
    right: 0;
    width: 600px;
    height: 400px;
    margin-left: auto;
    margin-right: auto;
    background: url('../img/media\ .png') center center no-repeat;
    background-size: contain;
}
#about-taman {
    position: absolute;
    top: 272vh;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    width: 800px;
}

#store-stall {
    position: absolute;
    top: calc(90vh + 1800px);
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    height: 100vh;
    background: url('../img/workshop-stall.png') center center no-repeat;
    background-size: contain;
}

#store-title {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    width: 400px;
}

#btn-store-left {
    position: absolute;
    left: 30px;
    bottom: 0;
    top: 0;
    margin-bottom: auto;
    margin-top: auto;
    cursor: pointer;
    width: 80px;
    z-index: 999;
}
#btn-store-right {
    position: absolute;
    right: 30px;
    bottom: 0;
    top: 0;
    margin-bottom: auto;
    margin-top: auto;
    cursor: pointer;
    width: 80px;
    z-index: 999;
}

#store-stall .gallery {
    width: 60%;
    margin-top: 150px;
    margin-left: auto;
    margin-right: auto;
}
#store-stall .tamborine {
    position: absolute;
    left: 0;
    bottom: -10%;
    width: 280px;
}
#store-stall .maracas {
    position: absolute;
    left: 8%;
    bottom: 20%;
    width: 140px;
}
#store-stall .gendang {
    position: absolute;
    right: 0;
    bottom: -10%;
    width: 280px;
}
#store-stall .gitar {
    position: absolute;
    right: 5%;
    bottom: -10%;
    width: 280px;
    z-index: 9;
}
#store-stall .see-more {
    position: absolute;
    bottom: 20%;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    width: 240px;
}

@media screen and (width: 1024px) and (height: 728px) {
    #top-schedule {
        top: 20vh;
    }
    #btn-buy-workshop {
        top: calc(46vh + 300px);
    }
    #btn-buy-workshop-family {
        top: calc(110vh + 300px);
    }
    #family-schedule {
        top: calc(42vh + 300px);
    }
    #workshop-stall {
        top: calc(100vh + 1024px);
    }
    .about-logo {
        right: 5%;
        width: 200px;
    }
    .doremi {
        position: absolute;
        top: 15%;
        left: 0;
        width: 100%;
        height: 300px;
    }
    .doremi .dodo,.rere,.mimi {
        position: absolute;
        width: 200px;
    }
    .island {
        position: absolute;
        right: 0;
        top: 45%;
        width: 360px;
    }
    
    .doremi-cloud {
        position: absolute;
        top: 80%;
        width: 300px;
        left: 5%;
    }
    
    .island-cloud {
        position: absolute;
        right: 0;
        top: 100%;
        width: 400px;
    }
    
    .butterfly {
        position: absolute;
        right: 30%;
        top: 120%;
        width: 50px;
    }

    .doremi-enter {
        position: absolute;
        width: 120px;
        top: 115%;
        right: 13%;
        cursor: pointer;
        width: 100px;
    }
    .doremi-subtitle {
        position: absolute;
        top: 150%;
        left: 5%;
        width: 600px;
    }
    .doremi .bring-magic {
        position: absolute;
        top: 130%;
        left: 5%;
        width: 600px;
    }

    #program-title {
        top: 85vh;
        width: 240px;
    }
    #piano {
        position: absolute;
        top: 100vh;
        left: 0;
        width: 140px;
    }
    #piano-cloud {
        position: absolute;
        top: 120vh;
        left: 0;
        width: 300px;
    }
    #drum {
        position: absolute;
        top: 100vh;
        left: 22%;
        width: 180px;
    }
    #home {
        position: absolute;
        top: 100vh;
        left: 62%;   
        width: 180px;
    }
    #drum-title{
        position: absolute;
        top: 128vh;
        left: 20%;
        width: 210px;
        height: 100px;
    }
    #home-title {
        position: absolute;
        top: 128vh;
        left: 60%;   
        width: 210px;
        height: 100px;
    }
    #dodo-konduktor {
        position: absolute;
        top: 80vh;
        width: 180px;
        right: 0;
    }
    #dodo-konduktor-cloud {
        position: absolute;
        top: 110vh;
        width: 210px;
        right: 0;
    }

    #about-title {
        position: absolute;
        top: 170vh;
        left: 0;
        right: 0;
        width: 240px;
        margin-left: auto;
        margin-right: auto;
    }
    #about-rere {
        position: absolute;
        top: 180vh;
        left: 0;
        width: 240px;
    }

    #about-mimi {
        position: absolute;
        top: 180vh;
        right: 0;
        width: 220px;
    }
    #about-media {
        position: absolute;
        top: 175vh;
        left: 0;
        right: 0;
        width: 480px;
        height: 400px;
        margin-left: auto;
        margin-right: auto;
        background: url('../img/media\ .png') center center no-repeat;
        background-size: contain;
    }
    #about-taman {
        position: absolute;
        top: 220vh;
        left: 0;
        right: 0;
        margin-left: auto;
        margin-right: auto;
        width: 800px;
    }

    #store-stall {
        position: absolute;
        top: 240vh;
        left: 0;
        right: 0;
        margin-left: auto;
        margin-right: auto;
        width: 80%;
        height: 100vh;
        background: url('../img/workshop-stall.png') center center no-repeat;
        background-size: contain;
    }

    #store-title {
        position: absolute;
        top: 10%;
        left: 0;
        right: 0;
        margin-left: auto;
        margin-right: auto;
        width: 230px;
    }

    #btn-store-left {
        position: absolute;
        left: -5%;
        bottom: 0;
        top: 0;
        margin-bottom: auto;
        margin-top: auto;
        cursor: pointer;
        width: 80px;
    }
    #btn-store-right {
        position: absolute;
        right: -5%;
        bottom: 0;
        top: 0;
        margin-bottom: auto;
        margin-top: auto;
        cursor: pointer;
        width: 80px;
    }

    #store-stall .gallery {
        display: flex;
        flex-direction: row;
        height: 100%;
        width: 100%;
        align-items: center;
        justify-content: center;
        gap: 30px;
    }
    #store-stall .tamborine {
        position: absolute;
        left: -10%;
        bottom:0;
        width: 210px;
    }
    #store-stall .maracas {
        position: absolute;
        left: -10%;
        bottom: 20%;
        width: 140px;
    }
    #store-stall .gendang {
        position: absolute;
        right: -13%;
        bottom: -10%;
        width: 210px;
    }
    #store-stall .gitar {
        position: absolute;
        right: -10%;
        bottom: -10%;
        width: 210px;
    }
    #store-stall .see-more {
        position: absolute;
        bottom: 22%;
        left: 0;
        right: 0;
        margin-left: auto;
        margin-right: auto;
        width: 210px;
    }

    .stall-box {
        width: 200px;
        height: 300px;
    }
    #store-stall .gallery {
        width: 80%;
        margin-top: 30px;
        margin-left: auto;
        margin-right: auto;
    }

    #workshop-stall .gallery {
        width: 80%;
        margin-top: 230px;
        margin-left: auto;
        margin-right: auto;
    }
}

@media screen and (width: 1280px) and (height: 720px) {
    #top-schedule {
        top: 23vh;
    }
    #btn-buy-workshop {
        top: calc(55vh + 300px);
    }

    #btn-buy-workshop-family {
        top: calc(135vh + 300px);
    }
    #family-schedule {
        top: calc(60vh + 300px);
    }
    #workshop-stall {
        top: calc(165vh + 1024px);
    }

    #workshop-stall .gallery {
        width: 80%;
        margin-top: 250px;
        margin-left: auto;
        margin-right: auto;
        padding-left: 50px;
    }

    .about-logo {
        right: 5%;
        width: 200px;
    }
    .doremi {
        position: absolute;
        top: 25%;
        left: 0;
        width: 100%;
        height: 300px;
    }
    .doremi .dodo,.rere,.mimi {
        position: absolute;
        width: 200px;
    }
    .island {
        position: absolute;
        right: 0;
        top: 50%;
        width: 360px;
    }
    
    .doremi-cloud {
        position: absolute;
        top: 85%;
        width: 300px;
        left: 5%;
    }
    
    .island-cloud {
        position: absolute;
        right: 0;
        top: 105%;
        width: 400px;
    }
    
    .butterfly {
        position: absolute;
        right: 30%;
        top: 125%;
        width: 50px;
    }

    .doremi-enter {
        position: absolute;
        width: 120px;
        top: 120%;
        right: 13%;
        cursor: pointer;
        width: 100px;
    }
    .doremi-subtitle {
        position: absolute;
        top: 150%;
        left: 5%;
        width: 600px;
    }
    .doremi .bring-magic {
        position: absolute;
        top: 130%;
        left: 5%;
        width: 600px;
    }

    #program-title {
        top: 110vh;
        width: 240px;
    }
    #piano {
        position: absolute;
        top: 135vh;
        left: 0;
        width: 140px;
    }
    #piano-cloud {
        position: absolute;
        top: 155vh;
        left: 0;
        width: 300px;
    }
    #drum {
        position: absolute;
        top: 130vh;
        left: 22%;
        width: 180px;
    }
    #home {
        position: absolute;
        top: 130vh;
        left: 62%;   
        width: 180px;
    }
    #drum-title{
        position: absolute;
        top: 158vh;
        left: 20%;
        width: 210px;
        height: 100px;
    }
    #home-title {
        position: absolute;
        top: 158vh;
        left: 60%;   
        width: 210px;
        height: 100px;
    }
    #dodo-konduktor {
        position: absolute;
        top: 110vh;
        width: 180px;
        right: 0;
    }
    #dodo-konduktor-cloud {
        position: absolute;
        top: 140vh;
        width: 210px;
        right: 0;
    }

    #about-title {
        position: absolute;
        top: 200vh;
        left: 0;
        right: 0;
        width: 240px;
        margin-left: auto;
        margin-right: auto;
    }
    #about-rere {
        position: absolute;
        top: 220vh;
        left: 0;
        width: 240px;
    }

    #about-mimi {
        position: absolute;
        top: 220vh;
        right: 0;
        width: 220px;
    }
    #about-media {
        position: absolute;
        top: 215vh;
        left: 0;
        right: 0;
        width: 480px;
        height: 400px;
        margin-left: auto;
        margin-right: auto;
        background: url('../img/media\ .png') center center no-repeat;
        background-size: contain;
    }
    #about-taman {
        position: absolute;
        top: 265vh;
        left: 0;
        right: 0;
        margin-left: auto;
        margin-right: auto;
        width: 800px;
    }

    #store-stall {
        position: absolute;
        top: 315vh;
        left: 0;
        right: 0;
        margin-left: auto;
        margin-right: auto;
        width: 80%;
        height: 100vh;
        background: url('../img/workshop-stall.png') center center no-repeat;
        background-size: contain;
    }

    #store-title {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        margin-left: auto;
        margin-right: auto;
        width: 230px;
    }

    #btn-store-left {
        position: absolute;
        left: -5%;
        bottom: 0;
        top: 0;
        margin-bottom: auto;
        margin-top: auto;
        cursor: pointer;
        width: 80px;
    }
    #btn-store-right {
        position: absolute;
        right: -5%;
        bottom: 0;
        top: 0;
        margin-bottom: auto;
        margin-top: auto;
        cursor: pointer;
        width: 80px;
    }

    #store-stall .gallery {
        display: flex;
        flex-direction: row;
        height: 100%;
        width: 100%;
        align-items: center;
        justify-content: center;
        gap: 30px;
    }
    #store-stall .tamborine {
        position: absolute;
        left: -10%;
        bottom:0;
        width: 210px;
    }
    #store-stall .maracas {
        position: absolute;
        left: -10%;
        bottom: 20%;
        width: 140px;
    }
    #store-stall .gendang {
        position: absolute;
        right: -10%;
        bottom: -10%;
        width: 210px;
    }
    #store-stall .gitar {
        position: absolute;
        right: -10%;
        bottom: -10%;
        width: 210px;
    }
    #store-stall .see-more {
        position: absolute;
        bottom: 22%;
        left: 0;
        right: 0;
        margin-left: auto;
        margin-right: auto;
        width: 210px;
    }
    .stall-box {
        width: 200px;
        height: 300px;
    }
    #store-stall .gallery {
        width: 75%;
        margin-top: 20px;
        margin-left: auto;
        margin-right: auto;
    }
    #workshop-stall .gallery {
        width: 80%;
        margin-top: 230px;
        margin-left: auto;
        margin-right: auto;
    }
}

@media screen and (width: 1280px) and (height: 1024px) {
    #top-schedule {
        top: 30vh;
    }
    #btn-buy-workshop {
        top: calc(55vh + 300px);
    }
    #btn-buy-workshop-family {
        top: calc(112vh + 300px);
    }
    #family-schedule {
        top: calc(57vh + 300px);
    }

    #workshop-stall {
        top: calc(100vh + 1024px);
    }

    #workshop-title {
        top: 12%;
    }

    .about-logo {
        right: 5%;
        width: 200px;
    }
    .doremi {
        position: absolute;
        top: 15%;
        left: 0;
        width: 100%;
        height: 300px;
    }
    .doremi .dodo,.rere,.mimi {
        position: absolute;
        width: 200px;
    }
    .island {
        position: absolute;
        right: 0;
        top: 50%;
        width: 360px;
    }
    
    .doremi-cloud {
        position: absolute;
        top: 85%;
        width: 300px;
        left: 5%;
    }
    
    .island-cloud {
        position: absolute;
        right: 0;
        top: 105%;
        width: 400px;
    }
    
    .butterfly {
        position: absolute;
        right: 30%;
        top: 125%;
        width: 50px;
    }

    .doremi-enter {
        position: absolute;
        width: 120px;
        top: 120%;
        right: 13%;
        cursor: pointer;
        width: 100px;
    }
    .doremi-subtitle {
        position: absolute;
        top: 150%;
        left: 5%;
        width: 600px;
    }
    .doremi .bring-magic {
        position: absolute;
        top: 130%;
        left: 5%;
        width: 600px;
    }

    #program-title {
        top: 70vh;
        width: 240px;
    }
    #piano {
        position: absolute;
        top: 95vh;
        left: 0;
        width: 140px;
    }
    #piano-cloud {
        position: absolute;
        top: 110vh;
        left: 0;
        width: 300px;
    }
    #drum {
        position: absolute;
        top: 95vh;
        left: 22%;
        width: 180px;
    }
    #home {
        position: absolute;
        top: 95vh;
        left: 62%;   
        width: 180px;
    }
    #drum-title{
        position: absolute;
        top: 115vh;
        left: 20%;
        width: 210px;
        height: 100px;
    }
    #home-title {
        position: absolute;
        top: 115vh;
        left: 60%;   
        width: 210px;
        height: 100px;
    }
    #dodo-konduktor {
        position: absolute;
        top: 80vh;
        width: 180px;
        right: 0;
    }
    #dodo-konduktor-cloud {
        position: absolute;
        top: 100vh;
        width: 210px;
        right: 0;
    }

    #about-title {
        position: absolute;
        top: 140vh;
        left: 0;
        right: 0;
        width: 240px;
        margin-left: auto;
        margin-right: auto;
    }
    #about-rere {
        position: absolute;
        top: 160vh;
        left: 0;
        width: 240px;
    }

    #about-mimi {
        position: absolute;
        top: 160vh;
        right: 0;
        width: 220px;
    }
    #about-media {
        position: absolute;
        top: 155vh;
        left: 0;
        right: 0;
        width: 600px;
        height: 400px;
        margin-left: auto;
        margin-right: auto;
        background: url('../img/media\ .png') center center no-repeat;
        background-size: contain;
    }
    #about-taman {
        position: absolute;
        top: 195vh;
        left: 0;
        right: 0;
        margin-left: auto;
        margin-right: auto;
        width: 800px;
    }

    #store-stall {
        position: absolute;
        top: 200vh;
        left: 0;
        right: 0;
        margin-left: auto;
        margin-right: auto;
        width: 80%;
        height: 100vh;
        background: url('../img/workshop-stall.png') center center no-repeat;
        background-size: contain;
    }

    #store-title {
        position: absolute;
        top: 15%;
        left: 0;
        right: 0;
        margin-left: auto;
        margin-right: auto;
        width: 230px;
    }

    #btn-store-left {
        position: absolute;
        left: -5%;
        bottom: 0;
        top: 0;
        margin-bottom: auto;
        margin-top: auto;
        cursor: pointer;
        width: 80px;
    }
    #btn-store-right {
        position: absolute;
        right: -5%;
        bottom: 0;
        top: 0;
        margin-bottom: auto;
        margin-top: auto;
        cursor: pointer;
        width: 80px;
    }

    #store-stall .gallery {
        display: flex;
        flex-direction: row;
        height: 100%;
        width: 100%;
        align-items: center;
        justify-content: center;
        gap: 30px;
    }
    #store-stall .tamborine {
        position: absolute;
        left: -10%;
        bottom:0;
        width: 210px;
    }
    #store-stall .maracas {
        position: absolute;
        left: -10%;
        bottom: 20%;
        width: 140px;
    }
    #store-stall .gendang {
        position: absolute;
        right: -12%;
        bottom: -10%;
        width: 210px;
    }
    #store-stall .gitar {
        position: absolute;
        right: -10%;
        bottom: -10%;
        width: 210px;
    }
    #store-stall .see-more {
        position: absolute;
        bottom: 22%;
        left: 0;
        right: 0;
        margin-left: auto;
        margin-right: auto;
        width: 210px;
    }
    .stall-box {
        width: 200px;
        height: 300px;
    }
    #store-stall .gallery {
        width: 75%;
        margin-top: 50px;
        margin-left: auto;
        margin-right: auto;
    }
    #workshop-stall .gallery {
        width: 80%;
        margin-top: 380px;
        padding-left: 50px;
        margin-left: auto;
        margin-right: auto;
    }
}

@media screen and (width: 1920px) and (height: 1080px) {
    #top-schedule {
        top: 37vh;
    }
    #btn-buy-workshop {
        top: calc(70vh + 300px);
    }

    #btn-buy-workshop-family {
        top: calc(160vh + 300px);
    }
    #family-schedule {
        top: calc(100vh + 300px);
    }

    #workshop-stall {
        top: calc(215vh + 1024px);
    }

    #workshop-title {
        top: 0;
    }
    
    #about-logo {
        right: 10%;
        width: 500px;
    }
    .doremi {
        position: absolute;
        top: 20%;
        left: 0;
    }
    .doremi .dodo,.rere,.mimi {
        position: absolute;
        width: 400px;
    }
    .dodo {
        left: 2%;
        top: -15%;
    }
    
    .rere {
        top: 0;
        left: 20%;
    }
    .mimi {
        left: 34%;
        top: 22%;
        width: 480px;
    }
    .island {
        position: absolute;
        right: 0;
        top: 50%;
        width: 800px;
    }
    
    .doremi-cloud {
        position: absolute;
        top: 138%;
        width: 500px;
        left: 10%;
    }
    
    .island-cloud {
        position: absolute;
        right: 0;
        top: 170%;
        width: 700px;
    }
    
    .butterfly {
        position: absolute;
        right: 30%;
        top: 205%;
        width: 80px;
    }

    .doremi-enter {
        position: absolute;
        width: 150px;
        top: 215%;
        right: 10%;
        cursor: pointer;
        width: 300px;
    }
    .doremi-subtitle {
        position: absolute;
        top: 250%;
        left: 5%;
        width: 60%;
    }
    .doremi .bring-magic {
        position: absolute;
        top: 210%;
        left: 5%;
        width: 60%;
    }

    #program-title {
        top: 110vh;
        width: 400px;
    }
    #piano {
        position: absolute;
        top: 130vh;
        left: 0;
        width: 300px;
    }
    #piano-cloud {
        position: absolute;
        top: 155vh;
        left: 0;
        width: 300px;
    }
    #drum {
        position: absolute;
        top: 130vh;
        left: 22%;
        width: 300px;
    }
    #home {
        position: absolute;
        top: 130vh;
        left: 62%;   
        width: 300px;
    }
    #drum-title{
        position: absolute;
        top: 163vh;
        left: 22%;
        width: 300px;
        height: 100px;
    }
    #home-title {
        position: absolute;
        top: 163vh;
        left: 62%;   
        width: 300px;
        height: 100px;
    }
    #dodo-konduktor {
        position: absolute;
        top: 100vh;
        width: 380px;
        right: 0;
    }
    #dodo-konduktor-cloud {
        position: absolute;
        top: 145vh;
        width: 300px;
        right: 0;
    }

    #about-title {
        position: absolute;
        top: 210vh;
        left: 0;
        right: 0;
        width: 400px;
        margin-left: auto;
        margin-right: auto;
    }
    #about-rere {
        position: absolute;
        top: 230vh;
        left: 0;
        width: 300px;
    }

    #about-mimi {
        position: absolute;
        top: 230vh;
        right: 0;
        width: 300px;
    }
    #about-media {
        position: absolute;
        top: 222vh;
        left: 0;
        right: 0;
        width: 900px;
        height: 600px;
        margin-left: auto;
        margin-right: auto;
        background: url('../img/media\ .png') center center no-repeat;
        background-size: contain;
    }
    #about-taman {
        position: absolute;
        top: 280vh;
        left: 0;
        right: 0;
        margin-left: auto;
        margin-right: auto;
        width: 900px;
    }

    #store-stall {
        position: absolute;
        top: 315vh;
        left: 0;
        right: 0;
        margin-left: auto;
        margin-right: auto;
        width: 80%;
        height: 100vh;
        background: url('../img/workshop-stall.png') center center no-repeat;
        background-size: contain;
    }

    #store-title {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        margin-left: auto;
        margin-right: auto;
        width: 400px;
    }

    #btn-store-left {
        position: absolute;
        left: -5%;
        bottom: 0;
        top: 0;
        margin-bottom: auto;
        margin-top: auto;
        cursor: pointer;
        width: 80px;
    }
    #btn-store-right {
        position: absolute;
        right: -5%;
        bottom: 0;
        top: 0;
        margin-bottom: auto;
        margin-top: auto;
        cursor: pointer;
        width: 80px;
    }

    #store-stall .gallery {
        display: flex;
        flex-direction: row;
        height: 100%;
        width: 100%;
        align-items: center;
        justify-content: center;
        gap: 30px;
    }
    #store-stall .tamborine {
        position: absolute;
        left: -12%;
        bottom:0;
        width: 310px;
    }
    #store-stall .maracas {
        position: absolute;
        left: -10%;
        bottom: 20%;
        width: 240px;
    }
    #store-stall .gendang {
        position: absolute;
        right: -12%;
        bottom: -10%;
        width: 310px;
    }
    #store-stall .gitar {
        position: absolute;
        right: -8%;
        bottom: -10%;
        width: 310px;
    }
    #store-stall .see-more {
        position: absolute;
        bottom: 22%;
        left: 0;
        right: 0;
        margin-left: auto;
        margin-right: auto;
        width: 210px;
    }
    .stall-box {
        width: 350px;
        height: 500px;
    }
    #store-stall .gallery {
        width: 80%;
        margin-top: 60px;
        margin-left: auto;
        margin-right: auto;
    }

    #workshop-stall .gallery {
        width: 80%;
        margin-top: 300px;
        margin-left: auto;
        margin-right: auto;
    }
}

@media screen and (width: 1600px) and (height: 900px) {
    #top-schedule {
        top: 35vh;
    }
    #btn-buy-workshop {
        top: calc(68vh + 300px);
    }

    #btn-buy-workshop-family {
        top: calc(30vh + 300px);
    }
    #family-schedule {
        top: calc(85vh + 300px);
    }

    #workshop-stall {
        top: calc(200vh + 1024px);
    }

    #workshop-title {
        top: 0;
    }
    
    .about-logo {
        right: 5%;
    }
    .doremi {
        position: absolute;
        top: 20%;
        left: 0;
    }
    .doremi .dodo,.rere,.mimi {
        position: absolute;
        width: 300px;
    }
    .dodo {
        left: 3%;
    }
    
    .rere {
        top: 18%;
        left: 21%;
    }
    .mimi {
        left: 35%;
        top: 45%;
    }
    .island {
        position: absolute;
        right: 0;
        top: 50%;
        width: 600px;
    }
    
    .doremi-cloud {
        position: absolute;
        top: 125%;
        width: 500px;
        left: 5%;
    }
    
    .island-cloud {
        position: absolute;
        right: 0;
        top: 145%;
        width: 600px;
    }
    
    .butterfly {
        position: absolute;
        right: 30%;
        top: 180%;
        width: 50px;
    }

    .doremi-enter {
        position: absolute;
        width: 150px;
        top: 170%;
        right: 15%;
        cursor: pointer;
        width: 100px;
    }
    .doremi-subtitle {
        position: absolute;
        top: 230%;
        left: 5%;
        width: 1024px;
    }
    .doremi .bring-magic {
        position: absolute;
        top: 200%;
        left: 5%;
        width: 1024px;
    }

    #program-title {
        top: 110vh;
        width: 300px;
    }
    #piano {
        position: absolute;
        top: 130vh;
        left: 0;
        width: 200px;
    }
    #piano-cloud {
        position: absolute;
        top: 155vh;
        left: 0;
        width: 300px;
    }
    #drum {
        position: absolute;
        top: 130vh;
        left: 22%;
        width: 280px;
    }
    #home {
        position: absolute;
        top: 130vh;
        left: 62%;   
        width: 280px;
    }
    #drum-title{
        position: absolute;
        top: 165vh;
        left: 20%;
        width: 300px;
        height: 100px;
    }
    #home-title {
        position: absolute;
        top: 165vh;
        left: 60%;   
        width: 300px;
        height: 100px;
    }
    #dodo-konduktor {
        position: absolute;
        top: 100vh;
        width: 280px;
        right: 0;
    }
    #dodo-konduktor-cloud {
        position: absolute;
        top: 140vh;
        width: 300px;
        right: 0;
    }

    #about-title {
        position: absolute;
        top: 210vh;
        left: 0;
        right: 0;
        width: 300px;
        margin-left: auto;
        margin-right: auto;
    }
    #about-rere {
        position: absolute;
        top: 230vh;
        left: 0;
        width: 300px;
    }

    #about-mimi {
        position: absolute;
        top: 230vh;
        right: 0;
        width: 300px;
    }
    #about-media {
        position: absolute;
        top: 225vh;
        left: 0;
        right: 0;
        width: 800px;
        height: 600px;
        margin-left: auto;
        margin-right: auto;
        background: url('../img/media\ .png') center center no-repeat;
        background-size: contain;
    }
    #about-taman {
        position: absolute;
        top: 285vh;
        left: 0;
        right: 0;
        margin-left: auto;
        margin-right: auto;
        width: 800px;
    }

    #store-stall {
        position: absolute;
        top: 320vh;
        left: 0;
        right: 0;
        margin-left: auto;
        margin-right: auto;
        width: 80%;
        height: 100vh;
        background: url('../img/workshop-stall.png') center center no-repeat;
        background-size: contain;
    }

    #store-title {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        margin-left: auto;
        margin-right: auto;
        width: 300px;
    }

    #btn-store-left {
        position: absolute;
        left: -5%;
        bottom: 0;
        top: 0;
        margin-bottom: auto;
        margin-top: auto;
        cursor: pointer;
        width: 80px;
    }
    #btn-store-right {
        position: absolute;
        right: -5%;
        bottom: 0;
        top: 0;
        margin-bottom: auto;
        margin-top: auto;
        cursor: pointer;
        width: 80px;
    }

    #store-stall .gallery {
        display: flex;
        flex-direction: row;
        height: 100%;
        width: 100%;
        align-items: center;
        justify-content: center;
        gap: 30px;
    }
    #store-stall .tamborine {
        position: absolute;
        left: -10%;
        bottom:0;
        width: 210px;
    }
    #store-stall .maracas {
        position: absolute;
        left: -10%;
        bottom: 20%;
        width: 140px;
    }
    #store-stall .gendang {
        position: absolute;
        right: -12%;
        bottom: -10%;
        width: 210px;
    }
    #store-stall .gitar {
        position: absolute;
        right: -10%;
        bottom: -10%;
        width: 210px;
    }
    #store-stall .see-more {
        position: absolute;
        bottom: 22%;
        left: 0;
        right: 0;
        margin-left: auto;
        margin-right: auto;
        width: 210px;
    }
    .stall-box {
        width: 300px;
        height: 500px;
    }
    #store-stall .gallery {
        width: 80%;
        margin-top: 50px;
        margin-left: auto;
        margin-right: auto;
    }

    #workshop-stall .gallery {
        width: 80%;
        margin-top: 200px;
        margin-left: auto;
        margin-right: auto;
    }
}

@media screen and (width: 3072px) and (height: 1920px) {
    #top-schedule {
        top: 35vh;
        width: 1500px;
        height: 900px;
        background-size: cover;
    }
    #btn-buy-workshop {
        top: calc(70vh + 300px);
        height: 150px;
    }

    #btn-buy-workshop-family {
        top: calc(30vh + 300px);
    }
    #family-schedule {
        top: calc(110vh + 300px);
        width: 1500px;
        height: 900px;
        background-size: cover;
    }

    #workshop-stall {
        top: calc(220vh + 1024px);
    }

    #workshop-title {
        top: 0;
    }
    
    .about-logo {
        right: 5%;
    }
    .doremi {
        position: absolute;
        top: 20%;
        left: 0;
    }
    .doremi .dodo,.rere,.mimi {
        position: absolute;
        width: 600px;
    }
    .dodo {
        left: 3%;
        top: -35%;
    }
    
    .rere {
        top: 18%;
        left: 21%;
    }
    .mimi {
        left: 38%;
        top: 60%;
    }
    .island {
        position: absolute;
        right: 0;
        top: 50%;
        width: 1200px;
    }
    
    .doremi-cloud {
        position: absolute;
        top: 210%;
        width: 800px;
        left: 5%;
    }
    
    .island-cloud {
        position: absolute;
        right: 0;
        top: 240%;
        width: 1200px;
    }
    
    .butterfly {
        position: absolute;
        right: 30%;
        top: 320%;
        width: 120px;
    }

    .doremi-enter {
        position: absolute;
        width: 200px;
        top: 290%;
        right: 15%;
        cursor: pointer;
    }
    .doremi-subtitle {
        position: absolute;
        top: 380%;
        left: 5%;
        width: 1800px;
    }
    .doremi .bring-magic {
        position: absolute;
        top: 320%;
        left: 5%;
        width: 1800px;
    }

    #program-title {
        top: 90vh;
        width: 800px;
    }
    #piano {
        position: absolute;
        top: 110vh;
        left: 0;
        width: 500px;
    }
    #piano-cloud {
        position: absolute;
        top: 135vh;
        left: 0;
        width: 600px;
    }
    #drum {
        position: absolute;
        top: 118vh;
        left: 22%;
        width: 480px;
    }
    #home {
        position: absolute;
        top: 120vh;
        left: 63%;   
        width: 480px;
    }
    #drum-title{
        position: absolute;
        top: 148vh;
        left: 22%;
        width: 480px;
        height: 180px;
    }
    #home-title {
        position: absolute;
        top: 148vh;
        left: 63%;   
        width: 480px;
        height: 180px;
    }
    #dodo-konduktor {
        position: absolute;
        top: 95vh;
        width: 500px;
        right: 0;
    }
    #dodo-konduktor-cloud {
        position: absolute;
        top: 130vh;
        width: 500px;
        right: 0;
    }

    #about-title {
        position: absolute;
        top: 180vh;
        left: 0;
        right: 0;
        width: 800px;
        margin-left: auto;
        margin-right: auto;
    }
    #about-rere {
        position: absolute;
        top: 200vh;
        left: 0;
        width: 400px;
    }

    #about-mimi {
        position: absolute;
        top: 200vh;
        right: 0;
        width: 400px;
    }
    #about-media {
        position: absolute;
        top: 198vh;
        left: 0;
        right: 0;
        width: 1500px;
        height: 900px;
        margin-left: auto;
        margin-right: auto;
        background: url('../img/media\ .png') center center no-repeat;
        background-size: contain;
    }
    #about-taman {
        position: absolute;
        top: 245vh;
        left: 0;
        right: 0;
        margin-left: auto;
        margin-right: auto;
        width: 1500px;
    }

    #store-stall {
        position: absolute;
        top: 278vh;
        left: 0;
        right: 0;
        margin-left: auto;
        margin-right: auto;
        width: 80%;
        height: 100vh;
        background: url('../img/workshop-stall.png') center center no-repeat;
        background-size: contain;
    }

    #store-title {
        position: absolute;
        top: 5%;
        left: 0;
        right: 0;
        margin-left: auto;
        margin-right: auto;
        width: 800px;
    }

    #btn-store-left {
        position: absolute;
        left: -5%;
        bottom: 0;
        top: 0;
        margin-bottom: auto;
        margin-top: auto;
        cursor: pointer;
        width: 80px;
    }
    #btn-store-right {
        position: absolute;
        right: -5%;
        bottom: 0;
        top: 0;
        margin-bottom: auto;
        margin-top: auto;
        cursor: pointer;
        width: 80px;
    }

    #store-stall .gallery {
        display: flex;
        flex-direction: row;
        height: 100%;
        width: 100%;
        align-items: center;
        justify-content: center;
        gap: 30px;
    }
    #store-stall .tamborine {
        position: absolute;
        left: -15%;
        bottom:0;
        width: 500px;
    }
    #store-stall .maracas {
        position: absolute;
        left: -10%;
        bottom: 20%;
        width: 300px;
    }
    #store-stall .gendang {
        position: absolute;
        right: -12%;
        bottom: 0;
        width: 500px;
    }
    #store-stall .gitar {
        position: absolute;
        right: -5%;
        bottom: 0;
        width: 400px;
    }
    #store-stall .see-more {
        position: absolute;
        bottom: 22%;
        left: 0;
        right: 0;
        margin-left: auto;
        margin-right: auto;
        width: 210px;
    }
    .stall-box {
        width: 600px;
        height: 800px;
    }
    #store-stall .gallery {
        width: 80%;
        margin-top: 50px;
        margin-left: auto;
        margin-right: auto;
    }

    #workshop-stall .gallery {
        width: 80%;
        margin-top: 700px;
        margin-left: auto;
        margin-right: auto;
    }

    #footer .cloud {
        top: -250px;
    }

    #footer .grid {
        top: 60%;
        gap: 50px;
        align-items: center;
    }
}

@media screen and (orientation: portrait) {
    .menu {
        top: 2px;
        gap: 0;
        width: 100%;
        right: 0;
    }
    .menu .menu-item a {
        font-size: 12px;
        height: 20px;
        line-height: 20px;
    }

    #logo {
        width: 50%;
        top: 10vh;
        right: 0;
        left: 0;
        margin-left: auto;
        margin-right: auto;
    }
    #top-schedule {
        top: 15vh;
        width: 80%;
        height: 400px;
    }
    #btn-top-schedule-left, #btn-top-schedule-right {
        width: 20px;
    }
    .top-owl-carousel.owl-carousel {
        margin-top: auto;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 20px;
    }

    #btn-buy-workshop {
        width: 50%;
        top: 50vh;
    }

    #family-schedule {
        width: 80%;
        height: 400px;
        top: 110vh;
    }
    #family-schedule #yt {
        margin-top: 145px !important;
        height: 140px !important;
        width: 90% !important;
    }
    #btn-buy-workshop-family {
        width: 50%;
        top: 155vh;
    }
    #workshop-stall {
        top: 295vh;
        width: 100%;
    }
    #workshop-title {
        width: 50%;
        top: 30%;
    }
    #workshop-stall .gallery {
        margin-top: 90px;
    }
    #btn-workshop-right, #btn-workshop-left {
        width: 30px;
    }
    #btn-workshop-right {
        right: 0;
    }
    #btn-workshop-left {
        left: 0;
    }
    .dodo,.rere,.mimi {
        width: 35%;
        top: 0;
    }

    #about-logo {
        width: 50%;
        top: 9%;
        right: 0;
        left: 0;
        margin-left: auto;
        margin-right: auto;
    }
    .doremi {
        top: 17%;
    }
    .dodo {
        left: 3%;
    }
    .rere {
        top: 10%;
        right: 0;
        left: 0;
        margin-left: auto;
        margin-right: auto;
    }
    .mimi {
        right: 5%;
        left: unset;
        top: 18%;
        width: 40%;
    }
    .island {
        width: 80%;
        top: 95%;
        right: 0;
        left: 0;
        margin-left: auto;
        margin-right: auto;
    }
    .doremi-cloud {
        width: 50%;
        top: 60%;
        left: 10%;
    }
    .butterfly {
        top: 65%;
        left: 25%;
        width: 48px;
    }
    .doremi-enter {
        top: 75%;
        width: 80px;
        right: 0;
        left: 0;
        margin-left: auto;
        margin-right: auto;
    }
    .island-cloud {
        top: 150%;
        width: 60%;
        right: 0;
        left: 0;
        margin-left: auto;
        margin-right: auto;
    }

    .doremi .bring-magic,.doremi-subtitle {
        top: 165%;
        width:85%;
        right: 0;
        left: 0;
        margin-left: auto;
        margin-right: auto;
    }
    .doremi-subtitle{
        top: 175%;
    }
    
    #program-title, #about-title, #store-title {
        width: 50%;
        top: 86%;
        right: 0;
        left: 0;
        margin-left: auto;
        margin-right: auto;
    }
    #piano, #dodo-konduktor{
        width: 25%;
    }
    #drum, #home {
        width: 30%;
    }
    #drum-title, #home-title {
        width: 40%;
        height: auto;
    }
    #home, #drum,#drum-title, #home-title {
        right: 0;
        left: 0;
        margin-left: auto;
        margin-right: auto;
    }
    
    #program-title {
        top: 105%;
    }
    #drum {
        top: 120%;
    }
    #drum-title {
        top: 135%;
    }
    #home {
        top: 155%;
    }
    #home-title {
        top: 175%;
    }

    #piano {
        top: 150%;
    }
    #piano-cloud {
        top: 165%;
        width: 40%;
    }

    #dodo-konduktor {
        right: 0;
        top: 140%;
    }
    #dodo-konduktor-cloud {
        top: 153%;
        width: 33%;
        right: 0;
    }
    #about-title {
       top: 200%;
    }
    #about-media {
        width: 80%;
        top: 200%;
    }
    #about-taman {
        width: 80%;
        top: 245%;
    }
    #about-mimi, #about-rere {
        width: 35%;
        top: 255%;
    }
    #store-title  {
        top: 32%;
    }

    #store-stall {
        top: 290%;
    }
    #store-stall .gallery {
        width: 80%;
        margin-top: 25%;
    }
    .stall-box {
        width: auto;
    }
    #btn-store-left, #btn-store-right {
        display: none;
    }
    #store-stall .tamborine,#store-stall .maracas,#store-stall .gendang,#store-stall .gitar {
        width: 28%;
    }
    #store-stall .tamborine {
        left: 0;
        bottom: 10%;
        z-index: 99;
    }
    #store-stall .maracas {
        bottom: 20%;
        z-index: 98;
        left: 0;
    }
    #store-stall .gendang {
        right: 0;
        bottom: 10%;
    }
    #store-stall .gitar {
        width: 20%;
        right: 10%;
        bottom: 10%;
    }
    #footer {
        margin-top: -25%;
    }
    #footer .cloud {
        top: -40%;
        width: 80%;
    }
    #footer .grid {
        grid-template-columns: repeat(2, 50%);
        align-items: top;
        top: 10%;
        gap: 10px;
    }
    .footer-logo {
        width: 120px;
        display: block;
        margin: auto;
    }
    #footer > div > div:nth-child(2) > img {
        width: 80%;
        display: block;
        margin: auto
    }
    #footer > div > div:nth-child(3) > img {
        margin: auto;
    }
    #footer > div > div:nth-child(3) > div {
        width: 100% !important;
    }
    #footer > div > div:nth-child(3) > div > img{
        width: 30px;
    }
    #footer > div > div:nth-child(4) > img {
        display: block;
        margin: auto;
    }
    #footer > div > div:nth-child(4) > div {
        width: 100% !important;
    }
    #footer > div > div:nth-child(4) > div img {
        width: 30px;
    }

    @media screen and (max-width: 360px) {
        #btn-buy-workshop {
            width: 50%;
            top: 50vh;
        }
    
        #family-schedule {
            width: 80%;
            height: 400px;
            top: 90vh;
        }
        #btn-buy-workshop-family {
            width: 50%;
            top: 135vh;
        }
        #workshop-stall {
            top: 250vh;
            width: 100%;
        }
        #workshop-title {
            width: 50%;
            top: 30%;
        }
        #workshop-stall .gallery {
            margin-top: 120px;
        }
        #program-title {
            top: 105%;
        }
        #drum {
            top: 115%;
        }
        #drum-title {
            top: 130%;
        }
        #home {
            top: 140%;
        }
        #home-title {
            top: 155%;
        }
    
        #piano {
            top: 135%;
        }
        #piano-cloud {
            top: 145%;
            width: 40%;
        }
    
        #dodo-konduktor {
            right: 0;
            top: 130%;
        }
        #dodo-konduktor-cloud {
            top: 143%;
            width: 33%;
            right: 0;
        }
        #about-title {
           top: 175%;
        }
        #about-media {
            width: 80%;
            top: 180%;
        }
        #about-taman {
            width: 80%;
            top: 220%;
        }
        #about-mimi, #about-rere {
            width: 35%;
            top: 230%;
        }
        #store-title  {
            top: 42%;
        }
    
        #store-stall {
            top: 250%;
        }
        #store-stall .gallery {
            width: 80%;
            margin-top: 30%;
        }
        .stall-box {
            width: auto;
        }
        #btn-store-left, #btn-store-right {
            display: none;
        }
        #store-stall .tamborine,#store-stall .maracas,#store-stall .gendang,#store-stall .gitar {
            width: 28%;
        }
        #store-stall .tamborine {
            left: 0;
            bottom: 15%;
            z-index: 99;
        }
        #store-stall .maracas {
            bottom: 25%;
            z-index: 98;
            left: 0;
        }
        #store-stall .gendang {
            right: 0;
            bottom: 13%;
        }
        #store-stall .gitar {
            width: 25%;
            right: 10%;
            bottom: 15%;
        }
    }

    @media screen and (min-width: 390px) {
        #btn-buy-workshop {
            width: 50%;
            top: 50vh;
        }
    
        #family-schedule {
            width: 80%;
            height: 400px;
            top: 90vh;
        }
        #btn-buy-workshop-family {
            width: 50%;
            top: 130vh;
        }
        #workshop-stall {
            top: 235vh;
            width: 100%;
        }
        #workshop-title {
            width: 50%;
            top: 33%;
        }
        #workshop-stall .gallery {
            margin-top: 180px;
        }
        #program-title {
            top: 100%;
        }
        #drum {
            top: 110%;
        }
        #drum-title {
            top: 128%;
        }
        #home {
            top: 140%;
        }
        #home-title {
            top: 158%;
        }
    
        #piano {
            top: 125%;
        }
        #piano-cloud {
            top: 135%;
            width: 40%;
        }
    
        #dodo-konduktor {
            right: 0;
            top: 110%;
        }
        #dodo-konduktor-cloud {
            top: 123%;
            width: 33%;
            right: 0;
        }
        #store-stall {
            top: 250%;
        }
        #store-stall .gallery {
            width: 80%;
            margin-top: 45%;
        }
        #about-taman {
            top: 207%;
        }
        #store-stall .tamborine {
            left: 0;
            bottom: 20%;
            z-index: 99;
        }
        #store-stall .maracas {
            bottom: 30%;
            z-index: 98;
            left: 0;
        }
        #store-stall .gendang {
            right: 0;
            bottom: 13%;
        }
        #store-stall .gitar {
            width: 25%;
            right: 10%;
            bottom: 15%;
        }
        #footer {
            margin-top: -26%;
        }
        #footer .cloud {
            top: -40%;
            width: 80%;
        }
    }
    
    @media screen and (min-width: 410px) {
        #btn-buy-workshop {
            width: 50%;
            top: 50vh;
        }
    
        #family-schedule {
            width: 80%;
            height: 400px;
            top: 90vh;
        }
        #btn-buy-workshop-family {
            width: 50%;
            top: 125vh;
        }
        #workshop-stall {
            top: 230vh;
            width: 100%;
        }
        #workshop-title {
            width: 50%;
            top: 33%;
        }
        #workshop-stall .gallery {
            margin-top: 200px;
        }
        #store-stall {
            top: 250%;
        }
        #store-stall .gallery {
            width: 80%;
            margin-top: 50%;
        }
    }
}