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

*:before, *:after {
    box-sizing: inherit;
}

a img,
:link img,
:visited img {
  border: none;
}

:root {
    --black-0: hsl(0,0%,0%);
    --black-1: hsl(0,0%,12%);
    --black-2: hsl(0,0%,14%);
    --black-3: hsl(0,0%,20%);
    --black-4: hsl(0,0%,23%);
    --black-5: hsl(0,0%,27%);
    --black-6: hsl(0,0%,30%);
    --black-7: hsl(0,0%,45%);
    --black-8: hsl(0,0%,65%);
    --black-9: hsl(0,0%,85%);
    --black-10: hsl(0,0%,90%);
    --black-11: hsl(0,0%,95%);
    --black-12: hsl(0,0%,100%);
    --red-0: hsl(5,95%,50%);
    --red-1: hsl(5,45%,45%);
    --orange-0: hsl(34,96%,50%);
    --orange-1: hsl(34,90%,44%);
    --orange-2: hsl(34,90%,55%);
    --orange-3: hsl(34,85%,57%);
    --orange-4: hsl(34,85%,65%);
    --orange-5: hsl(34,83%,50%);
    --orange-6: hsl(34,80%,70%);
    --orange-7: hsl(34,80%,80%);
    --orange-8: hsl(34,80%,85%);
    --orange-9: hsl(34,30%,90%);
    --yellow-0: hsl(50,96%,50%);
    --yellow-1: hsl(50,90%,44%);
    --yellow-2: hsl(50,90%,55%);
    --yellow-3: hsl(50,85%,57%);
    --yellow-4: hsl(50,85%,65%);
    --yellow-5: hsl(50,83%,50%);
    --yellow-6: hsl(50,80%,70%);
    --yellow-7: hsl(50,80%,80%);
    --yellow-8: hsl(50,80%,85%);
    --yellow-9: hsl(50,30%,90%);
    --green-0: hsl(134,96%,50%);
    --green-1: hsl(134,50%,30%);
    --green-2: hsl(134,50%,38%);
    --green-3: hsl(134,45%,39%);
    --green-4: hsl(134,45%,45%);
    --green-5: hsl(134,44%,35%);
    --green-6: hsl(134,40%,60%);
    --green-7: hsl(134,40%,80%);
    --green-8: hsl(134,40%,85%);
    --green-9: hsl(134,15%,90%);
    --blue-0: hsl(211,96%,50%);
    --blue-1: hsl(211,50%,30%);
    --blue-2: hsl(211,50%,38%);
    --blue-3: hsl(211,45%,39%);
    --blue-4: hsl(211,45%,45%);
    --blue-5: hsl(211,44%,35%);
    --blue-6: hsl(211,40%,60%);
    --blue-7: hsl(211,40%,80%);
    --blue-8: hsl(211,40%,85%);
    --blue-9: hsl(211,15%,90%);
    /* Прочее */
    --font-h-at-w: 0.530;
    --font-h-at-w_printing-text: 0.510;
    --padding: 1rem;
    --base-header-hight: 3.6rem;
    /* Мэйн хедер */
    --main-header-width: calc(100vw - var(--padding)*2);
    --main-header-h1-font-size-0: 72px;
    --main-header-company-width-0: calc(var(--main-header-h1-font-size-0)*18*var(--font-h-at-w));
    --main-header-company-width-from: min(var(--main-header-company-width-0), var(--main-header-width));
    --main-header-company-width: max(var(--main-header-company-width-from), calc(var(--main-header-width)*0.55));
    --main-header-h1-font-size: calc(var(--main-header-company-width)/18/var(--font-h-at-w));
    --main-header-cursor: calc(var(--main-header-h1-font-size)/24);
    --main-header-printing-text-font-size: calc((var(--main-header-company-width) - var(--main-header-cursor))/36/var(--font-h-at-w_printing-text));
    --main-header-callout-grid-width-from: min(988px, var(--main-header-width));
    --main-header-callout-grid-width: max(var(--main-header-callout-grid-width-from), calc(var(--main-header-width)*0.65));
}

html {
    font-size: max(0.8vw, 14px);
    font-family: 'PT Root UI';
}

body {
    line-height: 1.5;
    width: 100%;
    color: var(--black-3);
    background-color: var(--black-11);
    font-smoothing: antialiased;
}

h1 {
    font-size: max(3.2rem, 33px);
    font-weight: normal;
}

h2 {
    font-size: 1.7rem;
    font-weight: 500;
}

h3 {
    font-size: 1.2rem;
    font-weight: 500;
}

h4 {
    font-size: 1rem;
    font-weight: bold;
}

* + :is(h1) {
    margin-top: calc(var(--padding)*3);
}

