::-webkit-scrollbar {
  display: none;
}

body {
  background-color: rgba(34, 40, 54, 1);
  font-family: 'Comic Neue', cursive;
  margin: 0;
  padding: 0;
}

img {
  position: absolute;
}

/*===========RESPONSIVE===========*/

.scaleable-wrapper {
  resize: both;
  position: relative;
  /* background: url(../img/p1/pattern.jpg) repeat; */
  height: 218.7vw;
  max-width: 1024vh;
  max-height: 100vh;
}

.very-specific-design {
  text-align: center;
  position: relative;
  left: 50%;
  top: 46%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  -webkit-transform-origin: center center;
          transform-origin: center center;
}

/*==========WRAPPER==========*/

.wrapper-page-portrait {
  position: relative;
  width: 100vw;
  height: 177vw;
  max-width: 55.847vh;
  max-height: 90vh;
  top: 5%;
  bottom: 0;
  margin: auto;
  display: flex;
  overflow: hidden;
}
.page {
  background-color: #FFFFFF;
  width: 100%;
  margin: 10% auto 0 auto;
  position: relative;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  overflow: hidden;
  background-size: auto 100%;
  /* background-image: url(img/base-cover.jpg); */
}

.inner-box {
    width: 100%;
    height: 100%;
    position: relative;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    overflow: hidden;
}

.page img:nth-child(1){
  left: 0;
  width: auto;
  height: 100%;
}
/*==========LAYERS==========*/

.z1 {
  z-index: 1;
}
.z2 {
  z-index: 2;
}
.z3 {
  z-index: 3;
}
.z4 {
  z-index: 4;
}
.z5 {
  z-index: 5;
}
.z6 {
  z-index: 6;
}
.z7 {
  z-index: 7;
}
.z8 {
  z-index: 8;
}
.z9 {
  z-index: 9;
}
.z10 {
  z-index: 10;
}
/* ======== KORAKA =======*/

.koraka{
  height: 58%;
  width: 50.4%;
  top: 9.8%;
  left: 8.7%;
  position: absolute;
  transform-origin: bottom center;
}
#koraka-hand{
  width: 69%;
  height: 27%;
  left: -23%;
  top: 33%;
  position: absolute;
  transform-origin: 81.5% 17%;
  animation: arm1-koraka 4s infinite ease;
}
#koraka-hand #img-k1{
  width: 46%;
  height: auto;
  right: -4%;
  top: auto;
  left: auto;
}
#koraka-hand #img-k2{
  width: 96%;
  height: auto;
  top: -60.1%;
  right: -13.3%;
  bottom: auto;
  left: auto;
}
#koraka-torso{
  width: 100%;
  height: 42%;
  top: 14%;
  position: absolute;
}
#koraka-torso #img-k3{
  width: 44%;
  height: auto;
  bottom: -12%;
  top: auto;
  left: auto;
  right: 18%;
  transform-origin: bottom center;
   animation: briathing-koraka 4s infinite ease;
}
#koraka-torso #img-k4{
  width: 44%;
  height: auto;
  bottom: -20.6%;
  top: auto;
  left: auto;
  right: 21%;
  transform-origin: bottom center;
  animation: briathing-koraka 4s infinite ease;
}
/* #koraka-torso #img-k5{
  width: 8%;
  height: auto;
  bottom: 30%;
  top: auto;
  left: auto;
  right: 45%;
  transform-origin: top center;
  animation: briathing-koraka 4s infinite ease;
} */
#koraka-torso #img-k5{
  width: 24%;
  height: auto;
  top: 47.3%;
  right: 6.7%;
  transform-origin: 27% 10%;
  animation: arm1-koraka-R 4s infinite ease;
}
#koraka-head{
  height: 20%;
  width: 35%;
  top: 19.2%;
  left: 36.7%;
  position: absolute;
  transform-origin: bottom center;
  animation: head-koraka 4s infinite ease;
}
#koraka-head #img-k6{
  width: 50%;
  height: auto;
  top: 16%;
  left: 20%;
  right: 0;
}
#koraka-head #img-k7{
  width: 77.6%;
  height: auto;
  top: -4.6%;
  left: 11.1%;
  right: 0;
}

