body {
    color: #333;
    font: 100% Lato, Arial, Sans Serif;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

img {
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-o-user-select: none;
user-select: none;
}

.hide {
	display:none;
}
#main {
    width:100%;
}

#logo {
	position:absolute;
    background: url(../img/DBS_logo.png) no-repeat;
	z-index: 10;
}
#page3-title {
	top:4em;	
	z-index:10;
	right: 5%;
	position: absolute;	
}
#rotator {
	margin:auto;
}
#page3-instruction {
	z-index:10;
	top: 9em;
	right: 5%;
	position: absolute;	
}
.img-container {
    margin: auto;
}
#result-container {
    position: absolute;
    margin: auto;
}
#themoney {
    margin: auto;
    display:block;
    color:red;
    font-size:4em;
    font-weight:bolder;
}
#theref {
    margin: auto;
    display:block;
    color:#dd621f;
    font-size:2em;
}
#hand-container {
    bottom:0;
/*
    right:10%;
*/
    z-index: 10;
	position:fixed;
}
img#hand {
	cursor:pointer;
}

#left_coins, #right_coins, #confirm_btn, #top_text {
  	z-index: 5 !important;
	position:absolute;
}
.col-xs-3, .col-md-3, .col-sm-3, .col-lg-3 {
  padding-right: 5px;
  padding-left: 5px;
}
#img-play {
	position:absolute;
    z-index:5;
	cursor:pointer;
}
.hideit {
	opacity: 0;	
}
.container {
  top: 0%;
  margin-top: 0px;
  height: 100%;
  position: relative;
}
/* Sprites Image Map */
#sprites {
	position: fixed;
	z-index:4;
}
#welcome {
	position:absolute;
    background: url(../img/welcome.png) no-repeat;
	z-index: 4;
}
#mandarin {
	position:absolute;
    background: url(../img/mandarin.png) no-repeat;
	z-index: 4;
}
#ingot {
	position:absolute;
    background: url(../img/ingot.png) no-repeat;
	z-index: 4;
}
#bubbles3 {
	position:absolute;
    background: url(../img/3bubbles.png) no-repeat;
	z-index: 5;
}
#bubbles5 {
	position:absolute;
    background: url(../img/5bubbles.png) no-repeat;
	z-index: 5;
}
#bubble {
	position:absolute;
    background: url(../img/bubble.png) no-repeat;
	z-index: 5;
}

#rotator {
	margin: auto;
	z-index: 5;
	display: block;
	position: absolute;
	top: 0%;
	height: 100%;
	opacity:0;
	width: auto;
}
/* End of sprites */

/* effects */
p:nth-child(2) a:hover {
  -webkit-animation: neon2 1.5s ease-in-out infinite alternate;
  -moz-animation: neon2 1.5s ease-in-out infinite alternate;
  animation: neon2 1.5s ease-in-out infinite alternate;
}

@-webkit-keyframes neon2 {
  from {
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #228DFF, 0 0 70px #228DFF, 0 0 80px #228DFF, 0 0 100px #228DFF, 0 0 150px #228DFF;
  }
  to {
    text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #228DFF, 0 0 35px #228DFF, 0 0 40px #228DFF, 0 0 50px #228DFF, 0 0 75px #228DFF;
  }
}
@-moz-keyframes neon2 {
  from {
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #228DFF, 0 0 70px #228DFF, 0 0 80px #228DFF, 0 0 100px #228DFF, 0 0 150px #228DFF;
  }
  to {
    text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #228DFF, 0 0 35px #228DFF, 0 0 40px #228DFF, 0 0 50px #228DFF, 0 0 75px #228DFF;
  }
}

/* End of Effects */


#page1,#page2,#page3,#page4 {
  background-size: cover !important;
  background-position: center !important;
  margin: auto;
  bottom: 0;
  left: 0;
  display:none;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 4;
  width:100%;
}
#page1 {
    background: url(../img/background/page_1.png) no-repeat;
}
#page2 {
    background: url(../img/background/page_2.png) no-repeat;
}
#page3 {
    background: url(../img/background/page_3.png) no-repeat;
}
#page4 {
    background: url(../img/page4.jpg) no-repeat;
}

@-webkit-keyframes jump {
  0%{
	-webkit-transform: translateY(0);
	transform: translateY(0);
  }
  20%{
	-webkit-transform: translateY(0);
	transform: translateY(0);
  }
  40%{
	-webkit-transform: translateY(-30px);
	transform: translateY(-30px);
  }
  50%{
	-webkit-transform: translateY(0);
	transform: translateY(0);
  }
  60%{
	-webkit-transform: translateY(-15px);
	transform: translateY(-15px);
  }
  80%{
	-webkit-transform: translateY(0);
	transform: translateY(0);
  }
  100%{
	-webkit-transform: translateY(0);
	transform: translateY(0);
  }
}

