/*
-------------------------------------------------------------------
Skin: Yellow Business
-------------------------------------------------------------------

Table of contents

1. Colors  [Row 30] 
2. Custom classes [Row 226] 
3. Layout and typography [Row 427] 
4. Headers and menu [Row 524] 
5. Titles [Row 724] 
6. Footer [Row 809] 
7. Components [Row 860] 
8. Containers [Row 1526] 
9. Mobile / responsive [Row 1701] 

-------------------------------------------------------------------

*/




/*
-------------------------------------------------------------------
COLORS
-------------------------------------------------------------------
*/


.extra-content, .nav:not(.ms-rounded) li > a:before, .boxed.advs-box-top-icon-img .advs-box-content, [class*="col-md-"].boxed,
.advs-box-side-img hr, .mi-menu .sidebar-nav, .advs-box-top-icon-img.niche-box-post:after, .accordion-list .list-group-item:before, [class*=header-] .title-base h1:before,
.woocommerce .product span.onsale, .circle-button, .btn.circle-button, .btn, .header-bootstrap, .header-title hr, .advs-box.boxed, i.circle, .intro-box:after, .intro-box:before,
.advs-box-side-img hr, .call-action-box, .title-base hr, .nav.inner.ms-mini, .bg-color, .header-title.white .title-base hr, .header-animation.white .title-base hr,
.title-base .scroll-top, .title-modern .scroll-top, i.square, .header-base, .progress-bar, .tagbox span, .niche-box-post .block-infos .block-data, .header-base .title-base h1:before {
    background-color: #00d5b5;
}

    .navbar-inner .nav.ms-minimal li a:before, .header-base.white, .advs-box-multiple.boxed .advs-box-content {
        background-color: #00d5b5 !important;
    }

    .btn:not(.btn-border):hover, .btn-primary:focus, .boxed .btn, .btn-primary.focus, .side-menu .active,
    .white.circle-button:hover, .woocommerce #respond input#submit.alt:hover, .woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover,
    .woocommerce input.button.alt:hover, .white .title-base.yellow-bar hr {
        background-color: #2e5b58 !important;
    }

    i.icon, .fullpage-menu .active i, .navbar-default .navbar-toggle:hover i, .navbar-default .navbar-toggle:focus i, header .side-menu .active > a,
    .adv-img-button-content .caption i, .icon-menu ul.nav > li.active > a i, .icon-menu ul.nav > li:hover > a i, .active .maso-order i, .btn.btn-border i, .advs-box-top-icon:not(.boxed) i.icon,
    .datepicker-panel > ul > li.picked, .tab-box .nav-tabs > li.active > a,
    .advs-box-content h2:hover a, .pricing-table .pricing-price span, .datepicker-panel > ul > li.picked:hover, footer h4, .box-menu-inner .icon-box i,
    .caption-bottom p, .mi-menu li .fa, .fullpage-arrow.arrow-circle .arrow i, .accordion-list .list-group-item > a i, .mega-menu .fa-ul .fa-li,
    .adv-circle.adv-circle-center i, .mi-menu a > .fa, .box-steps .step-item:after, .box-steps .step-number, h6, li.panel-item .fa-li, .icon-menu .navbar-collapse ul.nav i,
    .side-menu i, .side-menu ul a i, .bs-menu li:hover > a, .bs-menu li.active > a, .hamburger-button:hover, .img-box.adv-circle i, .advs-box-side .icon, .advs-box-side-icon i,
    .niche-box-testimonails h5, .title-icon i, i, .fullpage-menu.white li.active a i, .timeline > li > .timeline-label h4, .anima-button i, .pricing-table .list-group-item.pricing-price,
    .footer-center .footer-title, .accordion-list .list-group-item > a.active, .btn-border, .btn.btn-border, .btn.circle-button.btn-border, footer a:hover, .block-quote.quote-1:before,
    .block-quote.quote-2:before, .breadcrumb > li + li:before, .adv-img-full-content p.sub {
        color: #00d5b5;
    }

@media (max-width: 992px) {
    .navbar-nav .open .dropdown-menu > li > a[href="#"] {
        color: #00d5b5 !important;
    }
}

.footer-minimal .footer-title, .advs-box-top-icon.boxed .btn, .advs-box-top-icon.boxed .circle-button, .sidebar-nav ul a:hover, header .mi-menu .sidebar-nav ul a:hover,
.woocommerce div.product p.price, .woocommerce div.product span.price, .white .text-color, .accordion-list .list-group-item > a:hover, .boxed .circle-button:hover i,
.boxed .btn:hover i, .pagination > .active > a, .pagination > li:not(.disabled):hover > a, .boxed .circle-button, header .btn-search:hover, .advs-box h2 a:hover, .nav.ms-minimal > li.active > a {
    color: #00d5b5 !important;
}

.btn-border:hover, .btn.btn-border:hover, .btn.circle-button.btn-border:hover, .tag-row i {
    color: #2e5b58;
}

    .btn-border:hover i, .white .btn i {
        color: #2e5b58 !important;
    }

.nav-pills > li.active > a, .nav-pills > li.active > a:hover, .nav-pills > li.active > a:focus, .pagination > li:not(.disabled):hover > a i:before, .advs-box-multiple div.circle, .advs-box-multiple div.circle i {
    border-color: #00d5b5 !important;
    color: #00d5b5 !important;
}

.nav.inner.ms-rounded > li > a:hover, .nav.inner.ms-rounded > li.active a {
    background-color: #00d5b5 !important;
    border-color: #00d5b5 !important;
}

.circle-button, .btn-default, .white .btn:not(.btn-border), .btn-border, .bg-transparent .navbar-nav > li.active > a .caret:before, .bg-transparent .navbar-nav > li:hover > a .caret:before,
.white .btn-text, .scroll-top-mobile:hover:before, .tab-box.left:not(.pills) .panel-box, .tab-box.right:not(.pills) .panel-box, .tab-box.right .nav-tabs {
    border-color: #00d5b5;
}

.boxed.advs-box-multiple .advs-box-content, .niche-box-post, .extra-content, .quote-author, .border-color, .border-color.boxed-border.boxed-border.white, .img-border, .timeline > li > .timeline-badge,
body div.boxed-border.border-yellow, .pagination li.active a {
    border-color: #00d5b5 !important;
}

.datepicker-top-left, .datepicker-top-right {
    border-top-color: #00d5b5;
}

    .datepicker-top-left:before, .datepicker-top-right:before {
        border-bottom-color: #00d5b5;
    }

.text-color {
    color: #2e5b58;
}

.circle-button:hover, .btn:hover {
    border-color: #2e5b58 !important;
}

.btn-text, html .advs-box .btn-text:after {
    color: #2e5b58;
    border-color: #2e5b58;
}

.white.btn, .white .btn, .white .tag-row a, .header-bootstrap i.icon, .white .tag-row i, .white .advs-box-content h2 a, .white.advs-box-side-img h2 a, .advs-box-side-icon.boxed .icon-box i,
.circle-button, .white .pagination > li.disabled > a, .white .pagination > li > a, .social-colors i, .btn.circle-button, .btn, .btn i, .circle-button, .btn.circle-button, .btn:hover,
.btn:hover i, .btn.focus, .input-group button {
    color: #fff;
}

    .nav.inner.ms-rounded > li > a:hover, .white .btn-text:hover, .header-base.white .breadcrumb.b a, .mi-menu .sidebar-nav ul a:hover, .white .btn.btn-border:hover, .white.advs-box-top-icon h3,
    .nav.inner:not(.ms-rounded) > li.active, .nav.inner.ms-rounded > li.active a, .nav.inner.ms-rounded li:hover i, .ms-rounded .active .maso-order i, .white .btn.circle-button.btn-border,
    .boxed .btn-text, .advs-box.white h3 {
        color: #fff !important;
    }

.section-bg-image .advs-box.boxed-inverse, .white .flex-control-paging li a:hover, body .section-bg-color .advs-box-blog.boxed-inverse, .adv-img-down-text.boxed-inverse:hover, .advs-box-multiple div.circle,
.section-bg-image [class*="col-md-"].boxed-inverse, [class*="shadow-"].boxed-inverse, .sidebar-nav ul ul, .base-box.boxed, .base-box.boxed-inverse, .advs-box.boxed-inverse {
    background-color: #fff;
}

header .side-menu .active, .white.btn:not(.btn-border), .white .btn:not(.btn-border), .white:not([class*="header-"]) .title-base hr, .bg-white {
    background-color: #fff !important;
}

.white .flex-control-paging li a.flex-active, .white.btn, .white .btn {
    border-color: #fff;
    background-color: #fff !important;
}

.white .flex-control-paging li a, body .white .flex-direction-nav a:before, .btn .caret:before, body .white .flex-direction-nav a.flex-next:before, .white .accordion-list .list-group-item > a:before {
    border-color: #fff;
}

.white .btn:hover, .white .pagination li > a i:before, .boxed-border.white, .boxed-border.boxed-border.white, .btn.white:hover, .white .btn:hover, .btn.white, .white .btn, .boxed .btn-text,
.white.bg-color .btn:not(.btn-border) {
    border-color: #fff !important;
}

.white form .form-control {
    border-color: #fff !important;
    color: #fff !important;
}

.section-bg-color .advs-box-top-icon.boxed-inverse .icon, .section-bg-color .advs-box-top-icon .icon, .navbar-mini, .header-base:not(.bg-cover) {
    background-color: #f7f7f7;
}

.navbar-default .navbar-nav > .active > a, .dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus, .navbar-nav > li:hover > a, .nav.inner > li, .box-transparent .overlaybox-inner, header .input-group-btn .btn, header .input-group-btn .btn:hover,
.navbar-default .navbar-nav > li > a:hover, .dropdown-menu ul > li:hover > a, .navbar-main .btn-search:hover, .accordion-list .list-group-item > a:hover, .nav.inner, .bg-transparent li.active, .bg-transparent li:hover,
.tab-box .nav-tabs li.active, .white.btn.btn-border, .white .btn.btn-border, .pagination > li > a:hover, .pagination > li > span:hover, .pagination > li > a:focus, .pagination > li > span:focus,
.navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus, .nav-tabs > li.active > a {
    background: none !important;
}

header .input-group-btn .btn {
    border: none !important;
}

.advs-box .advs-box-content p, .advs-box-side-icon p, .maso-order i {
    color: #7a7a7a;
}

.white.btn:not(.btn-border), .white .btn:not(.btn-border) {
    color: #7a7a7a !important;
}

.input-group-btn .btn, .btn.btn-primary:hover {
    background-color: #9c9c9c !important;
    border-color: #9c9c9c !important;
}

    .input-group-btn .btn:hover, .btn.btn-primary {
        background-color: #7a7a7a !important;
        border-color: #7a7a7a !important;
    }

.color-4 {
    color: #53a0d8;
}

.advs-box h3 {
    color: #4C4C4C;
    font-weight: 400;
}

.white ::-webkit-input-placeholder {
    color: #fff;
}

.white ::-moz-placeholder {
    color: #fff;
}

.white :-ms-input-placeholder {
    color: #fff;
}

.white :-moz-placeholder {
    color: #fff;
}
/*
-------------------------------------------------------------------
CUSTOM CLASSES
-------------------------------------------------------------------
*/
.shadow-1 {
    box-shadow: 0 0 7px 0px rgba(0, 0, 0, 0.16);
}

.shadow-2 {
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.13) !important;
}

img.shadow-2 {
    border-radius: 5px;
}

.boxed-inverse.shadow-1, .boxed.shadow-1 {
    border-radius: 2px;
}

.boxed-border, [class*="col-md-"].boxed-border {
    background: none !important;
    border: 4px solid #7a7a7a !important;
}

.opacity-8 {
    opacity: .8;
}

.width-400 {
    max-width: 400px;
}

.width-500 {
    max-width: 500px;
}

.width-600 {
    max-width: 600px;
}

.flexslider.nav-right .flex-control-nav {
    bottom: 0;
    right: 0;
    display: inline-block;
    width: auto;
}

.flexslider.nav-left .flex-control-nav {
    text-align: left;
    bottom: -60px;
}

.flexslider.nav-top-right .flex-control-nav {
    top: 15px;
    right: 15px;
    text-align: right;
    bottom: auto;
}

.flexslider.nav-top-right .flex-control-paging li a {
    text-indent: 9995px;
}

.flexslider.png-boxed .img-box {
    border: 1px solid #cecece;
    padding: 15px;
    width: 145px;
    height: 75px;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .flexslider.png-boxed .img-box img {
        margin: 0 !important;
        display: inline-block !important;
        max-width: 100% !important;
    }

.border-table.text-left:not(.table-bordered) td:first-child {
    padding-left: 0;
}

.border-table.text-left:not(.table-bordered) td:last-child {
    padding-right: 0;
    border-right: 0;
}

.border-table.text-left:not(.table-bordered) td {
    border: none;
    border-right: 1px solid #D2D2D2;
    display: inline-block;
    padding-top: 0;
    padding-bottom: 0;
}

.img-bubble span.caption-box {
    position: absolute;
    top: 0;
    margin: 50px;
    width: 200px;
    height: 200px;
    padding: 0px;
    background: #fff;
    z-index: 2;
    border-radius: 200px;
    display: flex !important;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.img-bubble .caption-box:after {
    content: '';
    position: absolute;
    border-style: solid;
    border-width: 20px 20px 0;
    border-color: #fff rgba(0, 0, 0, 0);
    display: block;
    width: 0;
    z-index: 1;
    bottom: 15px;
    left: 157px;
    transform: rotate(-45deg);
}

.img-bubble.img-box.inner .caption {
    margin: 0 15px;
    width: 170px;
    height: auto;
    background: none;
    color: #4e4e4e;
    font-size: 13px;
    line-height: 18px;
    font-weight: 400;
    text-shadow: none;
}

.img-border {
    border: 1px solid #7a7a7a;
}

.bg-img {
    margin: -81px -15px !important;
    width: calc(100% + 30px);
    max-width: 200%;
}

.section-doc {
    border-top: 1px solid #e0e0e0;
}

body .block-quote.quote-gray:before {
    color: #dedede;
}

@keyframes border-animation {
    0% {
        height: 0%;
    }

    100% {
        height: 100%;
    }
}

@keyframes border-animation-2 {
    0% {
        width: 0%;
    }

    100% {
        width: 100%;
    }
}

.intro-box {
    position: relative;
    background: none !important;
}

    .intro-box:after, .intro-box:before {
        content: "";
        position: absolute;
        width: 10px;
        height: 100%;
        right: 0;
        top: 0;
        animation: border-animation 2s;
    }

    .intro-box:before {
        left: auto;
        right: 0;
        width: 100%;
        height: 10px;
        animation: border-animation-2 2s;
    }

/*
-------------------------------------------------------------------
LAYOUT & TYPOGRAPHY
-------------------------------------------------------------------
*/
body, p {
    font-size: 14px;
    line-height: 23px;
}

body, p, h1, h2, h3, h4, h5, h6 {
    font-weight: 300;
}

.text-normal, .timeline > li > .timeline-label p, .timeline > li > .timeline-label h4, .timeline-title, .form-box p {
    font-weight: 400;
}

.text-bold, .collapse-button b, #comments h4, #comments h5, .nav-pills > li > a {
    font-weight: 500 !important;
}

p {
    letter-spacing: .5px;
}

.text-xs {
    font-size: 12px !important;
    line-height: 16px;
}

.text-s {
    line-height: 20px;
}

.text-l {
    line-height: 38px;
}

.text-xl {
    line-height: 60px;
    font-size: 45px !important;
}

hr {
    border-top: 1px solid #d6d6d6;
}

.container.content, .section-empty > .content, .section-bg-image > .content, .section-bg-video > .content, .section-bg-animation > .content, .section-slider > .content, .section-two-blocks .content {
    padding-top: 80px;
    padding-bottom: 80px;
}

.base-box.boxed, .base-box.boxed-inverse, .boxed-inverse, [class*="col-md-"].boxed, [class*="col-md-"].boxed-inverse, .grid-box > .grid-item.boxed-inverse, .row.vertical-row > div.boxed-inverse, .row.vertical-row > div.boxed {
    padding: 50px;
}

    [class*="col-md-"].boxed.small-padding, [class*="col-md-"].boxed-inverse.small-padding {
        padding: 25px;
    }

h1 + p, h2 + p, h3 + p, h4 + p {
    margin-top: 20px;
}

h1, .h1 {
    line-height: 50px;
}

h2, .h2 {
    line-height: 35px;
}

h4, .h4 {
    line-height: 23px;
}

.quote-author {
    font-style: normal;
    font-weight: 400;
    padding-left: 15px;
    border-left: 4px solid #7d7d7d;
}

.section-bg-color hr {
    border-color: #b3b3b3;
}

.scroll-top-mobile {
    border-radius: 50%;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.17);
    color: #b5b5b5;
    width: 35px;
    height: 35px;
    bottom: 15px;
    right: 15px;
}
/*
-------------------------------------------------------------------
HEADER AND MENUS
-------------------------------------------------------------------
*/

