.landingpage{
	width:100%;
	height:100%;
	overflow:hidden;
	background:#8A0304
}
.landingpage.banner a{
	display:block;
	height:100%;
	background-position:center;
	background-repeat:no-repeat;
	background-size:cover
}
#carouselLandingpage{
	background:#ea2828
}
#carouselLandingpage .carousel-indicators li{
	height:10px;
	width:10px;
	border:solid 1px #fff;
	border-radius:50%;
	opacity:1
}
#carouselLandingpage .carousel-indicators li.active{
	background:transparent
}
#carouselUpcoming .carousel-indicators li{
	height:10px;
	width:10px;
	border:solid 1px #fff;
	border-radius:50%;
	opacity:1
}
#carouselUpcoming .carousel-indicators li.active{
	background:transparent
}
#carouselUpcoming .carousel-item > div{
}
#carouselUpcoming .carousel-item a{
	display:block;
	background-position:center;
	background-repeat:no-repeat;
	background-size:cover
}

#activity_detail{
	background:#fff;
	padding:30px;
	color:#ED1C24;
	text-align:center
}
#activity_detail img{
	width:100%
}
#activity_detail .txt{
	text-align:left;
	margin-top:15px
}
#activity_detail h3{
	font-family: 'CGB';
}
#activity_detail h5{
	font-family: 'CGB';
	margin-bottom:10px
}
#activity_detail p{
	margin-top:5px
}
.landingpage .wrapper{
	position:relative
}
.landingpage .wrapper img{
	position:absolute;
	top:0;
	left:0;
	width:100%
}
.landingpage .wrapper img.train{
	width:26%;
	top:61.5%;
	left:-26%;
    -webkit-animation: trainmove 30s linear infinite;
    animation: trainmove 30s linear infinite;
}
.landingpage .wrapper img.obj{
	transition:all .5s
}
.landingpage .wrapper img.obj1{
	width:4%;
	left:3%;
	top:39%;
}
.landingpage .wrapper img.obj2{
	width:7%;
	left:7%;
	top:19%;
}
.landingpage .wrapper img.obj3{
	width:5%;
	left:16%;
	top:15%;
}
.landingpage .wrapper img.obj4{
	width:5%;
	left:23%;
	top:75%;
}
.landingpage .wrapper img.obj5{
	width:8%;
	left:38%;
	top:45%;
}
.landingpage .wrapper img.obj6{
	width:8%;
	left:37%;
	top:65%;
}
.landingpage .wrapper img.obj7{
	width:5%;
	left:53%;
	top:39%;
}
.landingpage .wrapper img.obj8{
	width:8%;
	left:51%;
	top:48%;
}
.landingpage .wrapper img.obj9{
	width:12%;
	left:55%;
	top:57%;
}
.landingpage .wrapper img.obj10{
	width:9%;
	left:71%;
	top:71%;
}
.landingpage .wrapper img.obj11{
	width:6%;
	left:80%;
	top:13%;
}
.landingpage .wrapper img.obj12{
	width:2%;
	left:93%;
	top:28%;
}
.landingpage .wrapper img.obj13{
	width:5%;
	left:86%;
	top:54%;
}
.landingpage .wrapper img.obj14{
	width: 10%;
    left: 34%;
    top: 58%;
}
.landingpage .wrapper #air1{
	position:absolute;
	top:72.74%;
	left:24%;
	width:19.38%;
	height:27.26%;
}
.landingpage .wrapper #air2{
	position:absolute;
	top:74%;
	left:59%;
	width:14%;
	height:24.6%;
}
.landingpage .wrapper #lukisan{
	position:absolute;
	top:66.48%;
	left:8.28%;
	width:8.85%;
	height:10.16%
}
.landingpage .wrapper #palakiri{
	position:absolute;
	top:35%;
	left:14.01%;
	width:14.74%;
	height:33.62%
}
.landingpage .wrapper #pelangi{
	position:absolute;
	top:64.39%;
	left:15.68%;
	width:13.39%;
	height:32.46%;
}
@-webkit-keyframes trainmove {
    to{
        left:100%
    }
}
@keyframes trainmove {
    to{
        left:100%
    }
}
.landingpage .wrapper img.swirl1{
	width:51%;
	top:-5%;
	left:60%;
    -webkit-animation: rotating1 100s linear infinite;
    animation: rotating1 100s linear infinite;
	
}
.landingpage .wrapper img.swirl2{
	width:49%;
	top:0;
	left:-13%;
    -webkit-animation: rotating2 100s linear infinite;
    animation: rotating2 100s linear infinite;
}
.landingpage .wrapper img.round1{
	width:9%;
	top:61%;
	left:52%;
    -webkit-animation: rotating1 50s linear infinite;
    animation: rotating1 50s linear infinite;
}
.landingpage .wrapper img.round2{
	width:5%;
	top:41%;
	left:50%;
    -webkit-animation: rotating2 50s linear infinite;
    animation: rotating2 50s linear infinite;
}
.landingpage .wrapper img.round3{
	width:6%;
	top:70%;
	left:39%;
    -webkit-animation: rotating1 50s linear infinite;
    animation: rotating1 50s linear infinite;
}
.landingpage .wrapper img.round4{
	width:6%;
	top:53%;
	left:39%;
    -webkit-animation: rotating2 50s linear infinite;
    animation: rotating2 50s linear infinite;
}
@-webkit-keyframes rotating1 {
    to{
        -webkit-transform: rotate(-360deg);
    }
}
@keyframes rotating1 {
    to{
        transform: rotate(-360deg);
    }
}
@-webkit-keyframes rotating2 {
    to{
        -webkit-transform: rotate(360deg);
    }
}
@keyframes rotating2 {
    to{
        transform: rotate(360deg);
    }
}
.landingpage .wrapper img.bottle1{
	width:17%;
	top:39%;
	left:79%;
}
.landingpage .wrapper img.bottle1:hover{
    -webkit-animation: bottlerotating1 .5s ease-in-out forwards;
    animation: bottlerotating1 .5s ease-in-out forwards;
}
@-webkit-keyframes bottlerotating1 {
    to{
        -webkit-transform: rotate(-20deg) translateY(-20px);
    }
}
@keyframes bottlerotating1 {
    to{
        transform: rotate(-20deg) translateY(-20px);
    }
}
.landingpage .wrapper img.bottle2{
	width:11%;
	top:52%;
	left:7%;
}
.landingpage .wrapper img.bottle2:hover{
    -webkit-animation: bottlerotating2 .5s ease-in-out forwards;
    animation: bottlerotating2 .5s ease-in-out forwards;
}
@-webkit-keyframes bottlerotating2 {
    to{
        -webkit-transform: rotate(20deg) translateY(-20px);
    }
}
@keyframes bottlerotating2 {
    to{
        transform: rotate(20deg) translateY(-20px);
    }
}

