/*---------------------------------------------------------------*\
    MOBILE RESPONSIVE STYLE - Diztro Theme © Oketheme.com
\*---------------------------------------------------------------*/

@media screen and (max-width:999px) {
	:root {
	  --maxwidth: 768px;
	}
	
	/* NAVIGASI */
	#navicontent {
		display: none;
		max-width: 768px;
		position: absolute;
		top: 40px;
		background: var(--color1);
		max-height: 380px;
		overflow: auto;
		z-index: 3;
		padding: 5px;
	}
	.navi {
		padding:0;
	}
	.naviku li {
		background: linear-gradient(to bottom, transparent, #ffffff0a)
	}
	.naviku>li {
		float: none;
		border-right: none;
	}
	.naviku li li .parent {
		background-position: 100% 50%;
	}
	.naviku ul,.togglemenu {
		display: block;
		width: 100%;
		border-left: none;
	}
	.naviku li li.hover ul,.naviku>li.hover>ul {
		position: static;
	}
	.naviku li li li{
	  padding-left: 10px;
	  background: rgb(0,0,0,0.02);
	}
	
	/* HEADER */
	.headleft,.headright {
		width: 50%;
	}
	.headsearch {
		display: inline-block;
	}
	.headmid {
		display: none;
	}
	
	/* SLIDER */
	.slidertext {
		max-width: 100%;
	}
	.sliderblock {
	  padding: 0 20px;
	}
	.slidertext h2 {
		font-size: 120%;
	}
	.slidertext p {
		font-size: 100%;
		font-weight: 400;
	}
	.slidertext button {
		font-weight: 400;
		padding:3px 10px;
		letter-spacing: normal;
		font-size: 90%;
		text-transform: none;
	}
	
	/* FEATURED CATEGORY */
	#katspesx .gridpadks {
		padding: 5px;
	}
	#katspesx .gridpadks img{
		width: 100px;
	}
	
	/* FEATURED PRODUCT */
	#featuredtitle,#featuredwrap {
		width: 100%;
		float: none;
	}
	.featpad {
		display: block;
	}
	#featuredtitle .maintitle {
		text-align: center;
	}
	.featured-product {
		padding: 20px 0;
	}
	
	/* NEW PRODUCT */
	.gridpad{
	  width: 50%;
	}
	.gridpad:nth-child(3n+1){
	  clear: none;
	}
	.gridpad:nth-child(2n+1){
	  clear: left;
	}
	.imgthumb .disclabel {
		top: 8px;
		left: 8px;
	}
	.imgthumb .imgmulti {
		top: 8px;
		right: 12px;
	}
	.listview .tithumb p {
		display: none;
	}
	.listview {
	  width: 100%;
	}
	
	/* BLOG */
	.bloginfo p,.bloginfo strong {
		display: none;
	}
		
	/* FOOTER */
	.footbarwidget {
		width: 100%;
	}
	.coleft,.coright {
		width: 100%;
		padding:10px 0;
		text-align: center;
	}
	
	/* SINGLE PRODUCT */
	.boxdetail h1, .boxdetail .big, .harga {
		font-size: 120%;
	}
	.pilih {
		font-size: 90%;
	}
	.pilih span, .pilih strong {
		padding:3px 6px;
	}
	
	/* MEMBER */
	.boxpp {
		width: 30%;
	}
	.boxinfo {
		width: 70%;
	}
	.avaprofil,.avatesti{
		width: 90px;
		height: 90px;
	}
}


