/* AOS >> https://michalsnik.github.io/aos/ */
/* Keyframe Generator >> https://www.cssportal.com/css-animation-generator/ */

/* SECTION MAIN CONTENT */

/* NAV BAR */
.navBarLogin{
    background-color: #F37321;
    /* width: 100%; */
    height: 50px;
    z-index: 0;
    display: flex;
    justify-content: space-around;
}

.spacer{
    width: 90%;
    /* background-color: blue; */
}

.btn-login{
    background-color: #fff;
    width: 100px;
    margin: auto;
    text-align: center;
    /* align-items: center; */
    color: #000;
    font-size: 20px;
    font-weight: bold;
    border-radius: 10px;
    position: absolute;
    right: 5%;
    top: 5%;
}

.btn-login:hover{
    color: black;
}

.layout-full{
    width: 100%;
    height: 100%;
}


/* SECTION CONTACT US */
.page-bottom .row > div > h4.judul-contactus{
    font-family: "Speed+";
    font-size: 20px;
    color: #FFF;
}

.labels {
    font-family: "Speed+";
    font-size: 14px;
    color: #FFF;
}

.icon-container{
    width: 100%;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}

.icon-link{
    text-decoration: none;
    color: #FFF;
}

a.icon-link:hover{
    text-decoration: none;
    color: #F37321;
}

.page-bottom .row > div > .fun-fact > h4{
    font-family: Arial, Helvetica, sans-serif;
    color: #FFF;
    text-transform: none;
}

.icon-image{
    display: block;
    margin: auto;
}

/* MOBILE DEVICE (PRIMARY DESIGN) */
.tes{
    background-color: red;
    width: 100%;
    height: 100%;
}

/* ANIMATION IMAGE */

/* MOBILE DEVICE SMALL */
.img-rocket{
    animation: slideRight 2s ease 0s infinite normal none;
    position: absolute;
    width: 70px;
    left: 0;
    bottom: 13%;
}
.img-guitar{
    animation: heartBeat 2s ease 0s infinite normal none;
    position: absolute;
    width: 160px;
    left: 40%;
    bottom: 10%;
}
.img-smile{
    animation: wobbleTop 2s ease 0s infinite normal none;
    position: absolute;
    width: 50px;
    right: 12%;
    bottom: 23%;
    z-index: 1;
}
.img-piano01{
    animation: wobble 2s ease 0s infinite normal none;
    position: absolute;
    width: 100px;
    left: 5%;
    top: 7%;
}
.img-drum{
    animation: shakeRotate 2s ease 0s infinite normal none;
    position: absolute;
    width: 70px;
    right: 8%;
    top: 20%;
    z-index: 1;
}

.icon-container{
    /* background-color: red; */
    width: 100%;
    display: block;
    /* justify-content: space-evenly;
    align-items: center; */
    text-align: center;
}

.about-star-1{
    position: absolute;
    width: 40px;
    left: 0%;
    top: -20%;
    z-index: -1;
}

.about-star-2{
    position: absolute;
    width: 30px;
    right: 10%;
    top: -15%;
    z-index: -1;
}

.about-star-3{
    position: absolute;
    width: 40px;
    left: 10%;
    bottom: -10%;
    z-index: -1;
}

.about-piano{
    position: absolute;
    width: 70px;
    right: 20%;
    bottom: -10%;
    z-index: -1;
}

.about-music-1{
    position: absolute;
    width: 20px;
    left: 0%;
    bottom: 60%;
    z-index: -1;
}

.about-music-2{
    position: absolute;
    width: 25px;
    right: 5%;
    top: 35%;
    z-index: -1;
}

/* BINTANG */
.programs-star-1{
    position: absolute;
    width: 50px;
    left: 3%;
    top: -5%;
    z-index: -1;
}

.programs-star-2{
    position: absolute;
    width: 40px;
    right: 0%;
    top: -5%;
    z-index: -1;
}