.landingpage .wrapper img.bottle3{
	width:13%;
	top:auto;
	bottom:15px;
	left:43%;
}
.landingpage .wrapper img.bottle3_base{
	top:auto;
	bottom:-45px;
}
.landingpage .wrapper img.bottle3:hover{
  animation: bottleshake 1.5s cubic-bezier(.36,.07,.19,.97) both;
  -webkit-animation: bottleshake 1.5s cubic-bezier(.36,.07,.19,.97) both;
}
@keyframes bottleshake {
  10%, 90% {
    transform: translate3d(0,-1px, 0);
  }
  
  20%, 80% {
    transform: translate3d(0,2px, 0);
  }

  30%, 50%, 70% {
    transform: translate3d(0,-4px, 0);
  }

  40%, 60% {
    transform: translate3d(0,4px, 0);
  }
}
@-webkit-keyframes bottleshake {
  10%, 90% {
    -webkit-transform: translate3d(0,-1px, 0);
  }
  
  20%, 80% {
    -webkit-transform: translate3d(0,2px, 0);
  }

  30%, 50%, 70% {
    -webkit-transform: translate3d(0,-4px, 0);
  }

  40%, 60% {
    -webkit-transform: translate3d(0,4px, 0);
  }
}
.landingpage .wrapper .star{
	position:absolute;
	bottom:0;
	right:0;
	width:22%;
	height:26%;
}
.landingpage .wrapper .star .st0{
	fill:#FFFFFF
}
.landingpage .wrapper .star path{
    -webkit-animation: starscale 10s linear infinite;
	-webkit-transform-origin:center center;
    animation: starscale 10s linear infinite;
	transform-origin:center center;
}
.landingpage .wrapper .star path:nth-child(1){
	-webkit-animation-delay:0s;
	animation-delay:0s
}
.landingpage .wrapper .star path:nth-child(2){
	-webkit-animation-delay:2s;
	animation-delay:2s
}
.landingpage .wrapper .star path:nth-child(3){
	-webkit-animation-delay:4s;
	animation-delay:4s
}
.landingpage .wrapper .star path:nth-child(4){
	-webkit-animation-delay:6s;
	animation-delay:6s
}
.landingpage .wrapper .star path:nth-child(5){
	-webkit-animation-delay:8s;
	animation-delay:8s
}
.landingpage .wrapper .star path:nth-child(6){
	-webkit-animation-delay:0s;
	animation-delay:0s
}
.landingpage .wrapper .star path:nth-child(7){
	-webkit-animation-delay:2s;
	animation-delay:2s
}
.landingpage .wrapper .star path:nth-child(8){
	-webkit-animation-delay:4s;
	animation-delay:4s
}
.landingpage .wrapper .star path:nth-child(9){
	-webkit-animation-delay:6s;
	animation-delay:6s
}
.landingpage .wrapper .star path:nth-child(10){
	-webkit-animation-delay:8s;
	animation-delay:8s
}
.landingpage .wrapper .star path:nth-child(11){
	-webkit-animation-delay:0s;
	animation-delay:0s
}
.landingpage .wrapper .star path:nth-child(12){
	-webkit-animation-delay:2s;
	animation-delay:2s
}
.landingpage .wrapper .star path:nth-child(13){
	-webkit-animation-delay:4s;
	animation-delay:4s
}
.landingpage .wrapper .star circle{
    -webkit-animation: starscale 10s linear infinite;
	-webkit-transform-origin:center center
    animation: starscale 10s linear infinite;
	transform-origin:center center
}
.landingpage .wrapper .star circle:nth-child(14){
	-webkit-animation-delay:0s;
	animation-delay:0s
}
.landingpage .wrapper .star circle:nth-child(15){
	-webkit-animation-delay:2s;
	animation-delay:2s
}
.landingpage .wrapper .star circle:nth-child(16){
	-webkit-animation-delay:4s;
	animation-delay:4s
}
.landingpage .wrapper .star circle:nth-child(17){
	-webkit-animation-delay:6s;
	animation-delay:6s
}
.landingpage .wrapper .star circle:nth-child(18){
	-webkit-animation-delay:8s;
	animation-delay:8s
}
.landingpage .wrapper .star circle:nth-child(19){
	-webkit-animation-delay:0s;
	animation-delay:0s
}
.landingpage .wrapper .star circle:nth-child(20){
	-webkit-animation-delay:2s;
	animation-delay:2s
}
.landingpage .wrapper .star circle:nth-child(21){
	-webkit-animation-delay:4s;
	animation-delay:4s
}
.landingpage .wrapper .star circle:nth-child(22){
	-webkit-animation-delay:6s;
	animation-delay:6s
}
.landingpage .wrapper .star circle:nth-child(23){
	-webkit-animation-delay:8s;
	animation-delay:8s
}
.landingpage .wrapper .star circle:nth-child(24){
	-webkit-animation-delay:0s;
	animation-delay:0s
}
.landingpage .wrapper .star circle:nth-child(25){
	-webkit-animation-delay:2s;
	animation-delay:2s
}
.landingpage .wrapper .star circle:nth-child(26){
	-webkit-animation-delay:4s;
	animation-delay:4s
}
.landingpage .wrapper .star circle:nth-child(27){
	-webkit-animation-delay:6s;
	animation-delay:6s
}
.landingpage .wrapper .star circle:nth-child(28){
	-webkit-animation-delay:8s;
	animation-delay:8s
}
.landingpage .wrapper .star circle:nth-child(29){
	-webkit-animation-delay:0s;
	animation-delay:0s
}
.landingpage .wrapper .star circle:nth-child(30){
	-webkit-animation-delay:2s;
	animation-delay:2s
}
.landingpage .wrapper .star circle:nth-child(31){
	-webkit-animation-delay:4s;
	animation-delay:4s
}
.landingpage .wrapper .star circle:nth-child(32){
	-webkit-animation-delay:6s;
	animation-delay:6s
}
.landingpage .wrapper .star circle:nth-child(33){
	-webkit-animation-delay:8s;
	animation-delay:8s
}
.landingpage .wrapper .star circle:nth-child(34){
	-webkit-animation-delay:0s;
	animation-delay:0s
}
.landingpage .wrapper .star circle:nth-child(35){
	-webkit-animation-delay:2s;
	animation-delay:2s
}
.landingpage .wrapper .star circle:nth-child(36){
	-webkit-animation-delay:4s;
	animation-delay:4s
}
.landingpage .wrapper .star circle:nth-child(37){
	-webkit-animation-delay:6s;
	animation-delay:6s
}
.landingpage .wrapper .star circle:nth-child(38){
	-webkit-animation-delay:8s;
	animation-delay:8s
}
.landingpage .wrapper .star circle:nth-child(39){
	-webkit-animation-delay:0s;
	animation-delay:0s
}
.landingpage .wrapper .star circle:nth-child(40){
	-webkit-animation-delay:2s;
	animation-delay:2s
}
@-webkit-keyframes starscale {
    0%{
		opacity:0;
        -webkit-transform:scale(1);
    }
    50%{
		opacity:1;
        -webkit-transform:scale(1.1);
    }
    100%{
		opacity:0;
        -webkit-transform:scale(1.2);
    }
}



