/*----------------------------- Header Mobile ---------------------------*/



#header_mobile{



   width: 100%;



   background-color: #62645F;



   color: silver;



   display: none;



   padding: 8px 0;



   font-size: 16pt; 



   cursor: pointer;



}



#header_mobile a, #header_mobile span{



    color: white;



}



#header_mobile_left{



    float: left;



    margin-left: 5px;



}



#header_mobile_right{



    float: right;



    margin-right: 5px;



}



#left_nav_1{



    float: left; 



    margin-right:10px;



}



#left_nav_2{



    float: left; 



    color: #fff;



    font-weight: bolder;



}



#right_nav_1{



    float: right;



}



#right_nav_1, #left_nav_1{



}







@media screen and (max-width: 1012px) {



  #header_mobile {



    display: none !important;



  }



}







@media screen and (max-width: 980px) {

    #wrapper{

        width:100% !important;

    }

    #header, #container, #footer{

        width: 96% !important;

        padding: 1% !important;

        margin: 0 auto !important;;

    }



    .col-xs-12, .row{

        margin:0 !important;

        padding:0 !important;

    }



    #wrapper_nav_mobile, #wrapper_menu_mobile{

        position: fixed;

        right: 0;

        width: 80%;

        top: 50px;

        overflow:auto;

        display:none;

        z-index:1000;

        background-color: #E4E4E4;

    }



    #wrapper_nav_mobile li a, 

    #wrapper_nav_mobile li span, 

    #wrapper_menu_mobile li a,

    #wrapper_menu_mobile li span{

        font-size: 14px !important;

    }

    #wrapper_menu_mobile{

        left: 0  !important;

    }



    #wrapper_menu_mobile #nav_horizontal > ul{



        display: block;



    }



    #wrapper_menu_mobile #nav_horizontal > ul > li{



        display: block;



        text-align: left !important;



        padding: 0;



    }



    



    #wrapper_menu_mobile #nav_horizontal a, #wrapper_menu_mobile #nav_horizontal span {



      color: #000000;



      border-top: 1px solid #BBBDB9;



    }



    #wrapper_menu_mobile #nav_horizontal li:first-child a, #wrapper_menu_mobile #nav_horizontal li:first-child span{



        border-top: 0;



    }



    #wrapper_menu_mobile #nav_horizontal a:hover, #wrapper_menu_mobile #nav_horizontal span:hover{



        background-color: #F2F2F2;



    }



    #wrapper_menu_mobile #nav_horizontal li a, #wrapper_menu_mobile #nav_horizontal li span{



        width: 100%;



        padding: 13px 5px;



        display: inline-block;



    }



    #wrapper_menu_mobile #nav_horizontal ul li:hover ul{ display: none;}



    #wrapper_menu_mobile #nav_horizontal ul li:hover ul li ul{ display: none;}



    



    #wrapper_menu_mobile #nav_horizontal li ul {



      position: relative !important;



      top: 0px !important;



      min-width: 100% !important;



      width: auto !important;



      background-color: #ECECEC !important;



      padding-top: 10px !important;



      padding: 0px !important;



      border: 0px solid #08C !important;



      z-index:0



    }



    #wrapper_menu_mobile #nav_horizontal li ul li a, #wrapper_menu_mobile #nav_horizontal li ul li span{



        padding: 15px !important;



        padding-left: 30px !important;



    }



    #wrapper_nav_mobile::-webkit-scrollbar {  



        width: 1px !important;  



    }  



    #wrapper_nav_mobile::-webkit-scrollbar-track {  



        width: 1px !important;  



        background-color: #F4F4F4;  



    }  



    #wrapper_nav_mobile::-webkit-scrollbar-thumb {  



        width: 1px !important;  



        background-color: #1C1C1D



    }  



    #wrapper_nav_mobile::-webkit-scrollbar-thumb:hover {  



        width: 1px !important;  



    }



    .tree_kategori, .tree_merek, .tree_tipe{



        max-height: none !important;



    }



    #resume{



        display: none !important;



    }



    #left{



        display: none !important;



    }    



    #right{



        float: none !important;



        width: 100% !important;



        padding: 0 !important;



        position: relative !important;



        margin: 0 auto !important;



    }



     #right article img {



        height: auto !important;



        width: 100% !important;



        /*background: #000;*/



        padding:0px;



    }



    #right h3{



        display: block !important;



        margin-bottom: 15px !important;



        font-size: 16pt !important;



    }



    .banner img {



        height: auto !important;



        width: 100% !important;



        /*background: #000;*/



        padding:0px;



    }



    #header_mobile {



        display: none !important;



    }



    #header_mobile .fa{



        font-size: 27px;



        color: #fff;



        margin: 3px 5px 0 5px;



        display: inline-block;



    }



    #shopping_cart_button_placer {



        display: none;



        position: relative !important;



        top: 0px !important;



        right: 0 !important;



        float: left;



        text-align: center;



        margin-right: 10px;



        text-align: center;



    }



    #shopping_cart_button_placer #shopping{



        margin: 0 auto !important;



    }



    #shopping .shopping_nil_value{



        padding: 0 !important;



    }



    .shopping_cart_icon{



        font-size: inherit !important;



    }



    .shopping_cart_text{



        display: none !important;



    }



    #produk-slider {



        display: none !important;



    }



    #produk-slider-detail {



        display: none !important;



    }



    #contact-web {



        float: none !important;



        padding-right: 10px;



        margin: 0px;



        width: 100% !important;



    }



    #form-contact {



        margin: 0px;



        float: none !important;



        width: 100% !important;



        padding-left: 10px;



        border-radius: 5px;



        border: 1px solid #CCC;



        font-family: calibri;



        font-size: 14px;



    }







    #mobile_version{



        display: block !important;



    }



  #wrapper {



    width: auto !important;



    padding: 0px !important;



  }



  #resume{



    position: absolute !important;



  }



  .progressbar {



    float: none !important;



    width: 100% !important;



    display: block !important;



  }



  .progressbar-placer {



    display: block !important;



  }



  #container{



    position: static !important;



    margin-top: 0px !important;



  }



  #header_mobile{



      display: block !important;



      z-index: 100000 !important;



  }



  #header_wrapper{



      display: none;



  }



  #header {



    position: relative !important;



    width: auto !important;



    height: auto !important;



  }



  #header_left {



    float:none;



    width: 100% !important;



    margin: 0 auto;



    background-color: transparent !important;



    text-align: center !important;



  }



  #header_right {



    float:none;



    width: 100% !important;



    margin: 0 auto !important;



    background-color: transparent !important;



  }



  #header-top{



      display:none;



  }



  #header_logo{



    text-align: center;



    margin: 0 auto;



    /*display: none;*/



  }



    



    #header_nav {



        display: none;



        float:none;



        margin: 0 auto !important;



        margin-top: 10px !important;



    }



  #header_social{



     display:none;



     max-width: none !important;



     margin: 0 auto !important;



     float:none !important;



  }



    #header_info{



        display:none;



        margin: 0 auto !important;



        float:none !important;



    }



    #header_content{



        text-align: center;



        margin: 0 auto;



        width: 100%;



    }



    #header_content_1{



        float:none !important;



        margin: 0 auto !important;



    }



    #header_content_2{



        float:none !important;



        max-width: 620px !important;



        margin: 0 auto !important;



    }



    #header_content_2 .header_social_container{



        margin: 0 auto;



        display: table;



    }



    .banner_slide_show_top {



      width: 100% !important;



      padding: 0 !important;;



    }



        



    #nav_mobile_menu{



        display: none !important;



    }







    #searching_div{



        padding-top: 0px;



    }



    .searching_text_box input{



        padding:2% !important;



    }



    .searching_text_box input, #submit_pencarian{



        height: 30px;



    }



    #submit_pencarian .fa-search:before{



        display: table-cell;



        vertical-align: middle;



        height: 30px;



    }



    #searching-input, .searching_button, #submit_pencarian{



        padding: 0 !important;



        margin: 0 !important;



    }

    #searching-input{

        float: left !important;

        width: 80% !important;

    }

    .searching_button{

        float: left;

        width: 20% !important;

    }

    #info_box_on_index_1{

        display: none !important;

    }

    table{

        width: 100% !important;

    }



    .produk_show,

    .box_thumb_produk .box_thumb_image, 

    .box_thumb_produk .box_thumb_image .center_image_wrapper,

    .box_thumb_produk .box_thumb_image_note,

    .box_thumb_produk .center_image{

        width: 100%  !important;

        height: auto !important;

        position: relative !important;

    }

    .box_center_image_and_image_note{

        position: relative !important;

    }

    .produk_show{

        padding: 2% !important;

        margin: 0 !important;

        margin-bottom: 10px !important;

        outline: 1px solid #D8D4D4 !important;

    }



    .box_thumb_produk .button_produk{



        display: none;



        top: initial !important;



        bottom: 5px;



    }



    .box_thumb_produk .produk_additional_text_with_zero_stock {



      display: none;  



      bottom: -2px !important;



      left: 154px !important;



    }



    .box_thumb_produk .center_image{



        display: block !important;



    }



    .box_thumb_produk .center_image img{



        max-width: 96% !important;



    }



    .produk_meta_description{



        display: block !important;



        margin-top:10px;



        border-top: 1px solid #EAE7E7;



        padding-top: 5px;



        text-align: left;



        font-size: 10pt;



    }





    

    #produk_content_1, #produk_content_2, #produk_content_4{



        float: none !important;



        width: 96% !important;



        padding: 2% !important;



        min-width: 0 !important;



        margin: 0px auto !important;



    }



    .add_to_cart_button_container_produk_show #add_to_cart_button{



        width: 96% !important;



    }



    .box_thumb_produk .thumb_nama_produk{

        height: 32px !important;

        font-size: 10pt !important;

    }

    .box_thumb_produk .thumb_harga_produk_container .thumb_harga_produk{

        height: auto !important;

        font-size: 10pt !important;

    }



    #form-contact div.field input, #form-contact div.field textarea {

        max-width: none !important;

        width: 96% !important;

    }

}







