/* ============================================================
   RESPONSIVE.CSS
   Размеры шрифтов + вся графика (размеры/позиции декора)
   + адаптивные медиазапросы
   ============================================================ */

/* ============================================================
   1. TYPOGRAPHY — размеры шрифтов
   ============================================================ */
body {
  font-size: 24px;
}

p {
  line-height: 1.3em;
}

h1.project-title {
  font-size: 102px;
  line-height: 1.2em;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
transform:translate(0,40px)
}

section h2 {
  font-size: 80px;
  font-weight: 800;
  line-height: 1.1em;
  text-transform: uppercase;
}

.subsection h2,
.subsection h3 {
  text-transform: uppercase;
  font-size: 32px;
  font-weight: 900;
  letter-spacing: 0.05em;
}

.subsection .textblock {
  font-size: 20px;
}

nav .menu li a {
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
}

nav .menu a.m24-logo {
  width: 130px;
  height: 20px;
}

.top-slogan {
  font-size: 90px;
  font-weight: 800;
  text-transform: uppercase;
  transform:translate(0,32px);
  right: 0;
  bottom:auto;
  top:0;
  font-style:normal;
}

.h-block .h-text {
  font-size: 18px;
}

.h-block h3 {
  text-transform: uppercase;
  font-weight: 900;
  font-size: 32px;
  letter-spacing: .05em;
}


/* ============================================================
   2. GRAPHICS — базовые размеры (десктоп)
   ============================================================ */

/* --- 2.1. HOME SCREEN --- */
.graphics-wrapper.graphics-top {
  position: relative;
  min-height: calc(100vh - 144px);
  margin-top: -40px; 
}

i.house {
  width: 774px;
  height: 495px;
  right: -48px;
  top: calc(50% - 207.5px);
}

i.house .house-bg-circle {
  width: 700px;
  height: 700px;
  left: 50%;
  top: 50%;
  border: 64px solid var(--m-orange);
  border-radius: 50%;
  clip-path:polygon(0% -100%,100% -100%,100% 80%,0% 80%) 
}

i.house .house-bg-circle::before {
  width: 80%;
  height: 80%;
}

i.house .line.l2 {
  bottom: 32px;
  width: 1000px;
  height: 16px;
}

i.house .line.l1 {
  bottom: 0;
  width: 1240px;
  max-width: 100vw;
  height: 16px;
}
.slogan-wrapper {
  position: absolute;
  bottom:0;
  right:0;
  width: 1240px;
  max-width:100vw

}

.horse-logo-r {
  width: 156px;
  height: 156px;
  right: 20%;
  top: -25%;
}

i.horseman {
  width: 494px;
  height: 467px;
  left: -64px;
  top: 200px;
}

/* --- 2.2. REBIRTH --- */
#rebirth .graphics {
  height: 706px;
}

i.i-rebirth {
  width: 841px;
  height: 706px;
  max-height: 100%;
  top: 50%;
  left: -80px;
}

i.i-troyka {
  right: -80px;
  top: 50%;
  width: 550px;
  height: 426px;
  margin-top: 72px;
}

#rebirth .lines {
  width: 100vw;
  bottom: 64px;
}

#rebirth .line {
  height: 16px;
  width: 100vw;
  bottom: 0;
}

#rebirth .line.r2 {
  width: calc(100vw - 110px);
  bottom: 32px;
  left: 1360px;
}

#rebirth .line.r3 {
  bottom: -32px;
}

#rebirth .line.r4 {
  bottom: -32px;
  left: 1200px;
}

#rebirth .line.r5 {
  bottom: -64px;
  right: 80%;
}

/* --- 2.3. HORSEMEN RIDING --- */
.horsman-wrapper {
  height: 90px;
}

/* --- 2.4. NAVIGATION --- */
nav {
  height: 72px;
}

nav .menu {
  padding: 0 64px 0 0;
}

#M90logo {
  width: 80px;
  height: 64px;
  left: 16px;
}

.ya-share2 {
  right: 16px;
}

#topNav .mi-share-widget {
  right: 16px;
}

/* --- 2.5. WIDGET / CONTENT --- */
.main-desc {
  max-width: calc(var(--container-width) / 2);
  padding: 64px 32px;
}

.logo svg {
  width: 470px;
  max-width: calc(100% - 16px);
}

/* --- 2.6. PHOTO LINE --- */
.photoLine {
  margin: 40px 0;
  height: var(--line-height, 320px);
}

.photoLine.grey-bg {
  box-shadow: 0 -180px 0 var(--m-grey-bg) inset;
}

.lineImg {
  margin-right: var(--img-margin, 20px);
  border-radius: 3px;
}

.lineImg a::before {
  box-shadow: 0 3px 16px var(--m-shadow-img) inset;
}

.lineImg img {
  width: calc(var(--line-height, 320px) * 4 / 3);
  height: var(--line-height, 320px);
  border-radius: 4px;
  box-shadow: 0 2px 6px var(--m-shadow-img-light);
}

/* --- 2.7. H-BLOCKS --- */
.h-wrapper {
  gap: 48px;
  max-width: var(--text-max-width);
}