.nav:not(.ms-rounded) li.active > a:before, .nav:not(.ms-rounded) li:hover > a:before {
    width: 100%;
}

.nav:not(.ms-rounded) li {
    position: relative;
}

    .nav:not(.ms-rounded) li > a:before {
        content: '';
        position: absolute;
        left: 0px;
        bottom: 0px;
        width: 0%;
        height: 1px;
        transition: all 0.35s ease-out;
        -webkit-transition: all 0.35s ease-out;
    }

.navbar-brand {
    height: 70px;
}

.nav .caret:before {
    border-color: #7d7d7d;
}

.navbar-nav > li > a {
    padding-top: 25px;
    padding-bottom: 25px;
    font-weight: 500;
    font-size: 14px;
}

.navbar-main .btn-search {
    margin-top: 12px;
    border: none;
    background: none;
    font-size: 24px;
}

.search-box {
    margin: 85px 0 0 0;
}

.navbar-mini {
    border: none;
}

    .navbar-mini .navbar-left {
        padding-top: 10px;
    }

    .navbar-mini span i {
        font-size: 13px;
        transform: translateY(-0.5px);
        display: inline-block;
        color: #a9a9a9;
    }

    .navbar-mini span {
        padding: 0 7px;
        font-weight: 400;
        letter-spacing: .5px;
        opacity: .9;
    }

    .navbar-mini > .container {
        padding-left: 225px;
    }

@media (min-width: 995px) {
    .navbar-mini:not(.hidden) + .navbar-main .navbar-header {
        margin-top: -22px;
        padding-left: 55px;
        padding-right: 25px;
        margin-left: -55px;
        background: #fff;
        position: relative;
    }

        .navbar-mini:not(.hidden) + .navbar-main .navbar-header:after {
            position: absolute;
            content: '';
            background-color: #f5f5f5;
            height: 90px;
            width: 60px;
            right: -10px;
            left: auto;
            top: -73px;
            transform: rotate(125deg);
        }

        .navbar-mini:not(.hidden) + .navbar-main .navbar-header:before {
            position: absolute;
            content: '';
            background-color: #fff;
            height: 22px;
            width: 6000px;
            right: 0;
            top: 0px;
            z-index: 0;
        }
}

.navbar-big-logo .navbar-mini:not(.hidden) + .navbar-main .navbar-header {
    padding-right: 0;
}

.navbar-big-logo .navbar-main .navbar-header:after {
    display: none;
}

.navbar-mini:not(.hidden) + .navbar-main .navbar-brand {
    margin-top: 10px;
}

.nav.ms-minimal > li > a {
    border-bottom: none;
    font-weight: 500;
}

.nav.maso-filters {
    margin-bottom: 30px;
}

    .nav.maso-filters a {
        padding-top: 0;
    }

.inner.ms-minimal li a {
    padding-top: 0;
}

.mega-menu a {
    height: 32px;
    margin-bottom: 7px;
    padding-left: 0;
    font-weight: 400;
    font-size: 14px;
}

.mega-menu .nav-tabs > li > a {
    padding: 15px 30px !important;
    height: 50px;
}

.mega-tabs .tab-box .panel.active {
    margin: 0 5px;
}

.mega-menu h5 {
    margin-bottom: 21px;
    font-weight: 400;
}

.mega-tabs .nav-tabs {
    background: #fff;
    border-bottom: 1px solid #e8e8e8;
}

    .mega-tabs .nav-tabs li a:before {
        bottom: -1px;
    }

.navbar-main .navbar-form .form-control {
    border: none;
    border-bottom: 1px solid #e6e6e6;
}

.navbar-main .navbar-form .btn-search {
    font-size: 13px;
    margin-top: 0;
    border-bottom: 1px solid #e6e6e6;
    background: #f5f5f5;
}

header .navbar-main form.navbar-form {
    margin-top: 18px;
    padding: 0;
}

header .side-menu > li > a {
    font-weight: 500;
}

.side-menu-fixed .brand {
    text-align: left;
    padding: 25px 15px;
}

header .mi-menu ul li > a, header .sidebar-nav .panel-item > span {
    padding: 10px 15px;
}
/*
-------------------------------------------------------------------
TITLES
-------------------------------------------------------------------
*/
.title-base {
    flex-direction: column-reverse;
    display: flex;
}

[class*=header-] .title-base {
    text-align: left;
    display: block;
}

    [class*=header-] .title-base h1, [class*=header-] .title-icon h2, [class*=header-] .title-icon h1, [class*=header-] .title-base.title-small h2 {
        font-size: 50px;
        font-weight: 400;
        margin-top: 5px;
        position: relative;
    }

    [class*=header-] .title-base p, [class*=header-] div.title-icon p {
        max-width: 500px;
    }

.header-base .title-base {
    display: block;
}

    .header-base .title-base h1 {
        font-size: 35px;
        font-weight: 400;
        position: relative;
        color: #4C4C4C;
    }

[class*=header-] .title-base p {
    max-width: 500px;
    margin-top: 50px;
    color: #4C4C4C;
}

.title-base hr {
    width: 100%;
    opacity: 0;
    height: 5px;
}

.header-base .breadcrumb.b a, .header-base .breadcrumb li {
    color: #4C4C4C;
    font-weight: 500;
    font-size: 13px;
}

.title-base h1:before {
    content: '';
    position: absolute;
    height: 5px;
    width: 150px;
    bottom: -20px;
}

.title-base.text-left hr, .title-base.text-left hr, [class*=header-] .title-base hr {
    opacity: 1;
}

[class*=header-] .title-base hr {
    display: none;
}

.title-base p {
    margin-top: 0;
}

.title-base.text-left p {
    margin-left: 1px;
    margin-bottom: 3px;
}

.title-base + .accordion-list > .list-group-item:first-child {
    border-top: none;
}


/*
-------------------------------------------------------------------
FOOTER
-------------------------------------------------------------------
*/

footer {
    border-top: 1px solid #E6E6E6;
}

    footer p, footer a, footer li {
        opacity: .8;
        font-weight: 400;
    }

    footer a {
        line-height: 25px;
    }

    footer h3 {
        font-weight: 500;
        font-size: 16px;
        margin-bottom: 22px;
    }

    footer .container {
        padding: 80px 15px;
    }

    footer .copy-row .copy-text {
        border-top: 1px solid #cecece;
        padding: 15px;
        margin: auto;
        font-weight: 400;
        color: #a2a2a2;
        letter-spacing: .3px;
        float: none;
    }

    footer .fa-ul .fa-li {
        font-weight: 600;
    }

    footer ul {
        padding-left: 16px;
    }

    footer .social-group {
        margin-bottom: 0;
    }

/*
-------------------------------------------------------------------
COMPONENTS
-------------------------------------------------------------------
*/
.accordion-list .list-group-item > a {
    font-weight: 400;
    padding-left: 20px;
}

    .accordion-list .list-group-item > a:before, .advs-box .btn-text:after, .box-steps .step-item:after {
        -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        transform: rotate(45deg);
        margin-left: -21px;
        top: 19px;
        position: absolute;
        border-top-width: 2px;
        border-top-style: solid;
        border-right-width: 2px;
        border-right-style: solid;
        content: "";
        width: 6px;
        height: 6px;
        transition: all .15s;
        border-color: rgba(93, 93, 93, 0.5);
    }

.accordion-list .list-group-item > .panel > .inner {
    padding: 0px 15px 10px 20px;
}

.accordion-list .list-group-item > a.active:before {
    -webkit-transform: rotate(135deg);
    -ms-transform: rotate(135deg);
    transform: rotate(135deg);
}

.btn-lg, .btn-group-lg > .btn {
    padding: 10px 20px;
    font-size: 15px;
}

.btn-sm i {
    font-size: 14px;
    transform: translateY(1px);
    display: inline-block;
}

.btn-xs {
    font-size: 11px;
    line-height: 18px;
    padding-top: 2px;
    padding-bottom: 0;
}

    .btn-xs.btn-border {
        border-width: 1px;
    }

.load-more-maso.btn i, .load-more-grid.btn i {
    font-size: 11px;
    margin-left: 5px;
    transform: translateY(0px);
}

.btn-text {
    border-bottom-style: solid;
}

.btn-border, .btn-border, .white .btn-border {
    border-width: 1px;
    font-weight: 500;
}

.btn.white:hover, .white .btn:hover {
    opacity: .8;
}

.progress-circle .inner-circle .counter-circle {
    font-weight: 400;
    font-size: 19px;
}

.progress-circle .inner-circle .main {
    line-height: 18px;
    font-size: 11px;
    font-weight: 400;
    opacity: .7;
}

.progress-circle .inner-circle .subtitle {
    display: flex;
    flex-direction: column-reverse;
    margin: 5px 0 0 0;
}

.inner-circle hr {
    display: none;
}

.table:not(.grid-table) th {
    font-weight: 500;
}

table.table:not(.grid-table) > tbody > tr > td, table.table:not(.grid-table) > tbody > tr > th {
    font-size: 13px;
    padding: 15px;
}

.form-box .form-control {
    border: none;
    border-bottom: 1px solid #b9b9b9;
    border-radius: 0;
    background: none;
}

.comment-list .name {
    font-weight: 500;
}

.comment-list img {
    border-radius: 0;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
}

.advs-box-top-icon-img.boxed .advs-box-content, .advs-box-top-icon-img.boxed-inverse .advs-box-content {
    padding: 30px;
}

.section-bg-color .advs-box.boxed, .section-bg-color .advs-box.boxed-inverse, .section-bg-color .adv-img-down-text.boxed-inverse, .section-bg-color .niche-box-testimonails-cloud p {
    box-shadow: 0 2px 1px rgba(0, 0, 0, 0.05);
    border: 0 solid #eee;
}

.adv-img-full-content h2 {
    line-height: 19px;
}

.advs-box {
    overflow: hidden;
}

    .advs-box .btn-text {
        border: none;
        font-weight: 400;
        position: relative;
    }

        .advs-box .btn-text:after {
            margin-left: 7px;
            top: 9px;
            right: -13px;
        }

.advs-box-top-icon-img .img-box {
    margin: 1px;
}

.img-box.adv-img-half-content .caption, .img-box.adv-img-side-content .caption {
    padding: 20px 20px;
}

.adv-img-side-content .btn, .adv-img-side-content .btn-text {
    margin-top: 10px;
}

.adv-img h2, .adv-circle h2, .caption-bottom h2 {
    font-weight: 500;
}

div.adv-img p {
    font-weight: 300;
    margin-top: 5px;
}

.niche-box-post .text-m {
    font-size: 23px !important;
    line-height: 30px;
}

.niche-box-post h2 {
    font-weight: 400;
    margin-top: 5px;
    margin-bottom: 15px;
}

.advs-box h2 a {
    color: #4C4C4C;
    font-weight: 400;
}

.niche-box-post .block-infos {
    width: 250px;
    text-align: left;
    margin-left: 25px;
}

    .niche-box-post .block-infos .block-data {
        display: block;
        float: left;
        height: 30px;
        border: none;
    }

.block-infos .block-comment {
    display: none;
}

.niche-box-post .block-infos p.bd-day {
    display: inline-block;
    padding: 5px 0px 5px 10px;
    font-size: 13px;
    font-weight: 500;
    color: #fff;
}

.niche-box-post .block-infos .bd-month {
    display: inline-block;
    font-size: 13px;
    font-weight: 500;
    padding-right: 9px;
    color: #fff;
}

.niche-box-post .img-box {
    margin: 0;
}

.advs-box-top-icon-img.niche-box-post {
    border-top: 2px solid #7a7a7a;
}

.niche-box-post .tag-row {
    margin-bottom: 15px;
}

.niche-box-blog p.excerpt {
    font-size: 14px;
}

.niche-box-blog .block-infos {
    position: relative;
    padding-right: 0;
    text-align: left;
    width: 75px;
}

    .niche-box-blog .block-infos:after {
        content: "";
        position: absolute;
        width: 1px;
        border-right: 1px solid #d0d0d0;
        height: 100%;
        top: 0;
        right: 22px;
    }

.niche-box-blog .block-data {
    border: none;
}

.niche-box-blog .bd-day {
    font-weight: 400;
}

.niche-box-blog .bd-month {
    font-weight: 400;
    font-size: 11px;
}

.niche-box-blog a.btn, .niche-box-blog a.btn-text {
    margin-top: 0;
}

.extra-content {
    font-weight: 500;
    font-size: 13px;
    text-transform: uppercase;
    background: none;
    border-left: none;
    color: #585858;
    border-top: 1px solid #7a7a7a;
    padding-left: 0;
    padding-right: 0;
}

.adv-img-down-text h2 a {
    font-weight: 400;
    padding-bottom: 5px;
    padding-top: 5px;
    font-size: 17px;
}

.adv-img-down-text .caption-bottom p {
    margin-top: 0;
}

.adv-img-down-text.boxed-inverse .caption-bottom {
    border: 1px solid #e4e4e4;
    border-top: none;
}

.section-bg-color .adv-img-down-text.boxed-inverse .caption-bottom {
    border: none;
}

.niche-box-testimonails-cloud p {
    border-radius: 0;
    text-align: left;
}