@media screen and (max-width:640px) {
	:root {
	  --maxwidth: 480px;
	}
	.mainwrap {
		font-size: 94%;
	}
	
	#naviwrap {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 998;
	}
	.navi {
		max-width: 35%;
		margin: 0;
	}
	#headerwrap {
		padding-top: 40px;
	}
	/* NAVIGASI */
	#navicontent {
		max-width: 300px;
		position: fixed;
		top: 40px;
		bottom: 0;
		max-height: 100%;
	}
	
	/* HEADER */
	.headsearch, .headkontak, .headmember, .headcart {
		width: 23%;
		line-height: 40px;
		color: #FFF;
		font-size: 20px;
		text-align: right;
		padding-right: 20px;
	}
	.pcs {
		top: 4px;
		right: 34px;
	}
	#topmember,#rincian {
		top:0;
		right: 0;
		bottom: 0;
		width: 100%;
		position: fixed;
		max-height: 100%;
	}
	#rincian {
		overflow: auto;
	}
	#rincian #jcart table tbody {
		max-height: none;
	}
	#showhead.mobilesearch {
		top:40px;
		right: 0;
		left:0;
		width: 100%;
		position: fixed;
	}
	.headright {
		position: fixed;
		width: 65%;
		top: 0;
		right: 0;
		height: 40px;
		padding: 0 0 0 10px;
		background: rgba(0,0,0,0.09);
		z-index: 999;
	}
	.headleft {
		width: 100%;
	}
	.headmenu {
		width: 40px;
	}
	.headlogo {
		width: calc(100% - 70px);
		text-align: center;
		left: 50px;
	}
	
	/* KATEGORI */
	.menucat ul li {
		width: 50%;
		padding: 5px;
	}
	
	/* BENEFIT POINT */
	.maintitle h3 {
		font-size: 140%;
	}
	.maintitle p {
		font-size: 100%;
	}
	.why {
		text-align: center;
		padding: 7px;
	}
	.why img {
		float: none;
		margin: 0;
	}
	.why h2 {
		font-size: 100%;
	}
	
	/* FEATURED PRODUCT */
	.featured-detail button {
		padding: 4px 8px;
		font-size: 90%;
	}
	#featuredwrap .owl-controls {
		bottom: 0;
	}
	.tithumb h3, .featured-detail h3 {
		margin: 5px 0;
		font-size: 100%;
	}
	.tithumb, .featured-detail {
		line-height: 1.2em;
	}
	
	/* NEW PRODUCT */
	.katarsip {
		margin: 0 3px 20px;
	}
	.katarsip p{
		font-size: 90%;
	}
	.gridpad {
		padding: 3px;
	}
	.tithumb {
		padding: 7px;
		z-index: 1;
	}
	.listview .imgthumb {
		width: 48%;
	}
	.listview .tithumb h3 {
		font-size: 100%;
	}
	.listview .tithumb, .listview .bloginfo {
		padding: 10px;
		width: 50%;
	}
	.tithumb button {
		padding: 4px 8px;
		font-size: 90%;
	}
	.listview .hargathumb {
		font-size: 90%;
		display: inline-block;
	}
	.hargathumb {
		font-size: 90%;
		display: block;
	}
	.quicklabel {
		padding-top:15px;
	}
	
	/* BLOG */
	.bloginfo {
		padding:10px;
		line-height: 1.2em;
	}
	.bloginfo h4 {
		font-size: 100%;
	}
	
	/* FOOTER */
	.waarea {
		border-top-left-radius: 10px;
	}
	.watitle {
		width: 40px;
		height: 36px;
		line-height: 34px;
	}
	.watextbutton {
		display: none;
	}
	
	/* SINGLE PRODUCT */
	.boxview, .boxdetail {
		float: none;
		width: 100%;
	}
	.boxview {
		padding: 0 10px;
		margin: 0 auto;
	}
	.boxdetail {
		padding: 10px 0 0;
	}
	.zoomcover{
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1;
    }
	.zoomfull {
		display: none;
	}
	.zoomhp {
		display: inline-block;
	}
	blockquote {
		font-size: 100%;
		margin: 20px auto;
		padding: 20px 20px 20px 40px;	
	}
	.avadiskusi,.avatesti {
		width: 60px;
		height: 60px;
	}
	.leftcomment {
		width: 80px;
	}
	.leftcomment #ppcircle{
		border: 2px solid #FFF;
	}
	.rightcomment {
		width: 100%;
		float: none;
	}
	.rightcomment p {
		display: block;
	}
	
	/* CHECKOUT */
	.viewform {
		width: 100%;
		margin: 0 0 200px;
		float: none;
	}
	.viewcart  {
		width: 100%;
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 5;
		border: none;
		box-shadow: 0px 0px 10px 5px #0000001c;
		max-height: 210px;
	}
	.voucher {
		padding: 5px;
	}
	.voucher li {
	  width: 50%;
	  float: right;
	}
	.vouch {
	  margin: 0;
	}
	#dcart td {
	  padding: 2px;
	  font-size: 13px;
	}
	#dcart tr:nth-child(1),#dcart tr:nth-child(2){
		display: none;
	}
	#dcart .headtitle, .wizard-navigation, .viewcart .kotax.info {
		display: none;
	}
	.wizard-footer .button-primary {
		border: none;
		padding: 5px 10px;
	}
	
	/* MEMBER */
	.boxinfo {
		width: 100%;
		padding: 0;
	}
	.boxpp .avaprofil,.boxpp .judul, .boxpp p.medium,.boxpp span.warning {
		display:none;
	}
	.boxpp {
		width: 100%;
		padding: 10px;
	}
	.boxpp ul {
		margin: 0;
		width: 100%;
		height: 45px;
		overflow: overlay;
		white-space: nowrap;
	}
	.boxpp ul li {
		display: inline-block;
		border: none;
		padding: 5px 10px;
	}
	
	/* LAIN2 */
	.tabmenu {
		border: none;
		overflow: hidden;
	}
	.tabmenu button {
		width: 50%;
		padding: 12px;
		font-size: 80%;
		border: 2px solid #FFF;
		background: #F9F9F9;
		margin: 0;
		float: left;
	}
	.tabmenu button.active, .tabmenu button:hover {
		background: var(--color1);
		color: #FFF;
		border: 2px solid #FFF;
	}
	
	.popup,.invpop {
		min-width: 280px;
		width: auto;
		font-size: 94%;
	}
	
	.dataTables_wrapper .dataTables_length {
		width: 50%;
		text-align: left;
		float: left;
	}
	.dataTables_wrapper .dataTables_filter {
		width: 50%;
		text-align: right;
		float: right;
		margin-top: 0;
	}
	.banx {
		display: grid;
		width: 50%;
		float: left;
		font-size: 90%;
	}
	.banx:nth-child(2n+1){
		clear: both;
	}
}

