.ui-draggable-dragging{
    z-index: 999;
}
.puz-4-1{
    background-position: 31px 38px;
    
}

.puz-4-2 {
    background-position: -171px 38px;
    
}

.puz-4-3 {
    background-position: 31px -164px;
    
}

.puz-4-4 {
    background-position: -171px -164px;
    
}

.puz-6-1 {
    background-position: 31px 38px;
    
}

.puz-6-2 {
    background-position: -171px 38px;
    
}

.puz-6-3 {
    background-position: 31px -97px;
    
}

.puz-6-4 {
    background-position: -171px -97px;
    
}

.puz-6-5 {
    background-position: 31px -232px;
    
}

.puz-6-6 {
    background-position: -171px -232px;
    
}

.puz-9-1 {
    background-position: 31px 38px;
    
}

.puz-9-2 {
    background-position: -171px 38px;
    
}

.puz-9-3 {
    background-position: 31px -64px;
    
}

.puz-9-4 {
    background-position: -171px -64px;
    
}

.puz-9-5 {
    background-position: 31px -164px;
    
}

.puz-9-6 {
    background-position: -171px -164px;
    
}

.puz-9-7 {
    background-position: 31px -265px;
    
}

.puz-9-8 {
    background-position: -171px -265px;
    
}

.dragbrick.ui-draggable-dragging{
    transform: rotate(0) !important;
    z-index: 9999;
}

.hold-mill .mill-top{
    animation-duration: 0s !important;
    transition: transform 0.1s;
}

.video-player{
    z-index: 1;
    position: absolute;
}

.box-picture.ui-draggable-dragging{
    z-index: 9999 !important;
}
.hold-aircraft.aircraft-go{
    transition: transform 0.2s;
}

.locomotive .train-wheel{
    animation-duration: 0s !important;
}

.hold-aircraft{
    transition: transform 0.2s;
}

.played{
    color: #CE240D !important;
}
.chamomile-circle{
    z-index: 4;
}

.ui-draggable-dragging{
    z-index: 9999 !important;
}
.dropBlock{
    position: absolute;
    width: 243px;
    height: 189px;
    top: 172px;
    left: 373px;
}
.drag-over-dropable{
    opacity: 0.8 ;
}

.box-picture img {
    padding-top: 35px;
    width: 80%;
}

.patter .box-picture .inner-picture {
    width: 320px !important;
    height: 320px !important;
}

.patter .hold-patter .box-picture {
    height: 300px !important;
}

.patter .hold-patter .box-picture:before {
        right: 55px;
    }

.patter .hold-patter .box-picture .btn-sound {
        right: 55px;
 }





 /* Размеры пазлы */