.niche-box-testimonails-cloud .name-box .subtitle {
    padding-top: 16px;
    font-weight: 400;
}

.adv-img-classic-box .caption {
    background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%,rgba(0, 0, 0, 0) 60%) !important;
    transform: translate3d(0,0,0);
}

.adv-img-classic-box > .img-box {
    background: #000;
}

.adv-img-classic-box:hover .img-box img {
    opacity: .5 !important;
}

.adv-img-classic-box .caption-inner h2 {
    margin-bottom: 0px;
    line-height: 20px;
}

.advs-box-top-icon {
    overflow: visible;
    position: relative;
}

    .advs-box-top-icon:not(.boxed) {
        padding-top: 27px !important;
    }

    .advs-box-top-icon.boxed-inverse, .advs-box-side-icon.boxed-inverse {
        background: none;
        border-style: solid !important;
        border-width: 1px;
        border-color: #dcdcdc;
    }

    .advs-box-top-icon:not(.boxed) .icon {
        box-shadow: none !important;
        font-size: 55px;
        height: 60px;
        width: 110px;
        padding: 0;
        margin: -70px 0 0 -56px;
        background: none;
    }

    .advs-box-top-icon.text-left .icon {
        text-align: left;
        left: 0;
        margin-left: 0;
    }

    .advs-box-top-icon.text-left.boxed .icon, .advs-box-top-icon.text-left.boxed-inverse .icon {
        left: 13px;
        text-align: center;
    }

    .advs-box-top-icon.boxed-inverse .icon {
        background: #fff;
    }

html body .advs-box-top-icon h3 {
    margin-top: 5px;
    font-weight: 400;
    font-size: 22px;
}

.list-items .list-item {
    border-bottom-style: solid;
}

    .list-items .list-item:first-child {
        padding-top: 0;
    }

    .list-items .list-item h3, ul.list-texts li b {
        font-weight: 500;
    }

    .list-items .list-item:hover {
        background: none;
    }

    .list-items .list-item span {
        font-size: 15px;
        font-weight: 400;
    }

    .list-items .list-item p {
        line-height: 19px;
        padding-top: 5px;
    }

.list-group-item.active, .list-group-item.active:hover, .list-group-item.active:focus {
    font-weight: 500;
    font-size: 15px;
}

ul li .fa-li.fa-square {
    font-size: 10px;
    margin-top: 3px;
    margin-left: -8px;
}

.icon-box-cell i.text-xl {
    width: 55px;
}

.white .icon-box:not(.icon-box-top-bottom) .icon-box-cell:first-child, div.white .countdown > div:after {
    border-right: 2px solid rgba(255, 255, 255, 0.31);
}

.icon-box:not(.icon-box-top-bottom) .icon-box-cell:first-child {
    padding-right: 15px;
    margin-right: 15px;
    border-right: 2px solid rgba(123, 123, 123, 0.25);
}

.icon-box.icon-box-right:not(.icon-box-top-bottom) .icon-box-cell:first-child {
    padding-right: 0;
    margin-right: 0;
    border-right: none;
}

.icon-box.icon-box-right:not(.icon-box-top-bottom) .icon-box-cell:last-child {
    padding-left: 15px;
    margin-left: 15px;
    border-left: 2px solid rgba(123, 123, 123, 0.25);
}

.icon-box.icon-box-top-bottom .icon-box-cell > i {
    margin: 0px 0 15px 0;
}

.icon-box-top-bottom .icon-box-cell label {
    margin-bottom: 5px;
}



.advs-box-multiple .circle > i {
    line-height: 45px;
    height: 45px;
    width: 45px;
}


.advs-box-multiple .advs-box-content {
    padding: 30px;
}

.advs-box-multiple.boxed-inverse .advs-box-content {
    border: 1px solid #dcdcdc;
    border-top: none;
}

.advs-box-multiple div.circle {
    border: none;
    border-radius: 3px;
    width: 70px;
    height: 70px;
    font-size: 24px;
    right: 20px;
    line-height: 28px;
    border: 1px solid #a2a2a2;
}

    .advs-box-multiple div.circle span {
        line-height: 16px;
        color: #717171;
        font-weight: 400;
    }

.section-bg-color .advs-box-multiple.boxed-inverse .advs-box-content {
    border: none;
}

.progress {
    overflow: visible;
    height: 3px;
    background-color: #e8e8e8;
}

.progress-bar {
    box-shadow: none !important;
    color: #30353b;
    height: 3px;
}

    .progress-bar > span {
        padding: 2px 0 2px 5px;
        width: 60px;
        transform: translateY(-31px);
        border-radius: 3px;
        display: block;
        white-space: nowrap;
        font-weight: 500;
        letter-spacing: 1px;
        float: right;
        font-size: 12px;
        background: #2d2d2d;
        color: #fff;
        text-align: center;
    }

.pricing-table {
    overflow: hidden;
}

    .pricing-table .pricing-price.list-group-item {
        font-weight: 500;
        font-size: 45px;
        padding-top: 45px;
    }

    .pricing-table .list-group-item:nth-child(even) {
        background-color: #fff;
    }

    .pricing-table .list-group-item {
        border-bottom: none;
        font-size: 13px;
    }

    .pricing-table h3 {
        font-weight: 400;
    }

    .pricing-table .btn {
        margin-top: 15px;
        padding: 10px 25px;
        margin-bottom: 40px;
    }

    .pricing-table .pricing-price span {
        font-size: 18px;
        display: inline-block;
        transform: translateY(-2px);
    }

.pricing-table-big, [class*="section-"] > div > .row:first-child > div > .pricing-table-big {
    margin: -15px 0 0 0;
}

.niche-box-team .content-box hr {
    display: none;
}

.niche-box-team .content-box h2 {
    margin-top: 15px;
    font-weight: 400;
}

.niche-box-team .content-box h4 {
    font-size: 13px;
}

.advs-box-side-icon .icon-box i {
    font-size: 35px;
    line-height: 35px;
    text-align: left;
    width: 65px;
    margin-left: 1px;
    height: 35px;
}

    .advs-box-side-icon .icon-box i.text-xl {
        margin-right: 20px;
        line-height: 45px;
    }

.advs-box-side-icon .icon-box {
    padding-right: 0;
    vertical-align: top;
}

    .advs-box-side-icon .icon-box + .caption-box {
        position: relative;
    }

        .advs-box-side-icon .icon-box + .caption-box:before {
            content: '';
            position: absolute;
            height: 100%;
            height: calc(100% - 4px);
            width: 1px;
            margin-left: -13px;
            margin-top: 2px;
            background: #d6d6d6;
        }

.advs-box-side h3 {
    font-size: 21px;
    margin-bottom: 15px;
}

.advs-box-side hr {
    display: none;
}

[class*="boxed-"].advs-box-side .col-md-4 {
    margin: -25px;
    padding-right: 40px;
}

[class*="boxed-"].advs-box-side .img-box {
}

.timeline > li > .timeline-panel {
    border: none;
    border-right: 1px solid #D2D2D2;
    background: none;
    padding: 0 20px 0 0;
}

.timeline > li.timeline-inverted > .timeline-panel {
    padding: 0 0 0 20px;
    border-right: none;
    border-left: 1px solid #D2D2D2;
}

.timeline:before {
    background: none;
}

.timeline > li > .timeline-badge {
    border-width: 2px;
    background: #fff;
}

.timeline > li {
    margin-bottom: 50px;
}

    .timeline > li:last-child {
        margin-bottom: 0;
    }

.niche-box-team:hover .img-box img {
    transform: translateY(25px) scale(1.2) !important;
}

.porfolio-bar a {
    font-size: 14px;
    font-weight: 500;
}

.counter-box-icon > div {
    text-align: left;
}

/*
-------------------------------------------------------------------
CONTAINERS
-------------------------------------------------------------------
*/
.nav-tabs > li > a, .nav-tabs > li.active > a, .nav-tabs > li.active:hover > a, .nav-tabs > li:hover > a {
    padding: 5px 0 30px 0;
    border: none !important;
    background: none;
    font-weight: 500;
    margin: 0;
}

.nav-tabs > li {
    margin-right: 30px;
}

.tab-box.inverse .panel {
    padding-top: 0;
    border-top: 0;
}

.inverse .nav-tabs > li > a, .inverse .nav-tabs > li:hover > a {
    padding: 30px 0 5px 0;
}

.inverse .nav:not(.ms-rounded) li > a:before {
    top: -1px;
    bottom: auto;
}

.nav-tabs > li > a i {
    margin: 0 10px 0 0;
}

.tab-box.inverse .nav-tabs li.active a {
    border-top: none;
}

.tab-box > .panel, .tab-box > .panel-box > .panel {
    border: none;
    padding: 25px 0;
}

.nav-pills > li a:before {
    display: none;
}

.tab-box.left .panel-box .panel, .tab-box.right .panel-box .panel {
    border: none;
    padding: 0 0 0 15px;
}

.left .nav-tabs > li > a, .right .nav-tabs > li > a {
    padding-top: 15px !important;
    padding-bottom: 15px !important;
}

.tab-box.right .panel-box .panel {
    padding: 0 15px 0 0;
}

.tab-box.right .nav-tabs > li > a {
    padding-left: 15px;
}

.flexslider .flex-direction-nav li a:before {
    margin-top: 3px;
}

.flexslider .flex-direction-nav li a.flex-prev:before {
    margin-left: -15px;
}

.maso-box.row, .grid-box.row {
    margin: -7.5px;
    width: calc(100% + 15px);
}

.maso-box > .maso-item, .grid-box > .grid-item {
    padding: 7.5px;
}

.maso-30 .maso-box > .maso-item, .grid-30 .grid-box > .grid-item {
    padding: 15px;
}

.maso-30 .maso-box.row, .grid-30 .grid-box.row {
    margin: -15px;
    width: calc(100% + 30px);
}

.flex-control-paging li a, .header-slider .flex-control-paging li a {
    background: none;
    border-style: solid;
    border-width: 1px;
    border-color: rgba(93, 93, 93, 0.5);
}

    .flex-control-paging li a.flex-active, .header-slider .flex-control-paging li a.flex-active {
        background: #949494;
        border-color: #949494;
    }

.box-transparent .overlaybox-inner {
    box-shadow: none;
    padding: 0 5px;
}

.box-steps .step-number {
    opacity: 1;
}

.box-steps .step-item:before {
    content: '';
    position: absolute;
    width: 1px;
    right: 29px;
    top: 50%;
    margin-top: -38px;
    height: 70px;
    background: rgba(113, 113, 113, 0.5);
}

.box-steps .step-item:after {
    opacity: 1;
    width: 18px;
    height: 18px;
    top: 50%;
    margin-right: 15px;
    background: #fff;
    border-top-width: 1px;
    border-right-width: 1px;
}

.box-steps .step-item:last-child:before {
    display: none;
}

.section-bg-color .box-steps .step-item:after {
    background: #f7f7f7;
}

.mfp-arrow-right:before {
    margin: 24px 0 0 9px;
}

.fixed-area.active .nav.inner.ms-rounded li a {
    background: #fff;
    box-shadow: 0 3px 10px hsla(0, 0%, 0%, 0.22);
    transition: box-shadow .3s;
}

.pagination li a, .pagination li.active a {
    font-weight: 400;
    background: none;
}

.pagination li:not(.active) a {
    border: none !important;
    background: none;
}

.pagination-sm > li > a {
    font-size: 13px;
}

.maso-list .list-nav, .grid-list .list-nav {
    margin-top: 35px;
}

.album-box .caption h2 {
    font-size: 17px;
}

/*
-------------------------------------------------------------------
RESPONSIVE
-------------------------------------------------------------------
*/
.navbar-toggle > i {
    margin-top: 13px;
}

@media (max-width:992px) {
    header .nav li > .mega-menu, .search-box, .flexslider.nav-top-right {
        margin: 0 !important;
    }

    header .navbar-main .col + .col ul, header .navbar-main .dropdown a + ul, .nav-tabs > li:first-child > a, .box-steps .step-item:first-child {
        padding-top: 0 !important;
    }

    .box-steps .step-item:last-child {
        padding-bottom: 0 !important;
    }

    .nav-tabs > li {
        margin-right: 0;
    }

    .title-base.text-left, .vertical-row > div, .row.vertical-row > div, .advs-box-side-icon .icon-box, .advs-box-side-icon .caption-box, .advs-box-side, .advs-box-side-icon p, .advs-box.advs-box-side p,
    .section .background-page, .section .content, .section .container {
        text-align: left !important;
    }

    .navbar-nav > li > a {
        padding-top: 10px;
        padding-bottom: 10px;
    }

    header .navbar-main ul {
        padding: 10px 0 0 0 !important;
    }

    .mega-menu .nav-tabs > li > a {
        padding-left: 15px !important;
    }

    .text-m-xs {
        font-size: 25px !important;
        line-height: 35px;
    }

    .text-m-sm {
        font-size: 30px !important;
        line-height: 35px;
    }

    .grid-table td {
        padding: 15px !important;
    }

    .grid-table {
        margin: -15px;
        width: calc(100% + 30px);
    }

    .nav.maso-filters a {
        padding-top: 0;
        margin-bottom: 10px;
    }

    .navbar-inner .navbar-toggle {
        border: 1px solid #e0e0e0;
    }

    .overlaybox-side .overlaybox-inner {
        padding: 30px;
    }

    .adv-img h2, .adv-circle h2, .caption-bottom h2 {
        line-height: 25px;
    }

    h2, .h2 {
        font-size: 20px;
        line-height: 30px;
    }

    h3 {
        line-height: 27px;
    }

    .nav-tabs > li {
        border: none;
    }

        .nav-tabs > li > a, .nav-tabs > li.active > a, .nav-tabs > li.active:hover > a, .nav-tabs > li:hover > a {
            padding: 15px 0 15px 0;
        }

    a.img-bubble {
        padding-bottom: 140px;
        margin-bottom: -140px !important;
    }

    .box-steps .step-item:before, .section-bg-color .box-steps .step-item:after {
        display: none;
    }

    .box-steps .step-item {
        padding: 15px 50px;
    }

    .flexslider.nav-right .flex-control-nav {
        bottom: -14px;
    }

    [class*=header-] .title-base h1, [class*=header-] .title-icon h2, [class*=header-] .title-icon h1, [class*=header-] .title-base.title-small h2 {
        font-size: 30px;
        line-height: 35px;
    }

    [class*=header-] .title-base p, [class*=header-] div.title-icon p {
        margin-top: 40px;
    }

    .header-title, .header-video, .header-animation, .header-slider {
        height: 205px !important;
    }

    .header-base {
        padding-bottom: 20px;
    }

    footer .container {
        padding: 80px 0;
    }

    .timeline > li > .timeline-label {
        position: absolute;
        left: auto;
        right: 0;
        max-width: 65px;
        margin: 0;
    }

    .timeline > li.timeline-inverted > .timeline-label {
        left: 0;
        right: auto;
        text-align: right;
    }

    .timeline > li > .timeline-badge {
        display: none;
    }

    .timeline > li > .timeline-label p {
        font-size: 12px;
        white-space: normal;
    }

    .timeline > li > .timeline-label h4 {
        font-size: 16px;
    }

    header .dropdown-submenu a + .dropdown-menu a {
        padding-left: 20px;
    }

    .comment-list img {
        position: absolute;
        margin-top: 10px;
    }

    .comment-list .col-md-10 {
        padding-left: 60px;
    }

    .img-box.adv-img-side-content .caption {
        min-height: 180px;
    }

    .header-base .breadcrumb, .header-bootstrap .breadcrumb {
        text-align: right;
    }

    .advs-box-side-icon .icon-box, .advs-box-side-icon .caption-box {
        display: table-cell;
    }

    .pricing-table-big {
        margin: 0 0 20px 0 !important;
    }
}