@media screen and (max-width:420px) {
	/* HEADER */
	.infomember{
		width: 100%;
		float: none;
	}
	.menumember {
		min-width: 200px;
		margin: 10px auto;
		float: none;
		background: #F9F9F9;
	}
	
	/* SLIDER */
	.slidertext h2, .slidertext p {
		font-size: 90%;
		margin: 0;
	}
	.slidertext button {
		display: none;
	}
		
	/* KATEGORI */
	.menucat ul li {
		width: 100%;
	}
	
	/* FEATURED PRODUCT */
	.featured-product .imgthumb {
		max-width: 150px;
	}
	#featuredwrap .owl-controls {
		position: initial;
		margin-top: 10px;
	}
	
	/* NEW PRODUCT */
	.tithumb, .featured-detail {
		font-size: 90%;
	}
	.quickview {
		width: 100%;
	}
	.quickdetail {
		width: 100%;
		padding: 0;
	}
	.marketp {
		overflow: unset;
	}
	
	/* LAIN2 */
	.wali span {
		display: none;
	}
	.wareply {
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
	}
	.affstats li {
		width: 50%;
	}
	.affstats li:nth-child(3n+1) {
		clear: none;
	}
	.affstats li:nth-child(2n+1) {
		clear: left;
	}
	
	.inv-filter ul {
		height: 42px;
		overflow: overlay;
		white-space: nowrap;
	}
	.inv-filter ul li {
		float: none;
		display: inline-block;
	}
	.inv-filter ul li, .inv-filter .current, .inv-filter li:hover {
		border-bottom: none;
	}
	
	.viewform .jcart-item-total {
		display: none;
	}
	.banx {
		width: 100%;
		text-align: center;
	}
	.banx span:nth-child(1){
		margin: 0 auto;
	}
	.oketable > tbody > tr > td:nth-child(2n+1) {
		font-size: 90%;
		margin-top: 10px;
		padding-bottom: 0;
	}
	.oketable > tbody > tr > td:nth-child(1),.oketable > tbody > tr > td {
		width: 100%;
		display: block;
	}
	.invpop {
		max-height:100%;
	}
	.fancybox-content {
		position: fixed;
		top:0;
		right:0;
		left:0;
		bottom: -8px;
	}
	.fancybox-container {
		z-index: 1000000000 !important
	}
	#autopopup {
		position: relative;
	}

}