@font-face {
    font-family: 'TT Hoves';
    src: local('TT Hoves Black'), local('tthoves-Black'),
        url('fonts/tthoves-black.woff2') format('woff2'),
        url('fonts/tthoves-black.woff') format('woff');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'TT Hoves';
    src: local('TT Hoves ExtraBold Italic'), local('tthoves-ExtraBoldItalic'),
        url('fonts/tthoves-extrabolditalic.woff2') format('woff2'),
        url('fonts/tthoves-Extrabolditalic.woff') format('woff');
    font-weight: bold;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'TT Hoves';
    src: local('TT Hoves DemiBold Italic'), local('tthoves-DemiBoldItalic'),
        url('fonts/tthoves-demibolditalic.woff2') format('woff2'),
        url('fonts/tthoves-demibolditalic.woff') format('woff');
    font-weight: 600;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'TT Hoves';
    src: local('TT Hoves Bold'), local('tthoves-Bold'),
        url('fonts/tthoves-bold.woff2') format('woff2'),
        url('fonts/tthoves-bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'TT Hoves';
    src: local('TT Hoves Black Italic'), local('tthoves-BlackItalic'),
        url('fonts/tthoves-blackitalic.woff2') format('woff2'),
        url('fonts/tthoves-blackitalic.woff') format('woff');
    font-weight: 900;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'TT Hoves';
    src: local('TT Hoves Bold Italic'), local('tthoves-BoldItalic'),
        url('fonts/tthoves-bolditalic.woff2') format('woff2'),
        url('fonts/tthoves-bolditalic.woff') format('woff');
    font-weight: bold;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'TT Hoves';
    src: local('TT Hoves DemiBold'), local('tthoves-DemiBold'),
        url('fonts/tthoves-demibold.woff2') format('woff2'),
        url('fonts/tthoves-demibold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'TT Hoves';
    src: local('TT Hoves Italic'), local('tthoves-Italic'),
        url('fonts/tthoves-italic.woff2') format('woff2'),
        url('fonts/tthoves-italic.woff') format('woff');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'TT Hoves Hairline';
    src: local('TT Hoves Hairline Italic'), local('tthoves-HairlineItalic'),
        url('fonts/tthoves-hairlineitalic.woff2') format('woff2'),
        url('fonts/tthoves-hairlineitalic.woff') format('woff');
    font-weight: 100;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'TT Hoves';
    src: local('TT Hoves Light'), local('tthoves-Light'),
        url('fonts/tthoves-light.woff2') format('woff2'),
        url('fonts/tthoves-light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'TT Hoves Hairline';
    src: local('TT Hoves Hairline'), local('tthoves-Hairline'),
        url('fonts/tthoves-hairline.woff2') format('woff2'),
        url('fonts/tthoves-hairline.woff') format('woff');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'TT Hoves';
    src: local('TT Hoves ExtraBold'), local('tthoves-ExtraBold'),
        url('fonts/tthoves-extrabold.woff2') format('woff2'),
        url('fonts/tthoves-extrabold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'TT Hoves';
    src: local('TT Hoves ExtraLight'), local('tthoves-ExtraLight'),
        url('fonts/tthoves-extralight.woff2') format('woff2'),
        url('fonts/tthoves-extralight.woff') format('woff');
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'TT Hoves';
    src: local('TT Hoves Light Italic'), local('tthoves-LightItalic'),
        url('fonts/tthoves-lightitalic.woff2') format('woff2'),
        url('fonts/tthoves-lightitalic.woff') format('woff');
    font-weight: 300;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'TT Hoves';
    src: local('TT Hoves ExtraLight Italic'), local('tthoves-ExtraLightItalic'),
        url('fonts/tthoves-extralightitalic.woff2') format('woff2'),
        url('fonts/tthoves-extralightitalic.woff') format('woff');
    font-weight: 200;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'TT Hoves';
    src: local('TT Hoves Thin Italic'), local('tthoves-ThinItalic'),
        url('fonts/tthoves-thinitalic.woff2') format('woff2'),
        url('fonts/tthoves-thinitalic.woff') format('woff');
    font-weight: 100;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'TT Hoves';
    src: local('TT Hoves Regular'), local('tthoves-Regular'),
        url('fonts/tthoves-regular.woff2') format('woff2'),
        url('fonts/tthoves-regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'TT Hoves';
    src: local('TT Hoves Medium'), local('tthoves-Medium'),
        url('fonts/tthoves-medium.woff2') format('woff2'),
        url('fonts/tthoves-medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'TT Hoves';
    src: local('TT Hoves Medium Italic'), local('tthoves-MediumItalic'),
        url('fonts/tthoves-mediumitalic.woff2') format('woff2'),
        url('fonts/tthoves-mediumitalic.woff') format('woff');
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'TT Hoves';
    src: local('TT Hoves Thin'), local('tthoves-Thin'),
        url('fonts/tthoves-thin.woff2') format('woff2'),
        url('fonts/tthoves-thin.woff') format('woff');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    outline: 0;
}

:root {
    --white-color: #ffffff;
    --black-color: #000;
    --black-like-gray: rgba(0,0,0,0.3);
    --gray-color: #4A4A4A;
    --gray-alt-1: #CACACA;
    --black-fade-color: rgba(0,0,0,0.6);
    --transparent-white-color: rgba(255,255,255,0.5);
    --gallery-background: #9232ba;
    --font-size-one: calc(0.8vw + .2rem);
    --line-height-one: calc(1.2vw + .2rem);
    --font-size-two: calc(1.1vw + .2rem);
    --line-height-two: calc(1.7vw + .2rem);
    --h1-font-size: calc(2.7vw + .2rem);
    --h1-line-height: calc(3.3vw + .2rem);
    --h2-font-size: calc(1.9vw + .2rem);
    --h2-line-height: calc(2.5vw + .2rem);
}

html {
    font-size: 18px;
    scroll-behavior: smooth;
}

body {
    font-family: "TT Hoves";
    color: var(--black-color);
    background-color: var(--white-color);
    /* transition: all .8s ease; */
}

body.no-scroll {
    overflow: hidden;
}

#app {
    position: relative;
}

img {
    max-width: 100%;
    height: auto;
}

.info-block {
    margin: 12vh 0;
}

.dark-block {
    color: var(--white-color);
    background-color: var(--gray-color);
}

.header.index-header {
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    padding: 4vh 3vw;
    /* height: 50vh; */
    background-color: var(--white-color);
    /* z-index: 11000; */
    z-index: 500;
}

/* .header.index-header * {
    border: 1px solid red;
} */

.header .wrapper {
    position: relative;
    padding: 4vh 3vw;
    /* height: 100%; */
    min-height: 150px;
    overflow: hidden;
}

.index-header .wrapper {
    padding: 0;
}

.header.float .wrapper {
    min-height: auto;
    overflow: inherit;
}

.top-menu__line {
    display: flex;
    flex-wrap: wrap;
    gap: 5vw; 
    font-size: var(--font-size-two);
    line-height: var(--line-height-two);
    align-items: center;
    justify-content: space-between;
    /* margin: 6vh 0 0 0; */
}

.top-menu__line.scroll .index-top__date {
    display: none;
}

.index-top__date {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 1px 0 0 0;
    width: 15vw;
    z-index: 10;
}

.index-top__date:after {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 1px;
    margin: -0.5px 0 0 0;
    background-color: #000;
    z-index: 5;
}

.index-top__date span {
    display: inline-block;
    background-color: var(--white-color);
    z-index: 11;
}

.index-top__date span:first-child {
    padding: 0 1vw 0 0;
}

.index-top__date span:last-child {
    padding: 0 0 0 1vw;
}

.index-menu {
    display: flex;
    flex-wrap: wrap;
    list-style-type: none;
    gap: 4vw;
    justify-content: space-between;
    width: 50vw;
}

.index-menu a,
.header__mobile-index-menu a {
    color: var(--black-color);
    text-decoration: none;
}

.index-menu a:hover {
    text-decoration: underline;
}

.header-menu__line {
    font-size: var(--font-size-two);
    line-height: var(--line-height-two);
}

.header-menu__wrapper {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    /* gap: 80px; */
    /* gap: 8vw; */
}

.header-menu {
    width: 10vw;
    margin-right: 3vw;
    list-style-type: none;
}

.header-menu__line a {
    color: var(--black-color);
    text-decoration: none;
}

.header-menu a:hover,
.header-menu .active a {
    text-decoration: underline;
}

.header__mobile-menu,
.header__mobile-index-menu {
    display: none;
}

.index-big-logo {
    /* float: right; */
    position: absolute;
    display: block;
    top: 0;
    right: 0;
    /* width: 100vw; */
    /* margin-bottom: 35px; */
    z-index: 11010;
}

.float .index-big-logo {
    float: right;
    position: relative;
    display: block;
    top: 0;
    right: 0;
    width: 100%;
    max-width: 100%;
    min-width: 25%;
    /* margin-bottom: 35px; */
    z-index: 11010;
}

.index-header .top-menu__line {
   /* float: left; */
   position: absolute;
   top: calc(100% - 30px);
   left: 0;
   width: 100%;
   margin-bottom: 0;
   /* transition: all 0.4s ease; */
   z-index: 11111;
}

.index-header.float .top-menu__line {
    float: none;
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    padding-top: 30px;
    z-index: 1;
}

/* .index-header .top-menu__line {
    position: absolute;
    display: grid;
    bottom: 4vh;
    left: 3vw;
    margin: 0;
} */

/* .index-header .top-menu__line.magic {
    display: grid;
    grid-template-columns: calc((94vw - 72px) /3) calc((94vw - 72px) / 3);
    gap: 2rem;
    align-items: start;
    margin: 0;
} */

.magic .index-menu {
    display: block;
    columns: 2;
    gap: 0;
    width: auto;
}

/* .header.index-header.scrolled.magic .wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
        'headerMenu headerLogo'
    ;
    grid-gap: 2vw;
}

.header.index-header.scrolled.magic .wrapper img.index-big-logo {
    grid-area: headerLogo;
}

.header.index-header.scrolled.magic .wrapper .top-menu__line {
    grid-area: headerMenu;
} */

.scrolled .top-menu__line {
    flex-wrap: nowrap;
}

.scrolled .top-menu__line,
.scrolled .index-menu {
    gap: 1vw;
}

/* .scrolled .index-top__date {
    display: none;
} */

.scrolled .top-menu__line {
    display: none;
}

.float-down__menu {
    position: absolute;
    font-size: var(--font-size-two);
    line-height: var(--line-height-two);
    top:-400px;
    left: 0;
    width: 65vw;
    display: grid;
    grid-template-columns: calc((94vw - 72px) / 3) 1fr;
    gap: 2rem;
}

.float-down__menu a {
    color: var(--black-color);
    text-decoration: none;
}

.middle {
    padding: calc(20vh + 1rem) 3vw calc(1vh + 1rem);
    /* padding: 0 3vw; */
}

#bgProjectShow {
    position: fixed;
    top: 10vh;
    bottom: 10vh;
    left: 3vw;
    right: 3vw;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    /* background-color: #eaeaea; */
    border-radius: 50vw;
    opacity: 0.15;
    z-index: -10;
}

#bgProjectShow.full {
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    border-radius: 0;
}

.middle.index-middle {
    /* padding: 4vh 3vw calc(1vh + 1rem); */
    padding: 0 3vw calc(1vh + 1rem);
}

.index-slider__slide {
    position: relative;
    /* min-height: 600px; */
    min-height: 450px;
    height: 75vh;
    background-color: var(--gray-alt-1);
    background-position: center;
    background-size: cover;
    z-index: 10;
}

.index-slider__slide a {
    position: absolute;
    inset: 0;
    z-index: 20;
}

.index-slider__slide img {
    display: block;
}

.index-slider__slide__info {
    position: absolute;
    bottom: -31px;
    right: 0;
    /* left: 25vw; */
    width: auto;
    display: grid;
    grid-template-columns: max-content max-content;
    align-items: baseline;
    grid-gap: 2vw;
}

.index-slider__slide__info h3 {
    font-size: var(--font-size-two);
    line-height: var(--line-height-two);
    font-weight: 300;
}

.index-slider__slide__info p {
    color: var(--black-like-gray);
    font-size: var(--font-size-one);
    line-height: var(--line-height-one);
}

.project__main-img {
    margin: 6vh 0 0 0;
}

.project__main-img video {
    display: block;
    width: 100%;
    min-height: 85vh;
    object-fit: cover;
}

.swiper.index-slider {
    overflow-x: hidden;
    /* overflow-y: visible; */
    padding-bottom: 30px;
}

.swiper-horizontal>.swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction {
    bottom: 3px;
}

.swiper-pagination {
    text-align: left;
}

.swiper-button-next:after, .swiper-button-prev:after {
    color: var(--black-color);
}

.swiper-pagination-bullet-active {
    background: var(--black-color);
}

.project__main-img img {
    display: block;
    width: 100%;
}

.content {
    position: relative;
}

.start-content.date {
    position: absolute;
    top: calc(var(--h1-font-size) - var(--font-size-one) - 2px);
    left: 0;
    color: var(--black-like-gray);
    font-size: var(--font-size-one);
    line-height: var(--line-height-one);
}

.content h1 {
    font-size: var(--h1-font-size);
    line-height: var(--h1-line-height);
    font-weight: 400;
    margin: 0 0 var(--h1-font-size) 0;
    text-indent: 13vw;
}

.project .content h1 {
    margin: 0 0 var(--h1-font-size) 13vw;
    text-indent: 0;
}

.content p,
.content ul,
.content ol {
    font-size: var(--font-size-two);
    line-height: var(--line-height-two);
}

.content ul,
.content ol {
    margin: 0 0 calc(2vw + 0.2rem) calc(2vw + 0.2rem);
}

.content.start-content p:first-of-type {
    text-indent: 13vw;
}

.content ul li:not(:last-child),
.content ol li:not(:last-child) {
    margin: 0 0 calc(1.5vw + .2rem) 0;
}

.content p:not(:last-child) {
    margin: 0 0 calc(2vw + .2rem) 0;
}

.content__header h3 {
    position: relative;
    font-size: var(--font-size-two);
    line-height: var(--line-height-two);
    font-weight: 400;
    padding: 2vh 0 0 0;
}

.content__header h3:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 60%;
    height: 2px;
    background-color: var(--black-color);
}

.back-arrow__button {
    display: block;
    color: var(--black-color);
    font-size: var(--font-size-two);
    line-height: var(--line-height-two);
    text-decoration: none;
    padding: 0 0 0 5vw;
    margin: calc(var(--h1-font-size) - var(--font-size-one) - 7px) 0 0 0;
    font-weight: 400;
    background-image: url(img/arrow-back.svg);
    background-repeat: no-repeat;
    background-position: left;
    background-size: contain;
}

.project__info-blocks {
    /* display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 2rem; */
    font-size: var(--font-size-one);
    line-height: var(--line-height-one);
    margin: 6vh 0;
}

.project__info-blocks h4 {
    font-weight: 600;
    margin: 0 0 1.5vh 0;
}

.project__info-blocks p,
.project__info-blocks p a {
    color: var(--black-like-gray);
}

.project__info-blocks p:first-letter {
    text-transform: uppercase;
}

.project-gallery {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    margin: 9vh 0;
    gap: 10px;
}

.project-gallery .content__header {
    width: calc(100% /3 - 23px);
    margin-right: 1.5rem;
}

.project-gallery__image {
    /* flex: 1 0 clamp(300px,25vw,850px); */
    flex: 1 0 auto;
    /* background: var(--gallery-background); */
}

.project-gallery__image.first {
    flex: 1 0 calc(100% - calc(100%/3 + 1rem));
}

.project-gallery__image img {
    display: block;
    flex: 1;
    object-fit: cover;
}

/* .raw-view .project-gallery__image img {
    object-fit: none;
} */

.project-gallery.tile-view {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    gap: 10px;
    margin: 9vh 0;
}

.tile-view .project-gallery__image {
    flex: 1 0 auto;
    overflow: hidden;
    width: auto;
    max-width: 100%;
    background: var(--gallery-background);
    height: clamp(350px,60vh,600px);
}

.tile-view .project-gallery__image.half-width {
    flex: 1 0 50%;
}

.tile-view .project-gallery__image.quater-width {
    flex: 1 0 33%;
}

.project-gallery__image a,
.tile-view .project-gallery__image a {
    display: flex;
    position: relative;
    width: 100%;
    height: 100%;
    flex-wrap: nowrap;
}

.raw-view .project-gallery__image a {
    display: block;
}

.tile-view .project-gallery__image img {
    display: inline-block;
    flex: 1;
    height: clamp(350px,60vh,600px);
    object-fit: cover;
}

.bg-view .project-gallery__image {
    flex: 1 0 auto;
    overflow: hidden;
    /* width: 100%;
    max-width: 100%; */
    /* background: var(--gallery-background); */
    /* height: clamp(350px,60vh,600px); */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    z-index: 1;
}


.raw-view .project-gallery__image {
    flex: 1 0 auto;
    overflow: hidden;
    z-index: 1;
}

.bg-view .project-gallery__image.contain-bg {
    background-size: contain;
}

.project-gallery.bg-view .content__header {
    width: auto;
    grid-column: span 2;
}

.bg-view .project-gallery__image.first,
.raw-view .project-gallery__image.first {
    /* width: calc(100% - (100% /3 - 23px)); */
    grid-column: span 6;
}

.bg-view .project-gallery__image.two-w-block,
.raw-view .project-gallery__image.two-w-block {
    grid-column: span 2;
}

.bg-view .project-gallery__image.three-w-block,
.raw-view .project-gallery__image.three-w-block {
    grid-column: span 3;
}

.bg-view .project-gallery__image.four-w-block,
.raw-view .project-gallery__image.four-w-block {
    grid-column: span 4;
}

.bg-view .project-gallery__image.five-w-block,
.raw-view .project-gallery__image.five-w-block {
    grid-column: span 5;
}

.bg-view .project-gallery__image.six-w-block,
.raw-view .project-gallery__image.six-w-block {
    grid-column: span 6;
}

.bg-view .project-gallery__image.seven-w-block,
.raw-view .project-gallery__image.seven-w-block {
    grid-column: span 7;
}

.bg-view .project-gallery__image.eight-w-block,
.raw-view .project-gallery__image.eight-w-block {
    grid-column: span 8;
}

.bg-view .project-gallery__image.two-h-block,
.raw-view .project-gallery__image.two-h-block {
    grid-row: span 2;
}

.bg-view .project-gallery__image.three-h-block,
.raw-view .project-gallery__image.three-h-block {
    grid-row: span 3;
}

.bg-view .project-gallery__image.half-image,
.raw-view .project-gallery__image.half-image {
    width: 50%;
}

.bg-view .project-gallery__image.quarter-image,
.raw-view .project-gallery__image.quarter-image {
    width: 33%;
}

.project-gallery.bg-view,
.project-gallery.raw-view,
.index-gallery {
    position: relative;
    display: grid;
    /* grid-template-columns: repeat(auto-fit,minmax(150px, 1fr)); */
    grid-template-columns: repeat(8, 1fr);
    grid-auto-rows: clamp(350px,60vh,600px);
    grid-auto-flow: dense;
  /*   display: flex;
  flex-wrap: wrap;
  flex-direction: row; */
    gap: 10px;
    margin: 12vh 0 9vh 0;
}

.index-gallery__item {
    position: relative;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    /* justify-content: space-between; */
    gap: 5px;
    overflow: hidden;
    grid-column: span 4;
    grid-row: span 1;
    z-index: 1;
}

.index-gallery__item:first-child {
    grid-row: span 2;
}

.index-gallery__item-bg {
    position: relative;
    height: calc(100% - 32px);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.index-gallery__item-bg a {
    position: absolute;
    inset: 0;
    z-index: 10;
}

.index-gallery__item h2 {
    display: block;
    /* position: absolute;
    top: 20px;
    left: 20px;
    right: 20px; */
    /* font-size: calc(var(--h2-font-size) / 3);
    line-height: calc(var(--h2-line-height) / 3); */
    /* letter-spacing: 2px; */
    font-size: var(--font-size-one);
    line-height: var(--line-height-one);
    font-weight: 300;
}

.index-gallery__item h2 a {
    color: var(--black-color);
    text-decoration: none;
}

/* .index-gallery__item h2 span {
    background-color: #000;
} */

.project-gallery.bg-view:before,
.project-gallery.raw-view:before {
    content: "Галерея";
    position: absolute;
    top: -9vh;
    left: 0;
    font-size: var(--font-size-two);
    line-height: var(--line-height-two);
    font-weight: 400;
    padding: 2vh 0 0 0;
    border-top: 2px solid var(--black-color);
    width: 100%;
}

.bg-view .project-gallery__image a {
    display: block;
    inset: 0;
    z-index: 10;
}

.project-team__wrapper {
    margin: 8vh 0;
}

.project-team p {
    font-size: var(--font-size-two);
    line-height: var(--line-height-two);
}

.project-team p:not(:last-child) {
    margin: 0 0 calc(1.3vw + .2rem) 0;
}

.another-projects__wrapper {
    margin: 8vh 0;
}

.another-project__item {
    border-top: 1px solid var(--black-color);
    font-size: var(--font-size-two);
    line-height: var(--line-height-two);
}

.another-project__item a {
    /* display: flex;
    flex-wrap: wrap; */
    display: grid;
    grid-template-columns: 45px 1fr;
    color: var(--black-color);
    text-decoration: none;
    gap: 4vw;
    padding: 2.5vh 0 5vh 0;
}

.projects-list {
    margin: 8vh 0 0 0;
}

table.projects-list {
    width: 100%;
    padding: 0;
    border-collapse: collapse;
    text-indent: initial;
    border-spacing: 0;
}

.projects-list__header {
    font-size: var(--font-size-one);
    line-height: var(--line-height-one);
    padding: 0 0 2vh 0;
    cursor: pointer;
}

tr.projects-list__header {
    padding: 0;
}

.projects-list__item {
    border-top: 1px solid var(--black-color);
    font-size: var(--font-size-two);
    line-height: var(--line-height-two);
}

tr.projects-list__item {
      position: relative;  
      width: 100%;
    border-top: 1px solid var(--black-color);
    font-size: var(--font-size-two);
    line-height: var(--line-height-two);
    vertical-align: baseline;
    cursor: pointer;
}

tr.projects-list__header th {
    /* width: 33.3333%; */
    font-weight: 400;
    padding: 0 0 2.5vh 0;
    font-size: var(--font-size-two);
    line-height: var(--line-height-two);
    text-align: left;
    
}

tr.projects-list__item td {
    /* width: 33.3333%; */
    font-weight: 400;
    padding: 2.5vh 0 5vh 0;
}

tr.projects-list__item:hover td {
    text-decoration: underline;
}

.project-sorting-block {
    display: flex;
    gap: 2px;
}

.arrow-direction {
    /* display: inline-block; */
    /* width: 15px;
    height: 15px; */
    /* background-color: var(--black-color); */
    /* background-image: url(img/arrow-down-icon.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain; */
    /* margin-top: 5px; */
    opacity: 1;
    transition: all 0.45s ease;
}

.hide .arrow-direction {
    /* display: none; */
    opacity: 0.3;
}

.stright .arrow-direction {
    transform: rotate(0deg);
}

.reverse .arrow-direction {
    transform: rotate(-180deg);
}

.projects-list__item h3 {
    font-size: var(--font-size-two);
    line-height: var(--line-height-two);
    font-weight: 400;
}

.projects-list__item a {
    color: var(--black-color);
    text-decoration: none;
    padding: 2.5vh 0 5vh 0;
}

.projects-list__item:hover a {
    text-decoration: underline;
}


body.text-fade .projects-list__item a {
    color: var(--black-fade-color);
}

body.text-fade .projects-list__item:hover a {
    color: var(--black-color);
}

.projects-list__switcher {
    display: flex;
    flex-wrap: wrap;
    gap: 2vh 4vw;
    font-size: var(--font-size-two);
    line-height: var(--line-height-two);
    margin: 6vh 0 0 0;
}

.projects-list__switcher a {
    position: relative;
    color: var(--black-color);
    text-decoration: none;
}

.projects-list__switcher a:hover:after,
.projects-list__switcher .active a:after {
    content: "";
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: var(--black-color);
}

.contact-info__wrapper {
    margin: 0 0 10vh 0;
}

.contact-info__content p {
    font-size: var(--h1-font-size);
    line-height: var(--h1-line-height);
}

.contact-info__content p:not(:last-child) {
    margin: 0 0 calc(1.5vw + 1rem) 0;
}

.contact-info__content p a {
    color: var(--black-color);
    text-decoration: none;
}

.about-dates h3 {
    font-size: var(--h1-font-size);
    line-height: var(--h1-line-height);
    font-weight: 400;
}

.about-dates p {
    color: var(--black-like-gray);
    font-size: var(--font-size-one);
    line-height: var(--line-height-one);
}

.services__mini-list {
    /* padding: 6vh 3vw; */
    padding: 6vh 0;
    box-shadow: 0 0 0 100vmax var(--gray-color);
    clip-path: inset(0 -100vmax);
}

.services__mini-list .content__header h3 {
    padding: 0;
}

.services__mini-list .content__header h3:before {
    width: 0;
}

.services__mini-list h4 {
    position: relative;
    font-size: var(--h2-font-size);
    line-height: var(--h2-line-height);
    font-weight: 400;
    padding: 3vh 0 0 0;
}

.services__mini-list h4:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: #ffffff;
}

.person-block img {
    display: block;
}

.person-block__info {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 2rem;
    margin-top: 2rem;
}

.person-block__info h2 {
    font-size: var(--h2-font-size);
    line-height: var(--h2-line-height);
    font-weight: 400;
    margin: 0 0 1rem 0;
}

.content.start-content .person-block__info p:first-of-type {
    text-indent: 0;
}

.vacancy-list {
    border-bottom: 1px solid var(--gray-alt-1);
}

.vacancy-list__item {
    border-top: 1px solid var(--gray-alt-1);
    font-size: var(--h2-font-size);
    line-height: var(--h2-line-height);
    font-weight: 400;
}

.vacancy-list__item__header a {
    position: relative;
    color: var(--black-color);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    padding: 2.5vh 0;
    text-decoration: none;
    cursor: pointer;
}

.vacancy-list__item__content {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 500ms;
}

.vacancy-list__item.active .vacancy-list__item__content {
    grid-template-rows: 1fr;
}

.vacancy-list__item__content > div {
    /* display: none; */
    overflow: hidden;
}

/* .vacancy-list__item.active .vacancy-list__item__content {
    display: block;
} */

.vacancy-list-item__content__item {
    display: grid;
    grid-template-columns: 1fr 3fr;
    grid-gap: 4vw;
    margin: 4vh 0;
}

.vacancy-list-item__content__item p,
.vacancy-list-item__content__item ol,
.vacancy-list-item__content__item ul,
.vacancy-list-item__content__item h4{
    font-size: var(--font-size-two);
    line-height: var(--line-height-two);
    font-weight: 400;
}

.vacancy-list-item__content__item p:not(:last-child) {
    margin: 0 0 2vh 0;
}

.vacancy-list-item__content__item p a {
    color: var(--black-color);
}

.vacancy-list-item__content__item ol,
.vacancy-list-item__content__item ul {
    display: flex;
    flex-direction: column;
    gap: 2vh;
}

.vacancy-arrow,
.vacancy-list__item__header a:after {
    width: 32px;
    width: 4vw;
    height: 29px;
    height: 4vh;
    background-image: url(img/arrow-job.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    transition: all 0.35s ease;
}

.vacancy-list__item__header a:after {
    content: "";
    position: absolute;
    top: calc(50% - 2vh);
    right: 0;
}

.vacancy-list__item.active .vacancy-arrow,
.vacancy-list__item.active .vacancy-list__item__header a:after {
    transform: rotate(180deg);
}

.partners-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2vh 4vw;
}

.mini-news img {
    display: block;
    margin: 0 0 2vh 0;
}

.mini-news__info a {
    color: var(--black-color);
    display: grid;
    grid-template-columns: max-content 60px 1fr;
    gap: 1vw;
    align-items: center;
    text-decoration: none;
}

.mini-news__info .mini-news__date {
    font-size: calc(var(--h1-font-size) * 2);
    line-height: var(--h1-line-height);
}

.mini-news__info .mini-news__month {
    color: var(--black-like-gray);
    font-size: calc(var(--font-size-one) * 1.5);
}

.mini-news__info .mini-news__title {
    font-size: var(--font-size-one);
    line-height: var(--line-height-one);
}

.index-text-header h2 {
    font-size: var(--h1-font-size);
    line-height: var(--h1-line-height);
    font-weight: 400;
}

.about-dates {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: space-between;
    gap: 5vh;
}

.about-dates div {
    max-width: 60%;
}

.footer {
    position: relative;
    padding: 0 0 6vh 0;
}

.footer .wrapper {
    margin: 0 3vw 0 3vw;
    padding: 4vh 0 0 0;
    border-top: 1px solid var(--black-color);
}

.footer-info-block {
    margin: 0 0 25vh 0;
}

.footer-info-block p {
    font-size: var(--font-size-two);
    line-height: var(--line-height-two);
}

.footer-info-block a {
    color: var(--black-color);
    text-decoration: none;
}

.footer-info-block div:not(:last-child) {
    padding: 0 42% 0 0;
}

.footer-info-block div p:not(:last-child) {
    margin: 0 0 calc(1.7vw + .2rem) 0;
}

.bottom-logo__desktop {
    display: block;
}

.bottom-logo__mobile {
    display: none;
}

.last-f-block {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.last-f-block p:last-child {
    text-align: right;
}

.last-f-block p:last-child a {
    text-decoration: underline;
}

.grid-arcont {
    display: grid;
    grid-gap: 2rem;
}

.grid-arcont.grid-two {
    grid-template-columns: 1fr 1fr;

}

.grid-arcont.grid-two.grid-left {
    grid-template-columns: calc(100% / 3 - 23px) 1fr;
}

.grid-arcont.grid-three {
    grid-template-columns: 1fr 1fr 1fr;
}

.flex-two-betwen {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

#headerTrigger {
    position: absolute;
    top: 360px;
    right: 0;
    width: 20vw;
    height: 5px;
    background-color: unset;
    z-index: 1000;
}

#mobileMenu {
    position: fixed;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 5vh;
    top: 0;
    right: -150vw;
    width: 100%;
    height: 100%;
    padding: 4vh 3vw;
    font-size: var(--font-size-two);
    line-height: var(--line-height-two);
    background-color: var(--white-color);
    transition: all 0.5s ease;
    z-index: 12000;
}

#mobileMenu.active {
    right: 0;
}

#mobileMenu a {
    color: var(--black-color);
    text-decoration: none;
}