@media (max-width: 480px) {
    .puz-4-1 {
        background-position: 7.6732673267vw 9.4059405941vw;
      }
      
      .puz-4-2 {
        background-position: -42.3267326733vw 9.4059405941vw;
      }
      
      .puz-4-3 {
        background-position: 7.6732673267vw -40.5940594059vw;
      }
      
      .puz-4-4 {
        background-position: -42.3267326733vw -40.5940594059vw;
      }
      
      .puz-6-1 {
        background-position: 7.6732673267vw 9.4059405941vw;
      }
      
      .puz-6-2 {
        background-position: -42.3267326733vw 9.4059405941vw;
      }
      
      .puz-6-3 {
        background-position: 7.6732673267vw -24.0099009901vw;
      }
      
      .puz-6-4 {
        background-position: -42.3267326733vw -24.0099009901vw;
      }
      
      .puz-6-5 {
        background-position: 7.6732673267vw -57.4257425743vw;
      }
      
      .puz-6-6 {
        background-position: -42.3267326733vw -57.4257425743vw;
      }
      
      .puz-9-1 {
        background-position: 7.6732673267vw 9.4059405941vw;
      }
      
      .puz-9-2 {
        background-position: -42.3267326733vw 9.4059405941vw;
      }
      
      .puz-9-3 {
        background-position: 7.6732673267vw -15.8415841584vw;
      }
      
      .puz-9-4 {
        background-position: -42.3267326733vw -15.8415841584vw;
      }
      
      .puz-9-5 {
        background-position: 7.6732673267vw -40.5940594059vw;
      }
      
      .puz-9-6 {
        background-position: -42.3267326733vw -40.5940594059vw;
      }
      
      .puz-9-7 {
        background-position: 7.6732673267vw -65.5940594059vw;
      }
      
      .puz-9-8 {
        background-position: -42.3267326733vw -65.5940594059vw;
      }
      
      .wrap-puzzle {
        width: 100vw;
        min-height: 100.495049505vw;
        margin-left: -16px;
        transform: scale(0.95);
      }
      
      .wrap-puzzle .item-puzzle {
        display: inline-block;
        vertical-align: top;
        margin: 0.2475247525vw;
        width: 49.504950495vw;
        height: 49.504950495vw;
        background-color: #fff;
        border-radius: 20px;
        background-repeat: no-repeat;
      }
      
      .wrap-puzzle.puzzle-six .item-puzzle {
        height: 32.9207920792vw;
      }
      
      .wrap-puzzle.puzzle-eight .item-puzzle {
        height: 24.504950495vw;
      }
}

/* size scrorogovorki */

@media (max-width: 480px) {
    .patter .hold-patter .box-picture {
        width: 100vw;
        height: 81.5217391304vw !important;
        margin: 0 auto;
        margin: 0;
        margin-left: -16px;
        -webkit-transform: scale(0.95);
            -ms-transform: scale(0.95);
                transform: scale(0.95);
      }
      
      .patter .hold-patter .box-picture:before {
        right: 14.9456521739vw;
        top: -1.3586956522vw;
        width: 22.0108695652vw;
        height: 22.0108695652vw;
      }
      
      .patter .box-picture .inner-picture {
        width: 86.9565217391vw !important;
        height: 86.9565217391vw !important;
        border: 4.3360433604vw solid #fff;
        margin-left: auto;
        margin-right: auto;
      }
      
      .patter .hold-patter .box-picture .btn-sound {
        right: 14.9456521739vw;
        top: -1.3586956522vw;
        width: 22.0108695652vw;
        height: 22.0108695652vw;
      }
      
      .hold-patter .box-picture .btn-sound:before {
        width: 7.6086956522vw;
        height: 8.6956521739vw;
        margin: -6.5217391304vw 0 0 -1.6304347826vw;
      }
      
      .box-picture img {
        padding-top: 9.5108695652vw;
      }
}

