@media (max-width:576px) {
  #map {
    height: 354px
  }
}

@media (min-width:577px) {
  #map {
    height: 684px
  }
}

@media (max-width:991px) {
  .margin-top-100 {
    margin-top: 60px
  }

  header {
    padding: 10px 0
  }

  .main-menu {
    flex-direction: column;
    opacity: 0;
    visibility: hidden;
    position: fixed;
    top: 0;
    right: 0;
    width: 0;
    height: 100%
  }

  .main-menu ul {
    flex-direction: column;
  }

  .main-menu ul li {
    margin-top: 14px;
    margin-top: 0;
    margin-bottom: 26px;
    text-align: center
  }

  .first.menu-item-1 {
    margin-top: 52px
  }

  .brand-logo img {
    background-color: black;
  }

  .menu-open .main-menu {
    position: fixed;
    z-index: 2;
    background: black;
    opacity: 1;
    visibility: visible;
    top: 0;
    right: 0;
    width: 85%;
    height: 100%;
    overflow: auto
  }

  header .first.menu-item-1:before {
    content: "Меню";
    display: block;
    margin-bottom: 18px;
    font-size: clamp(22px, 4vw, 32px);
    font-weight: 500;
    color: white;
  }

  .burger-menu {
    height: 50px;
    width: 30px;
    margin-left: auto;
    margin-right: 0;
    display: flex;
    cursor: pointer;
    position: relative;
    border-radius: 25px;
    z-index: 4;
    cursor: pointer
  }

  .burger-menu-top__block {
    position: absolute;
    top: 15px;
    width: 30px;
    height: 3px;
    background: var(--red-primary)
  }

  .burger-menu-middle__block {
    width: 100%;
    height: 3px;
    background: var(--red-primary);
    margin: auto
  }

  .burger-menu-bottom__block {
    position: absolute;
    bottom: 15px;
    width: 30px;
    height: 3px;
    background: var(--red-primary)
  }

  .active .burger-menu-bottom__block {
    transform: rotate(-45deg);
    bottom: 23px;
    background: white !important
  }

  .active .burger-menu-middle__block {
    opacity: 0
  }

  .active .burger-menu-top__block {
    transform: rotate(45deg);
    top: 24px;
    background: white !important
  }

  .banner {
    background-image: url('/images/banner/bg-fond-mb.png');
  }

  .banner-block, .banner {
    height: 80vh;
  }

  .banner__boxer--left {
    left: -130%;
    z-index: 2;
  }
  
  .banner__boxer--right {
    right: -70%;
    z-index: 1;
  }

  .banner__boxer img {
    height: 75vh;
    max-width: 200vw;
  }

  .banner__boxer {
    transition: transform .25s ease-in-out;
    -webkit-transition: transform .25s ease-in-out;
  }

  .banner__inner .heading-block {
    top: 9vh;
    display: flex;
    flex-direction: column;
    height: 80%;
  }

  .banner__inner .heading-block h1 {
    font-size: 54px;
  }

  .banner__inner .heading-block span {
    margin-bottom: auto;
  }
  
  .banner__inner button {
    max-width: 510px;
  }

  .swiper-slide img {
    min-height: 295px;
  }

  .gym {
    background-image: url(/images/banner/banner-gym-1x.webp);
  }

  .modal-left-side {
      height: 400px;
      flex: 0 0 auto;
      width: 100%;
      background-image: url(/images/modules/modal-2x.webp);
  }

  .sponsor-item {
    width: 24.5%;
  }

  .container-grid {
    margin: 0 -6px;
  }

  .container-grid div {
    margin: 6px;
  }

  .gallery-item-1 {
    flex: 0 0 auto;
    width: calc(60% - .5rem);
  }
  
  .gallery-item-2 {
    flex: 0 0 auto;
    width: calc(40% - .5rem);
  }
  
  .gallery-item-3 {
    flex: 0 0 auto;
    width: calc(40% - .5rem);
  }
  
  .gallery-item-4 {
    flex: 0 0 auto;
    width: calc(60% - .5rem);
  }
  
  .gallery-item-5 {
    flex: 0 0 auto;
    width: calc(60% - .5rem);
  }
  
  .gallery-item-6 {
    flex: 0 0 auto;
    width: calc(40% - .5rem);
  }
  
  .gallery-item-7 {
    flex: 0 0 auto;
    width: calc(40% - .5rem);
  }

  .gallery-item-8 {
    flex: 0 0 auto;
    width: calc(60% - .5rem);
  }

  .footer-menu {
    flex-direction: column;
    text-align: center;
  }

  .footer-menu li {
    margin-bottom: 12px;
  }
}