.mobile-menu__header {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    margin: 0 0 5vh 0;
}

#mobileMenu ul {
    /* text-align: center; */
    margin-left: 109px;
    list-style-type: none;
}

#mobileMenu ul li:not(:last-child) {
    margin: 0 0 2vh 0;
}

#mobileMenu ul li.active a {
    text-decoration: underline;
}

.error__info-block {
    position: relative;
    font-size: var(--font-size-two);
    line-height: var(--line-height-two);
    width: 80vw;
    height: 100vh;
    margin: auto;
    z-index: 100;
}

.error__info-block__header {
    padding: 2.5vh 0;
    z-index: 500;
}

.error__info-block__content {
    position: absolute;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    inset: 0;
    z-index: -1;
}

.error__info-block a {
    color: var(--black-color);
    text-decoration: none;
}

.error__info-block a:hover {
    text-decoration: underline;
}

.error__info-block__content__inner  {
    width: 100%;
}

.error__info-block__content__inner div:first-child {
    text-align: right;
}

.error__info-block__content__inner h1 {
    font-size: var(--h1-font-size);
    font-weight: 300;
    margin: 0 0 3vh -5px;
}

.error-menu {
    display: flex;
    flex-wrap: wrap;
    gap: 6vw;
    margin: 6vh 0 0 0;
}

