.scorePopup{
    color: yellow;
    font-size: 1.3em;
    width: 45px;
    height: 25px;
    position: absolute;
    z-index:1000;
    top: 0;
    left: 20px;
    opacity: 0;
    -webkit-animation: scoreAnimation 1s 1 ease-out;
}

@-webkit-keyframes scoreAnimation{
    from {
        -webkit-transform: translateY(0px);
        opacity: 1;
    }
    to {
        -webkit-transform: translateY(-50px);
        opacity: 0;
    }
}


/*------------------OBJECTS POSITIONS--------------------*/

#burger {
    position: absolute;
    left: 384px;
    top:279px;
    width: 39px;
    height: 33px;
    
}
#chair {
    position: absolute;
    left: 212px;
    top:136px;
    width:33px;
    height: 35px;
    
}
#firebrigade {
    position: absolute;
    left: 47px;
    top:122px;
    width: 103px;
    height: 67px;
    
}
#handpump {
    position: absolute;
    left: 32px;
    top:296px;
    width: 38px;
    height: 50px;
    
}
#helicoptor {
    position: absolute;
    left: 315px;
    top:486px;
    width: 46px;
    height: 37px;
    
}
#orangecar {
    position: absolute;
    left: 224px;
    top:286px;
    width: 81px;
    height: 43px;
    
}
#policecar {
    position: absolute;
    left: 656px;
    top:425px;
    width: 93px;
    height: 49px;
    
}
#rock {
    position: absolute;
    left: 851px;
    top:316px;
    width: 30px;
    height: 38px;
    
}
#scooty {
    position: absolute;
    left: 4px;
    top:185px;
    width: 66px;
    height: 46px;
    
}
#coins {
    position: absolute;
    left: 833px;
    top:423px;
    width: 22px;
    height: 22px;
    
}



/*------------------END OF OBJECTS POSITIONS--------------------*/

/*-----------------Level 2 objects------------------------------*/
#balloon {
    position: absolute;
    left: 408px;
    top:298px;
    width: 19px;
    height: 26px;
    
}
#bell {
    position: absolute;
    left: 508px;
    top:389px;
    width:37px;
    height: 37px;
    
}
#bluegift {
    position: absolute;
    left: 578px;
    top:267px;
    width: 30px;
    height: 31px;
    
}
#campfire {
    position: absolute;
    left: 609px;
    top:476px;
    width: 28px;
    height: 40px;
    
}
#xtree1 {
    position: absolute;
    left: 34px;
    top:44px;
    width: 55px;
    height: 77px;
    
}
#football {
    position: absolute;
    left: 277px;
    top:399px;
    width: 31px;
    height: 31px;
    
}
#icecollector {
    position: absolute;
    left: 685px;
    top:368px;
    width: 152px;
    height: 111px;
    
}
#santa {
    position: absolute;
    left: 56px;
    top:481px;
    width: 39px;
    height: 48px;
    
}
#santacap {
    position: absolute;
    left: 118px;
    top:402px;
    width: 24px;
    height: 24px;
    
}
#snowman {
    position: absolute;
    left: 271px;
    top:325px;
    width: 32px;
    height: 50px;
    
}
#socks {
    position: absolute;
    left: 608px;
    top:386px;
    width: 22px;
    height: 34px;
    
}
#teddy {
    position: absolute;
    left: 917px;
    top:461px;
    width: 40px;
    height: 39px;
    
}

/*-----------------END of Level 2 objects------------------------------*/




/*----------------- Level 3 objects------------------------------*/