.h-block {
  gap: 48px;
}

.h-graphics {
  flex: 0 0 var(--h-graphics-width);
  width: var(--h-graphics-width);
}

.h-graphics-item {
  width: 100%;
  padding: 100% 0 0;
  border: 1px solid var(--m-orange-border);
  border-radius: 50%;
}

.h-graphics-item:before,
.h-graphics-item:after {
  width: calc(100% - 30px);
  height: calc(100% - 30px);
}

.h-graphics-item:before {
  width: calc(100% - 12px);
  height: calc(100% - 12px);
  border-radius: 50%;
}

.h-graphics-item img {
  width: calc(100% - 100px);
  height: calc(100% - 100px);
}

/* --- 2.8. LAYOUT BLOCKS --- */
section {
  padding: 72px 0;
  min-height: 50vh;
}

section#home {
  padding: 72px 0;
  min-height: 100vh;
}

section#about {
  padding: 72px 0 24px;
}

.section.subsection {
  padding: 72px 0;
}

.subsection .textblock {
  width: 900px;
  max-width: calc(100% - 32px);
}

.intro {
  width: var(--intro-width);
  margin: 0 auto 64px;
  max-width: calc(100% - 32px);
}

.container {
  width: var(--container-width);
  max-width: calc(100%) !important;
}

.section .container {
  max-width: calc(100% - 32px) !important;
}


/* ============================================================
   3. MEDIA QUERIES
   ============================================================ */
@media (max-width: 1280px) {

  h1.project-title {
    font-size: 80px;
    max-width: 70%;
  }
  .slogan-wrapper {right: 32px;}

  .top-slogan {
    font-size: 72px;
  }
}

@media (max-width: 1080px) {
  .main-desc {
    max-width: calc(100% - 32px);
  }
  section#rebirth {padding-bottom:80px;overflow:hidden}

  .top-slogan {
    font-size: 64px;
    line-height: 1em;
    white-space: normal;
  }

  .house {
    max-width: 90%;
  }

  #rebirth .graphics {
    height: 480px;
  }

  #rebirth .graphics .i-troyka {
    max-width: 55%;
  }

  .house:before {
    background-position: bottom;
  }

  .left-part svg {
    width: 240px;
    max-width: 100%;
  }

  .t-img {
    padding: 85% 0 0;
  }

  ul.menu {
    width: 80vw;
    height: calc(100vh - 72px);
    top: 72px;
    padding: 2rem;
  }

  ul.menu li {
    font-size: 1rem;
    margin: 0 auto 1.5em;
  }

  ul.menu li a {
    font-size: 1rem;
  }

  label#expandMenu {
    left: 16px;
    top: 50%;
    width: 32px;
    height: 32px;
    margin: -16px 0 0;
  }

  label#expandMenu i {
    height: 4px;
    margin: -2px 0 0;
  }

  label#expandMenu i::after,
  label#expandMenu i::before {
    height: 4px;
    margin: 0 0 0 -16px;
  }

  label#expandMenu i::before {
    top: -8px;
  }

  label#expandMenu i::after {
    top: 8px;
  }

  footer {
    padding: 48px 0;
  }

  #M90logo {
    left: 50%;
    top: 50%;
  }

  :root {
    --mobile-height: 180px;
  }
   
}
@media(max-width:1000px) {
   .horse-logo-r {display:none}
}

@media (max-width: 768px) {
  .h-block .h-text {
    font-size: 14px;
  }

  .photoLine {
    margin: 20px 0;
    height: var(--mobile-height, 180px);
  }

  .photoLine.grey-bg {
    box-shadow: 0 -90px 0 var(--m-grey-bg) inset;
    margin-bottom: 0;
  }

  .lineImg img {
    width: calc(var(--mobile-height, 180px) * 4 / 3);
    height: var(--mobile-height, 180px);
  }

  .intro {
    margin: 0 auto 24px;
    font-size: 16px !important;
  }

  .subsection .textblock {
    font-size: 14px;
  }
  .is-compact .fancybox__footer .fancybox__caption {
    font-size:14px;
  }

  #rebirth .graphics {
    height: 300px;
  }

  i.horseman {
    width: 494px;
    height: 255px;
    left: -64px;
    top: 200px;
    max-width: 80%;
  }

  section h2 {
    font-size: 36px;
  }

  h1.project-title {
    font-size: 42px;
  }

  .top-slogan {
    line-height: .9em;
    font-size: 42px;
  }

  i.house {
    height: 340px;
  }

  .house-bg-circle {
    width: 100vmin !important;
    height: 100vmin !important;
  }

  .horse-logo-r {
    display: none;
  }

  .section-bg-graphics {
    display: none;
  }

  i.i-rebirth {
    max-height: 100%;
    max-width: 80%;
  }

  .h-graphics {
    flex: 0 0 auto;
    width: 100%;
  }

  .h-graphics-item {
    padding: 0;
    width: var(--h-graphics-size);
    height: var(--h-graphics-size);
  }

  .h-text {
    width: 100%;
  }
}

@media (max-width: 640px) {
  nav .menu li a {
    font-size: 14px;
  }

  .m24logo {
    width: 100px;
  }
}