@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');
}

.no-scroll{
	overflow:hidden;
}

.hide-desktop{
	display: none;
}

/*.container{
	display: block;
	position: relative;
	width: 1180px;
	margin: 0 auto;
	box-sizing: border-box;
}
	.container:after{
		content:"";
		display: block;
		clear: both;
		height: 0;
	}*/

#preloader{
	position: fixed;
	width: 100%;
	height: 100%;
	z-index: 100;
	background: #532c24;
	color: #fff;
	text-align: center;
}
	#preloader content{
		display: inline-block;
		position: relative;
		top: 50%;
		transform: translateY(-50%);
	}
		#preloader content img{
			margin: 0 0 50px;
		}

#header{
	display: block;
	position: absolute;
	left: 0;
	width: 100%;
	z-index: 2;
	background: #e9f2ef;
	box-shadow: 0 2px 6px 0 rgba(188, 188, 188, 0.5);
	text-align: center;
	height: 80px;
}
	#header .logo{
		display: inline-block;
		background: #e9f2ef url(../images/logo.png) center no-repeat;
		background-size: 102px 89px;
		width: 130px;
		height: 130px;
		position: absolute;
		left: 50%;
		top: 0;
		transform: translateX(-50%);
		border-radius: 50%;
	}
	#header .nav{
		display: inline-block;
		position: absolute;
		list-style: none;
		margin: 0;
		padding: 0;
		left: 50%;
		top: 30px;
		transform: translateX(-160%);
	}
		#header .nav.right{
			transform: translateX(60%);
		}
		#header .nav li{
			display: inline-block;
			margin: 0 100px 0 0;
		}
			#header .nav li:last-child {
				margin-right: 0;
			}
		#header .nav li a{
			display: block;
			text-decoration: none;
			outline: none;
			color: #9f8f7f;
			font-family: "TofinoPersonal-Semibold", sans-serif;
			font-size: 16px;
			font-weight: 600;
		}

.section{
	position: relative;
	width: 100%;
	height: 100vh;
	background-image: none;
}

.animasi{
	background: transparent center no-repeat;
	background-size: cover;
	position: absolute;

	transition: all 1s ease;
}

.rellax-container{
	position: relative;
	width: 100%;
	height: 100%;
	position: absolute;
}

#section-1{
	background: transparent url(../images/topkopi-1.png) center no-repeat;
	background-size: cover;
	background-attachment: fixed;
}

	#section-1 .karung{
		background-image: url(../images/topkopi-karung.png);
		width: 542px;
		height: 468px;
		opacity: 0;

		top: 50%;
		left: 50%;
		transform: translate(-130%, -40%);
	}
		#section-1 .karung.show{
			opacity: 1;
			transform: translate(-80%, -40%);
		}


	#section-1 .buah{
		background-image: url(../images/topkopi-buah.png);
		width: 224px;
		height: 182px;
		opacity: 0;

		top: 50%;
		left: 50%;
		transform: translate(-188%, -88%);

		transition-delay: .5s;
	}
		#section-1 .buah.show{
			opacity: 1;
			transform: translate(-238%, -138%);
		}

	#section-1 .buah2{
		background-image: url(../images/topkopi-buah2.png);
		width: 177px;
		height: 134px;
		opacity: 0;

		top: 50%;
		left: 50%;
		transform: translate(-254%, 33%);

		transition-delay: .8s;
	}
		#section-1 .buah2.show{
			opacity: 1;
			transform: translate(-304%, 88%);
		}

	#section-1 .kopi{
		background-image: url(../images/topkopi-kopi.png);
		width: 430px;
		height: 147px;
		opacity: 0;

		top: 50%;
		left: 50%;
		transform: translate(130px, 5%);

		transition-delay: 1s;
	}
		#section-1 .kopi.show{
			opacity: 1;
			transform: translate(130px, -45%);
		}

	#section-1 .berlimpah{
		background-image: url(../images/topkopi-berlimpah.png);
		width: 406px;
		height: 71px;
		opacity: 0;

		top: 50%;
		left: 50%;
		transform: translate(130px, 200%);

		transition-delay: 1.3s;
	}
		#section-1 .berlimpah.show{
			opacity: 1;
			transform: translate(130px, 150%);
		}