.programs-star-3{
    position: absolute;
    width: 40px;
    right: 0%;
    top: 18%;
    z-index: -1;
}

.programs-star-4{
    position: absolute;
    width: 40px;
    left: 0%;
    top: 20%;
    z-index: -1;
}

.programs-star-5{
    position: absolute;
    width: 40px;
    right: 0%;
    top: 37%;
    z-index: -1;
}

.programs-star-6{
    position: absolute;
    width: 40px;
    left: -5%;
    top: 50%;
    z-index: -1;
}

.programs-star-7{
    position: absolute;
    width: 40px;
    right: -3%;
    top: 55%;
    z-index: -1;
}

.programs-star-8{
    position: absolute;
    width: 40px;
    left: -5%;
    top: 70%;
    z-index: -1;
}

.programs-star-9{
    position: absolute;
    width: 40px;
    right: 0%;
    top: 75%;
    z-index: -1;
}


/* NOT BALOK */
.programs-music-1{
    position: absolute;
    width: 40px;
    left: -5%;
    top: 10%;
    z-index: -1;
}

.programs-music-2{
    position: absolute;
    width: 40px;
    right: 0%;
    top: 5%;
    z-index: -1;
}

.programs-music-3{
    position: absolute;
    width: 40px;
    right: 0%;
    top: 40%;
    z-index: -1;
}

.programs-music-4{
    position: absolute;
    width: 40px;
    left: 0%;
    top: 59%;
    z-index: -1;
}

.programs-music-5{
    position: absolute;
    width: 40px;
    right: 0%;
    bottom: 20%;
    z-index: -1;
}

.programs-music-6{
    position: absolute;
    width: 50px;
    left: 0%;
    bottom: 7%;
    z-index: -1;
}

/* MOBILE DEVICE MEDIUM */
@media (min-width: 576px) {
    .tes{
        background-color: aqua;
        width: 100%;
        height: 100%;
    }
    
    .img-rocket{
        animation: slideRight 2s ease 0s infinite normal none;
        position: absolute;
        width: 70px;
        left: 10%;
        bottom: 11%;
    }
    .img-guitar{
        animation: heartBeat 2s ease 0s infinite normal none;
        position: absolute;
        width: 160px;
        left: 40%;
        bottom: 10%;
    }
    .img-smile{
        animation: wobbleTop 2s ease 0s infinite normal none;
        position: absolute;
        width: 50px;
        right: 12%;
        bottom: 23%;
        z-index: 1;
    }
    .img-piano01{
        animation: wobble 2s ease 0s infinite normal none;
        position: absolute;
        width: 100px;
        left: 8%;
        top: 10%;
    }
    .img-drum{
        animation: shakeRotate 2s ease 0s infinite normal none;
        position: absolute;
        width: 70px;
        right: 12%;
        top: 18%;
        z-index: 1;
    }
    .icon-container{
        width: 100%;
        display: flex;
        justify-content: space-evenly;
        align-items: center;
    }

    .about-star-1{
        position: absolute;
        width: 50px;
        left: 0%;
        top: -35%;
        z-index: -1;
    }
    
    .about-star-2{
        position: absolute;
        width: 40px;
        right: 10%;
        top: -25%;
        z-index: -1;
    }
    
    .about-star-3{
        position: absolute;
        width: 40px;
        left: 10%;
        bottom: -10%;
        z-index: -1;
    }
    
    .about-piano{
        position: absolute;
        width: 100px;
        right: 0%;
        bottom: -10%;
        z-index: -1;
    }
    
    .about-music-1{
        position: absolute;
        width: 30px;
        left: -5%;
        bottom: 50%;
        z-index: -1;
    }
    
    .about-music-2{
        position: absolute;
        width: 25px;
        right: 5%;
        top: 20%;
        z-index: -1;
    }

    /* BINTANG */
    .programs-star-1{
        position: absolute;
        width: 60px;
        left: 3%;
        top: -8%;
        z-index: -1;
    }
    
    .programs-star-2{
        position: absolute;
        width: 40px;
        right: 0%;
        top: -5%;
        z-index: -1;
    }
    
    .programs-star-3{
        position: absolute;
        width: 40px;
        right: 0%;
        top: 18%;
        z-index: -1;
    }
    
    .programs-star-4{
        position: absolute;
        width: 40px;
        left: 0%;
        top: 20%;
        z-index: -1;
    }
    
    .programs-star-5{
        position: absolute;
        width: 40px;
        right: 0%;
        top: 37%;
        z-index: -1;
    }
    
    .programs-star-6{
        position: absolute;
        width: 40px;
        left: -5%;
        top: 50%;
        z-index: -1;
    }
    
    .programs-star-7{
        position: absolute;
        width: 40px;
        right: -3%;
        top: 55%;
        z-index: -1;
    }
    
    .programs-star-8{
        position: absolute;
        width: 40px;
        left: -5%;
        top: 70%;
        z-index: -1;
    }
    
    .programs-star-9{
        position: absolute;
        width: 40px;
        right: 0%;
        top: 75%;
        z-index: -1;
    }


    /* NOT BALOK */
    .programs-music-1{
        position: absolute;
        width: 40px;
        left: -5%;
        top: 10%;
        z-index: -1;
    }
    
    .programs-music-2{
        position: absolute;
        width: 40px;
        right: 0%;
        top: 5%;
        z-index: -1;
    }
    
    .programs-music-3{
        position: absolute;
        width: 40px;
        right: 0%;
        top: 40%;
        z-index: -1;
    }
    
    .programs-music-4{
        position: absolute;
        width: 40px;
        left: 0%;
        top: 59%;
        z-index: -1;
    }
    
    .programs-music-5{
        position: absolute;
        width: 40px;
        right: 0%;
        bottom: 20%;
        z-index: -1;
    }
    
    .programs-music-6{
        position: absolute;
        width: 50px;
        left: 0%;
        bottom: 7%;
        z-index: -1;
    }
}

