* {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding: 0;
  margin: 0;
}

html, body {
  width: 100%;
}

img {
  width: 100%;
  display: block;
}

.block-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
}

.app {
  font-family: 'Marvin';
  background-image: url(../image/bg.jpg);
  background-size: cover;
  background-position: left bottom;
  background-repeat: no-repeat;
  width: 100%;
  font-weight: bolder;
  height: 100vh;
  overflow: hidden;
  display: block;
  position: relative;
}

.app-bg {
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
}

.cvs {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 1;
}

.cvs canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.cvs-off {
  opacity: 0;
}

.girl {
  position: absolute;
  width: 23.3%;
  top: 40%;
  opacity: 1;
  left: 27.5%;
  opacity: 0;
}

.girl-on {
  opacity: 1;
}

.gtoys {
  position: absolute;
  top: 45%;
  left: 29.5%;
  width: 20%;
  opacity: 0;
}

.gtoy1 {
  top: 45%;
  left: 29.3%;
}

.gtoy2 {
  top: 43%;
  left: 29.3%;
}

.gtoy3 {
  top: 45%;
  left: 29.5%;
}

.gtoy-on {
  opacity: 1;
}

.logo {
  position: absolute;
  width: 20%;
  left: 1%;
  top: 0%;
  -webkit-transform: scale(0);
          transform: scale(0);
  -webkit-animation: fadein 1s ease;
          animation: fadein 1s ease;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  z-index: 3;
}

.notice {
  position: absolute;
  top: 30%;
  left: 0%;
  width: 25%;
  -webkit-transform: scale(0);
          transform: scale(0);
  -webkit-animation: fadein 1s ease;
          animation: fadein 1s ease;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-delay: .5s;
          animation-delay: .5s;
  z-index: 2;
}

.progress {
  position: absolute;
  top: 85%;
  left: 15%;
  width: 70%;
  -webkit-transition: all ease 1s;
  transition: all ease 1s;
}

.progress .block-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
}

