html,body { height: 100%; } body { margin: 0px; background: #f4f3ef; font-family: Arial, Tahoma ,Helvetica, sans-serif; color: #2b2b2b; font-size: 12px; padding: 0; line-height: 20px; } /*@font-face { font-family: bodoni; src: url('BodoniXT.ttf'); }*/ .imgpng { /*behavior: url("iepngfix.htc"); */ } a { text-decoration: none; border: 0px; color: #2b2b2b; } img { border: 0px; } input { border-radius: 0; -webkit-appearance: none; } .content { max-width: 990px; width: 100%; } .header { width: 100%; height: 90px; background: white url("../images/wbgmenu.jpg") right top no-repeat; position: relative; } .headermobile { width: 100%; height: 60px; background: white; min-width: 315px; display: none; position: absolute; top: 0; z-index: 999; } .headermobilei { width: 100%; height: 60px; background: black; min-width: 315px; display: none; position: absolute; top: 0; z-index: 999; } .headermobilespace { width: 100%; height: 60px; display: none; } .logomobile { height: 60px; float:left; width: 50%; } .logomobile img { max-width: 227px; width: 100%; } .menumobile { float: left; padding-right: 2%; width: 48%; text-align: right; padding-top: 10px; } .cartblack { background: white url("../images/cart-black.png") center top no-repeat; background-size: 40px 40px; width: 40px; height: 31px; text-align:center; color: white; float: right; padding-top:9px; font-size: 10px; font-weight: 100; margin-right: 5px; cursor: pointer; } .cartwhite { background: black url("../images/cart-white.png") center top no-repeat; background-size: 40px 40px; width: 40px; height: 31px; text-align:center; color: black; float: right; padding-top:9px; font-size: 10px; font-weight: 100; margin-right: 5px; cursor: pointer; } .menupopupwhite { width: 100%; position: absolute; top: 60px; max-width: 990px; z-index: 9999; height: auto; background: white; padding-top:1px; display: none; overflow-y: scroll; padding-right: 17px; /*height: 100%;*/ } .menupopupsearch { width: 100%; position: absolute; top: 60px; max-width: 990px; z-index: 9998; height: auto; background: white; display: none; } .newslide { width: 100%; max-width: 990px; position: relative; } .newimgslide { width: 100%; } .newslide-content { position: absolute; top: 0px; left:0px; width: 100%; height: 100%; display: none; } .newslide-contentinside { position: absolute; bottom: 20px; left: 20px; width: calc(100% - 20px); } .newslide-img img { width: 100%; } .newslide-title { font-size: 24px; font-family: georgia; line-height: 1.2; } .newslide-desc { margin-top: 5px; font-size: 12px; font-family: arial; line-height: 1.5; } .newslidethumb { margin-top:10px; text-align: center; } .newslidethumb img { margin-right: 5px; cursor: pointer; } @media screen{ .headermobile {position:fixed} .headermobilei {position:fixed} .menupopupwhite {position:fixed} .menupopupsearch {position:fixed}} #products-category { display: none; } .menuoverboxmobile { width: 96%; padding-left: 2%; padding-right: 2%; padding-top:5px; float: left; } .menupopcontent { width: 92%; font-size: 12px; color: black; margin-left: 2%; border-top: 1px solid #D2D1D0; padding-top:15px; padding-bottom: 15px; padding-left: 2%; padding-right: 2%; } .menupopcontent2 { width: 92%; font-size: 12px; color: black; margin-left: 2%; padding-top:5px; padding-bottom: 5px; padding-left: 2%; padding-right: 2%; } .menupopcontent a { color: black; text-decoration: none; } .headeri { width: 100%; height: 90px; background: #000000 url("../images/wbgmenu-2.jpg") right top no-repeat; position: relative; } .logo { height: 90px; position: relative; float:left; } .logo img { max-width: 196px; } .htitle { display: none; } .sosmed { position: absolute; margin-top: 5px; right: 100px; z-index: 100; width: 120px; } .menu_01 { float:left; margin-top: 49px; padding-top: 12px; width: 60px; color: #000000; text-align: center; } .menu_01_over { margin-left:176px; padding-bottom: 0px; margin-top: -11px; padding-top: 12px; width: 100px; text-align: center; } .menu_01_overi { margin-left:32px; padding-bottom: 0px; margin-top: -11px; padding-top: 12px; text-align: center; width: 100px; } .menu_02 { float:left; padding-top: 60px; position: relative; z-index: 99; width: 6%; color: #000000; text-align: center; } .menu_03 { float:left; padding-top: 60px; position: relative; z-index: 99; width: 6%; color: #000000; text-align: center; } .menu_04 { float:left; padding-top: 60px; position: relative; z-index: 99; width: 8%; color: #000000; text-align: center; } .menu_kosong { width: 155px; float:left; position: relative; z-index: 99; } .menu_kosong-2 { width: 291px; float:left; position: absolute; z-index: 99; padding-top: 10px; height: 80px; color: #aaaaaa; font-size: 11px; line-height: normal; right: 115px; } .menu_kosong-2i { width: 305px; float:left; position: relative; z-index: 99; padding-top: 10px; height: 80px; color: #aaaaaa; font-size: 11px; line-height: normal; } .menu_kosongi { width: 164px; float:left; position: relative; z-index: 99; } .menu_05 { float:left; padding-top: 60px; position: absolute; z-index: 99; width: 50px; color: #000000; text-align: center; right: 200px; } .menu_06 { float:left; padding-top: 60px; position: absolute; z-index: 99; width: 100px; color: #000000; text-align: center; right: 100px; } .menu_eng { position: absolute; z-index: 99; top: 15px; float:right; right: 45px; width: 35px; height: 28px; } .menu_indo { position: absolute; z-index: 99; top: 15px; float:right; right: 5px; width: 35px; height: 28px; } .menu_search { width: 81px; height: 31px; position: absolute; z-index: 99; right: 10px; top: 52px; float:right; } .textsearch { width: 140px; height: 16px; border: 0px; font-family: arial; color: #808080; margin-top: 5px; margin-left: 5px; } .textsearch2 { width: 97%; height: 20px; border-top: 0px; border-left: 0px; border-right: 0px; border-bottom: 1px solid #D2D1D0; font-family: arial; color: #808080; margin-top: 5px; margin-left: 5px; font-size: 14px; } .menusearchoverframe { width: 100%; max-width: 990px; position: relative; z-index: 1; display: none; } .menusearchover { width: 170px; position: absolute; top:0px; right: 0px; /*background: red;*/ z-index: 1; } .menusearchovercontent { background: #333333; height: 47px; padding-top: 5px; padding-left: 5px; } .menuover { width: 100%; max-width: 990px; height: 434px; position: absolute; top:60px; display:none; z-index: 1; } .menuover-b { width: 185px; height: 360px; position: absolute; top:60px; display:none; z-index: 1; margin-left: 163px; } .menuovercontent { background: #333333; height: 630px; } .menuovercontent-b { background: #333333; height: 380px; } .menuoverbox { width: 15.4%; height: 238px; padding-left: 1%; padding-top:20px; float: left; } .menuoverboxblack { width: 90%; padding-left: 5%; padding-right: 5%; padding-top:20px; float: left; } .menuoverbox-title { font-family: georgia; font-size: 14px; color: #EAEAEA; } .menuoverbox-title a { font-family: georgia; font-size: 16px; color: #EAEAEA; } .menuoverbox-titlem { font-family: georgia; font-size: 16px; color:#7D7D7D; } .menuoverbox-titlem a { font-family: georgia; font-size: 16px; color: #7D7D7D; } .menuoverbox-list { padding-top: 5px; color: #aaaaaa; line-height: 17px; } .menuoverbox-list a { color: #aaaaaa; } .menuoverbox-list a:hover { color: #ffffff; text-decoration: underline; } .menuoverbox-list-2 { padding-top: 5px; color: #aaaaaa; line-height: 17px; } .menuoverbox-list-2 a { color: #aaaaaa; } .menuoverbox-list-2 a:hover { color: #6B6B6B; text-decoration: underline; } .slide { width: 100%; max-width: 990px; height: 520px; /*background: red;*/ } .slide-left { width: 20%; float:left; } .slide-left-content { background: #646361; width: 91%; height: 80px; overflow:hidden; padding-left: 5%; padding-right: 5%; padding-top:10px; padding-bottom: 10px; font-size:12px; } .slide-garis { background: #8b8a88; height: 4px; } .slide-right { width: 80%; float:left; position: relative; z-index:0; } .slide-content { width: 100%; height: 520px; overflow: hidden; position: absolute; z-index:0; display:none; top: 0px; } .prevslide { top: -200px; left: -470px; height: 0px; position: relative; } .nextslide { top: -200px; left: 450px; height: 0px; width:0px; position: relative; } .slidecontent { padding-left:0px; position:absolute; overflow: hidden; width: 100%; height: 520px; left:0px; top:0px; } .gambar { position:absolute; left: 0px; top: 0px; width: 100%; height: 520px; } .home-content { padding-left: 2%; } .home-box-01 { width: 40%; padding-right: 3%; float: left; color: #808080; } .home-box-01a { width: 55%; padding-right: 0px; float: left; color: #808080; } .home-box-02 { width: 18%; padding-right: 1%; padding-left: 1%; float: left; color: #646361; line-height: normal; padding-bottom: 25px; } .home-box-02 a { color: #646361; text-decoration: none; border: 0px; } .home-box-03 { width: 23%; padding-left: 1%; padding-right: 1%; float: left; color: #646361; line-height: normal; padding-bottom: 25px; } .home-box-03 a { color: #646361; text-decoration: none; border: 0px; } .home-box-04 { width: 23%; padding-left: 1%; padding-right: 1%; float: left; color: #646361; line-height: normal; padding-bottom: 25px; } .home-box-04 a { color: #646361; text-decoration: none; border: 0px; } .home-box-inside { height: 20px; overflow:hidden; float: left; } .home-box-qdetail { float: left; position: relative; top:-20px; } .catalog-box { width: 31%; padding-right: 1%; padding-left: 1%; float: left; color: #646361; line-height: normal; padding-bottom: 25px; } .catalog-box a { color: #646361; text-decoration: none; border: 0px; } .textqty { width: 100%; height: 12px; border: 1px solid #fece3f; font-family: arial; color: #808080; float: left; margin-left:5px; max-width: 30px; } .buttonhidecart { width: 50px; height: 16px; border: 1px solid #808080; font-family: arial; font-size: 9px; color: #808080; float: left; margin-left:5px; cursor: pointer; } .cartform-01 { width: 30%; float: left; text-align: left; } .cartform-02 { width: 70%; float: left; text-align: right; } .garis-batas-01 { background: url("../images/titikhome-1.png") left top no-repeat; width: 365px; height: 6px; padding-right: 25px; float: left; } .garis-batas-01a { background: url("../images/pembatas01.png") center top no-repeat; width: 100%; height: 1px; padding-right: 0px; float: center; } .garis-batas-02 { background: url("../images/titikhome-2.png") left top no-repeat; width: 560px; height: 6px; padding-right: 25px; float: left; } .garis-batas-03 { background: url("../images/titikhome-3.png") left top no-repeat; max-width: 957px; width: 98%; height: 5px; padding-right: 1%; margin-left:1%; float: left; } .product-title-1 { padding-top: 10px; color: #646361; font-size: 14px; height: 30px; } .product-title-2 { color: #646361; font-size: 11px; height: 15px; } .content-umum { max-width: 990px; width: 100%; background: #f8f8f6; padding-top: 15px; padding-bottom: 15px; line-height: 18px; } .content-inside-frame { width: 96%; padding-left: 2%; padding-right: 2%; } .content-inside-01 { width: 15%; float: left; } .content-inside-02 { width: 83%; float: left; padding-left: 2%; } .content-umum-atas { font-size: 11px; color: #aaaaaa; text-align: left; } .content-umum-atas a { font-size: 11px; color: #aaaaaa; text-align: left; } .content-about { max-width: 990px; width: 100%; background: #fbfbfa url(../images/bgbody.jpg) center top no-repeat; border-top: 1px solid #f4f3ef; padding-top: 15px; padding-left: 0%; padding-right: 0%; line-height: 18px; color: #aaaaaa; font-size: 12px; } .content-about-r { max-width: 990px; width: 100%; background: #fbfbfa url(../images/ab-raphael.jpg) center top no-repeat; border-top: 1px solid #f4f3ef; padding-top: 15px; padding-left: 0%; padding-right: 0%; line-height: 18px; color: #aaaaaa; font-size: 12px; } .content-about-column { float: left; width: 48%; text-align:center; padding: 1%; } .content-contact-1 { max-width: 990px; width: 100%; background: #f8f8f6; border-top: 1px solid #f4f3ef; padding-top: 15px; line-height: 18px; } .content-contact-2 { max-width: 990px; width: 100%; background: #f6f6f3; border-bottom: 1px solid #f4f3ef; padding-top: 0px; padding-left: 0px; padding-right: 0px; line-height: 18px; color: #646361; font-size: 12px; } .contact-1 { background: url(../images/contact-1.jpg) center top no-repeat; height: 17px; max-width: 990px; width: 100%; } .contact-column { width: 48%; padding-left: 1%; padding-right: 1%; float: left; } .contact-column-0 { width: 48%; padding-left: 1%; padding-right: 1%; float: left; } .contact-column-1a { width: 49%; padding-left: 0%; padding-right: 1%; float: left; } .contact-column-1b { width: 49%; padding-left: 1%; padding-right: 0%; float: left; } .contact-column-3 { width: 31%; padding-left: 1%; padding-right: 1%; float: left; } .contact-column-4 { width: 23%; padding-left: 1%; padding-right: 1%; float: left; } .contact-column-5 { width: 18%; padding-left: 1%; padding-right: 1%; float: left; } .contact-column-6 { width: 38%; padding-left: 1%; padding-right: 1%; float: left; } .contact-column-7 { width: 78%; padding-left: 1%; padding-right: 1%; float: left; } .about-title { color: #646361; font-size:28px; font-family: georgia; padding-top: 10px; padding-bottom: 10px; } .about-1 { color: #646361; font-size:18px; font-family: georgia; width: 90%; line-height: 24px; } .about-2 { width: 90%; } .about-3 { color: #646361; font-size:21px; font-family: georgia; padding-top: 7px; padding-bottom: 10px; } .bayangan { max-width: 960px; width: 90%; background: #fbfbfa url(../images/bayangan.jpg) center top no-repeat; height:29px; } .content-about-2 { max-width: 990px; width: 100%; background: #f8f8f6 url(../images/bghanduk.jpg) right bottom no-repeat; border-bottom: 1px solid #f4f3ef; padding: 0px; line-height: 18px; color: #646361; font-size: 12px; } .about-4 { font-size:18px; font-family: georgia; padding-bottom: 10px; color: #aaaaaa; } .about-5 { color: #646361; font-size:14px; font-family: georgia; width: 70%; line-height: 18px; } .category-title { font-family: georgia; font-size: 18px; } .catlist-title-1 { font-family: georgia; font-size: 14px; font-weight: bolder; padding-top: 10px; color: #646361; height: 40px; } .category-1 { font-family: georgia; font-size: 14px; font-weight: bolder; } .category-1 a { color: #646361; } .category-sub { font-family: arial; font-size: 12px; color: #aaaaaa; } .category-sub a { color: #aaaaaa; } .category-sub a:hover { color: #fece3f; text-decoration: underline; } .category-subact { font-family: arial; font-size: 12px; color: #fece3f; text-decoration: underline; } .category-subact a { color: #fece3f; text-decoration: underline; } .category-box-01 { width: 48%; padding-left: 1%; padding-right: 1%; float: left; color: #646361; } .category-box-02 { width: 170px; margin-left: 25px; float: left; height: 240px; color: #646361; line-height: normal; } .category-box-02 a { color: #646361; text-decoration: none; border: 0px; } .category-title-1 { font-family: georgia; font-size: 14px; height: 35px; padding-top:5px; } .category-title-1h { font-family: georgia; font-size: 14px; height: 35px; padding-top:5px; } .productstitle-box-01 { width: 69%; padding-left: 1%; float: left; height: 40px; color: #646361; } .productstitle-box-02 { width: 30%; margin-left: 0px; float: left; height: 25px; text-align: right; color: #646361; line-height: normal; margin-top: 15px; } .categorylist-box-01 { width: 100%; margin-left: 0px; color: #646361; } .categorylist-box-01a { max-width: 975px; width: 98%; padding-left: 1%; padding-right: 1%; margin-left: 0px; color: #646361; } .categorylist-more a { color: #fece3f; font-size: 15px; } .categorylist-more a:hover { color: #646361; } .selectclass { background: #fece3f; color: white; font-size: 12px; border: 0px; width: 100px; font-family: arial; } .garis-batas-01c { background: url("../images/titik-category-1.png") left top no-repeat; width: 48%; height: 9px; padding-left: 1%; padding-right: 1%; float: left; } .garis-batas-02c { background: url("../images/titik-category-2.png") left top no-repeat; width: 48%; height: 9px; padding-left: 1%; padding-right: 1%; float: left; } .garis-batas-03c { background: url("../images/titik-category-3.png") left top no-repeat; width: 99%; height: 8px; margin-left: 0px; float: left; } .tableqty { font-size: 20px; font-family: georgia; } .textqty-2 { width: 100%; height: 26px; border: 1px solid #fece3f; font-family: arial; color: #808080; font-size: 18px; margin-left:5px; } .itemalso { font-family: georgia; font-size: 15px; padding-left: 25px; } .void { width: 100%; height: 8px; } .void_2 { width: 100%; height: 15px; } .void_3 { width: 100%; height: 25px; } .void_4 { width: 100%; height: 20px; } .void_5 { width: 100%; height: 5px; } .footer { width: 100%; background: #edece8; } .footer-content { max-width: 960px; width: 100%; font-size: 11px; } .footer-01 { width: 25%; float: left; line-height: 22px; color: #808080; padding-top: 5px; text-align: left; font-size: 12px; } .footer-01 a { color: #808080; } .footer-04 { width: 200px; float: left; line-height: 16px; color: #808080; padding-top: 5px; text-align: right; } .footer-02 { width: 50%; float: left; line-height: 16px; color: #808080; padding-top: 5px; text-align: left; } .footer-02 a { color: #808080; } .footer-03 { width: 200px; float: left; line-height: 16px; color: #808080; padding-top: 5px; text-align: right; } .footer-03 a { color: #808080; } .atas { margin-top: 20px; width: 100%; padding-top:10px; height: 110px; /*background: url("../images/atas-01.png") center top no-repeat;*/ } .batas { height: 150px; /*background: url("../images/batas.png") center bottom no-repeat;*/ margin-bottom:40px; } .batas_pr { height: 50px; /*background: url("../images/batas.png") center bottom no-repeat;*/ margin-bottom:40px; } .batas_3 { margin-top:30px; height: 20px; /*background: url("../images/batas.png") center center no-repeat;*/ } .batas_4 { margin-top:0px; height: 20px; /*background: url("../images/batas.png") center center no-repeat;*/ } .batas_5 { margin-top:15px; height: 10px; /*background: url("../images/batas.png") center center no-repeat;*/ } .batas_6 { margin-top:15px; height: 30px; /*background: url("../images/batas.png") center center no-repeat;*/ filter:alpha(opacity=0.2); -moz-opacity:0.2; -khtml-opacity: 0.2; opacity: 0.2; } .batas_7 { margin-top:35px; height: 30px; margin-bottom:25px; /*background: url("../images/batas.png") center center no-repeat;*/ } .batas_8 { margin-top:5px; height: 30px; margin-bottom:15px; /*background: url("../images/batasblog.png") center center no-repeat;*/ } .batas_9 { margin-top:15px; height: 30px; /*background: url("../images/batas.png") left center no-repeat;*/ filter:alpha(opacity=0.2); -moz-opacity:0.2; -khtml-opacity: 0.2; opacity: 0.2; } .header_01 { font-size: 24px; } .text_01 { width: 700px; text-align: justify; } .batas_2 { margin-top:70px; margin-bottom:10px; height: 25px; /*background: url("../images/batas-abu.png") center center no-repeat;*/ } .title_01 { font-family: bodoni,georgia; font-size: 25px; color: #000000; } .title_02 { font-family: bodoni,georgia; font-size: 22px; color: #000000; line-height: 24px; } .title_03 { font-family: bodoni,georgia; font-size: 18px; color: #000000; line-height: 24px; } .titleframe { width: 100%; height: 150px; overflow: hidden; } .titleframe_inside { position: relative; /*top:-45px; left:0px;*/ } .bgproducts { /*background: url("../images/bgproduct.jpg") center top repeat-x;*/ width: 100%; height: 1001px; } .imageproduct { width: 170px; height: 270px; border: 1px solid #e1e1e1; float:left; margin-left:5px; margin-bottom:5px; } .productframe { width: 715px; height: 554px; overflow: hidden; } .productframe_inside { position:relative; top:0px; left:0px; } img { border: 0px; } img a { border: 0px; } .subscriptitle { font-family: bodoni,georgia; font-size: 35px; color: black; padding-top:15px; } .bgsubs { /*background: url(../images/bgsub.jpg) center top no-repeat;*/ width: 211px; height: 203px; padding-top: 45px; float:left; margin-left: 35px; font-family: georgia; color:black; font-size: 18px; line-height: 20px; } .subscripcontent { width: 990px; } .productslefttitle { font-family: bodoni,georgia; font-size: 18px; } .bgproductslist { /*background: url(../images/shadowkanan.png) right center no-repeat;*/ } .bgproductsdetail { /*background: url(../images/shadowkanan-2.png) right top no-repeat;*/ } .twitter-share-button { float: right; margin-right:-12px; } .textfield { font-size: 12px; font-family: georgia; border: 1px solid #E8E8E8; width: 100%; } .form-control { border: 1px solid #E8E8E8; width: 96%; padding: 7px 2%; font-size: 13px;color: #707070; } .submitbutton { background-color: #fece3f; font-family: georgia; color:white; border: 0px; padding-left: 30px; padding-right: 30px; padding-top:5px; padding-bottom:5px; font-size: 12px; } .videoWrapper { position: relative; padding-bottom: 51.25%; /* 16:9 */ padding-top: 25px; height: 0; } .videoWrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } #mobilesh { display: none; } .contact-form { width: 95%; } .register-form { width: 95%; color:#646361; } #recaptcha_image img { max-width: 98%; } .imgframe { position: relative; width: 100%; } .imgproduct { position: absolute; width: 100%; top: 0px; left: 0px; } .imgslide { display: none; width: 100%; } #mobileslide { display: none; } .imground { clear: both; padding-top: 10px; width: 100%; text-align: center; } .imground img { margin-left: 10px; cursor: pointer; width: 20px; } .content-blog { max-width: 990px; width: 100%; padding-top: 0px; padding-bottom: 0px; line-height: 18px; } .blogheader { width: 100%; position: relative; overflow: hidden; } .blogheader img { width: 100%; } .blogsearch { position: absolute; top: 32%; width: 90%; left: 5%; text-align: left; height: 30px; transition:all .2s ease; } .blogsearchtitle { font-size: 50px; font-family: georgia; color: #646664; transition:all .2s ease; } .blogsearchtitle-2 { font-size: 20px; color: #646664; margin-top: 30px; transition:all .2s ease; } .blogsearchbox { background: white; width: 50%; padding: 10px 5px; margin-top: 30px; transition:all .2s ease; } .blogsearchinput { width: 70%; float: left; padding: 5px 20px; font-size: 13px; font-family: arial; color: #6D6E71; border: 0; outline: none; } .blogsearchbutton { width: 17%; float: right; border: 1px solid #DFDFDF; color: #6D6E71; background: white; padding: 5px 0; font-size: 13px; font-family: arial; margin-right: 1%; } .blogbody { padding-top: 30px; padding-bottom: 30px; } .blogbody hr { margin-top: 0px; margin-bottom: 30px; } .blogcol-01 { width: 47%; float: left; padding-right: 3%; padding-bottom: 30px; text-align: left; transition:all .2s ease; } .blogcol-02 { width: 47%; float: left; padding-left: 3%; padding-bottom: 30px; text-align: left; transition:all .2s ease; } .blogcol-03 { width: 100%; float: left; padding-bottom: 30px; text-align: left; position: relative; transition:all .2s ease; } .blogimg img { width: 100%; } .blogdate { padding-top: 15px; font-size: 12px; color: #646664; } .blogtitle { padding-top: 10px; font-size: 24px; line-height: 30px; color: #646664; } .blogdesc { padding-top: 10px; font-size: 12px; color: #646664; } .blogimgr { width: 47%; } .blogimgr img { width: 100%; } .blogbaris { position: absolute; bottom: 30px; right: 0px; width: 47%; } .bloglayer { background: #000; opacity: 0.5; filter: alpha(opacity=50); /* For IE8 and earlier */ position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; } .blogdetailframe { width: 96; padding: 2%; background: #fff; } .blogdetailcontainer { position: absolute; bottom: 50px; width: 84%; left: 8%; text-align: left; color: white; } .blogdetailtitle { font-size: 40px; font-family: georgia; line-height: 48px; } .blogdetailtitle a { color: white; } .blogdetailauthor { padding-top: 20px; } .blogdetailauthor img { float: left; padding-right: 20px; width: 64px; } .blogdetailauthortext { padding-top: 5px; font-size: 12px; line-height: 20px; color: white; } .blogdetailbody { padding: 30px 0; } .blogdetailcolumn-01 { float: left; width: 23%; } .blogdetailcolumn-02 { float: left; width: 77%; padding-left: 0%; color: #808080; text-align: left; } .blogdetailcolumn-02 img { display: block; margin-left: auto; margin-right: auto; max-width: 100%; } .blogdetailicon { width: 35px; height: 35px; position: relative; overflow: hidden; margin-bottom: 10px; } .blogdetailicon img { position: absolute; top: 0px; left: 0px; width: 100%; } .blogdetailicon img:hover { position: absolute; top: -35px; left: 0px; } @media (max-width: 850px) { .menu_01 { float:left; margin-top: 49px; padding-top: 12px; width: 50px; color: #000000; text-align: center; } .menu_01_over { margin-left:171px; padding-bottom: 0px; margin-top: -11px; padding-top: 12px; width: 100px; text-align: center; } } @media (max-width: 770px) { #mobileslide { display: block; } #deskslide { display: none; } body { background: #FFF; } .category-title-1 { font-size: 12px; } .category-title-1h { font-size: 12px; } .header { display: none; } .headeri { display: none; } .headermobile { display: block; } .headermobilei { display: block; } .headermobilespace { display: block; } .textsearch2 { width: 95%; } .slide { padding-left: 1%; width: 98%; height: auto; /*background: red;*/ } .slide-left { width: 100%; height: auto; display: none; } .slide-left-content { width: 18%; height: 75px; overflow:hidden; padding-left: 1%; padding-right: 1%; padding-top:10px; padding-bottom: 10px; font-size:11px; float: left; line-height: 14px; } .slide-garis { display: none; } .slide-right { width: 100%; } .slide-content { width: 100%; height: auto; } .slide-content img { width: 100%; } .imgslide { display: block; } /*.slide { display: none; }*/ .home-content { padding-left: 0%; } .home-box-01 { width: 96%; padding-right: 2%; padding-left: 2%; display: none; } .home-box-01a { width: 96%; padding-right: 2%; padding-left: 2%; padding-top: 15px; } #mobilev { display: none; } #mobilesh { display: block; } .home-box-02 { width: 23%; padding-bottom: 50px; } #homeproduct-5 { display: none; } .footer-01 { width: 48%; float: left; padding-left: 2%; } .footer-02 { width: 100%; clear: both; text-align: center; border-top: 1px solid #a9a9a8; margin-top: 15px; padding-top:10px; } .home-content { padding-left: 0%; } .content-inside-01 { display: none; } .content-inside-02 { width: 98%; float: left; padding-left: 1%; padding-right: 1%; } .content-about-2 { background: #f8f8f6; } .blogsearch { top: 20%; } .blogsearchtitle { font-size: 32px; } .blogsearchtitle-2 { font-size: 16px; margin-top: 15px; } .blogsearchbox { background: white; width: 65%; padding: 10px 5px; margin-top: 15px; } .blogbody { padding: 30px 2%; width: 96%; } .blogcol-03 .blogdesc { display: none; } .blogtitle { font-size: 20px; line-height: 26px; } .blogdetailcontainer { bottom: 40px; width: 90%; left: 5%; } .blogdetailtitle { font-size: 32px; font-family: georgia; line-height: 40px; } .blogdetailcolumn-01 { float: none; width: 100%; display: flex; justify-content: center; align-items: center; align-content: center; flex-wrap: wrap; } .blogdetailcolumn-02 { float: left; width: 100%; padding-left: 0%; margin-top: 30px; } .blogdetailicon { float: none; display: flex; justify-content: center; align-items: center; margin-bottom: 0px; margin-right: 10px; } } @media (max-width: 600px) { .category-title-1 { text-align:center; } .home-box-02 { width: 31%; } #homeproduct-4 { display: none; } .home-box-03 { width: 31%; } .home-box-04 { width: 31%; } .category-box-01 { width: 31%; } .content-about-column { clear: both; width: 98%; padding-left: 1%; padding-right: 1%; padding-top: 20px; } .contact-column-1 { width: 98%; padding-top: 25px; } .contact-column { width: 98%; padding-top: 25px; } .contact-column-0 { width: 98%; padding-top: 0px; } .contact-column-3 { width: 98%; padding-top: 0px; } .contact-column-4 { width: 48%; padding-left: 1%; padding-right: 1%; float: left; height: 130px; } .cartform-01 { width: 100%; text-align: center; padding-bottom: 25px; } .cartform-02 { width: 100%; text-align: center; } .blogsearch { top: 20%; } .blogsearchtitle { font-size: 32px; } .blogsearchtitle-2 { font-size: 16px; margin-top: 15px; } .blogsearchbox { background: white; width: 75%; padding: 10px 5px; margin-top: 15px; } .blogcol-01 { width: 100%; float: left; padding-left: 0px; padding-right: 0px; padding-bottom: 30px; text-align: left; position: relative; } .blogcol-03 { width: 100%; float: left; padding-left: 0px; padding-right: 0px; padding-bottom: 30px; text-align: left; position: relative; } .blogcol-02 { width: 100%; float: left; padding-left: 0px; padding-right: 0px; padding-bottom: 30px; text-align: left; position: relative; } .blogimgr { width: 100%; } .blogbaris { position: relative; right:0px; bottom: 0px; width: 100%; padding:0px; } .blogcol-03 .blogdesc { display: block; } .blogdetailcontainer { bottom: 30px; width: 90%; left: 5%; } .blogdetailtitle { font-size: 28px; font-family: georgia; line-height: 36px; } .blogdetailauthor { padding-top: 10px; } } @media (max-width: 480px) { .textsearch2 { width: 90%; } .home-box-02 { width: 48%; } #homeproduct-4 { display: inline; } .home-box-03 { width: 48%; } .home-box-04 { width: 48%; } .category-box-01 { width: 48%; } .catalog-box { width: 98%; padding-top: 25px; } .productstitle-box-01 { width: 98%; padding-left: 1%; text-align:center; } .productstitle-box-02 { width: 98%; padding-left: 1%; text-align: center; margin-top: 10px; } .blogsearch { top: 18%; width: 95%; left: 2%; text-align: center; } .blogsearchtitle { font-size: 28px; } .blogsearchtitle-2 { display: none; } .blogsearchbox { background: white; width: 97%; padding: 10px 5px; margin-top: 15px; } .blogdetailcontainer { bottom: 20px; width: 90%; left: 5%; } .blogdetailtitle { font-size: 20px; font-family: georgia; line-height: 28px; } .blogdetailauthor { padding-top: 10px; } .contact-column-4 { width: 98%; height: auto; } .contact-column-5 { width: 98%; } .contact-column-6 { width: 98%; } .contact-column-7 { width: 98%; } .newslide-contentinside { position: absolute; bottom: 10px; left: 10px; width: calc(100% - 10px); } .newslide-title { font-size: 18px; font-family: georgia; line-height: 1.2; } .newslide-desc { margin-top: 5px; font-size: 11px; font-family: arial; line-height: 1.5; } .newslidethumb img { width: 10px; margin-right: 2px; } } @media (max-width: 360px) { /*.home-box-02 { width: 94%; padding-left:3%; }*/ .category-title-1 { text-align:center; } #homeproduct-5 { display: inline; } /*.home-box-03 { width: 98%; }*/ .home-box-04 { width: 98%; } .category-box-01 { width: 98%; } .blogsearchinput { width: 65%; float: left; padding: 5px 20px; font-size: 13px; font-family: arial; color: #6D6E71; border: 0; outline: none; } .blogsearchbutton { width: 20%; float: right; border: 1px solid #DFDFDF; color: #6D6E71; background: white; padding: 5px 0; font-size: 13px; font-family: arial; margin-right: 1%; } .blogdetailcontainer { bottom: 15px; width: 90%; left: 5%; } .blogdetailtitle { font-size: 14px; font-family: georgia; line-height: 20px; } .blogdetailauthor { padding-top: 10px; } .blogdetailauthor img { width: 45px; } .blogdetailauthortext { padding-top: 5px; font-size: 11px; line-height: 18px; } }