/*----------------------------- Header Mobile ---------------------------*/
#wrapper_nav_mobile, #wrapper_menu_mobile{
    display:none;
}
 #nav_mobile_menu{
    display: none;
}
#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{
    /*padding: 5px;*/
    /*color: white;*/
    /*width: 20px;*/
    /*height: 18px;*/
    /*text-align: center;*/
    /*border-radius: 3px;*/
}
@media screen and (max-width: 1012px) {
  #header_mobile {
    display: none !important;
  }
}
@media screen and (max-width: 767px) {
    #header_content_1, .header_member{
        display:none;
    }
    .header_social_container{
        padding-top: 10px;
    }
    #wrapper_nav_mobile, #wrapper_menu_mobile{
        position: fixed;
        right: 0;
        width: 80%;
        top: 50px;
        overflow:auto;
    }
    #wrapper_menu_mobile{
        left: 0  !important;
        background-color: #E4E4E4;
    }
    #wrapper_menu_mobile #nav_horizontal{
        float: none;
    }
    #wrapper_menu_mobile #nav_horizontal li{
        display:block !important;
        text-align: left !important;
    }
    
    #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{
        padding: 15px;
    }
    #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_menu_mobile #nav_horizontal ul li span.main_menu_cursor_pointer{
        border:0;
    }
    #wrapper_menu_mobile #nav_horizontal ul li span.main_menu_cursor_pointer:hover{
        background-color: transparent;
    }
    #wrapper_menu_mobile #nav_horizontal ul li span.main_menu_cursor_pointer:after{
        color: #383636 !important;
    }
    #wrapper_menu_mobile #nav_horizontal ul li span.main_menu_cursor_pointer:hover:after{
        color: #383636 !important;
    }
    
    #wrapper_menu_mobile .member_menu{
        margin-bottom: 20px;
        border-bottom: 1px solid silver;
        text-align: center;
    }
    #wrapper_menu_mobile .member_menu ul{
        list-style:none;
        padding:0;
    }
    #wrapper_menu_mobile .member_menu ul li{
        padding: 5px 20px;
    }
    
    #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 2% !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_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;
      height: 100px !important;
      padding: 0 !important;;
    }
    #searching_div{
        width: 100% !important;
        position: fixed;
        top: 46px;
        left: 0;
        padding: 10px;
        display:none;
    }
    .searching_text_box input{
        height: 30px;
    }
    #tree_produk_tipe, #tree_produk_merek, #tree_kategori{
        /*display: none;*/
    }
    #info_box_on_index_1{
        display: none !important;
    }
    table{
        width: 100% !important;
    }
    table td{
    }
    
    .produk_show{
        width: 50%  !important;
        margin: 0 0 10px 0px !important;
        outline: 1px solid #D8D4D4 !important;
    }

    .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{
        height: auto !important;
        width: 100% !important;
    }

    .box_center_image_and_image_note {
        padding: 1rem;
    }
    
    .box_thumb_produk .button_produk{
        display: none;
        top: initial !important;
        bottom: 20px;
    }
    .box_thumb_produk .produk_additional_text_with_zero_stock {
      display: none;  
      bottom: -6px !important;
      left: 0px !important;
    }
    .box_thumb_produk .center_image{
        display: block !important;
    }
    .box_thumb_produk .center_image img{
        max-width: 96% !important;
    }
    
    #produk_content_1{
        margin-right: 0 !important;
        width: 100% !important;
        position: relative;
    }

    
    .add_to_cart_button_container_produk_show #add_to_cart_button{
        width: 96% !important;
    }
    .box_thumb_produk .thumb_harga_produk_container .thumb_harga_produk{
        height: auto !important;
        font-size: 12pt !important;
    }
    .box_thumb_produk .button_produk{
        position: relative;
        padding: 7px;
        margin-top: 25px;
    }
    .box_thumb_produk #add_to_cart_button .add_to_cart{
        display: block;
    }
}


@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;
    }

    .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) {
}