.burger {
    display:block;
    cursor:pointer;
    width:20px;
    height:20px;
    display:flex;
    align-items:center;
    transition:.3s ease;
    z-index:7
  }
  .burger,
  .burger__content {
    position:relative
  }
  .burger span {
    display:block;
    width:18px;
    height:2px;
    position:absolute;
    left:1px
  }
  .burger span:after,
  .burger span:before {
    content:"";
    position:absolute;
    top:0;
    width:50%;
    height:100%;
    background-color:#9b9db1;
    transition:.3s ease
  }
  .burger span:before {
    left:0;
    border-radius:20px 0 0 20px
  }
  .burger span:after {
    right:0;
    border-radius:0 20px 20px 0
  }
  .burger__line-top {
    top:-6px
  }
  .burger__line-mid {
    position:relative
  }
  .burger__line-bot {
    top:6px
  }
  @media not all and (hover:none) and (pointer:coarse) {
    .burger:hover span:after,
    .burger:hover span:before {
      background-color:#ff6e40
    }
  }
  @media (hover:none) and (pointer:coarse) {
    .burger:active {
      -webkit-tap-highlight-color:transparent
    }
    .burger:active span:after,
    .burger:active span:before {
      background-color:#ff6e40
    }
  }
  .burger.active {
    position:fixed;
    top:20px;
    right: 20px;
    z-index: 5;
  }
  .burger.active .burger__line-top {
    top:-4px
  }
  .burger.active .burger__line-top:before {
    transform:rotate(45deg);
    width:60%
  }
  .burger.active .burger__line-top:after {
    transform:rotate(-45deg);
    width:60%
  }
  .burger.active .burger__line-mid {
    position:relative
  }
  .burger.active .burger__line-mid:after,
  .burger.active .burger__line-mid:before {
    opacity:0
  }
  .burger.active .burger__line-mid:before {
    transform:translateX(-50px)
  }
  .burger.active .burger__line-mid:after {
    transform:translateX(50px)
  }
  .burger.active .burger__line-bot {
    top:4px
  }
  .burger.active .burger__line-bot:before {
    transform:rotate(-45deg);
    width:60%
  }
  .burger.active .burger__line-bot:after {
    transform:rotate(45deg);
    width:60%
  }

  .header__burger {
    margin-right: 20px;
  }

  .burger-menu {
    height:100%;
    background-color:#141414;;
    display:flex;
    flex-direction:column;
    width:236px;
    height:100vh;
    padding:20px 16px;

  }
  .burger-menu__back {
    height:100vh;
    width:100vw;
    position:absolute;
    left:0;
    top:0;
    z-index:-1
  }
  .burger-menu__back_hidden {
    left:auto;
    right:0
  }
  .burger-menu__logo {
    flex:none;
    width:116px;
    height:26px;
    background-image:url(../img/logo.svg);
    background-size:contain;
    background-position:50%;
    background-repeat:no-repeat;
    cursor:pointer
  }
  .burger-menu__nav {
    margin-top:16px;
    display:flex;
    flex-direction:column
  }
  .burger-menu__nav-elem {
    font-weight:500;
    font-size:15px;
    line-height:20px;
    color:#9b9db1;
    padding:12px 0;
    border-bottom:1px solid #1c1d27;
    transition:.3s ease;
    cursor:pointer
  }
  .burger-menu__nav-elem_gleam {
    color:#beff34;
    display:flex;
    align-items:center;
    gap:6px;
    height:fit-content
  }
  .burger-menu__nav-elem_gleam .svg {
    width:12px;
    height:12px
  }
  .burger-menu__nav-elem_easy {
    color:#ff6e40
  }
  .burger-menu__nav-elem_help {
    color:#beff34
  }
  .burger-menu__nav-elem_bp {
    color:#ffb738
  }
  .burger-menu__nav-elem_new:after {
    content:"new";
    background-color:#ff6e40;
    color:#000;
    font-family:TT Firs Neue;
    font-style:normal;
    font-weight:600;
    font-size:12px;
    line-height:12px;
    border-radius:3px;
    padding:0 3px
  }
  .burger-menu__nav-elem_sound .sound-switcher__slider {
    display:none
  }
  @media not all and (hover:none) and (pointer:coarse) {
    .burger-menu__nav-elem:hover {
      color:#ff6e40
    }
  }
  @media (hover:none) and (pointer:coarse) {
    .burger-menu__nav-elem:active {
      -webkit-tap-highlight-color:transparent;
      color:#ff6e40
    }
}

.header__burger-menu {
    position: fixed;
    /* z-index: 4; */
    right: 0;
    top: 0;
    transition: .3s ease;
    transform: translateX(+100%);
}

.header__burger-menu.active {
    transform: translateX(0);
}

@media only screen and (min-width: 1100px) {
    .header__burger {
      display: none !important;
    }
}