/* TABLET DEVICE */
@media (min-width: 768px) {
    .tes{
        background-color: green;
        width: 100%;
        height: 100%;
    }
    
    .img-rocket{
        animation: slideRight 2s ease 0s infinite normal none;
        position: absolute;
        width: 80px;
        left: 10%;
        bottom: 9%;
    }
    .img-guitar{
        animation: heartBeat 2s ease 0s infinite normal none;
        position: absolute;
        width: 180px;
        left: 40%;
        bottom: 3%;
    }
    .img-smile{
        animation: wobbleTop 2s ease 0s infinite normal none;
        position: absolute;
        width: 80px;
        right: 12%;
        bottom: 23%;
        z-index: 1;
    }
    .img-piano01{
        animation: wobble 2s ease 0s infinite normal none;
        position: absolute;
        width: 150px;
        left: 8%;
        top: 13%;
    }
    .img-drum{
        animation: shakeRotate 2s ease 0s infinite normal none;
        position: absolute;
        width: 90px;
        right: 18%;
        top: 18%;
        z-index: 1;
    }
    .icon-container{
        width: 100%;
        display: flex;
        justify-content: space-evenly;
        align-items: center;
    }

    .about-star-1{
        position: absolute;
        width: 60px;
        left: 0%;
        top: -30%;
        z-index: -1;
    }
    
    .about-star-2{
        position: absolute;
        width: 40px;
        right: 0%;
        top: -25%;
        z-index: -1;
    }
    
    .about-star-3{
        position: absolute;
        width: 40px;
        left: 10%;
        bottom: -10%;
        z-index: -1;
    }
    
    .about-piano{
        position: absolute;
        width: 100px;
        right: 0%;
        bottom: -10%;
        z-index: -1;
    }
    
    .about-music-1{
        position: absolute;
        width: 30px;
        left: -5%;
        bottom: 50%;
        z-index: -1;
    }
    
    .about-music-2{
        position: absolute;
        width: 30px;
        right: -5%;
        top: 20%;
        z-index: -1;
    }

    /* BINTANG */
    .programs-star-1{
        position: absolute;
        width: 60px;
        left: 3%;
        top: -8%;
        z-index: -1;
    }
    
    .programs-star-2{
        position: absolute;
        width: 40px;
        right: 0%;
        top: -5%;
        z-index: -1;
    }
    
    .programs-star-3{
        position: absolute;
        width: 40px;
        right: 0%;
        top: 18%;
        z-index: -1;
    }
    
    .programs-star-4{
        position: absolute;
        width: 40px;
        left: 0%;
        top: 20%;
        z-index: -1;
    }
    
    .programs-star-5{
        position: absolute;
        width: 40px;
        right: 0%;
        top: 37%;
        z-index: -1;
    }
    
    .programs-star-6{
        position: absolute;
        width: 40px;
        left: -5%;
        top: 50%;
        z-index: -1;
    }
    
    .programs-star-7{
        position: absolute;
        width: 40px;
        right: -3%;
        top: 55%;
        z-index: -1;
    }
    
    .programs-star-8{
        position: absolute;
        width: 40px;
        left: -5%;
        top: 70%;
        z-index: -1;
    }
    
    .programs-star-9{
        position: absolute;
        width: 40px;
        right: 0%;
        top: 75%;
        z-index: -1;
    }


    /* NOT BALOK */
    .programs-music-1{
        position: absolute;
        width: 40px;
        left: -5%;
        top: 10%;
        z-index: -1;
    }
    
    .programs-music-2{
        position: absolute;
        width: 40px;
        right: 0%;
        top: 5%;
        z-index: -1;
    }
    
    .programs-music-3{
        position: absolute;
        width: 40px;
        right: 0%;
        top: 40%;
        z-index: -1;
    }
    
    .programs-music-4{
        position: absolute;
        width: 40px;
        left: 0%;
        top: 59%;
        z-index: -1;
    }
    
    .programs-music-5{
        position: absolute;
        width: 40px;
        right: 0%;
        bottom: 20%;
        z-index: -1;
    }
    
    .programs-music-6{
        position: absolute;
        width: 50px;
        left: 0%;
        bottom: 7%;
        z-index: -1;
    }
}

