/* @media (max-width: 568px) { */
/* @media (max-width: 320px) { */

@media (min-width: 320px) and (max-width: 568px) {
	.row{
		    margin: 0;
	}
	
	.dropdown-menu{
		border:none;
		border-radius: 0;
		-webkit-box-shadow:none;
		box-shadow:none;
		float:none;
		text-align: center;
	}
	
	.post-img-content{display:inline-block;}
	.col-xs-2{width:100%;}
	.col-xs-3{width:50%;}
	.post-img-content img{border-radius:0;clear:both;position:none;}
	.head.col-xs-4{width:100%;}
	.keranjang.col-xs-6{width:100%;}
	
	.logo{width:100%;position:absolute;}
	.logo img{width:35%;}
	
	.col-xs-4.kiriatas{width:100%;}
	.kiriatas{position: relative;top:104px;z-index:1}
	.kiriatas ul{margin-left:50px;position:relative;}
	.kiriatas ul li a{color:#ffffff;margin-left:50px;}
	.kananatas{width:100%;top:-10px;}
	.kananatas ul li a{position:relative;font-size:14px;}
	
	.sg{width:100%}
	.keranjang{width:100%;top:15px;display:flex;position:relative;left:10px;}
	.bawahkiri{display:flex;width:100%;}
	.navbar-default .navbar-toggle.icon-bar{border-color:#000000;background-color: #fff;}
	.navbar-toggle{position:relative;}
	.navbar-collapse{position:relative;top:30px;}
	
	.container-fluid{padding-left:0;padding-right:0;}
	.container-fluid.f48{padding-left:0px;padding-right:0px;}
	
	.server-action-menu {
				background-color: transparent;
				background-image: linear-gradient(to bottom, rgba(30, 87, 153, 0.2) 0%, rgba(125, 185, 232, 0) 100%);
				background-repeat: repeat;
				border-radius:5px;
				padding: 10px;
	}
	
	.round-tag{
		width: 60px;
		height: 60px;
		border-radius: 0% 0% 50% 0%;
		border: 4px solid #FFF;
		background: red;
		position: absolute;
		top: 0px;
		padding: 15px 6px;
		font-size: 17px;
		color: #FFF;
		font-weight: bold;
		left:0px;
	}
	
	.menu{color:#000;}
	
	
	.navbar-toggle{top:-90px;}
	
	
	.navmenu{top:-50px;position:relative;}
	
	.navmenu a{
		color:#000000;
		font-size:15px;	
		
	}
	
	.navmenu a:hover{
		color:#000000;
		text-decoration:underline;
	}
	

	
	.navatas a{
		text-transform:uppercase;
		color:#000000;
		left:53px;
		top:15px;
	}
	
	.navatas a:hover{
		color:#000000;
	}
	
	.navatas ul li a{
		font-weight:bold;
		--text-decoration: none; 
		--border:1px solid;
	}
	
	.navmenu ul{
		margin-top:30px;
		position:relative;
	}
	
	.navmenu ul li
	{
		width:100%;
		
	}
	
	.navmenu ul li a{
	
		width:100%;
		--display:inline-block;
	}
	
	ul li{
		
		padding:5px;
		
	}
	
	ul li a{
		--font-weight:bold;
		--text-decoration: none; 
		font-size:14px;
		
	}
	
	.cnt{padding-left:15px;padding-right:0;}
	.controls{margin-left:10px;}
	.hlogin{top:20px;position:relative;}
	.cproduk li{margin-top:60px;position:relative;}
	
	a:hover{
		text-decoration: none; 
	}
	
	.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12{
	
		padding-right: 0; 
		padding-left: 0; 
	}
	
	.footercopyright{position:relative;margin-left:12px;}
	
	#navbar-height-col {
	    position: fixed;
	    top: 0;
	    height: 100%;
		bottom:0;
	    width: 40%;
	    left: -80%;
	    background: #f7f7f7;
		z-index:1;
	}
	
	#slide-nav #slidemenu {
	    background: #f7f7f7;
	    left: -100%;
	    width: 40%;
	    min-width: 0;
	    position: absolute;
	    padding-left: 0;
	    z-index: 9;
	    top: -8px;
	    margin: 0;
		height:100%;
		
	}
	
	#slide-nav #slidemenu .navbar-nav .dropdown-menu li a {
	    min-width: 0;
	    width: 80%;
	    white-space: normal;
	}
	
}