#section-2,
#section-3{
	background-color: #532c24;
}
	#section-2 .biji{
		background-image: url(../images/topkopi-biji.png);
		width: 639px;
		height: 399px;
		opacity: 0;

		top: 50%;
		left: 50%;
		transform: translateY(-60%) scale(.5);
	}
		#section-2 .biji.show{
			opacity: 1;
			transform: translateY(-60%) scale(1);
		}

	#section-2 .topkopi{
		background-image: url(../images/topkopi-top.png);
		width: 455px;
		height: 111px;
		opacity: 0;

		top: 50%;
		left: 50%;
		transform: translate(-495px,-130%);
	}
		#section-2 .topkopi.show{
			opacity: 1;
			transform: translate(-495px,-180%);
		}

	#section-2 .semangat{
		background-image: url(../images/topkopi-semangat.png);
		width: 498px;
		height: 146px;
		opacity: 0;

		top: 50%;
		left: 50%;
		transform: translate(-540px,10%);
	}
		#section-2 .semangat.show{
			opacity: 1;
			transform: translate(-540px,-40%);
		}

	#section-3 .roast{
		background-image: url(../images/topkopi-roast.png);
		width: 709px;
		height: 500px;
		opacity: 0;

		top: 50%;
		left: -200px;
		transform: translateY(-50%);
	}
		#section-3 .roast.show{
			opacity: 1;
			transform: translateY(-50%);
			left: 0;
		}

	#section-3 .proses{
		background-image: url(../images/topkopi-proses.png);
		width: 511px;
		height: 173px;
		opacity: 0;

		top: 50%;
		left: 50%;
		transform: translate(100px,0%);
	}
		#section-3 .proses.show{
			opacity: 1;
			transform: translate(100px,-100%);
		}

	#section-3 .pengolahan{
		background-image: url(../images/topkopi-pengolahan.png);
		width: 530px;
		height: 152px;
		opacity: 0;

		top: 50%;
		left: 50%;
		transform: translate(100px, 125%);
	}
		#section-3 .pengolahan.show{
			opacity: 1;
			transform: translate(100px, 25%);
		}

#section-4{
	background: transparent url(../images/topkopi-2.png) center no-repeat;
	background-size: cover;
}
	#section-4 .topkopi-white-coffe{
		background-image: url(../images/topkopi-white-coffe.png);
		width: 170px;
		height: 218px;
		opacity: 0;

		bottom: 12%;
		left: 50%;
		transform: translateX(-470px);

		transition-delay: .6s;
	}
		#section-4 .topkopi-white-coffe.show{
			opacity: 1;
			transform: translateX(-570px);		
		}

	#section-4 .topkopi-cappuccino{
		background-image: url(../images/topkopi-cappuccino.png);
		width: 154px;
		height: 218px;
		opacity: 0;

		bottom: 12%;
		left: 50%;
		transform: translateX(-270px);

		transition-delay: .3s;
	}
		#section-4 .topkopi-cappuccino.show{
			opacity: 1;
			transform: translateX(-370px);
		}

	#section-4 .topkopi-gula-aren{
		background-image: url(../images/topkopi-gula-aren.png);
		width: 171px;
		height: 218px;
		opacity: 0;

		bottom: 12%;
		left: 50%;
		transform: translateX(-110%);
	}
		#section-4 .topkopi-gula-aren.show{
			opacity: 1;
		}

	#section-4 .topkopi-barista{
		background-image: url(../images/topkopi-barista.png);
		width: 171px;
		height: 218px;
		opacity: 0;

		bottom: 12%;
		left: 50%;
		transform: translateX(10%);
	}
		#section-4 .topkopi-barista.show{
			opacity: 1;
		}

	#section-4 .topkopi-toraja{
		background-image: url(../images/topkopi-toraja.png);
		width: 174px;
		height: 218px;
		opacity: 0;

		bottom: 12%;
		left: 50%;
		transform: translateX(110px);

		transition-delay: .3s;
	}
		#section-4 .topkopi-toraja.show{
			opacity: 1;
			transform: translateX(210px);
		}

	#section-4 .topkopi-susu{
		background-image: url(../images/topkopi-susu.png);
		width: 185px;
		height: 218px;
		opacity: 0;

		bottom: 12%;
		left: 50%;
		transform: translateX(310px);

		transition-delay: .6s;
	}
		#section-4 .topkopi-susu.show{
			opacity: 1;
			transform: translateX(410px);
		}

	#section-4 .karakter{
		background-image: url(../images/topkopi-karakter.png);
		width: 936px;
		height: 86px;
		opacity: 0;

		top: 50%;
		left: 50%;
		transform: translate(-50%, -150%);
	}
		#section-4 .karakter.show{
			opacity: 1;
			transform: translate(-50%, -250%);
		}

	#section-4 .khas{
		background-image: url(../images/topkopi-khas.png);
		width: 732px;
		height: 106px;
		opacity: 0;

		top: 50%;
		left: 50%;
		transform: translate(-50%, 0%);
	}
		#section-4 .khas.show{
			opacity: 1;
			transform: translate(-50%, -100%);
		}

/*#footer{
	display: block;
	position: relative;
	background: #2f2f2f;
	color: #fff;
	text-align: center;
	padding: 50px 0;
	font-family: "TofinoPersonal-Bold", sans-serif;
	font-size: 14px;
	font-weight: bold;
}
	#footer .wingsfood{
		display: inline-block;
		text-decoration: none;
		outline: none;
		position: absolute;
		left: 0;
	}
	#footer .social{
		display: inline-block;
		position: absolute;
		right: 0;
	}
		#footer .social a{
			text-decoration: none;
			outline: none;
			margin: 0 10px 0 0;
		}
			#footer .social a:last-child{
				margin: 0;
			}
	#footer .center{
		display: inline-block;
		vertical-align: middle;
		margin: 10px 0 0;
	}*/