* + :is(h2) {
    margin-top: calc(var(--padding)*2);
}

* + :is(h3) {
    margin-top: calc(var(--padding));
}

* + :is(h4) {
    margin-top: calc(var(--padding)/2);
}

ul, ol {
    list-style-position: inside;
}

ul {
    list-style-type: "- ";
}

li::marker {
    color: inherit;
}

:is(h1, h2, h3, h4, ul, ol, p) + p {
    margin-top: calc(var(--padding)/2) !important;
}
:is(h1, h2, h3, h4, ul, ol, p) + ul {
    margin-top: calc(var(--padding)/2) !important;
}

:is(blockquote, .alert-orange, .alert-green, .alert-blue) + p {
    margin-top: calc(var(--padding)*3/4) !important;
}

*[title] {
    cursor: help;
}

:not(.geol, .ecol, .geod, .gidromet):hover,
::file-selector-button:hover {
    transition-behavior: normal;
    transition-duration: 0.2s;
    transition-timing-function: ease-in-out;
    transition-delay: 0s;
    transition-property: all;
}

:any-link {
    text-decoration: none;
    color: var(--blue-0);
}

:root {
    accent-color: var(--black-12);
}

:focus-visible {
    outline-color: var(--green-0);
}

::selection {
    background-color: var(--blue-4);
}

::marker {
    color: var(--black-6);
}

:is(
    ::-webkit-calendar-picker-indicator,
    ::-webkit-clear-button,
    ::-webkit-inner-spin-button,
    ::-webkit-outer-spin-button
) {
    color: var(--black-6);
}

a {
    cursor: pointer !important;
}
a:visited {
    color: var(--blue-0);
}
a:hover {
    color: var(--blue-4);
}
a svg {
    fill: var(--blue-5);
}
a:hover svg {
    fill: var(--blue-6);
}
a.wrapper {
    display: block;
    margin: 0;
    width: 100%;
    height: 100%;
}

caption, .caption {
    letter-spacing: 0.1rem;
}
.caption {
    display: block;
    width: 100%;
}

.table {
    display: block;
    width: 100%;
    overflow-x: auto;
    margin-top: var(--padding);
    margin-bottom: var(--padding);
    text-align: start;
    border: none;
    border-collapse: collapse;
    border-spacing: 0;
}
.table > caption {
    text-align: start;
}
.table > tbody > tr > th {
    white-space: nowrap;
    padding: calc(var(--padding) / 2) var(--padding);
    text-align: start;
    background-color: var(--black-9);
}
.table > tbody > tr:nth-of-type(2n+1) {
    background-color: var(--black-10);
}
.table > tbody > tr:nth-of-type(2n) {
    background-color: var(--black-11);
}
.table > tbody > tr > td {
    padding: calc(var(--padding) / 2) var(--padding);
    vertical-align: top;
    width: 1%;
}
.table > tbody > tr > td:first-of-type {
    white-space: nowrap;
}

blockquote {
    position: relative;
    width: 100%;
    margin-top: calc(var(--padding)/2);
    padding: calc(var(--padding)) calc(var(--padding)*3) calc(var(--padding)) calc(var(--padding)*2);
    background-color: var(--yellow-9);
}

blockquote:before {
    position: absolute;
    color: var(--yellow-6);
    font-size: calc(var(--padding)*4);
    line-height: 1;
    content: '\201E';
    right: calc(var(--padding)/2);
    top: calc(var(--padding)*-2);
}

input,
select,
textarea {
    color: var(--black-3);
    font-family: 'PT Root UI';
    font-size: 1em;
    padding: calc(var(--padding)/2);
}
input[type=text],
input[type=email],
select,
textarea {
    width: 100%;
}
input[type="radio"],
input[type="checkbox"] {
  width: calc(var(--padding)*1.5);
  height: calc(var(--padding)*1.5);
}
.errorlist {
    color: var(--red-0)
}
.errorlist > li::marker{
    content: "";
}
input:has(~ .errorlist),
select:has(~ .errorlist),
textarea:has(~ .errorlist) {
    border: 1px solid var(--red-1);
}

.button,
button,
input[type="submit"],
input[type="reset"],
input[type="button"] {
    appearance: none;
    font-family: 'PT Root UI';
    line-height: 1;
    font-size: 1.15rem;
    color: var(--blue-0);
    padding: var(--padding) calc(var(--padding)*2);
    border: 1px solid var(--blue-0);
    border-radius: 0.5rem;
    background-color: var(--black-11);
    white-space: nowrap;
    cursor: pointer;
}
.button:hover,
button:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
input[type="button"]:hover {
    color: var(--blue-4);
    border: 1px solid var(--blue-4);
}
input[type=file] {
    color: var(--black-7);
}
input[type=file]::file-selector-button {
    font-family: 'PT Root UI';
    line-height: 1;
    font-size: 1em;
    color: var(--black-3);
    padding: calc(var(--padding)/2) var(--padding);
    border: none;
    border-radius: calc(var(--padding)/2);
    background-color: var(--black-10);
    white-space: nowrap;
    cursor: pointer;
}
input[type=file]::file-selector-button:hover {
    background-color: var(--black-9);
}
.file-input-container {
    display: inline-block;
    padding: calc(var(--padding)/2) 0;
}
.file-input-container > a {
    padding-right: var(--padding);
}

