@font-face {
    font-family: 'TofinoPersonal-Semibold';
    src: url('../fonts/TofinoPersonal-Semibold.woff') format('woff'),
    	 url('../fonts/TofinoPersonal-Semibold.woff2') format('woff2');
}
@font-face {
    font-family: 'TofinoPersonal-Bold';
    src: url('../fonts/TofinoPersonal-Bold.woff') format('woff'),
    	 url('../fonts/TofinoPersonal-Bold.woff2') format('woff2');
}
@font-face {
    font-family: 'COCOGOOSELETTERPRESS';
    src: url('../fonts/COCOGOOSELETTERPRESS.woff') format('woff'),
    	 url('../fonts/COCOGOOSELETTERPRESS.woff2') format('woff2');
}
@font-face {
    font-family: 'TofinoPersonal-Ultra';
    src: url('../fonts/TofinoPersonal-Ultra.woff') format('woff'),
    	 url('../fonts/TofinoPersonal-Ultra.woff2') format('woff2');
}
@font-face {
    font-family: 'TofinoPersonal-Regular';
    src: url('../fonts/TofinoPersonal-Regular.woff') format('woff'),
    	 url('../fonts/TofinoPersonal-Regular.woff2') format('woff2');
}

html,
body{
	background: #fbf4ec center repeat;
	background-size: cover;
	position: relative;
	overflow-x: hidden;
	width: 100%;
	max-width: 100%;
}

.btn-green {
	color: #fff;
	background-color: #159b8e;
	border-color: #159b8e;
	display: inline-block;
	font-family: 'TofinoPersonal-Bold', sans-serif;
	font-size: 18px;
	text-align: center;
	padding: 5px 70px;
	text-decoration: none;
	outline: none;
	border-radius: 5px;
	line-height: 2;
}
	.btn-green:hover{
		color: #fff;
	}

.btn-submit {
	color: #fff;
	background-color: #9f8f7f;
	border-color: #9f8f7f;
	font-family: 'TofinoPersonal', sans-serif;
	font-size: 18px;
	font-weight: bold;
	text-align: center;
	padding: 5px 50px;
	text-decoration: none;
	outline: none;
	border-radius: 5px;
}
	.btn-submit:hover{
		color: #9f8f7f;
		background-color: #e9f2ef;
	}

#navbar{
	width: 100%;
	position: fixed;
	text-align: center;
	background: #e9f2ef;
	height: 80px;
	z-index: 15;
	box-shadow: 0 2px 6px 0 rgba(188, 188, 188, 0.5);
}
	#navbar .menu{
		margin: 0;
		padding: 0;
		list-style: none;
		display: inline-block;
		position: absolute;
		top: 25px;
		left: 50%;
		transform: translateX(-140%);
	}
		#navbar .menu.right{
			transform: translateX(10%);
		}
		#navbar .menu li{
			display: inline-block;
			margin: 0 50px;
			position: relative;
		}
			#navbar .menu li a{
				display: block;
				font-family: "TofinoPersonal-Semibold", sans-serif;
				font-size: 16px;
				color: #9f8f7f;
				text-decoration: none;
				outline: none;
			}
				#navbar .menu li a:hover{
					text-decoration: underline;
				}

			#navbar .menu .submenu ul{
				visibility: hidden;
				opacity: 0;
				position: absolute;
				top: 100%;
				left: -20px;
				background-color: #e9f2ef;
				padding: 30px 0 10px;
				margin: 0;
				width: 200px;
				transition: all .3s ease-in-out;
			}
				#navbar .menu .submenu ul li{
					display: block;
					padding: 10px 20px;
					margin: 0;
					text-align: left;
				}
					#navbar .menu .submenu ul li a{
						display: block;
						width: auto;
					}
			#navbar .menu .submenu:hover ul{
				opacity: 1;
				visibility: visible;
			}

	#navbar .menu .search{
		color: #9f8f7f;
		font-size: 16px;
		position: relative;
	}
		#navbar .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: 200px;
			background-color: transparent;
			outline: none;
		}
			#navbar .menu .search input[type=text]:focus{
				outline: none;
			}
		#navbar .menu .search i{
			position: absolute;
			z-index: 2;
			top: 6px;
			right: 5px;
		}

	#navbar .logo{
		position: absolute;
		top: 0;
		left: 50%;
		display: inline-block;
		text-decoration: none;
		outline: none;
		background: #e9f2ef center no-repeat;
		background-size: 102px auto;
		width: 134px;
		height: 134px;
		border-radius: 50%;
		transform: translateX(-50%);
		z-index: 10;
	}