@media (max-width: 750px) {
    .game-stairs {
        width: 100vw;
        background: url(../images/stairs.png) 17.0666666667vw 100% no-repeat;
        background-size: 82.9333333333vw 42.4vw;
        height: 64.6666666667vw;
        margin: -1.6vw auto 10.6666666667vw;
        margin-left: -16px;
        transform: scale(0.95);
      }
      
      
      .game-stairs .stairs-door {
        top: -2.4vw;
        width: 19.2vw;
        height: 17.0666666667vw;
        margin: 0 0 0 -9.4666666667vw;
        background-size: contain;
      }
      
      .game-stairs .step-white {
        top: 55.3333333333vw;
        left: 0.5333333333vw;
        border: 0.6666666667vw solid rgba(255, 255, 255, 0.6);
        width: 16.5333333333vw;
        height: 8.2666666667vw;
        font-size: 5.3333333333vw;
        line-height: 6.9333333333vw;
      }
      
      .game-stairs .step-white.step02 {
        top: 47.0666666667vw;
        left: 8.8vw;
      }
      
      .game-stairs .step-white.step03 {
        top: 38.8vw;
        left: 17.0666666667vw;
      }
      
      .game-stairs .step-white.step04 {
        top: 30.5333333333vw;
        left: 25.3333333333vw;
      }
      
      .game-stairs .step-white.step05 {
        top: 22.2666666667vw;
        left: 33.6vw;
      }
      
      .game-stairs .step-white.step06 {
        top: 14vw;
        left: 41.8666666667vw;
      }
      
      .game-stairs .key {
        position: absolute;
        top: 41.4666666667vw;
        left: 0.8vw;
        width: 5.6vw;
        height: 12vw;
        background-size: contain;
      }
      
      .game-stairs .brick {
        width: 17.6vw;
        height: 9.4666666667vw;
        font-size: 5.3333333333vw;
        line-height: 8.2666666667vw;
      }

      .game-stairs .brick[data-place="0"] {
        left: 45.2vw !important;
        top: 55.2vw !important;
      }
      
      .game-stairs .brick.on-position[data-place="0"] {
        left: 0vw !important;
        top: 55.2vw !important;
      }
      
      .game-stairs .brick[data-place="01"] {
        left: 58.6666666667vw !important;
        top: 50.4vw !important;
      }
      
      .game-stairs .brick.on-position[data-place="01"] {
        left: 8.2666666667vw !important;
        top: 46.9333333333vw !important;
      }
      
      .game-stairs .brick[data-place="03"] {
        left: 45.7333333333vw !important;
        top: 43.0666666667vw !important;
      }

      .game-stairs .brick[data-place="02"] {
        left: 16.5333333333vw !important;
        top: 38.6666666667vw !important;
      }
      
      .game-stairs .brick.on-position[data-place="02"] {
        left: 41.3333333333vw !important;
        top: 14vw !important;
      }
      
      .game-stairs .brick.on-position[data-place="03"] {
        left: 34.5333333333vw !important;
        top: 38.6666666667vw !important;
      }
      
      .game-stairs .brick[data-place="04"] {
        left: 33.7333333333vw !important;
        top: 51.6vw !important;
      }
      
      .game-stairs .brick.on-position[data-place="04"] {
        left: 24.8vw !important;
        top: 30.4vw !important;
      }
      
      .game-stairs .brick[data-place="05"] {
        left: 70.6666666667vw !important;
        top: 53.0666666667vw !important;
      }
      
      .game-stairs .brick.on-position[data-place="05"] {
        left: 33.0666666667vw !important;
        top: 22.2666666667vw !important;
      }
      
      .game-stairs .brick[data-place="06"] {
        left: 32vw !important;
        top: 40vw !important;
      }
      
      .game-stairs .brick.on-position[data-place="06"] {
        left: 41.3333333333vw !important;
        top: 14vw !important;
      }
}




