.overlay-container {
	    width: 100%;
	    height: 100%;
	    position: fixed;
	    background: rgba(0,0,0, .6);
	    top: 0;
	    left: 0;
	    z-index: 1000;
	}
	.overlay-container-bg{
	    width: 100%;
	    height: 100%;
	    position: fixed;
	    background: rgb(0,0,0);
	    top: 0;
	    left: 0;
	    z-index: 800;
	}	
	.btn-close {
		width: 44px;
		height: 44px;
		display: block;
		position: absolute; 
		top: 15px;
		right: 15px;
		z-index: 999;
	}
	.overlay-panel {
		width: 767px;
		margin: 15% auto 0;
		position: relative;
		z-index: 99;
	}
	.bubble-animated{
		position: absolute;
		z-index: 1;
		width: 100%;
	}
	.lt-pink-be {
		width: 120px;
		height: 120px;
		background: url(../../img/funpass/attractions/TigerSkyTower.png) 0 0 no-repeat;
		background-size: 100%;
		opacity: 0.9;
		position: absolute;
		top: 168px;
		left: -160px;
		z-index: 10;
		-webkit-animation: lt-pink 5s ease-in-out 3s infinite;
		animation: lt-pink 5s ease-in-out 3s infinite;
	}
	.lt-blue-be {
		width: 140px;
		height: 140px;
		background: url(../../img/funpass/attractions/Merlion.png) 0 0 no-repeat;
		background-size: 100%;
		opacity: 0.9;
		position: absolute;
		top: 260px;
		left: -110px;
		z-index: 20;
		-webkit-animation: lt-pink 4s ease-in-out 3s infinite;
		animation: lt-pink 4s ease-in-out 3s infinite;
	}
	
	.lt-purple-be {
		width: 44px;
		height: 44px;
		background: url(../../img/funpass/attractions/SEA.png) 0 0 no-repeat;
		background-size: 100%;
		opacity: 0.8;
		position: absolute;
		top: 85px;
		left: -40px;
		z-index: 20;
		-webkit-animation: lt-pink 8s ease-in-out 3s infinite;
		animation: lt-pink 8s ease-in-out 3s infinite;
	}
	.rt-blue-be {
		width: 55px;
		height: 55px;
		background: url(../../img/funpass/attractions/ImagesSingapore.png) 0 0 no-repeat;
		background-size: 100%;
		opacity: 0.9;
		position: absolute;
		top: 0;
		left: -110px;
		z-index: 20;
		-webkit-animation: lt-pink 7s ease-in-out 5s infinite;	
		animation: lt-pink 7s ease-in-out 5s infinite;
	}
	.rt-yellow-be {
		width: 118px;
		height: 118px;
		background: url(../../img/funpass/attractions/Combot.png) no-repeat;
		background-size: 100%;
		opacity: 0.9;
		position: absolute;
		top: 0;
		right: -90px;
		z-index: 20;
		-webkit-animation: lt-pink 5s ease-in-out 3s infinite;
		animation: lt-pink 5s ease-in-out 3s infinite;
	}
	.rt-red-be {
		width: 26px;
		height: 26px;
		background: url(../../img/funpass/attractions/GoGreenBike.png) 0 0 no-repeat;
		background-size: 100%;
		opacity: 0.9;
		position: absolute;
		top: 140px;
		right: -140px;
		z-index: 20;
		-webkit-animation: lt-pink 5s ease-in-out 1s infinite; 	
		animation: lt-pink 5s ease-in-out 1s infinite;
	}
	.rt-pink-be {
		width: 90px;
		height: 90px;
		background: url(../../img/funpass/attractions/Luge.png) 0 0 no-repeat;
		background-size: 100%;
		opacity: 0.9;
		position: absolute;
		top: 170px;
		right: -100px;
		z-index: 20;
		-webkit-animation: lt-pink 5s ease-in-out 2.5s infinite; 	
		animation: lt-pink 5s ease-in-out 2.5s infinite;
	}
	.rt-purple-be {
		width: 135px;
		height: 135px;
		background: url(../../img/funpass/attractions/Wingsoftime.png) 0 0 no-repeat;
		background-size: 100%;
		opacity: 0.9;
		position: absolute;
		top: 255px;
		right: -210px;
		z-index: 20;
		-webkit-animation: lt-pink 3s ease-in-out 3s infinite;
		animation: lt-pink 3s ease-in-out 3s infinite;
	}
	.rt-green-be {
		width: 50px;
		height: 50px;
		background: url(../../img/funpass/attractions/Sentosa4D.png) 0 0 no-repeat;
		background-size: 100%;
		opacity: 0.9;
		position: absolute;
		bottom: -20px;
		right: -20px;
		z-index: 20;
		-webkit-animation: lt-pink 4s ease-in-out 4s infinite;
		animation: lt-pink 4s ease-in-out 4s infinite;
	}
	.rudder-container {
		width: 373px;
		height: 373px;
		position: relative;
		text-align: center;
		margin: 0 auto;
	}
	.rudder-container .fun-finder {
		width: 324px;
		height: 95px;
		margin: 37.2% auto 0;
		z-index: 99;
		display: block;
		position: absolute;
		left: 6.5%;
	}
	.rudder {
		width: 373px;
		height: 373px;
		background: url(../../img/funpass/rudder.png) 0 0 no-repeat;
		display: inline-block;
		position: absolute;
		top: 0;
		right: 0;
		color: white;
		animation: roll 4s infinite;/*animation-name roll*/
		-webkit-animation-iteration-count: 2;
    	animation-iteration-count: 2;
		opacity: .9;
		z-index: 30;
	}
	/*@-webkit-keyframes lt-pink{
		0% { opacity: 0.9; transform: scale(1);}
		38% {opacity: 0.9; transform: scale(1.2);}
		40% {transform: scale(1.8); opacity: 0}
		70% { opacity: 0; transform: scale(0); }
		100% { opacity: 0.9; transform: scale(1); }
	}*/
	@-webkit-keyframes lt-pink{
		0% { opacity: 0.9; transform: scale(1);}
		48% {opacity: 0.9; transform: scale(1.2);}
		50% {opacity: 0;   transform: scale(1.8); }
		80% { opacity: 0; transform: scale(0); }
		100% { opacity: 0.9; transform: scale(1); }
	}
	@keyframes lt-pink{
		0% { opacity: 0.9; transform: scale(1);}
		48% {opacity: 0.9; transform: scale(1.2);}
		50% {opacity: 0;   transform: scale(1.8); }
		80% { opacity: 0; transform: scale(0); }
		100% { opacity: 0.9; transform: scale(1); }
	}
	/*animation-name roll*/
	@keyframes roll {
	  0% {
		transform: rotate(0);
	  }
	  50% {
		transform: rotate(180deg);
	  }
	  100% {
		transform: rotate(0);
	  }
	}
	/*animation-name roll-1 */
	@keyframes roll-1 {
		0% {
		transform: rotate(0);
	  }
	  	100% {
		transform: rotate(360deg);
	  }
	}
	@media screen and (max-width: 767px) {
		.overlay-panel {
			width: 100%!important;
			height: auto!important;
			margin: 20% auto 0;
			position: relative;
		}
		.lt-pink-be {
			width: 80px;
			height: 80px;
			left: -80px;
		}
		.lt-blue-be {
			width: 120px;
			height: 120px;
			left: -60px;
		}
		.lt-purple-be {
			left: -30px;
		}
		.rt-blue-be {
			left: -70px;
		}
		.rt-yellow-be {
			width: 98px;
			height: 98px;
			right: -70px;
		}
		.rt-pink-be {
			width: 70px;
			height: 70px;
			right: -80px;
		}
		.rt-red-be {
			top: 120px;
			right: -40px;
		}
		.rt-purple-be {
			width: 115px;
			height: 115px;
			right: -100px;
		}
		.rt-green-be {
			bottom: -40px;
			right: 25px;
		}
	}

	@media screen and (max-width: 479px) {
		.rudder-container {
			width: 220px;
			height: 220px;
			margin: 0 auto;
		}
		.rudder {
			width: 220px;
			height: 220px;
			background-size: 100%;
			left: 0;
		}
		.rudder-container .fun-finder {
			width: 190px;
			height: auto;
			margin-top: 82px;
			left: 15px;
		}
		.fun-finder img {
			width: 190px;
		}
		.lt-pink-be {
			top: 135px;
			left: -60px;
			width: 80px;
			height: 80px;
		}
		.lt-blue-be {
			top: 178px; 
			left: -25px;
			width: 100px;
			height: 100px;
		}
		.lt-purple-be {
			top: 50px;
			left: -30px;
			width: 35px;
			height: 35px;
		}
		.rt-blue-be {
			top: -20px; 
			left: -45px;
			width: 45px;
			height: 45px;
		}
		.rt-yellow-be {
			right: -40px;
			top: -30px;
			width: 80px;
			height: 80px;
		}
		.rt-red-be {
			top: 65px;
			right: -50px;
		}
		.rt-pink-be {
			top: 105px;
			right: -50px;
			width: 60px;
			height: 60px;
		}
		.rt-purple-be {
			right: -60px;
			top: 180px;
			width: 90px;
			height: 90px
		}
		.rt-green-be {
			right: 30px;
			top: 240px;
			width: 30px;
			height: 30px;
		}
	}
	@media screen and (max-width: 767px) and (orientation: landscape) {
		.overlay-panel {
			margin: 8% auto 0;
		}
		.overlay-shortcut-close {
		 left: 0!important;
		 top: 0!important;
		 width: 20px!important;
		 height: 20px!important;
		}	
		.rudder-container {
			width: 220px;
			height: 220px;
			margin: 0 auto;
		}
		.rudder {
			width: 220px;
			height: 220px;
			background-size: 100%;
			left: 0;
		}
		.rudder-container .fun-finder {
			width: 190px;
			height: auto;
			margin-top: 82px;
			left: 15px;
		}
		.fun-finder img {
			width: 190px;
		}
		.lt-pink-be {
			top: 135px;
			left: -60px;
			width: 80px;
			height: 80px;
		}
		.lt-blue-be {
			top: 178px; 
			left: -25px;
			width: 100px;
			height: 100px;
		}
		.lt-purple-be {
			top: 50px;
			left: -30px;
			width: 35px;
			height: 35px;
		}
		.rt-blue-be {
			top: -20px; 
			left: -45px;
			width: 45px;
			height: 45px;
		}
		.rt-yellow-be {
			right: -40px;
			top: -30px;
			width: 80px;
			height: 80px;
		}
		.rt-red-be {
			top: 65px;
			right: -50px;
		}
		.rt-pink-be {
			top: 105px;
			right: -50px;
			width: 60px;
			height: 60px;
		}
		.rt-purple-be {
			right: -60px;
			top: 180px;
			width: 90px;
			height: 90px
		}
		.rt-green-be {
			right: 30px;
			top: 240px;
			width: 30px;
			height: 30px;
		}		
	}	
	
/*shortcut*/
.overlay-shortcut {
	position: fixed;
	bottom: 5px;
	right: 5px;
	z-index: 999;
	width: 140px;
	height: 140px;
	background: rgba(0,0,0,.6);
}
.overlay-shortcut a {
	width: 100%;
	height: 100%;
	padding: 10px;
	display: block;
	box-sizing: border-box;
}
.overlay-shortcut a img {
	width: 100%;
	height: 100%;
}
.overlay-shortcut-close {
    line-height: 12px;
    width: 18px;
    font-size: 20pt;
    font-family: tahoma;
    margin-top: 1px;
    margin-right: 2px;
    position: absolute;
    top: 4px;
    left: 75%;
    color: white;
}