* {
  padding: 0;
  margin: 0
}

:root {
  --red-primary: rgb(210 19 19);
  --red-action: rgb(255, 0, 77);
  --red-light: rgb(210 19 19 / 75%);
  --green-primary: rgb(78 158 15);
  --green-light: rgb(78 158 15 / 75%);
  --gray-primary: rgb(37, 37, 37);
  --gray-light: rgb(61 57 57);
  --gray-extralight: rgb(255 255 255 / 80%);
  --gray-ultralight: rgb(255 255 255 / 10%)
}

@font-face {
  font-family: 'ObjectSans';
  src: url('/assets/fonts/ObjectSans-Regular.otf') format('opentype');
  font-weight: normal;
  font-style: normal
}

@font-face {
  font-family: 'ObjectSans';
  src: url('/assets/fonts/ObjectSans-Slanted.otf') format('opentype');
  font-weight: normal;
  font-style: italic
}

@font-face {
  font-family: 'ObjectSans';
  src: url('/assets/fonts/ObjectSans-Heavy.otf') format('opentype');
  font-weight: bold;
  font-style: normal
}

@font-face {
  font-family: 'ObjectSans';
  src: url('/assets/fonts/ObjectSans-HeavySlanted.otf') format('opentype');
  font-weight: bold;
  font-style: italic
}

html {
  overflow-x: hidden
}

body {
  background-color: var(--gray-primary);
  font-family: "Inter", sans-serif;
  display: flex;
  flex-direction: column;
  height: 100vh
}

header {
  position: sticky;
  position: -webkit-sticky;
  top: 0;
  z-index: 6;
  width: 100%
}

#page-id_1 header {
  position: fixed
}

a {
  text-decoration: none
}

a:hover {
  color: var(--red-action) !important
}

button#cookie-ok {
  display: block
}

h1 {
  font-size: clamp(32px, 5vw, 68px);
  font-weight: 600;
  line-height: 100%;
  color: white;
  font-family: "ObjectSans", sans-serif
}

h2 {
  font-size: clamp(24px, 3vw, 44px);
  font-weight: 800;
  line-height: 124%;
  color: white;
  font-family: "ObjectSans", sans-serif
}

img {
  max-width: 100%
}

header,
button,
img,
a,
span,
svg,
input,
h4,
textarea,
.main-menu,
.parent ul,
.burger-menu div,
.custom-checkbox+label::before {
  transition: .1s;
  -webkit-transition: all .1s ease-in-out;
  -moz-transition: all .1s ease-in-out;
  -o-transition: all .1s ease-in-out
}

img.lazy {
  background-image: url('/images/system/spinner.gif');
  background-repeat: no-repeat;
  background-position: center;
  display: block
}

img.loaded {
  background-image: none;
  min-height: auto;
  transition: opacity .3s ease-in;
  opacity: 1
}

.v-top {
  align-items: start
}

.v-center {
  align-items: center
}

.v-bottom {
  align-items: end
}

.margin-top {
  margin-top: 60px
}

.loader-body {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 7;
  background-color: rgb(0 0 0 / 65%);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(5px)
}

.loader-body__spinner {
  position: fixed;
  top: calc(50% - 32px);
  left: calc(50% - 32px);
  width: 64px;
  height: 64px;
  background-color: rgba(0, 0, 0, .5);
  transform: rotate(45deg);
  overflow: hidden;
  z-index: 4
}

.loader-body__spinner:after {
  content: '';
  position: absolute;
  inset: 8px;
  margin: auto;
  background-color: #222b32
}

.loader-body__spinner:before {
  content: '';
  position: absolute;
  inset: -15px;
  margin: auto;
  background: #de3500;
  animation: diamondLoader 2s linear infinite
}

@keyframes diamondLoader {

  0%,
  10% {
    transform: translate(-64px, -64px) rotate(-45deg)
  }

  90%,
  100% {
    transform: translate(0, 0) rotate(-45deg)
  }
}

.breadcrumbs {
  margin-top: 20px;
  font-size: 14px
}

.breadcrumbs span {
  color: white;
  opacity: .45;
}

.breadcrumbs, .breadcrumbs a {
  color: white
}

.breadcrumbs-wrapper {
  display: flex;
  flex-wrap: nowrap;
  overflow: auto;
  width: 100%;
  margin: 0 -6px;
}

.breadcrumbs-wrapper span, .breadcrumbs-wrapper a {
  display: block;
  flex: 0 0 auto;
  padding: 0 6px;
}

.main-menu ul {
  display: flex;
  padding: 0;
  margin: 0;
  list-style: none;
  flex-wrap: wrap
}