@media (min-width:992px) {
  .margin-top-100 {
    margin-top: 100px
  }

  .w-lg-25 {
    width: 25%;
  }

  header {
    padding: 20px 0
  }

  header.no-transparent {
    background-color: rgb(0 0 0 / 15%);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
  }

  .brand-logo img {
    background-color: transparent;
  }

  .main-menu ul {
    display: flex;
    justify-content: space-between;
  }

  .main-menu ul li {
    margin-right: 12px;
  }

  .main-menu ul li:last-child {
    margin-right: 0;
  }

  .banner {
    background-image: url('/images/banner/fond-1.png');
  }

  .banner__boxer img {
    height: 50vw;
  }

  .banner-block, .banner{
    height: 100vh;
  }

  .banner__boxer--left {
    left: -100%;
    z-index: 2;
  }
  
  .banner__boxer--right {
    right: -100%;
    z-index: 1;
  }

  .banner__boxer {
    transition: transform .55s ease-in-out;
    -webkit-transition: transform .55s ease-in-out;
  }

  .banner__inner .heading-block {
    top: calc(50vh - 120px);
  }

  .banner__inner .heading-block h1 {
    font-size: 84px;
  }

  .swiper-slide img {
    min-height: 510px;
  }

  .gym {
    background-image: url(/images/banner/banner-gym-2x.webp);
  }

  .sponsor-item {
    width: 10.5%;
  }

  .modal-left-side {
      height: 600px;
      flex: 0 0 auto;
      width: 50%;
      background-image: url(/images/modules/modal-1x.webp);
  }

  .container-grid {
    margin: 0 -15px;
  }

  .container-grid div {
    margin: 15px;
  }

  .gallery-item-1 {
    flex: 0 0 auto;
    width: calc(26% - 1.15rem);
  }
  
  .gallery-item-2 {
    flex: 0 0 auto;
    width: calc(30% - 1.15rem);
  }
  
  .gallery-item-3 {
    flex: 0 0 auto;
    width: calc(24% - 1.15rem);
  }
  
  .gallery-item-4 {
    flex: 0 0 auto;
    width: calc(20% - 1.15rem);
  }
  
  .gallery-item-5 {
    flex: 0 0 auto;
    width: calc(20% - 1.15rem);
  }
  
  .gallery-item-6 {
    flex: 0 0 auto;
    width: calc(24% - 1.15rem);
  }
  
  .gallery-item-7 {
    flex: 0 0 auto;
    width: calc(30% - 1.15rem);
  }

  .gallery-item-8 {
    flex: 0 0 auto;
    width: calc(26% - 1.15rem);
  }

  .footer-menu li {
    margin-right: 8px;
  }
}

@media (min-width:1200px) {
  .container-xl,
  .container-lg,
  .container-md,
  .container-sm,
  .container {
    max-width: 1280px
  }
}


@media (max-width:1365px) {
  .slider-services-block {
    left: 0;
    right: 0;
  }
}

@media (min-width:1366px) {
  .slider-services-block {
    left: -30px;
    right: -30px;
  }
}

@media (min-width:1920px) {
  .container {
    max-width: 1820px !important
  }
}