#navbar-space{
	height: 10px;
	margin: 0;
	padding: 0;
}

#hero-banner{
	position: relative;
	display: block;
	width: 100%;
	height: 50vw;
	background: #525252 no-repeat center;
	background-size: cover;
}
	#hero-banner .item{
		display: block;
		position: relative;
		width: 100%;
		height: 50vw;
		background: #525252 no-repeat center;
		background-size: cover;
		overflow: hidden;
	}
		#hero-banner .item img{
			position: absolute;
			top: 50%;
			left: 0;
			width: 100%;
			height: auto;
			transform: translateY(-50%);
		}
	/*#hero-banner .slick-arrow{
		position: absolute;
		z-index: 10;
		top: 50%;
		left: 0;
	}*/
	#hero-banner .slick-dots{
		position: absolute;
		z-index: 10;
		bottom: 50px;
		left: 50%;
		list-style: none;
		margin: 0;
		padding: 0;
		transform: translateX(-50%);
	}
		#hero-banner .slick-dots li{
			position: relative;
			display: inline-block;
			margin: 0 5px;
			padding: 0;
		}
			#hero-banner .slick-dots li button{
				border: none;
				width: 25px;
				height: 25px;
				color: transparent;
				font-size: 0;
				border-radius: 0;
				background: transparent url(../images/slick-dot.png) no-repeat center;
				background-size: cover;
			}
			#hero-banner .slick-dots li.slick-active button{
				background-image: url(../images/slick-dot-a.png);
			}

#footer {
  	padding: 65px 0;
  	background: #2f2f2f;
  	text-align: center;
  	font-family: "TofinoPersonal-Bold", sans-serif;
	font-size: 14px;
	font-weight: bold;
	color: #fff;
}
		#footer .social a{
			font-family: "TofinoPersonal-Regular", sans-serif;
			font-size: 14px;
			text-decoration: none;
			outline: none;
			margin: 0 10px 0 0;
			color: #fff;
			display: inline-block;
			position: relative;
		}
			#footer .social a img{
				max-height: 27px;
				width: auto;
			}
			#footer .social a:last-child{
				margin: 0;
			}
			/*#footer .social a:first-child{
				border-right: 2px solid #fff;
				margin-right: 20px;
				padding: 10px 20px 10px 0;
			}
			#footer .social a:first-child:hover{
				text-decoration: underline;
			}*/

.section{
	background: transparent url(../images/bg-section.jpg) center repeat;
	background-size: cover;
	padding: 50px 0;
	position: relative;
	overflow: hidden;
}
	.section-white{
		background-color: #fff;
		background-image: none;
	}
	.section-name{
		font-family: "TofinoPersonal-Bold", sans-serif;
		font-size: 45px;
		color: #604520;
		display: inline-block;
		margin: 0;
	}
		.section-name-white{
			color: #fff;
			border-color: #fff;
		}
	.section-title{
		font-family: "TofinoPersonal-Ultra", sans-serif;
		font-size: 35px;
		color: #604520;
		margin: 0 0 10px;
		padding: 0;
	}
	.section-desc{
		font-family: "TofinoPersonal-Regular", sans-serif;
		font-size: 25px;
		color: #604520;
	}
		.section-desc a{
			text-decoration: none;
		}
			.section-desc a:hover{
				text-decoration: underline;
			}
		.section-desc-top{
			color: #fff;
			padding: 0;
			width: 650px;
		}
	.section-tag{
	  font-family: "TofinoPersonal-Semibold", sans-serif;
	  font-size: 30px;
	  font-weight: 600;
	  color: #4fb3aa;
	}

