@font-face {
  font-family: 'Roboto Condensed';
  src: url('/static/fonts/RobotoCondensed-Light.woff2') format('woff2');
  font-weight: 300;
  font-display: swap;
}

@font-face {
  font-family: 'Roboto Condensed';
  src: url('/static/fonts/RobotoCondensed-Regular.woff2') format('woff2');
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: 'Roboto Condensed';
  src: url('/static/fonts/RobotoCondensed-Bold.woff2') format('woff2');
  font-weight: 500;
  font-display: swap;
}


/* layout.css - Каркас страницы */
:root {
    --lite-gr: #b3dba4;
    --gr: #69bd49;
    --yel: #dad235;
    --cian: #35b3da;
    --bgr: #cdf2bd;
    --bgr-a1: #98b68980;
    --bgr-a0: #98b68980;
    --bgr-b0: #78a362df;
    --bgr-b1: #96bf81df;
    --sup-lite: #f2f2f2;
    --silv-lite: #bfc3c6;
    --silv: #626468;
    --text-dark: #333;
    --text-light: #666;
    --head-bg: #ffffffff;
    --slider:  linear-gradient(to left, var(--bgr) -200%, var(--bgr-a1) 90%, var(--bgr-a0) 100%);
    --litebox: linear-gradient(to left, var(--bgr-b0) 0%, var(--bgr-b1) 50%, var(--bgr) 150%);
    --phone: 440px;
    --pad: 768px;
    --p_font-size: 24px;
    --slide-block_p_font-weight: 500;
    --menu_a_font-size: 22px;
    --h_font-size: 54px;
    --row-gap: 30px;
    --scr_padding: 20px;
    --menu_padding: 40px;
    --shadow: 0 12px 22px var(--bgr-a0);
}

@media (max-width: 999px) {
    .menu-block {
        --menu_padding: 20px;
    }
}

@media (max-width: 767px) {
    .mobile {
        --p_font-size: 22px;
        --h_font-size: 48px;
    }
}

@media (max-width: 499px) {
    .mobile {
        --scr_padding: 10px;
    }
    .menu-block {
        --menu_padding: 100px;
    }
}

@media (max-width: 419px) {
    .mobile {
        --p_font-size: 20px;
        --h_font-size: 38px;
    }
}
@media (max-width: 360px) {
    .mobile {
        --p_font-size: 18px;
    }
}


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

body.fonts-loading {
    visibility: hidden;
    opacity: 0;
}

body {
    visibility: visible;
    opacity: 1;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    font-size: 16px;
    font-weight: 300;
    color: var(--c-dark);
    min-height: 100vh;
    height: 100%;
    font-family: "Roboto Condensed", sans-serif;
    color: var(--text-dark);
    line-height: 1.5;
    background-image: linear-gradient(to right, #fff 50%, var(--bgr) 50%);
/*    padding-right: var(--scrollbar-width);*/
/*    transition: padding-right 0.8s;*/
    scrollbar-gutter: stable;
}

.main-container {
    display: grid;
}

.main-container {
    grid-template-areas: "left right";
    grid-template-columns: 1fr 1fr;
    min-height: 100vh;
    height: fit-content;
    row-gap: 0;
    margin-bottom: 0;
}

.left-panel {
    grid-area: left;
    background-color: #fff;
    width: 100%;
    height: 100%;
    overflow: visible;
    min-width: 500px;
    z-index: 50 !important;
}

.left-panel .container {
    margin: 0 auto;
    padding: var(--scr_padding);
}


/* ========== ОСНОВНОЙ КОНТЕЙНЕР ========== */

/* Хедер в левой панели  */
.header {
    position: sticky;
    top: 0;
    left: 0;
    width: 100%;
    height: 120px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-wrap: nowrap;
    padding-top: var(--scr_padding);
    z-index: 52;
    background: #fff;
}

.header-back {
    height: 260px;
    width: calc(50vw - 16px);
    position: fixed;
    pointer-events: none;
    top: 0;
    left: 0;
    z-index: 51;
    background: linear-gradient(to bottom, #ffffff 45%,  #ffffffaa 70%, #ffffff00 100%);
}

.mobile .header-back {
    width: 100vw;
}

.header-container {
    width: 100%;
    padding: 0 var(--scr_padding);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.header div {
    text-align: left;
}

/*    RIGHT     */

.right-panel {
    font-size: 17px;
    z-index: 30;
    top: 0;
    grid-area: right;
    justify-items: center;
    overflow: hidden;
    position: sticky;
}

.right-panel {
    height: fit-content;
    background-color: var(--bgr);
    left: 50%;
    width: calc(50vw - 1px);
}

.right-panel .container {
    max-width: calc(50vw - 1px);
    width: calc(50vw - 1px);
}

.footer {
    justify-items: center;
    width: 100%;
    color: var(--c-lite);
    margin-bottom: 20px;
    z-index: 51;
    align-self: center;
    padding: 20px;
}


/* ADAPTOR */
@supports (-webkit-overflow-scrolling: touch) {
  /* Safari */
  .left-panel {
    -webkit-overflow-scrolling: touch;
  }

  .header {
    position: -webkit-sticky;
  }
}

/* Firefox */
@-moz-document url-prefix() {
  body, .detail-panel, .detail-modal {
    scrollbar-width: thin;
    scrollbar-color: var(--lite-gr) transparent;
  }
}

/* Webkit - Обязательно задаем ширину для ВСЕХ контейнеров */
body::-webkit-scrollbar,
.detail-panel::-webkit-scrollbar,
.detail-modal::-webkit-scrollbar {
  width: 16px;
}

body::-webkit-scrollbar-track,
.detail-panel::-webkit-scrollbar-track,
.detail-modal::-webkit-scrollbar-track {
  background: transparent;
}

body::-webkit-scrollbar-thumb,
.detail-panel::-webkit-scrollbar-thumb,
.detail-modal::-webkit-scrollbar-thumb {
  background: var(--lite-gr);
  border-radius: 4px;
}

body::-webkit-scrollbar-thumb:hover,
.detail-panel::-webkit-scrollbar-thumb:hover,
.detail-modal::-webkit-scrollbar-thumb:hover {
  background: var(--gr);
}
/* Мобильный */
body.mobile {
    background: #fff;
}

.mobile .main-container {
    grid-template-columns: 1fr;
    grid-template-areas: "left";
}

.mobile .left-panel {
    min-width: 100%;
    overflow: visible;
}

.mobile .left-panel .container {
    margin-top: 0;
    max-width: 1000px;
    position: relative;
    z-index: 50;
    overflow: hidden;
}

.mobile .right-panel {
    display: none;
}