html {    
    margin:0px;
    overflow: hidden;
}
body{
	margin:0px;
	overflow: hidden;
}

@font-face {
  font-family: jtwfont;
  src: url(font/JustTheWayYouAre.ttf);
}

table img {
    display: block;
}

#designedbycontainer{
	width: 100%;
	height: 113px;
	position: fixed;
	margin:0 auto;
	cursor: pointer;
}

#designedby{
	text-align: right;
	width: 45%;
	position: relative;
	margin: 0 auto;
}

#leafarea{
	width: 300px;
	height: 200px;
	position: relative;
	margin:0 auto;
	cursor: pointer;
}

#wltooltip{
	text-align: center;
	width: 100%;
	position: relative;
	top: 10px;
}

#wishingleaf{
	width: 100%;
	height: 836px;
	background: url('images/wishingleaf.png') no-repeat center;
	bottom:9%;
	position: fixed;
	z-index: 1;
	}

#wlcontainer{
	z-index: 1;
}

#wishingleaflist{
	width: 100%;
	height: 610px;
	background: url('images/wishingleaflist.png') no-repeat center;
	bottom:15%;
	position: fixed;
	z-index: 1;
	}

#wlltext{
	width: 620px;
	height: 55px;
	position: relative;
	margin: 0 auto;
	top: 0%;
	left: 3%;
	color: #FFF200;
	font-family: jtwfont;
	line-height: 28px;
	margin-bottom: 100px;
}

.leaftext{
	width: 400px;
	position: relative;
	margin: 0 auto;
	top:31%;
	color: #fff;
	font-family: jtwfont;
	line-height: 28px;
}

#closeleaf{
	text-align: right;
	margin:0;
	cursor: pointer;
}

#closequote{
	text-align: right;
	margin:0;
	cursor: pointer;
}

#closelist{
	width: 30px;
	height: 30px;
	text-align: right;
	margin:0 auto;
	cursor: pointer;
	position: relative;
	margin-top: -55px;

}

#nextprevlist{
	width: 100%;
	height: 30px;
	text-align: center;
	margin:0 auto;
	cursor: pointer;
	position: relative;
	margin-top: -55px;
	margin-bottom:35px;
}

#leaflist{
	width: 100%;
	height: 153px;
	background: url('images/leaflist.png') no-repeat center;
	bottom:9%;
	position: fixed;
	z-index: 1;
	bottom: 9%;
	left: 5%;
	cursor: pointer;
	}

#konten {
width: 100%;
height: calc( 100vh - 1px );
background: url('images/bg_nosponsors.jpg') no-repeat center;
background-size: contain;
display: none;
}

#buddha1{
	width: 100%;
	height: 674px;
	background: url('images/buddha1.png') no-repeat center;
	bottom:9%;
	position: fixed;
	background-size: 470px;
	}

/* START CSS PROGRESS BAR */
  .ui-progressbar {
    position: relative;
	width: 50%;
	margin:0 auto;
  }
  .progress-label {
    position: absolute;
    left: 50%;
    top: 4px;
    font-weight: bold;
    text-shadow: 1px 1px 0 #fff;
  }
 /* END CSS PROGRESS BAR */

 	/*START CSS GAYUNG KANAN*/
	#draggable{ width: 100%; height: calc( 100vh - 1px ); padding: 0.5em; float: right; margin: 10px 10px 10px 0; 
	text-align: center; bottom: -30%; left: 9%; position: fixed; background: url('images/wadahair.png') no-repeat center; }
  	#droppable { width: 100%; height: 250px; padding: 0.5em; float: right; margin: 10px; left: 200px; 
  	text-align: center; left:6%; bottom: 30%; position: fixed;}
  	#showtuang { width: 100%; height: 250px; padding: 0.5em; float: right; margin: 10px; left: 200px; 
  	text-align: center; left:6%; bottom: 25%; position: fixed; background: url('images/wadahair-tuang.png') no-repeat center;}
 	/*END CSS GAYUNG KANAN*/

 /*WATERDROP CSS*/
#waterdrop{
	width: 100%;
	text-align: center;
  position: fixed;
  left: 75px;
  top: 52%;
}

#waterdrop img{
	width: 175px;
}