/*pad*/
@media (min-width: 414px) and (max-width: 736px) {
	

	.post-img-content{width:100%;display:inline-block;}
	.col-xs-2{width:50%;}
	.col-xs-3{width:50%;}
	.post-img-content img{border-radius:0;clear:both;position:none;}
	.head.col-xs-4{width:100%;}
	.keranjang.col-xs-6{width:100%;}
	.carip.col-md-8.col-md-offset-4{padding:5px;}
	.produksalesman.col-xs-6{width:50%;}
	.logo{width:100%;position: absolute;}
	.logo img{width:30%;}
	
	.carproduk{margin-top:50px;}
	
	.kiriatas{position: relative;display:inline-block;top:95px;margin-bottom:30px;z-index:1;left:220px;}
	
	.kananatas{position: relative;width:50%;top:70px;left:-30px;line-height:20px;}
	.keranjang{width:100%;top:35px;display:flex;position:relative;left:20px;}
	.bawahkiri{display:flex;width:100%;}
	
	.copyright{position:relative;left:5px;}
	
	.server-action-menu {
		background-color: transparent;
		background-image: linear-gradient(to bottom, rgba(30, 87, 153, 0.2) 0%, rgba(125, 185, 232, 0) 100%);
		background-repeat: repeat;
		border-radius:5px;
		padding: 10px;
	}
	
	.round-tag{
		width: 60px;
		height: 60px;
		border-radius: 0% 0% 50% 0%;
		border: 4px solid #FFF;
		background: red;
		position: absolute;
		top: 0px;
		padding: 15px 6px;
		font-size: 17px;
		color: #FFF;
		font-weight: bold;
		left:0px;
	}
	
	.menu{color:#000;}
	
	.navmenu{	
		top:-55px;
		left:-20px;
	
	}
	
	.navmenu a{
		color:#000000;
		font-size:15px;	
	}
	
	.navmenu a:hover{
		color:#000000;
		text-decoration:underline;
	}
	
	.navatas a{
		text-transform:uppercase;
		color:#000000;
		
	}
	
	.navbar-toggle{top:-120px;}
	
	
	.navatas a:hover{
		color:#000000;
	}
	
	.navatas ul li a{
		font-weight:bold;
		--text-decoration: none; 
		--border:1px solid;
	}
	
	.navmenu ul{
		margin-top:30px;
		position:relative;
	}
	
	.navmenu ul li
	{
		width:100%;
		
	}
	
	.navmenu ul li a{
	
		width:100%;
		display:inline-block;
	}
	
	ul li{
		
		padding:5px;
		
	}
	
	ul li a{
		--font-weight:bold;
		--text-decoration: none; 
		font-size:14px;
		
	}
	
	a:hover{
		text-decoration: none; 
	}
	
	#slide-nav .navbar-toggle{
	
		top:-80px;
		position:relative;
		z-index:9;
	}
	
	#navbar-height-col {
	    position: fixed;
	    top: 0;
	    height: 100%;
		bottom:0;
	    width: 40%;
	    left: -80%;
	    background: #f7f7f7;
		z-index:1;
	}
	
	#slide-nav #slidemenu {
	    background: #f7f7f7;
	    left: -100%;
	    width: 40%;
	    min-width: 0;
	    position: absolute;
	    padding-left: 0;
	    z-index: 9;
	    top: -8px;
	    margin: 0;
		height:100%;
		
	}
	
}


@media (min-width: 768px) and (max-width: 1024px) {
	.logo{position: relative;width:20%;margin:0 auto;left:50px;}
	.logo img{width:100%;}
	.kananatas{position: relative;left:35px;width:400px;}
	.kiriatas{position: relative;}
	.headatas{position: relative;top:50px;left:-45px;height:100px;}
	.navbar.navbar-default.navbar-static-top{background-color:white;}
	.keranjang{right:20px;top:-40px;}
	.navatas ul li a{font-size:14px;}
	.navmenu{margin-left:30px;position:relative;}
	
	.bawahtengah{position:relative;left:0px;}
	.copyright{position:relative;left:0px;}

	
	.round-tag{
		width: 60px;
		height: 60px;
		border-radius: 0% 0% 50% 0%;
		border: 4px solid #FFF;
		background: red;
		position: absolute;
		top: 0px;
		padding: 15px 6px;
		font-size: 17px;
		color: #FFF;
		font-weight: bold;
		left:0px;
	}
	
	
}