@media (max-width: 767px) {
    .pagination-lg > li > a span {
        font-size: 15px;
    }

    .pagination-lg > li > a, .pagination-lg > li > span {
        padding: 8px 10px;
        font-size: 15px;
    }

    .header-base .breadcrumb, .header-bootstrap .breadcrumb {
        text-align: left;
    }
}

/* ===== SiteForge: спан живой цены не должен ловить чужие стили =====
   Боевая сборка запекает значение как <span data-sf-td="…">2 950</span> (SEO-фолбэк
   плюс якорь для sf-td.php). Но вёрстка карточек сплошь и рядом уже занимает тег span
   под ДРУГОЙ смысл — в тарифах диадока это `.pc-price span { color:#7a8699;
   font-size:13px }` для подписи «за документ». Наш спан оказывается внутри <b> и
   ловит это правило: прямое правило на элементе бьёт наследование от родителя, и
   цена рисуется мелкой серой, а знак ₽ (он вне спана) остаётся крупным — вид, ради
   которого вёрстку никто не писал. Поэтому спан цены объявляем прозрачным для стилей:
   он обязан выглядеть ровно как текст на его месте до запекания. !important — потому
   что <style> партиала едет в body и при равной специфичности выигрывает у скина.
   Ничего специфичного для сервиса тут нет: правило адресует наш собственный атрибут. */
span[data-sf-td] { font: inherit !important; color: inherit !important;
                   letter-spacing: inherit !important; }

/* ===== SiteForge: заглушка click-слота b24 — спрятать, когда виджет дорисовал кнопку =====
   Ленивая загрузка (см. substitute_form_slots) оставляет на месте click-встройки
   обычную кнопку сайта: до первого движения мыши кнопки b24 не существует вовсе, и
   посетитель, который сразу тянется к «Оставить заявку», ткнул бы в пустоту. Когда
   виджет отрисовался, активатор ставит заглушке атрибут hidden — но одного его мало:
   `[hidden] { display: none }` живёт в СТИЛЯХ БРАУЗЕРА, а `.btn { display: inline-block }`
   шаблона — авторское правило и побеждает его при любом порядке. Отсюда явный сброс.
   Плейсхолдер inline-слота (.sf-b24-ph) высоты по умолчанию не имеет — резерв, если
   он понадобится, приезжает инлайновым min-height из настройки form.lazy_reserve_px. */
[data-sf-b24-fb][hidden] { display: none !important; }

/* ===== SiteForge: единый ритм секций + фикс наезда иконок (авто, на всех сервисах) =====
   Корень наездов: карточка .advs-box-top-icon имеет margin-top:45 + height:100% и потому
   СВИСАЕТ вниз из своей колонки на 45px — свес лезет в ряд сверху (иконка нижнего ряда
   закрывает бордер верхнего) и съедает нижний серый padding. Убираем свес, ужав высоту
   карточки на те же 45px. Тогда зазор между рядами = hr.space(20) + место под иконку(45)
   = 65px, ровно равный серому padding секции сверху/снизу. Иконку не двигаем. */
.container.content { padding-top: 52px !important; padding-bottom: 52px !important; }
.container.content > *:first-child { margin-top: 0 !important; }
.container.content > *:last-child { margin-bottom: 0 !important; }
.container.content > hr.space:first-child,
.container.content > hr.space:last-child { display: none !important; }
.proporzional-row > div > .advs-box-top-icon { height: calc(100% - 45px) !important; }
/* Сжимаем ряды к минимуму: место под иконку (45px) + ~7px клиренса = ~52px. Отрицательный
   margin гасит вклад hr.space между рядами (и после h2), серый padding секции = тем же 52px.
   Ниже нельзя: 45px забирает иконка. Столбцы (гаттер 30px) и сами иконки не трогаем.
   clear: both обязателен: после короткого hr.space.xs (10px) отрицательный margin заводит
   ряд на 3px в предыдущую строку, а там float-колонка заголовка (.row > .col-md-9 > h3).
   Флекс-контейнер это BFC — рядом с флоатом он не перекрывает его, а УЖИМАЕТСЯ в остаток
   справа (roaming.html логистики: ряд 278px у правого края, карточки по 92px). Клиренс
   ставит ряд ровно под флоат; там, где флоата нет, margin работает как прежде. */
.container.content .proporzional-row { margin-top: -13px !important; clear: both; }

/* ===== SiteForge: стрелка FAQ — по факту открытости, а не по классу =====
   В режиме data-type="visible" (открытые вопросы друг друга не закрывают) шаблонный
   скрипт всё равно снимает .active со ВСЕХ ссылок и вешает его только на последнюю
   кликнутую. А стрелку разворачивает вниз именно `a.active:before` (skin.css:879),
   поэтому раньше открытые блоки оставались со стрелкой «закрыто» — текст виден,
   а индикатор врёт. Спрашиваем не класс, а состояние панели: открытую скрипт держит
   на инлайновом display:block (закрывая, он его снимает вместе с height). Пробелы
   после двоеточия jQuery ставит, но полагаться на это одно нельзя — ловим оба вида.
   Специфичность (0,4,1) против (0,3,1) у шаблонного правила, плюс наш блок идёт
   последним в файле. Префиксы — как в шаблоне: он задаёт -webkit-/-ms-, и в старом
   WebKit неперекрытый -webkit-transform: rotate(45deg) вернул бы стрелку обратно. */
.accordion-list .list-group-item:has(> .panel[style*="display: block"]) > a:before,
.accordion-list .list-group-item:has(> .panel[style*="display:block"]) > a:before {
    -webkit-transform: rotate(135deg);
    -ms-transform: rotate(135deg);
    transform: rotate(135deg);
}

/* ===== SiteForge: карточка-ссылка должна быть блоком (рамка «разъезжается») =====
   Карточку мы сплошь и рядом делаем ССЫЛКОЙ целиком: <a class="advs-box
   advs-box-top-icon boxed-inverse"> — так кликабелен весь бокс, а не только заголовок.
   Но display у .advs-box шаблон НЕ задаёт: единственное место, где эти карточки
   становятся блоками, — правило `.proporzional-row > div > .advs-box { height: 100%;
   display: block }` (style.css). Стоит той же карточке оказаться в обычном ряду
   (`col-md-8 col-center`, блок «Нужна помощь с переходом на ЭПД?» и подобные), и <a>
   остаётся ИНЛАЙНОВЫМ. Рамка .advs-box-top-icon.boxed-inverse тогда рисуется не вокруг
   бокса, а вокруг строчных фрагментов: обрывки линий уезжают влево от текста, padding
   по вертикали не работает, а иконка с отрицательным margin висит сама по себе. Со
   стороны это читается как «блок сломался» — и ровно так его и описал оператор.
   Лечим в слое, а не правкой страниц: приём (карточка = ссылка) штатный, повторяется
   на каждом сервисе и в каждой новой странице. На сегодня под это попадают 7 карточек
   на 4 страницах двух сервисов; ни одна из них НЕ в .proporzional-row, то есть правило
   ничего не отбирает у уже работающих боксов — там display: block и так стоит.
   .advs-box-side-icon исключён намеренно: ему шаблон задаёт display: table (иконка и
   текст — ячейки), и блок сломал бы эту раскладку. Специфичность (0,1,1) против (0,1,0)
   у шаблонных правил бокса, плюс наш блок идёт последним в skin.css. */
a.advs-box:not(.advs-box-side-icon) { display: block; }

/* ===== SiteForge: бокс-колонка на телефоне — во всю ширину (баг каскада шаблона) =====
   У шаблона два правила ширины для боксовых колонок, и на телефоне активны ОБА:
     @media (max-width:992px)  .col-md-6.boxed-inverse:not([class*="col-sm-"])
                               { width: calc(50% - 30px) !important }   -> (0,3,0)
     @media (max-width:767px)  [class*="col-md-"].boxed-inverse
                               { width: calc(100% - 30px) !important }  -> (0,2,0)
   Медиа-запрос на специфичность не влияет, поэтому «планшетное» правило побеждает
   «телефонное», и бокс остаётся в половину ширины экрана. Соседняя колонка без
   .boxed-inverse при этом честно разворачивается на 100% (её ширину чинит правило
   для .col-md-*), отчего и получается перекос: заголовок во всю ширину, бокс — узкой
   лентой слева. На диадоке под это попадают 196 колонок на 90 страницах: 90 блоков
   заявки (`col-md-6 boxed-inverse shadow-2`) и 105 контентных боксов (`shadow-1`).
   Виднее всего на блоке заявки: b24-форма ужимается вместе с колонкой, подписи полей
   обрезаются, а текст согласия рассыпается по одной букве в строку — но контент тут
   ни при чём, так же сжимается любой бокс.
   Лечим на отдаче, а не правкой 387 страниц: правило обязано действовать и в превью,
   и в бою, и достаться каждой будущей странице. Селектор повторяет форму шаблонного
   (класс + атрибут + :not(атрибут) = те же (0,3,0)), а наш блок идёт последним в
   skin.css, который сам подключается последним, — при равной специфичности выигрывает
   порядок. Через [class*="col-md-"] вместо .col-md-6: у шаблона такие же :not-правила
   есть и для col-md-4 (33%), и следующая вёрстка может принести col-md-3.
   Ширина — calc(100% - 30px), как задумано самим шаблоном: боксовой колонке он на
   ≤992px ставит margin: 5px 15px, и вместе с полями это ровно 100%. */
@media (max-width: 767px) {
    [class*="col-md-"].boxed-inverse:not([class*="col-sm-"]),
    [class*="col-md-"].boxed:not([class*="col-sm-"]) {
        width: calc(100% - 30px) !important;
    }
}

/* ===== SiteForge: на телефоне колонка сетки не держит десктопную долю ряда =====
   Ряд карточек (.proporzional-row) — флекс, и одинокая карточка в последнем неполном
   ряду растянулась бы на всю ширину экрана рядом с тройками сверху. Лечит это модель
   при генерации, прибивая колонке инлайновую долю: style="flex: 0 0 33.3333%;
   max-width: 33.3333%". На десктопе так и надо. Но на телефоне ряд уже блочный
   (шаблон гасит .proporzional-row в display:block до 992px), flex не работает вовсе,
   а max-width продолжает держать карточку в трети экрана — последний элемент раздела
   выглядит сжатым в ленту, пока соседи сверху идут во всю ширину.
   Инлайн бьётся только `!important`, поэтому правило здесь, а не в разметке: страниц
   с такой долей сейчас три (roaming, fields, roaming/working-with), но приём штатный —
   он повторится на каждом разделе, где карточек не кратно трём, и чинить их поштучно
   значит ловить это снова после каждой перегенерации.
   Область — только колонки сетки с ИНЛАЙНОВЫМ ограничением ширины: свою верстку без
   инлайна правило не трогает, а десктоп не задет вовсе (медиа-запрос телефонный). */
@media (max-width: 767px) {
    .container.content .row > [class*="col-md-"][style*="max-width"] {
        flex: 1 1 auto !important;
        max-width: 100% !important;
    }
}

/* ===== SiteForge: кнопка «Наверх» не нужна на телефоне =====
   Шаблон держит `.scroll-top-mobile` (fixed 50×50 в правом нижнем углу) скрытой и
   показывает её скриптом по скроллу — но в мобильном медиа-блоке (`max-width: 992px`)
   сам же прибивает ей `visibility: visible`, то есть на телефоне она висит поверх
   контента ВСЕГДА, с первого экрана. Рядом в том же углу — кнопка чата Bitrix24, и
   вдвоём они занимают заметную часть узкого экрана, перекрывая текст и кнопки.
   Пользы от неё на телефоне нет: свайп до верха там штатный жест. На десктопе правило
   ничего не меняет, потому что кнопки там нет и не было: скрипт шаблона по прокрутке
   доводит ей `opacity` до 1, но класс `.show` (единственное, что снимает `visibility:
   hidden`) не вешает — замер на 1440px после прокрутки 2500px: opacity 1, visibility
   hidden. Кнопка у Schiocco фактически только мобильная, отсюда и её класс.
   `display: none`, а не `visibility`: скрытый через visibility элемент продолжает
   занимать свой угол и ловить тапы. `!important` — шаблонное правило видимости
   живёт в медиа-блоке и скрипт дополняет его инлайновыми стилями. */
@media (max-width: 992px) {
    i.scroll-top, .scroll-top-mobile { display: none !important; }
}

/* ===== SiteForge: планшет — шапка в одну строку, а не в две =====
   С 993px шаблон показывает полное горизонтальное меню, но bootstrap-контейнер до 1199px
   шириной 970px — а логотип (132) + меню из пяти пунктов (586) + телефон с кнопкой (320)
   требуют 1038. Правый блок — float, поэтому лишнее он не ужимает, а роняет на вторую
   строку: шапка становится 120px вместо 60, `fixed-top` наезжает на крошки и первый экран
   (замер 993–1199: перенос на всех ширинах диапазона, с 1200 контейнер 1170 и всё встаёт
   в строку). Отсюда «на планшете всё съезжает».
   Место экономим там, где его больше всего: у пунктов меню шаблонный горизонтальный
   padding 25px, то есть 250px из 586 — это воздух, а не текст. 12px возвращают в строку
   130px, чего хватает с запасом (замер после правки — ниже в CLAUDE.md). Шрифт и телефон
   не ужимаем: читаемость дороже, а нужды нет.
   Диапазон закрыт с обеих сторон: ≤992 работает бургер (там своя раскладка), с 1200
   контейнер шире и вид не меняется вовсе. Если у сервиса пунктов больше и строка снова
   не сходится — вешай на наименее важный пункт класс `nav-optional` (правило ниже):
   на планшете он скрывается, на десктопе и в мобильном меню остаётся. */
@media (min-width: 993px) and (max-width: 1199px) {
    header ul.navbar-nav > li > a { padding-left: 12px; padding-right: 12px; }
    header ul.navbar-nav > li.nav-optional { display: none; }
}

/* ===== SiteForge: заголовок FAQ не «дёргается» при открытии =====
   У шаблона font-weight задан только открытому вопросу (.list-group-item > a.active —
   500), закрытый наследует 400: клик по вопросу заметно утолщает строку и сдвигает
   соседние. Лечится равным весом у обоих состояний.
   Правило жило в <style> КАЖДОЙ страницы (промпт разрешал «точечное scoped-исключение»,
   и модель послушно копировала его из каркаса главной) — 88 копий одного и того же на
   диадоке, и столько же на следующем сервисе. Баг общий для шаблона, страница тут ни при
   чём, поэтому место правила — универсальный слой. Дубли в уже собранных страницах
   безвредны (то же значение) и вычистятся сами при перегенерации. */
