/*
Theme Name: Fashion Studio
Description: WordPress adaptation of the existing Fashion Studio visual system.
Version: 0.6.0
Text Domain: fashionstudio
*/

/* The production CSS bundles are intentionally loaded unchanged. */
.fs-about-values { display: none; }

@media (min-width: 1000px) {
  .our-vancies { min-height: 828px; }
}

.header { position: relative; }
.top-menu { position: static; }
.language-switch {
  position: absolute;
  top: 48px;
  right: 32px;
  color: #777;
  font-size: 12px;
  letter-spacing: 1px;
  text-decoration: none;
}
.language-switch:hover { color: #222; }

@media (max-width: 990px) {
  .language-switch { top: 3px; right: 44px; }
}

.english-side-label {
  position: relative;
  display: block;
  line-height: 0;
}
.english-side-label img {
  display: block;
  -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 var(--mask-start), transparent var(--mask-start), transparent var(--mask-end), #000 var(--mask-end), #000 100%);
  mask-image: linear-gradient(to bottom, #000 0, #000 var(--mask-start), transparent var(--mask-start), transparent var(--mask-end), #000 var(--mask-end), #000 100%);
}
.english-side-label__text {
  position: absolute;
  top: var(--label-top);
  left: 50%;
  color: #666;
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
  font-weight: 400;
  line-height: 1;
  white-space: nowrap;
  transform: translate(-50%, -50%) rotate(-90deg);
  transform-origin: center;
}
.english-side-label--brands { --mask-start: 74px; --mask-end: 146px; --label-top: 110px; }
.english-side-label--advantages { --mask-start: 96px; --mask-end: 224px; --label-top: 160px; }
.english-side-label--careers { --mask-start: 70px; --mask-end: 151px; --label-top: 110px; }
.english-side-label--values { --mask-start: 124px; --mask-end: 253px; --label-top: 188px; }
.english-side-label--news { --mask-start: 80px; --mask-end: 156px; --label-top: 118px; }
.english-side-label--about { --mask-start: 74px; --mask-end: 181px; --label-top: 128px; }
.english-side-label--benefits { --mask-start: 70px; --mask-end: 141px; --label-top: 105px; }
.english-side-label--contact { --mask-start: 70px; --mask-end: 196px; --label-top: 133px; }

html[lang="en"] .news-right { position: relative; }
html[lang="en"] .news-right::before {
  content: "News";
  position: absolute;
  z-index: 2;
  top: 154px;
  left: 128px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 86px;
  background: #4c4c4c;
  color: #999;
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
  font-weight: 400;
  line-height: 1;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}

/* Keep the translated About page on the same flex geometry as the Russian baseline. */
html[lang="en"] .about-content {
  min-height: 299px;
}
html[lang="en"] .about-image {
  flex: 0 0 calc(36.56% - 18px);
  width: calc(36.56% - 18px);
  max-width: calc(36.56% - 18px);
}
html[lang="en"] .about-text {
  flex: 1 1 auto;
  min-width: 0;
}

@media (max-width: 1400px) {
  html[lang="en"] .about-image {
    flex-basis: calc(37.83% - 18px);
    width: calc(37.83% - 18px);
    max-width: calc(37.83% - 18px);
  }
}

@media (max-width: 1200px) {
  html[lang="en"] .about-content { min-height: 328px; }
}

@media (max-width: 1100px) {
  html[lang="en"] .about-content { min-height: 357px; }
}

@media (max-width: 1000px) {
  html[lang="en"] .about-content { min-height: 386px; }
}

@media (max-width: 800px) {
  html[lang="en"] .about-content { min-height: 415px; }
}

@media (max-width: 768px) {
  html[lang="en"] .about-content { min-height: 0; }
  html[lang="en"] .about-image {
    flex: 0 1 auto;
    width: auto;
    max-width: 100%;
  }
  html[lang="en"] .about-text {
    flex: 0 1 auto;
  }
}