#banana {
    position: absolute;
    left: 354px;
    top:264px;
    width: 29px;
    height: 29px;
    
}
#baseballbat {
    position: absolute;
    left: 645px;
    top:451px;
    width:73px;
    height: 41px;
    
}
#basketball {
    position: absolute;
    left: 22px;
    top:354px;
    width: 25px;
    height: 24px;
    
}
#bike {
    position: absolute;
    left: 64px;
    top:110px;
    width: 52px;
    height: 42px;
    
}
#cow {
    position: absolute;
    left: 504px;
    top:140px;
    width: 45px;
    height: 43px;
    
}
#flag {
    position: absolute;
    left: 504px;
    top:461px;
    width: 30px;
    height: 35px;
    
}
#ice {
    position: absolute;
    left: 177px;
    top:400px;
    width: 28px;
    height: 19px;
    
}
#orange {
    position: absolute;
    left: 439px;
    top:372px;
    width: 21px;
    height: 22px;
    
}
#quadbike {
    position: absolute;
    left: 627px;
    top:380px;
    width: 65px;
    height: 59px;
    
}
#redbird {
    position: absolute;
    left: 639px;
    top:165px;
    width: 25px;
    height: 24px;
    
}
#statue {
    position: absolute;
    left: 257px;
    top:316px;
    width: 51px;
    height: 50px;
    
}
#toycat {
    position: absolute;
    left: 752px;
    top:387px;
    width: 39px;
    height: 37px;
    
}
#toymonkey {
    position: absolute;
    left: 178px;
    top:150px;
    width: 33px;
    height: 32px;
    
}
#toyrabbit {
    position: absolute;
    left: 102px;
    top:310px;
    width: 28px;
    height: 27px;
    
}
#umbrella {
    position: absolute;
    left: 290px;
    top:374px;
    width: 42px;
    height: 35px;
    
}

/*-----------------END of Level 3 objects------------------------------*/


/*-----------------Level CompleteScreen------------------------------------*/

#imgGroup {
    position: absolute;
    left: 130px;
    top:240px;
    width: 266px;
    height: 200px;
}

img#emptyImg1 {
    position: absolute;
    left: 0px;
    top:0px;
    width: 266px;
    height: 200px;
}
#imgGroup1 {
    position: absolute;
    left: 596px;
    top:240px;
    width: 266px;
    height: 200px;
}
img#emptyImg2 {
    position: absolute;
    left: 0px;
    top:0px;
    width: 266px;
    height: 200px;
}
div#text {
    position: absolute;
    left: 0px;
    top: 43px;
    width: 269px;
    height: 30px;
    font-size: 0.8em;
    font-weight: bold;
    color: white;
}
div#completeScore {
    position: absolute;
    left: 0px;
    top: 119px;
    width: 200px;
    height: 30px;
    font-size: 0.8em;
    font-weight: bold;
    color: white;
}
img#emptyImgUnlock {
    position: absolute;
    left: 15px;
    top:110px;
    width: 85px;
    height: 77px;
}
img#emptyImgLock {
    position: absolute;
    left: 15px;
    top:110px;
    width: 61px;
    height: 75px;
}
img#nextLevel {
    position: absolute;
    left: 392px;
    top:473px;
    width: 203px;
    height: 64px;
}
img#retry {
    position: absolute;
    left: 392px;
    top:473px;
    width: 203px;
    height: 64px;
}



/*-----------------End of Level CompleteScreen------------------------------*/


.title {
    position: absolute;
    top:135px;
    left:517px;
    width: 361px;
    height: 214px;
}