.accordion-list .list-group-item > a,
.accordion-list .list-group-item > a.active { font-weight: 500; }

/* ===== SiteForge: шапка — логотип, телефон и кнопка меню по одной оси =====
   Раскладка «партнёрской» шапки (лого-бейдж слева, телефон + CTA справа, бургер на
   телефоне) жила в <style> партиала sites/diadoc/_header.html, то есть на СЛЕДУЮЩЕМ
   сервисе её пришлось бы вводить заново — партиал у каждого сервиса свой. Разметка при
   этом общая: у Schiocco во всех демо-страницах и в обоих семействах шапка одна и та же
   (.navbar-header = кнопка + .navbar-brand; .navbar-right — именно <div>, списком меню
   он не бывает — проверено по templates/, 272 вхождения), поэтому место правила —
   универсальный слой, а не файл сервиса.
   Что чинится:
   - логотип: шаблонная шапка кладёт <img> по базовой линии текста, из-за чего бейдж
     висит выше середины; inline-flex + align-items:center центрируют его при любой
     высоте картинки, max-height держит бейдж в пределах 60px-шапки;
   - телефон и кнопка: у шаблона это float-элементы БЕЗ горизонтальных полей — во флекс-
     строке они встают вплотную (замер: 0px на всех ширинах), кнопка выглядит наехавшей
     на номер; отсюда gap. Шаблонный margin-top:12px у .circle-button ломает flex-
     центрирование — снимаем;
   - в раскрытом мобильном меню места меньше, чем в шапке: разрешаем перенос, иначе на
     320px номер с nowrap и кнопка снова сходятся впритык.
   Сервис-специфичного тут нет: цвет и гарнитура телефона наследуются от страницы,
   размеры — от шаблонной шапки. Свой логотип другой высоты — правится в партиале
   сервиса, он идёт в body и перебивает этот слой. */
.navbar-brand { display: inline-flex; align-items: center;
                height: var(--sf-header-height, 60px); padding: 6px 15px; }
.navbar-brand img { max-height: 40px; width: auto; }
header .navbar-right { display: flex; align-items: center;
                       height: var(--sf-header-height, 60px); gap: 12px; }
header .navbar-right > * { float: none; }
header .navbar-right .circle-button { margin-top: 0; }
/* Кнопка шапки = ГЕОМЕТРИЯ кнопки Bitrix24 (14px, line-height 20, padding 5px 15px →
   133×32 у текста «Подключить →»). Кнопка в шапке — заглушка ленивого click-слота: до
   первого движения мыши виджета нет, и посетитель видит её. Пока она жила на общем
   кегле шапки (15px, padding 6/20) — 150×36.5 против 133×32 у виджета, — правый блок
   был 373px вместо 356, и на ВСЕХ ширинах 993–1199 шапка стояла в две строки (120px,
   fixed-top поверх первого экрана) ровно до первого взаимодействия; замер с
   `?sf-eager=1` этого не показывает, заглушка там уже скрыта (найдено 2026-08-21 на
   живом сайте). Равняем заглушку под виджет, а не виджет под заглушку: бюджет ширины
   шапки от этого только растёт. Равный padding даёт чётную высоту и целые координаты
   (при 6/5px центр попадал на половину пикселя и края размывались по-разному).
   Специфичность (0,3,1) — выше `header .btn.btn-sm` из блока кеглей (0,2,1). */