.button svg,
button svg,
input[type="submit"] svg,
input[type="reset"] svg,
input[type="button"] svg {
    fill: var(--blue-5);
}
.button:hover svg,
button:hover svg,
input[type="submit"]:hover svg,
input[type="reset"]:hover svg,
input[type="button"]:hover svg {
    fill: var(--blue-6);
}

address {
    width: 100%;
    align-self: flex-start;
    display: grid;
    grid-template-columns: min-content auto;
    grid-template-rows: min-content;
    grid-auto-flow: row;
    grid-auto-rows: min-content;
    gap: var(--padding);
    line-height: 1;
    font-style: normal;
}
address.large {
    font-size: 1.17em;
    margin-top: var(--padding);
    padding: var(--padding) 0 var(--padding) calc(var(--padding)*2);
    color: var(--black-8);
    border-left: 2px solid var(--orange-0);
}
address.a-column {
    display: flex;
    flex-direction: column;
}
address .label {
    grid-column: 1/2;
    grid-row: auto;
    text-align: end;
    white-space: nowrap;
}
address.a-column .label {
    text-align: start;
    font-weight: bold;
}
address .val {
    grid-column: 2/3;
    grid-row: auto;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    column-gap: var(--padding);
}
address .val a {
    display: flex;
    justify-content: flex-start;
    align-items: stretch;
    color: inherit;
}
address .val a:hover {
    color: inherit;
}
address .val svg {
    width: 1.5em;
    height: 1.5em;
}

dialog {
    position: absolute;
    min-width: 75vw;
    min-height: 75svh;
    top: 12svh;
    left: 12svh;
    border-radius: var(--padding);
    padding: var(--padding);
}

/* --ОБЕРТКА МЭИН ХЕДЕРА И ПРЕЗЕНТАЦИИ */
.header-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    color: var(--black-11);
    background: radial-gradient(farthest-side at 50% 35%, var(--black-5), var(--black-3));
}


/* ---МЭИН ХЕДЕР */

.main-header {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    font-size: 1.25rem;
    width: 100%;
    min-height: 100svh;
    padding: var(--padding);
}
.main-header address {
    padding-bottom: var(--padding);
    color: var(--black-8);
}

.callout-grid {
    display: grid;
    width: var(--main-header-callout-grid-width);
    padding: var(--padding) 0;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: min-content;
    gap: var(--padding);
    grid-template-areas: "A B";
}
.callout {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    row-gap: var(--padding);
    width: 100%;
    height: 100%;
    text-align: center;
    padding: calc(var(--padding)*2);
    --left-background-color: var(--green-6);
    --right-background-color: var(--orange-6);
}
.callout:after {
    content: "";
    position: absolute;
    top: 99%;
    display: block;
    --side: 2.5rem;
    --semi-side: 2.2rem;
    width: var(--side);
    height: var(--side);
}
.callout span {
    line-height: 1;
    font-size: 4.5rem;
}
.callout p {
    color: var(--black-1);
    line-height: 1.2;
    font-size: 1.4rem;
}
.callout a {
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: 1;
    font-size: 1.25rem !important;
    color: var(--black-12);
    height: 3rem;
    min-width: 22ch;
    margin-top: var(--padding);
    border-radius: 0.5rem;
    white-space: nowrap;
    cursor: pointer;
}
.callout.left {
    grid-area: A;
    border-radius: 1rem 1rem 0 1rem;
    background-color: var(--left-background-color);
}
.callout.left span {
    color: var(--green-2);
}
.callout.left a {
    background-color: var(--green-2);
}
.callout.left a:hover {
    background-color: var(--green-1);
}
.callout.left:after {
    right: 0;
    clip-path: polygon(0 0, var(--side) 0, var(--side) var(--side), var(--semi-side) var(--side), 0 0);
    border-radius: 0 0 0.5rem 0;
    background-color: var(--left-background-color);
}
.callout.right {
    grid-area: B;
    border-radius: 1rem 1rem 1rem 0;
    background-color: var(--right-background-color);
}
.callout.right span {
    color: var(--orange-2);
}
.callout.right a {
    background-color: var(--orange-2);
}
.callout.right a:hover {
    background-color: var(--orange-1);
}
.callout.right:after {
    left: 0;
    clip-path: polygon(0 0, var(--side) 0, calc(var(--side) - var(--semi-side)) var(--side), 0 var(--side), 0 0);
    border-radius: 0 0 0 0.5rem;
    background-color: var(--right-background-color);
}

