/*MOBILE*/

@media (max-width:900px) {

    html,
    body {
        /* position: relative; */
        /* max-width: 100%; */
        /* overflow-x: hidden; */
    }



    section {
        position: relative;
        padding: 50px 0;
    }



    .fl {
        flex-wrap: wrap;
    }

 html {
        scroll-behavior: smooth;
      scroll-margin-top: 73px; /* Отступ при прокрутке */
    }
    
    .tab-item {
       
    }
    .desc,
    .pad {
        display: none
    }

    .mob {
        display: block
    }

    header .call {
        margin-right:25px;
    }

    .promo .swiper-pagination {
    position: relative;
    text-align: center;
    transition: 300ms opacity;
    transform: translate3d(0, 0, 0);
    z-index: 10;
    top: auto !important;
    bottom: 10px;
}

    .burger-menu .close-menu img {
        width: 36px;
    }

    .burger-menu .cont-item {
        margin-bottom: 15px;
        display: flex;
        align-items: center;
    }

    .burger-menu .cont-item img {
        margin-right: 10px
    }

    .burger-menu .cont-item span {
        font-weight: 500;
        display: block;
        margin-bottom: 0;
    }

    .burger-menu .close-menu {
        position: absolute;
        right: 20px;
        top: 17px;
    }



    .burger-menu {
        width: 100%;
        padding: 20px 20px;
        max-width: 100%;
        background: var(--black);
        position: fixed;
        z-index: 999;
        text-align: left;
        top: 0;
        border-radius: 0;
        /* transform: none; */
        /* transition: 0.5s; */
        overflow-y: auto;
        height: 100%;
        color: #7a8596;
        /* text-align: center; */
    }

        .burger-menu.white {
            background:#fff
        }
    .burger-menu .callback {
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 15px 0
    }

     .burger-menu input {
         border:none;
         background:none;
         padding: 3px 5px 0px 5px;
         height: auto;
         margin-bottom: 0;
     }

    .burger-menu button {
        background:none;
        border:none;
    }

    .burger-menu form {
        border:1px solid #7a8596;
        padding: 5px;
        margin: 30px 0 10px;
    }

     .burger-menu form button {
         opacity:0.5;
         position: absolute;
     }
    
    .burger-menu .phone {
        display: block;
        margin-bottom: 10px;
        padding-top: 20px;
        border-top: 1px solid #eee;
    }

    .burger-menu .callback img {
        margin-right: 10px;
    }

    .burger-menu .callback {
        color: var(--prime);
        font-size: 20px;
    }

    .burger-menu .close {
        text-align: left;
        margin-bottom: 0px;
    }

    .burger-menu .links {
        display: flex;

    }

    .burger-menu .lang {
        font-size: 30px;
        border-top: 1px solid #eee;
        padding-top: 30px;
    }

    .burger-menu .lang a {
        padding: 0 8px;
    }

    .burger-menu .lang a.active {
        color: var(--prime)
    }

    .burger-menu .links {
        justify-content: center;
        margin-bottom: 30px;
        padding-bottom: 20px;
    }

    .burger-menu .links img {
        width: 32px;
        margin-right: 5px;
    }

    .burger-menu .gr {
        color: var(--sec);
        margin-bottom: 15px;
    }

    .burger-menu .phone-but a {
        color: var(--prime)
    }

    .burger-menu .phone-but {
        padding-left: 0
    }

    .burger-menu .phone-but a + a {
        height: 41px;
        color: white;
        margin-top: 10px;
    }

    .burger-menu .soc-but {
        margin-top: 10px;
        padding-left: 0;

    }

    .burger-menu .soc-but a {
        width: 100%;
        height: 41px;
        color: white;

    }

    .burger-menu nav {
        margin-top: 30px;
        margin-bottom:30px;

    }
    .burger-menu .item {
        margin-bottom:10px;
    }
     .burger-menu .item img {
         margin-right:8px;
     }

    .burger-menu .item a {
        color:white;
    }

     .burger-menu.white .item a {
        color:var(--black);
    }

     .burger-menu .item+.item+.item a {
        color:#7a8596;
    }

     .burger-menu.white .item+.item+.item a {
        color:var(--black);
    }
    .burger-menu .but {
        margin-top: 50px
    }

    .burger-menu .soc {
        margin-top:30px;
    }
    .burger-menu .soc a {
        margin-right:10px;
    }
    .burger-menu .cont {
        color: #ffffff;
        margin-top: 30px;
        padding-top: 30px;
        border-top: 1px solid silver;

    }

    .burger-menu .cont .subtitle {
        font-size: 16px;
        text-transform: uppercase;
        font-weight: 700;
        margin-bottom: 20px;

    }

    .burger-menu ul li {
        margin-bottom: 20px;
        font-size: 18px;
        font-weight: 400;
        color: white;
        position: relative;
        text-align: left;
    }
        .burger-menu ul li .arr {
            position:absolute;
            right:0;
        }
    .burger-menu ul ul li {
        margin-bottom: 5px;
        color:#7a8596;
        margin-left: 12px;
    }

    .burger-menu ul ul li a {
        color: #747474;
    }

    .burger-menu ul li.parent .down {
        margin-left: 5px;
        position: absolute;
        top: 6px;
        right: 0;
    }
    
    .burger-menu ul li.parent .arr.active {
	 filter: brightness(0) saturate(2%) invert(92%) sepia(93%) saturate(1332%) hue-rotate(87deg) brightness(62%) contrast(119%);
        transform: rotate(180deg);
        margin-left: 8px;
}
    
    .burger-menu ul li.parent.active {
        color:var(--prime)
    }

    .burger-menu ul ul {
        display: none;
        padding: 10px 0;
        box-shadow: none !important;
    }

    .burger-menu ul ul li a {
        opacity: 1;
        font-size: 14px
    }

    .burger-menu.active {
        display: block;

    }
    
    .white form.sisea-search-form input {
        border:none;
    }

    section {
        padding: 40px 0;
        position: relative
    }

    section.bg {
        margin: 40px 0
    }

    h1 {
        text-transform: none;
        font-size: 32px;
        /* font-weight: 500; */
        margin-bottom: 20px;
        /* margin-top: 32px; */
    }


    /*FLEX*/

    .fl {
        display: flex;
    }

    .fw {
        flex-wrap: wrap;
    }

    .jsb {
        justify-content: space-between;
    }

    .jc {
        justify-content: center;
    }

    .jfe {
        justify-content: flex-end;
    }

    .jsa {
        justify-content: space-around;
    }

    .ac {
        align-items: center
    }

    .afe {
        align-items: flex-end
    }

    .tc {
        text-align: center;
    }

    .cw {
        color: white
    }

    .cb {
        color: black;
    }

    .fl-column {
        flex-direction: column;
    }


    .container-fluid {
        padding: 0 30px;

    }

    main {
        position: relative;
        background: white;
        z-index: 9
    }

    h2 {
        font-size: 24px;
        margin-bottom: 22px;
        font-weight: 400;
    }



    /*BUTTON*/


    .but a,
    .but button {
        background: var(--prime);
        color: #fff;
        padding: 12px 22px;
        border-radius: 0;
        color: white;
        font-weight: 500;
        font-size: 16px;
        border: 1px solid transparent;
        transition: 0.5s;
        display: inline-flex;
        align-items: center;
        height: 48px;
        cursor: pointer;
    }


    .but img {
        margin-left: 8px;
    }

    .but a:hover,
    .but button:hover {
        background: #fff;
        color: #000;
        border: 1px solid #000;
    }

    .more a {
        color: var(--prime);
        text-decoration: none;
        cursor: pointer;
    }

    .more a:hover {
        color: #FF02C8
    }


    /*HEADER*/

    header {
        background: var(--black);
        padding: 20px 0 16px 0;
        color: white;
        position: sticky;
        top: 0;
        z-index: 999;
    }

    header .item {
        font-size: 20px;
        line-height: 32px;
    }

    header .item + .item {
        margin-left: 40px;

    }

    header .item img {
        margin-right: 10px;
    }

    header .item:last-child {
        font-weight: 700;
    }

    header .item span,
    header .item a {}

    .header-bottom {
        margin-top: 20px;
    }

    .header-bottom nav ul li a {
        font-size: 18px;
    }

    .header-bottom nav ul {
        display: flex
    }

    .header-bottom nav ul li:hover > a {
        color: var(--prime);
    }

    .header-bottom nav ul li span.arr {
        display: inline-block;
        margin-left: 8px;
        transition: 0.5s;

    }

    .header-bottom nav ul li:hover span.arr {
        filter: brightness(0) saturate(2%) invert(92%) sepia(93%) saturate(1322%) hue-rotate(87deg) brightness(99%) contrast(119%);
        transform: rotate(180deg);
        margin-left: 8px;
    }

    .header-bottom nav ul ul {
        display: block;
        opacity: 0;
        visibility: hidden;
        transition-property: opacity, visibility;
        transition-duration: 0.2s;
        transition-delay: 0.15s;
        padding: 20px 20px 10px 20px;
        background: var(--black);
        position: absolute;
        z-index: 99;
        column-count: 2;
        min-width: 400px;
    }

    .header-bottom nav ul li + li {
        margin-left: 20px;
    }

    .header-bottom nav ul li.search {
        cursor: pointer;
    }

    .header-bottom nav ul ul li + li {
        margin-left: 0;
    }

    .header-bottom nav ul li img {}

    .header-bottom nav ul li {
        position: relative;
    }


    .header-bottom nav ul ul li {
        margin-bottom: 8px;
    }

    .header-bottom nav ul ul li:hover a {
        color: var(--prime);
    }

    .header-bottom nav ul li:hover ul {
        opacity: 1;
        /* Показываем подменю при ховере */
        visibility: visible;
    }

    .search-block {
        background: var(--black);
    }

    .search-block form {
        position: relative;
        max-width: 250px;
    }

    .search-block input {
        background: none;
        border: none;
        border-bottom: 1px solid white;
        padding: 5px 15px 5px 5px;
        width: 100%;
        display: block;

    }

    .search-block input::placeholder {
        color: white;
    }

    .search-block button {
        background: none;
        border: none;
        position: absolute;
        right: 0px;
        top: 3px;
    }

    .search-block button img {
        width: 16px;
    }

    .header-bottom .soc {
        display: flex;
    }

    .header-bottom .soc a + a {
        margin-left: 20px;
    }


    /*PROMO*/

    .promo {
        padding: 65px 0 50px;
        color: white;
        background-position: center;
    }

    .promo .bread {
        text-align: left;
        margin-bottom: 15px;
    }

    .promo .bread ul {
        display: flex;
        justify-content: flex-start;
    }

    .promo .bread ul li {
        list-style: none;
    }

    .promo .bread ul li {
        padding: 0;
        display: flex;
    }
    .promo .bread ul li a {
        display:flex;
        white-space:nowrap
    }
    .promo .bread ul li a:after {
        content: url(../img/right.svg);
        padding: 0 9px;
    }

    .promo h1 {
        font-size: 30px;
        line-height: 1.2;
        text-align: left;
        margin-bottom: 20px;
        font-weight: 400;
    }

    .promo p {
        text-align: left;
        max-width: 600px;
        margin: 0 0 20px;
    }

    .promo .but {
        margin-bottom: 32px;
        text-align: left;
    }

    .promo .pre {
        display: flex;
        gap: 25px;
    }
    .promo .pre .swiper {
        padding-bottom:20px;
    }
    .promo .pre .item {
        background: var(--black);
        padding: 16px;
        border-radius: 8px;
        flex-basis: 33.333%;
        display: flex;
        align-items: center;
        text-align: left;
    }

    .promo .pre .item .img {
        margin-right: 24px;
    }

    .promo .pre .item .subtitle {
        font-size: 20px;
        margin-bottom: 8px;
    }

    .promo .pre .item p {
        color: rgba(255, 255, 255, 0.8);
        text-align: left;
        margin: 0;
    }


    /*CATS*/

    .cats {
    padding: 15px 0;
}


    .cats h2 {
        text-align: left;
        font-weight: 400;
    }


        .breadcrumbs_wrapper {
        padding: 20px 0 0px;
    }
    .cats .item {
        background-size: cover;
        background-position: center center;
        width: 100%;
        height: 120px;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
    }

    .cats .item:before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 2;
        background: #00000082;
        display: block;

    }

    .cats .row {
        margin: 0 -5px;
    }

    .cats-page .row {
        margin:0;
    }

     .cats-page .row .row {
        margin:0 -15px;
    }

    .cats .col-lg-3 {
        padding: 5px;
    }

    .cats span {
        display: block;
        font-size: 20px;
        font-weight: 500;
        position: relative;
        z-index: 2;
        color: white;
    }


    /*WORDS*/

    .words {
        padding: 16px 0 4px;
        background: var(--gray);
        color: var(--gray-text);
        margin: 40px 0;
    }

    .words .fl {
        justify-content:flex-start
    }

    .words .subtitle {
        color: var(--black);
        flex-basis:100%;
        padding-bottom:15px;
    }

       .words .item {
           flex-basis:auto;
           margin-right:15px;
           padding-bottom:10px
       }


    /*PRE2*/

    .pre2 {}

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

    .pre2 .item {
        padding: 16px 0;
        border-bottom: 1px solid #eee;
        display: flex;
        align-items: center;
    }

    .pre2 img {
        margin-right: 24px;
    }


    /*PARAM*/

    .param {}

    .param .tabs-vert {
        max-width: 400px;
    }

    .param .tabs-vert .tab {
        padding: 16px 24px;
        color: #7a8596;
        position: relative;
    }

    .param .tabs-vert .tab.active,
    .param .tabs-vert .tab:hover {
        background: var(--gray);
        color: var(--black);
        cursor: pointer;
    }

    .param .tabs-vert .tab.active:after {
        position: absolute;
        content: '';
        right: 16px;
        top: 24px;
        width: 8px;
        height: 8px;
        background: var(--prime);
        border-radius: 50%;
    }

    .param .tab-item .row {
        margin: 0 -5px;
    }

    .param .tab-item .col-md-6 {
        padding: 5px;
    }

    .param .item {
        width: 100%;
        height: 132px;
        padding: 10px;
        background-size: cover;
        text-align: right;
    }

    .param .tab-item {
        display: none;
    }

    .param .item span {
        text-align: right;
        display: inline-flex;
        background: var(--prime);
        padding: 5px;
        color: white;
    }

    .param .colors {
        display: flex;
        flex-wrap: wrap;
        gap: 5px;
    }

    .param .colors .item {
        width: 56px;
        height: 56px;
        border: 1px solid transparent;
    }

    .param .colors .item .active {
        border: 1px solid var(--prime);
    }

    .param .color-name {
        width: 100%;
        padding: 16px;
        font-weight: bold;
        margin-bottom: 15px;
        text-align: center;
    }


    /*TEXT BLOCK*/

    .text-block {}

    .text-block .col-md-6 + .col-md-6 {
        padding-left: 15px;
    }

    .text-block img {
    width: 100%;
    margin-bottom: 30px;
}

    .text-block p {
        font-size: 15px;
        margin-bottom: 16px;
    }
    
    /*BIM*/