header .navbar-right .btn, header .navbar-right .btn.btn-sm {
    font-size: 14px; line-height: 20px; padding: 5px 15px;
}
.header-phone { font-size: 18px; font-weight: 500; white-space: nowrap; color: #1a1a1a; }
.header-phone:hover, .header-phone:focus { text-decoration: none; opacity: .8; }
@media (max-width: 767px) {
    header .navbar-right { height: auto; flex-wrap: wrap; row-gap: 10px; }
}

/* ===== SiteForge: кнопка меню на телефоне — по вертикальному центру шапки =====
   Bootstrap держит .navbar-toggle флоатом с ФИКСИРОВАННЫМИ margin-top:8px/bottom:8px
   (skin.css правит нижний на 1px): кнопка отсчитывается от верхней кромки шапки и о её
   высоте не знает ничего. Высоту же задаёт логотип — у нас 60px, и замер на 390px даёт
   логотип по центру (cy=30) против кнопки на cy=23. Семь пикселей вверх рядом с крупным
   бейджем видно глазом, и это первое, что видно на телефоне вообще.
   Поправку нельзя посчитать в пикселях: высота шапки зависит от логотипа сервиса, а его
   меняет каждый новый сервис. Поэтому раскладываем сам .navbar-header флексом — кнопка
   встаёт по центру при любой высоте, без единого числа в правиле. В разметке шаблона
   кнопка идёт ПЕРЕД логотипом (она флоатилась вправо), поэтому порядок задаём явно:
   без order флекс поставил бы её слева от лого, а margin-left:auto заменяет float:right.
   Собственные вертикальные margin кнопки снимаем — при центрировании они снова тянут её
   вверх. Clearfix-псевдоэлементы .navbar-header становятся флекс-элементами нулевой
   ширины и на раскладку не влияют (замер: логотип и кнопка на своих местах).
   Только ≤992px: выше кнопка display:none, десктопную шапку правило не трогает. */
@media (max-width: 992px) {
    .navbar-header { display: flex; align-items: center; }
    .navbar-header > .navbar-brand { order: 0; }
    /* Кнопка-CTA в мобильной шапке — между логотипом и бургером [решение оператора:
       «чтобы не нужно было открывать меню, чтобы увидеть кнопку»]. Свёрнутое меню это
       `.navbar-collapse` с `display: none`, а потомка скрытого родителя не показывает
       НИЧЕГО — ни `display`, ни `visibility`, ни позиционирование; значит кнопка в
       мобильной шапке может быть только вторым экземпляром в разметке (`.nav-cta-mobile`
       в `.navbar-header`), а тот, что в правом блоке (`.nav-cta-desktop`), на этих
       ширинах прячется — иначе в раскрытом меню кнопка была бы дважды.
       Обе — обёртки ВОКРУГ маркеров SF-FORM, а не сами кнопки: маркеры заменяются на
       сниппет b24 целиком, класс на кнопке сборку бы не пережил, и прятать на десктопе
       надо в том числе то, что дорисует виджет.
       Логотипу здесь `margin-right: auto` вместо прежнего `margin-left: auto` у бургера:
       так вправо уезжает вся группа «кнопка + бургер», и правило не зависит от того,
       есть у сервиса CTA или нет. Clearfix-псевдоэлементы `.navbar-header` гасим — без
       этого `gap` добавил бы отступы вокруг двух пустышек нулевой ширины. */
    .navbar-header::before, .navbar-header::after { display: none; }
    .navbar-header { gap: 12px; }
    .navbar-header > .navbar-brand { margin-right: auto; }
    .navbar-header > .nav-cta-mobile { order: 1; display: inline-flex; align-items: center; min-width: 0; }
    /* Тап-таргет: у `.btn-sm` шаблона высота 31px — на десктопе это кнопка под курсор,
       на телефоне мало (Apple и Google просят от 44px, b24 своей click-кнопке даёт 39).
       Высоту задаём явно, а не паддингами: вертикальные отступы у кнопки шаблона свои
       на каждой ширине (замер: те же 10px давали то 39, то 52px). `nowrap` — надпись
       кнопки не переносим, в шапке она обязана остаться в одну строку. */
    .navbar-header > .nav-cta-mobile > .btn {
        display: inline-flex;
        align-items: center;
        min-height: 40px;
        /* шаблонный `margin-top: 12px` у .circle-button (в правом блоке мы его тоже
           снимаем) — иначе обёртка выше кнопки на эти 12px и ритм шапки уезжает */
        margin: 0;
        /* кегль и боковые поля — как у кнопки b24, которая заменит заглушку (14px,
           15px по бокам): иначе при подмене кнопка «худеет» не только по высоте */
        font-size: 14px;
        line-height: 20px;
        padding: 0 15px;
        white-space: nowrap;
    }
    header .navbar-right > .nav-cta-desktop { display: none; }
    /* Сама кнопка — тоже флекс-контейнер: <i> внутри инлайновый, и его положение задаёт
       строчный бокс кнопки (baseline + унаследованная line-height), а не её середина, —
       после центрирования кнопки рисунок всё ещё стоял на 1px ниже (замер 390px: центр
       кнопки 30, центр полосок 31). У флекс-центрирования такой погрешности нет. */
    .navbar-header > .navbar-toggle {
        order: 2;
        /* правое поле — шаблонное (15px): без него кнопка липнет к краю экрана */
        margin: 0 15px 0 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}
/* Мобильный экземпляр CTA — только на мобильных ширинах: на десктопе кнопка стоит в
   правом блоке шапки рядом с телефоном, и второй такой же в `.navbar-header` оказался
   бы вплотную к логотипу. Правило вне медиа-запроса, чтобы дубль был скрыт по
   умолчанию — включает его ровно блок выше. */
.nav-cta-mobile { display: none; }

/* ===== SiteForge: кнопка меню — ровно три полоски, без иконочного шрифта =====
   В шапке стоит <i class="fa fa-bars">, но FontAwesome на сайте нет вообще: шаблон
   тянет Iconsmind (scripts/iconsmind/line-icons.min.css, подключается скриптом), а он
   переопределяет .fa на свой шрифт icomoon. Класс fa-bars там указывает на ДРУГОЙ
   глиф — «меню» из пяти штрихов разной длины. Отсюда и «было три полоски, стало пять»:
   привычные три — это глиф FontAwesome, которого тут никогда не было.
   Рисуем полоски сами: глиф глушим (font-size:0 + пустой content), а три черты даёт
   сам <i> и его два псевдоэлемента. Никакой зависимости от иконочного шрифта не
   остаётся — не догрузился, подменили набор, сменили шаблон: полосок по-прежнему три.
   Цвет — currentColor, то есть ровно тот акцент, которым шаблон красит <i> (skin.css
   красит все <i> акцентом), поэтому вид кнопки не меняется, меняется только рисунок.
   Специфичность (0,2,1) против (0,1,1) у правила иконочного шрифта — content наш. */
.navbar-toggle > i.fa-bars {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    width: 24px;
    height: 2px;
    margin: 10px 0;
    background: currentColor;
    font-size: 0;
    line-height: 0;
}
.navbar-toggle > i.fa-bars::before,
.navbar-toggle > i.fa-bars::after {
    content: "";
    position: absolute;
    left: 0;
    width: 24px;
    height: 2px;
    background: currentColor;
}
.navbar-toggle > i.fa-bars::before { top: -7px; }
.navbar-toggle > i.fa-bars::after { top: 7px; }

/* ===== SiteForge: зазор в группе кнопок — на САМИХ кнопках, а не на контейнере =====
   У кнопок шаблона margin: 0, стоят они подряд инлайновыми ссылками, и держит их только
   пробел между тегами: 4px на десктопе (читается как слипшиеся), а на телефоне, где
   группа переносится, между рядами РОВНО 0px — две кнопки выглядят одним блоком.

   ПОЧЕМУ ПРАВИЛО ПЕРЕЕХАЛО НА КНОПКИ (2026-09-05). Раньше зазор давали два правила,
   которые флексили КОНТЕЙНЕР группы: `.container.content [class*="col-"]:has(…)` на
   телефоне и `.container.content div:has(…)` безусловно. Оба требуют, чтобы контейнер
   был ПОТОМКОМ `.container.content`, — а самая частая форма ровно обратная: кнопки
   лежат прямыми детьми самого `.container.content` (hero почти каждой страницы). Тогда
   не матчится ничего: замер до правки — 21 пара у логистики и 72 у диадока с зазором
   0px при переносе и 4px в строке, при этом пары внутри `.col-*` честно получали свои
   10/14px. Отсюда «на диадоке починили, а на логистике опять слиплись»: чинилась не
   проблема, а одна из её форм.
   Сам `.container.content` флексить нельзя — в нём лежат h1, <p>, .row, <hr>, <img>,
   и флекс развалил бы всю секцию. Поэтому зазор задают САМИ кнопки: правило не знает
   и не спрашивает, во что группа обёрнута, и потому не может промахнуться мимо
   очередной новой формы разметки. Это и есть смысл замены — форм у контейнера много,
   кнопка одна.

   Тонкости, каждая из замера, и каждая — отдельные грабли:
   - отступы СИММЕТРИЧНЫЕ (5px слева и справа у обеих кнопок пары), а не 10px у
     второй. Односторонний margin даёт 14px в строке так же, но при переносе делает
     нижнюю строку на 10px шире: `text-align: center` центрирует её ВМЕСТЕ с отступом,
     и кнопки в столбике стоят со сдвигом 5px друг относительно друга (замер: центр
     группы уезжал с 0 на 5px на всех телефонных ширинах). 5+5 плюс пробел между
     инлайн-тегами = те же 14px, что давал flex-gap;
   - вертикальный отступ БЕЗУСЛОВНЫЙ, а не только на телефоне. Перенос случается не
     только там: в узкой колонке группа рвётся и на 768…991 (замер: digest.html и
     главная диадока на 768 — два ряда кнопок вплотную, зазор 0). Ширину, на которой
     группа перенесётся, знать заранее нельзя — она зависит от длины надписей;
   - `vertical-align: top` обязателен. У `.btn` шаблона `vertical-align: middle`, то
     есть по строке выравнивается СЕРЕДИНА маргин-бокса, и разный нижний отступ у
     кнопок пары опускает одну из них на половину разницы. А отступы у них разными
     быть ОБЯЗАНЫ: у шаблона есть правило
     `[class*="section-"] > div > .row:last-child > div > :last-child { margin-bottom: 0 }`
     (специфичность (0,4,2), наша (0,2,1)), которое гасит хвостовой отступ у последнего
     элемента секции — то есть ровно у второй кнопки пары. Замер: 5px перекоса на
     digest.html и главной логистики при 767px. Ломать шаблонный сброс `!important`
     нельзя — он затем и стоит, чтобы секция не росла на хвостовой отступ; а с
     выравниванием по верху разница отступов на положение кнопок не влияет вовсе.
     Зазор при переносе от этого не страдает: его даёт НЕ последняя кнопка, а
     предыдущая, у которой сброс не срабатывает;
   - `:has(+ …)` нужен, чтобы отступы достались ведущей кнопке ПАРЫ, а не каждой
     кнопке в `main` (иначе +10px под каждой карточкой тарифа и в каждой форме).
     Браузер без `:has()` теряет отступы ведущей кнопки — деградация в прежний вид,
     не в кашу;
   - в селекторах есть `.b24-form-click-btn-wrapper`: развёрнутый click-слот рисует
     кнопку сам, и рядом с обычной `.btn` (actions.html) она тоже обязана иметь зазор.
     Прежний flex давал это побочно — тем, что флексил контейнер целиком.
   Область — `main`: в футере и в шапке раскладка своя, а карточки тарифов под правило
   не попадают сами — там кнопка в карточке одна, соседней нет. */
main .btn:has(+ .btn),
main .btn:has(+ .circle-button),
main .btn:has(+ .b24-form-click-btn-wrapper),
main .circle-button:has(+ .btn),
main .circle-button:has(+ .circle-button),
main .circle-button:has(+ .b24-form-click-btn-wrapper),
main .b24-form-click-btn-wrapper:has(+ .btn),
main .b24-form-click-btn-wrapper:has(+ .circle-button),
main .btn + .btn,
main .btn + .circle-button,
main .circle-button + .btn,
main .circle-button + .circle-button,
main .btn + .b24-form-click-btn-wrapper,
main .circle-button + .b24-form-click-btn-wrapper,
main .b24-form-click-btn-wrapper + .btn,
main .b24-form-click-btn-wrapper + .circle-button {
    margin-left: 5px;
    margin-right: 5px;
    margin-bottom: 10px;
    vertical-align: top;
}

/* ===== SiteForge: первый экран слева — кнопки от той же кромки, что и текст =====
   Симметричные поля 5px у кнопок пары (блок выше) рассчитаны на ЦЕНТРИРОВАННУЮ группу: там
   они уравновешивают друг друга. В группе, прижатой влево, левое поле ведущей кнопки
   превращается в отступ от кромки — кнопка стоит на 5px правее заголовка и лида. Это видно
   на первом экране, когда он прижат влево (решение оператора 2026-10-16 у
   kontur-n-logistika: «по всему сайту главный экран к левой стороне прижатым должен быть»).
   CSS не умеет спросить «группа выровнена влево?», поэтому правило сужено до формы,
   которая это гарантирует: первая секция <main>, контейнер БЕЗ text-center, колонка без
   col-center/text-center. Центрированный первый экран (диадок, мастер) под селектор не
   попадает — у него text-center на контейнере. */
main > [class*="section-"]:first-child > .container.content:not(.text-center) > .row
    > [class*="col-md-"]:not(.col-center):not(.text-center) > .btn:first-of-type,
main > [class*="section-"]:first-child > .container.content:not(.text-center) > .row
    > [class*="col-md-"]:not(.col-center):not(.text-center) > .circle-button:first-of-type {
    margin-left: 0;
}
/* ===== SiteForge: карточка-бокс — кнопка у нижнего края, а не «где кончился текст» =====
   Высоту карточек в ряду мы уже равняем (правило .advs-box-top-icon выше), но содержимое
   прижато к верху, поэтому кнопка садится сразу под текстом: у карточки с тремя строками
   она в 26px от низа, у соседних с двумя — в 50px (замер на actions.html, 1200px). Ряд
   читается как несобранный, хотя рамки идеально ровные. Лечим раскладкой: карточка —
   колоночный флекс, кнопка прижата `margin-top: auto`, минимальный зазор над ней даёт
   нижний margin абзаца. Тогда кнопки всех карточек ряда стоят на одной линии независимо
   от длины текста — а длина текста в карточках всегда будет разной.
   Тонкости, каждая обязательна:
   - у шаблона `.advs-box-top-icon p { margin: auto }`; в колоночном флексе `auto` по
     вертикали означает «съесть весь свободный зазор» — текст уплыл бы от заголовка к
     середине карточки. Оставляем только горизонтальное центрирование;
   - кнопка бывает ДВУХ видов: обычная `.btn` шаблона и обёртка виджета Bitrix24
     (слот SF-FORM развёрнут в скрипт, кнопку рисует он сам) — на actions.html в одном
     ряду и та и другая, поэтому в селекторах обе;
   - `align-self: center` — флекс-элемент по умолчанию растягивается на всю ширину, а
     кнопки тут «таблетки» по содержимому;
   - `:has(> …)` ограничивает правило карточками С кнопкой: в хабах разделов такой же
     карточкой-боксом сделана вся ссылка целиком, там ни кнопки, ни перестройки не надо.
   Иконка карточки лежит `position: absolute` (она «сидит» на верхней рамке), поэтому
   флекс её не двигает. */
.proporzional-row > div > .advs-box-top-icon:has(> .btn),
.proporzional-row > div > .advs-box-top-icon:has(> .b24-form-click-btn-wrapper) {
    display: flex;
    flex-direction: column;
}
.proporzional-row > div > .advs-box-top-icon:has(> .btn) > p,
.proporzional-row > div > .advs-box-top-icon:has(> .b24-form-click-btn-wrapper) > p {
    margin: 0 auto 15px !important;
}
.proporzional-row > div > .advs-box-top-icon > .btn,
.proporzional-row > div > .advs-box-top-icon > .b24-form-click-btn-wrapper {
    margin-top: auto !important;
    align-self: center;
}

/* ===== SiteForge: гарнитура сайта (Roboto, локальные файлы) =====
   skin.css шаблона подключается ПОСЛЕДНИМ и перебивает Roboto из style.css:26 своим
   `font-family: sans-serif` — весь сайт рисуется системной гарнитурой (буквы шире и
   жиже, `<b>` недостаточно жирный). Правка жила в sites/diadoc/skin.css, то есть
   следующему сервису не досталась: kontur-logistika приехал с sans-serif при том, что
   и @font-face, и сами .woff2 у него на месте. Место такой правки — слой.
   Файлы шрифтов лежат в каталоге fonts/ внутри шаблона, поэтому копия шаблона несёт их
   сама; у уже собранных сервисов они в sites/{slug}/fonts/. Нет файлов — стек
   откатится на Helvetica/Arial: это деградация рисунка, а не поломка страницы.
   Пути в url() ОТНОСИТЕЛЬНЫЕ: база для них сам skin.css в корне сайта, поэтому они
   одинаково работают в превью (под секретным префиксом), на боевом домене и на любой
   глубине вложенности. Абсолютный /fonts/… в превью не отпрефиксовался бы вовсе —
   _rewrite_root_paths правит HTML, а не содержимое CSS.
   Подмножества cyrillic/latin (± ext), unicode-range оставляет браузеру грузить лишь
   то, что реально встретилось на странице. */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/roboto-400-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/roboto-400-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/roboto-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/roboto-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/roboto-500-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/roboto-500-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/roboto-500-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/roboto-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/roboto-700-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/roboto-700-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/roboto-700-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/roboto-700-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

body, header, p, .adv-img p, .caption-bottom p, .adv-circle .caption p, .advs-box p,
.list-blog p, h1, h2, h3, h4, h5, h6, .btn, .circle-button,
input, textarea, select, button {
    font-family: 'Roboto', Helvetica, Arial, sans-serif;
}

/* ===== SiteForge: контраст основного текста =====
   Шаблон красит body/p/заголовки в #637280 (skin.css:194) — на сером фоне секций
   (#f7f7f7) это 4.66:1: формально AA при 15px проходит впритык, фактически читается
   тяжело. Заголовки h1..h6 своего цвета не имеют и НАСЛЕДУЮТ от body, поэтому серыми
   выходят и они (замер h2 давал тот же rgb(99,114,128)). Ставим #222 — 15.9:1.
   Текст на цветном фоне НЕ трогаем: .white h1..h6 и .white p (style.css:5491,5503)
   задают #FAFAFA со специфичностью (0,2,0), наши (0,0,1)/(0,1,0) их не перебивают —
   проверено замером, hero остаётся белым.
   Ссылки (a) в том же шаблонном селекторе, но их тут НЕТ намеренно: покрашенная в #222
   ссылка перестанет отличаться от текста. Акцент для ссылок — отдельное решение. */
body, header, p, .adv-img p, .caption-bottom p, .adv-circle .caption p, .advs-box p,
.list-blog p, .list-items .list-item p, .title-base p, div.title-icon p,
.pricing-table .list-group-item, .tag-row span {
    color: var(--sf-text-color);
}
h1, h2, h3, h4, h5, h6,
.advs-box-top-icon h3, .list-items .list-item h3, .pricing-table h3 { color: var(--sf-text-color); }

/* ===== SiteForge: кегли =====
   Решение оператора 2026-08-20: H1/H2 без изменений, H3 22, текст первого экрана 20,
   остальной текст 18, кнопки 18. Шаблонные значения — 15px у текста и 14px у кнопок —
   для лендинга мелкие. line-height поднимаем вместе с кеглем: у шаблона 24px при 15px,
   при 18px строки слипаются.
   `!important` у .text-m обязателен — шаблон задаёт его через !important (style.css:364).
   h2 на мобильном шаблон сам уменьшает до 19px (медиа-блок skin.css:1848) — это его
   поведение, не трогаем. */
body, p, .advs-box p, .list-blog p, li {
    font-size: var(--sf-text-size); line-height: var(--sf-text-line);
}
h3, .h3, .advs-box-top-icon h3 {
    font-size: var(--sf-h3-size); line-height: var(--sf-h3-line);
}
.section-bg-image p.text-m, .section-bg-video p.text-m, #hero p.text-m {
    font-size: var(--sf-lead-size) !important; line-height: var(--sf-lead-line);
}
.text-s { font-size: var(--sf-small-size) !important; line-height: var(--sf-small-line); }
.btn, .circle-button { font-size: var(--sf-btn-font); }
/* Шапка и футер — свой кегль: кнопка 18px даёт высоту 41px, а шапка ровно 60px, кнопка
   упирается в её края. Специфичность (0,2,0) у `.btn.btn-sm` выше, чем у `header .btn`
   (0,1,1) — поэтому здесь именно `header .btn.btn-sm`, иначе правило проигрывает.
   Кнопку ШАПКИ дальше ведёт правило геометрии b24 (14px, блок шапки выше по файлу, но
   специфичнее); КНОПКИ подвала с 2026-08-21 поднимает до 44px/18px правило единого
   размера ниже — здесь 15px остаётся за текстом подвала. */
/* Числом, а не токеном: это не решение о виде, а БЮДЖЕТ ШИРИНЫ шапки (см. ниже). */
header .btn, header .btn.btn-sm, header .circle-button,
footer .btn, footer .btn.btn-sm, footer .circle-button { font-size: 15px; }
/* Телефон и вообще текст правого блока шапки — тоже 15px, и это не косметика, а
   БЮДЖЕТ ШИРИНЫ. Шапка — единственное место сайта, где строка обязана сойтись в
   фиксированный контейнер: до 1199px bootstrap держит 970px, и запаса там единицы
   пикселей (замер на диадоке: логотип 132 + меню 456 + правый блок 360 = 948 — сходится
   впритык). Правый блок float: лишнее он не ужимает, а роняет на вторую строку, шапка
   становится 120px и fixed-top наезжает на первый экран. Кегль 18px раздувал телефон
   со 137 до 164px и вместе с кнопкой (12→15px) давал 380 — перенос на всех ширинах
   993–1199. Поэтому весь текст правого блока держим на прежнем кегле: `p` внутри —
   на случай, если у сервиса телефон свёрстан не классом .header-phone (он наш, не
   шаблонный, и у нового сервиса может называться иначе). */
header .navbar-right, header .navbar-right p, header .header-phone { font-size: 15px; }
/* Пункты меню: в РАСКРЫТОМ мобильном меню размер наследуется от body — вместе с
   `li { font-size: 18px }` выше меню стало бы крупнее всего остального в шапке
   (замер подтвердил 18px без этого правила). Возвращаем 15px.
   ТОЛЬКО до 992px, и это принципиально: на десктопе шаблон задаёт пунктам 14px, наш
   селектор (0,1,3) его перебивает, и лишний пиксель кегля растягивает меню на ~25px.
   В диапазоне 993–1199 контейнер bootstrap фиксирован на 970px и запаса там нет вовсе:
   правый блок (телефон + кнопка) падал на вторую строку, шапка становилась 120px и
   наезжала на первый экран (замер на диадоке: 5 пунктов заняли 479px вместо 455px). */
@media (max-width: 992px) {
    header .navbar-nav > li > a { font-size: 15px; }
}

/* ===== SiteForge: начертание текста =====
   Вес шрифта слой раньше не задавал вовсе — и это вылезло на втором шаблоне. У
   yellow-business в скине стоит `body, p, h1, h2, h3, h4, h5, h6 { font-weight: 300 }`,
   то есть ВЕСЬ текст и все заголовки Light; у whitelabel тело 400, заголовки 500.
   Замер на одной и той же странице двух сервисов: гарнитура одна (Roboto), цвет один
   (#222), кегли одинаковые — расходился только вес (h2 500 против 300, абзацы 400
   против 300, <b> 700 против 500). Глазом это читается как «на оригинале текст чернее».

   h4 НЕ трогаем намеренно: у whitelabel это отдельный приём — крупный лид-заголовок в
   30px с весом 300, и общее правило сделало бы его жирным. Он и так одинаков там, где
   встречается.

   <b>/<strong> — отдельной строкой: на жёлтом они местами приезжали в 500 и от
   обычного текста почти не отличались. Полужирный обязан быть полужирным.

   Сглаживание: у whitelabel в скине стоит `-webkit-font-smoothing: antialiased`
   (плюс `-moz-osx-font-smoothing: grayscale`), у yellow-business его нет вовсе.
   Это ещё немного разницы в толщине штриха — переносим в слой, чтобы шрифт рисовался
   одинаково на любом шаблоне. */
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body, p, li { font-weight: var(--sf-text-weight); }
h1, h2, h3, h5, h6 { font-weight: var(--sf-heading-weight); }
b, strong { font-weight: var(--sf-bold-weight); }
/* Заголовок карточки. У yellow-business он ослаблен двумя правилами —
   `.advs-box h3` (0,1,1) и `html body .advs-box-top-icon h3` (0,1,3), — и общее
   правило выше их не перебивает: замер дал 97 карточных h3 весом 400 против 500 у
   мастера. Повторяем ФОРМУ шаблонного селектора (та же специфичность) и берём
   порядком: наш блок идёт последним в skin.css, а он подключается последним.
   У whitelabel таких правил нет, карточный h3 там и так 500 — значение то же,
   мастер не меняется. */
html body .advs-box h3,
html body .advs-box-top-icon h3 { font-weight: var(--sf-heading-weight); }
/* Заголовок шага в нумерованной схеме. У whitelabel есть
   `.box-steps .step-item > h3 { font-weight: 500 }`, у yellow-business такого правила
   нет вовсе — и заголовок проваливается в его общий 300. Селектор той же формы и той
   же специфичности (0,2,1), значение то же, что у whitelabel: мастер не меняется. */
.box-steps .step-item > h3 { font-weight: var(--sf-heading-weight); }

/* ===== SiteForge: приглушённый текст — вопросы FAQ и крошки =====
   Оба набраны тегом <a>, и блок контраста их намеренно не красит: правило «ссылка,
   покрашенная в #222, перестаёт отличаться от текста» остаётся верным. Но вопрос
   аккордеона — это <a> БЕЗ href, никакая не ссылка, а заголовок; а крошки — служебная
   навигация, вид которой по решению оператора обязан переезжать из сайта в сайт.
   Пока сайт был один, цвет ссылки шаблона был один и вопрос не возникал; на втором
   шаблоне тот же «цвет ссылки» оказался другим (#696969 против #637280), и на 74
   элементах страницы оформление разошлось. Настоящие текстовые ссылки в абзацах не
   задеты — у них своё правило с подчёркиванием и брендовым цветом. */
.accordion-list .list-group-item > a,
.container.content nav a { color: var(--sf-muted-color); }
footer h3 { font-size: var(--sf-footer-h3-size); }

/* ===== SiteForge: стрелка между шагами (.box-steps) — снимаем декор скина =====
   На один и тот же псевдоэлемент `.box-steps .step-item:after` претендуют ТРИ файла,
   и подключаются они в таком порядке:
     1. style.css      — `content: '\f061'; font-family: 'FontAwesome'; font-size: 25px`
                         (глифа нет: FontAwesome на сайте не подключён — см. `fa fa-bars`);
     2. skin.css       — у yellow-business свой рисунок: `:before` = вертикальная линия
                         1x70px, а сам `:after` превращён в КВАДРАТ 18x18 с бордерами
                         сверху и справа, повёрнутый на 45°, с непрозрачным фоном
                         (то есть скин рассчитывает, что содержимого в нём нет);
     3. scripts/iconsmind/line-icons.min.css — подключается СКРИПТОМ шаблона, поэтому
                         встаёт в каскаде ПОСЛЕ скина и возвращает содержимое:
                         `content: '\e660'` (это глиф im-arrow-right) плюс
                         `font-family: 'icomoon' !important`.
   Итог на жёлтом: настоящая стрелка-глиф ЕСТЬ, но её вместе с контейнером разворачивает
   на 45° и обводит рамкой поверх вертикальной линии. На экране это выглядит как
   посторонняя фигура рядом с чертой — «стрелочки поехали». У whitelabel пункта 2 нет
   вовсе (в его скине про .box-steps только h3 и номер), поэтому у мастера стрелка
   рисуется ровно и вопросов не вызывает — расхождение приехало со вторым шаблоном.
   Лечим причину: снимаем декор скина и оставляем глиф как есть. Цвет, кегль и позицию
   не трогаем — их задают style.css и акцентный список скина, то есть стрелка получается
   такой же, как у мастера. На сервисах на whitelabel правило не меняет ничего: сбрасывать
   там нечего (ни линии, ни рамки, ни поворота не было). */
.box-steps .step-item:before { display: none; }
.box-steps .step-item:after,
.section-bg-color .box-steps .step-item:after {
    width: auto;
    height: auto;
    border: 0;
    background: none;
    margin-right: 0;
    -webkit-transform: none;
    -ms-transform: none;
    transform: none;
}

/* ===== SiteForge: кнопки страницы и подвала — один размер (см. переменные --sf-btn-*) =====
   Правило ограничено <main> НАМЕРЕННО: шапка — бюджет ширины (до 1199px контейнер
   970px, запас единицы пикселей; проба с кеглем кнопки шапки 14→15px давала +7px и
   съедала запас на 993px с 26 до 19px), и не задевать её надёжнее тем, что правило до
   неё не достаёт, а не переопределением обратно. <main> есть у всех 128 страниц обоих
   сервисов, партиал тарифов вставляется внутрь него; у страницы без <main> правило
   просто не сработает — деградация в прежний вид, не в кашу. Специфичность (0,1,1) выше
   шаблонного `.btn-sm` (0,1,0), блок идёт последним — !important не нужен. Следствие:
   `.btn-sm` внутри страницы перестаёт отличаться от `.btn` — это и есть половина
   проблемы, разметку (167 вхождений) не правим, перегенерация вернула бы класс.
   Подвал — тоже 44px: бюджета ширины там нет (колонки), а кнопка внизу страницы по
   смыслу та же, что в тексте. Отдельным селектором, чтобы снять одним движением;
   `footer .btn.btn-sm` обязателен — правило кегля 15px выше имеет (0,2,1). Кегль
   подвала поднимается только у КНОПОК, текст подвала остаётся на 15px. */
main .btn, main .circle-button,
footer .btn, footer .btn.btn-sm, footer .circle-button {
    min-height: var(--sf-btn-height);
    padding: var(--sf-btn-pad-y) var(--sf-btn-pad-x);
    font-size: var(--sf-btn-font);
    line-height: var(--sf-btn-line);
}

/* ===== SiteForge: колонка «Контакты» в футере начинается там же, где соседние =====
   Между её <h3> и первым элементом эталон нёс лишний `<hr class="space s">`, которого
   у соседних колонок нет: замер давал зазор 34px против 15px, то есть первая строка
   контактов стояла на 19px ниже соседей. Разметку эталона (sites/diadoc/_footer.html)
   и требование в doc/prompt-fragment.md починили — это страховка для футеров, которые
   уже собраны и перегенерироваться не будут. Класс .footer-right шаблонный
   (style.css:1863), правило дешёвое. */
footer .footer-right > h3 + hr.space { display: none; }

/* ===== SiteForge: скриншот интерфейса на нижней кромке hero =====
   Приём общий для всех сервисов семейства: картинка интерфейса стоит ВПРИТЫК к низу
   цветного hero, белая секция начинается сразу под ней, поэтому у самой картинки
   скруглены только ВЕРХНИЕ углы (файл RGBA, радиус 10px). Эталон габаритов —
   sites/diadoc/images/mk-17.png, 805x317.
   Два правила, оба обязательны:
   1) универсальный ритм секций выше даёт .container.content нижний padding 52px, и под
      картинкой оставалась полоса цветного фона — гасим его ТОЛЬКО у hero (id бьёт по
      специфичности) и только снизу;
   2) в шаблоне у img задан лишь max-width:100%, поэтому на узком экране картинка с
      атрибутом height=317 сплющивалась (на 360px это 360x317 вместо пропорций) —
      height:auto возвращает пропорциональное масштабирование.
   Правила жили в блоке style на главной диадока; там они верны для ЛЮБОГО сервиса с
   таким hero, поэтому место им здесь. Класс наш (.hero-shot) — у сервиса без картинки
   селекторы просто мёртвые. */
#hero > .container.content { padding-bottom: 0 !important; }
#hero .hero-shot { display: block; margin: 0 auto !important; height: auto; }
/* ===== SiteForge: карточка .advs-box-side-icon — иконка нулевой ширины =====
   СИМПТОМ: глиф налезает на заголовок карточки, текст начинается вплотную к иконке.
   ЗАМЕР (checks/block_geometry.py, gruzootpravitel.html, все ширины 390–1440):
   у <i> ширина РОВНО 0, и h3 начинается на том же x, что и глиф (16/16, 27/27, 151/151).
   Раскладка при этом исправна — icon-box везде display:table-cell.

   ПРИЧИНА — контракт между вёрсткой шаблона и НАШЕЙ разметкой. Шаблон задаёт иконке
   размер шириной: `.advs-box-side-icon .icon-box i { width: 65px; height: 35px }`. Но
   `width` НЕ ПРИМЕНЯЕТСЯ к незамещаемому инлайновому элементу, а наши иконки — это
   Iconsmind (`<i class="im-file-edit icon">`), и правило `[class^="im-"]` в
   line-icons.min.css задаёт только гарнитуру и сглаживание, без `display`. У шаблона в
   демо-странице на этом месте `<i class="fa fa-medkit icon">` — и у `.fa` свой
   `display: inline-block` из FontAwesome. То есть блок работает ровно до тех пор, пока
   иконка взята из FontAwesome, которого на наших сайтах нет вообще (см. раздел про
   кнопку меню: `.fa` у нас переопределён Iconsmind на icomoon).

   Почему в слое, а не правкой страниц: это свойство ПАРЫ «шаблон + наш набор иконок»,
   то есть повторится у каждого сервиса на этом семействе и в каждой новой странице.
   Правка доезжает до уже собранных страниц без единой перегенерации.

   Второе правило — серый разделитель слева от текста (`:before` шириной 1px, #d6d6d6).
   Снят по решению оператора 2026-10-11: при нулевой ширине иконки он оказывался слева
   от всей карточки и читался как обрывок рамки, а на исправленной раскладке дублирует
   отступ. Декор шаблона, нашей разметке не принадлежит.

   Третье — ряд карточек. Шаблон ставит между ними `<hr class="space m visible-xs">`,
   то есть зазор ТОЛЬКО на телефоне; на десктопе 4 карточки в одном .row плывут
   флоатами, и при разной высоте правая колонка прижимается к предыдущей, а левая
   уезжает «лесенкой» (ровно это оператор описал как «сильно прижаты»). Флекс с
   row-gap выравнивает ряды, не трогая ширины колонок. Приём уже применён выше к рядам
   boxed-inverse — тот же случай, другой блок. */
.advs-box-side-icon .icon-box i { display: inline-block; }
.advs-box-side-icon .icon-box + .caption-box:before { display: none !important; }
.container.content .row:has(> [class*="col-md-"] > .advs-box-side-icon) {
    display: flex; flex-wrap: wrap; align-items: flex-start; row-gap: 30px;
}

/* ===== SiteForge: list-texts-justified — идиома прайс-листа, а не «термин + абзац» =====
   СИМПТОМ: описание прижато к правому краю рваным левым краем, точечная линия висит
   поперёк первой строки.
   ЗАМЕР (checks/block_geometry.py): на ВСЕХ ширинах 390–1440 ни один из 10 пунктов
   страницы не укладывается в строку (высота li 62–118px при строке 28px), и все 10
   прижаты вправо. По трём сервисам таких пунктов 15, коротких (<= 40 символов) — ноль.

   ПРИЧИНА. `.list-texts-justified` в style.css это меню/прайс: `li { text-align: right }`,
   `li b { float: left }`, а выноска `li:after` — линия на ФИКСИРОВАННОЙ высоте 19px.
   Всё это верно ровно для одной строки вида «термин ···· значение». На описании в два-три
   предложения идиома рассыпается: значение уезжает вправо, выноска остаётся у первой
   строки, левый край рваный.

   Корень лечится в пресете (домен больше не назначает `-justified` под пары «термин —
   абзац»), но это действует только на следующей генерации. Здесь — страховка на
   отдаче: если пара всё же не в одну строку, список обязан выглядеть как обычный
   `ul.list-texts`. Определить перенос средствами CSS нельзя, поэтому гасим идиому
   целиком: настоящих прайс-листов этим блоком мы не строим НИ НА ОДНОМ сервисе
   (замер выше), а цены живут в блоке тарифов со своей вёрсткой. */
.list-texts-justified li { text-align: left; }
.list-texts-justified li:after { display: none; }
.list-texts-justified li b { float: none; }
.list-texts-justified li span { padding-left: 0; display: inline; }

/* ===== SiteForge: раздел «Новости» (doc/task-news-feed.md) =====
   Статьи приходят из ContentForge сырым HTML (h2/h3/p, списки, таблицы, врезки) без
   классов шаблона, поэтому оформление задаётся здесь и ТОЛЬКО внутри наших обёрток
   .sf-article и .sf-news-*: у темы WordPress правила таблиц глобальные, у нас они
   задели бы таблицы тарифов. Значения — токены --sf-infobox-* и --sf-table-*. */
.sf-article { overflow-wrap: break-word; }
.sf-article p, .sf-article ul, .sf-article ol, .sf-article blockquote,
.sf-article .sf-table-scroll { margin: 0 0 20px; }
.sf-article h2 { margin: 40px 0 16px; }
.sf-article h3 { margin: 32px 0 12px; }
.sf-article h4 { margin: 24px 0 10px; }
.sf-article > :first-child { margin-top: 0; }
.sf-article > :last-child { margin-bottom: 0; }
.sf-article ul { list-style: disc; padding-left: 24px; }
.sf-article ol { list-style: decimal; padding-left: 24px; }
.sf-article li { margin-bottom: 6px; }
.sf-article li > ul, .sf-article li > ol { margin: 6px 0 0; }
.sf-article a { text-decoration: underline; }
.sf-article img { display: block; max-width: 100%; height: auto; margin: 0 0 20px;
                  border-radius: var(--sf-radius); }
.sf-news-cover { margin: 0 0 30px; }
.sf-news-cover img { display: block; width: 100%; height: auto; border-radius: var(--sf-radius); }
.sf-article blockquote { padding: 15px 20px; color: var(--sf-infobox-color);
    font-style: normal; font-size: inherit; line-height: inherit; border: 0;
    border-left: var(--sf-infobox-border-width) solid var(--sf-infobox-border);
    border-radius: var(--sf-infobox-radius); background-color: var(--sf-infobox-bg); }
.sf-article blockquote.infobox--example { background-color: var(--sf-infobox-example-bg);
    border-left-color: var(--sf-infobox-example-border); }
.sf-article blockquote.infobox--warning { background-color: var(--sf-infobox-warning-bg);
    border-left-color: var(--sf-infobox-warning-border); }
.sf-article blockquote.infobox--glossary { background-color: var(--sf-infobox-glossary-bg);
    border-left-color: var(--sf-infobox-glossary-border); }
.sf-article blockquote p, .sf-article blockquote li { color: inherit; }
.sf-article blockquote > :last-child { margin-bottom: 0; }
.sf-article blockquote:before, .sf-article blockquote:after { content: none; }
.sf-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.sf-article table { width: 100%; border-collapse: collapse; margin: 0; }
.sf-article th, .sf-article td { border: 1px solid var(--sf-table-border); padding: 10px;
    text-align: left; vertical-align: top; }
.sf-article th { background-color: var(--sf-table-head-bg);
    font-weight: var(--sf-bold-weight); text-align: center; }
.sf-article tr:hover > td { background-color: var(--sf-table-hover); }
/* На телефоне таблица в три колонки по 120px нечитаема: держим ширину, листаем вбок. */
@media (max-width: 767px) { .sf-article table { min-width: 540px; } }

/* Сетка хаба: 3 колонки, все карточки страницы ОДНОГО размера (решение оператора —
   «иначе будет каша»). Высоту ряда держит grid-auto-rows: 1fr (все ряды по самому
   высокому), а обрезка строк не даёт длинному заголовку раздуть свой ряд. */
.sf-news-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
                grid-auto-rows: 1fr; gap: 30px; }