.progress .block-wrapper .progressbox {
  position: absolute;
  top: 10%;
  left: 0.8%;
  width: 98.6%;
  width: 10%;
  height: 80%;
  background: #689d02;
  background: -webkit-gradient(linear, left bottom, left top, from(#689d02), to(#87bc08));
  background: linear-gradient(0deg, #689d02 0%, #87bc08 100%);
  border-style: solid;
  border-width: 3px;
  border-top-color: #bddb76;
  border-bottom-color: #476c01;
  border-left-color: #66940b;
  border-right-color: #66940b;
  border-radius: 8px;
  -webkit-transition: all ease .2s;
  transition: all ease .2s;
}

.progress .block-wrapper .money {
  position: absolute;
  width: 14%;
  left: -4%;
  top: -30%;
}

.progress-off {
  -webkit-transform: translateY(10%);
          transform: translateY(10%);
  opacity: 0;
}

.mouse {
  position: absolute;
  width: 15%;
  left: 5%;
  top: 62%;
  -webkit-transition: all ease 1s;
  transition: all ease 1s;
  animation: mouse 2s ease-in-out infinite;
}

.mouse img {
  position:absolute; 
  width:100%; 
  left:0; 
  right:0;  
  animation-duration: 4s;
  animation-iteration-count: infinite;
}

.mouse img {
  transition: opacity 1s ease-in-out;
}


.mouse img.on {
  animation-name: FadeInOut;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-duration: 1s;
  animation-direction: alternate;
}

@keyframes FadeInOut {
  0% {
    opacity:1;
  }
  45% {
    opacity:1;
  }
  55% {
    opacity:0;
  }
  100% {
    opacity:0;
  }
}

@-webkit-keyframes mouse {
  from {
    -webkit-transform: translateX(0%);
            transform: translateX(0%);
  }
  50% {
    -webkit-transform: translateX(10%);
            transform: translateX(10%);
  }
  to {
    -webkit-transform: translateX(0%);
            transform: translateX(0%);
  }
}

@keyframes mouse {
  from {
    -webkit-transform: translateX(0%);
            transform: translateX(0%);
  }
  50% {
    -webkit-transform: translateX(10%);
            transform: translateX(10%);
  }
  to {
    -webkit-transform: translateX(0%);
            transform: translateX(0%);
  }
}

.weapon {
  position: absolute;
  bottom: -3%;
  right: 5%;
  width: 50%;
  -webkit-transition: all ease-out 1s;
  transition: all ease-out 1s;
}

.weapon img:last-child {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}

.weapon-left {
  -webkit-transform: translateX(-5%) rotate(-3deg);
          transform: translateX(-5%) rotate(-3deg);
}

.weapon-right {
  -webkit-transform: translateX(13%) rotate(3deg);
          transform: translateX(13%) rotate(3deg);
}

.weapon-after img {
  opacity: 0;
}

.weapon-after img:last-child {
  opacity: 1;
}

.targets {
  position: absolute;
  top: 0;
  right: 0;
  width: 18%;
  -webkit-transform: translateY(-100%);
          transform: translateY(-100%);
  -webkit-transition: all ease-out 0.7s;
  transition: all ease-out 0.7s;
}

.targets img {
  -webkit-transform-origin: 50% 0;
          transform-origin: 50% 0;
}

.targets img:last-child {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}

.target1 {
  right: 0;
  top: -10%;
}

.target1 img {
  -webkit-animation: targets 5s ease-in-out;
          animation: targets 5s ease-in-out;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
}

.target2 {
  right: 15%;
  top: -27%;
}

.target2 img {
  -webkit-animation: targets 6s ease-in-out;
          animation: targets 6s ease-in-out;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
}

.target3 {
  right: 33%;
  top: -20%;
}

.target3 img {
  -webkit-animation: targets 3s ease-in-out;
          animation: targets 3s ease-in-out;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
}

.target-on {
  -webkit-transform: translateY(0%);
          transform: translateY(0%);
}

.target-shoot img:last-child {
  opacity: 1;
}

.target-off {
  -webkit-transform: translateY(30%);
          transform: translateY(30%);
  opacity: 0;
}

@-webkit-keyframes targetshow {
  from {
    -webkit-transform: translateY(-100%);
            transform: translateY(-100%);
  }
  to {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}

@keyframes targetshow {
  from {
    -webkit-transform: translateY(-100%);
            transform: translateY(-100%);
  }
  to {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}

@-webkit-keyframes targets {
  from {
    -webkit-transform: rotate(-3deg);
            transform: rotate(-3deg);
  }
  50% {
    -webkit-transform: rotate(3deg);
            transform: rotate(3deg);
  }
  to {
    -webkit-transform: rotate(-3deg);
            transform: rotate(-3deg);
  }
}

@keyframes targets {
  from {
    -webkit-transform: rotate(-3deg);
            transform: rotate(-3deg);
  }
  50% {
    -webkit-transform: rotate(3deg);
            transform: rotate(3deg);
  }
  to {
    -webkit-transform: rotate(-3deg);
            transform: rotate(-3deg);
  }
}

.flash {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  opacity: 0;
  background: rgba(255, 255, 255, 0.575);
}

.flash_active {
  -webkit-animation: flash 1s ease;
          animation: flash 1s ease;
}

.button {
  position: absolute;
  top: 70%;
  right: 12%;
  width: 30%;
  -webkit-transform: translateY(10%);
          transform: translateY(10%);
  opacity: 0;
  -webkit-transition: all ease 1s;
  transition: all ease 1s;
}

.button img {
  -webkit-animation: btn 1s ease;
          animation: btn 1s ease;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
}

.button_on {
  opacity: 1;
  -webkit-transform: translateY(0);
          transform: translateY(0);
}

.mouse-off {
  opacity: 0;
}

.screen-click {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
  z-index: 10;
}

.screen-click-on {
  display: block;
}

@-webkit-keyframes btn {
  from {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  50% {
    -webkit-transform: scale(1.1);
            transform: scale(1.1);
  }
  to {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}

@keyframes btn {
  from {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  50% {
    -webkit-transform: scale(1.1);
            transform: scale(1.1);
  }
  to {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}

@-webkit-keyframes fadein {
  from {
    -webkit-transform: scale(0);
            transform: scale(0);
  }
  to {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}

@keyframes fadein {
  from {
    -webkit-transform: scale(0);
            transform: scale(0);
  }
  to {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}

@-webkit-keyframes flash {
  from {
    opacity: 0;
  }
  5% {
    opacity: 1;
  }
  10% {
    opacity: 0;
  }
  15% {
    opacity: 1;
  }
  20% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

@keyframes flash {
  from {
    opacity: 0;
  }
  5% {
    opacity: 1;
  }
  10% {
    opacity: 0;
  }
  15% {
    opacity: 1;
  }
  20% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}