@keyframes float {
	0% {
		transform: translatey(0px);
	}
	50% {
		transform: translatey(-20px);
	}
	100% {
		transform: translatey(0px);
	}
}
.perahu {
	transform: translatey(0px);
	animation: float 2.751s ease-in-out infinite;
}
.perahu2 {
	transform: translatey(0px);
	animation: float 1.214s linear infinite;
}


@-webkit-keyframes swing {
	20% {
		-webkit-transform: rotate(15deg);
		transform: rotate(15deg)
	}
	40% {
		-webkit-transform: rotate(-10deg);
		transform: rotate(-10deg)
	}
	60% {
		-webkit-transform: rotate(5deg);
		transform: rotate(5deg)
	}
	80% {
		-webkit-transform: rotate(-5deg);
		transform: rotate(-5deg)
	}
	to {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg)
	}
}


.animated.infinite {
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}

.animated {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}
@-webkit-keyframes swing {
	20% {
		-webkit-transform: rotate(15deg);
		transform: rotate(15deg)
	}
	40% {
		-webkit-transform: rotate(-10deg);
		transform: rotate(-10deg)
	}
	60% {
		-webkit-transform: rotate(5deg);
		transform: rotate(5deg)
	}
	80% {
		-webkit-transform: rotate(-5deg);
		transform: rotate(-5deg)
	}
	to {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg)
	}
}
@keyframes swing {
	20% {
		-webkit-transform: rotate(15deg);
		transform: rotate(15deg)
	}
	40% {
		-webkit-transform: rotate(-10deg);
		transform: rotate(-10deg)
	}
	60% {
		-webkit-transform: rotate(5deg);
		transform: rotate(5deg)
	}
	80% {
		-webkit-transform: rotate(-5deg);
		transform: rotate(-5deg)
	}
	to {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg)
	}
}
.swing {
	-webkit-transform-origin: top center;
	transform-origin: top center;
	-webkit-animation-name: swing;
	animation-name: swing
}

.ngezoom {
	transform: translatey(0px);
	animation: zoominoutsinglefeatured 3s infinite;    
}
@keyframes zoominoutsinglefeatured {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1,1.1);
    }
    100% {
        transform: scale(1);
    }
}

.reveal{
  position: relative;
  transform: translateY(150px);
  opacity: 0;
  transition: 1s all ease;
}

.reveal.active{
  transform: translateY(0);
  opacity: 1;
}



.agama {
	background: url('../img/agama.png') no-repeat;
	width: 39px;
	height: 31px;
	background-size: 240px 180px;
	
}
.islam {
	background-position:-104px -135px;
}
.kristen {
	background-position:-53px -5px;
}
.katolik {
	background-position:-53px -5px;
}
.hindu {
	background-position:-148px -136px;
}
.buddha {
	background-position:-196px -130px;
}
.khonghucu {
	background-position:-198px -10px;
}