:root {
    --color-red: rgb(245, 6, 73);
    --color-grey: rgb(145, 143, 148);
    --color-black: rgb(31, 31, 31);
    --color-white: #FFFFFF;
    --border-radius: 0;
    --border-color: #eeeeee;
    --color-text-decoration: rgb(177, 91, 91);
    --color-text-decoration-2: rgb(126, 170, 140);
    --color-bg-1:#ece1e1;
	--color-bg-2:#e7f7ec;
	--color-bg-3:#e8f2fb;
}
* {
    font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
    /*font-family: "Montserrat", Verdana, sans-serif;*/
    font-weight: 400;
}

body {
    font-size: 1rem;
    font-variation-settings: "wght" 350;
    line-height: 1.5;
    font-kerning: normal;
    font-variant-ligatures: common-ligatures contextual;
    font-feature-settings: "kern", "liga", "clig", "calt";
    font-variant-numeric: tabular-nums;
    scroll-behavior: smooth;
    text-wrap: balance;
    display: grid;
    grid-template-rows: auto 1fr auto;
    min-height: 100dvh;
    background-image: url(../images/v880-kul-09-a.svg);
    background-attachment: fixed;
}

:is(header, footer, main) .wrap {
    width: clamp(1px, 92%, 1200px); /* TODO */
    margin: 0 auto;
    position: relative;
}

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

.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
	font-variation-settings: "wght" 600;
}


b, strong {font-variation-settings: "wght" 650;}

a {color: var(--color-black);transition: all .25s ease-in-out;}
a:hover {color: var(--color-text-decoration);}

hr {border-bottom: 1px solid var(--border-color); height: 0;padding: 0; display: block; margin: 0;}

.clearfix:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }
.clearfix { display: inline-block; }
/* start commented backslash hack \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* close commented backslash hack */

.mb15 {margin-bottom: 1.5rem;}

.text-center {text-align: center;}
.text-justify {text-align: justify; hyphens: auto;-webkit-hyphens: auto;}

.d-desktop {display: block;}
.d-mobile {display: none;}
li.d-desktop {display: inline-block;}

/* https://perishablepress.com/margin-offset-anchor-targets/ */
/*
#top, #about, #services, #clients, #projects, #contacts {scroll-margin-top: 5rem; }
#services {margin-bottom: 1.5rem;}
*/

/* https://w3collective.com/scroll-to-top-button-javascript/ */
#scroll-btn { opacity: 0; width: 40px; height: 40px; color: var(--color-black); background-color: rgba(177, 91, 91, 0.81); position: fixed; bottom: 10%; right: 10%; border: 2px solid var(--color-black); border-radius: 50%; font: bold 20px monospace; transition: opacity 0.5s, transform 0.5s; padding: 0; }
#scroll-btn.show { opacity: 1; transition: opacity 1s, transform 1s; }

.op01 {opacity: .1;}

.btn-back {text-decoration: none;display: inline-block; margin-bottom: 5rem; }
.btn-back:hover- {text-decoration: underline;}
.btn-back span {display: inline-block; padding: .5rem;background-color: var(--color-grey); border-radius: 50%; margin-right: .5rem;width: 2.7rem; height: 2.7rem; text-align: center;}
.btn-back:hover span {text-decoration: none;}

.bigtext {font-size: 1.2rem;}

.text-decoration, .text-color-1 {color: var(--color-text-decoration);}
.text-decoration-2, .text-color-2 {color: var(--color-text-decoration-2);}
.text-red {color: var(--color-red);}

figure {position: relative;}

