/*
fork this demo on github:
https://github.com/jkneb/street-fighter-css
*/
/*
A little more explanations on how it works
http://front-back.com/animate-png-sprites-with-css3-animations
*/
/*
All vendor prefixes are autogenerated by Autoprefixer
*/
/* element who's going to receive this class will be mirrored */
.flip {
  transform: scaleX(-1);
}

/* sprite tile dimensions */
/* ken */
.ken, .fireball {
  position: relative;
  bottom: 112px;
  bottom: 0;
  margin-left: 0px;
  width: 75px;
  height: 80px;
  background-image: url("../images/fighter.png");
  /* other sprites preloading */
  display:inline-block;
  vertical-align: bottom;
  /* background-size: 100% auto; */
}
.ken:before, .fireball:before {
  content: "";
  background: url("https://raw.githubusercontent.com/jkneb/street-fighter-css/master/images/ken-tatsumaki-senpuu-kyaku.png") no-repeat;
}
.ken:after, .fireball:after {
  content: "";
  background: url("https://raw.githubusercontent.com/jkneb/street-fighter-css/master/images/ken-shoryuken.png") no-repeat;
}

/* ken's fireball */
.fireball {
  position: absolute;
  left: 100%;
  bottom: 0px;
  margin-left: 0;
  /* default margin-left */
  background-position: 140px 320px;
  /* default background position */
  transition: margin 8s linear;
  /* triggering the movement with this class */
  animation: fireball steps(2) 0.15s infinite;
}
.fireball:before {
  left: 25px;
  right: 25px;
}
.fireball.moving {
  margin-left: 4000px;
}

@keyframes fireball {
  from {
    background-position: 0px -320px;
  }
  to {
    background-position: -140px -320px;
  }
}
/* ken's fireball impact explosion */
.explode {
  animation: explode steps(4) 0.5s 1;
}

@keyframes explode {
  from {
    background-position: 0px -400px;
  }
  to {
    background-position: -280px -400px;
  }
}
/* stance */
.stance {
  animation: stance steps(4) 0.5s infinite;
}

@keyframes stance {
  from {
    background-position: 0px -80px;
  }
  to {
    background-position: -280px -80px;
  }
}
/* hadoken - must be declared AFTER .stance */
.hadoken {
  animation: hadoken steps(4) 0.5s infinite;
}

@keyframes hadoken {
  from {
    background-position: 0px 0px;
  }
  to {
    background-position: -280px 0px;
  }
}
/* punch */
.punch {
  animation: punch steps(3) 0.15s infinite;
}

@keyframes punch {
  from {
    background-position: 0px -160px;
  }
  to {
    background-position: -210px -160px;
  }
}
/* walking */
.walk {
  animation: walk steps(5) 0.5s infinite;
}

@keyframes walk {
  from {
    background-position: 0px -240px;
  }
  to {
    background-position: -350px -240px;
  }
}
/* kick */
.kick {
  animation: kick steps(5) 0.5s infinite;
}

@keyframes kick {
  from {
    background-position: 0px -480px;
  }
  to {
    background-position: -350px -480px;
  }
}
/* reverse kick */
.reversekick {
  animation: reversekick steps(5) 0.5s infinite;
}

@keyframes reversekick {
  from {
    background-position: 0px -560px;
  }
  to {
    background-position: -350px -560px;
  }
}
/* kneel down */
.kneel {
  animation: kneel steps(1) 0.2s infinite;
}

@keyframes kneel {
  from {
    background-position: 0px -720px;
  }
  to {
    background-position: -70px -720px;
  }
}
/* jump */
.jump {
  transition: bottom 0.5s cubic-bezier(0.99, 0.005, 0, 0.42);
  bottom: 225px;
  animation: jump steps(7) 1s infinite;
}
.jump.down {
  bottom: 112px;
}

@keyframes jump {
  from {
    background-position: 0px -640px;
  }
  to {
    background-position: -490px -640px;
  }
}
/* shoryuken */
.shoryuken {
  height: 110px;
  background-image: url("https://raw.githubusercontent.com/jkneb/street-fighter-css/master/images/ken-shoryuken.png");
  transition: bottom 0.5s cubic-bezier(0.99, 0.005, 0, 0.42);
  bottom: 225px;
  animation: shoryuken steps(7) 1s infinite;
}
.shoryuken.down {
  bottom: 112px;
}

@keyframes shoryuken {
  from {
    background-position: 0px 0px;
  }
  to {
    background-position: -490px 0px;
  }
}
/* tatsumaki senpuu kyaku */
.tatsumaki {
  height: 110px;
  background-image: url("https://raw.githubusercontent.com/jkneb/street-fighter-css/master/images/ken-tatsumaki-senpuu-kyaku.png");
  transition: bottom 0.2s cubic-bezier(0.99, 0.005, 0, 0.42);
  bottom: 132px;
  animation: tatsumaki steps(13) 2s infinite;
}
.tatsumaki.down {
  bottom: 112px;
}

@keyframes tatsumaki {
  from {
    background-position: 0px 0px;
  }
  to {
    background-position: -910px 0px;
  }
}
.commands {
  margin-left: 450px;
  font-size: 12px;
  padding: 15px;
}
.commands h1 {
  margin-top: 0;
  font-size: 14px;
}
.commands i {
  padding: 0px 4px;
  font-style: normal;
  font-weight: bold;
  outline: 1px solid pink;
}
.commands button + button {
  white-space: nowrap;
}

.stage {
  /* position: relative; */
  /* bottom: 0; */
  /* left: 0; */
  /* width: 0px; */
  /* height: 0; */
  /* background: url(https://raw.githubusercontent.com/jkneb/street-fighter-css/master/images/bg2.jpg) no-repeat 0px -100px; */
  /* background: transparent; */
  /* background-size: 100% auto; */
  /* float: none; */
  /* margin-right: 0; */
  /* text-align: left; */
  /* max-width: 100%; */
  /* margin: 0 auto; */
  /* margin-bottom: 0; */
  /* display: block; */
  /* background-position: left; */
  padding-left: 17px !important;
}

body {
  margin: 0px;
  padding: 0;
}
.keys-section {
  position: absolute;
  bottom: 112px;
  bottom: -60px;
  width: 216px;
  /* height: 47px; */
  text-align: left;
  text-transform: uppercase;
  display: inline-block;
  vertical-align: bottom;
  margin-left: 10px;
  background: #000;
  border: 1px solid;
  padding: 5px;
  box-sizing: border-box;
  left: 0;
  display:none;
  font-size:0;
}
.button-section {
  display: block;
  margin-top: 5px;
}
.button-section span {
  border: 1px solid;
  border-radius: 2px;
  padding: 3px 5px;
  font-size: 12px;
  margin-top:5px;
  margin-right:10px;
}
.keyDescription {
  font-size: 9px;
  letter-spacing: 0.5px;
  line-height: 12px;
  margin-top: 10px;
}
@media only screen and (min-width:1024px) and (max-width:1280px){
  .ken, .fireball,.keys-section{
    /* bottom:105px; */
  }
}
/*# sourceMappingURL=main.css.map */