/* DESKTOP DEVICE */
@media (min-width: 992px) {
    .tes{
        background-color: blue;
        width: 100%;
        height: 100%;
    }

    /* ANIMATION IMAGE */
    .img-rocket{
        animation: slideRight 2s ease 0s infinite normal none;
        position: absolute;
        width: 100px;
        left: 0;
        bottom: 5%;
    }
    .img-guitar{
        animation: heartBeat 2s ease 0s infinite normal none;
        position: absolute;
        width: 190px;
        left: 40%;
        bottom: 3%;
    }
    .img-smile{
        animation: wobbleTop 2s ease 0s infinite normal none;
        position: absolute;
        width: 80px;
        right: 12%;
        bottom: 23%;
        z-index: 1;
    }
    .img-piano01{
        animation: wobble 2s ease 0s infinite normal none;
        position: absolute;
        width: 150px;
        left: 10%;
        top: 13%;
    }
    .img-drum{
        animation: shakeRotate 2s ease 0s infinite normal none;
        position: absolute;
        width: 90px;
        right: 25%;
        top: 19%;
        z-index: 1;
    }

    .about-star-1{
        position: absolute;
        width: 60px;
        left: 0%;
        top: -30%;
        z-index: -1;
    }
    
    .about-star-2{
        position: absolute;
        width: 40px;
        right: 0%;
        top: -25%;
        z-index: -1;
    }
    
    .about-star-3{
        position: absolute;
        width: 50px;
        left: 10%;
        bottom: -10%;
        z-index: -1;
    }
    
    .about-piano{
        position: absolute;
        width: 150px;
        right: 0%;
        bottom: -10%;
        z-index: -1;
    }
    
    .about-music-1{
        position: absolute;
        width: 70px;
        left: -15%;
        bottom: 50%;
        z-index: -1;
    }
    
    .about-music-2{
        position: absolute;
        width: 70px;
        right: -15%;
        top: 20%;
        z-index: -1;
    }

    /* BINTANG */
    .programs-star-1{
        position: absolute;
        width: 60px;
        left: 3%;
        top: -8%;
        z-index: -1;
    }
    
    .programs-star-2{
        position: absolute;
        width: 40px;
        right: 0%;
        top: -5%;
        z-index: -1;
    }
    
    .programs-star-3{
        position: absolute;
        width: 40px;
        right: -10%;
        top: 18%;
        z-index: -1;
    }
    
    .programs-star-4{
        position: absolute;
        width: 40px;
        left: -10%;
        top: 23%;
        z-index: -1;
    }
    
    .programs-star-5{
        position: absolute;
        width: 40px;
        right: -10%;
        top: 37%;
        z-index: -1;
    }
    
    .programs-star-6{
        position: absolute;
        width: 40px;
        left: -20%;
        top: 50%;
        z-index: -1;
    }
    
    .programs-star-7{
        position: absolute;
        width: 40px;
        right: -10%;
        top: 55%;
        z-index: -1;
    }
    
    .programs-star-8{
        position: absolute;
        width: 40px;
        left: -10%;
        top: 70%;
        z-index: -1;
    }
    
    .programs-star-9{
        position: absolute;
        width: 40px;
        right: -10%;
        top: 75%;
        z-index: -1;
    }


    /* NOT BALOK */
    .programs-music-1{
        position: absolute;
        width: 70px;
        left: -20%;
        top: 10%;
        z-index: -1;
    }
    
    .programs-music-2{
        position: absolute;
        width: 70px;
        right: -15%;
        top: 4%;
        z-index: -1;
    }
    
    .programs-music-3{
        position: absolute;
        width: 70px;
        right: 0%;
        top: 40%;
        z-index: -1;
    }
    
    .programs-music-4{
        position: absolute;
        width: 70px;
        left: 0%;
        top: 59%;
        z-index: -1;
    }
    
    .programs-music-5{
        position: absolute;
        width: 70px;
        right: 0%;
        bottom: 19%;
        z-index: -1;
    }
    
    .programs-music-6{
        position: absolute;
        width: 70px;
        left: 0%;
        bottom: 7%;
        z-index: -1;
    }
}

