.farm #start {
  animation-duration: 2s;
  animation-delay: 0.5s; }

.farm #girl,
.farm #boy {
  animation-duration: .6s; }

.farm #start {
  left: 441px;
  top: 402px; }

.farm #word {
  top: 314px; }
  .farm #word.isReady {
    margin-top: 78px;
    transition: all 0.6s; }
  .farm #word.isPicked {
    margin-top: 20px; }

.farm #chose img {
  opacity: 0;
  transition: all 1.6s; }
  .farm #chose img.isReady {
    opacity: 1; }
  .farm #chose img.isPicked {
    transition: all 0.4s;
    opacity: 0; }

.popup {
  width: 100vw;
  height: 100vh;
  position: fixed;
  left: 0px;
  top: 0px;
  z-index: 100000;
  background: rgba(0, 0, 0, 0.7);
  overflow: hidden; }
  .popup .inner {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0px;
    top: 0px;
    padding: 15px;
    overflow: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center; }
  .popup #title {
    position: relative;
    left: 0;
    top: 0; }

body {
  background: none; }

#farmApp {
  background-image: url(../img/BG_farm.jpg);
  background-position: top center;
  position: fixed;
  width: 100%; }
  #farmApp .next_stage_btn {
    position: absolute;
    right: 0px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer; }
    #farmApp .next_stage_btn:hover {
      opacity: 0.65; }
  #farmApp .step1 .next_stage_btn {
    right: -137px;
    top: 300px; }
  #farmApp .step2 .next_stage_btn {
    right: -28px;
    top: 270px; }
  #farmApp .step3 .next_stage_btn {
    right: 86px;
    top: 212px; }
  #farmApp .step4 .next_stage_btn {
    right: 550px; }
  #farmApp .step5 .next_stage_btn {
    right: -300px;
    top: 414px; }
  #farmApp .step6 {
    z-index: 1; }
    #farmApp .step6 .next_stage_btn {
      right: 110px;
      top: 217px; }
  #farmApp .step7 .next_stage_btn {
    right: 7px;
    top: 245px; }
  #farmApp .step8 #title {
    z-index: 10; }
  #farmApp .step8 .next_stage_btn {
    right: 60px;
    top: 271px; }
  #farmApp .step9 .next_stage_btn {
    right: -60px; }
  #farmApp .step10 .next_stage_btn {
    right: 505px;
    margin-top: 25px; }
  #farmApp .step9 {
    z-index: 100; }
  #farmApp .path {
    position: absolute;
    left: 160px;
    top: 412px;
    z-index: 10;
    pointer-events: none; }
  #farmApp #myChar {
    position: absolute;
    left: 0px;
    top: 0px;
    z-index: 10; }
    #farmApp #myChar.boy {
      margin-left: -5px;
      margin-top: -105px;
      width: 62px; }
    #farmApp #myChar.girl {
      margin-left: -7px;
      margin-top: -108px;
      width: 67px; }
  #farmApp .passTitle {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%); }
  #farmApp .step4_cow_btn {
    position: absolute;
    left: 207px;
    top: 158px;
    cursor: pointer;
    transform-origin: left top;
    pointer-events: none; }
    #farmApp .step4_cow_btn.clicked {
      transform: scaleY(1.2) rotate(2deg) translateY(-5px);
      filter: brightness(1.025); }
    #farmApp .step4_cow_btn.musicPlayed {
      pointer-events: auto; }
  #farmApp .step4 #Q2 #bottle span {
    display: inline-block;
    position: relative; }
    #farmApp .step4 #Q2 #bottle span img {
      position: relative;
      z-index: 10; }
  #farmApp .step4 #Q2 #bottle .fill {
    position: absolute;
    width: calc(100% - 12px);
    height: 46px;
    left: 7px;
    bottom: 5px;
    overflow: hidden; }
    #farmApp .step4 #Q2 #bottle .fill .inner {
      width: 100%;
      height: 0%;
      position: absolute;
      left: 0px;
      bottom: 0px;
      background: white; }
  #farmApp .step5 #ok {
    opacity: 0;
    transform: scale(2); }
    #farmApp .step5 #ok.open {
      opacity: 1;
      transform: scale(1);
      transition: all .2s; }
  #farmApp .step5 #milk {
    opacity: 0;
    transform: scale(0.9); }
    #farmApp .step5 #milk.open {
      opacity: 1;
      transform: scale(1);
      transition: all .8s;
      transition-delay: 0.4s; }
  #farmApp .step5 .check {
    opacity: 0;
    transform: scale(1.5);
    transition: all .4s; }
    #farmApp .step5 .check.checked {
      opacity: 1;
      transform: scale(1); }
  #farmApp .step9 #game2 #gun {
    animation: unset; }
    #farmApp .step9 #game2 #gun.clicked {
      background-position: right center; }
  #farmApp .step9 .cell {
    transition: all 3s;
    transition-timing-function: linear;
    cursor: pointer; }
    #farmApp .step9 .cell img {
      pointer-events: none; }
  #farmApp .step10 .step10_cow_btn img {
    pointer-events: none; }
  #farmApp .step10 .step10_cow_btn img:nth-child(2) {
    display: none; }
  #farmApp .step10 .step10_cow_btn.clicked img:nth-child(1) {
    display: none; }
  #farmApp .step10 .step10_cow_btn.clicked img:nth-child(2) {
    display: block; }
  #farmApp .step10 #get {
    display: none; }
  #farmApp .step10 .light_box {
    width: 470px;
    height: 650px;
    position: relative;
    left: 167px;
    top: -326px; }
    #farmApp .step10 .light_box .light {
      transform-origin: center top;
      position: absolute; }
    #farmApp .step10 .light_box .light_reflection {
      transform-origin: center bottom;
      position: absolute;
      transition: margin 1s;
      opacity: 0; }
    #farmApp .step10 .light_box .pos {
      opacity: 0; }
      #farmApp .step10 .light_box .pos img {
        opacity: 0; }
      #farmApp .step10 .light_box .pos.go {
        opacity: 1; }
        #farmApp .step10 .light_box .pos.go img {
          opacity: 1; }
        #farmApp .step10 .light_box .pos.go .light {
          transition: all 1.6s;
          transition-timing-function: linear; }
    #farmApp .step10 .light_box .pos0 .light {
      left: 180px;
      top: 0px; }
    #farmApp .step10 .light_box .pos0 .light_reflection {
      left: 216px;
      top: 283px;
      transform: rotate(45deg); }
    #farmApp .step10 .light_box .pos0.go .light {
      margin-top: 630px; }
    #farmApp .step10 .light_box .pos0.touched .light {
      opacity: 0;
      transition: all 0s; }
    #farmApp .step10 .light_box .pos0.touched .light_reflection {
      opacity: 1;
      margin: -100% 0px 0px 100%; }
    #farmApp .step10 .light_box .pos1 .light {
      left: -100px;
      top: 22px;
      transform: rotate(-30deg); }
    #farmApp .step10 .light_box .pos1 .light_reflection {
      left: 234px;
      top: 283px;
      transform: rotate(45deg); }
    #farmApp .step10 .light_box .pos1.go .light {
      margin: 526px; }
    #farmApp .step10 .light_box .pos1.touched .light {
      opacity: 0;
      transition: all 0s; }
    #farmApp .step10 .light_box .pos1.touched .light_reflection {
      opacity: 1;
      margin: -100% 0px 0px 100%; }
    #farmApp .step10 .light_box .pos2 .light {
      left: -175px;
      top: 38px;
      transform: rotate(-45deg); }
    #farmApp .step10 .light_box .pos2 .light_reflection {
      left: 192px;
      top: 274px;
      transform: rotate(45deg); }
    #farmApp .step10 .light_box .pos2.go .light {
      margin: 590px; }
    #farmApp .step10 .light_box .pos2.touched .light {
      opacity: 0;
      transition: all 0s; }
    #farmApp .step10 .light_box .pos2.touched .light_reflection {
      opacity: 1;
      margin: -100% 0px 0px 100%; }
    #farmApp .step10 .light_box .pos3 .light {
      right: -94px;
      top: 24px;
      transform: rotate(30deg); }
    #farmApp .step10 .light_box .pos3 .light_reflection {
      right: 237px;
      top: 283px;
      transform: rotate(-45deg); }
    #farmApp .step10 .light_box .pos3.go .light {
      margin: 526px; }
    #farmApp .step10 .light_box .pos3.touched .light {
      opacity: 0;
      transition: all 0s; }
    #farmApp .step10 .light_box .pos3.touched .light_reflection {
      opacity: 1;
      margin: -100% 100% 0px 0px; }
    #farmApp .step10 .light_box .pos4 .light {
      right: -166px;
      top: 47px;
      transform: rotate(45deg); }
    #farmApp .step10 .light_box .pos4 .light_reflection {
      right: 196px;
      top: 280px;
      transform: rotate(-45deg); }
    #farmApp .step10 .light_box .pos4.go .light {
      margin: 580px; }
    #farmApp .step10 .light_box .pos4.touched .light {
      opacity: 0;
      transition: all 0s; }
    #farmApp .step10 .light_box .pos4.touched .light_reflection {
      opacity: 1;
      margin: -100% 100% 0px 0px; }

