@charset "utf-8";
/* CSS Document */
#game span {
  position: absolute
}
.countdown {
  text-align: center;
  font-size: 80px;
  position: absolute;
  width: 90%;
  z-index: 999;
  font-family: 'Bungee';
  color: #fafa00;
  top: 20%;
}
.door {
  display: none;
  background: url(../door.png) no-repeat center 5px;
  position: absolute;
  height: 45px;
  top: 294px;
  z-index: 8;
  background-size: 47px;
  overflow: hidden;
  width: 38px;
  left: 44%;
  border-radius: 47px;
  border-top-left-radius: 200%;
  border-top-right-radius: 200%;
}
.cur_level {
  border: #f4ff00 solid 4px;
  box-shadow:
    0 0 60px 30px #fff, /* inner white */ 0 0 100px 60px #f0f, /* middle magenta */ 0 0 140px 90px #0ff; /* outer cyan */
}
.door_open {
  animation: open_door 9s linear;
  z-index: 8;
  animation-iteration-count: 2;
}
@keyframes open_door {
  0% {
    background-position-y: 47px;
    z-index: 8.1;
  }
  10% {
    background-position-y: -37px;
    z-index: 8.1;
  }
  80% {
    background-position-y: -37px;
    z-index: 7;
  }
  90% {
    background-position-y: 47px;
    z-index: 7;
  }
}
.dropblocka {
    left: 30%;
    top: 53%;
    opacity: 1;
    position: absolute;
    z-index: 99;
      width: 80px;

   
     animation: bounceInDown 2s linear;  

}
.dropblock {
  position: absolute;
  width: 80px;
  left: 30%;
  top: -20%;
    z-index: 99;
  animation: dropblock 1.5s linear;
}
.dropblocka img, .dropblock img  {
  width: 100%;
}
@keyframes dropblock {
  0% {
    left: 30%;
    top: -20%;
  }
  75% {
    left: 30%;
    top: 53%;
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    left: 30%;
    top: 53%;
    opacity: 0;
  }
}
.coinholio {
  position: absolute;
  width: 50px;
  height: 50px;
  top: 30%;
  left: 20%;
}
.stars {
  position: absolute;
  opacity: 0;
}
.starwrap {
  position: absolute;
  height: 100%;
  width: 100%
}
.cur_level {
  border-color: yellow !important
}
.stars_a {
  animation: starburst_a 3s linear;
}
.stars_b {
  animation: starburst_b 3s linear;
}
.stars_c {
  animation: starburst_c 3s linear;
}
.starburnta {
  animation: starburnta 1s linear;
}
.starburntb {
  animation: starburntb 1s linear;
}
.starburntc {
  animation: starburntc 1s linear;
}
@keyframes starburst_b {
  0% {
    color: yellow;
    top: 45%;
    transform: scale(0.5);
    left: 50%;
    opacity: 0;
  }
  5% {
    opacity: 1;
  }
  70% {
    z-index: 9;
    opacity: 1;
  }
  100% {
    color: yellow;
    top: 74%;
    transform: scale(3.1);
    left: 97%;
    opacity: 0;
  }
}
@keyframes starburst_a {
  0% {
    color: yellow;
    top: 45%;
    transform: scale(0.5);
    left: 48%;
    opacity: 0;
  }
  5% {
    opacity: 1;
  }
  70% {
    opacity: 1;
    z-index: 9;
  }
  100% {
    color: yellow;
    top: 74%;
    transform: scale(3.1);
    left: 40%;
    opacity: 0;
  }
}
@keyframes starburst_c {
  0% {
    color: yellow;
    top: 45%;
    transform: scale(0.5);
    left: 46%;
    opacity: 0;
  }
  5% {
    opacity: 1;
  }
  70% {
    opacity: 1;
    z-index: 9;
  }
  100% {
    color: yellow;
    top: 74%;
    transform: scale(3.1);
    left: -25%;
    opacity: 0;
  }
}
@keyframes starburnta {
  0% {
    opacity: 1;
    color: yellow;
    top: 55%;
    transform: scale(2);
    left: 37%;
  }
  70% {
    opacity: 1;
  }
  100% {
    color: yellow;
    top: 0%;
    transform: scale(1);
    opacity: 0;
    left: 80%;
  }
}
@keyframes starburntc {
  0% {
    opacity: 1;
    color: yellow;
    top: 55%;
    transform: scale(2);
    left: 0%;
  }
  70% {
    opacity: 1;
  }
  100% {
    color: yellow;
    top: 0%;
    transform: scale(1);
    opacity: 0;
    left: 80%;
  }
}
@keyframes starburntb {
  0% {
    opacity: 1;
    color: yellow;
    top: 55%;
    transform: scale(2);
    left: 87%;
  }
  70% {
    opacity: 1;
  }
  100% {
    color: yellow;
    top: 0%;
    transform: scale(1);
    opacity: 0;
    left: 80%;
  }
}
@keyframes rotatehue {
  0% {
    opacity: 1;
    filter: hue-rotate(180deg);
    -webkit-transform: translateX(0);
    transform: translateX(0)
  }
  6% {
    -webkit-transform: translateX(-6px) rotateY(-9deg);
    transform: translateX(-6px) rotateY(-9deg)
  }
  18% {
    opacity: .5;
    filter: hue-rotate(80deg);
    -webkit-transform: translateX(5px) rotateY(7deg);
    transform: translateX(5px) rotateY(7deg)
  }
  31% {
    -webkit-transform: translateX(-3px) rotateY(-5deg);
    transform: translateX(-3px) rotateY(-5deg)
  }
  43% {
    -webkit-transform: translateX(2px) rotateY(3deg);
    transform: translateX(2px) rotateY(3deg)
  }
  50% {
    filter: hue-rotate(270deg);
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0)
  }
}
.huerotate {
  animation: rotatehue 1s linear;
}
.imgname {
  position: absolute;
  top: 0;
  left: 0;
  font-size: 13px;
  font-family: 'Arial';
  padding: 4px;
  background-color: yellow;
}
.container-menu {
  position: relative;
  margin: auto;
  height: 80%;
  margin-top: 10%;
  border-radius: 20px;
  top: 0;
}
.leves ul {
  margin: 0;
  padding: 0;
}
.leves ul li {
  list-style: none;
  display: inline-block;
  height: 65px;
  width: 65px;
  text-align: center;
  margin: 3px;
  border-radius: 20px;
  background: #5a4fff;
  border: #fff solid 4px;
}
.leves ul li a div i {
  display: inline-block;
  color: #ccc;
}
.leves ul li:first-child a div i {
  color: yellow
}
i.fas.fa-lock {
  position: absolute;
  color: #000000d4;
  margin-left: -19px;
  font-size: 40px;
  margin-top: -16px;
}
.leves li a {
  color: #ccc;
}
.leves li a strong {
  display: block;
  color: #fff;
  font-family: 'Bungee';
  font-size: 11px;
}
.leves li.loc {
  opacity: 0;
}
#game {
  height: 731px;
  position: relative;
  max-width: 410px;
  margin: auto;
  background: url(../ADO-bg.png) no-repeat center center;
  width: 100%;
  background-size: 201%;
  overflow: hidden;
  background-position: center 295px;
}
.items li img {
  animation-duration: 5s;
  -webkit-user-drag: none;
}
.items li {
  z-index: 9
}
#square {
  position: absolute;
  top: 70%;
}
#circle {
  position: absolute;
  top: 70%;
}
#triangle {
  position: absolute;
  top: 70%;
}
.p2 {
  left: 44%;
}
.p3 {
  left: 73%;
}
.p1 {
  left: 14%;
}
#wall {
  width: 10%;
  position: absolute;
  left: 45%;
  top: 44%;
  z-index: 7;
  opacity: 0;
}
#wallnew {
  width: 10%;
  position: absolute;
  left: 45%;
  top: 44%;
  z-index: 7;
  opacity: 0;
}
.starscore {
  color: #fff;
  position: absolute;
  font-family: 'Bungee', cursive;
  top: 55px;
  right: 7%;
  font-size: 20px;
}
.score {
  color: #fff;
  position: absolute;
  font-family: 'Bungee', cursive;
  top: 5px;
  left: 3%;
  font-size: 45px;
}
.score div {
  display: inline-block
}
#wall.wall-reset, #wallnew.wall-reset {
  width: 10% !important;
  position: absolute;
  left: 45% !important;
  opacity: 0
}
.placeholder {
  opacity: 0
}
#wall.wall-burst, #wallnew.wall-burst {
  width: 500%;
  position: absolute;
  left: -180%;
  top: 21%;
  opacity: 1;
  z-index: 9;
  /*
		   -webkit-transition:all 8s ease;
    -moz-transition:all 8s ease;
    -o-transition: all 8s ease;
    transition:all 8s ease;
    	*/
  -webkit-transition: all 9s ease-in-out;
  -moz-transition: all 9s ease-in-out;
  -o-transition: all 9s ease-in-out;
  transition: all 9s ease-in-out;
}
#wall.wall-burst-up, #wallnew.wall-burst-up {
  top: -40% !important;
}
#wall img, #wallnew img {
  width: 100%;
}
.logo {
  width: 50%;
  padding-top: 30px;
}
.st i {
  font-size: 40px;
  margin-bottom: 20px;
  display: inline-block;
  text-shadow: 1px 1px #cecece;
}
.wall-hit-area {
  position: absolute;
  width: 100%;
  top: 50%;
  xborder: yellow 2px dashed;
}
/*@keyframes hop{0%,20%,53%,to{
	-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);
	animation-timing-function:cubic-bezier(.215,.61,.355,1);
	-webkit-transform:translateZ(0);transform:translateZ(0)
		
	}60%{
	-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);
	animation-timing-function:cubic-bezier(.755,.05,.855,.06);
	-webkit-transform:translate3d(0,-230px,0) scaleY(1.1);
	transform:translate3d(0,-230px,0) scaleY(1.1)
		
 
	}80%{
		-webkit-transition-timing-function:cubic-bezier(.215,.61,.355,1);
		transition-timing-function:cubic-bezier(.215,.61,.355,1);
		-webkit-transform:translateZ(0) scaleY(.95);
		transform:translateZ(0) scaleY(.95)
			
	}90%{-webkit-transform:translate3d(0,-4px,0) scaleY(1.02);
		transform:translate3d(0,-4px,0) scaleY(1.02)}
}

*/
@keyframes pop {
  0% {
    transform: translate(0%, -50%) scale(1.25, 0.75);
  }
  50% {
    transform: translate(0%, -100%) scale(1, 1);
  }
  55% {
    transform: translate(0%, -100%) rotate(15deg);
  }
  60% {
    transform: translate(0%, -100%) rotate(-15deg);
  }
  65% {
    transform: translate(0%, -100%) rotate(15deg);
  }
  70% {
    transform: translate(0%, -100%) rotate(-15deg);
  }
  100% {
    transform: translate(0%, -50%) scale(1.25, 0.75);
  }
}
.hop {
  animation: pop .7s linear;
}
.items.arcade li img {
  user-select: none;
  cursor: auto
}
.items.arcade li {
  max-width: 50%;
  display: block;
  margin: auto;
  text-align: center !important;
  visibility: visible !important;
  height: 100px;
  cursor: auto;
}
.arcadeL {
  -webkit-transform: translate3d(-100%, 0, 0);
  transform: translate3d(-100%, 0, 0);
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.arcadeM {
  -webkit-transform: translate3d(0%, 0, 0);
  transform: translate3d(0%, 0, 0);
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.arcadeR {
  -webkit-transform: translate3d(100%, 0, 0);
  transform: translate3d(100%, 0, 0);
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.st {
  position: absolute;
  width: 100%;
  text-align: center;
}
@keyframes hop {
  0% {
    -webkit-transform: translate3d(0, 0%, 0);
    transform: translate3d(0, 0%, 0);
  }
  40% {
    -webkit-transform: translate3d(0, -150%, 0);
    transform: translate3d(0, -150%, 0);
  }
  70% {
    -webkit-transform: translate3d(0, -200%, 0);
    transform: translate3d(0, -200%, 0);
  }
  90% {
    -webkit-transform: translate3d(0, 0%, 0);
    transform: translate3d(0, 0%, 0);
  }
  91% {
    transition-timing-function: cubic-bezier(.215, .61, .355, 1);
    -webkit-transform: translateZ(0) scaleY(.95);
    transform: translateZ(0) scaleY(.95)
  }
  92% {
    -webkit-transform: translate3d(0, -4px, 0) scaleY(1.02);
    transform: translate3d(0, -4px, 0) scaleY(1.02)
  }
}
.arcadeU {
  animation: hop 800ms linear;
}
.items li {
  /*	   -webkit-transition:all .5s cubic-bezier(0.1, 0.92, 0.35, 1.01);
    -moz-transition:all .5s cubic-bezier(0.1, 0.92, 0.35, 1.01);
    -o-transition: all .5s cubic-bezier(0.1, 0.92, 0.35, 1.01);
    transition:all .5s cubic-bezier(0.1, 0.92, 0.35, 1.01);*/
}
@keyframes flickerAnimation {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
}
@-o-keyframes flickerAnimation {
  0% {
    opacity: 0.8;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    opacity: 0.3;
  }
}
@-moz-keyframes flickerAnimation {
  0% {
    opacity: 0.8;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    opacity: 0.3;
  }
}
@-webkit-keyframes flickerAnimation {
  0% {
    opacity: 0.8;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    opacity: 0.3;
  }
}
.animate-flicker {
  -webkit-animation: flickerAnimation 1s infinite;
  -moz-animation: flickerAnimation 1s infinite;
  -o-animation: flickerAnimation 1s infinite;
  animation: flickerAnimation 2s infinite;
}
#newwall .wall {
  width: 100%
}
#newwall {
  opacity: 0;
  left: 45%;
  top: 44%;
  z-index: 7;
  opacity: 0;
  animation: newwall 13s linear;
  position: absolute;
}
@-webkit-keyframes newwall {
  0% {
    width: 10%;
    left: 45%;
    top: 44%;
    z-index: 7;
    opacity: 0;
  }
  5% {
    opacity: 1
  }
  35% {
    opacity: 1;
  }
  40% {
    opacity: 0;
  }
  100% {
  width: 500%;
  left: -180%;
  top: 21%;
    opacity: 0;
  }
}


.bouncer{  animation: up-down 100ms infinite alternate;
}






@keyframes up-down {
  from {
    transform: translateY(-45px);
  }
  to {
    transform: translateY(0);
  }
}