#koraka-legs{
  width: 100%;
  height: 50%;
  left: 12%;
  bottom: 0;
  position: absolute;
}
#koraka-legs #img-k8{
  width: 62%;
  height: auto;
  top: auto;
  bottom: 0;
  left: 15%;
  right: 0;
  transform-origin: top left;
}
#koraka-legs #img-k9{
  width: 28.1%;
  height: auto;
  left: 33.6%;
  right: 0;
  bottom: 28.1%;
  transform-origin: top;
  animation: pants-koroka 3s infinite cubic-bezier(0.46, 0.03, 0.52, 0.96);
}
@keyframes koraka-legs {
  0%{transform: skewY(1deg);}
  50%{transform: skewY(0);}
  100%{transform: skewY(1deg);}
}
@keyframes briathing-koraka {
  0%{ transform: scale(1.02);}
  50%{ transform: scale(1);}
  100%{ transform: scale(1.02);}
}
@keyframes arm1-koraka {
  0% { transform: translateY(-2%) rotate(-2deg);}
  50% { transform: translateY(0) rotate(0deg);}
  100% { transform: translateY(-2%) rotate(-2deg);}
}
@keyframes arm1-koraka-R {
  0% { transform: translateY(-1%) rotate(-2deg);}
  50% { transform: translateY(0) rotate(0deg);}
  100% { transform: translateY(-1%) rotate(-2deg);}
}
@keyframes head-koraka {
  0%{transform: rotate(0deg) translateY(-2%);}
50%{transform: rotate(-4deg) translateY(0%);}
  100%{transform: rotate(0deg) translateY(-2%);}
}
@keyframes jump {
  0%{ transform: skew(-2deg);}
  50%{ transform: skew(0deg);}
  100%{ transform: skew(-2deg);}
}
@keyframes pants-koroka {
  0%{ transform: skewX(-2deg);}
  50%{ transform: skewX(0deg);}
  100%{ transform: skewX(-2deg);}
}

/* ======= FLAMME ====== */

#flamma{
  height: 56%;
  width: 42%;
  right: 2%;
  bottom: 10%;
  position: absolute;
  transform-origin: 38% 86%;
 /* animation: jump-flamma 4s infinite ease; */
}
#flamma #flamma-head{
  width: 21%;
  height: 11%;
  right: 26.6%;
  top: 4.9%;
  margin: auto;
  position: absolute;
  background-size: auto 100%;
  background-repeat: no-repeat;
  transform-origin: bottom center;
  animation: flamma-head 3.8s infinite ease, head-flamma 4s infinite ease;
}
#flamma-body{
  width: 100%;
  height: 90%;
  bottom: 0;
  right: 0;
  position: absolute;
}
#flamma-legs{
  width: 100%;
  height: 74%;
  bottom: 0;
  right: 0;
  position: absolute;
}
#flamma-body #flamma-legs #img-f7{
  right: 0%;
  left: auto;
  bottom: 0;
  width: 69%;
  height: auto;
  transform-origin: 38% 86%;
}
#flamma-body #flamma-legs #img-f8{
  right: 22.1%;
  left: auto;
  top: 8.2%;
  width: 35%;
  height: auto;
}
#flamma-torso{
  width: 100%;
  height:40%;
  right: -2%;
  position: absolute;
}
#torso{
  width: 100%;
  height: 100%;
  position: absolute;
}
#flamma-body #flamma-torso #torso #img-f4{
  width: 53%;
  height: auto;
  left: 32%;
  margin: auto;
  top: 8%;
  transform-origin: 44% bottom;
  animation: briathing-flamma 3.8s infinite ease;
}
#flamma-body #flamma-torso #torso #img-f5{
  right: -30.5%;
  top: 27.2%;
  bottom: auto;
  width: 107.3%;
  height: auto;
  transform-origin: 50% 8.5%;
  animation: arm1-flamma-R 3.8s infinite ease;
}
#flamma-body #flamma-torso #torso #img-f6{
  right: 7.8%;
  top: 17.8%;
  bottom: auto;
  width: 24%;
  height: auto;
  transform-origin: 50% 8.5%;
  animation: arm1-flamma-R 3.8s infinite ease;
}
#arm-2 {
  top: -26%;
  right: 45%;
  width: 96%;
  height: 100%;
  position: absolute;
  transform-origin: right center;
  animation: arm1-flamma 3.8s infinite ease;
}
#flamma-body #flamma-torso #arm-2 #img-f1{
  right: 1%;
  left: auto;
  top: auto;
  bottom: 0%;
  width: 44%;
  height: auto;
  animation: none;
}
#flamma-body #flamma-torso #arm-2 #img-f2{
  right: 0.3%;
  left: auto;
  top: auto;
  bottom: -0.6%;
  width: 43.6%;
  height: auto;
  animation: none;
}
#flamma-body #flamma-torso #arm-2 #img-f3{
  right: auto;
  left: 34%;
  bottom: auto;
  top: -11.5%;
  width: 139%;
  height: auto;
  transform-origin: 25% 95%;
  animation: sword 3.8s infinite ease;
}
@keyframes head-flamma {
  0%{transform: rotate(0deg) translateY(-2%);}
  50%{transform: rotate(-4deg) translateY(0%);}
100%{transform: rotate(0deg) translateY(-2%);}
}
@keyframes sword {
  0%{transform: rotate(-4deg);}
  50%{transform: rotate(0deg);}
  100%{transform: rotate(-4deg);}
}
@keyframes arm1-flamma {
  0% { transform: translateY(-1%) rotate(-2deg);}
  50% { transform: translateY(0) rotate(0deg);}
  100% { transform: translateY(-1%) rotate(-2deg);}
}
@keyframes arm1-flamma-R {
  0% { transform: translateY(-1%) rotate(2deg);}
  50% { transform: translateY(0) rotate(0deg);}
  100% { transform: translateY(-1%) rotate(2deg);}
}
@keyframes briathing-flamma {
  0%{transform: scale(1.015);}
  50%{transform: scale(1);}
  100%{transform: scale(1.015);}
}
@keyframes jump-flamma {
  0%{ transform: skew(-2deg);}
  50%{ transform: skew(0deg);}
  100%{ transform: skew(-2deg);}
}
@keyframes flamma-head {
  0% {
    background-image: url(img/flamma/09-Flamma-head01.webp);
  }
  3% {
      background-image: url(img/flamma/09-Flamma-head02.webp);
  }
  6% {
      background-image: url(img/flamma/09-Flamma-head03.webp);
  }
  9% {
      background-image: url(img/flamma/09-Flamma-head02.webp);
  }
  12% {
      background-image: url(img/flamma/09-Flamma-head01.webp);
  }
  100% {
      background-image: url(img/flamma/09-Flamma-head01.webp);
  }
}


