@charset "UTF-8";

body{

}


/****************************************************************************************************
 header
****************************************************************************************************/
.top-header {
	height: auto;
}

.top-header-h1 {
	display: none;
}


/****************************************************************************************************
 main
****************************************************************************************************/
.top-main {
	padding: 10vw;
	display: flex;
	position: relative;
	align-items: center;
	width: 100%;
	height: 100vh;
	z-index: 100;
}

@keyframes zoomIn {
	0% {
		transform: scale(0.3);
	}

	60% {
		transform: scale(1);
	}

	62% {
		transform: scale(0.9);
	}

	70% {
		transform: scale(0.8);
	}

	78% {
		transform: scale(0.9);
	}

	80% {
		transform: scale(1);
	}

	82% {
		transform: scale(0.95);
	}

	87% {
		transform: scale(0.85);
	}

	91% {
		transform: scale(0.95);
	}

	92% {
		transform: scale(1);
	}

	93% {
		transform: scale(0.98);
	}

	96% {
		transform: scale(0.9);
	}

	99% {
		transform: scale(0.98);
	}

	100% {
		transform: scale(1);
		opacity: 1;
	}
}

.zoomIn {
	animation-delay: 0.8s;
	animation-duration: 2s;
	animation-fill-mode: both;
	animation-name: zoomIn;
	animation-timing-function: ease-in;
}


@media (width > 600px) {
	.top-main {
		padding: 50px;
	}
}

.nangka-svg {
	margin: 0 auto;
	display: block;
	width:100%;
	max-width: 750px;
	max-height: 100%;
}

/*.nangka-svg{
	max-height:750px;
}*/

@media screen\0 {
	.nangka-svg{
		height:750px;
	}
}


/****************************************************************************************************
 btn
****************************************************************************************************/
.btn-buah {
	display: block;
	fill: url(#grd1);
	stroke:#000000;
	stroke-width:0;
	cursor: pointer;
}

/*.btn-buah:hover {
	fill: url(#grd2);
}*/

.buah {
	cursor: pointer;
	fill: url(#grd2);
	opacity: 0;
	transition: all ease-in-out .2s;
}

.btn-buah:hover .buah {
	opacity: 1;
}

.btn-buah .moji{
	cursor: pointer;
	fill:#000000;
	stroke:#000000;
	stroke-width:1;
}


/****************************************************************************************************
 daun
****************************************************************************************************/
#daun1{
	background:url(../images/daun_nangka1.png) 0 100% no-repeat;
	width:100%;
	height:100%;
	position:absolute;
	top:0;
	right:0;
	z-index:5;
	animation-delay: 0s;
	animation-duration: 2s;
	animation-fill-mode: both;
	animation-name: moveOut1;
	animation-timing-function: ease;
}

@keyframes moveOut1 {
	0% {
		top:0;
		right:0;
	}

	100% {
		top:-100%;
		right:-100%;
	}
}


#daun2{
	background:url(../images/daun_nangka2.png) 100% 0 no-repeat;
	width:100%;
	height:100%;
	position:absolute;
	bottom:0;
	left:0;
	z-index:4;
	animation-delay: 0.5s;
	animation-duration: 2s;
	animation-fill-mode: both;
	animation-name: moveOut2;
	animation-timing-function: ease;
}

@keyframes moveOut2 {
	0% {
		bottom:0;
		left:0;
	}

	100% {
		bottom:-100%;
		left:-100%;
	}
}


#daun3{
	background:url(../images/daun_nangka3.png) 0 0 no-repeat;
	width:100%;
	height:100%;
	position:absolute;
	bottom:0;
	right:0;
	z-index:3;
	animation-delay: 1s;
	animation-duration: 2s;
	animation-fill-mode: both;
	animation-name: moveOut3;
	animation-timing-function: ease;
}

@keyframes moveOut3 {
	0% {
		bottom:0;
		right:0;
	}

	100% {
		bottom:-100%;
		right:-100%;
	}
}


#daun4{
	background:url(../images/daun_nangka4.png) 100% 100% no-repeat;
	width:100%;
	height:100%;
	position:absolute;
	top:0;
	left:0;
	z-index:2;
	animation-delay: 1.2s;
	animation-duration: 2s;
	animation-fill-mode: both;
	animation-name: moveOut4;
	animation-timing-function: ease;
}

@keyframes moveOut4 {
	0% {
		top:0;
		left:0;
	}

	100% {
		top:-100%;
		left:-100%;
	}
}