header {border-bottom: 1px solid var(--border-color);background-color: rgb(250, 250, 250);}
header a {text-decoration: none;}
header .wrap {display: grid; grid-template-columns: auto 1fr;padding: 1rem 0 1.2rem 0;}
header nav {align-self: center; margin-top: .2rem;}
header #logo {transition: transform 0.5s ease; display: inline-block; width: auto; height: 5rem;align-self: center;text-align: center; font-size: 2.2rem; font-variation-settings: "wght" 600;font-weight: 550; color: var(--color-text-decoration);}
header #logo div {font-size: 1.1rem;color: var(--color-black);}
header #logo:hover { animation: logoHoverAnimation 2.5s forwards; }
@keyframes logoHoverAnimation {
    0% { transform: scale(1) rotateY(0deg); }
    20% { transform: scale(1.15) rotateY(0deg); /* Увеличение на 10% без поворота */ }
    40% { transform: scale(1) rotateY(0deg); /* Возврат к исходному размеру */ }
    100% { transform: scale(1) rotateY(360deg); /* Полный поворот по горизонтали (Y) */ }
}
header #hamburger {display: none;}
header #top-menu {padding: 0; margin: 0; list-style: none; text-align: right;}
header #top-menu li {display: inline-block; }
header #top-menu li a {display: inline-block; padding: 0 1.5rem; font-variation-settings: "wght" 550; font-size: 1rem;letter-spacing: 1px;}
header #top-menu li a:hover {color: var(--color-text-decoration);}
header #top-menu li:last-child a {padding-right: 0;}
header .phone {float: right; margin-top: .3rem; font-variation-settings: "wght" 600; font-size: .9rem;}
header .phone a {color: var(--color-text-decoration);}


footer {color: var(--color-grey); background-color: var(--color-black); font-style: .9rem; text-align: center;}
footer .wrap {padding: 2rem 0;}
footer a {color: var(--color-text-decoration); text-decoration: none;}

main {/*background-color: rgb(250, 250, 250);*/ padding: 2rem 0;}