.error-menu ul {
    list-style-type: none;
}

.error-menu ul li:not(:last-child) {
    margin: 0 0 .7vh 0;
}

.video-bg {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100vw;
    height: 100vh;
    z-index: -1;
}

.video-bg.wall {
    position: fixed;
}

.footer .video-bg {
    opacity: 0.45;
    width: 100%;
    height: 100%;
}

.video-bg video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.grid-error {
    grid-template-columns: 20vw 1fr;
    gap: 5vw;
}

.preloader {
    position: fixed;
    inset: 0;
    height: 100vh;
    font-size: var(--h1-font-size);
    font-weight: 400;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: var(--white-color);
    opacity: 0;
    z-index: -12000;
    transition: opacity 1.5s ease, z-index 1.5s ease;
}

/* .trigger {
    position: absolute;
    top: calc(50% - 2px);
    right: 0;
    width: 100px;
    height: 4px;
    background-color: #FF0000;
    z-index: 20000;
} */

body.loading .preloader {
    opacity: 1;
    z-index: 12000;
}

.preloader img {
    max-width: 70vw;
    margin: 0 0 5vh 0;
}

.nobr {
    white-space: nowrap;
}

/* fix for inverted style */
    body.text-invert {
        color: var(--white-color);
        background-color: var(--black-color);
    }
    
    body.text-invert .index-menu a,
    body.text-invert .footer-info-block a,
    body.text-invert .header-menu__line a,
    body.text-invert .projects-list__item a,
    body.text-invert .contact-info__content a,
    body.text-invert .another-project__item a,
    body.text-invert .start-content.date,
    body.text-invert .project__info-blocks p, 
    body.text-invert .project__info-blocks p a,
    body.text-invert .back-arrow__button,
    body.text-invert .index-slider__slide__info p,
    body.text-invert .projects-list__switcher a{
        color: var(--white-color);
    }
    body.text-invert .content__header h3:before,
    body.text-invert .index-top__date:after {
        background-color: var(--white-color);
    }
    
    body.text-invert .index-top__date span {
        color: var(--white-color);
    }
    
    body.text-invert .projects-list__switcher a:hover:after, 
    body.text-invert .projects-list__switcher .active a:after {
        background-color: var(--white-color);
    }
    
    body.text-invert .projects-list__item,
    body.text-invert .another-project__item,
    body.text-invert .footer .wrapper {
        border-top: 1px solid var(--white-color);
    }
    
    body.text-invert #bgProjectShow {
        opacity: 1;
    }