@keyframes jump {
  0%{
	transform: translateY(0);
  }
  20%{
	transform: translateY(0);
  }
  40%{
	transform: translateY(-30px);
  }
  50%{
	transform: translateY(0);
  }
  60%{
	transform: translateY(-15px);
  }
  80%{
	transform: translateY(0);
  }
  100%{
	transform: translateY(0);
  }
}
#result-container {
  display:none;
  top:0%;
  z-index: 5;
}
#result-ingot {
  position:relative;
  opacity: 0;
  top:10%;
/*
  background: url(../img/ingot_888.png) no-repeat;
*/
  background-size: cover;
  z-index: 6;
  margin: auto;
}

.display_ref {
	font-size: 1.9em;
	color: #000;
	font-weight: bold;
	position: relative;
	top: 63%;
	left: inherit;
	margin: auto;
	display: block;
	text-align: center;
	padding-top: 1em;
}
img#hand {
	z-index: 10;
	position: fixed;
	bottom: 0%;
	left: 60%;
}
#left_coins_1,#left_coins_2,#left_coins_3,#left_coins_4 {
	position: absolute;
}
img.quote {
	position:fixed;
}
#input-container , .container-fluid, #base-container, .img-container {
    width:100%;
}
#cycler{position:relative;}
#cycler img{
/*
	position:relative;
*/
	z-index:4;
}
#cycler img.active{z-index:4}
#fade0 {
    background: url(../img/background/page_1.png) no-repeat;
    background-position:center;
    background-size: cover;
    display:none;
    height:100%;
    width:100%;
    position:fixed;
    z-index: 1;
}




#hand-container.with-note:after {
	width: 172px;
	height: 59px;
	content: " ";
	background: url(../img/hand-note.png) no-repeat;
	position: absolute;
	left: 100%;
	top: 35%;
	opacity:0;
	-webkit-animation: 2s ease 0s normal forwards 1 fadeIn, leftAndRight 2s ease 2s infinite normal;
	animation: 2s ease 0s normal forwards 1 fadeIn, leftAndRight 2s ease 2s infinite normal;
}

#hand-container.with-note.fadeOut:after {
	-webkit-animation: 1s ease 0s normal forwards 1 fadeOut;
	animation: 1s ease 0s normal forwards 1 fadeOut;
}

#img-play {
	background: url('../img/play-button.png') no-repeat; 
	background-size:100%;
}

#img-play:hover {
	background: url('../img/play-button-hover.png') no-repeat; 
	background-size:100%;
}
#confirm_btn {
	background: url('../img/page4-confirm.png') no-repeat; 	
}
#confirm_btn:hover {
	background: url('../img/page4-confirm-hover.png') no-repeat; 
}


@keyframes quoteHide{
    0%{
        opacity:1
    }
    to{
        opacity:0;
		display:none;
    }
}

.quoteHide {
	animation: quoteHide 1.5s ease 0s normal;
}

@keyframes fadeInFadeOut{
    0%{
        opacity:0
    }
	50%{
        opacity:1
    }
    to{
        opacity:0
    }
}

.fadeInFadeOut {
	animation: fadeInFadeOut 4s ease 0s infinite normal ;
}
.fadeInFadeOutSuperFast {
	animation: fadeInFadeOut 2s ease 0s infinite normal ;
}
.fadeInFadeOutFast {
	animation: fadeInFadeOut 3s ease 0s infinite normal ;
}

@keyframes pulse{
    0%{
        transform:scale(0.9)
    }
    50%{
        transform:scale(1)
    }
    to{
        transform:scale(0.9)
    }
}
.pulse {
	animation: pulse 4s ease 0s infinite normal ;
}

@keyframes leftAndRight{
    0%{
        opacity:1;
        transform:translate3d(0%,0,0)
    }
	50%{
        transform:translate3d(10%,0,0)
    }
    to{
        opacity:1;
        transform:translate3d(0%,0,0)
    }
}
.leftAndRight {
	animation: leftAndRight 2s ease 0s infinite normal ;
}

@keyframes ingot-animation{
    0%{
        opacity:1;
        transform:translate3d(10%,0,0)
    }
	50%{
        transform:translate3d(0%,0,0)
    }
    to{
        opacity:1;
        transform:translate3d(10%,0,0)
    }
}
.ingot-animation {
	animation: ingot-animation 4s ease 0s infinite normal ;
}

@keyframes bubble5-animation {
    0%{
        opacity:1;
        transform:translate3d(60%,0,0)
    }
	50%{
        transform:translate3d(0%,0,0)
    }
    to{
        opacity:1;
        transform:translate3d(60%,0,0)
    }
}
.bubble5-animation {
	animation: bubble5-animation 6s ease 0s infinite normal ;
}

