@media screen and (max-width: 1280px){
    
}
@media screen and (min-width: 1440px){
    
}
@media screen and (max-width: 768px){
    body, html {
      margin: 0;
      background: url("../img/bg.png");
      background-repeat: repeat;
/*      background-size: cover;
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;*/
    }
    .row.search-line {
        margin: 0 auto;
        padding: 0 6%;
    }
    .row.logo{
        margin: 9% auto;
    }
    .container{
        padding: 0 5%;
        min-height: 9.5%;
    }
    .container-fluid{
        height: 100vh;
    }
    .row.search-line .col-md-12{
        padding: 0;
    }
    img.logo-dki {
        margin: 0 auto;
        width: 65%;
    }
    i.icon-search:after {
        top: 8px;
        right: 15px;
    }
    input[type='text']{
        padding-left: 12px;
        height: 35px;
        width: 100%;
        margin: 0 auto;
        font-size: 10px;
    }
    ul#menu li.menubar {
        display: inline-flex;
        width: 75px;
        height: 90px;
        margin: 0 2% 5% 0;
    }
    .row.menu-bar{
        padding: 0 6%;
        margin: 10% auto;
    }
    .row.menu-bar .col-md-12,.col-xs-12{
        margin: 0 auto;
        padding: 0;
    }
    .collapse.col-md-12.collapse.in.col-md-12{
        /*transition: all 0.25s ease;*/
        padding: 0;
        width:80%;
    }
    ul#submenu{    
        list-style-type: none;
        font-weight: 700;
        text-transform: capitalize;
        padding-left: 0 !important;
        text-align: left;
        /*for collumn listing*/
        -moz-column-count: 3;
        -moz-column-gap: 15px;
        -webkit-column-count: 3;
        -webkit-column-gap: 15px;
        column-count: 3;
        column-gap: 15px;
    }
    ul#submenu a{
       font-size: 10px;
       line-height: 10px;
    }
    .well{
        padding: 10px;
        display: block;
    }
    #footer{
        /*position: fixed;*/
        bottom:0;
        min-height: 70px;
        padding: 1%;
    }
    ul#menu li.menubar>a.icon-pemerintahan:before{
        padding: 0;
        content: '';
        left: 13px;
        top: 10px;
        height: 50px;
        width: 50px;
        position: absolute;
        background: url(../img/mobile-icon/lp.png) no-repeat 0px 0px;}
    ul#menu li.menubar>a.icon-pemerintahan:after{
        content: "Pemerintahan";
        bottom: 2px;
        left: 12px;
        position: absolute;
        display: inline-flex;
        font-size: 7px;
    }
    ul#menu li.menubar>a.icon-pemerintahan.active:before{
         padding: 0;
        content: '';
        left: 13px;
        top: 10px;
        height: 50px;
        width: 50px;
        position: absolute;
        background: url(../img/mobile-icon/lp_on.png) no-repeat 0px 0px;}
    /* === === */

    /* ===Selayang Pandang=== */
    ul#menu li.menubar>a.icon-selayang-pandang:before{
        content: '';
        left: 13px;
        top: 10px;
        display: block;
        height: 50px;
        width: 50px;
        position: absolute;
        background: url(../img/mobile-icon/selayang_pandang.png) no-repeat 0px 0px;}

    ul#menu li.menubar>a.icon-selayang-pandang:after{
        content: "Selayang Pandang";
        bottom: 2px;
        left: 5px;
        position: absolute;
        display: inline-flex;
        font-size: 7px;
    }
    ul#menu li.menubar>a.icon-selayang-pandang.active:before{
        content: '';
        left: 13px;
        top: 10px;
        display: block;
        height: 50px;
        width: 50px;
        position: absolute;
        background: url(../img/mobile-icon/selayang_pandang_on.png) no-repeat 0px 0px;}
    /* === === */

    /* === 3 === */
    ul#menu li.menubar>a.icon-informasi-publik:before{
        content: '';
        left: 13px;
        top: 10px;
        display: block;
        height: 50px;
        width: 50px;
        position: absolute;
        background: url(../img/mobile-icon/informasi_publik.png) no-repeat 0px 0px;}
    ul#menu li.menubar>a.icon-informasi-publik:after{
        content: "Aplikasi\aInformasi\aPublik";
        white-space: pre;
        bottom: 0px;
        left: 20px;
        position: absolute;
        display: inline-flex;
        font-size: 7px;
    }
    ul#menu li.menubar>a.icon-informasi-publik.active:before{
        content: '';
        left: 13px;
        top: 10px;
        display: block;
        height: 50px;
        width: 50px;
        position: absolute;
        background: url(../img/mobile-icon/informasi_publik_on.png) no-repeat 0px 0px;}
    /* === === */

    /* === BERITA === */
    ul#menu li.menubar>a.icon-berita:before{
        content: '';
        left: 13px;
        top: 10px;
        display: block;
        height:50px;
        width: 50px;
        position: absolute;
        background: url(../img/mobile-icon/berita.png) no-repeat 0px 0px;}
    ul#menu li.menubar>a.icon-berita:after{
        content: "Berita Tasikmalaya";
        bottom: 2px;
        left: 5px;
        position: absolute;
        display: inline-flex;
        font-size: 7px;
    }
    ul#menu li.menubar>a.icon-berita.active:before{
        content: '';
        left: 13px;
        top: 10px;
        display: block;
        height:50px;
        width: 50px;
        position: absolute;
        background: url(../img/mobile-icon/berita_on.png) no-repeat 0px 0px;}
    /*=== ===*/

    /*=== 5 ===*/
   ul#menu li.menubar>a.icon-layanan-publik:before{
        content: '';
        left: 13px;
        top: 10px;
        display: block;
        height: 50px;
        width: 50px;
        position: absolute;
        background: url(../img/mobile-icon/layanan_publik.png) no-repeat 0px 0px;}
    ul#menu li.menubar>a.icon-layanan-publik:after{
        content: "Layanan\aPublik";
        white-space: pre;
        bottom: 2px;
        left: 25px;
        position: absolute;
        display: inline-flex;
        font-size: 7px;
    }
    ul#menu li.menubar>a.icon-layanan-publik.active:before{
        content: '';
        left: 13px;
        top: 10px;
        display: block;
        height: 50px;
        width: 50px;
        position: absolute;
        background: url(../img/mobile-icon/layanan_publik_on.png) no-repeat 0px 0px;}
    /*=== ===*/

    
    /*=== 6 ===*/
    ul#menu li.menubar>a.icon-open-data:before{
        content: '';
        left: 13px;
        top: 10px;
        display: block;
        height: 50px;
        width: 50px;
        position: absolute;
        background: url(../img/mobile-icon/open_data.png) no-repeat 0px 0px;}
    ul#menu li.menubar>a.icon-open-data:after{
        content: "Open Data";
        bottom: 2px;
        left: 20px;
        position: absolute;
        display: inline-flex;
        font-size: 7px;
    }
    ul#menu li.menubar>a.icon-open-data.active:before{
       content: '';
        left: 13px;
        top: 10px;
        display: block;
        height: 50px;
        width: 50px;
        position: absolute;
        background: url(../img/mobile-icon/open_data_on.png) no-repeat 0px 0px;}
    /*=== ===*/

    /*===SARANA DAN PRASARANA===*/
    ul#menu li.menubar>a.icon-informasi-keuangan:before{
        content: '';
        left: 13px;
        top: 10px;
        display: block;
        height: 50px;
        width: 50px;
        position: absolute;
        background: url(../img/mobile-icon/sarana_prasarana.png) no-repeat 0px 0px;}
    ul#menu li.menubar>a.icon-informasi-keuangan:after{
        content: "Sarana\aPrasarana";
        white-space: pre;
        bottom: 2px;
        left:21px;
        position: absolute;
        display: inline-flex;
        font-size: 7px;
    }
    ul#menu li.menubar>a.icon-informasi-keuangan.active:before{
        content: '';
        left: 13px;
        top: 10px;
        display: block;
        height: 50px;
        width: 50px;
        position: absolute;
        background: url(../img/mobile-icon/sarana_prasarana_on.png) no-repeat 0px 0px;}
    /*=== ===*/

    /*=== 8 ===*/
    ul#menu li.menubar>a.icon-ppid:before{
        content: '';
        left: 13px;
        top: 10px;
        display: block;
        height: 50px;
        width: 50px;
        position: absolute;
        background: url(../img/mobile-icon/PPID.png) no-repeat 0px 0px;}
    ul#menu li.menubar>a.icon-ppid:after{
        content: "PPID";
        bottom: 2px;
        left: 30px;
        position: absolute;
        display: inline-flex;
        font-size: 7px;
    }
    ul#menu li.menubar>a.icon-ppid.active:before{
        content: '';
        left: 13px;
        top: 10px;
        display: block;
        height: 50px;
        width: 50px;
        position: absolute;
        background: url(../img/mobile-icon/PPID_on.png) no-repeat 0px 0px;}
    /*=== ===*/


    /*=== 9 ===*/
    ul#menu li.menubar>a.icon-subdomain:before{
        content: '';
        left: 13px;
        top: 10px;
        display: block;
        height: 50px;
        width: 50px;
        position: absolute;
        background: url(../img/mobile-icon/sub_domain.png) no-repeat 0px 0px;}
    ul#menu li.menubar>a.icon-subdomain:after{
        content: "Sub Domain";
        bottom: 2px;
        left: 18px;
        position: absolute;
        display: inline-flex;
        font-size: 7px;
    }
    ul#menu li.menubar>a.icon-subdomain.active:before{
        content: '';
        left: 13px;
        top: 10px;
        display: block;
        height: 50px;
        width: 50px;
        position: absolute;
        background: url(../img/mobile-icon/sub_domain_on.png) no-repeat 0px 0px;}

    /*=== ===*/

    /*=== 10 ===*/
    ul#menu li.menubar>a.icon-jakarta-smart-city:before{
        content: '';
        left: 13px;
        top: 10px;
        display: block;
        height: 50px;
        width: 50px;
        position: absolute;
        background: url(../img/mobile-icon/jakarta_smart_city.png) no-repeat 0px 0px;}
    ul#menu li.menubar>a.icon-jakarta-smart-city:after{
        content: "Tasikmalaya\aSmart City";
        white-space: pre;
        bottom: 2px;
        left: 18px;
        position: absolute;
        display: inline-flex;
        font-size: 7px;
    }
    ul#menu li.menubar>a.icon-jakarta-smart-city.active:before{
        content: '';
        left: 13px;
        top: 10px;
        display: block;
        height: 50px;
        width: 50px;
        position: absolute;
        background: url(../img/mobile-icon/jakarta_smart_city_on.png) no-repeat 0px 0px;}
    /*=== ===*/

    /*=== 11 ===*/
    ul#menu li.menubar>a.icon-statistik-jakarta:before{
        content: '';
        left: 13px;
        top: 10px;
        display: block;
        height: 50px;
        width: 50px;
        position: absolute;
        background: url(../img/mobile-icon/statistik_jakarta.png) no-repeat 0px 0px;}
    ul#menu li.menubar>a.icon-statistik-jakarta:after{
        content: "Statistik Jakarta";
        bottom: 2px;
        left: 8px;
        position: absolute;
        display: inline-flex;
        font-size: 7px;
    }
    ul#menu li.menubar>a.icon-statistik-jakarta.active:before{
        content: '';
        left: 13px;
        top: 10px;
        display: block;
        height: 50px;
        width: 50px;
        position: absolute;
        background: url(../img/mobile-icon/statistik_jakarta_on.png) no-repeat 0px 0px;}
    /*=== ===*/

    /*=== 12 ===*/
    ul#menu li.menubar>a.icon-informasi-pajak:before{
        content: '';
        left: 13px;
        top: 10px;
        display: block;
        height: 50px;
        width: 50px;
        position: absolute;
        background: url(../img/mobile-icon/pendidikan.png) no-repeat 0px 0px;}
        
    ul#menu li.menubar>a.icon-informasi-pajak:after{
        content: "Fasilitas\aPendidikan";
        white-space: pre;
        bottom: 0px;
        left: 20px;
        position: absolute;
        display: inline-flex;
        font-size: 7px;
    }
    ul#menu li.menubar>a.icon-informasi-pajak.active:before{
        content: '';
        left: 13px;
        top: 10px;
        display: block;
        height: 50px;
        width: 50px;
        position: absolute;
        background: url(../img/mobile-icon/pendidikan_on.png) no-repeat 0px 0px;}
    /*=== ===*/
    a.btn.button-explore{
        min-width: 40%;
    }
}