/* Bonnie */

#bonnie{
  height: 50%;
  width: 100%;
  /* top: 3%; */
  bottom: -5%;
  right: -2%;
  position: absolute;
  transform: rotate(342deg);
}
#bonnie #img-bon1{
  width: 32%;
  height: auto;
  top: 44%;
  left: 36%;
  right: auto;
}
#bonnie-legs{
  width: 70%;
  height: 100%;
  bottom: -85%;
  left: 15%;
  position: absolute;
}
#bonnie #bonnie-legs #img-bon2{
  width: 23.9%;
  height: auto;
  bottom: -25%;
  left: 39.6%;
}

#bonnie #bonnie-legs #img-bon3{
  width: 84%;
  height: auto;
  bottom: 7%;
  left: 1.6%;
}
#bonnie #bonnie-legs #img-bon4{
  width: 39.2%;
  height: auto;
  top: -4%;
  left: 30%;
}
#bonnie #bonnie-legs #img-bon5{
  width: 57%;
  height: auto;
  bottom: 6%;
  left: 34%;
  top: auto;
  right: auto;
  transform-origin: center;
  animation: bonnie-breathing 3s infinite ease;
}
#bonnie-head{
  width: 67.8%;
  height: 60%;
  top: -2%;
  left: 18.7%;
  position: absolute;
  animation: bonnie-head 3s infinite ease;
}

#bonnie #bonnie-head #img-bon6{
  width: 72%;
  height: auto;
  top: 4%;
  left: 15%;
}

#bonnie #bonnie-head #img-bon7{
  width: auto;
  height: 41%;
  top: 46%;
  left: 35%;
}
#bonnie #bonnie-head #img-bon8{
  width: 23%;
  height: auto;
  top: 26%;
  left: 40%;
}
#bonnie-hair{
  width: 61%;
  height: 60%;
  top: 2%;
  left: 21%;
  position: absolute;
  animation: bonnie-head 3s infinite ease;
}
#bonnie #bonnie-hair #img-bon9{
  width: 70%;
  height: auto;
  top: 16%;
  left: 2%;
  transform-origin: top right;
  animation: bonnie-hair 5s infinite ease;
}