.girl {
    position: absolute;
    top:0px;
    left:10px;
    width: 458px;
    height: 540px;
}
.playButton {
    position: absolute;
    top:405px;
    left:508px;
    width: 170px;
    height: 64px;
}
.instructionButton {
    position: absolute;
    top:405px;
    left:725px;
    width: 190px;
    height: 64px;
}
.playText {
    position: absolute;
    top:405px;
    left:508px;
    width: 170px;
    height: 64px;
    font-size: 1em;
    font-weight: bold;
    color: white;
    padding-top: 14px;
    cursor: pointer;
}
.instructionsText {
    position: absolute;
    top:405px;
    left:733px;
    width: 170px;
    height: 64px;
    font-size: 1em;
    font-weight: bold;
    color: white;
    padding-top: 14px;
    cursor: pointer;
}
.instrGirl {
    position: absolute;
    left:653px;
    top:104px;
    width: 301px;
    height: 346px;
}
.instrBox {
    position: absolute;
    left:130px;
    top:165px;
    width: 472px;
    height: 262px;
}
img.instrTitle {
    position: absolute;
    left:185px;
    top:30px;
    width: 580px;
    height: 128px;
}
img.instrPlay {
    position: absolute;
    left:17px;
    top:467px;
    width: 170px;
    height: 64px;
}
img.instrBack {
    position: absolute;
    left:777px;
    top:470px;
    width: 170px;
    height: 64px;
}
img.instr {
    position: absolute;
    left:340px;
    top:120px;
    width: 268px;
    height: 59px;
}
img.slideShow {
    position: absolute;
    left:208px;
    top:175px;
    width: 544px;
    height: 353px;
}

.instrPlayText {
    position: absolute;
	left: 160px;
	top: 453px;
	width: 170px;
	height: 42px;
	font-size: 1em;
	font-weight: bold;
	color: white;
	cursor: pointer;
}
.instrBackText {
    position: absolute;
	left: 340px;
	top: 454px;
	width: 170px;
	height: 42px;
	font-size: 1em;
	font-weight: bold;
	color: white;
	cursor: pointer;
}
.instrText {
    left:141px;
    top:174px;
    width: 384px;
    height: 236px;
    font-size: 1.5em;
    font-weight: bold;
    color: white;
}


img.mainmenu {
    position: absolute;
    left:30px;
    top:300px;
    width: 170px;
    height: 64px;
}
img.playagain {
    position: absolute;
    left:760px;
    top:300px;
    width: 170px;
    height: 64px;
}
img.finalbox {
    position: absolute;
    left:215px;
    top:160px;
    width: 531px;
    height: 360px;
}
img.email {
    position: absolute;
    left:630px;
    top:400px;
    width: 100px;
    height: 100px;
}
img.fireworks {
    position: absolute;
    left:0px;
    top:0px;
    width: 960px;
    height: 640px;
}









*{
    margin: 0;
    padding: 0;
    list-style: none;
    outline: none;
    -webkit-user-select: none;
}

body{
    color: white;
    font-family: arial;
    font-size: 1.8em;
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
    -webkit-user-select: none;
    
}

 
#wrapper{
    text-align: center;
}

@media screen and (min-width:650px){
    #zoomin,#zoomout{
        display: none;
    }
}

.object{
    position: absolute;
    -webkit-transition: -webkit-transform 0.5s, opacity 0.5s;
}

.object.found{
    opacity: 0;
    -webkit-transform: scale(3);
    z-index: 10px;
}

div#finalScore {
    position: absolute;
    left: 487px;
    top: 439px;
    width: 200px;
    height: 30px;
    font-size: 1em;
    font-weight: bold;
    color: white;
}
div#finalScoreText {
    position: absolute;
    left: 464px;
    top: 379px;
    width: 240px;
    height: 30px;
    font-size: 0.8em;
    font-weight: bold;
    color: white;
}







.screen{
    position: relative;
    width: 960px;
    height: 640px;
    top: 0;
    left: 0;
    margin: 0;
}

.reference{
    background: url(assets/ingame_reference.png) no-repeat;
    width: 100%;
    height: 100%;
    opacity: .3;
    position: absolute;
}

img.background{
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    width: 960px;
    height: 640px;
}

#noPortrait{
    z-index: 5000;
    background: white;
    text-align: center;
    color: black;
    font-size: 1.6em;
    vertical-align: middle;
}

#noPortrait img{
    width: 320px;
    height: 430px;
}