#glitter{
	width: 100%;
	text-align: center;
	z-index: 1;
	position: relative;
	top: 60%;
	left: 8%;
	margin: 0 auto;
}

#fpointer{
	width: 61%;
	text-align: right;
	z-index: 1;
	position: fixed;
	bottom: -450px;
	left: 2%;
}

#userwishes{
	width: 100%;
	height: 558px;
	background: url('images/quote.png') no-repeat center;
	bottom:15%;
	position: fixed;
}

#userwishes a, #userwishes a:link, #userwishes a:hover, #userwishes a:visited{
	color: black; text-decoration: none; font-weight: bold; text-transform: uppercase;
	font-size: 10px;
	cursor: pointer;
}

#insertwish{
	width: 550px;
	top: 70px;
	margin: 0 auto;
	position: relative;
	font-family: jtwfont;
	font-size: 14px;
}

#insertwish h2{
	font-size: 16px;
	margin: 0;
	padding: 0;
}



#insertwish p, #insertwish span{
	/*font-family: jtwfont;*/
	font-size: 12px;
	font-family: arial;
}

.inputtrp{
	border: none;
	background: transparent;
	font-family: jtwfont;
	font-size: 18px;
	color: white;
	outline: none; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; resize: none;
}

#wishform ::placeholder {
  color: #dbdbdb;
}

#wishtextarea{
	width:100%; height: 150px;
}

#movethisup{
	width: 100%; height: 50px; padding: 0.5em; float: right; margin: 10px 10px 10px 0; 
	text-align: center; bottom: 15%; left: 8%; position: fixed;
}

#movethisup img{
width: 50px;
	}

#blinking img{
	width: 50px;
}

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

	html, body {
  		overflow-x: hidden;
		}
	body {
  		position: relative;
  		height: 100vh;
  		overflow: hidden;
	}


	#konten {
    width: 100%;
    height: calc( 100vh - 10px );
    background: url('images/bg-mobile_nosponsor.jpg') no-repeat center top;
    background-size: contain;
	}

	#wishingleaflist{
	width: 100%;
	height: 500px;
	background: url('images/wishingleaflist-m.png') no-repeat center;
	bottom:15%;
	position: fixed;
	z-index: 1;
	}

	#wlltext{
	width: 72%;
	height: 100px;
	position: relative;
	margin: 0 auto;
	top: 0%;
	left: 5%;
	color: #FFF200;
	font-family: jtwfont;
	line-height: 24px;
	margin-bottom: 24px;
	font-size: 12px;
	overflow: hidden;
	}

	#closelist{
	width: 30px;
	height: 30px;
	text-align: right;
	margin:0 auto;
	cursor: pointer;
	position: relative;
	margin-top: -25px;
	}

	#nextprevlist{
	width: 100%;
	height: 30px;
	text-align: center;
	margin:0 auto;
	cursor: pointer;
	position: relative;
	margin-top: -55px;
	margin-bottom:25px;
}


	#designedbycontainer{
	width: 100%;
	height: 85px;
	position: fixed;
	margin:0 auto;
	cursor: pointer;
	z-index: 1;
	}

	#designedby{
	text-align: right;
	width: 90%;
	position: relative;
	margin: 0 auto;
	}

	#designedby img{
		width: 60px;
	}


	#leafarea{
	width: 30%;
	height: 100px;
	position: relative;
	margin:0 auto;
	cursor: pointer;
	z-index: 1;
	left: -20%;
	}

	#wltooltip{
	text-align: center;
	width: 100%;
	position: relative;
	top: -15px;
	}

	#buddha1{
	width: 100%;
	height: calc( 100vh - 10px );
	background: url('images/buddha1-mobile.png') no-repeat center;
	top:0%;
	position: fixed;
	}

	/*START CSS GAYUNG KANAN*/
	#draggable{ width: 100%; height: calc( 100vh - 1px ); padding: 0.5em; float: right; margin: 10px 10px 10px 0; 
	text-align: center; bottom: -20%; left: 17%; position: fixed; background: url('images/wadahair-mobile.png') no-repeat center; }
  	#droppable { width: 100%; height: 250px; padding: 0.5em; float: right; margin: 10px; left: 200px; 
  	text-align: center; left:14%; bottom: 40%; position: fixed;}
  	#showtuang { width: 100%; height: 250px; padding: 0.5em; float: right; margin: 10px; left: 200px; 
  	text-align: center; left:14%; bottom: 25%; position: fixed; background: url('images/wadahair-tuang-mobile.png') no-repeat center;}
 	/*END CSS GAYUNG KANAN*/