/*ipad*/
@media (min-width: 1024px) and (max-width: 1200px) {
	.logo{position: relative;width:20%;margin:0 auto;left:50px;}
	.logo img{width:100%;}
	.kananatas{text-align:right;width:40%;position:relative;left:50px;}
	.kiriatas{position: relative;left:25px;}

	.headatas{position: relative;top:20px;}
	.keranjang{right:15px;top:-40px;}
	.navbar.navbar-default.navbar-static-top{background-color:white;}
	
	.salescari{margin-top:0px;position:relative;}
	.bawahtengah{position:relative;left:10px;}
	.copyright{position:relative;left:25px;}
	
	.keranjang{text-align:right;}
	
	.logoutsalesman{position:relative;left:0;}
	
	.round-tag1{
		width: 50px;
		height: 55px;
		border-radius: 50% 50% 50% 0;
		border: 4px solid #FFF;
		background: red;
		position: absolute;
		bottom: 0px;
		padding: 15px 6px;
		font-size: 17px;
		color: #FFF;
		font-weight: bold;
		top:138px;
		left:-5px;
	}
	
	.round-tag{
		width: 60px;
		height: 60px;
		border-radius: 0% 0% 50% 0%;
		border: 4px solid #FFF;
		background: red;
		position: absolute;
		top: 0px;
		padding: 15px 6px;
		font-size: 17px;
		color: #FFF;
		font-weight: bold;
		left:0px;
	}
	
	.server-action-menu {
		background-color: transparent;
		background-image: linear-gradient(to bottom, rgba(30, 87, 153, 0.2) 0%, rgba(125, 185, 232, 0) 100%);
		background-repeat: repeat;
		border-radius:5px;
		padding: 10px;
		height:100px;
	}
	
	.menu{visibility: hidden;}
	
	.navmenu{
		height:30px;
		top:-55px;
		left:20px;
	}
	
	.navmenu a{
		color:#000000;
		font-size:15px;	
	}
	
	.navmenu a:hover{
		color:#000000;
		text-decoration:underline;
	}
	
	.navatas a{
		text-transform:uppercase;
		color:#000000;
	}
	
	.navatas a:hover{
		color:#000000;
	}
	
	.navatas ul li a{
		font-weight:bold;
		--text-decoration: none; 
	
	}
	
	ul li{
		
		padding:5px;
		
	}
	
	ul li a{
		--font-weight:bold;
		--text-decoration: none; 
		font-size:14px;
		
	}
	
	a:hover{
		text-decoration: none; 
	}
	
}

@media (min-width: 1200px) {
	
	
	.slideutama{top:-50px;position:relative;}
	.slideutamabawah{top:-30px;position:relative;}
	.logo img{width:50%;}
	
	.kiriatas{left:0px;}
	.searchatas{padding-top:5px;}

	.navatas{font-size:15px;left:15px;margin-right:54px;position:relative;}
	.post-img-content {min-width: 182px;min-height: 243px;}
	.post-img-content img{border-radius:0;}
	.keranjang.col-xs-6{position:absolute;top:25px;width:100%;}
	.slideutama{padding-left:48px;padding-right:48px;}
	.hotoffer{padding-left:48px;padding-right:48px;}
	.footerbwh{padding-left:48px;padding-right:48px;}
	.footercopyright{padding-left:48px;padding-right:48px;}
	/*
	.bawahtengah{position:relative;left:-30px;}
	*/
	.keranjang{text-align:right;left:15px;}
	.kananatas{text-align:right;top:5px;left:20px;}
	.copyright{position:relative;left:15px;}
	
	.container-fluid.f48{padding-left:48px;padding-right:48px;}
	
	.server-action-menu {
		background-color: transparent;
		background-image: linear-gradient(to bottom, rgba(30, 87, 153, 0.2) 0%, rgba(125, 185, 232, 0) 100%);
		background-repeat: repeat;
		border-radius:5px;2
		padding: 10px;
		height:100px;
	}
	
	.round-tag1{
		width: 50px;
		height: 50px;
		border-radius: 50% 50% 50% 50%;
		border: 4px solid #FFF;
		background: black;
		position: absolute;
		top: 0px;
		padding: 15px 6px;
		font-size: 16px;
		color: #FFF;
		font-weight: bold;
		right:0px;
		margin:10px;
	}
	
	.round-tag1 p{
		top:-5px;
		position:relative;
	}
	
	.round-tag{
		width: 50px;
		height: 50px;
		border-radius: 0% 0% 50% 0%;
		border: 4px solid #FFF;
		background: red;
		position: absolute;
		top: 0px;
		padding: 15px 6px;
		font-size: 17px;
		color: #FFF;
		font-weight: bold;
		left:0px;
	}
	
	.round-tag p{
		top:-7px;
		position:relative;
	}
	
	.menu{visibility: hidden;}
	
	.navbar{
		margin-bottom: 0px;
		position:relative;
	}
	
	.navmenu{
		--height:10px;
		top:-50px;
		left:0;
		
	}
	
	.navmenu a{
		color:#000000;
		font-size:15px;	
		letter-spacing: 0px;
	}
	
	.navmenu a:hover{
		color:#000000;
		text-decoration:underline;
	}
	
	.navatas a{
		text-transform:uppercase;
		color:#000000;
	}
	
	.navatas a:hover{
		color:#000000;
	}
	
	.navatas ul li a{
		font-weight:bold;
		--text-decoration: none; 
	
	}
	
	ul li{
		
		padding:5px;
		
	}
	
	ul li a{
		--font-weight:bold;
		--text-decoration: none; 
		font-size:14px;
		
	}
	
	a:hover{
		text-decoration: none; 
	}
	
	.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
				/*
				padding-left:0;
				padding-right:0;
				*/
	}
	
	.cnt{padding-left:48px;padding-right:48px;}
	.sg{width:150%}
	
	.headatas{
		margin-bottom:25px;
		position:relative;
	}
	
}