#bonnie-torso{
  width: 95%;
  height: 100%;
  bottom: 0%;
  left: 2.5%;
  position: absolute;
}
#bonnie #bonnie-torso #img-bon10{
  width: 36.5%;
  height: auto;
  bottom: 4%;
  left: 33.7%;
  top: auto;
  right: auto;
  transform-origin: center;
  animation: bonnie-breathing 3s infinite ease;
}
#bonnie #bonnie-torso #img-bon11{
  width: 33%;
  height: auto;
  bottom: -34%;
  left: 43%;
  transform-origin: center;
  animation: bonnie-breathing 3s infinite ease;
}
#bonnie #bonnie-torso #img-bon12{
  width: 13%;
  height: auto;
  bottom: 24%;
  left: 32.8%;
  transform-origin: left center;
  animation: bonnie-arm-left 3s infinite ease;
}

#bonnie #bonnie-torso #img-bon13{
  width: 13%;
  height: auto;
  bottom: 30%;
  right: 27.5%;
  top: auto;
  left: auto;
  transform-origin: right center;
  animation: bonnie-arm-right 3s infinite ease;
}
#bonnie #bonnie-torso #img-bon14{
  width: 35%;
  height: auto;
  bottom: 41%;
  left: 11%;
  transform-origin: right bottom;
  animation: bonnie-arm-right-gum 5s infinite ease;
}
#bonnie #bonnie-torso #img-bon15{
  width: 28%;
  height: auto;
  bottom: 43%;
  right: 13%;
  transform-origin: left bottom;
  animation: bonnie-arm-left-gum 5s infinite ease;
}



@keyframes bonnie-hair {
  0% {
    transform: skew(0deg);
  }
  50% {
      transform: skew(-1deg) rotate(-1deg);
  }
  100% {
      transform: skew(0deg);
  }
}
@keyframes bonnie-head {
  0% {
    transform: rotate(0deg);
  }
  50% {
      transform: rotate(1deg);
  }
  100% {
      transform: rotate(0deg);
  }
}
@keyframes bonnie-arm-left {
  0% {
    transform: translateY(-1%) rotate(-1deg);
  }
  50% {
      transform: translateY(0) rotate(0deg);
  }
  100% {
      transform: translateY(-1%) rotate(-1deg);
  }
}
@keyframes bonnie-arm-right {
  0% {
      transform: translateY(-1%) rotate(1deg);
  }
  50% {
      transform: translateY(0) rotate(0deg);
  }
  100% {
      transform: translateY(-1%) rotate(1deg);
  }
}
@keyframes bonnie-arm-right-gum {
  0% {
    transform: translateY(-3% ) rotate(1deg);
  }
  30% {
      transform: translate(-4% ,0%) rotate(5deg);
  }
  90% {
      transform: translate(-6% ,0%) rotate(4deg);
  }
  100% {
      transform: translateY(-3%) rotate(1deg);
  }
}
@keyframes bonnie-arm-left-gum {
  0% {
    transform: translateY(-1.5% ) rotate(-1deg);
  }
  30% {
      transform: translate(4% ,0%) rotate(-5deg);
  }
  90% {
      transform: translate(6% ,0%) rotate(-4deg);
  }
  100% {
      transform: translateY(-1.5%) rotate(-1deg);
  }
}
@keyframes bonnie-breathing {
  0% {
      transform: scale(0.99);
  }
  50% {
      transform: scale(1);
  }
  100% {
      transform: scale(0.99);
  }
}

/* Shi */