@media (min-width: 667px) and (max-width: 932px) {
  .box-picture {
    width: 9.6875vw;
    height: 9.6875vw;
    margin: 0 0.5208333333vw 3.9583333333vw;
  }
  
  .box-picture .inner-picture {
    background: #e6f9ff;
    max-width: 8.4375vw;
    max-height: 8.4375vw;
    border: 0.625vw solid #fff;
  }
  
  .box-picture1 .inner-picture img {
    width: 13.0208333333vw !important;
    height: 13.5416666667vw !important;
  }
  
  .box-picture2 {
    width: 9.6875vw;
    height: 9.6875vw;
    margin: 0 0.5208333333vw 3.9583333333vw;
  }
  
  .box-picture2 .inner-picture img {
    width: 18.2291666667vw !important;
    height: 18.75vw !important;
  }
  
  .box-picture .btn-sound {
    top: -0.2083333333vw;
    right: -0.2604166667vw;
    width: 2.7083333333vw;
    height: 2.7083333333vw;
  }
  
  .box-picture .btn-sound:before {
    width: 1.0416666667vw;
    height: 1.1979166667vw;
    margin: -0.7291666667vw 0 0 -0.4166666667vw;
    background-size: contain;
  }
  
  .box-picture:before {
    width: 2.96875vw;
    height: 2.96875vw;
    top: -0.2083333333vw;
    right: -0.2604166667vw;
  }
  
  .connect-pictures .letter-pictures {
    font-size: 11.4583333333vw;
    line-height: 12.5vw;
  }
  
  .box-picture .picture-arrow {
    width: 0.4166666667vw;
    margin: 0 0 0 -0.2083333333vw;
  }
  
  .box-picture .picture-arrow:after {
    margin: 0 0 0 -0.9375vw;
    width: 1.875vw;
    height: 1.6666666667vw;
  }
  
  .box-picture.arrow-red .picture-arrow:after,
  .box-picture.arrow-green .picture-arrow:after {
    width: 4.0104166667vw;
    margin: 0 0 -1.3020833333vw -1.9791666667vw;
    height: calc(100% + 1.3020833333vw);
  }
  
  .box-picture .picture-arrow:before {
    bottom: 1.6666666667vw;
    width: 0.4166666667vw;
  }
  
  .box-picture:hover .picture-arrow,
  .box-picture.selected .picture-arrow,
  .box-picture.arrow-green .picture-arrow,
  .box-picture.arrow-red .picture-arrow {
    height: 3.6458333333vw;
  }
  
  .connect-pictures .col:first-child .picture-arrow {
    top: 8.75vw;
    left: 7.5520833333vw;
  }
  
  .connect-pictures .col:first-child .box-picture:hover .picture-arrow,
  .connect-pictures .col:first-child .box-picture.selected .picture-arrow,
  .connect-pictures .col:first-child .box-picture.arrow-green .picture-arrow,
  .connect-pictures .col:first-child .box-picture.arrow-red .picture-arrow {
    height: 9.9479166667vw;
    top: 7.1354166667vw;
    left: 10.9375vw;
  }
  
  .connect-pictures .col:nth-child(3) .picture-arrow {
    top: 8.75vw;
    right: 7.5520833333vw;
  }
  
  .connect-pictures .col:nth-child(3) .box-picture:hover .picture-arrow,
  .connect-pictures .col:nth-child(3) .box-picture.selected .picture-arrow,
  .connect-pictures .col:nth-child(3) .box-picture.arrow-green .picture-arrow,
  .connect-pictures .col:nth-child(3) .box-picture.arrow-red .picture-arrow {
    height: 9.9479166667vw;
    top: 7.1354166667vw;
    right: 10.9375vw;
  }
  
  .connect-basket {
    height: 10.9375vw;
    width: 15.625vw;
    margin: 0 auto 1.5625vw;
  }
  
  .connect-basket .inner-basket {
    width: 52.0833333333vw;
    top: -8.8541666667vw;
    margin: 0 0 0 -26.0416666667vw;
  }
  
  .pictures-basket .box-picture {
    width: 13.75vw;
    height: 13.75vw;
    margin: 0 0.5208333333vw 2.1875vw;
  }
  
  .pictures-basket .box-picture .inner-picture {
    width: 12.0833333333vw;
    max-width: 12.0833333333vw;
    height: 12.0833333333vw;
    max-height: 12.0833333333vw;
    border-width: 0.8333333333vw;
  }
  
  .pictures-basket .box-picture .btn-sound {
    top: -0.3125vw;
    right: -0.3125vw;
    width: 4.1666666667vw;
    height: 4.1666666667vw;
  }
  
  .pictures-basket .box-picture .btn-sound:before {
    width: 1.4583333333vw;
    height: 1.6666666667vw;
    margin: -1.1458333333vw 0 0 -0.4166666667vw;
  }
  
  .pictures-basket .box-picture:before {
    width: 4.1666666667vw;
    height: 4.1666666667vw;
    top: -0.3125vw;
    right: -0.3125vw;
  }
  
  .connect-pictures.pictures-basket {
    max-width: 51.5625vw;
    padding: 2.6041666667vw 0 0;
  }

  .dropBlock {
    width: 12.65625vw;
    height: 9.84375vw;
    top: 8.9583333333vw;
    left: 19.4270833333vw;
  }
  
  .connect-basket .inner-basket img {
    width: 32.03125vw;
    height: auto; /* Оставляем без изменений, так как высота не задана в пикселях */
  }

  .connect-pictures, .connect-pictures.pictures-basket {
    margin-left: auto;
    margin-right: auto;
  }

  .connect-pictures .letter-pictures {
    font-size: 11.4583333333vw;
    line-height: 12.5vw;
  }
  
  .connect-pictures {
    max-width: 47.0833333333vw;
  }

  .connect-pictures .row {
    margin: 0 -0.78125vw;
  }
  
  .connect-pictures .row > .col {
    padding: 0 0.78125vw;
  }

  .box-picture img {
    padding-top: 1.875vw !important;
  }

  .connect-pictures .letter-pictures img {
    max-width: 13.6458333333vw;
    height: auto !important;
  }

  .patter .hold-patter .box-picture {
    height: 15.625vw;
  }
  
  .hold-patter .box-picture {
    display: block;
    width: 19.1666666667vw;
    height: 20.8333333333vw;
    margin: 0 auto 1.40625vw;
  }
  
  .hold-patter .box-picture .inner-picture {
    width: 20.8333333333vw !important;
    height: 20.8333333333vw !important;
    border: 0.8333333333vw solid #fff;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    max-width: initial;
    max-height: initial;
  }
  
  .hold-patter .box-picture:before {
    width: 4.21875vw;
    height: 4.21875vw;
    top: -0.2604166667vw;
    right: -0.3125vw;
    z-index: 9;
  }
  
  .hold-patter .box-picture .btn-sound {
    top: -0.2604166667vw;
    right: -0.3125vw;
    width: 4.21875vw;
    height: 4.21875vw;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
  }
  
  .hold-patter .box-picture .btn-sound:before {
    width: 1.4583333333vw;
    height: 1.6666666667vw;
    background-size: contain;
    margin: -1.25vw 0 0 -0.3125vw;

    margin: 0;
        position: initial;
  }

  .patter .hold-patter .box-picture {
    height: 15.625vw !important;
  }

  .box-picture img {
    height: auto;
  }

  .patter .hold-patter .box-picture .btn-sound, .patter .hold-patter .box-picture:before {
    right: 0;
  }
}