@media (min-width: 1200px) {
    .tes{
        background-color: brown;
        width: 100%;
        height: 100%;
    }

    /* ANIMATION IMAGE */
    .img-rocket{
        animation: slideRight 2s ease 0s infinite normal none;
        position: absolute;
        width: 110px;
        left: 5%;
        bottom: 5%;
    }
    .img-guitar{
        animation: heartBeat 2s ease 0s infinite normal none;
        position: absolute;
        width: 190px;
        left: 40%;
        bottom: 3%;
    }
    .img-smile{
        animation: wobbleTop 2s ease 0s infinite normal none;
        position: absolute;
        width: 80px;
        right: 20%;
        bottom: 23%;
        z-index: 1;
    }
    .img-piano01{
        animation: wobble 2s ease 0s infinite normal none;
        position: absolute;
        width: 150px;
        left: 10%;
        top: 17%;
    }
    .img-drum{
        animation: shakeRotate 2s ease 0s infinite normal none;
        position: absolute;
        width: 100px;
        right: 30%;
        top: 19%;
        z-index: 1;
    }

    .icon-container{
        width: 100%;
        display: flex;
        justify-content: space-evenly;
        align-items: center;
    }

    .about-star-1{
        position: absolute;
        width: 60px;
        left: 0%;
        top: -30%;
        z-index: -1;
    }
    
    .about-star-2{
        position: absolute;
        width: 40px;
        right: 0%;
        top: -25%;
        z-index: -1;
    }
    
    .about-star-3{
        position: absolute;
        width: 50px;
        left: 10%;
        bottom: -10%;
        z-index: -1;
    }
    
    .about-piano{
        position: absolute;
        width: 150px;
        right: 0%;
        bottom: -10%;
        z-index: -1;
    }
    
    .about-music-1{
        position: absolute;
        width: 70px;
        left: -15%;
        bottom: 50%;
        z-index: -1;
    }
    
    .about-music-2{
        position: absolute;
        width: 70px;
        right: -15%;
        top: 20%;
        z-index: -1;
    }

    /* BINTANG */
    .programs-star-1{
        position: absolute;
        width: 60px;
        left: 3%;
        top: -8%;
        z-index: -1;
    }
    
    .programs-star-2{
        position: absolute;
        width: 40px;
        right: 0%;
        top: -5%;
        z-index: -1;
    }
    
    .programs-star-3{
        position: absolute;
        width: 40px;
        right: -10%;
        top: 18%;
        z-index: -1;
    }
    
    .programs-star-4{
        position: absolute;
        width: 40px;
        left: -10%;
        top: 23%;
        z-index: -1;
    }
    
    .programs-star-5{
        position: absolute;
        width: 40px;
        right: -10%;
        top: 37%;
        z-index: -1;
    }
    
    .programs-star-6{
        position: absolute;
        width: 40px;
        left: -20%;
        top: 50%;
        z-index: -1;
    }
    
    .programs-star-7{
        position: absolute;
        width: 40px;
        right: -10%;
        top: 55%;
        z-index: -1;
    }
    
    .programs-star-8{
        position: absolute;
        width: 40px;
        left: -10%;
        top: 70%;
        z-index: -1;
    }
    
    .programs-star-9{
        position: absolute;
        width: 40px;
        right: -10%;
        top: 75%;
        z-index: -1;
    }


    /* NOT BALOK */
    .programs-music-1{
        position: absolute;
        width: 70px;
        left: -20%;
        top: 10%;
        z-index: -1;
    }
    
    .programs-music-2{
        position: absolute;
        width: 70px;
        right: -15%;
        top: 4%;
        z-index: -1;
    }
    
    .programs-music-3{
        position: absolute;
        width: 70px;
        right: 0%;
        top: 40%;
        z-index: -1;
    }
    
    .programs-music-4{
        position: absolute;
        width: 70px;
        left: 0%;
        top: 59%;
        z-index: -1;
    }
    
    .programs-music-5{
        position: absolute;
        width: 70px;
        right: 0%;
        bottom: 19%;
        z-index: -1;
    }
    
    .programs-music-6{
        position: absolute;
        width: 70px;
        left: 0%;
        bottom: 7%;
        z-index: -1;
    }
}