/* @media(prefers-color-scheme: dark) {
    body {
        color: var(--white-color);
        background-color: var(--black-color);
    }
    
    .index-menu a,
    .footer-info-block a,
    .header-menu__line a,
    .projects-list__item a,
    .contact-info__content a,
    .another-project__item a,
    .start-content.date,
    .project__info-blocks p, 
    .project__info-blocks p a,
    .back-arrow__button,
    .index-slider__slide__info p {
        color: var(--white-color);
    }
    .content__header h3:before,
    .index-top__date:after {
        background-color: var(--white-color);
    }
    
    .index-top__date span {
        color: var(--white-color);
        background-color: var(--black-color);
    }
    
    .projects-list__item,
    .another-project__item,
    .footer .wrapper {
        border-top: 1px solid var(--white-color);
    }
    img {
        filter: brightness(.8) contrast(1.2);
    }
} */

@media only screen and (max-width: 800px) {
    .header__mobile-index-menu {
        display: block;
    }
    .middle {
        padding: calc(2vh + 1rem) 3vw calc(1vh + 1rem);
        /* padding: 0 3vw; */
    }
    .info-block {
        margin: 6vh 0;
    }
    .grid-arcont.grid-two.grid-left {
        grid-template-columns: 1fr;
    }
    .content__header h3:before,
    .project-gallery .content__header{
        width: 100%;
    }
    
    .project-gallery .content__header {
        margin-right: 0;
    }
    
    .project__info-blocks.grid-arcont,
    .project__info-blocks.grid-arcont .grid-two,
    .project__info-blocks.grid-arcont .grid-three {
        gap: 3vh 3vw;
    }
    
    .contact-info__wrapper {
        margin: 0 0 4vh 0;
    }
    .index-menu,
    .project__return-to-ptojets {
        display: none;
    }
    
    .about-info-block.grid-arcont.grid-two.grid-left {
        grid-template-areas:
            "about-content"
            "about-dates";
    }
    
    .about-dates {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-area: about-dates;
        /* flex-direction: row; */
    }
    
    .about-info-block .content.start-content {
        grid-area: about-content;
    }
    
    .content h1,
    .content.start-content p:first-of-type {
        text-indent: calc(100vw / 3);
    }
    
    .project .content h1,
    .project .content.project-page h1 {
        margin: 0 0 var(--h1-font-size) calc(100vw / 3);
    }
    
    .projects-list__switcher {
        margin: 6vh 0 0 calc(100vw / 3);
    }
}