.dot_nav {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  font-size: 15px;
  color: #756152;
  padding-top: 59px;
  z-index: 100;
  transition: all .8s;
  left: -170px;
  opacity: 0;
  z-index: 1000; }
  .dot_nav.hasChar {
    left: 30px;
    opacity: 1; }
  .dot_nav .bg {
    position: absolute;
    left: 0px;
    top: 0px; }
  .dot_nav .list {
    position: relative;
    z-index: 100; }
  .dot_nav .item {
    position: relative;
    opacity: 0;
    cursor: pointer; }
    .dot_nav .item span:last-child {
      text-shadow: 0px 0px 10px #feffab; }
    .dot_nav .item:hover, .dot_nav .item.now {
      opacity: 1; }
    .dot_nav .item:before {
      content: 'step';
      position: relative;
      display: inline-block;
      font-size: 15px;
      text-shadow: 0px 0px 10px #feffab; }
    .dot_nav .item:nth-child(1) {
      margin-left: -13px; }
    .dot_nav .item:nth-child(2) {
      margin-top: -5px;
      margin-left: 1px; }
    .dot_nav .item:nth-child(3) {
      margin-left: 11px;
      margin-top: -2px; }
    .dot_nav .item:nth-child(4) {
      margin-left: 14px;
      margin-top: 1px; }
    .dot_nav .item:nth-child(5) {
      margin-left: 11px;
      margin-top: 0px; }
    .dot_nav .item:nth-child(6) {
      margin-left: -2px;
      margin-top: 5px; }
    .dot_nav .item:nth-child(7) {
      margin-left: -15px;
      margin-top: -1px; }
    .dot_nav .item:nth-child(8) {
      margin-left: -23px;
      margin-top: 0px; }
    .dot_nav .item:nth-child(9) {
      margin-left: -22px;
      margin-top: -2px; }
    .dot_nav .item:nth-child(10) {
      margin-left: -16px;
      margin-top: -2px; }
    .dot_nav .item:nth-child(11) {
      margin-left: -3px;
      margin-top: -6px; }
  .dot_nav .step_num {
    position: relative;
    display: inline-flex;
    width: 30px;
    height: 30px;
    justify-content: center;
    align-items: center;
    align-content: center;
    border-radius: 10000px;
    background: #756152;
    border: solid 3px #fb9008;
    color: white; }