/*style of the clerks*/

#human1{
    position:absolute;
    left:-7px;
    top:0px;
    will-change: transform;
}

.leg1 {
  position:absolute;
  top:40px;
  left:10px;
  height: 4px;
  width: 20px;
  background-color: #ffa31a;
  transform: rotate(-60deg);
  border-radius: 40%;
  display: inline-block;
}
.leg2 {
  position:absolute;
  top:40px;
  left:20px;
  height: 4px;
  width: 20px;
  background-color: #ffa31a;
  transform: rotate(60deg);
  border-radius: 40%;
  display: inline-block;
}
.arm1 {
  position:absolute;
  top:20px;
  left:5px;
  height: 5px;
  width: 15px;
  background-color: #ffa31a;
  border-radius: 40%;
  display: inline-block;
  animation-name: saluda1;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  animation-delay: 0s;
  will-change: transform;
  transform-origin: 100% 50%;
}
.arm2 {
  position:absolute;
  top:20px;
  left:30px;
  height: 5px;
  width: 15px;
  background-color: #ffa31a;
  border-radius: 40%;
  display: inline-block;
  animation-name: saluda2;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-delay: 0s;
  will-change: transform;
  transform-origin: 0% 50%;
}
.head {
  position:absolute;
  top:0px;
  left:17px;
  height: 15px;
  width: 15px;
  background-color: #ffa31a;
  border-radius: 40%;
  display: inline-block;
}
.body {
  position:absolute;
  top:10px;
  left:20px;
  height: 30px;
  width: 10px;
  background-color: #739900;
  border-radius: 40%;
  display: inline-block;
}
.panxa {
  position:absolute;
  top:10px;
  left:-5px;
  height: 25px;
  width: 20px;
  background-color: #739900;
  border-radius: 100%;
  display: inline-block;
}
.papada {
  position:absolute;
  top:-2px;
  left:-1px;
  height: 12px;
  width: 12px;
  background-color: #e69900;
  border-radius: 100%;
  display: inline-block;
}
.cara3 {
     position:absolute;
  transform: rotate(90deg);
  left:5px;
}

@keyframes saluda1 {
   0%   {transform: rotate(40deg); }
   50%  {transform: rotate(10deg); }
  100%  {transform: rotate(40deg); }
}
@keyframes saluda2 {
   0%   {transform: rotate(40deg); }
   50%  {transform: rotate(10deg); }
  100%  {transform: rotate(40deg); }
}





/*style of Montse*/
.leg1m {
  position:absolute;
  top:40px;
  left:10px;
  height: 4px;
  width: 20px;
  background-color: DarkGoldenRod;
  transform: rotate(-60deg);
  border-radius: 40%;
  display: inline-block;
}
.leg2m {
  position:absolute;
  top:40px;
  left:20px;
  height: 4px;
  width: 20px;
  background-color: DarkGoldenRod;
  transform: rotate(60deg);
  border-radius: 40%;
  display: inline-block;
}
.armsm {
  position:absolute;
  top:20px;
  left:5px;
  height: 5px;
  width: 40px;
  background-color: DarkGoldenRod;
  border-radius: 40%;
  display: inline-block;
}
.headm {
  position:absolute;
  top:0px;
  left:17px;
  height: 15px;
  width: 15px;
  background-color: DarkGoldenRod;
  border-radius: 40%;
}
.bodym {
  position:absolute;
  top:10px;
  left:20px;
  height: 30px;
  width: 10px;
  background-color: DarkSeaGreen;
  border-radius: 40%;
}
.peluca {
  position:absolute;
  top:-6px;
  left:13px;
  height: 30px;
  width: 23px;
  background-color: DarkSlateGray;
  border-radius: 45%;
}

#human2 {
    position:absolute;
    top:0px;
    left:0px;
    color:white;
    animation-name: camina;
    animation-duration: 1s;
    animation-iteration-count: 13;
    transform-origin:50% 50%;
     animation-delay: 10s;
     will-change: transform;
  
}