.company {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: calc(var(--padding)*2) 0 var(--padding) 0;
}

.main-header h1 {
    font-size: var(--main-header-h1-font-size);
    line-height: 1;
    font-weight: bold;
    white-space: nowrap;
}

.printing-text {
    display: inline-block;
    border-right: var(--main-header-cursor) solid var(--green-0);
    white-space: nowrap;
    overflow: hidden;
    font-size: var(--main-header-printing-text-font-size);
    animation:
        animated-printing-text 5s steps(36,end) 1s 1 normal both,
        animated-printing-cursor 1050ms steps(36,end) infinite;
}

@keyframes animated-printing-text {
    from { width: 0; }
    to { width: var(--main-header-company-width); }
}

@keyframes animated-printing-cursor {
    from { border-right-color: var(--green-0); }
    to { border-right-color: transparent; }
}

.main-header .divider {
    text-align: center;
    width: 70px;
    height: 8px;
    margin: var(--padding) auto 0 auto;
    background-color: var(--black-6);
    border-radius: 4px;
}


/* ---ПРЕЗЕНТАЦИЯ, ПОСЛЕ МЭЙН ХЕДЕРА */

.presentation {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: baseline;
    width: 100%;
    max-width: 75rem;
    margin: 4vmin 0;
    padding: var(--padding);
}
.presentation > .item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex-basis: 200px;
}
.presentation > .item > .val {
    text-align: center;
    font-size: 4rem;
    color: var(--orange-0);
}
.presentation > .item > .label {
    text-align: center;
    font-size: 1.5rem;
    color: var(--black-8);
}


/* ---ПОДЛОЖКИ ПОД БАЗОВЫЙ ХЕДЕР */

.base-header-back {
    position: relative;
    top: var(--base-header-hight);
    width: 100%;
    height: var(--base-header-hight);
    background-color: var(--black-3);
}


/* --БАЗОВЫЙ ХЕДЕР */

.base-header {
    z-index: 1;
    position: sticky;
    top: calc(var(--padding)/2);
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    color: var(--black-11);
}
.base-header svg {
    stroke: var(--black-12);
}

.logo-container {
    position: relative;
    height: var(--base-header-hight);
    background-color: var(--green-5);
}

.menu-button-open {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    height: var(--base-header-hight);
    padding: var(--padding);
    margin: 0 calc(var(--padding)/2);
    border-radius: var(--padding);
    background-color: var(--black-3);
}
.menu-button-open:hover {
    background-color: var(--black-6);
}
body:has(.base-header-back-article) .menu-button-open {
    background-color: var(--blue-1);
}
body:has(.base-header-back-article) .menu-button-open:hover {
    background-color: var(--blue-2);
}
body:has(.base-header-back-servise) .menu-button-open {
    color: var(--black-12);
    border: none;
    background-color: var(--green-1);
}
body:has(.base-header-back-servise) .menu-button-open:hover {
    border: none;
    background-color: var(--green-2);
}

/* БОКОВОЕ МЕНЮ */

#aside-menu {
    z-index: 2;
    --d-x: 20rem;
    --d-t: 0.5s;
    position: fixed;
    top: 0px;
    right: 0px;
    width: var(--d-x);
    height: 100vh;
    background-color: var(--black-2);
    visibility: hidden;
    transform: translateX(calc(var(--d-x) + 10px));
    will-change: transform;
    transition: transform var(--d-t) ease 0s, visibility 0s linear var(--d-t);
}
#aside-menu svg {
    stroke: var(--black-12);
    width: 100%;
    height: 100%;
}
#aside-menu:target {
    visibility: visible;
    transform: translateX(0);
    transition: transform var(--d-t) ease 0s;
}
#aside-menu nav {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    width: 100%;
    padding: var(--padding) 0;
}
#aside-menu nav a {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    font-size: 1.15rem;
    color: var(--black-11);
    padding: var(--padding) calc(var(--padding)*2);
}
#aside-menu nav .nav-button {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    font-size: 1.15rem;
    color: var(--orange-0);
    padding: var(--padding) calc(var(--padding)*2);
    border: none;
    border-radius: 0;
    background-color: transparent;
}
#aside-menu nav a:hover {
    background-color: var(--black-4);
}

#aside-menu nav .nav-button:hover {
    background-color: var(--black-4);
    color: var(--orange-0);
    border: none;
}