@media screen and (max-width: 600px) {



  







}







@media screen and (max-width: 400px) {



    .image_thumb_wraper{



        width: 50% !important;



    }



    



    h1{



        font-size: 18pt !important;



    }



    h2{



        font-size: 16pt !important;



    }



    h3{



        font-size: 14pt !important;



    }



    #header_content_1, .header_member, #header_content_2 .header_social{



        display:none;



    }



    #header_logo img{



        max-height: 55px !important;



    }



    .zopim{



        display: none;



    }



    #footer{



        line-height: 15pt !important;



    }



    #footer_content_1{



        float: none !important;



        text-align: center !important;



    }



    #footer_content_1 div{



        float: none !important;



        text-align: center !important;



        margin-right: 0px !important;



    }



    #footer_content_2{



        float: none !important;



        text-align: center !important;



    }



    .banner_slide_show_top {



        height: 100px !important;



    }



    .timeline_process {



        font-size:12px;



    }



    



    #produk_content_4 .field label {



      width: 34% !important;



    }



    #produk_content_4 .field span {



      width: 60% !important;



      float: right !important;



      margin-top: 0 !important;



      margin-left: 0 !important;



    }



    #produk_content_4 .field label:after{



      margin-left: 0px !important;



      top: 0 !important;



      right: 0 !important;



    }



    



}







@media screen and (max-width: 150px) {







}