#areavital {
    position:absolute;
    top:0px;
    width:50px;
    height:70px;
    left:0px;
    animation-name: desplaça;
    animation-duration: 13s;
    animation-iteration-count: 1;
     transform-origin:50% 50%;
     animation-timing-function: linear;
     visibility: hidden;
     animation-delay: 10s;
     will-change: transform;
}


@keyframes desplaça {
   0%   {transform: translateX(90px) translateY(430px) rotate(60deg);visibility: visible; }
      10%   {transform: translateX(120px) translateY(430px) rotate(70deg);visibility: visible; }
  50%  {transform: translateX(120px) translateY(300px) rotate(60deg) }
  60%  {transform: translateX(120px) translateY(300px) rotate(0deg)}
  90%  {transform: translateX(60px) translateY(300px) rotate(0deg);visibility: hidden; }
  100%  {transform: translateX(15px) translateY(300px) rotate(0deg);visibility: hidden; }
}

@keyframes camina {
    0%   {transform:  rotate(10deg) }
  50%  {transform: rotate(-10deg)}
  100%  {transform:  rotate(10deg) }
}



/*style of the boss*/

.panxa2 {
  position:absolute;
  top:10px;
  left:-6px;
  height: 27px;
  width: 23px;
  background-color: sienna;
  border-radius: 100%;
  display: inline-block;
}
.papada2 {
  position:absolute;
  top:-2px;
  left:-1px;
  height: 12px;
  width: 12px;
  background-color: AntiqueWhite;
  border-radius: 100%;
  display: inline-block;
}
.cara4 {
     position:absolute;
  transform: rotate(90deg);
  left:5px;
}


.leg13 {
  position:absolute;
  top:40px;
  left:10px;
  height: 4px;
  width: 20px;
  background-color: AntiqueWhite;
  transform: rotate(-60deg);
  border-radius: 40%;
  display: inline-block;
}
.leg23 {
  position:absolute;
  top:40px;
  left:20px;
  height: 4px;
  width: 20px;
  background-color: AntiqueWhite;
  transform: rotate(60deg);
  border-radius: 40%;
  display: inline-block;
}
.arms3 {
  position:absolute;
  top:20px;
  left:5px;
  height: 5px;
  width: 40px;
  background-color: AntiqueWhite;
  border-radius: 40%;
  display: inline-block;
}
.head3 {
  position:absolute;
  top:-9px;
  left:-3px;
  height: 15px;
  width: 15px;
  background-color: AntiqueWhite;
  border-radius: 40%;
}
.body3 {
  position:absolute;
  top:10px;
  left:20px;
  height: 30px;
  width: 10px;
  background-color: sienna;
  border-radius: 40%;
}
.peluca2 {
  position:absolute;
  top:3px;
  left:12px;
  height: 10px;
  width: 25px;
  background-color: gray;
  border-radius: 45%;
}

#jefe1 {
    position:absolute;
    top:0px;
    left:0px;
    color:grey;
    animation-name: camina;
    animation-duration: 1s;
    animation-iteration-count: 16;
    transform-origin:50% 50%;
     animation-delay: 15s;
  will-change: transform;
}

#areavital2 {
    position:absolute;
    top:0px;
    width:50px;
    height:70px;
    left:0px;
    animation-name: desplaça2;
    animation-duration: 16s;
    animation-iteration-count: 1;
     transform-origin:50% 50%;
     animation-timing-function: linear;
     visibility: hidden;
     animation-delay: 15s;
     will-change: transform;
}


@keyframes desplaça2 {
   0%   {transform: translateX(90px) translateY(430px) rotate(70deg);visibility: visible; }
   10%   {transform: translateX(120px) translateY(430px) rotate(70deg);visibility: visible; }
  40%  {transform: translateX(120px) translateY(300px) rotate(70deg) }
  50%  {transform: translateX(120px) translateY(300px) rotate(0deg)}
  75%  {transform: translateX(90px) translateY(300px) rotate(0deg); }
  77%  {transform: translateX(90px) translateY(270px) rotate(0deg); }
   82%  {transform: translateX(90px) translateY(300px) rotate(0deg); }
   84%  {transform: translateX(90px) translateY(300px) rotate(0deg); }
  100%  {transform: translateX(90px) translateY(330px) rotate(0deg); }
}