.menu-button-close {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: var(--base-header-hight);
    height: var(--base-header-hight);
    padding: calc(0.25*var(--base-header-hight));
    margin: var(--padding);
    border-radius: calc(var(--base-header-hight)/2);
}
.menu-button-close:hover {
    background-color: var(--black-4);
}


/* СЕКНДАРИ ХЕДЕР, АРТИКЛИ ХЕДЕР, СЕРВИСНЫЙ ХЕДЕР */

.base-header-back-secondary,
.base-header-back-article,
.base-header-back-servise {
    position: absolute;
    top: 0;
    width: 100%;
    height: var(--base-header-hight);
}
.base-header-back-secondary {
    background-color: var(--black-3);
}
.base-header-back-article {
    background-color: var(--blue-1);
}
.base-header-back-servise {
    background-color: var(--green-1);
}

.secondary-header,
.article-header,
.servise-header {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    width: 100%;
    min-height: 43svh;
    padding: calc(var(--padding)*5) calc(var(--padding)*2);
}
.secondary-header{
    font-size: 1.4rem;
    color: var(--black-8);
    background: var(--black-3);
}
.article-header {
    font-size: 1.23rem;
    color: var(--blue-7);
    background: var(--blue-1);
}
.servise-header {
    font-size: 1.23rem;
    color: var(--green-7);
    background: var(--green-1);
}

.secondary-header > h1,
.article-header > h1,
.servise-header > h1 {
    color: var(--orange-0);
}
.article-header > h1,
.servise-header > h1 {
    font-size: max(2.2rem, 23px);
}


/* --КОНТЕНТ */

main {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    gap: calc(var(--padding)*5);
    width: 100%;
    padding: calc(var(--padding)*5) 0;
}

a[name] {
    position: absolute;
    top: calc(var(--base-header-hight)*(0 - 1) - var(--padding));
}

.content {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: min-content;
    grid-auto-flow: row;
    grid-auto-rows: min-content;
    gap: calc(var(--padding)*5) calc(var(--padding)*4);
    padding: 0 calc(var(--padding)*4);
}
.content.dark {
    padding: calc(var(--padding)*5) calc(var(--padding)*4);
    color: var(--black-11);
    background: radial-gradient(circle farthest-side at 100% 50%, var(--black-5), var(--black-3));
}
.content.dark address {
    color: var(--black-8);
}

.segment {
    position: relative;
    grid-column: span 2;
    grid-row: auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: min-content;
    grid-auto-flow: row;
    grid-auto-rows: auto;
    gap: calc(var(--padding)*2);
}
.segment.left {
    grid-column: 1/2;
}
.segment.right {
    grid-column: 2/3;
}
.segment:has(.card),
.segment.card {
    gap: var(--padding);
}

.section {
    position: relative;
    grid-column: span 4;
    grid-row: auto;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: nowrap;
}
.section.half {
    grid-column: span 2;
}
.section.quarter {
    grid-column: span 1;
}
.section.three-quarters {
    grid-column: span 3;
}
.section.dir-column {
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
}
.section.center-align {
    justify-content: center !important;
    text-align: center !important;
}
.section.two-cells {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: min-content;
    grid-auto-flow: row;
    gap: calc(var(--padding)*2);
}
.section.three-cells {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: min-content;
    grid-auto-flow: row;
    gap: calc(var(--padding)*2);
}

.section.two-cells > *,
.section.three-cells > * {
    display: flex;
    align-items: center;
    justify-content: center;
}
.section:has(.button, button, input[type="button"], input[type="submit"], input[type="reset"]) {
    padding: var(--padding) 0;
    justify-content: flex-end;
}
.section:has(input[name="captcha_1"]) {
    flex-wrap: nowrap;
    column-gap: var(--padding);
}
.section.with-stub {
    display: grid;
    grid-template-columns: min-content 1fr;
    grid-template-rows: auto;
    background-color: var(--blue-9);
    --border-radius-left: 4px;
    border-radius: var(--border-radius-left) var(--padding) var(--padding) var(--border-radius-left);
}
.section.with-stub .stub {
    grid-column: 1/2;
    height: 100%;
    text-align: center;
    font-size: 1.05em;
    padding: var(--padding);
    background-color: var(--blue-8);
    border-radius: var(--border-radius-left);
    writing-mode: vertical-rl;
    transform: rotate(-180deg);
}
.section.with-stub .value {
    grid-column: 2/3;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    padding: var(--padding);
}

.content.dark.base-footer {
    font-size: 0.9rem;
    padding-bottom: calc(var(--padding)*2);
    border-top: 2px solid var(--orange-0);
    background: var(--black-3) !important;
}

