* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  user-select: none;
}

#adArea {
  overflow: hidden;
  position: relative;
  color: #fff;
  background-clip: content-box;
  cursor: pointer;
  border: 1px solid black;
  font-size: 14px;
  line-height: 1.3;
  background-color: #fae75a;
}

#adsArea * {
  box-sizing: border-box;
}

#preloader {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 101;
  background: #fff;
}

.linePreloader {
  width: 150px;
  height: 10px;
  background: linear-gradient(to right, #e3e3e3, #000);
  background-color: #fff;
  margin: auto;
  border-radius: 10px;
  background-size: 20%;
  background-repeat: repeat-y;
  background-position: -20% 0;
  animation: scroll 1.2s ease-in-out infinite;
  position: relative;
  top: 48%;
}

@keyframes scroll {
  50% {
    background-size: 80%;
  }

  100% {
    background-position: 125% 0;
  }
}

.abs {
  position: absolute;
}

.opacity0 {
  opacity: 0;
}

.noDisplay {
  display: none;
}

.noevent {
  pointer-events: none;
  touch-action: none;
  user-select: none;
}

.poslt {
  left: 0;
  top: 0;
}

.adsize {
  width: 300px;
  height: 600px;
}

.mw {
  max-width: 100%;
}

.drag-icon {
  width: 40px;
  left: 100px;
  bottom: 10px;
  animation: touchAnimation 3s ease-in-out infinite;
  touch-action: none;
  z-index: 9999;
}

/* .has-click .drag-icon {
    display: none;
} */

@keyframes touchAnimation {
  0% {
    transform: translateX(0) translateY(0);
  }

  50% {
    transform: translateX(70px) translateY(0px);
  }
  100% {
    transform: translateX(0px) translateY(0px);
  }
}

.drag {
  left: 50%;
  bottom: 10px;
  width: 100px;
  height: 50px;
  margin-left: -50px;
}

.drag img {
  max-width: 100%;
}

.touch-area {
  width: 60px;
  height: 30px;
  margin-top: 30px;
  margin-left: 20px;
  /* border: 1pxleft solid white; */
}

.sauce {
  transform-origin: 140px 600px;
}

.option {
  left: -10px;
  width: 150px;
  height: 24px;
  /* border: 1px solid black; */
  transform: rotate(-10deg);
  transform-origin: left center;
}
.option_1 {
  top: 125px;
}
.option_2 {
  top: 157px;
}
.option_3 {
  top: 185px;
}
.option_4 {
  top: 214px;
}

.sauce_txt {
  left: 30px;
}
.sauce_bg {
  transform: scale(0);
}

.last {
  left: 50px;
}

.cta {
  transform-origin: 40px 240px;
}

.t1 {
  left: -30px;
}
.logo {
  width: 110px;
  left: 5px;
  top: 5px;
}
.click_icon {
  max-width: 40px;
  right: 45px;
  bottom: 180px;
}

.instr {
  left: 50px;
  bottom: 10px;
  max-width: 200px;
}

.wrap-mouth {
  position: absolute;
  top: 0;
  left: 0;
  width: 86px;
  height: 63.5px;
  opacity: 0;
}

.wrap-mouth_1 {
  top: 211px;
  left: 42px;
  transform: scale(-1, 1);
}

.wrap-mouth_2 {
  top: 200px;
  left: 123px;
}

.wrap-mouth_3 {
  top: 268px;
  left: 13px;
}

.wrap-mouth_4 {
  top: 74px;
  left: 107px;
  transform: scale(-1, 1);
}

.mouth {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.mouth_2 {
  opacity: 0;
}

.f2_1 {
  left: -30px;
}

.f2_2 {
  transform: scale(0);
  transform-origin: 200px 110px;
}

.f2_3 {
  left: 10px;
}
.f2_4 {
  left: -10px;
}

.f2_5,
.f3_2 {
  top: 50px;
}

.f3_model {
  top: 50px;
}

.wrap-video {
  left: 2.5%;
  width: 95%;
  top: 218px;
  height: fit-content;
}
.esk_video {
  width: 100%;
}

.toggle-sound {
  position: absolute;
  top: -15px;
  right: -5px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #000;
  border: none;
  cursor: pointer;
}

.toggle-sound-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 20px;
  /* height: 24px; */
}