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

#wrapper_menu_mobile{

    display:none;

}

#header_mobile{

   width: 100%;

   background-color: #406a8f;

   border-bottom: 2px solid #779bbc;

   color: #fff;

   display: none;

   padding: 8px 0;

   font-size: 16pt; 

   cursor: pointer;

}

#header_mobile a, #header_mobile span{

    color: #fff;

}

#header_mobile .fa{

    font-size: 23px;

    color: #ddd;

    margin: 3px 5px 0 5px;

    display: inline-block;

}

#header_mobile .searching_field{

    width: 100%;

    position: absolute;

    top: 40px;

    display: none;

    z-index:1;

}

#header_mobile #searching-input input{

    height: 26px;

}

#header_mobile .searching_button .fa{

    font-size: 36px;

    margin: 0;

}

#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; 

    font-weight: bolder;

}

#left_nav_2 img{

    max-height: 28px;

    max-width: 130px;

}

#right_nav_1{

    float: right;

}



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

  #header_mobile {

    display: none !important;

  }

}



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

    .art-nav, 

    .header-container, 

    .header-content,

    .art-content-layout .art-sidebar1,

    .banner-container{

        display:none !important;

    }

    #wrapper,

    .art-sheet,

    .footer{

        width:100% !important;

    }

    #header, #container, #footer{

        width: 98% !important;

        padding: 1% !important;

        margin: 0 auto !important;;

    }

    #wrapper_menu_mobile{

        position: fixed;

        right: 0;

        width: 80%;

        top: 44px;

        overflow:auto;

        display:none;

        z-index:1000;

        background-color: #FFFFFF;

        border-right: 4px solid #000

    }

    

    #wrapper_menu_mobile .side_bar_box{

        padding-right: 8px !important;

    }

    #wrapper_menu_mobile ul li{

        border-bottom: 1px solid #ddd !important;

    }

    #wrapper_menu_mobile #nav_horizontal{

        padding-right:0;

        width: 100% !important;

    }

    #wrapper_menu_mobile #nav_horizontal > ul{

        display: block !important;

        float: none !important;

    }

    #wrapper_menu_mobile #nav_horizontal ul li{

        display: block !important;

        border-right:0 !important;

    }

    #wrapper_menu_mobile #nav_horizontal > ul > li{

        text-align: left !important;

        padding: 10px 0px;

    }

    #wrapper_menu_mobile #nav_horizontal > ul > li,

    #wrapper_menu_mobile #nav_horizontal > ul > li:hover{

      border-top:0;  

    }

    #wrapper_menu_mobile ul li a,

    #wrapper_menu_mobile ul li span,

    #wrapper_menu_mobile #nav_horizontal ul li a, 

    #wrapper_menu_mobile #nav_horizontal ul li span{

        font-size: 14px !important;

        padding: 5px !important;

        color: #406a8f;

        border-top:0;

    }

    #wrapper_menu_mobile  #nav_horizontal ul li:hover {

        background-color: #406a8f !important;

        color: #fff !important;

    }

    #wrapper_menu_mobile  #nav_horizontal ul li:hover > a,

    #wrapper_menu_mobile  #nav_horizontal ul li:hover > span{

        color: #fff !important;

    }

    #wrapper_menu_mobile{

        left: 0  !important;

    }

    #wrapper_menu_mobile .tab_wrapper{

        width:100%;

        display:table;

        text-align: center;

        border-bottom: 2px solid #779bbc;

    }

    #wrapper_menu_mobile .tab{

        display: table-cell;

        padding: 20px;

        cursor: pointer;

        font-size: 14px;

    }

    #wrapper_menu_mobile .tab_active{

        background-color: #332828;

        color: #fff;

    }

   #wrapper_menu_mobile .side_bar_box_head{

       display: none;

   }

    

    #wrapper_menu_mobile #nav_horizontal ul li span.main_menu_cursor_pointer {

        top: 10px !important;

        width: auto !important;

        border: 0 !important;

    }

    #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 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: 10px !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;

      border-radius:0;

      margin: 0 !important;

    }

    #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_content{

      overflow:auto;  

    }

    #wrapper_menu_mobile_content::-webkit-scrollbar {  

        width: 1px !important;  

    }  

    #wrapper_menu_mobile_content::-webkit-scrollbar-track {  

        width: 1px !important;  

        background-color: #F4F4F4;  

    }  

    #wrapper_menu_mobile_content::-webkit-scrollbar-thumb {  

        width: 1px !important;  

        /*background-color: #1C1C1D*/

    }  

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

        width: 1px !important;  

    }

    

    .tree_kategori, .tree_merek, .tree_tipe{

        max-height: none !important;

    }

    #resume,

    #div_tree_kategori,

    #div_tree_merek,

    #left{

        display: none;

    }

    #header_mobile{

        display: block !important;

        z-index: 100000 !important;

    }

    .header-support{

        display:none;

        padding: 5px 1% !important;

        width: 100% !important;

    }

    .header-support .header-support-content{

        width: 100% !important;

    }

    .header-support #social-placer div, .header-support #member-placer div {

        margin-right: 10px !important;

        float: none;

        margin-top: 7px;

        color: #ddd;

    }

    .header-support #member-placer{

        float: left !important;

    }

    #shopping_cart_button_placer {

        display: none !important;

        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;

    }

    #shopping_cart_bt_confirm{

       bottom: 71px; 

    }

    

    #produk-slider {

        display: none !important;

    }

    #produk-slider-detail {

        display: none !important;

    }

    #contact-web {

        float: none !important;

        padding-right: 10px;

        margin: 0px;

        width: 100% !important;

    }





    #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;

  }



    #searching_div{

        padding-top: 0px;

    }

    .searching_text_box input{

        padding:2% !important;

    }

    .searching_text_box input, #submit_pencarian{

        height: 40px;

    }

    #submit_pencarian .fa-search:before{

        display: table-cell;

        vertical-align: middle;

        height: 40px;

    }

    #searching-input, .searching_button, #submit_pencarian{

        padding: 0 !important;

        margin: 0 !important;

    }

    #searching-input{

        float: left !important;

        width: 95% !important;

    }

    .searching_button{

        float: left;

        width: 5% !important;

    }





    #info_box_on_index_1{

        display: none !important;

    }

    table{

        width: 100% !important;

    }

    table td{

    }

    

    .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;

        position: relative !important;

    }

    .box_thumb_produk{

        width: 100%  !important;

    }

    .box_center_image_and_image_note{

        position: relative !important;

    }

    .produk_show{

        padding: 0% !important;

        margin: 1% !important;

        outline: 1px solid #D8D4D4 !important;

        width: 48% !important;

        height: auto !important;

        display: block;

    }

    .box_thumb_produk .button_produk{

        top: 5px;

        left: 5px;

    }

    .box_thumb_produk .produk_additional_text_with_zero_stock {

      bottom: -2px !important;

      left: 0px !important;

    }

    .box_thumb_produk .box_thumb_image{

        height: auto !important;

    }

    .box_thumb_produk .center_image{

        height: 155px !important;

        display: block !important;

    }

    .box_thumb_produk .center_image img{

        max-width: 96% !important;

        max-height: 154px !important;

    }

    .box_thumb_produk .box_thumb_image_note{

        height: 88px;

        outline: 0;

    }

    .produk_meta_description{

        display: none;

    }

    

    

    #produk_content_1{

        margin-right: 0 !important;

        width: 100% !important;

        position: relative;

    }

    #produk_content_1 #div_thumb{

        width: 100% !important;

        margin: 0 !important;

        height: auto !important;

        float: none !important;

    }

    .image_carousel{

        width: 100% !important;

        height: auto !important;

        margin-top: 268px !important;

    }

    #carousel_next, #carousel_prev{

        position: absolute;

        display: block;

        top: 50%;

        height: 50px;

        width: 20px;

    }

    #carousel_next{

        right: 0;

        background:none;

    }

    #carousel_next span:before {

        content: "\f105"

    }

    #carousel_prev{

        left: 0;

        background:none;

    }

    #carousel_prev span:before {

        content: "\f104"

    }

    #produk_content_1 #div_frame{

        display: block;

        float: none;

        position: absolute;

        top: 0;

        width: 96% !important;

        padding: 0 !important;

        height: auto;

    }

    .zoomPad img{

        max-height: 255px !important;

    }

    #produk_content_1 #div_frame .image_ori{

        display:block;

    }

    .caroufredsel_wrapper{

        /*height: auto !important;*/

        width: 100% !important;

        margin: 0 auto !important;

    }

    .zoomPad{

        cursor: initial !important;

    }

    #carousel{

        position: relative !important;

        height: auto !important;

        width: 100%  !important;

    }

    .image_thumb_wraper{

        float: left !important;

        margin: 0 !important;

        margin-bottom: 10px !important;

        width: 30% !important;

        height: 110px !important;

    }

    .image_thumb{

        margin-top: 0px !important;

        width: auto !important;

        height: 100px !important;

        border: 0  !important;

    }

    .image_thumb img{

        width: auto !important;

        max-width: 98% !important;

        max-height: 125px !important;

    }

    #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{

        

    }

    .box_thumb_produk .thumb_harga_produk_container .thumb_harga_produk{

        height: auto !important;

        font-size: 13px !important;

    }

    

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

        max-width: none !important;

        width: 96% !important;

    }

    

    #desktop_version #produk_breadcrumb{

        top: 0px !important;

        width: 96% !important;

        padding:2% !important;

    }

}





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

    .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;

        display:inline-block !important;

    }

    #footer_content_1 div{

        float: none !important;

        text-align: center !important;

        margin-right: 0px !important;

        display:inherit !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) {



}