#shi-yang{
  height: 36%;
  width: 37%;
  top: 36%;
  left: 22%;
  position: absolute;
}
#shi-head{
  height: 48%;
  width: 50%;
  left: 27%;
  position: absolute;
}
#shi-yang #shi-head #img-shi2{
  width: auto;
  height: 40%;
  top: 0%;
  left: 39%;
}
#shi-hair{
  height: 100%;
  width: 61%;
  top: 0%;
  left: 27%;
  opacity: 1;
  position: absolute;
}
#shi-yang #shi-head #shi-hair #img-shi3{
  height: 58%;
  width: auto;
  top: auto;
  bottom: 23%;
  left: 15%;
  transform-origin: right top;
  animation: shi-hair 5s infinite ease;
}
#shi-yang #shi-head #shi-hair #img-shi4{
  width: 63%;
  height: auto;
  top: -1%;
  right: 13%;
  transform-origin: 50% 0%;
  animation: shi-hair-2 5s infinite ease;
}
/* .red-hair{
  height: 100%;
  width: 100%;
  top: 0%;
  left: 27%;
  opacity: 0;
  position: absolute;
} */
/* #shi-yang #shi-head .red-hair img:nth-child(1){
  height: auto;
  width: 17%;
  top: auto;
  bottom: -100%;
  left: 11%;
  position: absolute;
}
#shi-yang #shi-head .red-hair img:nth-child(2){
  width: 37%;
  height: auto;
  left: 15%;
  top: -2%;
} */
#shi-hand-left{
  height: 28%;
  width: 17%;
  top: 17.5%;
  right: 21%;
  position: absolute;
}
#shi-yang #shi-hand-left #img-shi5{
  width: auto;
  height: 82%;
  top: 0%;
  right: auto;
  left: -3%;
  transform-origin: 10% 10%;
  animation: shi-arm-left 3.5s infinite ease;
}
#shi-yang #shi-hand-left #img-shi6{
  width: 61.5%;
  height: auto;
  bottom: 22%;
  left: 16%;
  top: auto;
  transform-origin: top center;
  animation: shi-arm-left 3.5s infinite ease;
}
#shi-yang #shi-hand-left #img-shi7{
  width: 35.5%;
  height: auto;
  bottom: 17%;
  right: 25%;
  top: auto;
}
#shi-hand-rigth{
  height: 39%;
  width: 20%;
  top: 13%;
  left: 36.3%;
  position: absolute;
  transform-origin: 61% 04%;
  animation: shi-arm-right 3.5s infinite ease;
}
#shi-yang #shi-hand-rigth #img-shi14{
  height: 100%;
  width: auto;
  left: 0;
  top: 0;
}
#shi-yang #shi-hand-rigth #img-shi15{
  width: auto;
  height: 85%;
  bottom: -3%;
  top: auto;
  left: -13%;
  transform-origin: top center;
}
#shi-yang #shi-hand-rigth #img-shi16{
  width: 64%;
  height: auto;
  bottom: -30%;
  left: -2.4%;
  top: auto;
  right: auto;
}
#shi-torso{
  height: 31%;
  width: 68%;
  bottom: 56%;
  right: 11%;
  position: absolute;
}
#shi-yang #shi-torso #img-shi8{
  width: 38.7%;
  height: auto;
  right: 24.2%;
  top: 0%;
  left: auto;
}
/* #shi-yang #shi-torso img:nth-child(2){
  width: 21%;
  height: auto;
  top: 0%;
  left: 23%;
  transform-origin: top center;
  animation: shi-arm-right 3.5s infinite ease;
} */
#shi-top {
  height: 20%;
  width: 27.2%;
  bottom: 68%;
  left: 46.3%;
  position: absolute;
}
#shi-yang #shi-top #img-shi13{
  width: 100%;
  height: auto;
  top: 1%;
  left: 0%;
  right: auto;
  transform-origin: 60% 80%;
  animation: shi-breathing 3.5s infinite ease;
}
#shi-wakizashi {
  width: 74%;
  height: 67%;
  top: 7%;
  right: 7%;
  opacity: 1;
  position: absolute;
}
#shi-yang #shi-wakizashi #img-shi1{
  width: 67%;
  height: auto;
  bottom: 21%;
  left: auto;
  top: auto;
  right: 9%;
  transform-origin: center;
  animation: shi-arm-left 3.5s infinite ease;
}
#shi-legs{
  height: 73%;
  width: 100%;
  bottom: -0.9%;
  right: -9.6%;
  position: absolute;
}
#shi-legs #img-shi9{
  width: 52.2%;
  height: auto;
  bottom: 0%;
  left: 18.9%;
}
#short{
  height: 100%;
  width: 100%;
  bottom:0%;
  right: 0%;
  position: absolute;
}
#shi-yang #shi-legs #short #img-shi10{
  width: 43.4%;
  height: auto;
  left: 26.8%;
  top: 6.3%;
  bottom: auto;
}
#boots{
  height: 49%;
  width: 85%;
  bottom: 0%;
  left: 0%;
  position: absolute;
}
#shi-yang #shi-legs #boots #img-shi11{
  width: 17.2%;
  height: auto;
  left: 21.7%;
  bottom: 1.3%;
}
#shi-yang #shi-legs #boots #img-shi12{
  width: 18%;
  height: auto;
  right: 16%;
  bottom: -5%;
}
@keyframes shi-hair {
  0% {
    transform: skew(0deg);
  }
  50% {
      transform: skew(-8deg) rotate(6deg);
  }
  100% {
      transform: skew(0deg);
  }
}
@keyframes shi-hair-2 {
  0% {
    transform: skew(0deg);
  }
  50% {
      transform: skew(-2deg) rotate(1deg);
  }
  100% {
      transform: skew(0deg);
  }
}
@keyframes shi-arm-left {
  0% {
    transform: translateY(1%) rotate(-2deg);
  }
  50% {
      transform: translateY(0) rotate(0deg);
  }
  100% {
      transform: translateY(1%) rotate(-2deg);
  }
}
@keyframes shi-arm-right {
  0% {
      transform: rotate(1deg);
  }
  50% {
      transform: rotate(0deg);
  }
  100% {
      transform: rotate(1deg);
  }
}
@keyframes shi-arm-right-gum {
  0% {
    transform: translate(-7% , 0%) rotate(2deg);
  }
  50% {
      transform: translate(0, 3%) rotate(0deg);
  }
  100% {
      transform: translate(-7% , 0%) rotate(2deg);
  }
}
@keyframes shi-breathing {
  0% {
      transform: scale(1.02);
  }
  50% {
      transform: scale(1);
  }
  100% {
      transform: scale(1.02);
  }
}
/* Nakano */