button{
    font-size: 1em;
    width: 270px;
    height: 80px;
    color: #502C16;
    background-image: -webkit-gradient(
        linear,
        left top,
        right top,
        color-stop(0.11, #CDB473),
        color-stop(0.56, #D1CAC3)
    );
    border: 2px solid #F8D050;
    -webkit-border-radius: 10px;
    font-weight: bold;
    opacity: 0.95;
    cursor: pointer;
    -webkit-box-shadow: 2px 2px 5px black;
}

.play{
    position: absolute;
    top: 265px;
    left: 40px;
}

.instructions{
    position: absolute;
    top: 365px;
    left: 40px;
}

/*#instructionScreen .background, 
#storyScreen .background,
#levelCompleteScreen .background,
#levelLoseScreen .background,
#scorecardScreen .background{
    opacity: 0.3;
}*/

#instructionScreen .infobg{
    position: absolute;
    top: 0;
    left: 120px;
    width: 655px;
    height: 463px;
}

.info{
    position: absolute;
	top: 189px;
	left: 134px;
	width: 400px;
	text-align: center;
}

h2{
    font-size: 1em;
    color: #FFCC32;
    text-shadow: 0 0 2px red;
}

p{
    font-size: 0.7em;
    margin: 5px 0;
}

h3{
    font-size: 0.8em;
    color: #FFCC32;
    text-shadow: 0 0 2px red;
}

#instructionScreen .back{
    position: absolute;
    top: 455px;
    left: 190px;
}

#instructionScreen .play{
    position: absolute;
    top: 455px;
    left: 470px;
}

.storybg{
    position: absolute;
    top: 0;
    left: 75px;
    width: 762px;
    height: 512px;
}

.storyText{
    position: absolute;
    top: 260px;
    left: 350px;
    width: 380px;
}

#storyScreen .play{
    position: absolute;
    top: 450px;
    left: 380px;
}
#storyScreen .playText{
    position: absolute;
    top: 450px;
    left: 380px;
    width: 170px;
	height: 42px;
	font-size: 1em;
	font-weight: bold;
	color: white;
	cursor: pointer;
}

#hudBg{
    position: absolute;
    top: 391px;
    left: 0;
    width: 960px;
    height: 149px;
}

#coconutLeaf{
    position: absolute;
    left: 800px;
    top: -12px;
    width: 94px;
    height: 118px;
}

#treasureBox{
    position: absolute;
    left: 544px;
    top: 276px;
    width: 169px;
    height: 140px;
}

#fence{
    position: absolute;
    left: 242px;
    top: 158px;
    width: 180px;
    height: 177px;
}

#grass{
    position: absolute;
    left: 908px;
    top: 304px;
    width: 28px;
    height: 41px;
}



#chain{
    position: absolute;
    left: 434px;
    top: 426px;
    width: 99px;
    height: 38px;
}



#clock{
    position: absolute;
    top: 426px;
    left: 843px;
}

.commonBox{
    width: 256px;
    position: absolute;
    top: 0;
    left: 210px;
    width: 513px;
    height: 470px;
}

.winFace, .loseFace{
    width: 93px;
    position: absolute;
    top: 0;
    left: 179px;
    width: 187px;
    height: 180px;
}

.nextLevelText, .tryAgainText, .scorecardText{
    position: absolute;
    left: 380px;
    top: 130px;
    width: 200px;
}

#nextLevel, #playAgain{
    position: absolute;
    left: 340px;
    top: 290px;
}

#hint{
    position: absolute;
    top: 5px;
    left: 90px;
    padding: 0;
    width: 200px;
}

.hintCircle{
    position: absolute;
    -webkit-transition: -webkit-transform 2s linear;
    width: 97px;
    height: 97px;
}

.rotate{
    -webkit-transform: rotate(720deg);
}

#quit{
    position: absolute;
    left: 350px;
    top: 320px;
}

#zoomin{
    position: absolute;
    top: 0;
    left: 10px;
    width: 67px;
    height: 67px;
}

#zoomout{
    position: absolute;
    top: 0;
    left: 80px;
    width: 67px;
    height: 67px;
}