#section-generasi{
	padding: 0;
}
	#section-generasi .bg{
		background: transparent url(../images/bg-generasi.png) top center no-repeat;
		padding: 250px 0 150px;
	}
	#section-generasi .before,
	#section-generasi .after{
		content: "";
		display: block;
		position: absolute;
		background: transparent center no-repeat;
		background-size: cover;
	}
	#section-generasi .before{
		background-image: url(../images/topkopi-bijikopi-3.png);
		width: 592px;
		height: 339px;
		bottom: 0px;
		left: -600px;
		transition: all 1s ease-out;
	}
		#section-generasi .before.show{
			left: -350px;
		}
	#section-generasi .after{
		background-image: url(../images/topkopi-bijikopi-2.png);
		width: 506px;
		height: 371px;
		top: 0px;
		right: -600px;
		transition: all 1s ease-out;
		transition-delay: 1s;
	}
		#section-generasi .after.show{
			right: -300px;
		}

	#section-journey .before,
	#section-journey .after{
		content: "";
		display: block;
		position: absolute;
		background: transparent center no-repeat;
		background-size: cover;
	}
	#section-journey .before{
		background-image: url(../images/topkopi-cangkir.png);
		width: 436px;
		height: 435px;
		top: 25px;
		left: -500px;
		transition: all 1s ease-out;
	}
		#section-journey .before.show{
			left: -218px;
		}
	#section-journey .after{
		background-image: url(../images/topkopi-bijikopi.png);
		width: 791px;
		height: 856px;
		top: -220px;
		right: -1000px;
		transition: all 1s ease-out;
		transition-delay: .5s;
	}
		#section-journey .after.show{
			right: -550px;
		}

	#section-journey .wrap{
		width: 100%;
		padding: 230px 0;
		background: transparent url(../images/bg-journey.png) bottom center no-repeat;
	}

#section-inspirasi{
	font-family: "TofinoPersonal", sans-serif;
	font-size: 14px;
	color: #6a462c;
	background-color: #dfa96c;
	padding: 0;
}
	#section-inspirasi content{
		display: block;
		position: relative;
	}
	#section-inspirasi content:before,
	#section-inspirasi content:after,
	#section-inspirasi .sudut{
		content: "";
		display: block;
		position: absolute;
		top: 0;
		background: transparent url(../images/sudut-1.png) center no-repeat;
		background-size: cover;
		width: 71px;
		height: 99px;
	}
	#section-inspirasi content:after{
		background-image: url(../images/sudut-2.png);
		width: 105px;
		right: 0;
	}
	#section-inspirasi .sudut{
		background-image: url(../images/sudut-3.png);
		width: 202px;
		top: auto;
		right: 0;
		bottom: 0;
	}
	#section-inspirasi .container{
		padding: 50px 0;
	}
	#section-inspirasi header{
		display: block;
		position: relative;
		overflow: hidden;
	}
	#section-inspirasi header img{
		width: 100%;
		height: auto;
	}
	#section-inspirasi h5{
		font-family: "COCOGOOSELETTERPRESS", sans-serif;
		font-size: 25px;
		color: #6a462c;
		padding: 0;
		margin: 0 0 20px;
	}
	#section-inspirasi .desc{
		padding: 0 170px;
		line-height: 2;
	}

#section-contact{
	background-image: url(../images/bg-contact.jpg);
	background-position: center bottom;
	padding: 120px 0;
}

#section-culture{
	overflow: visible;
}
	#section-culture .before{
		content: "";
		display: block;
		position: absolute;
		background: transparent center no-repeat;
		background-size: cover;
	}
	#section-culture .before{
		background-image: url(../images/topkopi-karung.png);
		width: 542px;
		height: 468px;
		top: -200px;
		right: -600px;
		transition: all 1s ease-out;
	}
		#section-culture .before.show{
			right: -250px;
		}

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

