/* сам сайт */
  body {
    background-color: black;
    overflow-y: hidden;
    overflow-x: hidden;
  }
  .block {
    display: flex;
  }
  .block__side {
    flex: 0 0 300px;
    background-color: #77608d;
  }
  .block__body {
    padding: 0px 0px 0px 30px;
    flex: 1 1 auto;
    min-width: 0;
  }

  .wrapper1, .wrapper2, .wrapper4, .wrapper5, .wrapper7 {
    padding: 30px;
    min-height: 100%;
  }
  .image-slider {
    padding: 30px 0 70px 0;
  }
  .image-slider__wrapper {
  }
  .image-slider__slider {
  }
  .image-slider__image {
    text-align: center;
    margin-top: 1vw;
    margin-left: 26vw;
  }
  .image-slider__image img {
    max-width: 100%;
  }

  .image-slider .swiper-button-prev::after,
  .image-slider .swiper-button-next::after {
    color: #fff;
    font-size: 80px;
  }
  .image-slider .swiper-pagination-bullet {
    width: 20px;
    height: 20px;
    line-height: 20px;
    font-size: 14px;
    background-color: white;
  }

  .image-slider .swiper-button-prev {
    margin-left: 31vw;
  }
  .image-slider .swiper-button-next {
    margin-right: 1vw;
  }


  .main_6, .main_2, .main_4, .main_5, .main_7 {
    position: relative;
    width: 23.11vw;
    height: 28.89vw;
    background-image: url('../img/main6.jpg');
    background-size: cover;
    top: 9vh;
    left: 4vw;
    display: block;
  }

  .main_2 {
    background-image: url('../img/main2.jpg');
  }
  .main_4 {
    background-image: url('../img/main4.jpg');
  }
  .main_5 {
    background-image: url('../img/main5.jpg');
  }
  .main_7 {
    background-image: url('../img/main7.jpg');
  }

  span {
    font-size: 5vw;
    color: black;
    font-family: Voxel;
  }
  .look p:first-child {
    font-size: 5.56vw;
    color: black;
    display: flex;
    justify-content: center;
    position: relative;
    top: -4vw;
  }

  .side_black, .side_black2, .side_black4, .side_black5, .side_black7 {
    position: fixed;
    width: 30.63vw;
    height: 100vh;
    background: #3F3F3F;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    display: block;
    z-index: 12;
  }

  .side_black2 {
    display: none;
  }
  .side_black4 {
    display: none;
  }
  .side_black5 {
    display: none;
  }
  .side_black7 {
    display: none;
  }


  .side_black p:nth-child(1),
  .side_black2 p:nth-child(1),
  .side_black4 p:nth-child(1),
  .side_black5 p:nth-child(1),
  .side_black7 p:nth-child(1) {
    font-size: 3vw;
    position: fixed;
    top: 69vh;
    left: 1.46vw;
    color: white;
  }
  span {
    color: white;
  }
  .side_black p:nth-child(2),
  .side_black2 p:nth-child(2),
  .side_black4 p:nth-child(2),
  .side_black5 p:nth-child(2),
  .side_black7 p:nth-child(2) {
    position: fixed;
    top: 79vh;
    left: 1.25vw;
    color: white;
    width: 27.36vw;
  }
  .btn_order {
    background-color: #DFFB6E;
    justify-content: center;
    top: 93vh;;
    margin-left: auto;
    margin-right: auto;
    width: 13.89vw;
    height: 2.5vw;
    display: flex;
    border: 2px solid #DFFB6E;
    margin-left: auto;
    margin-right: auto;
    border-radius: 5px;
    margin-top: 39vh;

  }
  .btn_order:hover{
    color: black;
    background-color: white;
    border: 2px solid #DFFB6E;
    transition: .5s;
    cursor: pointer;
  }
  h3.zak {
    position: relative;
    margin: auto;
  }

  .glava1 {
    position: absolute;
    width: 8.26vw;
    height: 12.01vw;
    left: 35.97vw;
    top: 70vh;
  }
  h3.mini {
    color: white;
  }
  .img1 {
    position: relative;
    background-image: url("../img/main_1.png");
    background-size: cover;
    width: 8.33vw;
    height: 10.4vw;
  }

  .glava2 {
    position: absolute;
    width: 8.26vw;
    height: 12.01vw;
    left: 49.31vw;
    top: 70vh;
  }
  .img2 {
    position: relative;
    background-image: url("../img/main_2.png");
    background-size: cover;
    width: 8.33vw;
    height: 10.4vw;
  }

  .glava4 {
    position: absolute;
    width: 12.26vw;
    height: 12.01vw;
    left: 62.50vw;
    top: 70vh;
  }
  .img4 {
    position: relative;
    background-image: url("../img/main_4.png");
    background-size: cover;
    width: 8.33vw;
    height: 10.4vw;
  }

  .glava5 {
    position: absolute;
    width: 12.26vw;
    height: 12.01vw;
    left: 75.69vw;
    top: 70vh;
  }
  .img5 {
    position: relative;
    background-image: url("../img/main_5.png");
    background-size: cover;
    width: 8.33vw;
    height: 10.4vw;
  }

  .glava7 {
    position: absolute;
    width: 12.26vw;
    height: 12.01vw;
    left: 88.89vw;
    top: 70vh;
  }

  .img7 {
    position: relative;
    background-image: url("../img/main_7.png");
    background-size: cover;
    width: 8.33vw;
    height: 10.4vw;
  }


  @media all and (min-width: 415px) and (max-width: 820px) {

          body {
            background-color: #000000;
            background-size: cover;
            display: block;
            height: 100vh;
          }

    .side_black, .side_black2, .side_black4, .side_black5, .side_black7 {
      width: 100vw;
      height: 41.67vw;
      border-radius: 13px;
      top: 8.38vw;
    }
    .main_6, .main_2, .main_4, .main_5, .main_7 {
      width: 26.48vw;
      height: 33.2vw;
      top: 4vw;
    }

  .image-slider .swiper-button-prev {
    margin-left: 1vw;
    margin-top: 6vw;
  }
  .image-slider .swiper-button-next {
    margin-top: 6vw;
  }
  .image-slider__image {
    text-align: center;
    margin-top: 44vw;
    margin-left: 0vw;
  }
    .side_black span,
    .side_black2 span,
    .side_black4 span,
    .side_black5 span,
    .side_black7 span
{
      font-size: 8.98vw;
    }

    .side_black p:nth-child(1),
    .side_black2 p:nth-child(1),
    .side_black4 p:nth-child(1),
    .side_black5 p:nth-child(1),
    .side_black7 p:nth-child(1)  {
      font-size: 6.51vw;
      top: 5vw;
      left: 34vw;
    }
    .side_black p:nth-child(2),
    .side_black2 p:nth-child(2),
    .side_black4 p:nth-child(2),
    .side_black5 p:nth-child(2),
    .side_black7 p:nth-child(2)  {
    position: fixed;
    top: 23vw;
    left: 34vw;
    color: white;
    width: 62.36vw;
    }
    .btn_order {
      width: 26.04vw;
      height: 4.69vw;
      top: 40vw;
      left: 34vw;
    }

    h3.zak {
      font-size: 3.86vw;
    }
    .razv {
      width: 78vw;
      height: 48.44vw;
      top: 57vw;
      left: 11vw;
    }
    .glava1, .img1, .glava2, .img2, .glava5, .img5, .glava4, .img4, .glava7, .img7  {
      width: 14vw;
      height: 17.58vw;
    }
    .glava1, .glava2, .glava4, .glava5, .glava7 {
      top: 83vh;}
    .glava1 {left: 3vw;}
    .glava2 {left: 23vw;}
    .glava4 {left: 43vw;}
    .glava5 {left: 63vw;}
    .glava7 {left: 83vw;}

    h3.mini {
      font-size: 2.34vw;
    }
    .slider {
      width: 8vw;
      height: 8vw;
      position: absolute;
      left: 2.36vw;
      top: 72.81vw;
    }
    .slider1 {
      width: 8vw;
      height: 8vw;
      position: absolute;
      left: 89.36vw;
      top: 72.81vw;
    }
  }

  /* адаптивы для планшетов */
  @media screen and (min-width: 381px) and (max-width: 414px) {


    body {
      background-color: #000000;
      background-size: cover;
      display: block;
      height: 100vh;
    }
    .white {
      width: 100vw;
    }
    .text {
      font-size: 30px;
    }
    .close {
      left: 2vw;
    }
    .afisha, .skazka, .merch, .rugs, .custom {
      left: 2vw;
      width: 96vw;
      height: 18vw;
    }
    .afisha { top: 16vw;
    }
    .skazka { top: 34vw;
    }
    .merch { top: 52vw;
    }
    .rugs { top: 70vw;
    }
    .custom { top: 88vw;
    }
    .side_black,
    .side_black2,
    .side_black4,
    .side_black5,
    .side_black7 {
      width: 100vw;
      height: 61.67vw;
      border-radius: 13px;
      top: 14.38vw;
    }
    .main_6, .main_2, .main_4, .main_5, .main_7 {
      width: 33.4vw;
      height: 41.75vw;
      top: 9vw;
    }

    span.vox {
      font-size: 9vw;
    }

    .side_black p:nth-child(1),
    .side_black2 p:nth-child(1),
    .side_black4 p:nth-child(1),
    .side_black5 p:nth-child(1),
    .side_black7 p:nth-child(1)  {
      font-size: 6.7vw;
      top: 23vw;
      left: 41vw;
    }
    .side_black p:nth-child(2),
    .side_black2 p:nth-child(2),
    .side_black4 p:nth-child(2),
    .side_black5 p:nth-child(2),
    .side_black7 p:nth-child(2)  {
      position: fixed;
      top: 34vw;
      left: 41vw;
      color: white;
      width: 51.36vw;
      font-size: 2.9vw;
    }

    .btn_order {
      width: 26.04vw;
      height: 4.69vw;
      margin-left: 41vw;
      margin-top: 3vw;
    }
    h3.zak {
      font-size: 3.53vw;
    }
    .razv {
      width: 88vw;
      height: 54.83vw;
      top: 38.83vh;
      left: 6vw;
    }
    .glava1, .img1, .glava2, .img2, .glava5, .img5, .glava4, .img4, .glava7, .img7  {
      width: 20vw;
      height: 25.36vw;
    }
    .glava1, .glava2, .glava4 {
      top: 68vh;}
    .glava5, .glava7 {
      top: 84vh;
    }
    .glava1 {left: 11vw;}
    .glava2 {left: 40vw;}
    .glava4 {left: 69vw;}
    .glava5 {left: 25vw;}
    .glava7 {left: 54vw;}

    h3.mini {
      font-size: 3.5vw;
    }
    .slider {
      width: 10vw;
      height: 10vw;
      position: absolute;
      left: -2.64vw;
      top: 104.81vw;
    }
    .slider1 {
      width: 10vw;
      height: 10vw;
      position: absolute;
      left: 91.64vw;
      top: 104.81vw;
    }
    .wrapper {
    padding: 30px;
    min-height: 100%;
    margin-top: 64vw;
    }

    .image-slider__image {
      text-align: center;
      margin-top: 69vw;
      margin-left: 4vw;
  }

  .image-slider .swiper-button-prev {
    margin-left: 1vw;
}
}

  @media screen and (min-width: 200px) and (max-width: 380px) {

    body {
      background-color: #000000;
      background-size: cover;
      display: block;
      height: 100vh;
      overflow-x: hidden;
      overflow-y: hidden;
    }
    .white {
      width: 100vw;
    }
    .text {
      font-size: 30px;
    }
    .close {
      left: 2vw;
    }
    .afisha, .skazka, .merch, .rugs, .custom {
      left: 2vw;
      width: 96vw;
      height: 18vw;
    }
    .afisha { top: 16vw;
    }
    .skazka { top: 34vw;
    }
    .merch { top: 52vw;
    }
    .rugs { top: 70vw;
    }
    .custom { top: 88vw;
    }
    .side_black,
    .side_black2,
    .side_black4,
    .side_black5,
    .side_black7 {
      width: 100vw;
      height: 53.67vw;
      border-radius: 13px;
      top: 14.38vw;
    }
    .main_6, .main_2, .main_4, .main_5, .main_7 {
      width: 33.4vw;
      height: 41.75vw;
      top: 9vw;
    }

    span.vox {
      font-size: 9vw;
    }

    .side_black p:nth-child(1),
    .side_black2 p:nth-child(1),
    .side_black4 p:nth-child(1),
    .side_black5 p:nth-child(1),
    .side_black7 p:nth-child(1)  {
      font-size: 6.7vw;
      top: 23vw;
      left: 41vw;
    }
    .side_black p:nth-child(2),
    .side_black2 p:nth-child(2),
    .side_black4 p:nth-child(2),
    .side_black5 p:nth-child(2),
    .side_black7 p:nth-child(2)  {
      position: fixed;
      top: 34vw;
      left: 41vw;
      color: white;
      width: 51.36vw;
      font-size: 2.9vw;
    }

    .btn_order {
      width: 26.04vw;
      height: 4.69vw;
      margin-left: 41vw;
      margin-top: 3vw;
    }
    h3.zak {
      font-size: 3.53vw;
    }
    .razv {
      width: 88vw;
      height: 54.83vw;
      top: 38.83vh;
      left: 6vw;
    }
    .glava1, .img1, .glava2, .img2, .glava5, .img5, .glava4, .img4, .glava7, .img7  {
      width: 16vw;
      height: 20.36vw;
    }
    .glava1, .glava2, .glava4 {
      top: 71vh;}

    .glava5, .glava7 {
      top: 86vh;
    }
    .glava1 {left: 11vw;}
    .glava2 {left: 40vw;}
    .glava4 {left: 69vw;}
    .glava5 {left: 25vw;}
    .glava7 {left: 54vw;}

    h3.mini {
      font-size: 3.5vw;
      width: 26vw;
    }
    .slider {
      width: 10vw;
      height: 10vw;
      position: absolute;
      left: -2.64vw;
      top: 104.81vw;
    }
    .slider1 {
      width: 10vw;
      height: 10vw;
      position: absolute;
      left: 91.64vw;
      top: 104.81vw;
    }
    .wrapper {
      padding: 30px;
      min-height: 100%;
      margin-top: 64vw;
    }

    .image-slider__image {
      text-align: center;
      margin-top: 56vw;
      margin-left: 4vw;
  }

  .image-slider .swiper-button-prev {
    margin-left: 1vw;
    margin-top: 4vw;
  }
  .image-slider .swiper-button-next {
    margin-top: 4vw;
  }

  }