* {    box-sizing: border-box;} @font-face{     src : url("../fonts/OpenSans-Regular.ttf");     font-family : "Open-sans";} body{    margin:0;    font-family: 'Montserrat', sans-serif;} .article-mode{     background: #fbfbfb;} h1, h2, h3, h4, h5, h6, a{    color: #004aad;    text-decoration: none;    margin-top:0px;}article > h1 > a {    border-left: #fbc422 solid 5px;    padding: 0px 10px;}.colorRed{color:#f00;}.iklan{text-align: center;margin-top: 20px;margin-bottom: 40px;clear: both;}.iklan-margin{margin-bottom: 200px;}.banner{padding: 15px 25px;background: #f4e942;font-size: 14px;border: solid 1px #d0c300;}.container-breadcrumb {    padding: 10px 0px;    color: #888888;    font-size: 12px;}.breadcrumb{font-size: 13px;    padding: 10px 10px;    background-color: #ffffff;    border: solid 1px #f5f5f5;}.row-article{background:#fff;z-index: 1;}.table-responsive{    position:relative;    width:100%;    margin-bottom: 25px;}table{    border-collapse: collapse;    width: 100%;    margin-bottom: 25px;}.table-responsive table{margin:0px;} table a {     color: #00F;} table a:hover {     text-decoration: none;}thead > tr {    border-bottom: solid #fbc422;    border-top: solid 1px #1f3456;    border-left: solid 1px #1f3456;    border-right: solid 1px #1f3456;}tbody > tr {    border-bottom: solid 2px #f5f5f5;    border-left: solid 1px #f5f5f5;    border-right: solid 1px #f5f5f5;}td, th {    padding: 15px;    text-align: left;    font-size: 12px;}.table-responsive th {    background: #004aad;    background-image: url(https://katalog.or.id/source/img/diagonaltexture.png);    color: #fff;}.table-responsive tr:hover {    background: #fbfbfb;}tr.hide {     display: none;}a:hover{text-decoration: underline;}.table-responsive a:hover {     color: #ff0050;     transition: all .3s ease;}.moreRow{padding: 0;}.showMoreRow {    display: block;    width: 100%;    padding: 12px;    cursor: pointer;    text-align: center;    background: #2a4673;    color: #ffffff;    font-weight: bold;    font-size: 14px;}.table-responsive .showMoreRow:hover {    color: #ffffff;    background: #5a85ca;}.pagingTable {    text-align: center;    padding: 15px;    border: solid 1px #f5f5f5;    border-top: none;    background: #fbfbfb;}.pagingTable > span {    padding: 5px 10px;    box-shadow: 0 1px 1px rgba(0,0,0,.16);    cursor: pointer;    display: inline-block;    font-size: 14px;    background: #fff;}.pagingTable > span:hover, .pagingTable > span.active {    background: #004aad;    color: #fff;} p {    font-size: 14px;    line-height: 40px;    text-align: justify;} .row{    float:left;    width:100%;    position:relative;} .content-wrapper > .container > .row{     border: solid 1px #f5f5f5;}.frm-content{margin: 127px auto 105px;padding-bottom: 0px;width: 500px;text-align: center;position: relative;overflow: hidden;}/*DESAIN INDEX BARU SEPERTI WIKIPRICE*/.index-mode .frm-content{margin: 0;width: 100%;    background: #ffffff;height: unset;padding: 0;}.index-mode .brand {    float: left;    padding: 16px 0px;}.index-mode .container.frm-cari-container {    float: right;    padding: 23px 0px;    width: 80%;}.index-mode .paling-dicari a {    color: #003c66;    padding: 3px 5px;    background: #e9e6e6;font-size: 12px;display: inline-block;    line-height: 15px;}.index-mode p.paling-dicari {    width: 100%;    float: left;    color: #000;    background: #f1f1f1;    margin: 0;    border-bottom: solid 1px #c7c7c7;    padding: 10px 0px;line-height: 30px;text-align: left;}.index-mode p.paling-dicari span.container {    display: block;}.index-mode input.txt-query{    padding: 10px 25px;}/*----------------------------------*/ .brand{     padding: 20px 0px 25px;     position: relative;     margin: auto;     text-align: center;} .brand img{     /*width: 144px;*/} .brand .main-img{     /*width: 144px;*/     margin: auto;} .img-block{     width: 100%;     height: 100%;     position: absolute;     top: 0;     left: 0;}.container.frm-cari-container{    width: inherit;} form.frm-cari {     position: relative;     width: 100%;} input.txt-query {     width: 100%;     padding: 15px 25px;     outline: none;     border: solid 1px #f5f5f5;     background: #fbfbfb;} input.txt-query:hover, input.txt-query:active, input.txt-query:focus {     border: solid 1px #007ece;     transition: all .7s ease;     background: #fff;     box-shadow: #ededed 2px 2px 5px;} button.btn-cari{     display: none;     float: left;     position: absolute;     top: 0px;     right: 0px;     border: none;     box-shadow: 0 2px 2px 0 rgba(0,0,0,0.16), 0 0 0 1px rgba(0,0,0,0.08);     padding: 23px;     background: #81b3b3;     outline: none;} button.btn-cari:hover {     cursor: pointer;} button.btn-cari span.icon-cari{     width: 28px;     height: 24px;     background-image: url(https://katalog.or.id/source/img/icons.png);     background-repeat: no-repeat;     position: absolute;     top: 10px;     left: 10px;} .header {     margin-bottom: 25px;    padding: 0px 25px;} .content-wrapper{     margin-bottom:25px;}.container{width: 1170px;margin: auto;position: relative;} article {     width: 850px;     margin-bottom: 25px;     float:left;     background: #fff;     padding: 3.994%;} .icon-table, .icon-picture, .icon-balance{     width: 50px;     height: 40px;     padding: 5px 15px;} .icon-table:before{     content: "";     background-image: url(https://katalog.or.id/source/img/icons.png);     background-repeat: no-repeat;     background-position: -164px 0px;     width: 20px;     height: 25px;     display: block;} .icon-picture:before{     content: "";     background-image: url(https://katalog.or.id/source/img/icons.png);     background-repeat: no-repeat;     background-position: -194px 0px;     width: 20px;     height: 25px;     display: block;} .icon-balance:before{     content: "";     background-image: url(https://katalog.or.id/source/img/icons.png);     background-repeat: no-repeat;     background-position: -225px 0px;     width: 20px;     height: 25px;     display: block;} .thumbnail-wrapper{     text-align:center;     padding:15px;     border:solid 1px #ececec;     margin:0px auto 25px;     position: relative;} .thumbnail-caption {     font-size: 14px;     padding: 15px 15px 0px;} .thumbnail-wrapper img{     width:100%;} .thumbnail-wrapper-bottom {     width: 100%!important;}.thumbnail-wrapper-bottom > img {    min-height: 180px;    max-height: 180px;    min-width: 180px;    max-width: 180px;margin: 5px;border: solid 5px #ffffff;} .img-tron {height: 400px;position: relative;overflow: hidden;border: solid 1px #ececec;background: #fbfbfb;    box-shadow: #e8e8e8 0px 0px 40px inset;} .img-tron img {     height: 100%;     width: auto;}span.img-pager {    width: 50px;    height: 50px;    position: absolute;    top: 40%;    background: #81b3b3;    padding: 5px 15px;    box-shadow: 0px 1px 1px rgba(0,0,0,.16);cursor:pointer;}span.img-pager.img-prev:before, span.img-pager.img-next:before {content: " ";    display: block;position: relative;}span.img-pager.img-prev:before {    border-right: solid #fbfbfb 13px;    border-top: solid transparent 11px;    border-bottom: solid transparent 11px;    top: 9px;    right: 5px;}span.img-pager.img-next:before {    border-left: solid #fbfbfb 13px;    border-top: solid transparent 11px;    border-bottom: solid transparent 11px;    top: 9px;    left: 5px;}span.img-pager:hover {    box-shadow: 0px 1px 16px rgb(0, 83, 224) inset;}.img-prev {     left: 5px;}.img-next {     right: 5px;}.city{    text-align:left;    color:#000}.tags {    font-size: 13px;    line-height: 29px;    display: flex;    flex-flow: wrap;    align-content: flex-start;    justify-content: left;}.tags a {    background-color: #e9e6e6;    padding: 0px 10px;    margin: 0 6px 6px 0;    color: #1b191a;    border-radius: 15px;    cursor: pointer;    text-decoration: none;    font-size: 10px;    line-height: 23px;}.sharer {    float: left;    width: 100%;    text-align: center;    padding: 25px;    background: #fbfbfb;    border: solid 1px #ebebeb;}.sharer a {    text-decoration: none;}.btn-sharer {    display: inline-block;    padding: 10px 15px;    color: #fff;    box-shadow: 0 1px 1px rgba(0,0,0,.16);    font-size: 14px;    width: 225px;    margin-bottom: 15px;    position: relative;    overflow: hidden;}.sharer .btn-sharer:before {    background: url(https://katalog.or.id/source/img/sm-icons.png);}.sharer .btn-sharer:before {    content: " ";    width: 50px;    height: 50px;    display: block;    position: absolute;    top: -4px;    left: -10px;    z-index: 0;    -ms-transform: rotate(-25deg);    -webkit-transform: rotate(-25deg);    -moz-transform: rotate(-25deg);    -o-transform: rotate(-25deg);    transform: rotate(-25deg);    -webkit-transition: all .5s ease;    -moz-transition: all .5s ease;    -o-transition: all .5s ease;    -ms-transition: all .5s ease;    transition: all .5s ease;}.sharer .btn-sharer:hover:before {    -ms-transform: rotate(0deg);    -webkit-transform: rotate(0deg);    -moz-transform: rotate(0deg);    -o-transform: rotate(0deg);    transform: rotate(0deg);    -webkit-transition: all .5s ease;    -moz-transition: all .5s ease;    -o-transition: all .5s ease;    -ms-transition: all .5s ease;    transition: all .5s ease;    -webkit-filter: grayscale(0%);    -moz-filter: grayscale(0%);    -o-filter: grayscale(0%);    -ms-filter: grayscale(0%);    filter: grayscale(0%);}.sharer-facebook {    background: #4285f4;}.sharer .sharer-facebook:before {    background-position: -9px -7px;}.sharer-google {    background: #f44249;}.sharer .sharer-google:before {    background-position: 326px -7px;}.sharer-twitter {    background: #42caf4;}.sharer .sharer-twitter:before {    background-position: 121px -7px;} .side-bar {     width: 315px;     float: right;     padding: 45px 45px 0px 0px;} .widget-wrapper{     margin-bottom:25px;} .widget-title {padding: 10px;border-left: solid 5px #fbc422;font-weight: bold;    background: #004aad;    background-image: url(https://katalog.or.id/source/img/diagonaltexture.png);color: #fff;box-shadow: 0 1px 1px rgba(0,0,0,.16);} .widget-content {     font-size: 14px;     padding: 25px 0px;} .side-bar ul {     padding: 0;     margin: 0;} .side-bar ul li {     list-style: none;} .side-bar ul li:hover {     background: #f0f0ff;     transition: all .5s ease;} .side-bar ul li a {     display: block;     color: #000;     padding: 15px 10px;} .side-bar ul li:hover a {     text-decoration: none;     padding: 15px;     color: #81b3b3;}.footer {background: #fbfbfb;    color: #848484;    font-size: 13px;    float: left;    width: 100%;    box-shadow: 0 -1px 1px rgba(0,0,0,.16);} .footer .container {     padding: 25px 0px;     overflow: auto;}.footer ul{padding:0;}.footer ul > li{list-style:none;    padding: 3px 0px;} .footer a {     color: #848484;     text-decoration: none;} .footer-widget-wrapper {     width: 33%;     float: left;} .footer a:hover{     text-decoration:underline;} .copyright{     border-bottom: solid 1px #e0dfdf;     background: #fbfbfb;     padding: 15px 0px;     text-align: center;} .sitepage {     float: right;     padding: 3px 5px;} .vdata-wrapper-old{     font-size: 14px;     float: left;     width: 100%;     margin-bottom: 25px;} .vwrapper {    float: left;    width: 100%;    padding: 0px 0px;    border: #848484 solid 1px;} .vmode{     background: #81b3b3;     text-align: right;     float: left;     width: 100%;     color: #fff;} .vmode > b{    border-left: solid 1px #216be5;    float: right;    display: block;    text-align:center;    font-size:18px;} .vmode > span{    padding: 14px 10px;    float: left;    font-weight: bold;    font-size: 11px;     font-family: arial;} .vmode > b.active, .vmode > b:hover {     background: #33bbf0;     cursor: pointer;} .data-content > a > h5{     height: 32px;     margin: 25px 0px;     overflow: hidden;     text-align: left;     font-size: 14px;     font-weight: bold;     font-family: arial;} .data-content > a > .img-wrapper > img{    max-width:100%;    margin: auto;    display: block;    max-height: 151px;} .data-wrapper {    padding: 5px;    width: 23.5%;    display: inline-block;} .data-content {    padding: 10px;    border-radius: 2px;    border: solid 1px #c6c6c6;} .data-content:hover {     background: #42ebf4;     transition: all .5s ease;} .data-content:hover .btn-compare {     background: #929ea3;     color: #fff;     border-top: solid 1px #929ea3;     border-bottom: solid 1px #929ea3;} .data-content a:hover {     text-decoration: none;} .btn-compare {    margin: 10px -10px 0px;    border-top: solid 1px #e7e7e7;    border-bottom: solid 1px #e7e7e7;    padding: 10px 0px;    text-align:center;    box-shadow: 0 1px 1px rgba(0,0,0,.16);} .btn-compare:hover, .btn-compare.active {     background: #81b3b3!important;     border-top: solid 1px #81b3b3!important;     color: #fff;} .price {    color: #00a500;    font-weight: bold;    font-size: 12px;    text-align:left;} .dataHarga {    float: left;    width: 100%;    text-align:center;    margin: 25px 0px 25px;} .dataGrafik {    margin: 10px 0px;} .alertTable, .alertHarga, .alertGrafik{    padding:15px;    float: left;}.alert-msg{width: 100%;position: fixed;display: none;top:250px;}.alert-msg > div{top: 250px;width: 250px;margin: 0px auto;background: rgb(255, 172, 172);border: solid 1px #f00;border-radius: 4px;box-shadow: rgb(255, 0, 0) 0px 0px 5px;font-size: 14px;padding: 10px 25px;color: #fff;text-align: center;} .img-wrapper {    text-align: center;    background: #fff;} .pageHarga {    background: #f2f2f2;    float: left;    width: 100%;    text-align: center;    padding: 25px 0px;} .pageHarga > span {     padding: 10px 15px;     display: -webkit-inline-box;     box-shadow: 0 1px 1px rgba(0,0,0,.16);     background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #e8e8e8), color-stop(100%, #adadad));     margin: 0px 3px;     border: solid 1px #868686;} .pageHarga > span:hover, .pageHarga > span.active{     cursor: pointer;     background: #81b3b3;     background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #81b3b3), color-stop(100%, #0052cc));     color: #fff;     border: solid 1px #003687;} .showAll:hover, .hideAll:hover{    text-decoration:none;    cursor:pointer;    background: #ff7400;} .showAll, .hideAll{     background: #ff9100;     color: #fff!important;     text-align: center;     display: block;     margin-bottom: 25px;     box-shadow: 0 1px 1px rgba(0,0,0,.16);     padding: 10px;} .showAll > b, .hideAll > b{    line-height: 0;    position: relative;    top: 6px;} .ecommerce-wrapper {     background: #adadad;     float: left;     width: 100%;     border-bottom: solid 1px #848484;     position: relative;} .ecommerce-wrapper > span {    float: left;    text-align: center;    height: 40px;    width: 50px;    padding:5px 10px;    position: relative;} .ecommerce-wrapper > span > b{    width:100%;    height:100%;    display:block;    filter: grayscale(100%);} .ecommerce-wrapper > span.active, .ecommerce-wrapper > span:hover{    background: #81b3b3;     box-shadow: #5f5f5f 0px 6px 14px inset;     cursor:pointer;     filter:grayscale(0%);} .ecommerce-wrapper > span.active > b, .ecommerce-wrapper > span:hover > b{    filter:grayscale(0%);} span.compare .notif {    position: absolute;    top: -5px;    right: -5px;    bottom: inherit;    left: inherit;    background: #f00;    border-radius: 4px;    padding: 0px 6px;    font-size: 10px;    display: none;    line-height: 2;} .ecommerce-wrapper span.compare {     padding: 0;     border-left: #848484 solid 1px;     filter: grayscale(0%);     float: right;} select.sorter {     padding: 10px;     border-radius: 0;     background: #ff9100;     color: #fff;     border: solid 1px;     float: right;     margin: 25px 25px 0px;} select.sorter > option{    font-size:12px;} span.compare > b {    font-size: 18px;    line-height: 38px;} .ecommerce-wrapper > span > span {     position: absolute;     bottom: -27px;     left: 0;     background: #ffaa62;     padding: 5px 10px;     color: #fff;     border-radius: 0px 0px 4px 4px;     display: none;} .dloadingHarga{    float:left;    position:relative;    width:100%;} .ecommerce-wrapper > span:hover > span{     display:block;} .dataTables_wrapper{     padding: 25px;} .dataTables_wrapper .dataTables_paginate {     float: right;     text-align: right;     padding-top: 18px;} .dataTables_wrapper .dataTables_info {     clear: both;     float: left;     padding-top: 25px;} .dataTables_wrapper .dataTables_length {     float: left;     padding: 25px 0px;} .dataTables_wrapper .dataTables_filter {     float: right;     text-align: right;     padding: 25px 0px;}.populer-item-today {    text-align: center;    margin: 25px 0px;}.item-wrapper {    border: solid #e7e7e7;    display: inline-block;    width: 19.5%;    vertical-align: top;    margin-bottom: 15px;    text-align: left;    padding: 5px;}.item-wrapper > a {    display: block;}.item-wrapper > a:hover {    text-decoration: none;}.item-wrapper > a > * {    margin-bottom: 15px;}.item-thumbnail {    text-align: center;    width: 100%;    padding-top: 100%;    position: relative;    background-position: center;    background-repeat: no-repeat;    background-size: cover;}.item-name {    overflow: hidden;}.item-name > h3 {    height: 48px;    margin: 0;    font-weight: unset;}.item-price {    color: #006f23;    font-weight: bold;}.item-location {    font-size: 12px;    color: #000;}.pindah-iklan{text-align:center;display:none;} @media (min-width:1028px){     .data-content > a > .img-wrapper > img {        height: 152px!important;    }.thumbnail-wrapper-bottom > img.active, .thumbnail-wrapper-bottom > img:hover {    border: solid 5px #81b3b3;box-shadow: 0px 1px 3px rgb(130, 130, 130);cursor: pointer;transition: all .5s ease;}} @media (max-width:767px){.pindah-iklan{display:block;}     .header{         margin-bottom: 0px;         padding: 0px 25px 25px;         background: #81b3b3;    }     .frm-content {         margin: 40px auto 0px;         width: 100%;         height: 550px;         padding: 0px 25px;    }.index-mode .frm-content{background:none;}.index-mode .brand {float: none;}.index-mode .container.frm-cari-container {float: none;margin: 0;width: 100%;}.index-mode button.btn-cari {display: none;}.index-mode .container {padding: 0px 15px;}     .brand {        text-align:center;    }     .brand img{        width: 150px;    }     .brand .main-img{        width: 150px;    }     button.btn-cari{         display: block;    }     .container{        width:100%;    }     article, .side-bar{        display:block;        position:inherit;        width: 100%;        float: left;    }.item-wrapper {width: 45%;}     .table-responsive{         overflow-x:scroll;         border:solid 1px #ececec;    }     .img-tron{         display:none;         height:auto;    }     .img-tron img {         height: auto;         width: 100%;    }     .copyright, .sitepage {         float:none;         text-align:center;         display:block;    }     .data-wrapper{        width: 45%;        max-height: none;    }     .data-content > a > .img-wrapper > img {        height: 100px!important;    }     .dataHarga{        overflow-y: scroll;        height: 425px;    }     .thumbnail-wrapper{        width:100%;    }     .sharer{         background: #f5f5f5;         padding: 25px 0px 0px;    }     .btn-sharer{         margin:0;         margin-bottom: 25px;         width: 90%;    }     .side-bar {        padding:0;    }     .footer-widget-wrapper {         width: 100%;         margin-bottom: 25px;    }     .footer .container{         padding: 25px 25px 0px;    }     .iklan-header {         display:none;    }} @media screen and (min-width: 768px){    .thumbnail-wrapper{         width: 470px;    }    .header .container {        background: #ffffff;        padding: 0px 25px 25px;        box-shadow: 0px 6px 15px -10px #ababab;    }    .iklan-header {         float: right;         position: absolute;         top: 20px;         right: 25px;         width: 728px;         height: 90px;         background: #efefef;         display:none;    }}.bonus-wrapper ul {margin: 0;padding: 0;position: relative;overflow: auto;}.bonus-wrapper ul li {list-style: none;float: left;}.bonus-wrapper ul li a {padding: 10px;display: block;border: solid 1px #f0f0ff;border-bottom: solid 3px #f0f0ff;}.bonus-wrapper ul li a:hover, .bonus-wrapper ul li a.active {background: #f0f0ff;color: #000;text-decoration: none;border-bottom: solid 3px #81b3b3;}.bonus-isi {border: solid 1px #f0f0ff;padding: 15px;}.bonus-isi p{line-height: 25px;}.bonus-wrapper table {border: solid 1px;}.bonus-wrapper table th, .bonus-wrapper table td {border: none;border-bottom: solid 1px;}@media (max-width:673px){.bonus-wrapper ul li {float:none;}}.empty-result{width:100%;background: rgba(255, 0, 0, 0.22);padding:25px;color:#f00;text-align:center;}.vdata-bar {    background: #004aad !important;    background-image: url(https://api.katalog.or.id/source/img/diagonaltexture.png) !important;}.vdata-page-wrapper span:hover, .vdata-page-wrapper span.active {    background: #004aad !important;}.custom-iklan{    text-align: center;    background: #81b3b3;    background-image: url(https://hargano.com/source/img/diagonaltexture.png);    box-shadow: 0 1px 1px rgba(0,0,0,.16);    padding: 20px;}.custom-iklan h2, .custom-iklan h3, .custom-iklan a{    color: #fff;}.list-content{    line-height: 4;}