/*---------------------------------------------------------------*\
    MOBILE RESPONSIVE STYLE - Olzhop Theme � Oketheme.com
\*---------------------------------------------------------------*/

@media screen and (max-width:1210px) {
	.mainwrap {
		padding: 0 20px;
	}
	.topmid {
		border-radius: 0;
	}
	#footerwrap {
		margin: 0 -20px;
		border-radius: 0;
	}
}

@media screen and (max-width:1000px) {
	#headerwrap {
		grid-template-columns: 45% 55%;
		gap: 5px;
	}
	.menukanan .glyphicon-search {
		display: inline-block;
	}
	#headerwrap .headmid {
		display: none;
		position: absolute;
		width: 100%;
		height: auto;
		top: 100%;
		z-index: 2;
		padding: 10px 10px;
		background: var(--colorlight);
	}
	.vid-container {
		grid-template-columns: 50% 50%;
	}
	.product-container {
		grid-template-columns: repeat(4, 1fr);
	}
	.ppreview {
		max-width: 300px;
		width: auto;
	}
}

@media screen and (max-width:660px) {
	.mainwrap {
		padding: 0;
	}
	.maincontain,.singlecontain {
		margin: 0;
		border-radius: 0;
	}
	.profil {
		display: block;
	}
	.foto {
		float: left;
		margin: 20px 20px 10px 0;
	}
	.imgcircle {
		width: 150px;
		height: 150px;
	}
	.biograp {
		display: contents;
	}
	.vid-container {
		grid-template-columns: 100%;
	}
	.product-container {
		grid-template-columns: repeat(3, 1fr);
	}
	.ppreview {
		max-width: 50%;
	}
	#footerwrap {
		margin: 0;
	}

	/* LAIN2 */
	.popup iframe{
		width: auto;
	}
	blockquote {
		padding: 10px 10px 10px 50px;
	}
	.confused {
		float: none;
		margin: 10px auto;
		display: block;
	}
}

@media screen and (max-width:500px) {	
	::-webkit-scrollbar {
		display: none;
	}
	.product-container {
		grid-template-columns: repeat(2, 1fr);
		gap: 10px;
	}
	.blog-container {
		grid-template-columns: repeat(1, 1fr);
		gap: 10px;
	}
	.ppreview {
		max-width: 400px;
		margin: 0 auto;
		float: none;
	}
	.zoomcover{
		display: block;
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 1;
	}
	.zoomfull {
		display: none;
	}
	.zoomhp {
		display: inline-block;
	}
	.fwidgetwrap {
		grid-template-columns: repeat(1, 1fr);
		padding: 0 10px;
		gap: 20px;
	}
	.footwidget {
		margin-bottom: 15px;
	}
	.homefoot {
		padding: 10px;
	}
	.copyright {
		display: block;
		text-align: center;
	}
	.katarsip select {
		position: unset;
		width: 100%;
		margin-top: 20px;
	}
}

@media screen and (max-width:420px) {	
		
	#headerwrap {
		grid-template-columns: repeat(1, 1fr);
		height: 120px;
	}
	#headerwrap .headleft {
		text-align: center;
		padding: 0;
	}
	#headerwrap .headright {
		background: var(--color2);
	}

	#containwrap {
		padding-top: 170px;
	}
	.maincontain,.singlecontain {
		padding: 10px;
	}
	.maintitle {
		margin: -10px -10px 10px;
	}

	/* LAIN2 */
	.wareply {
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
	}
	.wapop,.popup {
		border-radius: 0;
	}
	.fancybox-content {
		position: fixed;
		top:0;
		right:0;
		left:0;
		bottom: -8px;
	}
	.fancybox-container {
		z-index: 1000000000 !important
	}
	#autopopup {
		position: relative;
	}
}

@media screen and (max-width:280px) {
	.foto {
		float: none;
		display: block;
		margin: 10px;
		text-align: center;
	}
	.product-container {
		grid-template-columns: repeat(1, 1fr);
	}
}