.base-footer .soft-show {
    font-size: 1.1em;
    margin-top: var(--padding);
}


/* --БЛОКИ В КВАДРАТНЫХ СКОБКАХ */

.brackets {
    display: inline-block;
    position: relative;
    padding: calc(var(--padding)*1.5) calc(var(--padding)*2);
}
.brackets::before,
.brackets::after {
    content: "";
    position: absolute;
    top: 0;
    width: var(--padding);
    height: 100%;
    border-width: 2px;
}
.brackets::before {
    left: 0;
    border-style: solid none solid solid;
}
.brackets::after {
    right: 0;
    border-style: solid solid solid none;
}
.brackets.orange::before,
.brackets.orange::after {
    border-color: var(--orange-0);
}
.brackets.green::before,
.brackets.green::after {
    border-color: var(--green-0);
}
.brackets.blue::before,
.brackets.blue::after {
    border-color: var(--blue-0);
}


/* --КАРТОЧКИ И ИХ ЦВЕТОВЫЕ СТИЛИ */

.card {
    color: var(--black-3);
    border-radius: var(--padding);
}
.card > h3 {
    width: 100%;
    margin-bottom: calc(var(--padding)/2);
    border-bottom: 1px solid var(--black-8);
}
a.card {
    color: var(--black-3);
}

.card.orange {
    padding: calc(var(--padding)*2);
    background-color: var(--orange-9);
}
.card.orange.hovered:hover {
    background-color: var(--orange-8);
}
.card.orange .button,
.card.orange button,
.card.orange input[type="submit"],
.card.orange input[type="reset"],
.card.orange input[type="button"] {
    color: var(--black-12);
    border: none;
    background-color: var(--orange-4);
}
.card.orange .button:hover,
.card.orange button:hover,
.card.orange input[type="submit"]:hover,
.card.orange input[type="reset"]:hover,
.card.orange input[type="button"]:hover {
    background-color: var(--orange-3);
}
.card.orange input[type=file]::file-selector-button {
    background-color: var(--orange-8);
}
.card.orange input[type=file]::file-selector-button:hover {
    background-color: var(--orange-7);
}
.card.orange .button svg,
.card.orange button svg,
.card.orange input[type="submit"] svg,
.card.orange input[type="reset"] svg,
.card.orange input[type="button"] svg {
    fill: var(--black-12);
}
.card.orange .button:hover svg,
.card.orange button:hover svg,
.card.orange input[type="submit"]:hover svg,
.card.orange input[type="reset"]:hover svg,
.card.orange input[type="button"]:hover svg {
    fill: var(--black-12);
}

.card.green {
    padding: calc(var(--padding)*2);
    background-color: var(--green-9);
}
.card.green.hovered:hover {
    background-color: var(--green-8);
}
.card.green .button,
.card.green button,
.card.green input[type="submit"],
.card.green input[type="reset"],
.card.green input[type="button"] {
    color: var(--black-12);
    border: none;
    background-color: var(--green-4);
}
.card.green .button:hover,
.card.green button:hover,
.card.green input[type="submit"]:hover,
.card.green input[type="reset"]:hover,
.card.green input[type="button"]:hover {
    background-color: var(--green-3);
}
.card .green input[type=file]::file-selector-button {
    background-color: var(--green-8);
}
.card.green input[type=file]::file-selector-button:hover {
    background-color: var(--green-7);
}
.card.green .button svg,
.card.green button svg,
.card.green input[type="submit"] svg,
.card.green input[type="reset"] svg,
.card.green input[type="button"] svg {
    fill: var(--black-12);
}
.card.green .button:hover svg,
.card.green button:hover svg,
.card.green input[type="submit"]:hover svg,
.card.green input[type="reset"]:hover svg,
.card.green input[type="button"]:hover svg {
    fill: var(--black-12);
}

