@media (max-width:991px){

	.btn-green {
		font-family: 'TofinoPersonal-Regular', sans-serif;
		font-size: 12px;
		padding: 5px 50px;
	}

	#navbar{
		height: auto;
		padding: 15px 0;
		text-align: left;
	}
		#navbar .menu{
			display: none;
		}
		#navbar .logo{
			position: static;
			transform: none;
			background-size: 56px auto;
			width: 56px;
			height: 48px;
			border-radius: 0;
			background-color: transparent;
		}
		#navbar .btn-menu{
			float: right;
			position: relative;
			top: 12px;
		}
			#navbar .btn-menu img{
				height: 25px;
				width: auto;
			}

	#mobile-menu{
		position: absolute;
		z-index: 13;
		background-color: #e9f2ef;
		width: 100%;
		height: 100%;
		top: 0;
		right: -100%;
		padding: 100px 20px 0;

		transition: all 1s ease;
	}
		#mobile-menu.show{
			right: 0;
		}
		#mobile-menu .menu{
			list-style: none;
			padding: 0;
			margin: 0;
		}
			#mobile-menu .menu li{
				list-style: none;
				display: block;
				margin: 0 0 30px;
				padding: 0;
			}
				#mobile-menu .menu li a{
					display: block;
					font-family: "TofinoPersonal-Semibold", sans-serif;
					font-size: 16px;
					color: #9f8f7f;
					text-decoration: none;
				}
					#mobile-menu .menu li a .fa{
						margin-left: 10px;
					}
				#mobile-menu .menu li ul{
					display: none;
				}
					#mobile-menu .menu .submenu.show ul{
						display: block;
					}
				#mobile-menu .menu li ul li{
					margin: 7px 0;
				}

		#mobile-menu .menu .search{
			color: #9f8f7f;
			font-size: 16px;
			position: relative;
		}
			#mobile-menu .menu .search input[type=text]{
				display: block;
				font-family: "TofinoPersonal-Semibold", sans-serif;
				font-size: 12px;
				color: #989898;
				border: none;
				border-bottom: 1px solid #9f8f7f;
				padding: 5px 0;
				width: 100%;
				background-color: transparent;
				outline: none;
			}
				#mobile-menu .menu .search input[type=text]:focus{
					outline: none;
				}
			#mobile-menu .menu .search i{
				position: absolute;
				z-index: 2;
				top: 6px;
				right: 5px;
			}

		#mobile-menu .btn-hide{
			color: #9f8f7f;
			font-size: 26px;
			position: absolute;
			top: 90px;
			right: 20px;
			text-decoration: none;
		}

	#hero-banner,
	#hero-banner .item {
		height: 92.5vw;
	}
		#hero-banner .slick-dots{
			bottom: 15px;
		}
		#hero-banner .slick-dots li button {
			width: 12px;
			height: 12px;
		}

	.headpage {
		padding: 25px 0 0;
	}
	.headpage h3 {
		font-size: 14px;
		margin: 0 0 28px;
		text-align: center;
	}
		.headpage nav a {
			font-size: 12px;
			padding: 10px 20px;
		}
	.headpage-2 {
		padding: 27px 0;
	}

	.sliderbox .item{
		padding: 0 15px;
		width: 220px;
	}

	#footer {
		padding: 40px 0;
		font-size: 12px;
	}

	.section{
		background-image: url(../images/mobile/bg-section.jpg);
		background-size: auto;
	}
	.section-white {
		background-color: #fff;
		background-image: none;
	}

	#section-journey .wrap {
		padding: 70px 0 120px;
		background-image: url(../images/mobile/bg-journey.png);
	}

	#section-contact{
		padding: 30px 0 0;
		background-image: url('../images/bg-contact-mobile.jpg');
		background-size: 100% auto;
	}
		#section-contact .box{
			padding-right: 0;
			padding-left: 0;
		}

	#section-journey .before {
		background-image: url(../images/mobile/topkopi-cangkir.png);
		width: 100px;
		height: 100px;
		top: 15px;
		left: -110px;
	}
		#section-journey .before.show {
			left: -50px;
		}
	#section-journey .after{
		display: none;
	}

	#section-culture .before {
		background-image: url(../images/mobile/topkopi-karung.png);
		width: 200px;
		height: 173px;
		top: -130px;
		right: -210px;
	}
		#section-culture .before.show {
			right: -100px;
		}

	#section-generasi .bg {
		background-image: url(../images/mobile/bg-generasi.png);
		padding: 130px 0 50px;
	}
		#section-generasi .before{
			background-image: url(../images/mobile/topkopi-bijikopi-3.png);
			width: 295px;
			height: 169px;
			bottom: 0px;
			left: -300px;
		}
			#section-generasi .before.show{
				left: -200px;
			}
		#section-generasi .after{
			background-image: url(../images/mobile/topkopi-bijikopi-2.png);
			width: 250px;
			height: 183px;
			top: 0px;
			right: -300px;
		}
			#section-generasi .after.show{
				right: -170px;
			}

	#section-news{
		padding-top: 50px;
	}

	.section-name {
		font-size: 25px;
	}
	.section-tag {
		font-size: 16px;
	}
	.section-desc {
		font-size: 14px;
	}

	.box-contact header a {
		font-size: 11px;
		padding: 7px;
		margin: 0 3px;
		width: 28%;
	}
	.box-contact content {
		border-radius: 0;
		padding: 40px 20px;
	}

	.boxer .poster {
		height: 130px;
	}
	.boxer content {
		font-size: 12px;
	}
	.boxer h4 {
		font-size: 14px;
	}

	.pagination a, .pagination strong {
		font-size: 14px;
		width: 35px;
		padding: 10px 0;
	}

	.product-slider{
		margin-top: 50px;
		padding-bottom: 0;
	}
	.product-slider .item {
		padding: 0;
		display: inline-block;
		position: relative;
		transition: none;
		text-align: center;
	}
		.product-slider .item .poster img{
			width: 100%;
			max-width: 100%;
		}
	.product-slider .slick-arrow {
		bottom: -30px;
	}

	.article-slider .item {
		padding: 0 15px;
		width: 220px;
		margin-bottom: 25px;
	}

	.posting .content {
		margin: 0 0 20px;
	}
	.posting .content .poster {
		margin: 0 0 30px;
		margin-right: calc( -1 * (var(--bs-gutter-x) * .5) );
		margin-left: calc( -1 * (var(--bs-gutter-x) * .5) );
	}
	.posting .title {
		font-size: 20px;
		margin: 0 0 20px;
		width: 100%;
		line-height: 1.5;
	}
	.posting .content .sharing {
		margin: 0 0 40px;
	}
	.posting .content .product h5 {
		margin: 0 0 20px;
	}
	.posting .content .product .item h6 {
		font-size: 12px;
	}
	.posting .content .product .item {
		margin: 0 40px 20px 0;
		width: 100px;
	}

	#popup-buy .modal-content h5 {
		font-size: 26px;
		margin: 0 0 40px;
	}
	#popup-buy .modal-content .link {
		padding: 20px 50px;
		border-radius: 10px;
	}
}