.mobile, .judul-h2-mobile {
	display: none;
	visibility: hidden;
}
.desktop, .judul-h2 {
	display: block;
	visibility: visible;
}
/* Portrait and Landscape */
@media only screen and (min-width: 1441px) {
	.problem {
		padding-top: 0px; 
		padding-bottom: 0px;
	}
	.problem h2 {
		font-size: 45px;
		margin-top: 290px;
	}
	.problem .selection .more {
		margin-top: 250px;
	}
	.posisi h2 {
		font-size: 40px;
	}
	.konsultasi {
		background-size: 128%;
		padding: 200px 0px 10px 0px;
	}
	.problem .selection {
		margin-top: -260px;
	}
	.about-d h2:after, .testimonial h2:after {
		top: 138px;
	}
	.video-home h2:after, .manfaat h2:after, .komposisi h2:after {
		top: 61px;
	}
	.blog .h2:after {
		top: 65px;
	}
	.text-mitra-map {
		font-size: 14px;
	}
	.text-mitra-map {
		font-size: 14px;
	}
	/*.oval-bg-bottom {
		width: 100%;
		/*background-image: url(../images/home/batas-bg-black.png);*/
		/*background-size: 100%;
		background-repeat: no-repeat;
		height: 66px;
		-webkit-transform: rotate(50deg);
		-moz-transform: rotate(50deg);
		-o-transform: rotate(50deg);
		-ms-transform: rotate(50deg);
		transform: rotate(180deg);*/
		
	/*}
	.oval-bg {
		height: 65px;
		margin-top: -65px;
		}*/
		.jenis-kulit h2 {
			top: -45px;
		}
		.video-home {
			padding: 130px 0px;
			padding-bottom: 200px;
			background-color: white;
			width: 100%;
			position: relative;
			overflow: hidden;
		}
		.jenis-kulit {
			padding: 100px 0px;
			position: relative;
			width: 100%;
			overflow: hidden;
		}
		.jenis-kulit .img-1 {
			position: absolute;
			left: 0px;
			right: 900px;
			margin: auto;
			margin-top: 100px;
			height: 60px;
		}
		.jenis-kulit .img-2 {
			position: absolute;
			left: 0px;
			right: 900px;
			margin: auto;
			margin-top: 250px;
			height: 60px;
		}
		.jenis-kulit .img-3 {
			position: absolute;
			left: 900px;
			right: 0px;
			margin: auto;
			margin-top: 100px;
			height: 60px;
		}
		.jenis-kulit .img-4 {
			position: absolute;
			left: 900px;
			right: 0px;
			margin: auto;
			margin-top: 250px;
			height: 60px;
		}
		.jenis-kulit .img-kulit img {
			width: 800px;
			margin:auto;
			display: table;
		}
	}
	@media only screen 
	and (min-device-width: 320px) 
	and (max-device-width: 480px) {
		.col-sm-6 {
			width: 50%;
			padding: 7px;
		}
		.col-sm-12 {
			width: 100%;
		}
		.text-rodeos {
			padding: 50px 20px;
		}
		.text-rodeos h3 {
			line-height: 1.1em;
			font-size: 25px;
		}
		.produk-page .content-produk {
			padding: 0px 8px 8px 8px;
		}
		.filter-mitra {
			padding: 15px 0px 0px 0px;
		}
		.content-produk {
			margin-bottom:0px!important;
		}
		.judul-h2-mobile {
			display: block!important;
		}
		.list-mitra {
			padding-top: 30px;
		}
		.list-mitra h2, .list-mitra .btn {
			text-align: center;
			float: inherit!important;
			position: relative;
			z-index: 9;
			margin: auto;
			display: table;
			margin-bottom: 10px;
		}
		.konsultasi {
			background-size: 960%;
			background-repeat: no-repeat;
			padding: 30px 0px; 
			padding-bottom: 0px;
			overflow: hidden;
			width: 100%;
		}
		.text-wa {
			text-align: center;
		}
		.text-wa p {
			font-size: 16px;
			line-height: 1.3em;
		}
		.text-wa h2 {
			font-size: 30px;
		}
		.img-phone-wa {
			margin-left: -12px;
			position: absolute;
			right: -30px;
		}
		.middle {
			margin-top: 40px;
			height: 575px
		}
		#screen {
			left: 38px;
		}
		.btn-whatsapp {
			text-align: center;
		}
		.idcard .namecard {
			font-size: 12px;
			bottom: 24%;
			left: 24%;
		}
		.idcard .nocard {
			font-size: 16px;
			bottom: 13%;
			left: 24%;
		}
		.idcard .statuscard {
			font-size: 10px;
			bottom: 40%;
			left: 6%;
		}
		.idcard .citycard {
			font-size: 10px;
			bottom: 40%;
			left: 34%;
		}
		.idcard .daftarcard {
			bottom: 2%;
			right: 23%;
			font-size: 10px;
		}
		.idcard .excard {
			bottom: 2%;
			right: 5%;
			font-size: 10px;
		}
		.no {
			display: none;
		}
		.mitra {
			float: left;
		}
		.register-mitra {
			padding: 20px 0px;
		}
		.register-mitra h2, .mitra h2 {
			font-size: 22px;
		}
		.register-mitra img {
			width: 200px;
			display: table;
			margin:auto;
		}
		.content-mitra-list {
			height: 270px;
		}
		.how-mitra {
			padding: 20px 0px;
		}
		.how-mitra img {
			width: 125px!important;
			height: auto;
		}
		.problem h2 {
			font-size: 23px!important;
			margin-left: 0px;
			margin-top: 0px;
			font-size: 25px;
		}
		.table-mitra-content {
			padding: 30px 0px;
		}
		.testimo-mitra {
			padding: 30px 0px;
		}
		.problem .selection .hover {
			height: 95%;
			margin: auto;
			left: 0px;
			bottom: inherit;
		}
		.middle {
			min-height: 0px;
		}
		.test-mitra {
			margin-bottom: 20px;
			box-shadow: 0 20px 75px 0 rgba(177,187,203,0.5);
		}
		.previous_btn, .next_btn {
			text-align: center;
			cursor: pointer;
			height: 35px;
			-webkit-transition: opacity 0.4s ease-in-out;
			-moz-transition: opacity 0.4s ease-in-out;
			-ms-transition: opacity 0.4s ease-in-out;
			-o-transition: opacity 0.4s ease-in-out;
			transition: opacity 0.4s ease-in-out;
			width: 35px;
		}
		.problem .selection img {
			float: inherit!important;
		}
		.problem .link-problem {
			text-align: center;
			margin: auto;
			display: table;
			float: inherit;
		}
		.directional_nav {
			top: 105px;
			right: 35px;
		}
		.previous_btn i, .next_btn i {
			font-size: 22px;
			top: 7px;
			position: relative;
		}
		.subscribe .form {
			width: 100%;
		}
		#cartheader {
			width: 0px;
		}

		.cartheaderopen {
			width: 100%!important;
		}
		#searchheader {
			width: 0px;
		}
		.searchheaderopen {
			width: 100%!important;

		}
		#profilheader {
			width: 0px;
		}
		.profilheaderopen {
			width: 100%!important;

		}
		.content-reseller {
			display: block;
		}
		.content-reseller h1 {
			font-size: 23px;
		}
		.content-reseller h2 {
			font-size: 20px;
		}
		.content-reseller h3 {
			font-size: 18px;
		}
		.content-reseller h4 {
			font-size: 16px;
		}
		.content-reseller h5 {
			font-size: 14px;
		}
		.content-reseller h6 {
			font-size: 12px;
		}
		.content-reseller p, .content-reseller li {
			font-size: 14px;
		}
		.page-page {
			padding: 0px;
			padding-bottom: 40px;
		}
		.blog .more, .testimonial .more, .produk-page .more {
			text-align: center;
			margin: auto;
			margin-top: 20px!important;
        	margin-bottom: 30px !important;
			padding: 10px 20px 10px 25px!important;
			border-radius: 50px;
			font-size: 18px;
			width: auto!important;
			display: table;
			position: relative;
			border: solid 1px #eee;
			color: #3a3333;
			background-color: white;
		}
		.navbar-kleenar .navbar-nav a {
			height: inherit;
			padding-top: 15px;
			padding-bottom: 15px;
			font-size: 13px;
		}
		.navbar-kleenar .navbar-nav {
			height: inherit;
			background: white;
		}
		.navbar-kleenar .navbar-nav .form-kleenar {
			width: 100%;
		}
		.navbar-nav form {
			padding-left: 15px;
			padding-right: 15px;
		}
		.navbar-kleenar .navbar-nav .button-kleenar {
			top: 78px!important;
			right: 21px;
		}
		.produk-detail {
			margin-top: 50px;
			margin-bottom: 0px;
		}
		.produk-detail .info h1 {
			margin-top: 10px!important;
			margin-bottom: 10px;
			font-size: 20px;
		}
		.btn-mp {
			width: 48%!important;
			font-size: 14px!important;
		}
		.mp .btn-mp img {
			width: 25px!important;
		}
		.mp .btn-mp {
			margin-bottom: 10px;
		}
		.btn-mp img {
			width: 25px!important;
		}
		.share b {
			margin-bottom: 10px;
		}
		.menu-icon {
			float: left;
			padding-left: 10px;
			z-index: 9999;
			position: absolute;
			right: 20px;
			top: 5px;
		}
		.menu-mobile {
			z-index: 9999;
			position: relative;
		}
		.menu-icon li {
			float: left;
			list-style: none;
			padding: 23px 10px 22px 10px;

		}
		.menu-icon li a {
			color: #666;
			font-size: 17px
		}
		#totalcart {
			font-size: 14px;
			margin-top: -5px;
			float: right;
			color: orange;
		}
		.navbar-toggle {
			margin-top: 5px;
			z-index: 9;
		}
		.dropdown-toggle:after {
			display: inline-block;
			margin-left: 0px;
			vertical-align: 0px;
			content: none;
			border-top: 0px solid;
			border-right: 0px solid transparent;
			border-bottom: 0px;
			border-left: 0px solid transparent;
		}
		.logo a {
			display: contents;
		}
		.navbar-kleenar .logo {
			float: left;
			position: absolute;
			top: -20px;
		}
		.navbar-kleenar .logo img {
			margin-top: 10px;
			height: 80px!important;
		}
		.produk-home {
			padding-top: 30px!important;
			margin-top: -10px!important;
			padding-bottom: 0px!important;
		}
		.m-login {
			width: 100%;
			background: white;
			display: none;
			z-index: 9;
			position: absolute;
			margin: -15px;
		}
		.blog {
			float: left;
		}
		.m-login ul {
			padding-left: 10px;
		}
		.m-login ul li {
			list-style: none;
			padding: 10px 10px;
		}
		.slidem {
			position: relative;
			margin-top: 15px;
		}
		.slider {
			width: 100%;
			display: table;
			float: left;
			overflow: hidden;
			position: relative;
			margin-top: 0px;
		}
		.m-login ul li a {
			color: #666;
		}
		#m-login {
			display: none;
		}
		.order-m {
			z-index: 9;
			position: relative;
		}
		#m-checkout {
			display: none;
		}
		.navbar-default .navbar-toggle {
			border: 0px!important;
			background: black;
		}
		.dropdown-cart {
			width: 100%;
		}
		.mobile, .judul-h2-mobile {
			display: block;
			visibility: visible;
		}
		.desktop, .judul-h2 {
			display: none!important;
			visibility: hidden;
		}
		#m-search {
			padding: 16px;
			margin-top: -13px;
			padding-top: 40px;
			background: white;
			display: none;
		}
		.button-kleenar {
			position: absolute;
			background: transparent;
			border: 0px;
			top: 78px!important;
			right: 21px;
		}
		.menu-icon a {
			text-decoration: none;
		}
		.navbar-kleenar .in {
			display: block!important;
		}
		#bs-example-navbar-collapse-1 {
			margin-top: -21px;
			width: 100%;
			position: absolute;
			border-top: 0px;
		}
		.navbar-kleenar .navbar-nav a {
			height: inherit;
			padding-top: 10px;
			padding-bottom: 10px;
			font-size: 12px;
		}
		.navbar-kleenar .navbar-nav .active a {
			border:0px;
			color: orange;
		}
		.info-order tr td {
			font-size: 12px;
		}
		.info-order tr td:nth-child(1) {
			width: 80px;
		}
		.list-order .btn-payment {
			font-size: 13px;
			padding: 7px 0px;
			width: 100%;
		}
		.row-mobile {
			margin-left: -10px;
			margin-right: -10px;
		}
		.list-product-order tr td {
			font-size: 12px;
		}
		.list-product-order tr td:nth-child(1) {
			width: 65px;
		}
		.list-product-order p {
			font-size: 13px!important;
			margin-bottom: 0px!important;
		}
		.list-product-order .discount {
			font-size: 10px!important;
		}
		.tot tr td {
			font-size: 12px;
		}
		.tot tr td:nth-child(1) {
			width: 165px!important;
		}
		.info-address tr {
			line-height: 1.5em!important;
		}
		.info-address tr td {
			font-size: 12px;
		}
		.info-address {
			padding: 15px;
		}
		.list-order {
			padding: 15px;
		}
		.info-address tr td:nth-child(1) {
			width: 73px!important;
		}
		.order-m-page {
			margin-top: 50px!important;
		}
		.komposisi h2 {
			margin-top: 30px;
		}

		.komposisi h2, .problem h2, .subscribe h2, .about-d h2, .video-home h2, .manfaat h2, .text-wa h2, .testimonial h2, .blog .h2 {
			position: relative;
			font-size: 25px;
		}
		.komposisi h2:after, .manfaat h2:after, .video-home h2:after, .problem h2:after, .subscribe h2:after, .testimonial h2:after, .blog .h2:after, .about-d h2:after, .text-wa h2:after {
			width: 80px;
			top: 50px;
		}
		.komposisi p, .komposisi span, .problem p, .problem span, .subscribe p, .subscribe span, .about-d p, .about-d span {
			font-size: 14px;
		}
		.text-wa h2:after {
			margin: auto;
			display: table;
		}
		.konsultasi h2 {
			margin-bottom: 45px;
		}
		.konsultasi {
			padding-bottom: 50px;
		}
		.blog {
			padding: 30px 0px;
		}
		.blog .h2 {
			margin-top: 0px!important;
			color: white;
		}
		.testimonial {
			padding: 30px 0px;
		}
		.komposisi {
			padding-bottom: 50px;
			padding-top: 0px;
			float: left;
		}
		.manfaat {
			padding: 100px 0px 40px 0px;
		}
		.content-manfaat {
			margin-top: -30px;
		}
		.content-manfaat img {
			width: 100%!important;
			margin-top: 30px!important;
		}

		.content-manfaat .text-11, .content-manfaat .text-21, .content-manfaat .text-31, .content-manfaat .text-41, .content-manfaat .text-51, .content-manfaat .text-61 {
			margin-top: 8px;
			background-color: black;
			color: white;
			width: 100%;
			padding: 10px 12px;
			display: table;
			font-size: 16px;
			text-transform: capitalize;
			border-radius: 10px;
		}
		.video-home h2 {
			margin-top: 20px!important;
			margin-bottom: 5px!important;
		}
		.browser {
			margin-top: 30px;
		}
		.jenis-kulit {
			padding: 70px 0px 30px 0px;
		}
		.jenis-kulit h2 {
			font-size: 25px;
			top: -45px;
		}
		.jenis-kulit h2:after {
			top: 70px;
			width: 70px;
		}
		.jenis-kulit .img-kulit img {
			width: 100%;
		}
		.mobile .icon-grid, .mobile .icon-magnifier, .mobile .icon-user, .mobile .icon-close {
			color: #ddd;
		}
		.jenis-kulit .img-1, .jenis-kulit .img-2, .jenis-kulit .img-3, .jenis-kulit .img-4  {
			position: relative;
			left: 0px;
			width: 100%;
			margin: auto;
			margin-top: 5px;
			display: table;
			mix-blend-mode: luminosity;
		}
		.jenis-kulit .img-1:hover, .jenis-kulit .img-2:hover, .jenis-kulit .img-3:hover, .jenis-kulit .img-4:hover  {
			mix-blend-mode: none;
		}
		.blog .more {
			width: 100%;
			padding: 10px 15px 10px 31px;
			font-size: 14px;
		}
		.problem .selection {
			padding: 0px 15px;
			margin-top: 0px;
		}
		.problem img {
			margin-bottom: 15px;
		}
		.problem span, .problem h1 {
			margin-left: 0px;
			margin-top: 10px;
		}
		.problem span {
			margin-bottom: 20px;
		}
		.problem {
			padding-top: 0px;
			padding-bottom: 40px;
		}
		.problem .selection .more .icon-a, .product .more .icon-a {
			padding: 10px!important;
		}
		.problem .selection .more span, .product .more span {
			margin-top: 10px!important;
		}
		.problem .selection .more, .product .more {
			padding-top: 20px!important;
			font-size: 18px!important;
			margin: auto!important;
			display: table;
			float: inherit!important;
		}
		.product {
			padding-bottom: 50px;
		}
		.video-home {
			padding: 0px 0px 50px 0px;
		}
		.video-home p {
			margin-bottom: 30px;
			font-size: 14px;
		}
		.video-home iframe {
			height: 200px;
		}
		.hover .sm {
		}
		.sm .clicked {
			opacity: 1;
			transition: 0.5s all ease;
			transform: translateY(50px);
		}
		.sm .social {
			margin: 4px;
		}
		.subscribe {
			padding: 55px 0px;
		}
		.blog .content-blog {
			margin-bottom: 15px;
		}
		.problem .selection .titlee {
			color: #ffffff;
			position: absolute;
			font-weight: 500;
			font-size: 20px;
			bottom: 15px;
			left: 0px;
			right: 0px;
			width: 50%;
			margin: auto;
			display: table;
			border-radius: 10px;
			letter-spacing: 1px;
			transition: all 0.3s ease-in-out;
			/* margin-left: 0px; */
			background: orange;
			/* border: solid 3px white; */
		}
		footer {
			background-size: 1400px!important;
			background-position: left!important;
		}
		footer .about .more {
			float: inherit;
			position: relative;
			margin-bottom: 20px;
			display: table;
		}
		#share {
			text-align: inherit;
			float: inherit;
			display: table;
			position: relative;
			width: 100%;
		}
		#share a {
			text-align: center;
			width: 33px;
			height: 33px;
		}
		footer .copyright {
			padding: 15px 0px;
			font-size: 12px;
		}
		.about-d {
			padding: 50px 0px;
		}
		.slide-about {
			padding: 50px 0px;
		}
		.slide-about h2 {
			font-size: 20px;
		}
		.slide-about p {
			font-size: 14px;
		}
		.produk-page {
			padding-top: 0px;
			padding-bottom: 50px;
			padding-left: 3px;
			padding-right: 3px;
		}
		.official-label {
			display: none;
		}
		.official-label-mobile {
			display: block;
			font-size: 10px;
			padding: 1px 3px;
			border-radius: 3px;
			margin-right: 1px;

			background: #292929;
			color: white;
			font-weight: 600;
			letter-spacing: 0.4px;

			position: absolute;
			z-index: 9999;
			bottom: 5px;
			left: 5px;
		}
		.menu-blog a {
			padding: 0px 5px;
			color: #555;
			font-size: 12px;
		}
		.produk-page .content-produk h2 {
			font-size: 14px !important;
		}
		.produk-page .content-produk .judul-h2-mobile {
			margin-top: 5px;
			display: inline-table;
			line-height: 1.5em;
		}
		.label-persen {
			top: 25px;
			font-size: 12px;
		}
		.blog-page {
			padding-top: 40px;
			padding-bottom: 50px;
		}
		.menu-blog {
			margin-bottom: 20px;
		}
		.detail-blog {
			margin-top: 50px;
			margin-bottom: 100px;
		}
		.detail-blog .title {
			font-size: 18px;
			margin-top: 3px;
		}
		.detail-blog .datecat {
			color: #aaa;
			font-size: 10px;
			margin-top: 5px;
			letter-spacing: 0.4px;
		}
		.category-blog {
			font-size: 10px;
		}
		.detail-blog hr {
			margin-top: 15px;
			margin-bottom: 15px;
		}
		.detail-blog p {
			margin: 0 0 10px;
			font-size: 14px;
		}
		.detail-blog .h3-blog {
			margin-top: 50px;
			font-size: 20px;
		}
		.detail-blog .list-sim {
			float: inherit;
			display: table;
			margin-bottom: 30px;
		}
		.login-m {
			margin: auto;
			display: table;
			float: inherit;
			background-color: white;
			border: solid 1px #eee;
			border-radius: 10px;
			overflow: hidden;
			margin-top: 100px;
			margin-bottom: 100px;
			padding: 30px;
			margin: 50px 15px;
			width: 91%;
		}
		.empty {
			padding: 0px 0px 80px 0px;
		}
		.table-checkout tr th:nth-child(3) {
			width: 131px;
			float: left;
		}
		.btn-save-m {
			border-radius: 0px;
			font-size: 15px;
		}
		.btn-delete-cart {
			position: absolute;
			right: -5px;
			border-radius: 50%;
			margin-top: 5px;
			padding: 2px 7px;
		}
		.kodepromo {
			width: 60%;
			text-transform: uppercase;
			border-radius: 50px 0px 0px 50px;
		}
		.vouc .kodepromo {
			text-transform: uppercase;
			border-radius: 50px;
		}
		.custom-select {
			margin-bottom: 15px;
		}
		.btn-ongkir {
			width: 35%;
		}
		#cekpromo {
			width: 40%;
		}
		.vali {
			position: absolute;
			top: -24px;
			right: 142px;
		}
		.hasil-ongkir {
			width: 65%!important;
		}
		#country, #kabupaten, #kelurahan {
			margin-bottom: 15px;
		}
		.pengiriman {
			font-size: 18px;
		}
		.invoice-cart {
			margin-top: 50px!important;
			margin-bottom: 50px!important;
		}
		.detail-order-m {
			margin-top: 50px!important;
			margin-bottom: 50px!important;
		}
		.detail-order-m tr td, .detail-order-m tr th {
			font-size: 12px;
		}
		.detail-order-m tr td:nth-child(1) {
			width: 100px!important;
		}
		.info-payment-fix {
			margin-left: 0px!important;
			margin-top: 15px!important;
		}
		.info-address tr td:nth-child(1) {
			width: 75px!important;
		}
	}

	@media only screen 
	and (min-device-width: 0px) 
	and (max-device-width: 320px) {
		.btn-mp {
			width: 47%!important;
			font-size: 12px!important;
		}
	}