@media only screen and (max-width: 650px) {
    .header.index-header {
        padding: 4vh 3vw;
    }
    .index-header.float .top-menu__line {
        top: 0;
        margin: 0;
    }
    .index-big-log,
    .float .index-big-logo {
        display: none;
    }
}

@media only screen and (max-width: 550px) {
    :root {
        --font-size-one: calc(0.8vw + .5rem);
        --line-height-one: calc(1.2vw + .5rem);
        --font-size-two: calc(1.1vw + .5rem);
        --line-height-two: calc(1.7vw + .5rem);
        --h1-font-size: calc(2.7vw + .5rem);
        --h1-line-height: calc(3.3vw + .5rem);
        --h2-font-size: calc(1.9vw + .5rem);
        --h2-line-height: calc(2.5vw + .5rem);
    }
    
    .header-menu__wrapper,
    .header__logo,
    .index-top__date,
    .catalog__project-date,
    .bottom-logo__desktop {
        display: none !important;
    }
    
    .header-menu__line.grid-arcont {
        display: flex;
        flex-wrap: wrap;
        gap: 4vw;
        align-items: center;
        justify-content: space-between;
    }
    
    
    .header__mobile-menu,
    .flex-two-betwen,
    .flex-two-betwen span {
        display: block;
    }
    
    .bottom-logo__mobile {
        display: block;
        max-height: 210px;
    }
    
    .index-slider__slide__info {
        display: block;
        color: var(--white-color);
        top: 2vh;
        left: 4vw;
        bottom: auto;
        right: 8vw;
    }
    
    .index-slider__slide__info p {
        color: var(--white-color);
    }
    
    .footer-info-block.grid-arcont.grid-three,
    .footer-info-block.grid-arcont.grid-three .last-f-block{
        display: flex;
        flex-direction: column;
        /* grid-template-columns: 1fr; */
        gap: 3vh;
        justify-content: space-between;
    }
    
    .footer-info-block.grid-arcont.grid-three div {
        width: 100%;
        margin: 0 0 calc(1.7vw + 0.2rem) 0;
    }
    
    .footer-info-block div:not(:last-child) {
        padding: 0;
    }
    
    .last-f-block p:last-child {
        text-align: left;
    }
    
    .top-menu__line,
    .project__main-img,
    .project-gallery,
    .project-gallery.tile-view,
    .another-projects__wrapper {
        margin: 3vh 0 0 0;
    }
    
    .project__info-blocks,
    .project-team__wrapper {
        margin: 3vh 0;
    }
    
    
    .projects-list {
        margin: 5vh 0 0 0;
    }
    
    .project__solutions.grid-arcont {
        gap: 3vh 3vw;
    }
    
    /*.projects-list__header.grid-arcont.grid-three,*/
    .projects-list__item a.grid-arcont.grid-three {
        grid-template-columns: 2fr 1fr;
        gap: 3vw;
    }
    
    .projects-list__header div:nth-child(2),
    .projects-list__item a.grid-arcont.grid-three div:not(.flex-two-betwen),
    .flex-two-betwen span.start-date-hide-mobile {
        display:  none;
    }
    
    .index-gallery__item,
    .index-gallery__item:first-child {
        grid-column: span 8;
        grid-row: span 1;
    }
    
    .index-gallery__item-bg {
        height: calc(100% - 27px);
    }
    
    .person-block__info {
        grid-template-columns: 1fr;
    }
    
    .content ul, .content ol {
        margin-left: 4vw;
    }
    
    .middle {
        /* padding: calc(2vh + 1rem) 3vw 0; */
        padding: 0 3vw;
    }
    
    .project-team p:not(:last-child) {
        margin: 0 0 calc(1.2vw + .5rem) 0;
    }
    
    /* .project .content h1 {
        margin: 0 0 var(--h1-font-size) 0;
    } */
    
    .projects-list__switcher {
        margin: 6vh 0 0 0;
    }
    
    .error__info-block {
        width: auto;
        margin: 0 4vh;
    }
    
    .error__info-block .grid-arcont {
        display: block;
    }
    
    .error__info-block__content__inner div:first-child {
        text-align: left;
        margin: 0 0 3vh 0;
    }
    
    .error__info-block__content__inner h1 {
        margin: 0 0 3vh 0;
    }
    .project-gallery.bg-view {
        grid-template-columns: 1fr;
    }
    .bg-view .project-gallery__image.first,
    .bg-view .project-gallery__image.two-w-block,
    .bg-view .project-gallery__image.three-w-block,
    .bg-view .project-gallery__image.four-w-block,
    .bg-view .project-gallery__image.five-w-block,
    .bg-view .project-gallery__image.six-w-block,
    .bg-view .project-gallery__image.seven-w-block,
    .bg-view .project-gallery__image.eight-w-block,
    .bg-view .project-gallery__image.two-h-block,
    .bg-view .project-gallery__image.three-h-block {
        grid-column: span 1;
        grid-row: span 1;
    }
    
    .projects-list__item.grid-arcont {
        grid-template-columns: 34% 33% 33%;
        gap: 10px;
        word-wrap: break-word;
        overflow-wrap: break-word;
-webkit-hyphens: auto;
   -moz-hyphens: auto;
        hyphens: auto;
    }
        
    .footer .wrapper {
        display: grid;
        grid-template-columns: 1fr 15vw;
        gap: 5vw;
    }
    
    .footer .wrapper a.logos {
        background-image: url(img/arcont-logo-big-vertical.png);
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
    }
    
    .footer-info-block {
        margin: 0;
    }
}