.boxer{
	position: relative;
	background: #fff;
	border-radius: 12px;
	overflow: hidden;
}
	.boxer .poster{
		display: block;
		width: 100%;
		height: 250px;
		position: relative;
		overflow: hidden;
		background: #ccc;
		text-decoration: none;
		outline: none;
	}
		.boxer .poster img{
			width: 100%;
			height: auto;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%,-50%);
			transition: all .5s ease-in-out;
		}
			.boxer .poster:hover img{
				width: 120%;
			}
	.boxer content{
		display: block;
		padding: 20px;
		font-family: 'TofinoPersonal', sans-serif;
		font-size: 14px;
		color: #604520;
	}
	.boxer .title{
		display: block;
		text-decoration: none;
		outline: none;
		margin: 0 0 10px;
		padding: 0;
		color: #604520;
	}
		.boxer .title:hover{
			text-decoration: underline;
		}
	.boxer h4{
		font-family: 'TofinoPersonal-Ultra', sans-serif;
		font-size: 16px;
		color: #604520;
		margin: 0;
		padding: 0;
		line-height: 1.5;
	}

.boxer-2{
	box-shadow: 0px 4px 8px -3px rgba(0,0,0,.6);
}
	.boxer-2 h4 {
		font-family: 'TofinoPersonal', sans-serif;
		color: #333;
		font-weight: bold;
	}
	.boxer-2 content {
		color: #646867;
	}
	.boxer-2 .readmore{
		text-decoration: none;
		outline: none;
		margin: 0;
		padding: 0;
		font-family: 'TofinoPersonal', sans-serif;
		font-size: 14px;
		font-weight: 600;
		color: #9f8f7f;
	}
		.boxer-2 .readmore:hover{
			text-decoration: underline;
		}

.product-slider{
	position: relative;
	/*z-index: 2;*/
	padding-bottom: 100px;
	margin-top: 50px;
}
	.product-slider .item{
		display: block;
		width: 100%;
		position: relative;
	}
		.product-slider .item .poster{
			position: relative;
			text-align: center;
			margin: 0;
			width: 100%;
		}
			.product-slider .item .poster img{
				width: 100%;
				display: inline-block;
			}
		
	.product-slider .slick-arrow{
		position: absolute;
		bottom: -75px;
		left: 50%;
		background: transparent url(../images/prev.png) center no-repeat;
		border: none;
		background-size: cover;
		height: 30px;
		width: 38px;
		color: transparent;
		margin: 0;
	}
		.product-slider .slick-prev{
			transform: translateX(-68px);
		}
		.product-slider .slick-next{
			margin-left: 30px;
			transform: rotate(180deg);
		}

.headpage{
	position: relative;
	background: transparent center no-repeat;
	background-size: cover;
	padding: 66px 0 0;
	font-family: "TofinoPersonal-Regular", sans-serif;
	font-size: 14px;
	color: #9f8f7f;
}
	.headpage h3{
		font-family: "COCOGOOSELETTERPRESS", sans-serif;
		font-size: 25px;
		color: #9f8f7f;
		padding: 0;
		margin: 0 0 28px;
	}
	.headpage .keyword{
		font-size: 16px;
		margin: 10px 0 0;
	}
	.headpage nav{
		display: block;
		position: relative;
		text-align: center;
	}
		.headpage nav a{
			display: inline-block;
			font-family: "COCOGOOSELETTERPRESS", sans-serif;
			font-size: 16px;
			color: #aaa;
			background: #e6e6e6;
			padding: 20px 80px;
			border-top-right-radius: 10px;
			border-top-left-radius: 10px;
			text-align: center;
			text-decoration: none;
			outline: none;
			margin: 0 5px;
		}
			.headpage nav a.active{
				background-color: #fff;
				color: #9f8f7f;
			}

.headpage-2{
	/*background-image: url(../images/bg-headpage.jpg);*/
	padding: 66px 0 90px;
}

