/*
Name: Monsters
URI: https://codepen.io/devMike/pen/brwgjv
Author: devMike
Description: Simple SVG animation.
*/
.st0{fill:#E6E7E8;}
.st1{fill:#259146;}
.st2{fill:#6ABC47;}
.st3{fill:#5AA545;}
.st4{fill:#FFFFFF;}
.st5{fill:#262C15;}
.st6{fill:#484A21;}
.st7{fill:#428C41;}
.st8{fill:#E184B2;}
.st9{fill:#F1F1F2;}
.st10{fill:#F89F29;}
.st11{fill:#FCB626;}
.st12{fill:#EAA122;}
.st13{fill:#422E13;}
.st14{fill:#E08726;}
.st15{fill:#451124;}
.st16{fill:#BA2356;}
.st17{fill:#29C1E3;}
.st18{fill:#EE436E;}
.st19{fill:#DD3768;}
.st20{fill:#461529;}
.st21{fill:#680A2C;}
#monsters {
  display: block;
  margin: 0 auto;
  padding-top: 15%;
}
#first-monster-eye,
#first-monster-hand,
#first-monster-eye-in,
#first-monster-mouth,
#second-monster-hand,
#second-monster-sec-hand,
#second-monster-eye,
#second-monster,
#third-monster-leg,
#third-monster-leg-left,
#third-monster,
#third-monster-face,
.monsters,
.monster {
  animation-iteration-count: infinite!important;
  animation-direction: alternate!important;
}

.monsters {
  animation-timing-function: linear;
  animation: monsters;
  animation-duration: 3s;
}
@keyframes monsters {
  from {
    transform: rotate(-2deg) translateX(2px) translateY(2px);
    transform-origin: bottom;
  }
  to {
    transform: rotate(2deg) translateX(-2px) translateY(-2px);
    transform-origin: bottom;
  }
}
.monster {
  animation-timing-function: linear;
  animation: monster;
  animation-duration: 3s;
}
@keyframes monster {
  from {
    transform: rotate(2deg) translateX(-2px) translateY(-2px);
    transform-origin: bottom;
  }
  to {
    transform: rotate(-2deg) translateX(2px) translateY(2px);
    transform-origin: bottom;
  }
}
/*------------------------------
        FIRST MONSTER
------------------------------*/
#first-monster-hand {
  animation-timing-function: linear;
  animation: hand;
  animation-duration: 1s;
}
@keyframes hand {
  from {
    transform: rotate(-25deg);
    transform-origin: bottom; }
  to {
    transform: rotate(5deg);
    transform-origin: bottom; }
}

#first-monster-eye {
  animation-timing-function: linear;
  animation: hand;
  animation-duration: 6s;
}
@keyframes eye {
  from {
    transform: translate(-5px);
    transform-origin: top;
  }
  to {
    transform: translate(5px);
     transform-origin: top;
   }
}

#first-monster-eye-in {
  animation-timing-function: linear;
  animation: eye;
  animation-duration: 6s;
}
@keyframes mouth {
  from {
    transform: scaleY(1);
    transform-origin: top;
  }
  to {
    transform: scaleY(1.2);
    transform-origin: top;
   }
}

#first-monster-mouth {
  animation-timing-function: linear;
  animation: mouth;
  animation-duration: 3s;
}

/*------------------------------
        SECOND MONSTER
------------------------------*/
#second-monster-hand {
  animation-timing-function: linear;
  animation: sec_hand;
  animation-duration: .2s;

}
@keyframes sec_hand {
  from {
    transform: rotate(-40deg);
    transform-origin: 1%;
  }
  to {
    transform: rotate(15deg);
    transform-origin: 1%;
  }
}
#second-monster-sec-hand {
  animation-timing-function: linear;
  animation: sec_hand_left;
  animation-duration: .2s;
}
@keyframes sec_hand_left {
  from {
    transform: rotate(-4deg);
    transform-origin: top;
  }
  to {
    transform: rotate(4deg);
    transform-origin: top;
  }
}
#second-monster-eye {
  animation-timing-function: linear;
  animation: sec_eye;
  animation-duration: 3s;
}
@keyframes sec_eye {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(1.4);
    transform-origin: center;
  }
}
#second-monster {
  animation-timing-function: linear;
  animation: sec_monster;
  animation-duration: 3s;
}
@keyframes sec_monster {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(5px);
  }
}
/*------------------------------
        THIRD MONSTER
------------------------------*/
#third-monster-leg {
  animation-timing-function: linear;
  animation: third-monster-leg;
  animation-duration: 1s;
}
@keyframes third-monster-leg {
  from {
    transform: rotate(0);
    transform-origin: top;
  }
  to {
    transform: rotate(55deg);

  }
}
#third-monster-leg-left {
  animation-timing-function: linear;
  animation: third-monster-leg-left;
  animation-duration: 1s;
}
@keyframes third-monster-leg-left {
  from {
    transform: rotate(0);
    transform-origin: top;
  }
  to {
    transform:  translateY(-18px) rotate(55deg);
    transform-origin: top;
  }
}
#third-monster {
  animation-timing-function: linear;
  animation: third-monster;
  animation-duration: 1s;
}
@keyframes third-monster {
  from {
    transform: translateX(-30px);
  }
  to {
    transform: translateX(15px) ;
  }
}