.landingpage .wrappermobile{
	position:relative
}
.landingpage .wrappermobile img{
	position:absolute;
	top:0;
	left:0;
	width:100%
}

.landingpage .wrappermobile img.obj{
-webkit-animation: float 6s ease-in-out infinite;
animation: float 6s ease-in-out infinite;
}
.landingpage .wrappermobile img.obj1{
width:8.80%;
left:9.63%;
top:31.30%;
animation-delay:0s;
-webkit-animation-delay:0s
}
.landingpage .wrappermobile img.obj2{
width:14.63%;
left:11.20%;
top:10.89%;
animation-delay:1s;
-webkit-animation-delay:1s
}
.landingpage .wrappermobile img.obj3{
width:9.54%;
left:42.13%;
top:9.11%;
animation-delay:2s;
-webkit-animation-delay:2s
}
.landingpage .wrappermobile img.obj4{
width:6.67%;
left:1.30%;
top:80.68%;
animation-delay:3s;
-webkit-animation-delay:3s
}
.landingpage .wrappermobile img.obj5{
width:15.19%;
left:23%;
top:62%;
animation-delay:4s;
-webkit-animation-delay:4s
}
.landingpage .wrappermobile img.obj6{
width:12.78%;
left:26.94%;
top:72.81%;
animation-delay:5s;
-webkit-animation-delay:5s
}
.landingpage .wrappermobile img.obj7{
width:10.65%;
left:54.35%;
top:56.41%;
animation-delay:6s;
-webkit-animation-delay:6s
}
.landingpage .wrappermobile img.obj8{
width:16.48%;
left:51.02%;
top:61.67%;
animation-delay:0s;
-webkit-animation-delay:0s
}
.landingpage .wrappermobile img.obj9{
width:23.52%;
left:56%;
top:69.38%;
animation-delay:1s;
-webkit-animation-delay:1s
}
.landingpage .wrappermobile img.obj10{
width:15.37%;
left:82.50%;
top:85.94%;
animation-delay:2s;
-webkit-animation-delay:2s
}
.landingpage .wrappermobile img.obj11{
width:10.93%;
left:66.39%;
top:9.79%;
animation-delay:3s;
-webkit-animation-delay:3s
}
.landingpage .wrappermobile img.obj12{
width:3.43%;
left:90.83%;
top:18.49%;
animation-delay:4s;
-webkit-animation-delay:4s
}
.landingpage .wrappermobile img.obj13{
width:5.74%;
left:89.72%;
top:29.06%;
animation-delay:5s;
-webkit-animation-delay:5s
}
.landingpage .wrappermobile img.obj14{
width:18%;
left:19%;
top:70%;
animation-delay:4s;
-webkit-animation-delay:4s
}
.landingpage .wrappermobile img.train{
	width:26%;
	top:72.8%;
	left:-26%;
    -webkit-animation: trainmove 30s linear infinite;
    animation: trainmove 30s linear infinite;
}
.landingpage .wrappermobile img.swirl1{
	width:119%;
	top:-3%;
	left:24%;
    -webkit-animation: rotating1 100s linear infinite;
    animation: rotating1 100s linear infinite;
	
}
.landingpage .wrappermobile img.swirl2{
	width:102%;
	top:6%;
	left:-38%;
    -webkit-animation: rotating2 100s linear infinite;
    animation: rotating2 100s linear infinite;
}
.landingpage .wrappermobile img.round1{
	width:11%;
	top:67%;
	left:27%;
    -webkit-animation: rotating1 50s linear infinite;
    animation: rotating1 50s linear infinite;
}
.landingpage .wrappermobile img.round2{
	width:12%;
	top:57%;
	left:27%;
    -webkit-animation: rotating2 50s linear infinite;
    animation: rotating2 50s linear infinite;
}
.landingpage .wrappermobile img.round3{
	width:10%;
	top:49%;
	left:49%;
    -webkit-animation: rotating1 50s linear infinite;
    animation: rotating1 50s linear infinite;
}
.landingpage .wrappermobile img.round4{
	width:16%;
	top:62%;
	left:52%;
    -webkit-animation: rotating2 50s linear infinite;
    animation: rotating2 50s linear infinite;
}
.landingpage .wrappermobile img.bottle1{
	width:24%;
	top:49%;
	left:36%;
}
.landingpage .wrappermobile img.bottle1:hover{
  animation: bottleshake 1.5s cubic-bezier(.36,.07,.19,.97) both;
  -webkit-animation: bottleshake 1.5s cubic-bezier(.36,.07,.19,.97) both;
}
.landingpage .wrappermobile img.bottle2{
	width:15%;
	top:47%;
	left:3%;
}
.landingpage .wrappermobile img.bottle2:hover{
    -webkit-animation: bottlerotating3 .5s ease-in-out forwards;
    animation: bottlerotating3 .5s ease-in-out forwards;
}
@-webkit-keyframes bottlerotating3 {
    to{
        -webkit-transform: rotate(20deg) translateY(-10px);
    }
}
@keyframes bottlerotating3 {
    to{
        transform: rotate(20deg) translateY(-10px);
    }
}
.landingpage .wrappermobile img.bottle3{
	width:18%;
	top:40%;
	left:80%;
}
.landingpage .wrappermobile img.bottle3:hover{
    -webkit-animation: bottlerotating4 .5s ease-in-out forwards;
    animation: bottlerotating4 .5s ease-in-out forwards;
}
@-webkit-keyframes bottlerotating4 {
    to{
        -webkit-transform: rotate(-20deg) translateY(-10px);
    }
}
@keyframes bottlerotating4 {
    to{
        transform: rotate(-20deg) translateY(-10px);
    }
}
@-webkit-keyframes float {
	0% {
		transform: translatey(0px);
	}
	50% {
		transform: translatey(-10px);
	}
	100% {
		transform: translatey(0px);
	}
}
@keyframes float {
	0% {
		transform: translatey(0px);
	}
	50% {
		transform: translatey(-10px);
	}
	100% {
		transform: translatey(0px);
	}
}



@media only screen and (max-width: 992px) {
}