.posting{
	position: relative;
}
	.posting .title{
		font-family: 'TofinoPersonal-Bold', sans-serif;
		font-size: 24px;
		color: #333;
		margin: 70px 0 40px;
		padding: 0;
		width: 500px;
		display: inline-block;
		line-height: 1.67;
	}

	.posting .content{
		position: relative;
		width: 100%;
		text-align: left;
		font-family: 'TofinoPersonal', sans-serif;
		font-size: 12px;
		line-height: 1.67;
		color: #333;
		margin: 0 0 60px;
	}
		.posting .content .poster{
			position: relative;
			margin: 0 0 40px;
		}
			.posting .content .poster img{
				width: 100%;
				max-width: 100%;
				height: auto;
			}

		.posting .content .tmce{
			position: relative;
			margin: 0 0 30px;
		}
		
		.posting .content .sharing{
			position: relative;
			margin: 0 0 60px;
		}
			.posting .content .sharing h5{
				font-family: 'TofinoPersonal', sans-serif;
				font-size: 14px;
				font-weight: 600;
				color: #333;
				margin: 0 0 20px;
				padding: 0;
			}
			.posting .content .sharing .social{
				display: inline-block;
				text-decoration: none;
				outline: none;
				color: #9f8f7f;
				margin: 0 30px 0 0;
				font-size: 24px;
			}

		.posting .content .product{
			position: relative;
			margin: 0;
		}
			.posting .content .product h5{
				font-family: 'COCOGOOSELETTERPRESS', sans-serif;
				font-size: 18px;
				color: #9f8f7f;
				margin: 0 0 40px;
				padding: 0;
			}
			.posting .content .product .item{
				display: inline-block;
				text-decoration: none;
				outline: none;
				margin: 0 20px 0 0;
				position: relative;
				width: 140px;
				text-align: center;
				vertical-align: top;
			}
				.posting .content .product .item img{
					max-width: 100%;
					width: 100%;
					margin: 0 0 20px;
				}
				.posting .content .product .item h6{
					font-family: 'TofinoPersonal', sans-serif;
					font-size: 16px;
					font-weight: bold;
					color: #735e48;
					margin: 0;
					padding: 0;
				}

.related-article{
	position: relative;
	background: #fff;
	text-align: left;
}
	.related-article ul,
	.related-article ul li{
		position: relative;
		list-style-type: none;
		display: block;
		margin: 0;
		padding: 0;
		box-sizing: border-box;
	}
	.related-article ul li{
		padding: 20px;
		border-bottom: 1px solid #979797;
	}
		.related-article ul li:last-child{
			border-bottom: none;
		}
	.related-article ul li .poster{
		display: inline-block;
		width: 35%;
		vertical-align: top;
		position: relative;
		overflow: hidden;
	}
		.related-article ul li .poster img{
			max-width: 100%;
			width: 100%;
			height: auto;
		}
	.related-article ul li a{
		display: inline-block;
		width: 60%;
		text-decoration: none;
		outline: none;
		box-sizing: border-box;
		margin: 0;
		padding: 0 0 0 10px;
		vertical-align: top;
		font-family: "TofinoPersonal", sans-serif;
		font-size: 12px;
		font-weight: bold;
		color: #3e3434;
	}
		.related-article ul li a h5{
			margin: 0;
			padding: 0;
			font-family: "TofinoPersonal", sans-serif;
			font-size: 12px;
			font-weight: bold;
			color: #3e3434;
		}
		.related-article ul li a:hover{
			text-decoration: underline;
		}

