.animated {
  .saloon {
    #person {
      animation-name: person_animation;
      animation-duration: 10s;
      animation-iteration-count: infinite;
      animation-timing-function: ease-in-out;
      animation-direction: alternate;
    }

    #head {
      animation-name: head_animation;
      animation-duration: 2s;
      animation-iteration-count: infinite;
      animation-timing-function: ease-in-out;
      animation-direction: alternate;
    }

    #mouth {
      animation-name: mouth_animation;
      animation-duration: 2s;
      animation-iteration-count: infinite;
      animation-timing-function: ease-in-out;
      animation-direction: alternate;
      transform-origin: 4792px 4125px;
    }

    #title_1_ {
      animation-name: title_animation;
      animation-duration: 5s;
      animation-iteration-count: infinite;
      animation-timing-function: ease-in-out;
      animation-direction: alternate;
    }
  }
}

@keyframes person_animation {
  100% {
    translate: -200px 0;
  }
}

@keyframes head_animation {
  100% {
    translate: 0px 70px;
  }
}

@keyframes mouth_animation {
  0% {
    translate: 0px 0px;
    rotate: 0deg;
  }
  30% {
    translate: 0px 0px;
    rotate: 0deg;
  }
  70% {
    translate: 100px 0px;
    rotate: -15deg;
  }
  100% {
    translate: 100px 0px;
    rotate: -15deg;
  }
}

@keyframes title_animation {
  100% {
    translate: 0px -500px;
  }
}