@media (max-width: 480px) {
  .connect-pictures.pictures-basket, .connect-pictures {
      width: 100vw;
      margin-bottom: 0vw;
      padding: 5.0505050505vw 0vw 0vw;
      margin-left: -16px;
      padding-left: 1.5151515152vw;
      padding-right: 1.5151515152vw;
    }
    
    .connect-pictures .row {
      margin: 0vw -1.5151515152vw;
    }
    
    .connect-pictures .row > .col {
      padding: 0vw 1.5151515152vw;
    }
    
    .pictures-basket .box-picture, .connect-pictures .box-picture {
      width: 26.6666666667vw;
      height: 26.6666666667vw;
      margin: 0vw 1.0101010101vw 4.2424242424vw;
    }
    
    .pictures-basket .box-picture:before, .connect-pictures .box-picture:before{
      width: 8.0808080808vw;
      height: 8.0808080808vw;
      top: -0.6060606061vw;
      right: -0.6060606061vw;
    }
    
    .pictures-basket .box-picture .inner-picture , .connect-pictures .box-picture .inner-picture {
      width: 23.4343434343vw;
      height: 23.4343434343vw;
      border-width: 1.6161616162vw;
    }
    
    .pictures-basket .box-picture .btn-sound, .connect-pictures .box-picture .btn-sound{
      top: -0.6060606061vw;
      right: -0.6060606061vw;
      width: 8.0808080808vw;
      height: 8.0808080808vw;
    }
    
    .pictures-basket .box-picture .btn-sound:before, .connect-pictures .box-picture .btn-sound:before{
      width: 2.8282828283vw;
      height: 3.2323232323vw;
      background-size: contain;
      margin: -2.2222222222vw 0vw 0vw -0.8080808081vw;
    }
  
    .connect-basket {
      height: 21.2121212121vw;
      width: 30.303030303vw;
      margin: 0 auto 3.0303030303vw;
    }
    
    .connect-basket .inner-basket {
      width: 101.0101010101vw;
      top: -17.1717171717vw;
      margin: 0 0 0 -50.5050505051vw;
    }
    
    .dropBlock {
      width: 24.5454545455vw;
      height: 19.0909090909vw;
      top: 17.3737373737vw;
      left: 37.6767676768vw;
    }
    
    .connect-basket .inner-basket img {
      width: 62.1212121212vw;
      height: auto;
      z-index: 9;
    }
}

