@media all and (max-width:767px){

    

    /* header

    ================================================================================================================= */
    /* .inner-game-page{
        margin-top: 0;
        padding-top: 25px;
    } */
    .desktop-bg-game{
        display: none;
    }
    .mobile-bg-game{
        display: block;
    }
    /* .iframe-game{
        width: 100%;
        right: 0;
        top: 20%;
    } */
    .logo_astra{
        max-width: 75px;
    }
    .lang_header a{
        width: 25px;
        height: 25px;
        font-size: 12px;
        line-height: 25px;
    }
    .haeder_menu{
        display: none;
    }
    .hamburger_menu{
        width: 25px;
        display: inline-block;
    }
    .toggle_menu{
        width: 100%;
        min-width: 100%;
    }
    .block_white_head{
        padding: 15px 0;
        position: inherit;
    }
    .toggle_menu.actived{
        top: 55px;
    }
    .cols3,.colsProfile,.colsKarya{
        width: 100%;
    }
    .item_carouselKarya{
        margin-left: -20px;
        margin-right: -20px;
    }

    /* middle homepage

    ================================================================================================================= */
    #slider_home{
        padding:0;
    }
    .caption_mural{
        min-height: 90vh;
    }
    .background_slider{
        padding: 100px 0px 100px 0px;
        min-height: 700px;
    }
    .owl-carousel_banner.owl-theme .owl-dots{
        width: 100%;
        max-width: 100%;
        text-align: center;
        left: 0;
        margin-left: 0;
    }
    .owl-carousel_banner.owl-theme .owl-nav.disabled+.owl-dots{
        text-align: center;
    }
    .inner_abs_title{
        padding: 15px;
    }
    .inner_abs_title h3{
        font-size: 18px;
    }
    .blue_button_icon{
        padding:5px 8px;
        font-size: 13px;
    }
    .caption_slider h3{
        font-size: 20px;
    }
    .caption_slider h1{
        font-size: 34px;
    }
    .caption_slider p{
        font-size: 14px;
    }
    .thumb_slider{
        padding-left: 0;
        width: 100%;
    }
    .inner_slider, .inner_slider .wrapper{
        flex-wrap: wrap;
    }
    .caption_slider{
        padding-right: 0;
        width: 100%;
        text-align: center;
    }
    .with_pad{
        padding: 40px 0;
    }
    .cols2,.cols4,.cols3_inline,.cols4_inline{
        width: 100%;
    }
    .caption_about h1, .section_title h3{
        font-size: 34px;
    }
    .caption_about p{
        font-size: 15px;
    }
    .images_about{
        display: none;
    }
    .blue_bt{
        margin: 15px 10px;
    }
    .inner_footer{
        flex-wrap: wrap;
    }
    .footer_socmed,.inner_footer p{
        width: 100%;
        margin-bottom: 15px;
        text-align: center;
    }
    .title_form h3{
        font-size: 26px;
    }
    .section_form{
        padding: 0;
    }
    .poin_peringkat{
        font-size: 24px;
    }
    .name_peringkat span{
        font-size: 18px;
    }
    .name_peringkat .name_alias{
        font-size: 36px;
    }
    .bt_jawaban{
        font-size: 17px;
        height: 60px;
    }
    .box_pertanyaan{
        padding: 70px 0px 10px 0px
    }
    .title_result{
        font-size: 30px;
        margin-bottom: 50px;
    }
    .pointNumber{
        font-size: 80px;
    }
    .pointNumber span{
        font-size: 30px;
    }
    .supergrafis-desktop{
        display: none;
    }
    .supergrafis-mobile{
        display: block;
    }
    .left_sticky{
        position: relative;
        top: 0;
    }
    #howto_home{
        margin-top: 0;
    }
    .box_howto{
        display: flex;
        align-items: center;
        min-height: auto;
        padding: 20px;
    }
    .caption_howto{
        padding-left: 15px;
    }
    .caption_howto p{
        margin-bottom: 0;
    }
    #one_page_only{
        padding-bottom: 0;
    }
    #mural2.inner_banner{
        width: 1075px;
    }
    #mural3.inner_banner{
        width: 805px;
    }
    #mural2.inner_banner .pos_info_mural1{
        top: 125px;
        left: 300px;
    }
    #mural2.inner_banner .pos_info_mural2 {
        left: 530px;
        top: 35px;
    }
    #mural2.inner_banner .pos_info_mural3 {
        left: 655px;
        top: 155px;
    }
    #mural2.inner_banner .pos_info_mural4{
        top: 190px;
        left: 820px;
    }
    #mural3.inner_banner .pos_info_mural1 {
        left: 240px;
        top: 60px;
    }
    #mural3.inner_banner .pos_info_mural2 {
        left: 450px;
        top: 195px;
    }
    #mural3.inner_banner .pos_info_mural3 {
        left: 662px;
        top: 100px;
    }
    .frame_list .cols4{
        width: 50%;
    }
    .title-winner h3{
        margin-top: 10px;
    }
    .info-sliders{
        margin-bottom: 10px;
        margin-left: 0;
    }
    .top-justify-between,.title-winner{
        flex-direction: column-reverse;
        align-items: flex-start;
    }

    .generate_code_results .code_row p{
        font-size: 24px;
    }
    #one_page_only_code{
        padding-left: 0;
        padding-right: 0;
    }
    .logo-popup{
        max-width: 95px;
    }
    #popup_menu_dull.showPopupFull .inner_abs_popup,.section_code_generate{
        background: url(../images/background-clawMesin_mobile.png) no-repeat center center; 
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
        padding-left: 20px;
        padding-right: 20px;
    }
    .section_code_generate{
        position: relative;
        min-height: 100vh;
        padding: 150px 20px;
    }
    .offsideCode{
        top: -70px;
    }
    .close_popup{
        top: 0px;
        right: 0px;
    }

    .button_popup_forkom{
        flex-wrap: wrap;
    }

    .button_popup_forkom a{
        width: 100%;
        min-width: 100%;
        margin:  5px 0;
    }
    .title_intro_quiz{
        display: none;
    }

    .intro_quiz{
        padding-top: 26px;
    }
    .intro_quiz .banner_intro{
        margin-left: -20px;
        margin-right: -20px;
    }
    .intro_button{
        margin-top: 10px;
        margin-bottom: -20px;   
    }
    .caption_detail{
        padding-left: 0;
    }
    .element-star,.cloud_element_top,.cloud_element_bottom{
        display: none;
    }
    .element-cloud_mobile1{
        display: block;
        width: 50px;
        position: absolute;
        left: 0;
        top:220px;
    }
    .element-cloud_mobile2{
        display: block;
        width: 50px;
        position: absolute;
        right: 0;
        bottom:50px;
    }
    .autoScrollIndonesian{
        max-height: inherit;
    }
	/* middle contentpage

    ================================================================================================================= */
   
    /* footer

    ================================================================================================================= */

	
}