@keyframes bubble3-animation {
    0%{
        opacity:1;
        transform:translate3d(0,40%,0)
    }
	50%{
        transform:translate3d(0,0%,0)
    }
    to{
        opacity:1;
        transform:translate3d(0,40%,0)
    }
}
.bubble3-animation {
	animation: bubble3-animation 6s ease 0s infinite normal ;
}

#quote1, #quote2, #quote3, #quote4 {
	cursor: pointer;
}
.quote-animate {
	-webkit-animation: jump 1.4s ease 0s infinite normal ;
  animation: jump 1.4s ease 0s infinite normal ;
}
@media (min-width: 768px) {
    .hidden-after-768 {
        display: none !important;
    }
 }
@media only screen and (max-width: 767px) {
	#logo {
		position: fixed;
	}
    .hidden-before-767 {
        display: none !important;
    }
	.container-fluid {
	}
	
	#offer-pdf-link img {
		width: 70%;
		max-width: 330px;
	}
	#bubbles3 {
		position:absolute;
		background: url(../img/2bubbles.png) no-repeat;
		z-index: 5;
	}
	
	#page-instruction {
		position:absolute;
		background: url(../img/mobile/page-instruction.png) no-repeat;
		z-index: 4;
	}
	
	#mandarin-ingot-container {
		position: relative;
	}
	#shadow {
		width: 515px;
		height: 113px;
		content: " ";
		background: url(../img/home-bottom-shadow.png) no-repeat;
		background-size: auto;
		background-position: top center;
		position: absolute;
		position: fixed;
		z-index: 3;
		left: 50%;
		top: 80%;
		transform: translate(-50%, 0);
	}
	
	#hand-container.with-note:after {
		width: 90px;
		height: 40px;
		background-size: 100%;
		left: 95%;
		top: 35%;
	}
	
	#mandarin {
		z-index: 5;
	}

	#page3-title {
		top: 8em;
		left: 50% !important;
		width: 50%;
		right: 0%;
		position: fixed;
		transform: translate(-50%, 0);
	}
	#base-container {
		width: inherit;
	}
	.col-half {
		float:left;
	}
	img#hand {
		left: 33%;
	}
	.skew {
		transform: translateY(-1em);
	}
	#fade0 {
		background: url(../img/mobile/page1.png) no-repeat;
		background-position:top center;
		background-size: cover;
	}
	#page,#page2,#page3 {
	  background-size: cover !important;
	  background-position: top center !important;
	}
	#page2 {
		background: url(../img/mobile/page2.png) no-repeat;
		background-position:top center;
		background-size: cover;
	}
	#page3 {
		background: url(../img/mobile/page3.png) no-repeat;
		background-position:top center;
		background-size: cover;
	}
	.col-sm-3 {
		width:50%;
	}
	.img-play-animation {
		animation: img-play-animation 1s ease 0s infinite normal ;
	}		
	@keyframes img-play-animation {
		0%{
			background-image: url('../img/play-button.png');
		}
		50% {
			background-image: url('../img/play-button.png');
		}
		51% {
			background-image: url('../img/play-button-hover.png');
		}
		99% {
			background-image: url('../img/play-button-hover.png');
		}
		100%{
			background-image: url('../img/play-button.png');
		}
	}	
	.confirm-btn-animation {
		animation: confirm-btn-animation 2s ease 0s infinite normal ;
		cursor:pointer;
	}		
	@keyframes confirm-btn-animation {
		0%{
			background-image: url('../img/result-confirm.png');
		}
		50% {
			background-image: url('../img/result-confirm.png');
		}
		51% {
			background-image: url('../img/result-confirm-hover.png');
		}
		99% {
			background-image: url('../img/result-confirm-hover.png');
		}
		100%{
			background-image: url('../img/result-confirm.png');
		}
	}	
	
}

@keyframes fadeIn{
    0% { opacity:0; }
    66% { opacity:0; }
    100% { opacity:1; }
}

@-webkit-keyframes fadeIn{
    0% { opacity:0; }
    66% { opacity:0; }
    100% { opacity:1; }
}

@keyframes fadeOut{
    0% { opacity:1; }
    66% { opacity:1; }
    100% { opacity:0; }
}

@-webkit-keyframes fadeOut{
    0% { opacity:1; }
    66% { opacity:1; }
    100% { opacity:0; }
}
.fadeIn {
	-webkit-animation: 1s ease 0s normal forwards 1 fadeIn;
	animation: 1s ease 0s normal forwards 1 fadeIn;	
}


/* Modified */
#confirm_btn {
	background: url('../img/result-confirm.png') no-repeat; 	
}
#confirm_btn:hover {
	background: url('../img/result-confirm-hover.png') no-repeat; 
}

#offer-pdf-link {
    text-align: center;
    display: inline-block;
    position: fixed;
    left: 0%;
    right: 0%;
	cursor: pointer;
    z-index: 5;
}