@media (min-width: 481px) and (max-width: 932px) {
  

  .container-puzzle {
    display: flex;
    justify-content: space-between;
  }

  .puz-4-1 {
    background-position: 2.5833333333vw 3.1666666667vw;
  }
  
  .puz-4-2 {
    background-position: -14.25vw 3.1666666667vw;
  }
  
  .puz-4-3 {
    background-position: 2.5833333333vw -13.6666666667vw;
  }
  
  .puz-4-4 {
    background-position: -14.25vw -13.6666666667vw;
  }
  
  .puz-6-1 {
    background-position: 2.5833333333vw 3.1666666667vw;
  }
  
  .puz-6-2 {
    background-position: -14.25vw 3.1666666667vw;
  }
  
  .puz-6-3 {
    background-position: 2.5833333333vw -8.0833333333vw;
  }
  
  .puz-6-4 {
    background-position: -14.25vw -8.0833333333vw;
  }
  
  .puz-6-5 {
    background-position: 2.5833333333vw -19.3333333333vw;
  }
  
  .puz-6-6 {
    background-position: -14.25vw -19.3333333333vw;
  }
  
  .puz-9-1 {
    background-position: 2.5833333333vw 3.1666666667vw;
  }
  
  .puz-9-2 {
    background-position: -14.25vw 3.1666666667vw;
  }
  
  .puz-9-3 {
    background-position: 2.5833333333vw -5.3333333333vw;
  }
  
  .puz-9-4 {
    background-position: -14.25vw -5.3333333333vw;
  }
  
  .puz-9-5 {
    background-position: 2.5833333333vw -13.6666666667vw;
  }
  
  .puz-9-6 {
    background-position: -14.25vw -13.6666666667vw;
  }
  
  .puz-9-7 {
    background-position: 2.5833333333vw -22.0833333333vw;
  }
  
  .puz-9-8 {
    background-position: -14.25vw -22.0833333333vw;
  }
  
  .wrap-puzzle {
    width: 33.6666666667vw;
    min-height: 33.8333333333vw;
  }
  
  .wrap-puzzle .item-puzzle {
    display: inline-block;
    vertical-align: top;
    margin: 0.0833333333vw;
    width: 16.6666666667vw;
    height: 16.6666666667vw;
    background-color: #fff;
    border-radius: 20px;
    background-repeat: no-repeat;
    background-size: 28.25vw, 28.4166666667vw;
    
  }

 
  
  .wrap-puzzle.puzzle-six .item-puzzle {
    height: 11.0833333333vw;
  }
  
  .wrap-puzzle.puzzle-eight .item-puzzle {
    height: 8.25vw;
  }

  .list-btn .btn {
    margin: 0 0 10px;
}

.list-btn .btn {
  font-size: 12px;
}

.container-puzzle .col-btn {
  width: auto;
}
.container-puzzle .col-btn:first-child {
  align-self: center;
}
}