/*!*****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/.pnpm/css-loader@5.2.7_webpack@5.106.2/node_modules/css-loader/dist/cjs.js!./node_modules/.pnpm/vue-loader@15.11.1_css-load_c4fd8a3a1d70523407cc13639bce303f/node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/.pnpm/less-loader@8.1.1_less@4.6.4_webpack@5.106.2/node_modules/less-loader/dist/cjs.js!./node_modules/.pnpm/vue-loader@15.11.1_css-load_c4fd8a3a1d70523407cc13639bce303f/node_modules/vue-loader/lib/index.js??vue-loader-options!./src/FestikData/Boundaries/Views/Twig/play/error/no-billetterie/app/no-billetterie-app.vue?vue&type=style&index=0&id=3657a60f&lang=less ***!
  \*****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.ghost-canvas {
  position: relative;
  width: 300px;
  height: 200px;
  margin: 50px auto 0 auto;
}
.ghost-body {
  position: absolute;
  height: 28%;
  width: 22%;
  background-color: tomato;
  left: 40%;
  top: 33%;
  /*ANIMATION START*/
  animation-name: floating;
  animation-duration: 5s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  /*ANIMATION END*/
}
.ghost-body-copy {
  position: absolute;
  height: 28%;
  width: 22%;
  background-color: tomato;
  left: 40%;
  top: 33%;
  z-index: 1;
}
.ghost-head {
  position: absolute;
  height: 100%;
  width: 100%;
  top: -50%;
  background-color: tomato;
  border-radius: 90px;
}
.eye-right {
  position: absolute;
  height: 22%;
  width: 20%;
  right: 22%;
  top: 40%;
  background-color: white;
  border-radius: 50%;
}
.eye-left {
  position: absolute;
  height: 22%;
  width: 20%;
  left: 22%;
  top: 40%;
  background-color: white;
  border-radius: 50%;
}
.mouth {
  position: absolute;
  height: 26%;
  width: 24%;
  left: 38%;
  top: 70%;
  background-color: white;
  border-radius: 50%;
  z-index: 2;
}
.down-bubble {
  position: absolute;
  height: 55%;
  width: 100%;
  top: 70%;
}
.bubble-1 {
  position: absolute;
  height: 100%;
  width: 25%;
  background-color: tomato;
  border-bottom-left-radius: 50px;
  border-bottom-right-radius: 50px;
  /*ANIMATION START*/
  animation-name: bubble;
  animation-duration: 1.4s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  /*ANIMATION END*/
}
.bubble-2 {
  position: absolute;
  height: 100%;
  width: 25%;
  left: 25%;
  background-color: tomato;
  border-bottom-left-radius: 50px;
  border-bottom-right-radius: 50px;
  /*ANIMATION START*/
  animation-name: bubble;
  animation-duration: 1.6s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  /*ANIMATION END*/
}
.bubble-3 {
  position: absolute;
  height: 100%;
  width: 25%;
  right: 25%;
  background-color: tomato;
  border-bottom-left-radius: 50px;
  border-bottom-right-radius: 50px;
  /*ANIMATION START*/
  animation-name: bubble;
  animation-duration: 1.7s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  /*ANIMATION END*/
}
.bubble-4 {
  position: absolute;
  height: 100%;
  width: 25%;
  right: 0;
  background-color: tomato;
  border-bottom-left-radius: 50px;
  border-bottom-right-radius: 50px;
  /*ANIMATION START*/
  animation-name: bubble;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  /*ANIMATION END*/
}
/*ANIMATION START*/
@keyframes bubble {
0% {
    top: 0;
}
50% {
    top: 20%;
}
100% {
    top: 0;
}
}
@keyframes floating {
0% {
    top: 33%;
    opacity: 0.5;
}
30% {
    top: 40%;
    opacity: 0.3;
}
50% {
    top: 33%;
    opacity: 1;
}
70% {
    top: 25%;
}
100% {
    top: 33%;
    opacity: 0.5;
}
}
/*ANIMATION END*/