html{
    min-height: 100%;
}

body{
    overflow:hidden;
    -khtml-user-select: none;
    -o-user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    user-select: none;
    background:#FFFFFF;
    /*background:#FFFFFF;*/
}

.hide{
    display: none;
}
#final{
    position: fixed;
    left:0px;
    right:0px;
    top:0px;
    bottom:0px;
    z-index: 100;
    background: black;
}
#canvas{
    position: fixed;
    left:0px;
    right:0px;
    top:0px;
    bottom:0px;
    z-index: 2;
}
#button{
    max-width:300px;
    position: absolute;
    left:0px;
    right:0px;
    top:0px;
    bottom:0px;
    margin: auto;
    height:230px;
    z-index: 99;
}
#button:focus{
    outline: none;
}
#button img{
    width: 100%;
    pointer-events: none;
}

#prgoress_bar{
    width:96%;
    margin:2%;
    height:50px;
    border:solid 3px #000;
    position: fixed;
    bottom:0px;
    border-radius: 24px;
}
#progress{
    height:44px;
    border-radius: 24px;
    background-color: #000000;
    width:0%;
    -webkit-transition: all 1s ease-out;
    -moz-transition: all 1s ease-out;
    -o-transition: all 1s ease-out;
    transition: all 1s ease-out;
}

#connected_ppl{
    /*width:50px;
    height:50px;
    border-radius: 24px;
    border:solid 3px #000;*/
    position: fixed;
    top:0px;
    text-align: right;
    margin:2%;
    right:0px;
}

.c1{
    width:50px;
    height:50px;
    position: absolute;
    /*left:25px;
    top:25px;*/
    background-image:url('../gameimages/1.png');
    background-size: contain;
}
.flipimg{
    -moz-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
    filter: FlipH;
    -ms-filter: "FlipH";
}
#u1 {
  bottom: 100px;
  right: 100px;
  width: 72px;
  height: 67px;
}
#u2 {
  top: 176px;
  left: 219px;
  width: 115px;
  height: 108px;
}
#u3 {
  top: 105px;
  right: 173px;
  width: 79px;
  height: 72px;
}
#u4 {
  top: 577px;
  left: 54px;
  width: 91px;
  height: 91px;
}
#u6 {
  top: 289px;
  right: -65px;
  width: 300px;
  height: 300px;
}
#u7 {
  top: 352px;
  left: 122px;
  width: 260px;
  height: 260px;
}
#u8 {
bottom: 131px;
right: 146px;
  width: 320px;
  height: 320px;
}
#u9 {
  top: 461px;
  left: 314px;
  width: 500px;
  height: 500px;
}

#u16{
    position: absolute;
    left: 30px;
    top: 120px;
    transform: rotate(-13deg);
}
#u17{
    right: 140px;
    top: 120px;
    transform: rotate(37deg);
    position: absolute;
}


#u21{
    position: absolute;
    bottom: -10px;
    left: 20%;
    width: 160px;
}
#u22{
    position: absolute;
    bottom: -10px;
    right: 20%;
    width: 160px;
}
#u23{
    position: absolute;
    left: 370px;
    top: 140px;
}
#u24{
    position: absolute;
    right: 0px;
    top: 190px;
    width: 300px;
}
#u25{
    position: absolute;
    right: 370px;
    top: 140px;
    width:270px;
}
#u26{
    position: absolute;
    top: 75px;
    left: 0px;
    right: 0;
    margin: auto;
    width: 260px;
}

.balloons2{
    position: absolute;
    top:0px;
    width: 160px;
}
#u28{
    right: 110px;
    animation:balloons 1.5s ease-in-out infinite;
}
#u29{
    right: 480px;
    animation:balloons 2s ease-in-out infinite;
}
#u30{
    left: 110px;
    animation:balloons 1.8s ease-in-out infinite;
}
#u31{
    left: 480px;
    animation:balloons 2.5s ease-in-out infinite;
}

.emoji{
    position: absolute;
    width:100px;
}
#u32{
    bottom: 6px;
    left: 0%;
}
#u33{
    bottom: 6px;
    left: 10%;
}
#u34{
    bottom: 6px;
    left: 40%;
}
#u35{
    bottom: 6px;
    left: 50%;
}
#u36{
    bottom: 6px;
    left: 60%;
}
#u37{
    bottom: 6px;
    left: 85%;
}



#bgs{
    z-index: 0;
}
.bg{
    position: fixed;
    left:0px;
    right:0px;
    top:0px;
    bottom:0px;
}
#bg_1{
    background-image:url('../gameimages/bg2.png');
}
#bg_2{
    background-image:url('../gameimages/bg1.png');
}
#bg_3{
    background-image:url('../gameimages/bg3.png');
}
.spin_10s{
    animation:spin 10s linear infinite;
}
.spin_5s{
    animation:spin 5s linear infinite;
}
.spin_3s{
    animation:spin 3s linear infinite;
}

@keyframes spin{
	from{transform:rotate(0deg)}
	to{transform:rotate(360deg)}
}


.assistive-text{
    position: absolute!important;
    margin: -1px!important;
    border: 0!important;
    padding: 0!important;
    width: 1px!important;
    height: 1px!important;
    overflow: hidden!important;
    clip: rect(0 0 0 0)!important;
    text-transform: none!important;
    white-space: nowrap!important;
}

/*BALLOONS*/
body {text-align:center; }

.balloon {
  display:inline-block;
   width:120px;
  height:145px;
  background:hsl(215,50%,65%);
  border-radius:80%;
  position:relative;
  box-shadow:inset -10px -10px 0 rgba(0,0,0,0.07);
  margin:20px 30px;
  transition:transform 0.5s ease;
  z-index:10;
  animation:balloons 4s ease-in-out infinite;
  transform-origin:bottom center;
}

@keyframes balloons {
  0%,100%{ transform:translateY(0) rotate(-4deg); }
  50%{ transform:translateY(-25px) rotate(4deg); }
}


.balloon:before {
  content:"▲";
  font-size:20px;
  color:hsl(215,30%,50%);
  display:block;
  text-align:center;
  width:100%;
  position:absolute;
  bottom:-12px;
  z-index:-100;
}

.balloon:after {
 display:inline-block; top:153px;
  position:absolute;
  height:250px;
  width:1px;
  margin:0 auto;
  content:"";
  background:rgba(0,0,0,0.2);
}

.balloon:nth-child(2){ background:hsl(245,40%,65%); animation-duration:3.5s; }
.balloon:nth-child(2):before { color:hsl(245,40%,65%);  }

.balloon:nth-child(3){ background:hsl(139,50%,60%); animation-duration:3s; }
.balloon:nth-child(3):before { color:hsl(139,30%,50%);  }

.balloon:nth-child(4){ background:hsl(59,50%,58%); animation-duration:4.5s; }
.balloon:nth-child(4):before { color:hsl(59,30%,52%);  }

.balloon:nth-child(5){ background:hsl(23,55%,57%); animation-duration:5s; }
.balloon:nth-child(5):before { color:hsl(23,44%,46%);  }




.u{
    /*display: none;*/
    opacity:0;
}