#waterdrop{
	width: 100%;
	text-align: center;
  position: fixed;
  left: 25px;
  top: 50%;
}

#waterdrop img{
	width: 120px;
}

#fpointer{
	width: 80%;
	text-align: right;
	z-index: 1;
	position: fixed;
	bottom: 500px;
	left: 5%;
	}

#movethisup{
	width: 100%; height: 30px; padding: 0.5em; float: right; margin: 10px 10px 10px 0; 
	text-align: center; bottom: 29%; left: 14%; position: fixed;
	}

#movethisup img{
width: 30px;
	}

#userwishes{
	width: 100%;
	height: 493px;
	background: url('images/quote-m.png') no-repeat center;
	bottom:15%;
	position: fixed;
	/*background-size: 400px;*/
	}

#insertwish{
	width: 70%;
	top: 75px;
	margin: 0 auto;
	position: relative;
	font-family: jtwfont;
	font-size: 10px;
}

#insertwish h2{
	font-size: 12px;
	margin: 0;
	padding: 0;
}

#insertwish p, #insertwish span{
	/*font-family: jtwfont;*/
	font-size: 12px;
	font-family: arial;
}

.inputtrp{
	border: none;
	background: transparent;
	font-family: jtwfont;
	font-size: 18px;
	outline: none; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; resize: none;
}

.leaftext{
	width: 60%;
	position: relative;
	padding: 10px;
	margin: 0 auto;
	top:28%;
	color: #fff;
	font-family: jtwfont;
	line-height: 28px;
}

#wishingleaf{
	width: 100%;
	height: 514px;
	background: url('images/wishingleaf-m.png') no-repeat center;
	bottom:9%;
	position: fixed;
	z-index: 1;
	}

	#wishtextarea{
	width:100%; height: 70px; margin:0 auto;
	}

	#closeleaf{
	text-align: right;
	margin:0;
	cursor: pointer;
	right:15px;
	position: relative;
	}

	#leaflist{
	width: 100%;
	height: 102px;
	background: url('images/leaflist-m.png') no-repeat center;
	bottom:9%;
	position: fixed;
	z-index: 1;
	bottom: 9%;
	left: 7%;
	cursor: pointer;
	}

}


/*PROGRESS BAR*/
.progress {
      position: relative;
      height: 10px;
      display: block;
      width: 100%;
      background-color: white;
      border-radius: 2px;
      background-clip: padding-box;
      /*margin: 0.5rem 0 1rem 0;*/
      overflow: hidden;
text-align: center;
    }
    .progress .indeterminate {
background-color:black; }
    .progress .indeterminate:before {
      content: '';
      position: absolute;
      background-color: #2C67B1;
      top: 0;
      left: 0;
      bottom: 0;
      will-change: left, right;
      -webkit-animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
              animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite; }
    .progress .indeterminate:after {
      content: '';
      position: absolute;
      background-color: #2C67B1;
      top: 0;
      left: 0;
      bottom: 0;
      will-change: left, right;
      -webkit-animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
              animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
      -webkit-animation-delay: 1.15s;
              animation-delay: 1.15s; }

    @-webkit-keyframes indeterminate {
      0% {
        left: -35%;
        right: 100%; }
      60% {
        left: 100%;
        right: -90%; }
      100% {
        left: 100%;
        right: -90%; } }
    @keyframes indeterminate {
      0% {
        left: -35%;
        right: 100%; }
      60% {
        left: 100%;
        right: -90%; }
      100% {
        left: 100%;
        right: -90%; } }
    @-webkit-keyframes indeterminate-short {
      0% {
        left: -200%;
        right: 100%; }
      60% {
        left: 107%;
        right: -8%; }
      100% {
        left: 107%;
        right: -8%; } }
    @keyframes indeterminate-short {
      0% {
        left: -200%;
        right: 100%; }
      60% {
        left: 107%;
        right: -8%; }
      100% {
        left: 107%;
        right: -8%; } }