:root {--primary-color: #151e2c !important;--primary-color-hover: #000513 !important;}.active-color,.text-primary,.primary,.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_today,a {color: #151e2c !important;}*, body {-webkit-print-color-adjust: exact;}#print-area-btn a.btn,.active-background-color,.btn-default:hover,ul.nav-step li.active,.btn-primary,.pagination>.active>a,.pagination>.active>a:focus,.pagination>.active>a:hover,.pagination>.active>span,.pagination>.active>span:focus,.pagination>.active>span:hover {color: #fff !important;background-color: #151e2c !important;-webkit-print-color-adjust: exact;border-color: #000000 !important;}ul.nav-step li.active:after {border-left: 14px solid #151e2c !important;}.active-border-color {border-color: #151e2c !important;}.btn-primary:hover,.icon:hover,#toTop:hover {background-color: #000513 !important;border-color: #000000 !important;}.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_default,.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_current,.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box > div > div.xdsoft_current {background-color: #151e2c !important;box-shadow: #000000 0 1px 3px 0 inset !important;}#responsive-menu-close #responsive-menu-bars {background-color: #151e2c !important;border-color: #000000 !important;}#responsive-menu-close {border-color: #000000 !important;}#btn-responsive-menu {background-color: #000513 !important;}::-webkit-scrollbar {width: 6px;background-color: #000000;}::-webkit-scrollbar-track {background-color: #000000;}::-webkit-scrollbar-thumb {background-color: #151e2c;}.nav-quick-search-paket li.active a,.nav-quick-search-paket li a:hover,body.header-type-2 #main-top-menu > li > .dropdown-menu li.active a,body.header-type-2 #main-top-menu > li > .dropdown-menu li:hover a,.header-menu-7-menu li:hover > a,#rekap-pembayaran-judul,#main-top-menu li.active > a,#main-top-menu li:hover > a,#header-form-transaksi td,#tabel-ringkasan-saldo th,#tabel-rincian-saldo th{background-color: #151e2c !important;-webkit-print-color-adjust: exact;}#header-link .header-link{color: #424b59 !important;}#header-main-form-transaksi #judul-form,#rekap-pembayaran-header #right-side div#invoice-title{color: #151e2c !important;}.table-cetak-form-transaksi td {border-top: 1px solid rgba(21, 30, 44, 0.2) !important;}.table-cetak-form-transaksi.bordered td,.table-cetak-form-transaksi.bordered th{border: 1px solid rgba(21, 30, 44, 0.3) !important;}.table-striped-bordered thead tr th,.table-striped-bordered tbody tr td,#div-ttd-form-transaksi td,#div-keterangan-form-transaksi{border: 1px solid rgba(21, 30, 44, 0.3) !important;}.table-active-color > tbody > tr:nth-of-type(even) td,.active-background-color-light,.table-cetak-form-transaksi > tbody > tr.even > td,#tabel-rincian-saldo tr.even > td,.table-striped-bordered > tbody > tr.even > td{background-color: rgba(21, 30, 44, 0.1) !important;-webkit-print-color-adjust: exact;} .color-5{ color: rgba(21, 30, 44, 0.05) !important; } .background-color-5{ background-color: rgba(21, 30, 44, 0.05) !important; -webkit-print-color-adjust: exact; } .border-color-5{ border-color: rgba(21, 30, 44, 0.05) !important; } .color-10{ color: rgba(21, 30, 44, 0.1) !important; } .background-color-10{ background-color: rgba(21, 30, 44, 0.1) !important; -webkit-print-color-adjust: exact; } .border-color-10{ border-color: rgba(21, 30, 44, 0.1) !important; } .color-15{ color: rgba(21, 30, 44, 0.15) !important; } .background-color-15{ background-color: rgba(21, 30, 44, 0.15) !important; -webkit-print-color-adjust: exact; } .border-color-15{ border-color: rgba(21, 30, 44, 0.15) !important; } .color-20{ color: rgba(21, 30, 44, 0.2) !important; } .background-color-20{ background-color: rgba(21, 30, 44, 0.2) !important; -webkit-print-color-adjust: exact; } .border-color-20{ border-color: rgba(21, 30, 44, 0.2) !important; } .color-25{ color: rgba(21, 30, 44, 0.25) !important; } .background-color-25{ background-color: rgba(21, 30, 44, 0.25) !important; -webkit-print-color-adjust: exact; } .border-color-25{ border-color: rgba(21, 30, 44, 0.25) !important; } .color-30{ color: rgba(21, 30, 44, 0.3) !important; } .background-color-30{ background-color: rgba(21, 30, 44, 0.3) !important; -webkit-print-color-adjust: exact; } .border-color-30{ border-color: rgba(21, 30, 44, 0.3) !important; } .color-35{ color: rgba(21, 30, 44, 0.35) !important; } .background-color-35{ background-color: rgba(21, 30, 44, 0.35) !important; -webkit-print-color-adjust: exact; } .border-color-35{ border-color: rgba(21, 30, 44, 0.35) !important; } .color-40{ color: rgba(21, 30, 44, 0.4) !important; } .background-color-40{ background-color: rgba(21, 30, 44, 0.4) !important; -webkit-print-color-adjust: exact; } .border-color-40{ border-color: rgba(21, 30, 44, 0.4) !important; } .color-45{ color: rgba(21, 30, 44, 0.45) !important; } .background-color-45{ background-color: rgba(21, 30, 44, 0.45) !important; -webkit-print-color-adjust: exact; } .border-color-45{ border-color: rgba(21, 30, 44, 0.45) !important; } .color-50{ color: rgba(21, 30, 44, 0.5) !important; } .background-color-50{ background-color: rgba(21, 30, 44, 0.5) !important; -webkit-print-color-adjust: exact; } .border-color-50{ border-color: rgba(21, 30, 44, 0.5) !important; } .color-55{ color: rgba(21, 30, 44, 0.55) !important; } .background-color-55{ background-color: rgba(21, 30, 44, 0.55) !important; -webkit-print-color-adjust: exact; } .border-color-55{ border-color: rgba(21, 30, 44, 0.55) !important; } .color-60{ color: rgba(21, 30, 44, 0.6) !important; } .background-color-60{ background-color: rgba(21, 30, 44, 0.6) !important; -webkit-print-color-adjust: exact; } .border-color-60{ border-color: rgba(21, 30, 44, 0.6) !important; } .color-65{ color: rgba(21, 30, 44, 0.65) !important; } .background-color-65{ background-color: rgba(21, 30, 44, 0.65) !important; -webkit-print-color-adjust: exact; } .border-color-65{ border-color: rgba(21, 30, 44, 0.65) !important; } .color-70{ color: rgba(21, 30, 44, 0.7) !important; } .background-color-70{ background-color: rgba(21, 30, 44, 0.7) !important; -webkit-print-color-adjust: exact; } .border-color-70{ border-color: rgba(21, 30, 44, 0.7) !important; } .color-75{ color: rgba(21, 30, 44, 0.75) !important; } .background-color-75{ background-color: rgba(21, 30, 44, 0.75) !important; -webkit-print-color-adjust: exact; } .border-color-75{ border-color: rgba(21, 30, 44, 0.75) !important; } .color-80{ color: rgba(21, 30, 44, 0.8) !important; } .background-color-80{ background-color: rgba(21, 30, 44, 0.8) !important; -webkit-print-color-adjust: exact; } .border-color-80{ border-color: rgba(21, 30, 44, 0.8) !important; } .color-85{ color: rgba(21, 30, 44, 0.85) !important; } .background-color-85{ background-color: rgba(21, 30, 44, 0.85) !important; -webkit-print-color-adjust: exact; } .border-color-85{ border-color: rgba(21, 30, 44, 0.85) !important; } .color-90{ color: rgba(21, 30, 44, 0.9) !important; } .background-color-90{ background-color: rgba(21, 30, 44, 0.9) !important; -webkit-print-color-adjust: exact; } .border-color-90{ border-color: rgba(21, 30, 44, 0.9) !important; } .color-95{ color: rgba(21, 30, 44, 0.95) !important; } .background-color-95{ background-color: rgba(21, 30, 44, 0.95) !important; -webkit-print-color-adjust: exact; } .border-color-95{ border-color: rgba(21, 30, 44, 0.95) !important; } .color-100{ color: rgba(21, 30, 44, 1) !important; } .background-color-100{ background-color: rgba(21, 30, 44, 1) !important; -webkit-print-color-adjust: exact; } .border-color-100{ border-color: rgba(21, 30, 44, 1) !important; }@media print {.active-color,.text-primary,.primary,.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_today,a {color: #000513 !important;}.active-background-color,.btn-default:hover,.btn-primary {color: #fff !important;background-color: #151e2c !important;-webkit-print-color-adjust: exact;border-color: #000000 !important;}.active-border-color {border-color: #151e2c !important;}*, body {-webkit-print-color-adjust: exact;}}#m-nav-detail-transaksi .m-nav-link.active {color: #151e2c !important;}:root { /* Tema Warna*/ --primary-color: #151E2C; --top-navbar-color: #333333; --menu-text-color: #151e2c; --title-text-color: #222222; --second-text-color: #8d8d8d; --price-text-color: #151E2C; --priceline-text-color: #6f6f6f; --description-text-color: #707070; --white-color: #ffffff; --grey-color: #808080; --black-color: #1d1d1d; --discount-color : #FFF; /*Font family */ --font-family: 'Poppins', sans-serif; /* Font Weight*/ --light-text: 300; --regular-text: 400; --medium-text: 500; --semibold-text: 600; --bold-text: 700; /* Border Style */ --border-produk : none; --border-radius: 0; --border-top: none; } /* Coding Time */ /* Teknis */ .black-overlay::before { display: block; position: absolute; content: ""; left: 0; top: 0; width: 100%; height: 100%; background: black; opacity: .3; -webkit-filter: brightness(1); filter: brightness(1);} body , html { font-family: var(--font-family); overflow-x: hidden; } h1,h2,h3,h4,h5,h6, a, p { font-family: var(--font-family); } textarea.form-control.mb5.textarea-code { height: 430px; font-size: 14px; font-family: "Poppins" , sans-serif; } .not-home header#main-header { margin-bottom: 60px; } .layout-sll-ready .edit-layout { z-index: 100; } .form-pencarian input.form-control { background: #f1f1f1; border: 0 !important; } .tb-tambah-komponen { z-index: 3; position: relative; } a#btn-cart-floating:hover, body #responsive-menu-btn:hover { filter: brightness(0.9); } #tb-pilih-jenis-komponen .tbpjk-item span { font-size: 11px; } #btn-action-tampilan-pengaturan, #btn-action-tampilan-back ,#btn-action-apply-theme, #btn-action-preview-theme { z-index: 100; } #script-section { } #main-page.kosong::before { display: block; display: block; position: relative; width: 100%; height: 104px; background: white; top: 0; left: 0; } body.not-home #main-page.kosong::before { display: block; height: 186px; } #responsive-menu-btn { transition : 0s; } a#btn-cart-floating { position: absolute; right: 30px; border-radius: 4px; top: 54px; width: 40px; height: 35px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center !important; -ms-flex-align: center !important; align-items: center !important; -webkit-transition : 0s !important; -o-transition : 0s !important; transition : .0s !important; } i.fa.fa-shopping-cart { font-size: 18px !important; } #top-admin-bar { } .flash-sale-box { background: var(--primary-color) !important; } .title-text { padding: 0 10%; } .title-text::before { display: block; font-size: 100px; font-weight: 800; left: 0; top: -58px; right: 0; color: #a9a9a9; opacity: .1; letter-spacing: 4px; } .title-text h2 { font-size: 36px; font-weight: var(--bold-text); margin: 0; } .subtitle-text h3 { font-size: 20px; font-weight: var(--bold-text); line-height: 24px; text-transform: uppercase; margin-top: 0; } .desc-text { padding: 0 20%; } /* .desc-text::after { display: block; content: ""; position: absolute; bottom: -20px; z-index: 1; left: calc(50% - 24px); width: 48px; height: 2px; background: var(--primary-color); } */ .desc-text p { font-size: 15px; margin: 20px 0; word-wrap: break-word; line-height: 28px; } .col-sm-6 .title-text, .col-sm-6 .subtitle-text, .col-sm-6 .desc-text { padding: 0; } .button-biasa a.btn-primary, .ci-text div a.btn-primary{ padding: 10px 25px !important; font-size: 14px !important; text-transform: uppercase !important; z-index: 2; position: relative; } #navbar-section .skssl-menu li.active a { color: var(--primary-color) !important; } #list-menu-responsive { background-color: white !important; } #flash-section .row { margin: 0; } div#flash-section { padding: 0 !important; } /* Akhir Teknis */ /* CSS & JS Sticky */ #btn-cart-floating.sticky, #responsive-menu-btn.sticky, #top-admin-bar.sticky { position: fixed; z-index: 21; -webkit-animation: smooth 1s !important; animation: smooth 1s !important; } header.sticky { position:fixed; top: 0; width: 100%; position: fixed; -webkit-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; z-index: 20; -webkit-animation: smooth 1s; animation: smooth 1s; } header.scroll_up { transform:translateY(-100%); transition: all 0.3s ease-in-out !important; } #navbar-section.sticky { /* padding : 25px 0 !important; */ } /* Akhir CSS & JS /* Animasi Keyframes */ @keyframes animasizoom { 0% { background-size: 100%; } 50% { background-size: 125%; } } @keyframes move { 0% { -webkit-transform: translateY(0px); transform: translateY(0px); } 100% { -webkit-transform: translateY(10px); transform: translateY(10px); } } @keyframes smooth { 0% { opacity: 1; -webkit-transform: translateY(-115px); -ms-transform: translateY(-115px); transform: translateY(-115px); } 100% { opacity: 1; -webkit-transform: translateY(0px); -ms-transform: translateY(0px); transform: translateY(0px); } } @keyframes animasiiphone { 0% { opacity: 1; right: 0; } 100% { opacity: 1; right: 0; } } @keyframes animasiipad { 0% { opacity: 1; right: 75px; } 100% { opacity: 1; right: 75px; } } @keyframes animasiipadpro { 0% { opacity: 1; right: 30px; } 100% { opacity: 1; right: 30px; } } @keyframes animasixl { 0% { opacity: 1; right:75px; } 100% { opacity: 1; right: 75px; } } /* Akhir Animasi Keyframes */ /* Header */ #top-navbar-section .right-content { text-align: right !important; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #top-navbar-section .left-content p { margin: 0; font-weight: var(--regular-text); -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #top-navbar-section .right-content a { margin-right: 12px; padding-right: 12px; font-size: 14px; font-weight: var(--regular-text) } #top-navbar-section .right-content a:hover { color: var(--primary-color) !important; } #navbar-section .logo img { max-height: 44px; } #navbar-section ul.horizontal-menu > li > a { font-size: 15px; font-weight: var(--semibold-text); display: block; text-decoration: none; color: inherit !important; text-transform: none; padding: 5px 5px; letter-spacing: 0; } #navbar-section ul.horizontal-menu > li > a:hover { color: var(--primary-color) !important; /* border-bottom: 2px solid var(--primary-color); */ /* border-bottom: 2px solid #fff; */ } body #navbar-section ul.horizontal-menu > li > a.dropdown-toggle::after { display: block; display: inline-block; width: 0; height: 0; margin-left: .255em; vertical-align: .255em; content: "\f107"; border-top: none; border-right: none; border-bottom: 0; border-left: none; font: normal normal normal 14px/1 FontAwesome; position: relative; top: 5px; font-size: 16px; right: 0; } /* Akhir Header */ /* Body */ /* Slide show Section */ #slide .item.active::before { display: block; position: absolute; content: ""; left: 0; top: 0; width: 100%; height: 100%; background: #0000009c; z-index: 2; } #slide .col-xs-12 { padding: 0; } div#slideshow-section .carousel-inner .item .ci-text { width: 550px; text-align: left; left: 6%; transform: translateY(-50%); padding: 50px; background:transparent; margin-top: 0 !important; } div#slideshow-section .col-xs-12 { padding: 0; } div#slideshow-section .bs-image-slider .carousel-inner .item img { width: 0% !important; } .bs-image-slider .carousel-inner .item img { margin: 0 auto; min-height: 350px !important; } .bs-image-slider .carousel-inner .item .image-blur { filter: none; -webkit-filter : none; } #slideshow-section h3 { font-size: 42pt; text-shadow: none; color: #fff; font-weight: 600; } #slideshow-section .carousel-inner .item .ci-text p { background-color: transparent; color: #fff; padding: 10px; display: inline-block; font-size: 16px; margin-bottom: 20px; } /* Akhir slide show */ /* Banner Section */ .imaged-banner::before { display: block; position: absolute; content: ""; right: -44%; top: -60px; width: 150%; height: 121%; background: var(--primary-color); transform: rotate(292deg); z-index: -1; background-size: cover; background-repeat: no-repeat; } #banner-section .subtitle-text , .title-banner , .desc-banner, #banner-section .skssl-button{ animation: 1.8s animasimuncul ease-in-out; } #banner-section .gambar-banner img { width: 410px; } #banner-section .button-banner#color-green a.btn-primary { color: var(--primary-color) !important; } #banner-section { background-size: cover; } .title-banner h1{ font-size: 45pt; font-weight: var(--bold-text); /*text-shadow: 1px 1px #00000045; */ padding: 0; } #banner-section .subtitle-banner h3 { height: auto; width: auto; margin: 0; font-size: 22px; font-weight: var(--semibold-text); } #banner-section .desc-banner h5 { font-size: 14px; font-weight: var(--regular-text); margin: 10px 0 25px; line-height: 25px; padding: 0; } #banner-section .desc-banner p { font-size: 16px; } .button-banner a.btn-primary { font-size: 16px; padding: 8px 28px; margin-top: 10px; font-weight: var(--medium-text); /* -webkit-box-shadow: 0 20px 30px 0 rgb(56 56 56 / 10%); */ box-shadow: 0 20px 30px 0 rgb(56 56 56 / 10%); text-transform: none; position: relative; z-index: 5; font-weight: 600; } /* Akhir Banner */ /* Icon section */ #icon-section .container.no-padding { padding: 0 20px !important; } #icon-section .mcbi-image { border-radius: 10px; width: 75px; height: 75px; } /* Akhir Icon Section */ /* Promo 1 */ #three-section .mc-card-image-02:hover .mcci02-image { transform: scale(1.1); } #three-section .col-sm-6 .mcci02-title { font-size: 24px; width: 70%; line-height: 1.2; } #three-section .col-sm-6 .mcci02-text { padding-left: 8%; } #three-section .col-sm-6 .mcci02-image { padding-top: 48%; } /* Akhir Promo 1 */ /* Three Section */ #three-section .mc-card-image-02 { overflow: hidden; } #three-section .container.no-padding { padding: 0px 15px !important; } #three-section a.btn.btn-primary.btn-sm { border-color: transparent !important; border-radius: 5px; padding: 6px 16px; } #three-section .mcci02-image { border-radius: 10px; overflow: hidden; padding-top: 60%; transition: .4s ease; } #three-section .mcci02-description { font-weight: 500; font-size: 14px; margin: 5px 0 15px; } #three-section .mcci02-text { position: absolute; border: none; top: 10%; text-align: left; padding: 10px 30% 0 20px; } #three-section .mcci02-title { text-transform: none; font-weight: 700; font-size: 20px; width: 90%; } /* AKhir three section */ /* Newcategory section */ #newcategory-section .skssl-card-image-02 { padding: 20px; background-color: #f7f7f7; border-radius: 10px; } #newcategory-section .mcci02-image { padding-top: 85%; } #newcategory-section .mcci02-text { border: none; background-color: #f7f7f7; padding: 20px; } #newcategory-section .mcci02-title { margin: 0; text-transform: none; font-weight: 600; } /* Akhir Newcategory section */ /* fourpromo section */ #fourpromo-section .mcci02-text { position: absolute; top: 0; border: none; text-align: left; padding: 15px 10% 10px 20px; } #fourpromo-section .mcci02-title { font-weight: 700; text-transform: none; font-size: 22px; } #fourpromo-section .mcci02-image { padding-top: 60%; } #fourpromo-section .mc-card-image-02 { border-radius: 5px; overflow: hidden; } /* Akhir fourpromo section */ /* Promosi panjang section */ #promopanjang-section .button-biasa a.btn-primary { color: var(--primary-color) !important; font-weight: 700; } div#promopanjang-section::before { } div#promopanjang-section::after { display: block; position: absolute; content: ""; left: 2%; bottom: 0; width: 484px; height: 436px; background: url(https://b1cbcce5f883cdfa4.s3-jak01.storageraya.com/1644400528-840416/16594298746241-3tmGFhzzEY7NYUWgYNx6PVHWbucsH5sxZR5oMf8R.png); background-repeat: no-repeat; background-size: 100%; } /* AKhir promosi panjang section */ /* Repair Section */ #how-section .first .mcbi-description, #how-section .third .mcbi-description { color: #333333; } #icon .first .mc-box-icon.mc-box-icon-top, #icon .third .mc-box-icon.mc-box-icon-top { background-color: white; box-shadow: 2px 2px 10px 0px rgb(0 0 0 / 11%); } #icon .mc-box-icon.mc-box-icon-top { display: flex; justify-content: center; padding: 15px 10px; align-items: center; border-radius: 10px; background-color: var(--primary-color); } #icon .mcbi-image { width: 113px; background-size: 60%; height: 54px; padding: 10px; margin: 10px; background-color: white; box-shadow: 0px 0px 10px 0px rgb(0 0 0 / 6%); } #icon .skssl-box-icon { border-radius: 10px; } #icon .mcbi-text { text-align: left; margin: 0; } #repair-section .imaged.scroll { animation: 1s leftanim ease-in-out; transform: translateX(0px); display: block !important; } #repair-section .imaged::before { display: block; position: absolute; content: ""; left: 7%; top: 10px; width: 100px; height: 100px; background: url( https://b1cbcce5f883cdfa4.s3-jak01.storageraya.com/1634898893-119384/av7dWBEYaBRY61FerMHOUXUltiilIoJVONlAkXfL.webp); background-size: 100%; background-repeat: no-repeat; z-index: 2; } #repair-section .imaged { overflow: hidden; border-radius: 10px; transform: translateX(-127%); display: none; } #repair-section img { transition: .3s ease-in-out; } #repair-section img:hover { } .ceklis-content ul li::before { display: block; content: "\2714\0020"; color: white; font-weight: bold; margin-top: 11px; display: inline-block; margin-right: 5px; border: none; border-radius: 50%; width: 22px; text-align: center; background-color: #1AA15F; } .ceklis-content ul li { list-style: none; } .ceklis-content ul { padding: 0; } .ceklis-content a { color: #545454 !important; } #repair-section .desc-text p { line-height: normal; margin-bottom: 0; } /* Akhir Repair section */ /* How Section */ div#how-section::before { display: block; position: absolute; content: ""; right: 10%; top: -60px; width: 100px; height: 100px; background: url( https://b1cbcce5f883cdfa4.s3-jak01.storageraya.com/1634898893-119384/av7dWBEYaBRY61FerMHOUXUltiilIoJVONlAkXfL.webp); background-size: 100%; background-repeat: no-repeat; z-index: 2; } /* Akhir How Section */ /* Data Section */ #data-section span.input-group-addon.captcha-image { min-width: 70px; background-size: 100%; background-repeat: no-repeat; } #data-section i.fa.fa-refresh { color: var(--primary-color) !important; } #data-section .input-group-btn { overflow: hidden; } #data-section a#btn-refresh-captcha { background-color: white !important; border-color: white !important; } #data-section .container.no-padding { padding: 0px 35px !important; } #data-section input.btn.btn-primary.mt10 { background-color: white !important; color: var(--primary-color) !important; border: honeydew; font-weight: 500; } div#data-section { margin: 0 125px 75px !important; border-radius: 10px; } div#data-section::after { display: block; z-index: 4; background: url(https://b1cbcce5f883cdfa4.s3-jak01.storageraya.com/1634898893-119384/k95uOk71qQZI1i3nYw1G9M2eMjpoNphDvwMII21F.webp); position: absolute; content: ""; right: -5px; bottom: -13px; width: 44%; height: 107%; background-repeat: no-repeat; background-size: cover; border-radius: 10px; } #data-section .komponen-sll-ready.col-sm-9.col-xs-12 { width: 50%; } #data-section .form-hubungi-kami { display: flex; justify-content: space-between; flex-wrap: wrap; } #data-section .form-group { width: 48.5%; margin: 10px 0; } #data-section .title-text { padding: 0; } #data-section::before { display: block; position: absolute; content: ""; right: 44%; bottom: -10%; width: 150px; height: 150px; opacity: .7; background: url(https://b1cbcce5f883cdfa4.s3-jak01.storageraya.com/1634898893-119384/fWFcVdys7xe5HFtakVwguwe1GIElxcpm8vOIiNZf.webp); background-repeat: no-repeat; background-size: cover; } /* AKhir Data Section */ /* Why Section */ #why-section tr.brand::before { display: block; width: 90%; } #why-section tr.quality::before { display: block; width: 80%; } #why-section tr.price::before { display: block; width: 70%; } #why-section tr.service::before { display: block; width: 90%; } #why-section tr td { padding: 10px 10px 10px 0; border: none; border-bottom: 2px solid #9393936e; font-weight: 600; color: #222222; } #why-section .progress { height: auto; box-shadow: none; } #why-section table { border: none; } #why-section tr::before { display: block; position: absolute; content: ""; left: 0; width: 80%; height: 2px; background: var(--primary-color); border-radius: 10px; transform: translateY(41px); } div#why-section::before { display: block; position: absolute; content: ""; right: 3%; top: -2%; width: 100px; height: 100px; background: url( https://b1cbcce5f883cdfa4.s3-jak01.storageraya.com/1634898893-119384/av7dWBEYaBRY61FerMHOUXUltiilIoJVONlAkXfL.webp); background-size: 100%; background-repeat: no-repeat; z-index: 2; } .choose .komponen-sll-ready.col-sm-6.col-xs-12 { padding: 0 10px; } #why-section .skssl-box-icon { border-radius: 10px; box-shadow: 2px 2px 10px 0px rgb(0 0 0 / 11%); margin-bottom: 20px; } #why-section .mc-box-icon.mc-box-icon-top { padding: 20px; overflow: hidden; } #why-section .mcbi-image { background-color: white; box-shadow: 2px 2px 10px 0px rgb(0 0 0 / 11%); background-size: 70%; width: 80px; height: 80px; } #why-section .red .mcbi-description { color: white; } #why-section .mcbi-description { color: #333333; } #why-section .mcbi-title { font-size: 18px; } /* Akhir Repair Section */ /* Gallery Section */ .right-top { overflow: hidden; } .left-top { overflow: hidden; } #gallery-section .skssl-image { overflow: hidden; } #gallery-section img { transition: .3s ease-in-out; } #gallery-section img:hover { transform: scale(1.1); } /* Akhir Gallery Section */ /* Promo Section */ #promo-section .luffy .mcci02-text { position: absolute; top: 10%; border: none; text-align: left; padding: 10% 7% 10% 52%; } #promo-section .batman a.btn.btn-primary.btn-sm { /* background-color: transparent !important; */ /* border: 1px solid white !important; */ } #promo-section .batman a.btn.btn-primary.btn-sm { background-color: #035DA7 !important; } #promo-section .mc-card-image-02 .mcci02-image { padding-top: 56%; } #promo-section .mcci02-image::before { display: block; position: absolute; content: "Special Price"; right: 20px; bottom: 47px; color: #ffffff14; transform: rotate(345deg); font-size: 102px; font-weight: 900; background-repeat: repeat-y; width: 63%; line-height: 1; } #promo-section .batman .mcci02-text { position: absolute; top: 10%; border: none; text-align: left; padding: 10% 7% 10% 46%; } #promo-section .batman .mcci02-title { font-size: 22px; text-transform: none; font-weight: 600; } #promo-section .skssl-card-image-02 { border-radius: 10px; overflow: hidden; } #promo-section .luffy .mcci02-title { font-size: 22px; text-transform: none; font-weight: 600; } #promo-section a.btn.btn-primary.btn-sm { padding: 8px 18px; } /* Akhir promo section */ /* List Produk */ #produk-content .promo .mc-card-image-02 .mcci02-image { padding-top: 175%; } #produk-content .promo .mc-card-image-02 .mcci02-text { width: 100%; display: inline-block; padding: 5px 10px; border: none; border-top: 0; text-align: center; position: absolute; bottom: 50%; } #produk-content .promo .mc-card-image-02 .mcci02-text .mcci02-title { font-size: 26px; text-transform: none; font-weight: 600; } #produk-content .promo .mc-card-image-02 .mcci02-text .mcci02-description { margin-bottom: 20px; font-size: 18px; font-weight: 500; text-transform: uppercase; } #list-produk .list-produk-item { overflow: hidden; border: var(--border-produk); border-radius: var(--border-radius); } #list-produk .list-produk-item .produk-item-inner .produk-thumbnail { border: none ; } #list-produk .list-produk-item .produk-item-inner { min-height: 365px; } #list-produk .list-produk-item .produk-item-inner .produk-description .produk-title { font-size: 14px; font-weight: var(--semibold-text); color: var(--title-text-color) !important; } #list-produk .list-produk-item .produk-item-inner .produk-description .produk-title:hover { color: var(--primary-color) !important; text-decoration : none; } #list-produk .produk-rating .display-rating .fa { font-size: 13px; } #list-produk .list-produk-item .produk-item-inner .produk-description { padding: 15px; border-top: var(--border-top); } #list-produk .list-produk-item .produk-item-inner .produk-description .produk-price { margin-bottom: 5px; color: var(--price-text-color); font-weight: var(--semibold-text); text-transform: uppercase; } #list-produk .list-produk-item .produk-item-inner .produk-description .label-free-ongkir { display: block; width: 90px; margin: 14px auto 0 0; padding: 5px 8px; white-space: nowrap; } /* Akhir List Produk */ /* Flash Section */ #flash-section .list-produk-item .produk-item-inner .produk-description .produk-title:hover, #list-produk .list-produk-item .produk-item-inner .produk-description .produk-title:hover { color: var(--primary-color) !important; text-decoration: none; } #flash-section div.flash-sale-title { font-size: 28px; color: var(--title-text-color); white-space: nowrap; font-weight: var(--bold-text) !important; } #flash-section .list-produk-item .produk-item-inner { /* min-height: 300px !important;*/ } #flash-section .list-produk-item .produk-item-inner .produk-description .produk-price-diskon { font-weight: var(--semibold-text); } #flash-section .list-produk-item { display: inline-block; width: 100%; border: var(--border-produk); border-radius: var(--border-radius); margin-bottom: 5px; overflow: hidden; transition: .8s; } #clockdiv > div, #clockdiv div > span { background: var(--primary-color); } div.flash-sale-title { font-weight: 800 !important; } #flash-section .list-produk-item .produk-item-inner .produk-description { padding: 15px 15px 15px; border-top: var(--border-top); } #flash-section .list-produk-item .produk-item-inner .produk-description .produk-title { font-size: 14px; color: var(--title-text-color) !important; font-weight: var(--semibold-text); } #flash-section .list-produk-item .produk-item-inner .produk-description .produk-price { font-size: 12px; color: var(--price-text-color) !important; font-weight: var(--semibold-text); text-transform: uppercase; } /* Akhir Flash Section 8 */ /* Testimoni Section */ div#testi-section::before { display: block; left: 83%; top: -13px; width: 100%; height: 100%; background: url(https://b1cbcce5f883cdfa4.s3-jak01.storageraya.com/1634898893-119384/GL2F1SFVVwtfavh81qAgX6A848I97sB2ZLw3tlaj.webp); z-index: 5; background-size: 10%; background-repeat: no-repeat; } #testi-section .item { padding-left: 10; } #testi-section .testimonial-area .judul, #testi-section .testimonial-area .pesan, #testi-section .testimonial-area .author { text-align: center; } div#testi-section { padding: 0; border-radius: 0px; margin: 0 auto; width: 100%; } #testimoni-section::before{ } div#testimoni-section::after { display: block; position: absolute; content: ""; left: 6%; bottom: 0; width: 462px; height: 100%; background: url(https://b1cbcce5f883cdfa4.s3-jak01.storageraya.com/1644400528-840416/PDWrq9EJQDdSIy1xaMZikAQbc2ZiVhjV8dAT75kl.png); background-repeat: no-repeat; background-size: 100%; } #testi-section .testimonial-area .item .pesan::after { display: block; left: 0; top: -13px !important; width: 100%; height: 100%; background: url(https://b1cbcce5f883cdfa4.s3-jak01.storageraya.com/1634898893-119384/GL2F1SFVVwtfavh81qAgX6A848I97sB2ZLw3tlaj.webp); z-index: 5; background-size: 8%; background-repeat: no-repeat; } #testi-section .testimonial-outer { /* min-height: 247px; */ } #testi-section #section-testimonial-client { padding: 20px 0; } #testi-section .testimonial-area .judul { margin-top: 20px; text-shadow: none; color: white; font-size: 16px; font-weight: var(--semibold-text); text-transform: uppercase; } #testimoni-section .subtitle-text h3::after { display: block; display:none; } #testi-section .testimonial-area .pesan { text-shadow: none; font-size: 15px; padding: 10px 0; color: white; } #testi-section .testimonial-area .author { text-shadow: none; text-transform: uppercase; font-weight: var(--semibold-text); color: white; } /* Akhir Testimoni */ .thumbnail { padding: 40% !important; } /* Blog Section */ #blog-section .list-paket-front.landscape:hover .thumbnail { } #blog-section .list-paket-front.landscape .thumbnail { border-radius: 0 ; /*box-shadow: 0px 3px 10px 2px rgb(204 204 204 / 50%);*/ /* border-radius: 0; */ transition: .3s ease-in-out; } #blog-section .list-paket-front.landscape { margin-bottom: 30px; } #blog-section .list-paket-front.landscape .judul{ margin: 10px 0 10px 0; font-size: 20px; } #blog-section .list-paket-front.landscape .judul a{ color: var(--title-text-color)!important; font-weight: var(bold-text); font-size: 20px; -webkit-box-orient: vertical; -webkit-line-clamp: 2; display: -webkit-box; text-overflow: ellipsis; white-space: normal; } #blog-section .list-paket-front.landscape .judul a:hover { color: var(--primary-color) !important; text-decoration :none; } #blog-section .list-paket-front.landscape .deskripsi { padding-bottom: 25px; text-align: left; padding-left: 0px; border: none; background-color: #FFFFFF; bottom: 50px; width: 100%; margin: 0 auto; /* box-shadow: 0px 3px 10px 2px rgb(204 204 204 / 50%); */ border-radius: 0 0 10px 10px; /* border-radius: 0; */ background-color: #fff; transition: .5s ease; } #blog-section .list-paket-front .waktu { margin: 10px 0 10px; font-size: 14px; } #blog-section .list-paket-front .deskripsi .intro { margin: 10px 0 15px !important; color: var(--second-text-color) !important; font-size: 13px !important; line-height: 20px; word-spacing: 1px; } #blog-section .list-paket-front.landscape .deskripsi a.btn-primary { /* border: 2px solid #FF4328 !important; */ padding: 10px 18px; font-size: 14px; margin-top: 8px; /* background-color: #FF4328 !important; */ color: #fff !important; box-shadow: 0 20px 30px 0 rgb(56 56 56 / 10%); } /* Akhir Blog Section */ /* Client Section */ #client-section .slick-track { display: flex; justify-content: center; align-items: center; } #client-section .mc-carousel, #client-section .skssl-carousel { margin: 0; } /* Akhir Client Section */ /* Footer section */ footer ul li a, footer p, footer .skssl-code { line-height: 1.7; font-size: 14px; } footer#main-footer .komponen-sll-ready { margin: 0; } div#footer-section { padding-top: 0; } .title-footer h4 { font-weight: var(--bold-text) !important; font-size: 22px; } .footer-ul-list ul { padding: 0; list-style: none; margin: 0; } .footer-ul-list ul li { margin-bottom: 4px; } .footer-ul-list li a { color: inherit !important; } /* Produk Teknis */ .skssl-daftar-produk .row, .col-md-9.col-sm-8.col-xs-12 .row:nth-child(2), .row.mt20 .row.mt20 .col-lg-12, .skssl-flashsale .row:nth-child(2), div#list-produk-sejenis.row, #list-produk-sejenis .col-lg-2.col-md-3.col-sm-4.col-xs-6 #services-section .skssl-sub-section .row, #portfolio-section .row, #services-icon .row, #why-section .container { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; } .skssl-daftar-produk .col-lg-3.col-md-4.col-sm-6.col-xs-12, .col-md-9.col-sm-8.col-xs-12 .row .col-lg-3.col-md-4.col-sm-6.col-xs-12, .row.mt20 .col-lg-12 .col-lg-2.col-md-2.col-sm-4.col-xs-12, .skssl-flashsale .row .col-lg-2.col-md-2.col-sm-4.col-xs-12, #services-section .komponen-sll-ready.col-sm-4.col-xs-12, #services-section .skssl-card-image-02, #portfolio-section .row .col-sm-4.col-xs-12, #services-icon .row .col-md-3.col-sm-6, #why-section .komponen-sll-ready { display: flex; flex-direction: column; } .list-produk-item, #list-produk-sejenis .col-lg-2.col-md-3.col-sm-4.col-xs-6 { display: -webkit-box !important; display: -ms-flexbox !important; display: flex !important; } .list-produk-item .produk-item-inner, #services-section .mc-card-image-02, #portfolio-section .skssl-card-image-02, #services-icon .skssl-card-image-02, #why-section .skssl-box-icon { background-color: var(--bg-produk) !important; -webkit-box-flex: 1; -ms-flex: 1 1 auto; flex: 1 1 auto; position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; min-width: 0; word-wrap: break-word; } div#list-produk-sejenis { display: flex; row-gap: 15px; row-gap: 0; } .list-produk-item { overflow: hidden; border: var(--border-produk); border-radius: var(--border-radius); box-shadow: 0px 0px 10px 0px rgb(0 0 0 / 6%); } .list-produk-item .produk-item-inner .produk-thumbnail { border: none !important; border-radius: 0; } .list-produk-item .produk-item-inner { background-color: white !important; } .list-produk-item .produk-item-inner .produk-description .produk-title { font-size: 14px; font-weight: var(--semibold-text); color: var(--title-text-color) !important; } .list-produk-item .produk-item-inner .produk-description .produk-title:hover { color: var(--primary-color) !important; text-decoration : none; } .produk-rating .display-rating .fa { font-size: 13px; } .list-produk-item .produk-item-inner:hover .produk-thumbnail { background-size: 125%; animation: animasizoom .7s ease !important; } .list-produk-item .produk-item-inner .produk-description { padding: 15px 20px 10px; text-align: left !important; background-color: transparent !important; border-top: var(--border-top); /* padding-left: 0 !important; */ } .list-produk-item .produk-item-inner .produk-description .produk-price { margin-bottom: 5px; color: var(--price-text-color) !important; font-size: 12px; font-weight: 600 !important; } .list-produk-item .produk-item-inner .produk-description .label-free-ongkir { display: block; width: 90px; margin: 14px auto 0 0; padding: 5px 8px; white-space: nowrap; } .list-produk-item .produk-item-inner .produk-description .produk-price-diskon { font-weight: 600 !important; margin-bottom: 5px; color: var(--priceline-text-color); } .list-produk-item .produk-item-inner .produk-thumbnail .label-diskon-off { background-color: var(--primary-color); background-color: #EF271B; color: #fff; position: absolute; top: 10px; right: 10px; font-size: 11px; padding: 3px 5px; border-radius: 5px; font-weight: var(--medium-text); } .list-produk-item .produk-item-inner .produk-description .produk-rating { /* display: flex; */ justify-content: center; align-items:center; } .list-produk-item .produk-item-inner { /*padding: 15px 15px 0;*/ padding: 0; } /* Breakpoints */ /* =========================(281px)========================= */ @media (max-width: 281px) { body #main-content #promo-section .mcci02-description { font-size: 10px; } #main-content #promo-section a.btn.btn-primary.btn-sm { padding: 5px 10px; } body #main-content #promo-section .luffy .mcci02-title, #main-content #promo-section .batman .mcci02-title { font-size: 11px; } /* Slideshow section */ div#slideshow-section .carousel-inner .item .ci-text p { font-size: 12px !important; } div#slideshow-section h3 { font-size: 26pt !important; } div#slideshow-section .carousel-inner .item .ci-text { padding: 40px !important; } /* akhir Slideshow section */ /* banner section */ html body #banner-section .subtitle-banner h3 { font-size: 22px !important; } /* akhir banner section */ /* Section baru */ div#two-section .mc-card-image-02 .mcci02-text .mcci02-description, div#two-section2 .mc-card-image-02 .mcci02-text .mcci02-description { margin-bottom: 0; } div#two-section .mc-card-image-02 .mcci02-text .mcci02-title, div#two-section2 .mc-card-image-02 .mcci02-text .mcci02-title { font-size: 18px !important; } #two-section .mc-card-image-02 .mcci02-text { padding: 3% 30% 3% 5%; } /* Akhir Section baru */ body #main-content .desc-text { padding: 0% 5%; } html #header-user-icon { display: none !important; } html div#testi-section { width: 100% !important; } body #clockdiv { font-size: 9px !important; padding-left: 0 !important; } } /* =========================(320px)========================= */ @media (max-width: 320px) { /* Section baru */ div#three-section .col-sm-6 .mcci02-image { padding-top: 80%; } #main-content #promo-section .luffy .mcci02-title, #main-content #promo-section .batman .mcci02-title { font-size: 14px; } #main-content #promo-section .mcci02-description { font-size: 11px; } #main-content #banner-section .button-banner a.btn-primary { font-size: 12px; padding: 8px 14px; } #main-content #about-section .blog-content .mc-card-image-02 { max-height: 100% !important; display : block; } .blog-content .mc-card-image-02 .mcci02-image { padding-top: 80%; } #main-content .blog-content .mcci02-text { padding: 25px; height: auto; } /* Akhir Section baru */ /* banner section */ body #banner-section .title-banner h1 { font-size: 32px !important; } /* akhir banner section */ #clockdiv > div { padding: 3px; } html body .title-text h2 { font-size: 28px !important; } body .list-produk-item .produk-item-inner { min-height: 275px !important; } } /* =========================(360px)========================= */ @media (max-width: 360px) { #main-content #book-section .mcbi-image::after { display: block; bottom: 44%; } } /* =========================(376px)========================= */ @media (max-width: 376px) { body div#data-section .container.no-padding { padding: 0px 20px !important; } #promo-section .luffy .mcci02-text, #promo-section .batman .mcci02-text { top: 0; padding: 6% 7% 10% 52%; } #promo-section .mcci02-description { font-size: 12px; } #main-content .ceklis-content ul li { width: 100%; padding-left: 25%; } .title-text { text-align: center !important; padding: 0 !important; } body .title-text h2 { padding: 0 5% !important; } #banner-section .title-banner h1 { font-size: 36px !important; } .title-text h2 { font-size: 32px !important; } div.flash-sale-title { font-size: 22px !important; } #clockdiv > div { padding: 0 !important; } #clockdiv { font-size: 10px !important; } .mt10 { margin-right: 0px !important; } .list-produk-item .produk-item-inner .produk-description .produk-title { font-size: 14px; } .list-produk-item .produk-item-inner .produk-description .produk-price { font-size: 12px; } .list-produk-item .produk-item-inner .produk-description { padding: 15px !important; border-top: var(--border-top); } #clockdiv { padding-left: 2% !important; } } /* =========================(377px)and(410px)========================= */ @media (min-width: 377px) and (max-width: 410px) { div#how-icon-section .mc-box-icon .mcbi-text .mcbi-title { font-size: 14px; } } /* =========================(420px)========================= */ @media (max-width: 420px) { div#blog-section .row { margin: 0; } div#blog-section { padding: 0 !important; } #blog-blog { padding-bottom: 30px !important; } .title-text::before { display: block; font-size: 65px; top: -10px; } #testi-section .item.active { padding-left: 0 !important; } html body.not-home .list-produk-item .produk-item-inner { min-height: 340px !important; } body .title-text { padding: 0; } } /* =========================(450px)and(552)========================= */ @media (min-width: 421px) and (max-width: 552px) { .list-produk-item .produk-item-inner { min-height: 380px !important; } } /* =========================(552px))========================= */ @media (max-width: 552px) { /* Section baru */ div#banner-section { padding: 30px 0 !important; } div#promopanjang-section { background-position: -1225px 0 !important; } div#three-section .col-sm-6 .mcci02-image { padding-top: 100% !important; } div#flash-content { padding-right: 15px; padding-left: 15px; } div#promopanjang-section::after, div#testimoni-section::after { display: none; } #icon-section .skssl-box-icon { margin-bottom: 25px; } #icon-section .mcbi-text { text-align: center; } #icon-section .mc-box-icon.mc-box-icon-side { justify-content: center; align-items: center; } body div#how-section { margin-bottom: 30px !important; } body .imaged-banner { top: 80px; } #navbar-section .logo { text-align: center !important; margin: 0 auto; } #why-section .progress { margin-bottom: 25px; } div#data-section::after { display: block; display: none; } #main-content div#data-section .komponen-sll-ready.col-sm-9.col-xs-12 { width: 100%; } div#icon .mc-box-icon.mc-box-icon-top { margin-bottom: 20px; } #repair-section .skssl-button { text-align: center !important; } #repair-section .imaged { margin-bottom: 30px } #gallery-section .left-bottom { margin-bottom: 30px; } .right-bottom img { width: 500px; } .left-top img { width: 600px; margin-bottom: 25px; } #promo-section .batman .mcci02-text { padding: 10% 7% 10% 49%; } .ceklis-content ul li { list-style: none; width: 50%; padding-left: 10%; } .ceklis-content ul { padding: 0; display: flex; flex-wrap: wrap-reverse; justify-content: center; } .kayu-kiri img { height: auto; right: 0; } .kayu { height: auto; margin-top: 30px; } div#testi-section::before { display: block; top: 5px; } #book-section .mcbi-image::after { display: block; bottom: 40%; } .icon-section .mc-box-icon.mc-box-icon-top { margin-bottom: 30px; } #modern-section .mc-box-icon.mc-box-icon-side { margin-bottom: 30px; } #main-content #modern-section .mcbi-image::before { display: block; left: 40%; } /* Akhir Section baru */ /* banner Section */ #banner-section .subtitle-banner h3 { font-size: 26px !important; } #banner-section .desc-banner h5 { padding: 0 5% !important; } #banner-section .title-banner h1 { font-size: 40px; } /* Akhir banner baru */ /* Produk Section */ div#list-produk .list-produk-item .produk-item-inner .produk-description .produk-title, div#flash-section .list-produk-item .produk-item-inner .produk-description .produk-title, .list-produk-item .produk-item-inner .produk-description .produk-title { line-height: 18px !important; overflow: hidden; } #produk-content .title-text, #produk-content .subtitle-text, #produk-content .desc-text { padding: 0 5%; } .skssl-flashsale .col-lg-5:nth-child(3) { padding: 0 5px; } .skssl-flashsale .col-xs-12:nth-child(2) { text-align: right; } #list-produk-sejenis .col-xs-6 { padding: 0 5px; } #list-produk { padding-left: 30px !important; } body.not-home .list-produk-item { margin-bottom: 10px; } #produk-content .komponen-sll-ready.col-xs-12, #flash-content .komponen-sll-ready.col-xs-12{ padding: 0; } #list-produk-lg .col-xs-12 { width: 50%; } #flash-section { padding-left: 30px; } .list-produk-item .produk-item-inner .produk-description .produk-title { font-size: 14px !important; } #list-produk .list-produk-item { margin-top: 8px; margin-bottom: 0; } #list-produk .list-produk-item .produk-item-inner .produk-description .produk-title { font-size: 15px; } #list-produk .list-produk-item .produk-item-inner .produk-description .produk-price { font-size: 12px; } #list-produk .col-xs-12, .skssl-flashsale .col-xs-12{ width: 50%; padding : 0 5px; } /* Akhir Produk Section */ /* Slideshow Section */ div#slideshow-section .carousel-inner .item .ci-text p { font-size: 14px; } div#slideshow-section h3 { font-size: 32pt; } div#slideshow-section .carousel-inner .item .ci-text { width: 100%; text-align: center; left: 0; transform: translateY(-50%); padding: 50px; background: transparent; margin-top: 0 !important; } #slideshow-section .bs-image-slider .carousel-inner .item img { margin: 0 auto; min-height: 450px !important; } /* AKhir Slideshow Section */ /* Header Section */ #top-navbar-section .left-content p { margin: 0 auto; font-weight: var(--regular-text); -webkit-line-clamp: 1; text-overflow: ellipsis; overflow: hidden; -webkit-box-orient: vertical; white-space: nowrap; width: 80%; } #header-user-icon { display: block !important; } body #responsive-menu-btn { top: 70px; margin-left: 20px; } body a#btn-cart-floating { top: 70px; margin-right: 20px; right: 0; animation: animasiiphone 2s !important; } #navbar-section .col-sm-3 { width: 100% !important; } #navbar-section .container.no-padding { display: inline !important; } div#navbar-section .logo img { max-height: 35px; } #top-navbar-section .right-content{ display: none; } .logo, .left-content { text-align : center !important; } div#navbar-section::after { display: block; height: 16%; } /* AKhir Header Section */ /* Random Section */ .subtitle-text { text-align: center !important; } .desc-text { padding: 0%; } .desc-text p, .button-biasa { text-align: center !important; } .title-text { text-align: center !important; } .col-md-9.col-sm-8.col-xs-12 .row:nth-child(2) { padding: 10px; } body div#testi-section { width: 95%; } #testimoni-section .testimonial-area .inner-testimonial { padding: 0 10px; } div#testi-section { width: 80%; } .slick-track { width: 3800px !important; } a.list-image-carousel.slick-slide { width: 190px !important; } .row.mt20 .col-lg-12 { margin: 0 12px; } .row .col-lg-12 .col-xs-12 { padding-left: 5px; padding-right: 5px; } #testi-section .testimonial-area .pesan { padding: 15px 0 !important; } div#testi-section { padding: 18px; } .title-text h2 { padding: 0 5% !important; font-size: 32px !important; } .subtitle-text h3 { padding: 0 8%; } #inner-main-content .row .col-lg-3 .flash-sale-box { width: 100% !important; } #clockdiv { padding-left: 2%; } /* Random Section */ } /* =========================(553px)and(768)========================= */ @media (min-width: 553px) and (max-width: 768px) { /* Section Baru */ #banner-section { background-position: right !important; } #testimoni-section h2 { padding: 0; text-align: center; } div#testimoni-section::after { display: block; right: -14%; } #promopanjang-section h2 { padding: 0; } div#promopanjang-section::after { display: block; right: -6%; } div#why-section .title-text h2 { padding: 0; } #data-section .title-text h2 { padding: 0; } body.not-home a#btn-cart-floating, body.not-home #responsive-menu-btn { top: 86px !important; } .ceklis-content ul { display: flex; flex-wrap: wrap; } .ceklis-content ul li { list-style: none; width: 50%; } #repair-section .desc-text p:nth-child(2) { display: none; } #promo-section .batman .mcci02-text { top: 0; } #promo-section .luffy .mcci02-text { top: 0; padding: 10% 3% 10% 52%; } #promo-section .luffy .mcci02-title, #promo-section .batman .mcci02-title { font-size: 18px; } #promo-section .mcci02-description { font-size: 13px; } .kayu-kiri img { min-width: 248px; right: 50px; } .kayu img { min-width: 205px; } #repair-section .container.no-padding { display: flex; justify-content: center; align-items: center; } /* akhir section baru */ /* Produk responsive */ #list-produk .list-produk-item .produk-item-inner { min-height: 385px !important; } #list-produk .list-produk-item .produk-item-inner .produk-description { padding : 15px; } #list-produk .col-lg-3.col-md-4.col-sm-6.col-xs-12 { width: 33%; padding: 0 10px; } #flash-section .col-lg-2.col-md-2.col-sm-4.col-xs-12 { padding: 0 10px; } #flash-section .list-produk-item .produk-item-inner { min-height: 385px !important; } #flash-section .list-produk-item .produk-item-inner .produk-description .produk-title { line-height: 19px !important; } /* ===== Flash Sale Page ====== */ html body.not-home .col-lg-2.col-md-2.col-sm-4.col-xs-12 .list-produk-item .produk-item-inner { min-height: 415px !important; } html body.not-home .list-produk-item .produk-item-inner { min-height: 335px !important; } html body.not-home div.col-md-9.col-sm-8.col-xs-12 .row .col-sm-6, html body.not-home .row.mt20 .col-lg-12 .col-xs-12 { width: 33% !important; padding: 0 5px; } /* Akhir Produk responsive */ /* Section baru responsive */ #services-section .mc-card-image-02 .mcci02-text { padding: 30px 20px 10px; } #services-section .mc-card-image-02 { min-height: 410px; } #how-icon-section .row .komponen-sll-ready.col-md-3.col-sm-6.col-xs-12:nth-child(2) { margin-bottom: 45px; } /* Akhir Section baru responsive */ /* Slideshow Section responsive */ #slideshow-section .bs-image-slider .carousel-inner .item img { margin: 0 auto; min-height: 430px !important; } #slideshow-section h3 { font-size: 32px; } div#slideshow-section .carousel-inner .item .ci-text { width: 100%; text-align: center; left: 0; transform: translateY(-50%); padding: 50px 85px; margin-top: 0 !important; } /* Akhir Slideshow Section responsive */ }@media (min-width: 768px) { .lp-popup-image .modal-dialog { width: 429px !important; position: absolute; transform: translate(-50%, -63%) !important; top: 50%; left: 50%;} } /* =========================(768px)========================= */ @media (max-width: 768px) { /*Section Baru responsive */ #three-section .col-sm-6 .mcci02-image { padding-top: 112%; } #icon-section .mcbi-text { width: 100%; padding: 0; margin-top: 12px; } #icon-section .mc-box-icon.mc-box-icon-side { display: flex; flex-direction: column; } div#data-section .komponen-sll-ready.col-sm-9.col-xs-12 { width: 100%; } div#data-section::after { display: block; display: none; right: -12%; } div#data-section { margin: 0 0 75px !important; border-radius: 0; } #icon .mcbi-image { width: 65px; height: 65px; background-size: 60%; } div#icon .mc-box-icon.mc-box-icon-top { display: block; } .imaged-banner::before { display: block; display: none; } #banner-section .skssl-button { text-align: center !important; } #repair-section .col-xs-12 .title-text h2 { padding: 0; font-size: 36px; } #banner-section .button-banner .kiri { text-align: right !important; } #banner-section .button-banner#color-green { text-align: left !important; } /* Akhir Section Baru responsive */ /* banner responsive */ #banner-section .subtitle-text h3 { text-align: center; } #banner-section .container .komponen-sll-ready.col-xs-12 { width: 100%; } #banner-section .col-sm-9 { width: 100%; } #banner-section .skssl-image img { position: relative; z-index: 3; } #banner-section .desc-banner h5 { padding: 0 18%; } div#banner-section::before { display: block; width: 100%; left: 0; height: 61%; bottom: -8%; transform: rotate(18deg) skew(10deg, 331deg); } .gambar-banner { display: none !important; } .desc-banner { text-align: center !important; } #banner-section .col-sm-6 { width: 100% !important; } #banner-section .title-banner, #banner-section .subtitle-banner { text-align: center !important; } /* Akhir banner responsive */ /* Header responsive */ #navbar-section .logo img { max-height: 63px; } .form-control { margin-bottom: 20px; } header#main-header #top-navbar-section .right-content { text-align: right !important; -webkit-line-clamp: 2; overflow: hidden; text-overflow: ellipsis; -webkit-box-orient: vertical; white-space: nowrap; width: 80%; margin: 0 0 auto auto; } a#btn-cart-floating { animation: animasiipad 2s; } #responsive-menu-btn { position: absolute; border-radius: 4px; top: 86px; width: 40px; height: 35px; display: flex; justify-content: center; align-items: center !important; left: 0; margin-left: 75px; } .logo { width: max-content; margin: 0 auto; } .form-pencarian { display: none; } a#btn-cart-floating { top: 86px; right: 75px; } #navbar-section .col-sm-3 { width: 100%; } /* Akhir Header responsive */ /* Produk responsive */ #produk-content .promo .mc-card-image-02 .mcci02-text { bottom: 29%; } #list-produk .list-produk-item .produk-item-inner .produk-description .produk-title, .list-produk-item .produk-item-inner .produk-description .produk-title { line-height: 18px !important; overflow: hidden; } #inner-main-content .row .col-lg-3 .flash-sale-box { width: 40%; } /* Akhir Produk responsive */ /* Random responsive */ div#testi-section { width: 100%; } .title-banner h1 { padding: 0; } .col-xs-12 .title-text h2 { padding: 0 10%; font-size: 36px; } div.col-md-9.col-sm-8.col-xs-12 .row .col-sm-6, .row.mt20 .col-lg-12 .col-xs-12 { width: 50% !important; padding: 0 5px; } /* Akhir Random responsive */ } /* =========================(769px)and(991px)========================= */ @media (min-width: 769px) and (max-width: 991px) { /* Header Responsive*/ .form-pencarian-produk { right: 46px; position: relative; } #responsive-menu-btn { position: absolute; top: 54px; left: 30px; width: 40px; height: 35px; display: flex; justify-content: center; align-items: center; font-size: 23px; text-align: center; border-radius: 5px; line-height: 45px; z-index: 7; color: #fff !important; } header#main-header .layout-sll-ready .sub-komponen-sll { margin: 0; } #navbar-section .container.no-padding { justify-content: space-between; align-items: center; } div#navbar-section::after { display: block; bottom: -20px; } /* Akhir Header Responsive*/ } /* =========================(991px)========================= */ @media (max-width: 991px) { /* Header Responsive*/ /* Akhir Header Responsive*/ } /* =========================(992px)and(1024px)========================= */ @media (min-width: 992px) and (max-width: 1024px) { /* Section Baru responsive*/div#promopanjang-section { background-position: center center !important;} #navbar-section .logo img { max-height: 35px; } #testimoni-section .title-text { text-align: center !important; } div#promopanjang-section::after { display: block; } html body a#btn-cart-floating { top: 142px !important; } .form-pencarian { left: -20px !important; } div#data-section { margin: 0 0 75px !important; border-radius: 10px; } .imaged-banner::before { display: block; top: -43px; } .ceklis-content ul { display: flex; flex-wrap: wrap; } .ceklis-content ul li { list-style: none; width: 50%; } #book-section .mcbi-image::after { display: block; bottom: 104px; } div#repair-section .container.no-padding { display: flex; justify-content: center; align-items: center; } /* Akhir Section Baru responsive*/ /* Produk Responsive*/ #flash-section .list-produk-item .produk-item-inner .produk-description .produk-title { line-height: 19px; } #flash-section .list-produk-item .produk-item-inner { min-height: 385px !important; } #list-produk .list-produk-item .produk-item-inner .produk-description { padding: 18px 22px; border-top: var(--border-top); } #list-produk .list-produk-item .produk-item-inner .produk-description .produk-title, .list-produk-item .produk-item-inner .produk-description .produk-title { line-height: 18px; -webkit-line-clamp: 2; } #list-produk .col-md-4 .list-produk-item .produk-item-inner { min-height: 450px !important; } /* ========== Not Home ============= */ html body.not-home .list-produk-item .produk-item-inner { min-height: 395px !important; } body.not-home .col-lg-2.col-md-2.col-sm-4.col-xs-12 { width: 25%; } body.not-home .list-produk-item .produk-item-inner .produk-description { padding: 15px; } body.not-home .list-produk-item .produk-item-inner .produk-description .produk-title { line-height: 19px; } /* Akhir Produk Responsive */ /* Header Responsive */ #navbar-section .komponen-sll-ready.col-sm-6.col-xs-12:nth-child(2) { right: 10px; } /* Akhir Header Responsive */ /* Banner Responsive */ #banner-section .container.no-padding{ display: flex; justify-content: center; align-items: center; } /* div#banner-section::before { display: block; width: 50%; height: 55%; left: 0; top: 24%; } */ #banner-section .col-sm-9 .title-banner { padding: 0 38% 0 6%; } #banner-section .col-sm-9 .desc-banner { padding: 0 40% 0 6%; } #banner-section .col-sm-9 .button-banner { padding: 0 6%; } /* Akhir Banner Responsive */ } /* =========================(992px)========================= */ @media (min-width: 992px) { /*slideshow responsive */ #slide .bs-image-slider .carousel-inner .item img { margin: 0 auto; min-height: 500px !important; } /* Akhir slideshow responsive */ /* Produk Responsive */ #produk-content .produk-3 .col-lg-3 { width: 33%; } #inner-main-content .row .col-lg-3 .flash-sale-box { width: 40%; } #flash-section .col-lg-2 { width: 25%; } #clockdiv { margin-bottom: 20px; } /* Akhir Produk Responsive */ /* Header Responsive */ .form-pencarian { position: relative !important; left: 0; width: 80%; } #navbar-section .container.no-padding { display: flex; justify-content: space-between; align-items: center; } body.not-home a#btn-cart-floating { } a#btn-cart-floating { top: 30px !important; margin-right: 20px; animation: animasiipadpro 2s; } header#main-header .layout-sll-ready .sub-komponen-sll { margin: 0 !important; } #top-navbar-section .container.no-padding { display: flex; justify-content: center; align-items: center; } #navbar-section .logo img { } #responsive-menu-btn { position: absolute; border-radius: 4px; top: 57px; width: 40px; height: 35px; display: flex; justify-content: center; align-items: center !important; margin-left: 30px; left: 30px; } #navbar-section .container .col-sm-6 { } #top-navbar-section .right-content a { margin-right: 2px !important; } #navbar-section ul.horizontal-menu > li > a { margin-right: 0 !important; font-size: 13px; } /* Akhir Header Responsive */ /* Testi Responsive */ #testi-section .testimonial-area .inner-testimonial { padding: 0 5%; } /* Testi Responsive */ /* Banner Responsive */ #banner-section .col-sm-6 { width: 50%; } /* Akhir Banner Responsive */ /* random */ .col-lg-5.col-lg-push-7 label.col-md-4 { width: 100%; } div .form-group .col-md-8 { width: 75%; margin-left: 25%; margin-bottom: 20px; } div.text-right.mt10 { position: absolute; top: 50px; right: 20px; } #blog-section .col-md-3{ width: 33.33333333%; } } /* =========================(1025px)========================= */ @media (min-width: 1025px) { /* Section Baru */ #fourpromo-section .container.no-padding { padding: 0 20px !important; } #promopanjang-section .container.no-padding { padding: 0 20px !important; } #flash-section .list-produk-item .produk-item-inner .produk-description .produk-title { font-size: 14px !important; } #repair-section .komponen-sll-ready.col-sm-6.col-xs-12 { padding: 0 20px; } div#repair-section .container { display: flex; justify-content : center; align-items: center; } #modern-section .container { width: 1130px !important; } #repair-section .container { width: 1135px; } /* Akhir Section Baru */ /* blog Section */ #blog-section .row, #list-produk .row{ margin: 0 !important; } div#blog-section, #list-produk { padding: 0 !important; } /* Akhir Blog section */ /* Produk Responsive */ #flash-section .list-produk-item .produk-item-inner { min-height: 340px !important; } #list-produk .list-produk-item .produk-item-inner { min-height: 410px !important; } body.not-home .col-lg-2.col-md-2.col-sm-4.col-xs-12 .list-produk-item .produk-item-inner { min-height: 340px !important; } body.not-home .list-produk-item .produk-item-inner { min-height: 325px !important; } div#flash-section { padding: 0 !important; } #flash-section .list-produk-item .produk-item-inner .produk-description { padding: 10px !important; } #flash-section .list-produk-item .produk-item-inner { padding: 0 !important; } #list-produk .list-produk-item .produk-item-inner .produk-description .produk-title, #flash-section .list-produk-item .produk-item-inner .produk-description .produk-title, .list-produk-item .produk-item-inner .produk-description .produk-title { line-height: 15pt !important; } .list-produk-item .produk-item-inner .produk-description .produk-title { font-size: 16px !important; } body.not-home .row.mt20 .col-lg-2.col-md-2.col-sm-4.col-xs-12 .list-produk-item .produk-item-inner .produk-description .produk-title { font-size: 16px !important; } body.not-home .list-produk-item .produk-item-inner .produk-description .produk-title { font-size: 14px !important; } .list-produk-item .produk-item-inner .produk-description .produk-price { font-size: 14px !important; } div#list-produk .list-produk-item .produk-item-inner .produk-description { padding: 15px 15px 20px; } #inner-main-content .row .col-lg-3 .flash-sale-box { width: 50% !important; } #flash-section .col-lg-5 { width: 100%; } #flash-section .col-lg-2 { width: 16.66666667%; padding: 0 10px; } /* Akhir Produk Responsive */ /* Banner Responsive */ div#banner-section .col-sm-9 .title-banner { padding: 0 40% 0 6%; } div#banner-section .col-sm-9 .desc-banner { padding: 0 42% 0 6%; } div#banner-section .col-sm-9 .button-banner { padding: 0 40% 0 6%; } /*div#banner-section::before { display: block; position: absolute; content: ""; width: 42%; height: 55%; left: 8%; top: 24%; } */ #banner-section .container.no-padding:nth-child(1) { margin-right: auto !important; } #banner-section .container.no-padding { display: flex; justify-content: center; align-items: center; } #banner-section .col-sm-6 { width: 50%; } /* Akhir Banner Responsive */ /* Header Responsive */ body #navbar-section ul.horizontal-menu > li > a { margin-right: 8px !important; font-size: 15px !important; } a#btn-cart-floating { animation: animasixl 2s !important; } body.not-home a#btn-cart-floating { } body a#btn-cart-floating { right: 6% !important; transform: translateX(-100%); margin-left: 570px; left: 50%; top: 126px !important; } i.fa.fa-shopping-cart { font-size: 18px !important; } .btn-inactive { animation: animasixl 2s !important; } #navbar-section .right-content a { margin-right: 15px !important; } /* Akhir Header Responsive */ /* Random */ .col-lg-5.col-lg-push-7 label.col-lg-4 { width: 100%; } div .form-group .col-lg-8 { width: 100%; padding: 10px 0; margin-left: 0; } div.text-right.mt10 { position: absolute; top: -50px !important; right: 20px !important; } } /* Akhir Random */ /* =========================(1025px)and(1200px)========================= */ @media (min-width: 1025px) and (max-width: 1200px) { body a#btn-cart-floating{ margin-right: -55px !important; } } /* =========================(1280px)and(1281px)========================= */ @media (min-width: 1280px) and (max-width: 1281px) { #data-section .container.no-padding { padding: 0px 55px !important; } #data-section .komponen-sll-ready.col-sm-9.col-xs-12 { width: 47%; } div#data-section { margin: 0 90px 75px !important; border-radius: 10px; } html body a#btn-cart-floating { right: 55px !important; } } /* =========================(1400px)========================= */ @media (min-width: 1400px) { body a#btn-cart-floating { right: 113px !important; } #data-section .container.no-padding { padding: 0 5% ; } } /* =========================(1600px)========================= */ @media (min-width: 1600px) { #data-section .container.no-padding { padding: 0 !important; } html body a#btn-cart-floating { right: 215px !important; } } #promopanjang-section .container.no-padding { z-index: 2; position: relative; } body { background-color: #ffffff !important; }