@media (max-width: 991px) { .sf-news-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) { .sf-news-grid { grid-template-columns: minmax(0, 1fr); gap: 20px; } }
.sf-news-grid > .sf-news-card { display: flex; flex-direction: column; height: 100%;
    margin: 0; padding: 28px; text-align: left; text-decoration: none; color: inherit;
    border-radius: var(--sf-radius); }
.sf-news-card .sf-news-date { display: block; margin: 0 0 10px; font-size: var(--sf-small-size);
    line-height: var(--sf-small-line); color: var(--sf-muted-color); }
.sf-news-card .sf-news-title { margin: 0 0 12px; padding: 0; font-size: var(--sf-h3-size);
    line-height: var(--sf-h3-line); font-weight: var(--sf-heading-weight); text-align: left;
    text-transform: none; color: var(--sf-text-color); overflow: hidden;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.sf-news-card .sf-news-desc { margin: 0; padding: 0; font-size: var(--sf-small-size);
    line-height: var(--sf-small-line); text-align: left; color: var(--sf-text-color);
    overflow: hidden; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; }
.sf-news-card:hover .sf-news-title, .sf-news-card:focus .sf-news-title { text-decoration: underline; }
.sf-news-pager { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px;
                 margin-top: 40px; }
.sf-news-pager a, .sf-news-pager span { display: inline-flex; align-items: center;
    justify-content: center; min-width: 44px; height: 44px; padding: 0 12px;
    border: 1px solid var(--sf-table-border); border-radius: var(--sf-radius);
    color: var(--sf-text-color); text-decoration: none; }
.sf-news-pager [aria-current="page"] { font-weight: var(--sf-bold-weight); border-color: currentColor; }
.sf-news-pager .sf-news-gap { min-width: 0; padding: 0 4px; border: 0; }
.sf-news-empty { text-align: center; color: var(--sf-muted-color); }


/* ===== SiteForge: токены оформления (шаблон + пресет домена) ===== */
:root {
    --sf-text-size: 18px;
    --sf-text-line: 28px;
    --sf-h3-size: 22px;
    --sf-h3-line: 30px;
    --sf-lead-size: 20px;
    --sf-lead-line: 30px;
    --sf-small-size: 15px;
    --sf-small-line: 23px;
    --sf-text-color: #222222;
    --sf-text-weight: 400;
    --sf-heading-weight: 500;
    --sf-bold-weight: 700;
    --sf-muted-color: #637280;
    --sf-footer-h3-size: 14px;
    --sf-radius: 12px;
    --sf-btn-height: 44px;
    --sf-btn-font: 18px;
    --sf-btn-line: 24px;
    --sf-btn-pad-y: 9px;
    --sf-btn-pad-x: 20px;
    --sf-infobox-bg: #f5f5f5;
    --sf-infobox-border: #9e9e9e;
    --sf-infobox-border-width: 5px;
    --sf-infobox-radius: 0 5px 5px 0;
    --sf-infobox-color: #000000;
    --sf-infobox-example-bg: #f1f8e9;
    --sf-infobox-example-border: #8bc34a;
    --sf-infobox-warning-bg: #FFF6CE;
    --sf-infobox-warning-border: #fbc02d;
    --sf-infobox-glossary-bg: #E8F0F6;
    --sf-infobox-glossary-border: #80A6BC;
    --sf-table-border: #cccccc;
    --sf-table-head-bg: #f5f5f5;
    --sf-table-hover: #f1f1f1;
    --sf-header-height: 70px;
}

/* ===== SiteForge: боксы контента — отделка по токенам + равная высота ===== */
.section-empty .advs-box.boxed-inverse,.section-bg-color .advs-box.boxed-inverse,.section-bg-color .advs-box.advs-box-top-icon.boxed-inverse,.section-empty .row > [class*="col-md-"].boxed-inverse:not(:has(form)),.section-bg-color .row > [class*="col-md-"].boxed-inverse:not(:has(form)) { box-shadow: 0 0 7px 0px rgba(0,0,0,.16) !important; border: none !important; }
.section-empty .advs-box-top-icon .icon,.section-bg-color .advs-box-top-icon .icon { font-size: 40px !important; width: 80px !important; height: 80px !important; line-height: 80px !important; padding: 0 !important; margin-left: -40px !important; margin-top: -85px !important; }
.section-empty .advs-box-top-icon:has(> .icon),.section-bg-color .advs-box-top-icon:has(> .icon) { padding-top: 41px !important; }
.container.content .row:has(> [class*="col-md-"].boxed-inverse):not(:has(form)) { display: flex !important; flex-wrap: wrap; align-items: stretch !important; }

/* ===== SiteForge: текстовая ссылка в абзаце должна быть видна ===== */
.container.content p > a[href]:not([class]) {
    color: #2e5b58;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
}
.container.content p > a[href]:not([class]):hover {
    text-decoration-color: #00d5b5;
    text-decoration-thickness: 2px;
}

/* ===== SiteForge: текущий раздел в меню шапки ===== */
header .navbar-nav > li.sf-nav-active > a {
    box-shadow: inset 0 -2px 0 #00d5b5;
}
@media (min-width: 993px) {
    header .nav.navbar-nav > li > a:before { height: 2px; }
}
@media (max-width: 992px) {
    header .navbar-nav > li.sf-nav-active > a {
        box-shadow: inset 3px 0 0 #00d5b5;
        color: #00d5b5;
    }
}

/* ===== SiteForge: кнопка в шапке не теряет фон под курсором ===== */
header .btn:hover, header .btn:focus,
header .circle-button:hover, header .circle-button:focus {
    background-color: #2e5b58 !important;
    border-color: #2e5b58 !important;
    color: #fff !important;
}

/* ===== SiteForge: акцент виджета Bitrix24 = бренд сервиса (--b24-*) ===== */
.b24-form[id^="b24-"],
.b24-form [id^="b24-"] {
    --b24-primary-color: #00d5b5 !important;
    --b24-primary-hover-color: #2e5b58 !important;
    --b24-primary-text-color: #fff !important;
}

/* ===== SiteForge: кнопки Bitrix24 = кнопки сайта; радиус кнопок — как у блоков ===== */
.b24-form-click-btn-wrapper > button.b24-form-click-btn,
.b24-form-click-btn-wrapper > a.b24-form-click-btn {
    background-color: #00d5b5 !important; border-color: #00d5b5 !important;
    color: #fff !important; padding: 5px 15px !important;
    height: auto !important;
    border-radius: var(--sf-radius) !important;
    font-family: inherit !important; font-size: 14px !important;
    font-weight: 400 !important; line-height: 1.42857143 !important;
    text-transform: none !important; box-shadow: none !important;
    transition: all .6s !important;
}
.b24-form-click-btn-wrapper > button.b24-form-click-btn:hover,
.b24-form-click-btn-wrapper > a.b24-form-click-btn:hover {
    background-color: #2e5b58 !important; border-color: #2e5b58 !important;
    color: #fff !important;
}
main .b24-form-click-btn-wrapper > button.b24-form-click-btn,
main .b24-form-click-btn-wrapper > a.b24-form-click-btn,
footer .b24-form-click-btn-wrapper > button.b24-form-click-btn,
footer .b24-form-click-btn-wrapper > a.b24-form-click-btn {
    min-height: var(--sf-btn-height) !important; height: auto !important;
    padding: var(--sf-btn-pad-y) var(--sf-btn-pad-x) !important;
    font-size: var(--sf-btn-font) !important;
    line-height: var(--sf-btn-line) !important;
    display: flex !important; align-items: center !important;
    justify-content: center !important;
}
@media (max-width: 992px) {
    header .b24-form-click-btn-wrapper > button.b24-form-click-btn,
    header .b24-form-click-btn-wrapper > a.b24-form-click-btn {
        min-height: 40px !important; height: auto !important;
        display: flex !important; align-items: center !important;
        justify-content: center !important;
    }
}
.b24-form button.b24-form-btn {
    background-color: #00d5b5 !important; border-color: #00d5b5 !important;
    color: #fff !important; border-radius: var(--sf-radius) !important;
    transition: all .6s !important;
    min-height: 44px !important; padding: 10px 20px !important;
}
.b24-form button.b24-form-btn:hover {
    background-color: #2e5b58 !important; border-color: #2e5b58 !important;
}
.circle-button, .btn.circle-button { border-radius: var(--sf-radius) !important; }
.b24-form .b24-form-control-string .b24-form-control,
.b24-form .b24-form-control-text .b24-form-control,
.b24-form .b24-form-control-list .b24-form-control,
.b24-form .b24-form-control-select .field-item,
.b24-form .b24-form-control-file,
.b24-form .b24-form-control-checkbox .b24-form-control,
.b24-form .b24-form-control-radio .b24-form-control,
.b24-form .b24-form-control-file .b24-form-control,
.b24-window-popup-wrapper { border-radius: var(--sf-radius) !important; }
.b24-form-content form > div:has(> .b24-form-field) {
    display: grid !important; grid-template-columns: 1fr 1fr;
    gap: 0 16px; align-items: start;
}
.b24-form-content form > div:has(> .b24-form-field:only-child) { grid-template-columns: 1fr; }
.b24-form-content .b24-form-field-agreement,
.b24-form-content .b24-form-field-layout { grid-column: 1 / -1; }
@media (max-width: 767px) {
    .b24-form-content form > div:has(> .b24-form-field) { grid-template-columns: 1fr; }
}
@media (max-width: 991px) {
    [class*="col-md-"].boxed-inverse .b24-form-content form > div:has(> .b24-form-field) { grid-template-columns: 1fr; }
}
.b24-form .b24-form-wrapper { min-height: 0 !important; }
.b24-form .b24-form-header-padding { padding: 0 !important; }
.b24-form .b24-form-content { padding: 10px 20px !important; }
.b24-form .b24-form-padding-side { padding-left: 20px !important; padding-right: 20px !important; }
.b24-form .b24-form-field { margin-bottom: 10px !important; }
.b24-form .b24-form-sign { padding: 4px 20px !important; margin: 0 !important; }
.b24-form-recaptcha, .b24-form-yandex-captcha { margin: 0 20px 12px 0 !important; }
.b24-form div span.b24-form-sign-abuse { display: none; }
.b24-form .b24-form-control-radio,
.b24-form .b24-form-control-checkbox {
    background: none !important; border: none !important; padding: 0 !important;
}
.b24-form .b24-form-control-radio > div,
.b24-form .b24-form-control-checkbox > div { flex: 1 1 100%; min-width: 0; }
.b24-form .b24-form-control-radio fieldset,
.b24-form .b24-form-control-checkbox fieldset {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 8px;
}
.b24-form .b24-form-control-radio fieldset > legend,
.b24-form .b24-form-control-checkbox fieldset > legend { grid-column: 1 / -1; margin-bottom: 8px !important; }
.b24-form .b24-form-control-radio .b24-form-control,
.b24-form .b24-form-control-checkbox .b24-form-control {
    display: flex !important; width: 100% !important;
    margin: 0 !important; min-height: 44px !important;
}
.b24-form .b24-form-control-radio .b24-form-control.b24-form-control-checked,
.b24-form .b24-form-control-checkbox .b24-form-control.b24-form-control-checked { border-color: var(--b24-primary-color) !important; }
.b24-form, .b24-form *, .b24-window-popup, .b24-window-popup * { font-family: inherit !important; }
.b24-window-popup .b24-form-header { padding-top: 10px !important; padding-bottom: 0 !important; }
.b24-window-popup .b24-form-header-title { font-size: 20px !important; line-height: 26px !important; margin-bottom: 4px !important; }
.b24-window-popup .b24-form-header-description { font-size: 14px !important; line-height: 18px !important; }
.b24-window-popup .b24-form-progress-bar-title {
    font-size: 17px !important; line-height: 22px !important;
    font-weight: 600 !important;
}

/* ===== SiteForge: кнопка чата Bitrix24 = бренд сервиса ===== */
.b24-widget-button-wrapper .b24-widget-button-inner-block,
.b24-widget-button-wrapper .b24-widget-button-inner-mask { background: #00d5b5 !important; }
.b24-widget-button-wrapper .b24-widget-button-pulse { border-color: #00d5b5 !important; }
.b24-widget-button-wrapper .b24-widget-button-icon-container svg path { fill: #fff !important; }
body:has(.b24-widget-button-wrapper) i.scroll-top { bottom: 126px !important; }

/* ===== SiteForge: фон подвала (настройка brand.footer) ===== */
footer { background-color: #1b4332 !important; }
footer p, footer a, footer li, footer span,
footer .copy-row, footer .copy-text { opacity: 1; }
footer, footer span, footer .copy-row, footer .copy-text { color: #ffffff !important; }
footer p, footer li, footer .text-s, footer .copy-row, footer .copy-text { color: #d6ddda !important; }
footer h2, footer h3, footer h4, footer h5, footer h6 { color: #ffffff !important; }
footer a:not(.btn):not(.circle-button):not([class*="b24"]) { color: #d6ddda !important; }
footer a:not(.btn):not(.circle-button):not([class*="b24"]):hover, footer a:not(.btn):not(.circle-button):not([class*="b24"]):focus { color: #ffffff !important; }
footer hr, footer .copy-text { border-color: #4d6c5f !important; }
footer { border-top-color: #4d6c5f !important; }
body > footer { box-shadow: 0 50vh 0 50vh #1b4332 !important; }

/* ===== SiteForge: картинка-фон hero — в тон бренда (blend) ===== */
.section-bg-image { background-color: #00d5b5 !important; background-blend-mode: luminosity; }

/* ===== SiteForge: ховер контурной кнопки — заливка СВОИМ цветом ===== */
.btn.btn-border:hover, .btn.btn-border:focus, .btn.circle-button.btn-border:hover, .btn.circle-button.btn-border:focus { background-color: #00d5b5 !important; border-color: #00d5b5 !important; color: #fff !important; }
.btn.btn-border:hover i, .btn.circle-button.btn-border:hover i { color: #fff !important; }

/* ===== SiteForge: фон шапки (настройка brand.header) ===== */
header > .navbar, header .navbar-main, header .navbar-header,
header .navbar-collapse, header .navbar-collapse.in, header .navbar-collapse.collapsing { background-color: #1b4332 !important; }
header > .navbar { border-bottom-color: #4d6c5f !important; }
header .navbar-collapse { border-color: #4d6c5f !important; }
header .navbar-nav > li > a:not(.btn):not(.circle-button):not([class*="b24"]),
header .navbar-nav > .active > a:not(.btn):not(.circle-button):not([class*="b24"]),
header .header-phone, header .header-phone i,
header .navbar-toggle, header .navbar-toggle > i { color: #ffffff !important; }
header .navbar-nav > li > a:not(.btn):not(.circle-button):not([class*="b24"]):hover, header .navbar-nav > li > a:not(.btn):not(.circle-button):not([class*="b24"]):focus,
header .navbar-nav > li:hover > a:not(.btn):not(.circle-button):not([class*="b24"]),
header .header-phone:hover, header .header-phone:focus,
header .navbar-toggle:hover > i, header .navbar-toggle:focus > i { color: #00d5b5 !important; }
header .navbar-collapse .navbar-nav > li,
header .navbar-collapse .navbar-nav > li > a { border-color: #4d6c5f !important; }
header .navbar-brand img { filter: brightness(0) invert(1); }
header .navbar .btn.circle-button, header .navbar .btn.circle-button.btn-border, header .b24-form-click-btn-wrapper > button.b24-form-click-btn, header .b24-form-click-btn-wrapper > a.b24-form-click-btn { background-color: #ffffff !important; border-color: #ffffff !important; color: #1b4332 !important; }
header .navbar .btn.circle-button:hover, header .navbar .btn.circle-button:focus, header .navbar .btn.circle-button.btn-border:hover, header .navbar .btn.circle-button.btn-border:focus,
header .b24-form-click-btn-wrapper > button.b24-form-click-btn:hover, header .b24-form-click-btn-wrapper > button.b24-form-click-btn:focus, header .b24-form-click-btn-wrapper > a.b24-form-click-btn:hover, header .b24-form-click-btn-wrapper > a.b24-form-click-btn:focus { background-color: #00d5b5 !important; border-color: #00d5b5 !important; color: #1b4332 !important; }
header .navbar .btn.circle-button i, header .navbar .btn.circle-button:hover i { color: inherit !important; }