@media (min-width: 1400px) {
    .tes{
        background-color: violet;
        width: 100%;
        height: 100%;
    }

    /* ANIMATION IMAGE */
    .img-rocket{
        animation: slideRight 2s ease 0s infinite normal none;
        position: absolute;
        width: 100px;
        left: 7%;
        bottom: 5%;
    }
    .img-guitar{
        animation: heartBeat 2s ease 0s infinite normal none;
        position: absolute;
        width: 190px;
        left: 40%;
        bottom: 3%;
    }
    .img-smile{
        animation: wobbleTop 2s ease 0s infinite normal none;
        position: absolute;
        width: 80px;
        right: 20%;
        bottom: 23%;
        z-index: 1;
    }
    .img-piano01{
        animation: wobble 2s ease 0s infinite normal none;
        position: absolute;
        width: 150px;
        left: 10%;
        top: 11%;
    }
    .img-drum{
        animation: shakeRotate 2s ease 0s infinite normal none;
        position: absolute;
        width: 100px;
        right: 30%;
        top: 12%;
        z-index: 100;
    }

    .icon-container{
        width: 100%;
        display: flex;
        justify-content: space-evenly;
        align-items: center;
    }

    .map-size{
        width: 10;
        height: 15;
    }

    .about-star-1{
        position: absolute;
        width: 60px;
        left: 0%;
        top: -30%;
        z-index: -1;
    }
    
    .about-star-2{
        position: absolute;
        width: 40px;
        right: 0%;
        top: -25%;
        z-index: -1;
    }
    
    .about-star-3{
        position: absolute;
        width: 50px;
        left: 10%;
        bottom: -10%;
        z-index: -1;
    }
    
    .about-piano{
        position: absolute;
        width: 150px;
        right: 0%;
        bottom: -10%;
        z-index: -1;
    }
    
    .about-music-1{
        position: absolute;
        width: 70px;
        left: -15%;
        bottom: 50%;
        z-index: -1;
    }
    
    .about-music-2{
        position: absolute;
        width: 70px;
        right: -15%;
        top: 20%;
        z-index: -1;
    }


    /* BINTANG */
    .programs-star-1{
        position: absolute;
        width: 60px;
        left: 3%;
        top: -8%;
        z-index: -1;
    }
    
    .programs-star-2{
        position: absolute;
        width: 40px;
        right: 0%;
        top: -5%;
        z-index: -1;
    }
    
    .programs-star-3{
        position: absolute;
        width: 40px;
        right: -10%;
        top: 18%;
        z-index: -1;
    }
    
    .programs-star-4{
        position: absolute;
        width: 40px;
        left: -10%;
        top: 23%;
        z-index: -1;
    }
    
    .programs-star-5{
        position: absolute;
        width: 40px;
        right: -10%;
        top: 37%;
        z-index: -1;
    }
    
    .programs-star-6{
        position: absolute;
        width: 40px;
        left: -20%;
        top: 50%;
        z-index: -1;
    }
    
    .programs-star-7{
        position: absolute;
        width: 40px;
        right: -10%;
        top: 55%;
        z-index: -1;
    }
    
    .programs-star-8{
        position: absolute;
        width: 40px;
        left: -10%;
        top: 70%;
        z-index: -1;
    }
    
    .programs-star-9{
        position: absolute;
        width: 40px;
        right: -10%;
        top: 75%;
        z-index: -1;
    }


    /* NOT BALOK */
    .programs-music-1{
        position: absolute;
        width: 70px;
        left: -20%;
        top: 10%;
        z-index: -1;
    }
    
    .programs-music-2{
        position: absolute;
        width: 70px;
        right: -15%;
        top: 4%;
        z-index: -1;
    }
    
    .programs-music-3{
        position: absolute;
        width: 70px;
        right: 0%;
        top: 40%;
        z-index: -1;
    }
    
    .programs-music-4{
        position: absolute;
        width: 70px;
        left: 0%;
        top: 59%;
        z-index: -1;
    }
    
    .programs-music-5{
        position: absolute;
        width: 70px;
        right: 0%;
        bottom: 19%;
        z-index: -1;
    }
    
    .programs-music-6{
        position: absolute;
        width: 70px;
        left: 0%;
        bottom: 7%;
        z-index: -1;
    }
}