main .aboutGrid {display: grid; place-content: center; min-height: 100%;grid-template-columns: 1fr auto; gap: 1rem; border: 1px solid var(--border-color);background-color: #f6fbff; /*border-radius: 0 0 2rem 0; overflow: hidden;*/ margin-bottom: 2rem; position: relative;}
main .aboutGrid .col {padding: 2rem;}
main .aboutGrid img {height: 100%; width: 100%; object-fit: cover; /*padding-top: 1rem;*/max-width: 25rem;max-height: 27rem;}
main .aboutGrid .slogan {display: inline-block; writing-mode: vertical-rl; text-orientation: mixed; transform-origin: center; transform: rotate(180deg); position: absolute; left: -1.5rem; text-transform: uppercase; font-size: .75rem; letter-spacing: 1px; top: .7rem;
  text-wrap: nowrap;}
main :is(.aboutGrid, .blockAbout) a:not(.phoneLinks a, .bigLink):hover {font-variation-settings: "wght" 500;}


main .articles {padding: 2rem 0; display: grid;grid-template-columns: 1fr 1fr; gap: 1.5rem 3rem;}
main .articles article a {text-decoration: none; color: var(--color-black);}
main .articles article .post-date {display: inline-block; writing-mode: vertical-rl; text-orientation: mixed; transform-origin: center; transform: rotate(180deg); position: absolute; left: -1.5rem; text-transform: uppercase; font-size: .75rem; letter-spacing: 1px; }
main .articles article .post-meta {margin-bottom: .75rem;font-size: .75rem;display: block;letter-spacing: 1px;}
main .articles article img {display: inline-block; aspect-ratio: 16/9; object-fit: cover; height: auto; width: 100%; transition: transform 0.5s ease;}
main .articles article:hover .post-title a {color: var(--color-text-decoration);}
main .articles article:hover img {transform: scale(1.05);}

main .phoneLinks {font-variation-settings: "wght" 600; font-size: 1.3rem;}
main .phoneLinks a {text-decoration: underline dotted;}
main .bigLink {display: inline-block;font-variation-settings: "wght" 600; font-size: 1.3rem; margin-top: 1.2rem;}

main .blockAbout {overflow: hidden; margin-bottom: 2rem;background-color: #f6fbff; padding: 2rem; margin-left: -2rem; width: calc(100% + 4rem);}
main :is(.blockAbout, .blockHidden) :is(p, ul, ol):last-child{margin-bottom: 0;}

main .blockHidden {margin-top: 2.5rem;padding-bottom: 2.5rem;}
main .blockHidden:first-child {margin-top: 0;}

main .blockHidden .imageRight{width: 100%; max-width: 20rem; float: right; margin-left: 1rem; margin-bottom: 1rem; border-radius: .4rem; margin-top: -2.45rem;}

.gallery-grid, .gallery, .gallery-16-9, .gallery-3-4, .gallery-4-3 {display: grid; gap: 2rem; grid-template-columns: repeat(4,1fr);}
:is(.gallery, .gallery-16-9, .gallery-3-4, .gallery-4-3) img {width: 100%; aspect-ratio: 16/9;object-fit: cover;object-position: top;}
.gallery-3-4 img {aspect-ratio: 3/4;}
.gallery-4-3 img {aspect-ratio: 4/3;}


img.mw-15{max-width: 15rem;}

table { width:100%; }
table thead {font-variation-settings: "wght" 650;background-color: #f6fbff;}
table :is(tr, th, td) {padding: 1rem;}
table td {vertical-align: baseline;}

.pagination {text-align: center; list-style: none; margin-top: 2rem;}
.pagination li {display: inline-block;border: 1px solid var(--border-color);transition: all .25s ease-in-out; margin: 0 .3rem;}
.pagination li:hover:not(.active) {border-color: var(--color-text-decoration);}
.pagination li:first-child {display: block; clear: both; width: 100%; border: none;}
.pagination li :is(a,span) {display: block; padding: .3rem .7rem; text-decoration: none;}
.pagination li.active {background-color: #f6fbff;}

h1.h2 {margin-bottom: 2rem;}

.h2 {font-size: calc(1.325rem + .9vw);}

.alignright {float: right; padding-left: 1rem;margin-bottom: 1rem; }

@media (min-width: 1200px) {
  .h2 {font-size: 2rem; }
}

@media (min-width: 1599px) {
}

@media (max-width: 768px) {
}

@media (max-width: 991px) {
    header #top-menu li a {padding: 0;}
    header #top-menu {display: flex; padding-left: 1rem; justify-content: space-evenly; /*justify-content: space-between; */}
}
@media (max-width: 450px) {
    :root{
        --border-radius: 1.2rem;
    }
    html.noScrolling {overflow: hidden;}

    .d-desktop {display: none !important;}
    .d-mobile {display: block !important;}

    nav {text-align: right;}
    header #hamburger {display: inline-block;background: transparent; border: 0px solid #d7d6d6; padding: .5rem; margin: .5rem;width: 3rem;height: 3rem;}
    header #hamburger img.show {display: block;width: 2rem; height: 2rem;}
    header #hamburger img.close {display: none;}
    header #hamburger.show img.show {display: none;}
    header #hamburger.show img.close {display: block;width: 1.7rem; height: 1.7rem;}
    header #top-menu {text-align: right; margin: 0;transition: all 0s ease-in-out; height: 0; opacity: 0; padding: 0; display: none;}
    header #top-menu.show {height: auto; opacity: 1; margin: 0 0 1rem 0; transition: all .25s ease-in-out; display: block;background-color: #e0eef9; position: absolute; left: 0; width: 100%; padding: 1rem 5% 1rem 5%; margin-top: 1rem;z-index: 1010;border-radius: 5px; box-shadow: 2px 4px 10px 0px rgb(206, 221, 233);}
    header #top-menu li {display: block !important;padding: .3rem 0;}

    main .blockHidden .imageRight{max-width: 100%; float: unset; margin: 0 0 1rem 0;}

    main .articles {grid-template-columns: 1fr;}
    main .articles article .post-date {writing-mode: unset;transform: unset;position: unset;margin-top: 1rem;}
    main .articles article .post-meta {margin-top: -2.25rem;position: relative;z-index: +1;float: right;}

    main .aboutGrid .slogan {display: none;}
    main .aboutGrid {grid-template-columns: 1fr;}
    main .aboutGrid img {grid-area: 1;}
    main .aboutGrid .col {padding: 0 1rem 1rem 1rem;}
    h4 {font-size: 1.275rem;}
    .gallery-grid, .gallery, .gallery-16-9, .gallery-3-4, .gallery-4-3 {grid-template-columns: repeat(2, 1fr);}

    .alignright {float: unset; width: 100%; padding: 0;}

}