.card.blue {
    padding: calc(var(--padding)*2);
    background-color: var(--blue-9);
}
.card.blue.hovered:hover {
    background-color: var(--blue-8);
}
.card.blue .button,
.card.blue button,
.card.blue input[type="submit"],
.card.blue input[type="reset"],
.card.blue input[type="button"],
.button.blue,
button.blue,
input[type="submit"].blue,
input[type="reset"].blue,
input[type="button"].blue {
    color: var(--black-12);
    border: none;
    background-color: var(--blue-4);
}
.card.blue .button:hover,
.card.blue button:hover,
.card.blue input[type="submit"]:hover,
.card.blue input[type="reset"]:hover,
.card.blue input[type="button"]:hover,
.button:hover.blue,
button:hover.blue,
input[type="submit"].blue:hover,
input[type="reset"].blue:hover,
input[type="button"].blue:hover {
    background-color: var(--blue-3);
}
.card.blue input[type=file]::file-selector-button,
input[type=file].blue::file-selector-button {
    background-color: var(--blue-8);
}
.card.blue input[type=file]::file-selector-button:hover,
.card.blue input[type=file].blue::file-selector-button:hover {
    background-color: var(--blue-7);
}
.card.blue .button svg,
.card.blue button svg,
.card.blue input[type="submit"] svg,
.card.blue input[type="reset"] svg,
.card.blue input[type="button"] svg,
.button.blue svg,
button.blue svg,
input[type="submit"].blue svg,
input[type="reset"].blue svg,
input[type="button"].blue svg {
    fill: var(--black-12);
}
.card.blue .button:hover svg,
.card.blue button:hover svg,
.card.blue input[type="submit"]:hover svg,
.card.blue input[type="reset"]:hover svg,
.card.blue input[type="button"]:hover svg,
.button.blue:hover svg,
button.blue:hover svg,
input[type="submit"].blue:hover svg,
input[type="reset"].blue:hover svg,
input[type="button"].blue:hover svg {
    fill: var(--black-12);
}

/* ЗАПЧАСТИ */

.note {
    align-self: flex-end;
    font-size: 0.9em;
    color: var(--black-7);
    text-align: right;
    width: 100%;
    margin-top: calc(var(--padding)/2);
}

.tags {
    font-size: 0.85em;
    width: 100%;
    margin-top: calc(var(--padding)/2);
}

*:has(+ .note) {
    flex-grow: 1;
}

.hover-content {
    --hover-content-top: calc(var(--padding)*2 + 1.8rem);
    display: none;
    position: absolute;
    top: var(--hover-content-top);
    left: 0;
    width: 100%;
    height: calc(100% - var(--hover-content-top) - var(--padding)*2);
}

.map {
    width: 100%;
}

.more_info {
    color: var(--blue-0);
}

.large-text {
    font-size: 2.3rem;
}

.medium-text {
    font-size: 1.5rem;
}

.show {
    color: var(--orange-1);
}

.soft-show {
    color: var(--orange-5);
}

.show-green {
    color: var(--green-2);
}

.show-blue {
    color: var(--blue-6);
}

.alert-orange,
.alert-green,
.alert-blue {
    width: 100%;
    margin-top: calc(var(--padding)/2);
    padding: var(--padding) calc(var(--padding)*1.5);
}

.alert-orange {
    background-color: var(--orange-8);
    border-left: 3px solid var(--orange-5);
}

.alert-green {
    background-color: var(--green-8);
    border-left: 3px solid var(--green-5);
}

.alert-blue {
    background-color: var(--blue-8);
    border-left: 3px solid var(--blue-5);
}

.legend-item {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: nowrap;
    gap: calc(var(--padding)*0.7);
}
.legend-item + .legend-item {
    margin-top: var(--padding);
}

.mid-disk {
    flex-shrink: 0;
    display: inline-block;
    width: var(--padding);
    height: var(--padding);
    border-radius: calc(var(--padding)/2);
}
.less-disk {
    flex-shrink: 0;
    display: inline-block;
    width: calc(var(--padding)/2);
    height: calc(var(--padding)/2);
    border-radius: calc(var(--padding)/4);
}
.mid-square {
    flex-shrink: 0;
    display: inline-block;
    width: calc(var(--padding)*0.4);
    height: calc(var(--padding)*0.4);
}

.bkg-black-8 {
    background-color: var(--black-8);
}
.bkg-red-1 {
    background-color: var(--red-1);
}
.bkg-orange-0 {
    background-color: var(--orange-0);
}
.bkg-orange-1 {
    background-color: var(--orange-1);
}
.bkg-orange-4 {
    background-color: var(--orange-4);
}
.bkg-orange-7 {
    background-color: var(--orange-7);
}
.bkg-green-2 {
    background-color: var(--green-2);
}
.bkg-blue-0 {
    background-color: var(--blue-0);
}