.main-menu li a {
  color: white;
}

.brand-logo:hover img, .events-item a:hover img, .swiper-slide a:hover img, .fighter-item a:hover img {
  filter: grayscale(1)
}

.banner {
  position: absolute;
  width: 100%;
  background-size: cover;
  background-position: center;
  overflow: hidden
}

.banner__boxer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: auto
}

.banner__boxer img {
  object-fit: cover
}

.banner__inner .heading-block {
  position: absolute;
  z-index: 3;
  left: 0;
  width: 100%;
  text-align: center;
  padding: 0 10px
}

.banner__inner .heading-block h1 {
  font-weight: 800;
  line-height: 120%
}

.banner__inner .heading-block span, .gym-inner span {
  color: rgb(255, 255, 255);
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 19px;
  max-width: 680px;
  display: inline-block;
}

.about {
  position: relative;
  overflow: hidden
}

.marquee {
  display: flex;
  position: absolute;
  bottom: 0;
  z-index: -1;
  width: 250%;
  animation: marquee 10s linear infinite
}

.about-section p,
.forwhom-section p {
  color: var(--gray-extralight);
  line-height: 140%
}

.about-text {
  color: var(--gray-ultralight);
  text-transform: uppercase;
  font-weight: 800;
  font-size: 35vh;
  flex: 0 0 50%;
  white-space: nowrap
}

@keyframes marquee {
  0% {
    transform: translateX(0%)
  }

  100% {
    transform: translateX(-50%)
  }
}

.forwhom-text {
  padding: 0 14px
}

.about picture,
.forwhom picture {
  position: relative;
  display: block;
  overflow: hidden
}

.about picture::after,
.forwhom picture::after {
  content: '';
  position: absolute;
  height: 80%;
  width: 70%;
  top: 20%;
  left: calc(50% - 35%)
}

.about picture::after {
  background-color: var(--red-primary)
}

.forwhom picture::after {
  background-color: var(--gray-light)
}

.about picture img,
.forwhom picture img {
  display: block;
  position: relative;
  z-index: 2
}

.bg-linear {
  position: relative
}

.bg-linear::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 3;
  background-image: linear-gradient(180.00deg, rgba(37, 37, 37, 0), rgba(37, 37, 37, .4) 40%, rgb(28 28 28) 120%)
}

.category-product-item__body {
  background-color: var(--gray-light);
  padding: 24px;
  text-align: left
}

#fighter_48 .category-product-item__body, #fighter_58 .category-product-item__body {
  background-color: var(--red-light);
}

.fighters-section a picture {
    display: block;
    background-image: linear-gradient(67deg, #e2e1e4, #efeef3);
}

.swiper-slide img,
.news-item img,
.sponsor-item img,
.events-item img,
.fighter-item img {
  width: 100%;
  object-fit: cover;
  object-position: center
}

.news-item picture, .events-item picture {
  display: block;
  background-size: cover;
  background-position: center;
}

.fighter-name {
  color: white;
  font-family: "ObjectSans", sans-serif;
  font-size: clamp(16px, 3vw, 18px);
  font-weight: 800;
  line-height: 124%;
  margin-bottom: 20px
}

.fighter-attrs {
  text-align: center;
  position: static;
  color: white;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 140%;
  padding: 6px 0;
  flex: 1 1 auto;
  width: 100%
}

.figter-victory {
  background-color: var(--green-primary)
}

.figter-draw {
  background-color: var(--gray-ultralight)
}

.figter-loss {
  background-color: var(--red-primary)
}

.slider-services-block {
  position: absolute;
  top: calc(45% - 30px);
  display: flex;
  justify-content: space-between;
  z-index: 1;
  pointer-events: none
}

.slider-services-block div {
  pointer-events: auto
}

.slider-services-block div svg {
  filter: grayscale(1);
  -webkit-filter: grayscale(1)
}

.slider-services-block div svg:hover {
  filter: none
}

h4.news-item__title {
  color: white;
  font-family: "ObjectSans", sans-serif;
  font-size: clamp(16px, 3vw, 18px);
  font-weight: 800;
  line-height: 124%;
  margin-top: 24px;
  margin-bottom: 6px
}

.news-item__description {
  display: -webkit-box;
  -webkit-line-clamp: 5;
  font-size: 14px;
  color: white;
  -webkit-box-orient: vertical;
  /* height: 104px; */
  overflow: hidden;
  text-overflow: ellipsis
}

.news-item__date {
  font-size: clamp(12px, 3vw, 14px);
  color: var(--gray-extralight);
  opacity: .6;
  margin-top: 14px
}

.news-item__button {
  display: block;
  margin-top: 24px;
  font-size: clamp(14px, 3vw, 16px);
  color: var(--red-primary)
}

.gym {
  min-height: 525px;
  display: flex;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top center
}

.gym-inner {
  padding: 30px;
  max-width: 610px
}

.sponsor-item {
  flex: 0 0 auto
}

.events-item .news-item__description {
  -webkit-line-clamp: 3;
  height: 62px
}

.events-item .news-item__date {
  padding: 10px 22px;
  color: white;
  opacity: 1;
  background: var(--gray-light);
  width: fit-content
}

#map {
  width: 100%;
  z-index: 1
}