.box-contact{
	position: relative;
}
	.box-contact header{
		display: block;
		position: relative;
		text-align: center;
	}
		.box-contact header a{
			display: inline-block;
			text-decoration: none;
			outline: none;
			font-family: 'COCOGOOSELETTERPRESS', sans-serif;
			font-size: 14px;
			color: #aaa;
			background: #e6e6e6;
			padding: 20px;
			border-top-right-radius: 10px;
			border-top-left-radius: 10px;
			margin: 0 15px;
		}
		.box-contact header a.active,
		.box-contact header a:hover{
			background: #fff;
			color: #9f8f7f;
		}
	.box-contact content{
		display: block;
		position: relative;
		background: #fff;
		border-radius: 20px;
		padding: 40px 55px;
		margin: 0;
		box-sizing: border-box;
	}
		.box-contact content section{
			display: block;
			position: relative;
			margin: 0 0 45px;
			box-sizing: border-box;
		}
		.box-contact content address{
			font-family: 'TofinoPersonal', sans-serif;
			font-size: 14px;
			color: #3e3434;
		}
		.box-contact content .form-group{
			margin: 0 0 20px;
		}
		.box-contact content .form-control{
			border-color: #979797;
			border-width: 2px;
			font-family: 'TofinoPersonal', sans-serif;
			font-size: 14px;
			color: #3e3434;
		}
		.box-contact content .form-label{
			font-family: 'TofinoPersonal', sans-serif;
			font-size: 14px;
			color: #3e3434;
		}
		.box-contact content textarea{
			resize: none;
			height: 150px;
		}
		.box-contact content .ffile{
			width: 30%;
		}

#popup-buy .modal-content{
	background: #dfa96c;
	text-align: center;
	position: relative;
}
	#popup-buy .modal-body{
		padding: 50px;
	}
	#popup-buy .modal-content h5{
		font-family: 'COCOGOOSELETTERPRESS', sans-serif;
		font-size: 36px;
		color: #3e3434;
		margin: 0 0 94px;
		padding: 0;
	}
	#popup-buy .modal-content .link{
		display: inline-block;
		text-decoration: none;
		outline: none;
		background: #fff;
		text-align: center;
		padding: 20px 100px;
		border-radius: 20px;
		position: relative;
	}
		#popup-buy .modal-content .link img{
			max-width: 100%;
			width: 100%;
			height: auto;
		}
	#popup-buy .modal-content .btn-close{
		position: absolute;
		top: 15px;
		right: 15px;
	}

.pagination{
	border-radius: 8px;
  	box-shadow: 0 0 10px 0 rgba(215, 215, 215, 0.5);
  	background-color: #fff;
  	display: inline-block;
  	position: relative;
  	font-family: 'TofinoPersonal', sans-serif;
  	font-size: 18px;
  	font-weight: 500;
  	color: #d2ceca;
}
	.pagination a,
	.pagination strong{
		font-family: 'TofinoPersonal', sans-serif;
  		font-size: 18px;
  		font-weight: 500;
  		color: #d2ceca;
  		display: inline-block;
  		width: 50px;
  		padding: 15px 0;
  		text-align: center;
  		margin: 0;
  		text-decoration: none;
  		outline: none;
	}
	.pagination strong,
	.pagination a:hover{
		color: #9f8f7f;
		background: #e9f2ef;
	}

@media (min-width:992px) and  (max-width:1600px){

	#section-journey .before {
		width: 300px;
		height: 300px;
		left: -400px;
	}
		#section-journey .before.show {
			left: -150px;
		}

	#section-journey .after {
		width: 500px;
		height: 541px;
		top: 0;
		right: -600px;
	}
		#section-journey .after.show {
			right: -300px;
		}

	#section-culture .before {
		width: 400px;
		height: 346px;
		top: -250px;
		right: -500px;
	}
		#section-culture .before.show {
			right: -200px;
		}

	.section-desc-small{
		padding-right: 150px;
		padding-left: 150px;
	}

	#section-generasi .section-desc{
		padding-right: 100px;
		padding-left: 100px;
	}

}

@media (min-width:992px) and (max-width:1200px){

	#navbar .menu {
		transform: translateX(-130%);
	}
	
	#navbar .menu.right li {
		margin: 0 15px;
	}
	#navbar .menu.right {
		transform: translateX(15%);
	}

	#footer .social a:first-child{
		margin-right: 10px;
		padding-right: 10px;
	}

	.box-contact header a {
		margin: 0 5px;
	}

	#section-generasi .section-desc{
		padding-right: 100px;
		padding-left: 100px;
	}
}