#loader{
    width: 480px;
    height: 270px;
    color: black;
    font-size: 26px;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

.scorecardText table{
    height: 60px;
}

.screen{
    opacity: 0;
}

.screen.animated{
    opacity: 1;
}


.wholeHud {
    position: absolute;
    left: 605px;
    top:  0px;
/*   -webkit-animation: pumping 0.75s infinite;*/
    
}
.slideIn {
    -wekit-transform:translateY(0);
}

.heart{
    -webkit-animation: pumping 1s infinite ;
}

@-webkit-keyframes pumping{
    0% {-webkit-transform: scale(1);}
/*    45% {-webkit-transform: scale(0.5);}*/
    50% {-webkit-transform: scale(1.3);}
/*    90% {-webkit-transform: scale(1.7);}*/
    100% {-webkit-transform: scale(1);}
}
.hud {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 354px;
    height: 130px;
}
.money {
    position: absolute;
    left: 20px;
    top: 52px;
}
.timer {
    position: absolute;
    left: 265px;
    top: 50px;
     -webkit-border-radius:1em 2em 1em 2em;
}
.hudl11 {
    position: absolute;
    left: 153px;
    top: 21px;
    z-index: 5;
     -webkit-animation: loaderAnimation1 1s infinite alternate linear;
}
@-webkit-keyframes loaderAnimation{
    from {box-shadow: 0 0 0 black}
    to {box-shadow: 0 0 20px red}
}


.levelTitle {
    position: absolute;
    left: 205px;
    top: 78px;
    width: 580px;
    height: 128px;
}
.level1 {
    position: absolute;
    left: 45px;
    top: 261px;
    width: 266px;
    height: 200px;
}
.level2 {
    position: absolute;
    left: 350px;
    top: 261px;
    width: 266px;
    height: 200px;
}
.level3 {
    position: absolute;
    left: 650px;
    top: 261px;
    width: 266px;
    height: 200px;
}
.level1Lock {
    position: absolute;
    left: 14px;
    top: 110px;
    width: 85px;
    height: 77px;
    z-index: 1;
}
.level2Lock {
    position: absolute;
    left: 14px;
    top: 110px;
    width: 61px;
    height: 75px;
    z-index: 1;
}
.level3Lock {
    position: absolute;
    left: 14px;
    top: 110px;
    width: 61px;
    height: 75px;
    z-index: 1;
}
img.level1Screen {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 266px;
    height: 200px;
    
}
img.level2Screen {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 266px;
    height: 200px;
}
img.level3Screen {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 266px;
    height: 200px;
}
.textButton{
    -webkit-transition: -webkit-transform 0.4s;
}

.grow{
    -webkit-transform: scale(1.3);
    
    
}

.scaleUp {
    -webkit-animation:up 1s linear ease-in;
}
@-webkit-keyframes up {
    from {
        -webkit-transform: scale(1.5);
        opacity: 0;
    }
    85% {
        -webkit-transform: scale(1.8);
        opacity: 1;
    }
    to {
        -webkit-transform: scale(2.5);
    }
}



.score {
   top: 145px;
left: 413px;
position: absolute;
}
.replayButton {
    position: absolute;
top: 215px;
left: 398px;
width: 170px;
height: 64px;
}
.replayText {
   position: absolute;
top: 229px;
left: 394px;
width: 170px;
height: 64px;
}
.scoreButton {
   top: 134px;
left: 398px;
position: absolute;
}
.retryButton {
      position: absolute;
top: 215px;
left: 398px;
width: 170px;
height: 64px;
}
.retryText {
    position: absolute;
top: 229px;
left: 394px;
width: 170px;
height: 64px;
}

.flashingRed {
    -webkit-animation:flashingRedAnimation 1s linear infinite;
}
@-webkit-keyframes flashingRedAnimation {
    0% { background-color:transparent;}
    49.99% { background-color:transparent;}
    50% { background-color:red;}
    100% { background-color:red;}
}