#yandexMap {
  height: 550px
}

.pagination {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  list-style: none;
  padding: 0;
  margin: 0
}

.pagination li {
  margin: 4px
}

.pagination li a,
.pagination li span {
  padding: 10px 16px;
  color: white;
  background: black;
  display: block
}

.pagination li.disabled span {
  opacity: .25
}

.pagination li.active a {
  background: var(--red-primary)
}

.container-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 0fr 0fr 0fr;
  gap: 0 0;
  grid-auto-flow: row;
  grid-template-areas: "zone1 zone-2 zone-3" "zone-4 zone-2 zone-6" "zone-4 zone-5 zone-5"
}

.container-grid div[gallery_id="1"]{
  grid-area: zone1
}

.container-grid div[gallery_id="2"]{
  grid-area: zone-2
}

.container-grid div[gallery_id="3"]{
  grid-area: zone-3
}

.container-grid div[gallery_id="4"]{
  grid-area: zone-4
}

.container-grid div[gallery_id="5"]{
  grid-area: zone-5
}

.container-grid div[gallery_id="6"]{
  grid-area: zone-6
}

.container-grid-alternative {
  display: grid; 
  grid-template-columns: 10% 10% 10% 10% 10% 10% 6.1% 13.9% 10% 10%; 
  grid-template-rows: 10% 10% 10% 10% 10% 10% 10% 10% 10% 10%; 
  gap: 0px 0px; 
  grid-template-areas: 
    "z-1 z-1 z-1 z-4 z-4 z-4 z-4 z-4 z-4 z-4"
    "z-1 z-1 z-1 z-4 z-4 z-4 z-4 z-4 z-4 z-4"
    "z-1 z-1 z-1 z-4 z-4 z-4 z-4 z-4 z-4 z-4"
    "z-2 z-2 z-2 z-4 z-4 z-4 z-4 z-4 z-4 z-4"
    "z-2 z-2 z-2 z-4 z-4 z-4 z-4 z-4 z-4 z-4"
    "z-2 z-2 z-2 z-5 z-5 z-5 z-5 z-6 z-6 z-6"
    "z-2 z-2 z-2 z-5 z-5 z-5 z-5 z-6 z-6 z-6"
    "z-3 z-3 z-3 z-5 z-5 z-5 z-5 z-6 z-6 z-6"
    "z-3 z-3 z-3 z-5 z-5 z-5 z-5 z-6 z-6 z-6"
    "z-3 z-3 z-3 z-5 z-5 z-5 z-5 z-6 z-6 z-6"; 
}
.container-grid-alternative div[gallery_id="1"] { grid-area: z-1; }
.container-grid-alternative div[gallery_id="2"] { grid-area: z-2; }
.container-grid-alternative div[gallery_id="3"] { grid-area: z-3; }
.container-grid-alternative div[gallery_id="4"] {
  display: grid; 
  grid-template-columns: 1fr 1fr 1fr; 
  grid-template-rows: 1fr 1fr 1fr; 
  gap: 0px 0px; 
  grid-template-areas: 
    ". . ."
    ". . ."
    ". . ."; 
  grid-area: z-4; 
}
.container-grid-alternative div[gallery_id="5"] { grid-area: z-5; }
.container-grid-alternative div[gallery_id="6"] { grid-area: z-6; }

.container-grid img, .container-grid-alternative, .container-gallery img {
  height: 100%;
  width: 100%;
  object-fit: cover
}

main[role="main"] {
  color: white;
}

footer {
  margin-top: auto
}

footer p.text-light {
    font-size: .7rem;
    margin-bottom: 4px;
}

footer p.text-light a {
    text-decoration: underline;
}

footer a svg:hover {
    opacity: .75;
}

.footer-inner {
  background-color: black;
  padding: 40px 0
}

.footer-menu {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap
}

.footer-menu li:last-child {
  margin: 0
}

.footer-menu li a {
  color: white
}

.contact-item a:hover {
  opacity: .75
}