/* EVENTS PAGE */
.event-content{
    text-align: center;
    /* background-color: violet; */
}

.event-image{
    margin-top: 40px;
}

.event-title{
    font-size: 14px;
    text-align: center;
    /* background-color: aqua; */
    color: white;
    /* padding-top: 100px; */
    margin-top: 10px;
}

/* AWARDS PAGE */
.awards-content{
    /* display: flex; */
    /* justify-content: center; */
    /* justify-content: space-evenly; */
    /* flex-wrap: wrap; */
    /* backgr   ound-color: #F37321; */
    /* width: 100%; */
}

.award-image{
    width: 100%;
    /* display: block;
    margin-right: 20px; */
    margin-bottom: 20px;
}

.awards-group h1{
    color: white;
    /* text-align: center; */
}

/* PROGRAMS PAGE */
.programs-text{
    margin-top: 20px;
    margin-bottom: 20px;
    font-size: 20px;
    color: white;
    text-align: center;
  }

/* LOCATIONS PAGE */
.locations-content{
    display: block;
    width: 100%;
    margin-bottom: 50px;
}

.locations-group{
    margin-bottom: 40px;
}



  .locations-title-group{
    width: 100%;
    height: 450;
  }

  .locations-title{
    font-size: 15px;
    text-align: left;
    /* background-color: aqua; */
    /* color: #7A7A7A; */
    color: black;
    font-weight: bold;
    /* padding-top: 100px; */
    /* margin-top: 10px; */
    margin-top: 10px;
}