.equation_container {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.equation {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
}
.equation_number {
    display: table-column;
    margin-left: calc(var(--padding)/2);
}

.img_container {
    width: 100%;
    margin-top: var(--padding);
    max-height: 70svh;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
}
.img_container.less {
    max-height: 40svh;
}
.img_container img {
    max-width: 100%;
    max-height: 100%;
}
.img_container + .caption {
    text-align: center;
    margin-bottom: var(--padding);
}

.file_add_container {
    margin: 20%;
    padding: 17%;
    border-radius: 50%;
    background-color: var(--blue-9);
}

/* --- МЕДИА */

/* Для НЕ сенсорных экранов */
@media (hover: hover) and (pointer: fine) {

    .card:has(.hover-content) {
        position: relative;
    }

    .card:has(.hover-content):hover {
        cursor: pointer;
        background-size: cover;
        background-color: var(--black-5);
        background-blend-mode: multiply;
    }

    .card:has(.hover-content):hover h3 {
        color: var(--orange-0);
    }

    .card:has(.hover-content):hover h4 {
        color: var(--orange-5);
    }

    .card:has(.hover-content):hover .note {
        color: var(--black-8);
    }

    .card:has(.hover-content):hover > .hover-content {
        display: flex;
        justify-content: center;
        align-items: center;
        color: var(--black-8);
        font-size: 1.5rem;
    }

    .geol:hover > *:not(.hover-content, h3),
    .ecol:hover > *:not(.hover-content, h3),
    .geod:hover > *:not(.hover-content, h3),
    .gidromet:hover > *:not(.hover-content, h3) {
        visibility: hidden;
    }

.geol:hover {
        background-image: url('../images/geology.jpg');
    }

    .ecol:hover {
        background-image: url('../images/ecology.jpg');
    }

    .geod:hover {
        background-image: url('../images/geodesy.jpg');
    }

    .gidromet:hover {
        background-image: url('../images/hydrometeorology.jpg');
    }
}


@media screen and (max-width: 1055px) {
    .callout {
        row-gap: calc(var(--padding)/2);
        padding: calc(var(--padding)*1.5);
    }
    main {
        gap: calc(var(--padding)*2);
        padding: calc(var(--padding)*2) 0;
    }
    .secondary-header {
        padding: calc(var(--padding)*2) var(--padding);
    }
    .content {
        display: flex;
        flex-direction: column;
        gap: calc(var(--padding)*2);
        padding: 0 calc(var(--padding)*2);
    }
    .content.dark {
        padding: calc(var(--padding)*2);
    }
    .content.dark.base-footer {
        padding-top: calc(var(--padding)*3);
    }
    .segment {
        gap: var(--padding);
    }
    .section.quarter {
        grid-column: span 2;
    }
    .section.three-quarters {
        grid-column: span 4;
    }
    .map {
        height: 70svh;
        overflow: hidden;
    }
    .map img {
        height: 100%;
        animation: animated-map 7s infinite alternate ease-in-out;
    }
    @keyframes animated-map {
        from { transform: translate(0); }
        7% { transform: translate(0); }
        93% { transform: translate(calc(100lvw - var(--padding)*4 - 100%)); }
        to { transform: translate(calc(100lvw - var(--padding)*4 - 100%)); }
    }
    .table {
        margin-top: calc(var(--padding)/2);
        margin-bottom: calc(var(--padding)/2);
    }
    .img_container {
        margin-top: calc(var(--padding)/2);
    }
    .img_container + .caption {
        margin-bottom: calc(var(--padding)/2);
    }
}

@media screen and (max-width: 850px) {
    address.large {
        padding: var(--padding) 0 var(--padding) var(--padding);
    }
    .header-wrapper {
        background: radial-gradient(circle farthest-side at 50% 40%, var(--black-5), var(--black-3));
    }
    .main-header {
        font-size: 1rem;
    }
    .callout span {
        font-size: 4rem;
    }
    .callout p {
        font-size: 1.2rem;
    }
    .callout a {
        font-size: 1.15rem !important;
    }
    .company {
        padding-top: var(--padding);
    }
    .secondary-header {
        padding: calc(var(--padding)*2) var(--padding);
    }
    .content {
        padding: 0 var(--padding);
    }
    .content.dark {
        padding: calc(var(--padding)*2) var(--padding);
    }
    .content.dark.base-footer {
        padding-top: calc(var(--padding)*2);
        padding-bottom: var(--padding);
    }
    .section.three-cells,
    .section.two-cells {
        gap: var(--padding);
    }
    .map img {
        animation: animated-map-mobile 10s infinite alternate ease-in-out;
    }
    @keyframes animated-map-mobile {
        from { transform: translate(0); }
        5% { transform: translate(0); }
        95% { transform: translate(calc(100dvw - var(--padding)*2 - 100%)); }
        to { transform: translate(calc(100dvw - var(--padding)*2 - 100%)); }
    }
}

@media screen and (max-width: 750px) {
    .callout-grid {
        display: none;
    }
    .company {
        order: 1;
        flex-grow: 1;
        padding: 0 !important;
    }
    .main-header address {
        order: 2;
        padding: 0;
    }
    .main-header .divider {
        order: 3;
    }
    .presentation > .item > .val {
        font-size: 7.2vw;
    }
    .presentation > .item > .label {
        font-size: 2.7vw;
    }
}

@media screen and (max-width: 640px) {
    .segment {
        display: flex;
        flex-direction: column;
        gap: var(--padding);
    }
}