#nakano{
  height: 48.3%;
  width: 51.2%;
  bottom: 5%;
  left: 3.1%;
  position: absolute;
}
#nakano-head{
  height: 22%;
  width: 54%;
  top: -0.3%;
  left: 3.6%;
  position: absolute;
}
#nakano #nakano-head #img-nak6{
  width: 72%;
  height: auto;
  right: 39%;
  left: auto;
  top: 0%;
  transform-origin: top center;
  animation: nakano-hair 5s infinite ease;
}
#nakano #nakano-head #img-nak7{
  width: 9%;
  height: auto;
  right: 40%;
  left: auto;
  bottom: 39%;
}
#nakano #nakano-head #img-nak8{
  width: 26%;
  height: auto;
  right: 41%;
  left: auto;
  top: 0;
}
#nakano #nakano-head #img-nak9{
  width: 46.8%;
  height: auto;
  left: 17.4%;
  top: -1%;
  transform-origin: top center;
  animation: nakano-hair 5s infinite ease;
}
#nakano #nakano-head #img-nak10{
  width: 51%;
  height: auto;
  right: 21.3%;
  left: auto;
  top: -77.1%;
  animation: nakano-head 3s infinite linear;
}
#nakano-torso{
  height: 48.4%;
  width: 88.6%;
  top: 9.3%;
  left: 1%;
  position: absolute;
}
#hand-left{
  height: 100%;
  width: 25%;
  top: 0%;
  right: 48%;
  position: absolute;
  animation: nakano-arm-left 3s infinite ease;
}
#nakano #nakano-torso #hand-left #img-nak11{
  width: 62%;
  height: auto;
  top: 12%;
  left: 38%;
}
#nakano #nakano-torso #hand-left #img-nak12{
  width: 300%;
  height: auto;
  top: -8.7%;
  left: -61.8%;
}
#nakano #nakano-torso #hand-left #img-nak13{
  width: 62%;
  height: auto;
  top: 8%;
  left: 29%;
}
#nakano #nakano-torso #hand-left #img-nak14{
  width: 29%;
  height: auto;
  bottom: 31%;
  left: 68%;
}
#nakano #nakano-torso #hand-left #img-nak15{
  width: 29%;
  height: auto;
  top: 8%;
  left: 41%;
}
#hand-right{
  height: 60.6%;
  width: 26.4%;
  top: -0.2%;
  left: -2%;
  transform-origin: bottom right;
  position: absolute;
  animation: nakano-arm-right 3s infinite ease;
}
#nakano #nakano-torso #hand-right #img-nak18{
  width: 100.9%;
  height: auto;
  top: 11%;
  left: 20%;
}
#nakano #nakano-torso #hand-right #img-nak19{
  width: 42%;
  height: auto;
  bottom: 12%;
  left: 31%;
}
#nakano #nakano-torso #hand-right #img-nak20{
  width: 55.5%;
  height: auto;
  bottom: 9.8%;
  left: 21%;
}
#nakano #nakano-torso #hand-right #img-nak21{
  width: 57.1%;
  height: auto;
  top: 5.5%;
  left: 27%;
}
#nakano-chest{
  height: 100%;
  width: 50%;
  top: 0%;
  left: -2%;
  position: absolute;
}
#nakano #nakano-torso #nakano-chest #img-nak16{
  left: 38%;
  width: 62%;
  height: auto;
  top: -6%;
  transform-origin: bottom center;
  animation:  nakano-breathing 3s infinite ease;
}
#nakano #nakano-torso #nakano-chest #img-nak17{
  right: -0.1%;
  width: 56.4%;
  height: auto;
  top: 5.5%;
  transform-origin: bottom center;
  animation:  nakano-breathing 3s infinite ease;
}