.locations-address p{
    font-size: 11px;
}

.locations-office-hours p{
    font-size: 11px;
}

  .about-text{
    font-size: 20px;
    color: white;
  }


/* BLOG PAGE */
.blog-content{
    margin-top: 30px;
    text-align: center;
    /* background-color: violet; */
}

.blog-image{
    margin-top: 40px;
}

.blog-title{
    font-size: 14px;
    text-align: center;
    /* background-color: aqua; */
    /* color: #7A7A7A; */
    color: white;
    /* padding-top: 100px; */
    margin-top: 10px;
}

/* ANIMATION EFFECTS */

@keyframes heartBeat {
    0% {
      animation-timing-function: ease-out;
      transform: scale(1);
      transform-origin: center center;
    }
  
    10% {
      animation-timing-function: ease-in;
      transform: scale(0.91);
    }
  
    17% {
      animation-timing-function: ease-out;
      transform: scale(0.98);
    }
  
    33% {
      animation-timing-function: ease-in;
      transform: scale(0.87);
    }
  
    45% {
      animation-timing-function: ease-out;
      transform: scale(1);
    }
}

@keyframes slideRight {
    0% {
      transform: translateX(0);
    }
  
    100% {
      transform: translateX(100px);
    }
}

@keyframes blinkSlow {
    0% {
      opacity: 1;
    }
  
    50% {
      opacity: 0.2;
    }
  
    100% {
      opacity: 1;
    }
}

@keyframes wobble {
    0%,
    100% {
      transform: translateX(0%);
      transform-origin: 50% 50%;
    }
  
    15% {
      transform: translateX(-30px) rotate(-6deg);
    }
  
    30% {
      transform: translateX(15px) rotate(6deg);
    }
  
    45% {
      transform: translateX(-15px) rotate(-3.6deg);
    }
  
    60% {
      transform: translateX(9px) rotate(2.4deg);
    }
  
    75% {
      transform: translateX(-6px) rotate(-1.2deg);
    }
}

@keyframes shakeRotate {
    0%,
    100% {
      transform: rotate(0deg);
      transform-origin: 50% 50%;
    }
  
    10% {
      transform: rotate(8deg);
    }
  
    20%,
    40%,
    60% {
      transform: rotate(-10deg);
    }
  
    30%,
    50%,
    70% {
      transform: rotate(10deg);
    }
  
    80% {
      transform: rotate(-8deg);
    }
  
    90% {
      transform: rotate(8deg);
    }
}

@keyframes wobbleTop {
    0%,
    100% {
      transform: translateX(0%);
      transform-origin: 50% 50%;
    }
  
    15% {
      transform: translateX(-30px) rotate(6deg);
    }
  
    30% {
      transform: translateX(15px) rotate(-6deg);
    }
  
    45% {
      transform: translateX(-15px) rotate(3.6deg);
    }
  
    60% {
      transform: translateX(9px) rotate(-2.4deg);
    }
  
    75% {
      transform: translateX(-6px) rotate(1.2deg);
    }
  }
  
  

@font-face {
    font-family: "Speed+";
    src: url('../assets/fonts/speed+.ttf'),
         url('../assets/fonts/speed+2.ttf');
}