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

#header_mobile{

   width: 100%;

   background-color: #fff;

   border-bottom: 2px solid #62645F;

   color: #524E4E;

   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: #716B6B;

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

        width: 100% !important;

        padding: 0% !important;

        margin: 0 auto !important;;

    }

    #container{

        width: 98% !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: 49px;

        overflow:auto;

        display:none;

        z-index:1000;

        background-color: #fff;

        border-left: 1px solid #ddd;

        border-right: 1px solid #ddd;

    }

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

        float: none !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 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 li .main_menu_cursor_pointer{

        display:none !important;

    }

    #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: #524E4E;

        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;

  }

  

  .content-wrapper{

      width: auto !important;

  }

  .content-wrapper .col-xs-9 {

    width: 100%;

   }

  .content-menu{

    min-width:initial !important;

    padding-top: 0 !important;;

    padding-left: 0 !important;;

    padding-bottom: 0 !important;;

  }

  #header_mobile{

      display: block !important;

      z-index: 500 !important;

  }

    .web_outlet_header_main_view{
        display: none;
    }

    .web_outlet_header_mobile_view{
        display: block;
    }

    .web_outlet_header_mobile_view .fa{
        font-size: 12px !important;
    }

    .kategori-name, .merek-name{
        min-height: 60px;
    }

  #header_wrapper{

      display: none;

  }

  #header {

    position: relative !important;

    width: auto !important;

    height: auto !important;

  }

  #header-right .col-xs-5{

      width: 100% !important;

  }

  #header-right-left {

    float:none;

    display:none;

  }

  #header-top{

      display:none;

  }

  #header_logo{

    text-align: center !important;

    margin: 0 auto;

    /*display: none;*/

  }

    

    #header_nav {

        display: none;

        float:none;

        margin: 0 auto !important;

        margin-top: 10px !important;

    }



    .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: 100% !important;

    }

    .searching_button{

        float: left;

        width: 20% !important;

    }



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

    .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: 96%  !important;

        height: auto !important;

        position: relative !important;

    }

    .box_center_image_and_image_note{

        position: relative !important;

    }

    .produk_show{

        padding: 2% !important;

        margin: 0 !important;

        outline: 0px 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{

        margin-right: 0 !important;

        width: 100% !important;

        position: relative;

    }

    #produk_content_2 #div_thumb{

        width: 100% !important;

        margin: 0 !important;

        height: auto !important;

        float: none !important;

        top: 10px !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: 90% !important;

        padding: 0 !important;

        height: 270px;

    }

    .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: 90px !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: 100% !important;

    }

    .box_thumb_produk .thumb_nama_produk{

        height: auto !important;

        font-size: 13pt !important;

        margin-bottom: 12px !important;

    }

    .box_thumb_produk .thumb_harga_produk_container .thumb_harga_produk{

        height: auto !important;

        font-size: 12pt !important;

    }

    

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

        max-width: none !important;

        width: 96% !important;

    }

    .sidebar-menu{

        display: block !important;

        width:100% !important;

        padding:0% !important;

    }

    .modul_content_side_bar_kategori{

        display: block !important;

    }

    .side_bar_box_head {

        background-color: #54C54B;

        color: #fff;

        padding: 10px;

    }

    .side_bar_menu_body ul{

        padding: 0 0 0 8px  !important;

    }

    .side_bar_menu_body ul li {

        padding: 5px 0  !important;

        position: relative  !important;

    }

    .side_bar_menu_body ul li a{

        width: 100% !important;

        display: block !important;

    }

    .side_bar_menu_body ul li:hover {

        background-color: #FDFCFC ;

        border-bottom: 1px solid #ddd;

    }

    

    #contact_us_placer .media_embed{

        width: 100%;

        margin-top:10px;

    }

}



@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-top{

        /*display: none;*/

    }



    .banner_slide_show_top {

        height: 100px !important;

    }

    .timeline_process {

        font-size:12px;

    }

    produk_content_4{

        top: 10px !important;

    }

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

      right: 0 !important;

    }

    

}



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



}