#nakano-legs{
  height: 71%;
  width: 92%;
  bottom: 0%;
  left: -6%;
  position: absolute;
}
#nakano #nakano-legs #img-nak1{
  left: 6%;
  width: 73%;
  height: auto;
  bottom: 0%;
}
#nakano #nakano-legs #img-nak2{
  left: 5.2%;
  width: 71.9%;
  height: auto;
  bottom: 3.4%;
}
#nakano #nakano-legs #img-nak3{
  left: 16.4%;
  width: 38%;
  height: auto;
  top: 1.4%;
}
#nakano #nakano-legs #img-nak4{
  left: 26%;
  width: 10%;
  height: auto;
  top: 12%;
  transform-origin: top;
  animation: clothLace 3s infinite ease;
}
#nakano #nakano-legs #img-nak5{
  left: 4%;
  width: 79%;
  height: auto;
  bottom: 0%;
}
@keyframes nakano-head{
  0% {
    transform: rotate(0deg);
  }
  50% {
      transform: rotate(1deg);
  }
  100% {
      transform: rotate(0deg);
  }
}
@keyframes nakano-hair{
  0% {
    transform: skew(0deg);
  }
  50% {
      transform: skew(4deg) rotate(2deg);
  }
  100% {
      transform: skew(0deg);
  }
}
@keyframes nakano-arm-right {
  0% {
    transform: translateY(-0.5%);
  }
  50% {
      transform: translateY(0) ;
  }
  100% {
      transform: translateY(-0.5%);
  }
}
@keyframes nakano-arm-left {
  0% {
    transform: translateY(-0.5%) rotate(-2deg);
  }
  50% {
      transform: translateY(0) rotate(0deg);
  }
  100% {
      transform: translateY(-0.5%) rotate(-2deg);
  }
}
@keyframes nakano-breathing {
  0% {
      transform: scale(0.99);
  }
  50% {
      transform: scale(1);
  }
  100% {
      transform: scale(0.99);
  }
}
@keyframes clothLace{
  0% {
    transform: skew(0deg);
  }
  50% {
      transform: skew(-1deg) rotate(1deg);
  }
  100% {
      transform: skew(0deg);
  }
}

#toshiro {
  height: 33.2%;
  width: 37%;
  top: 13%;
  right: 11%;
  position: absolute;
  animation: toshiro-full-body 4s infinite ease;
  transform-origin: bottom center;
}
#toshiro #img-tosh1{
  width: 12%;
  height: auto;
  left: 51.5%;
  top: 17%;
  bottom: auto;
  animation: toshiro-hair 4s infinite ease;
  transform-origin: 0 10%;
}
#toshiro #img-tosh2{
  width: 23.3%;
  height: auto;
  bottom: 44.7%;
  left: 32.3%;
  transform-origin: right top;
  animation: toshiro-bottle 4s infinite ease;
}
#toshiro-head{
  width: 46.8%;
  height: 27.9%;
  top: 3.5%;
  left: 31.4%;
  position: absolute;
  animation: toshiro-head 4s infinite ease;
  transform-origin: 10% 75%;
  z-index: 1;
}
#toshiro #toshiro-head #img-tosh3{
  width: 30%;
  height: auto;
  top: 31%;
  right: 49%;
  left: auto;
  animation: none;
}
#toshiro #toshiro-head #img-tosh4{
  width: 76%;
  height: auto;
  left: -1.9%;
  bottom: 1%;
  top: auto;
  animation: none;
}
#toshiro #toshiro-torso{
  width: 100%;
  height: 50%;
  left: -10%;
  position: absolute;
  transform-origin: 50% 90%;
  animation: toshiro-torso 4s infinite ease;
}