.bim {

}

.bim h1 {font-weight: 400;font-size: 40px;}

.bim bread ul li {

}

.bim .row {
    justify-content:space-between;
    width:100%;
}
.bim .but {margin-top: 30px;margin-bottom: 40px;}
.bim p {
    max-width:512px;
}

.bim-info .item {
    padding: 15px 0;
    border-top:2px solid transparent;
    border-bottom:2px solid #eee;
    transition: 0.5s;
    display: flex;
    flex-wrap: wrap;
}

.bim-info .item:first-child {
     border-top:2px solid #eee;
}


.bim-info .item:hover {
    border-color:gray;
}

.bim-info .text {
    max-width: 768px;
    font-size: 18px;
    margin-bottom: 40px;
}

.bim-info .num {
    font-size: 16px;
    color: var(--prime);
    min-width: auto;
    position: absolute;
}

.bim-info .subtitle {
    font-size: 18px;
    min-width:400px;
    padding-left: 40px;
}

.bim-info .info {
    color:#7a8596;
    font-size: 16px;
    flex-basis: 100%;
    padding-left: 40px;
    margin-top: 10px;
}

.bim-info .item:hover .info {
    color:var(--black);
}

.bim-info .item:hover .num {
    color:var(--prime)
}
.bim .bread {
    margin-bottom:20px;
    margin-top: 30px;
}
.bim .bread ul li a:after {
    filter:brightness(0)
}

.panels .item .name {
    font-size: 15px;
    line-height: 24px;
}
.panels .item {
    flex-basis: 100%;
    border: 1px solid transparent;
}

.panels .item img {
    width:48px;
}

.panels .item .item-in {
   border:1px solid #eee !important; 
   border-bottom:0 !important;
   margin-bottom:-2px;
}

.panels .item:last-child .item-in {
   border:1px solid #eee !important; 
   border-bottom:1px solid #eee !important;
}


}

/*END MOBILE*/