#toshiro #toshiro-torso #img-tosh5{
  width: 23%;
  height: auto;
  bottom: 11%;
  top: auto;
  left: 46%;
  animation: none;
}
#toshiro #toshiro-torso #img-tosh6{
  width: 12%;
  height: auto;
  top: 58%;
  right: 20%;
  left: auto;
  animation: none;
}
#toshiro #toshiro-torso #img-tosh7{
  width: 10%;
  height: auto;
  top: 43.5%;
  right: 12.7%;
  animation: none;
}

#toshiro #toshiro-torso #img-tosh8{
  width: 29%;
  height: auto;
  bottom: 11%;
  left: 42%;
  animation: none;
}
#toshiro #toshiro-torso #img-tosh9{
  width: 24%;
  height: auto;
  bottom: 3%;
  left: 29%;
  top: auto;
  animation: none;
}
#toshiro #toshiro-torso #img-tosh10{
  width: 11%;
  height: auto;
  top: 58%;
  right: 60%;
  animation: none;
}
#toshiro #toshiro-torso #img-tosh11{
  width: 18%;
  height: auto;
  bottom: 21%;
  left: 18.4%;
  top: auto;
  animation: none;
}
#toshiro #toshiro-torso #img-tosh12{
  width: 20%;
  height: auto;
  bottom: 13%;
  right: 31%;
  animation: none;
}
#toshiro #toshiro-torso #img-tosh13{
  width: 5.4%;
  height: auto;
  bottom: 12.5%;
  right: 20%;
  animation: none;
}
#toshiro #toshiro-torso #img-tosh14{
  width: 11%;
  height: auto;
  top: 47%;
  left: 54%;
  animation: none;
}
#toshiro #toshiro-torso #img-tosh15{
  width: 41%;
  height: auto;
  top: 44%;
  left: 35%;
  animation: none;
}
#toshiro-legs{
  width: 63%;
  height: 59%;
  left: 28%;
  bottom: -1.1%;
  position: absolute;
}
#toshiro-legs #img-tosh16{
  width: 69%;
  height: auto;
  left: 4%;
  bottom: 3%;
  top: auto;
  animation: none;
}
#toshiro-legs #img-tosh17{
  width: 69%;
  height: auto;
  left: 3%;
  bottom: 17%;
  animation: none;
}
#toshiro-legs #img-tosh18{
  width: 10%;
  height: auto;
  top: 9%;
  right: 48%;
  animation: none;
}
#toshiro-middle {
  width: 33%;
  height: 14%;
  top: 43%;
  right: 34.5%;
  position: absolute;
}
#toshiro-middle #img-tosh19{
  width: 80%;
  height: auto;
  top: -57%;
  right: -61%;
  left: auto;
  animation: none;
}
#toshiro-middle #img-tosh20{
  width: 100%;
  height: auto;
  top: 0%;
  left: 0%;
  animation: none;
}
 #toshiro-weapons{
  width: 100%;
  height: 50%;
  left: -10%;
  top: auto;
  right: auto;
  position: absolute;
  transform-origin: 50% 90%;
  animation: toshiro-torso 4s infinite ease;
}
#toshiro-weapons #img-tosh21{
  width: 80.5%;
  height: auto;
  top: -19.5%;
  left: 9.8%;
  animation: none;
}

/* .toshiro-weapons {
  width: 100%;
  height: 100%;
  top: -24.85%;
  right: 2.2%;
  position: absolute;
}
.toshiro-weapons img:nth-child(1){
  width: 93%;
  height: auto;
  left: 1%;
  top: 4%;
  animation: toshiro-weapon 4s infinite ease;
  transform-origin: top center;
} */
@keyframes toshiro-bottle {
  0% {
    transform: skewX(0deg);
  }
  50% {
      transform: skewX(1deg);
  }
  100% {
      transform: skewX(0deg);
  }
}
@keyframes toshiro-torso {
  0% {
    transform: skewY(0deg);
  }
  50% {
      transform: skewY(2deg);
  }
  100% {
      transform: skewY(0deg);
  }
}
@keyframes toshiro-hair {
  0% {
    transform: rotate(0deg);
  }
  50% {
      transform: rotate(-2deg);
  }
  100% {
      transform: rotate(0deg);
  }
}
@keyframes toshiro-head {
  0% {
    transform: rotate(0deg);
  }
  50% {
      transform: rotate(-2deg);
  }
  100% {
      transform: rotate(0deg);
  }
}