@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100..900&display=swap');

:root {
    --darkbrown: #423B3B;
    --lightbrown: #855B4D;
    --wood: #988164;
    --lightgrey: #f7f7f7;
    --darkgrey: #A6A6A6;
}


*{
	margin: 0px;
	padding: 0px;
	font-family: "Montserrat", sans-serif;
    background-repeat: no-repeat;
    color: var(--darkbrown);
}

img {border: none;}
a {
	outline: none;
	text-decoration: none;
}

h1, h2, h3, h4, h5, h6 {font-weight: 700;}
input, button, textarea {outline: none;}

h2 {
    font-size: 18px;
    margin: 40px 0 10px;
}

body {
    width: 100%;
    min-width: 1200px;
    height: 100%;
}

.div1140 {
    position: relative;
	width: 100%;
    max-width: 1140px;
    margin: auto;
}

.nobr {white-space: nowrap;}

/* ---------- LIST ---------- */
ul.list {margin: 20px 0 30px;}
ul.list li {
    display: block;
    position: relative;
    padding-left: 20px;
    margin-bottom: 20px;
}
ul.list li:last-child {margin-bottom: 0;}

ul.list.o_ul li::before,
ul.list.u_ul li::before {
    position: absolute;
    top: 8px;
    left: 4px;
    width: 4px;
    height: 4px;
    display: block;
    content: '';
    background-color: #fff;
}
ul.list.o_ul li::before {border-radius: 2px;}

ul.list.u_ul li::before {
    top: 7px;
    width: 8px;
    height: 8px;
    background-color: var(--lightbrown);
}

ul.list li b span {color: var(--lightbrown);}

/* ---------- FONT-WEIGHT ---------- */
.fw300 {font-weight: 300;}
.fw400 {font-weight: 400;}
.fw500 {font-weight: 500;}
.fw600 {font-weight: 600;}
.fw700 {font-weight: 700;}
.ital {font-style: italic;}

/* ---------- FLEX ---------- */
.fnw, .fw {display: flex;}

.fnw {flex-flow: row nowrap;}
.fw {flex-flow: row wrap;}

.fs {justify-content: flex-start;}
.fe {justify-content: flex-end;}
.sb {justify-content: space-between;}
.cc {justify-content: center;}

.fnw>*, .fw>* {align-self: center;}

/* ---------- GRID ---------- */
.grid {display: grid;}
.grid.col1 {grid-template-columns: minmax(0, 1fr);}
.grid.col2 {grid-template-columns: repeat(2, minmax(0, 1fr));}
.grid.col3 {grid-template-columns: repeat(3, minmax(0, 1fr));}
.grid.col4 {grid-template-columns: repeat(4, minmax(0, 1fr));}

.grid>.span2 {grid-column: span 2;}
.grid>.span3 {grid-column: span 3;}
.grid>.span4 {grid-column: span 4;}



@media screen and (min-width: 768px) {
    body:not(.main_page) .grid.col3:not(.content_items_block, .form_group) {
        grid-template-columns: minmax(340px, 20%) repeat(2, minmax(0, 1fr));
    }
}



/* ---------- OWL-NAVIGATION ---------- */
.owl-navigation {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
}
.owl-navigation>* {align-self: center;}

.owl-dots {
    order: 1;
    height: 30px;
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
}
.owl-dots button.owl-dot {
    position: relative;
    width: 30px;
    height: 30px;
    flex-shrink: 0;    
    margin-right: 20px;
    background: none;  
}
.owl-dots button.owl-dot::after {
    position: absolute;
    left: 0;
    top: 13px;
    width: 100%;
    height: 4px;
    content: '';
    background: rgba(255, 255, 255, 0.5);
    transition: 120ms ease-out;
}
.owl-navigation.white .owl-dots button.owl-dot::after {background: rgba(66, 59, 59, 0.5);}

@media screen and (min-width: 768px) {
    .owl-dots button.owl-dot:hover::after {background: rgba(255, 255, 255, 1);}
    .owl-navigation.white .owl-dots button.owl-dot::after {background: rgba(66, 59, 59, 1);}
}

.owl-dots button.owl-dot.active::after {
    top: 7px;
    height: 16px;
    background: rgba(255, 255, 255, 1);
}

.owl-navigation.white .owl-dots button.owl-dot.active::after {background: rgba(66, 59, 59, 1);}

.owl-navigation .nav_line {
    order: 2;
    width: 100%;
    height: 4px;
    background: #fff;
    margin: 0 10px;
}
.owl-navigation.white .nav_line {background: rgba(66, 59, 59, 1);}


.owl-nav {
    width: 80px;
    flex-shrink: 0;
    order: 3;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
}
.owl-nav>* {
    position: relative;
    width: 30px;
    height: 30px;    
    background: none;
    transition: 320ms ease-out;
}

.owl-nav>*::before {
    position: absolute;
    left: 10px;
    top: 5px;
    width: 12px;
    height: 20px;    
    background-image: url(../img/site/sprite.svg);
    background-position: 0px -547.5px;
    content: '';
}
.owl-nav>.owl-prev {transform: rotate(180deg);}
@media screen and (min-width: 768px) {.owl-nav>*:hover {background: #fff;}}










/* ///////////////// HEADER ///////////////// */
header {
    position: relative;
    z-index: 4;
}
body.main_page header {    
    grid-template-rows: minmax(0, 1fr) minmax(min-content, max-content);
    height: 400px;    
}

.logo_block,
.logo_text {place-self: center center;}

body.main_page header .logo_block a.logo,
body.main_page header .logo_text {
    opacity: 0;
    animation-timing-function: ease-in;
    animation: scale_in_small 460ms both;
    animation-delay: 120ms;
}



a.logo {
    width: 248px;
    height: 140px;
    display: block;
    background-image: url(../img/site/logo.svg);
    background-size: contain;
    background-position: center;
}

body.main_page header .logo_block {
    width: 60%;
    max-width: 420px;
    height: calc(100% - 50px);
    padding-bottom: 50px;
    display: flex;
    flex-flow: column;
    justify-content: center;
}

body.main_page header .logo_block a.logo {
    width: 100%;
    height: 0;
    padding-top: 56%;
}


.logo_text  {
    font-size: 14px;
    line-height: 16px;
    font-weight: 500;
    color: #a6a6a6;
    text-align: center;
}

.banner_block,
.header_line {grid-column: span 2;}
.banner_block {background-size: cover; background-position: center;}
.header_line {background-color: var(--darkbrown);}
.header_line * {color: var(--lightgrey);}

body.main_page .banner_block,
body.main_page .header_line {opacity: 0;}
body.main_page .banner_block,
body.main_page .header_line {animation: show_in_top 730ms both; animation-delay: 120ms;}

.banner_block .grad {
    width: calc(100% - 70px);
    height: calc(100% - 70px);
    padding: 50px 40px 20px 30px;
    background: linear-gradient(90deg, rgba(250,250,250,0.85), rgba(250,250,250,0));
}

.banner_block .grad .heading {line-height: 110%;}
.banner_block .grad a.pdf,
.banner_block .grad .modal_btn {
    height: 15px;
    font-size: 14px;
    line-height: 14px;
    font-weight: 500;
    color: #fff;
    padding: 11px 15px 10px;
    margin-right: 10px;
    background-color: var(--lightbrown);
    display: inline-block;
    margin-top: 10px;
    transition: 120ms;
    cursor: pointer;
}

.banner_block .grad .modal_btn{margin-right: 0;}

.banner_block .grad a.pdf:hover {background-color: var(--darkbrown);}

.banner_block .grad a.pdf span.icon {
    width: 12px;
    height: 14px;
    background-image: url(../img/site/sprite.svg);
    background-position: 0px -362px;
    display: inline-block;
    vertical-align: middle;
    margin-left: 4px;
}

.banner_block .grad .modal_btn svg {
    height: 14px;
    margin: 0 0 -2px 5px;
}







.banner_block .map {
    width: 100%;
    height: 100%;
    display: none;
}
.banner_block .map.map_openned {display: block;}




.header_line {padding: 16px 40px 16px 30px;}
.top_contacts {
    position: relative;
    width: 232px;
    flex-shrink: 0;
    height: 20px;    
}


.top_contacts .inner {
    position: absolute;
    right: 0;
    top: 0;
    padding-left: 20px;
    background-color: var(--darkbrown);
    z-index: 2;
}

.top_contacts .tel {
    font-size: 18px;
    line-height: 100%;
    font-weight: 700;
    margin-right: 20px;
    white-space: nowrap;
}
.top_contacts .mail {
    font-size: 14px;
    line-height: 100%;
    font-weight: 300;
    text-decoration: underline;
    text-decoration-color: var(--lightbrown);

}
.top_contacts .mail span:not(.alert) {    
    max-width: 0;
    width: auto;
    overflow: hidden;
    display: inline-block;
    white-space: nowrap;
    transition: 600ms 600ms ease-out;
    font-size: 14px;
    line-height: 120%;
    font-weight: 300;
    text-decoration: underline;
    text-decoration-color: var(--lightbrown);
}
.top_contacts .tg {margin-left: 10px;}

.top_contacts .mail svg {margin: 0 4px -1px 0;}
.top_contacts .tg svg {margin: 0 5px -2px 0;}
.top_contacts .mail svg path {transition: 600ms 600ms;}
.top_contacts .tg svg path {transition: 320ms;}


@media screen and (min-width: 768px) {
    .banner_block .grad a.pdf:hover,
    .banner_block .grad .modal_btn:hover {background-color: var(--darkbrown);}


    .top_contacts .mail:hover span:not(.alert)  {max-width: 200px; transition: 600ms 230ms ease-out;}
    .top_contacts .mail:hover svg path {stroke: var(--lightgrey); transition: 230ms 0ms;}
    .top_contacts .tg:hover svg path  {stroke: var(--lightgrey);}
}



span.alert {
    position: absolute;
    right: 0px;
    top: 150%;
    width: 190px;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 110%;
    font-weight: 400;
    color: var(--darkbrown);
    text-align: center;
    background-color: white;
    border-radius: 4px;
    border: 2px solid var(--wood);
    box-shadow: 0px 4px 23px rgba(0,0,0,0.12);
    z-index: 10;    
    animation: opacity_in 300ms both;
}
@keyframes opacity_in {
    0% {opacity: 0;}
    100% {opacity: 1;}
}










/* ---------- TOP_MENU ---------- */
.top_menu>* {margin-right: 30px;}
.top_menu>*:last-child {margin-right: 0;}

.top_menu>a,
.sub_menu_link .sub_menu a,
.sub_menu_link .sub_menu span.modal_btn,
.top_menu .sub_menu_link span:first-child {
    position: relative;
    font-size: 14px;
    line-height: 120%;
    font-weight: 500;
    color: var(--lightgrey);
    padding-bottom: 2px;
    cursor: pointer;
}

.top_menu>a,
.top_menu .sub_menu_link span:first-child {white-space: nowrap;}
.top_menu .sub_menu_link span:first-child {cursor: default;}


.top_menu>a::after,
.sub_menu_link .sub_menu a::after,
.sub_menu_link .sub_menu span.modal_btn::after,
.top_menu .sub_menu_link span:first-child::after {
    position: absolute;
    bottom: 0px;
    left: 0px;
    width: 0;
    height: 1px;
    background: #fff;
    display: block;
    content: '';
    transition: width 230ms ease-out, background 120ms ease-out 230ms;
}

.top_menu>a:hover::after, 
.top_menu .sub_menu_link:hover span:first-child::after {width: 100%; background: var(--lightbrown);}



.sub_menu_link .sub_menu a:hover::after {width: 100%;}
.sub_menu_link .sub_menu span.modal_btn:hover::after {width: 100%;}


.sub_menu_link {
    position: relative;
    cursor: default;
}
.top_menu .sub_menu_link span.icon {
    width: 11px;
    height: 8px;
    background-image: url(../img/site/sprite.svg);
    background-position: 0px 0px;
    margin-bottom: -2px;
    margin-left: 4px;
}
.sub_menu_link .sub_menu {
    position: absolute;
    left: -20px;
    top: 100%;
    width: 330px;
    height: auto;
    max-height: 0;    
    overflow: hidden;
    z-index: 9;
    transition: 320ms ease-out 120ms;
}

.sub_menu_link .sub_menu .inner {
    margin-top: 16px;
    padding: 20px;
    background: var(--lightbrown);
    box-shadow: 2px 2px 4px rgba(0,0,0,0.46); 
}

.sub_menu_link:hover .sub_menu {
    max-height: 200px;
    padding: 0 5px 5px 0;
    transition: 460ms ease-out 230ms;
}

.sub_menu_link .sub_menu a,
.sub_menu_link .sub_menu span.modal_btn {
    display: block;
    width: fit-content;
    font-weight: 400;
    line-height: 100%;
    margin-bottom: 10px;
}
.sub_menu_link .sub_menu a:last-child,
.sub_menu_link .sub_menu span.modal_btn:last-child {margin-bottom: 0;}


/* ///////////////// FIXED_HEADER ///////////////// */
.fixed_header {
    position: fixed;
    top: -100px;
    width: 100%;
    background-color: #fff;
    box-shadow: 0 2px 5px rgba(0,0,0,0.46);
    z-index: 8;
    transition: 460ms ease-out;
}
.fixed_header a.logo {
    width: 240px;
    height: 17px;
    background-image: url(../img/site/logo_short.svg);
}

.up_button {
    position: fixed;
    bottom: -200px;
    right: 30px;
    padding: 17px;
    background-color: var(--lightbrown);
    box-shadow: 0px 2px 6px 2px rgba(0,0,0,0.46);
    cursor: pointer;
    z-index: 10;
    transition: 460ms ease-out;
}
.up_button>span>span:not(.icon) {
    font-size: 14px;
    line-height: 100%;
    font-weight: 600;
    color: #fff;
    margin-right: 0;
    width: 0;
    opacity: 0;
    overflow: hidden;
    transition: width 200ms ease-out, margin 200ms ease-out, opacity 120ms ease-out 230ms;
}
.up_button>span>span.icon {
    width: 17px;
    height: 11px;    
    background-image: url(../img/site/sprite.svg);
    background-position: 0px -829px;
    transform: rotate(180deg);
}

@media screen and (min-width: 768px) {
    .up_button:hover>span>span:not(.icon) {
        width: 53px;
        margin-right: 8px;
        opacity: 1;
    }

    .b24-form-click-btn-wrapper-49 button.b24-form-click-btn-font-classic:hover,
    .telega_link:hover {background: var(--darkbrown) !important;}
}



.b24-form-click-btn-wrapper-49 {
    position: fixed;
    bottom: 30px;
    right: 200px;
    z-index: 6;
}

.b24-form-click-btn-wrapper-49 button.b24-form-click-btn-font-classic,
.b24-form-click-btn-wrapper-51 button {
    background: var(--lightbrown) !important;
    border: none !important;
    border-radius: 0 !important;
    height: auto !important;
    padding: 15px 23px;
    font-family: "Montserrat", sans-serif !important;
    font-size: 16px !important;
    line-height: 16px !important;
    font-weight: 500 !important;
    box-shadow: 0px 2px 6px 2px rgba(0,0,0,0.46) !important;
    transition: 120ms ease-out !important;
}




.b24-form-click-btn-wrapper-51 button {
    margin: 0 !important;
    padding: 12px 32px !important;
}

.b24-form-click-btn-wrapper-51 button.b24-form-click-btn-font-modern:hover {background-color: var(--darkbrown) !important;}



.telega_link {
    position: fixed;
    bottom: 30px;
    left: 30px;
    z-index: 8;
    background: var(--lightbrown);
    padding: 15px 23px;       
    box-shadow: 0px 2px 6px 2px rgba(0,0,0,0.46);
    transition: 120ms ease-out;
}
.telega_link span {
    font-size: 16px;
    line-height: 16px;
    font-weight: 500; 
    color: #fff;
    margin-right: 6px;
}





/* ///////////////// FP_TEXT ///////////////// */
.fp_text {   
    position: relative;   
    grid-auto-rows: minmax(min-content, max-content);
    z-index: 3;
    overflow: hidden;
}

.fp_text>* {
    opacity: 0;
    animation-timing-function: ease-out;
}

.fp_text .zavod_img {
    grid-row: span 3;
    min-height: 100%;
    background-image: url(../img/site/zavod_img.webp);
    background-size: cover;
    background-position: top center;
    filter: grayscale(1);
}

body.contacts .fp_text .zavod_img,
body.about .fp_text .zavod_img {
    grid-row: span 1;
    filter: grayscale(0);
}

body.about .fp_text .zavod_img.zavod_img2 {
    background-image: url(../img/site/zavod_img2.webp);
    border-top: 4px solid #f7f7f7;    
}
body.about .fp_text .zavod_img.zavod_img3 {
    background-image: url(../img/site/zavod_img3.webp);
    border-top: 4px solid #f7f7f7;    
}


.fp_text .empty {height: 140px;}

.fp_text .about_text,
.fp_text .digits,
.fp_text .empty {grid-column: span 2;}

.fp_text .zavod_img {animation: slide_in_left 600ms both; animation-delay: 230ms;}
.fp_text .about_text {animation: show_in_right 730ms both; animation-delay: 320ms;}
.fp_text .digits {animation: show_in_right 600ms both; animation-delay: 600ms;}

.fp_text .about_text {
    padding: 50px 40px 30px 30px;
    column-count: 2;
    column-gap: 30px;
    background-color: var(--lightgrey);
}
.fp_text .about_text>p:not(.parag_heading) {
    font-size: 16px;
    line-height: 150%;
    font-weight: 300;
    margin-bottom: 10px;
}


.fp_text .about_text p strong {font-weight: 500;}
.fp_text .about_text p:last-child {margin-bottom: 0;}




body.contacts:not(.about) .about_text {
    column-count: 1;
    column-gap: 0;
    padding-bottom: 100px;
}

body.about .about_text {
    column-count: 1;
    column-gap: 0;
    padding-bottom: 30px;
}
body.about .about_text:last-child {padding-bottom: 100px;}

body.about .about_text .heading {
    margin: 50px 0 10px;
    font-size: 23px;
    font-weight: 600;
}
body.about .about_text .heading:first-child {margin-top: 0;}

body.contacts .about_text>* {
    display: grid;
    grid-template-columns: auto;
    max-width: 960px;
}

body.about .about_text ul li>a {
    text-decoration: underline;
    color: var(--lightbrown);
    transition: 120ms ease-out;
    display: inline-block;
    margin-bottom: 5px;
}





body.contacts .about_text p.parag_heading {
    margin: 30px 0 10px;
    font-size: 18px;
    font-weight: 600;
}

body.contacts .about_text ul.o_ul li::before {background-color: var(--lightbrown);}
body.contacts .about_text ul.o_ul li span {
    font-weight: 500;
    cursor: pointer;
    text-decoration: underline;
}
body.contacts .about_text ul.o_ul li.map_openned span {display: none;}


body.contacts .about_text a.tel {
    font-size: 18px;
    font-weight: 700;
    color: var(--lightbrown);
}
body.contacts .about_text p.free_call {
    font-size: 14px;
    font-weight: 300;
}

body.contacts .about_text a.mail {    
    font-weight: 500;
    text-decoration: underline;
}


@media screen and (min-width: 768px) {
    .contacts .about_text ul.o_ul li span:hover,
    .contacts .about_text a.mail:hover {color: var(--lightbrown);}

    .contacts .about_text ul li>a:hover {
        color: var(--darkbrown);
        text-decoration-color: var(--lightbrown);
    }
}




.fp_text .digits {
    background: var(--darkgrey);
    padding: 20px 40px 20px 30px;
}
.fp_text .digits>* {
    position: relative;
    width: 25%;
}
.fp_text .digits * {color: #fff;}
.fp_text .digits p {
    font-size: 14px;
    line-height: 100%;
    text-align: center;    
}
.fp_text .digits p span {font-size: 16px;}
.fp_text .digits p strong {
    font-size: 32px;
    line-height: 120%;
    font-weight: 900;
}


.fp_text .digits>*::after {
    position: absolute;
    top: 10%;
    right: 0px;
    width: 1px;
    height: 80%;
    background: #fff;
    display: block;
    content: '';
}
.fp_text .digits>*:last-child::after {display: none;}



/* ///////////////// PROIZVODIM ///////////////// */
.heading {
    font-size: 32px;
    line-height: 100%;
    font-weight: 700;
}

h1.heading,
h2.heading {margin: 0 !important;}

.proizvodim {
    position: relative;
    background: var(--darkbrown);
    grid-gap: 4px;
    padding-bottom: 4px;
    z-index: 2;
    overflow: hidden;
}
.proizvodim .heading {
    padding: 90px 30px 20px;
    color: #fff;
    text-align: right;
}

.fp_text+.proizvodim {margin-top: -142px;}

.proizvodim a {
    position: relative;
    overflow: hidden;
    text-align: right;
    opacity: 0;
    animation-timing-function: ease-out;   
}

.proizvodim .jbi,
.proizvodim .blago {
    grid-row: span 2;
    height: 400px;
}


.proizvodim .jbi {width: calc(100% + 3px);}
.proizvodim .blago {width: calc(100% - 3px); left: 3px;}

.viewport.proizvodim .jbi {animation: slide_in_left 600ms both;}
.viewport.proizvodim .blago {animation: show_in_bottom 600ms both; animation-delay: 320ms;}
.viewport.proizvodim .vodo {animation: slide_in_right 600ms both; animation-delay: 600ms;}
.viewport.proizvodim .metall {animation: slide_in_right 600ms both; animation-delay: 750ms;}


.proizvodim a .image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    background-size: cover;
    background-position: center;
    transition: 600ms ease-out;
}
.proizvodim a .inner {
    position: absolute;
    width: calc(100% - 60px);
    height: calc(100% - 60px);
    padding: 30px;
    z-index: 1;
    transition: 600ms ease-out;
}
.proizvodim .jbi .inner {background: rgba(165, 165, 165, 0.8);}
.proizvodim .blago .inner {background: rgba(133, 91, 77, 0.8);}
.proizvodim .vodo .inner {background: rgba(255, 255, 255, 0.8);}
.proizvodim .metall .inner {background: rgba(186, 186, 186, 0.8);}

.proizvodim .inner h2 {
    font-size: 20px;
    line-height: 130%;
    font-weight: 600;
    color: #fff;
    margin: 0;
}

.proizvodim .vodo p, 
.proizvodim .metall p {text-align: left;}
.proizvodim .vodo p {color: var(--darkbrown);}

.proizvodim .button {
    font-size: 16px;
    line-height: 100%;
    color: #fff;
    margin-top: 40px;
    padding: 12px 32px;
    display: inline-block;
    background: var(--lightbrown);
    transition: 320ms ease-out;
}
.proizvodim .blago .button, 
.proizvodim .metall .button {
    color: var(--darkbrown);
    background: #fff;
}



@media screen and (min-width: 768px) {
    .proizvodim a:hover .image {
        position: absolute;
        top: -5%;
        left: -5%;
        width: 110%;
        height: 110%;
    }
    .proizvodim .button:hover {padding: 12px 46px;}

    .proizvodim .jbi:hover .inner {background: rgba(186, 186, 186, 0.5);}
    .proizvodim .blago:hover .inner {background: rgba(133, 91, 77, 0.6);}
    .proizvodim .vodo:hover .inner {background: rgba(255, 255, 255, 0.6);}
    .proizvodim .metall:hover .inner {background: rgba(186, 186, 186, 0.5);}
}






/* ///////////////// PROJECTS ///////////////// */
.projects {
    background: var(--darkbrown);
    padding: 60px 0;
    grid-gap: 30px;
    overflow: hidden;
}
.projects * {color: #fff;}

.projects .left_col {
    opacity: 0;
    animation-timing-function: ease-out;
}
.viewport.projects .left_col {animation: slide_in_left 600ms both;}


.projects .left_col {
    position: relative;
    left: 24px;
    padding: 20px 0 20px 40px;    
    border-right: 4px solid #fff;
    text-align: right;
    justify-self: end;
    width: fit-content;
    display: flex;
    flex-flow: column;   
}
.projects .left_col>* {align-self: flex-end;}

.projects .left_col .heading {margin-right: 30px;}
.projects .left_col>p {
    max-width: 400px;
    font-size: 16px;
    line-height: 130%;
    margin: 30px 30px 50px 0;
}

.projects .left_col .tab_links {
    width: fit-content;
    display: flex;
    flex-flow: column;
}
.projects .left_col .tab_links>* {
    align-self: flex-end;
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-end;   
    width: fit-content; 
    padding: 12px 30px;
    border-bottom: 1px solid rgba(255,255,255,0);
    margin-bottom: 20px;
    font-size: 16px;
    line-height: 100%;
    font-weight: 300;
    transition: 320ms ease-out;
    cursor: pointer;
    user-select: none;
}

.projects .left_col .tab_links>* .icon {
    width: 15px;
    height: 10px;    
    background-image: url(../img/site/sprite.svg);
    background-position: -1px -56px;
    align-self: center;
    margin-left: 5px;
    transition: 320ms ease-out;
}

.projects .left_col .tab_links .active {
    background: #fff;
    border: none;    
    font-weight: 700; 
    color: var(--darkbrown);   
    cursor: default;
}

.projects .left_col .tab_links .active .icon {
    width: 0;
    margin: 0;
}

@media screen and (min-width: 768px) {
    .projects .left_col .tab_links>*:not(.active):hover {
        padding: 12px 20px 12px 30px;
        border-bottom: 1px solid rgba(255,255,255,1);
    }
    .projects .left_col .tab_links>*:not(.active):hover .icon {margin-left: 15px;}
}



.projects .right_col {
    position: relative;
    grid-column: span 2;
    margin-left: -6px;
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
    align-items: flex-start;
}

.projects_items {
    position: absolute;
    left: 0; top: 20px;    
    width: 100%;
    max-width: 1230px;
    background: var(--darkbrown);
    overflow: hidden; 
    visibility: hidden;
    opacity: 0;
    display: flex;
    flex-flow: column;
    justify-content: space-between;
}
.projects_items.owl-carousel.owl-loaded {display: flex;}

.viewport.projects .projects_items.active {
    visibility: visible; opacity: 1;
    animation: show_in_right 600ms both;
}
.projects_items .owl-stage-outer {width: calc(100% - 2px);}


/* --- TAB1 / TAB2 --- */
.projects_items .p_item {
    width: calc(100% - 53px);
    padding: 0 26px 0 26px;
    border-right: 1px solid #fff;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 20px;
}

.projects_items .p_item div {
    position: relative;
    overflow: hidden;
}

.projects_items .p_item p.name,
.projects_items .p_item .big_img {grid-column: span 2;}
.projects_items .p_item .img {
    width: 100%;
    padding-top: 59%;
    background-size: cover;
    background-position: center;
}

.projects_items .p_item p.name {
    font-size: 18px;
    line-height: 120%;
    font-weight: 600;
    padding: 10px 0 0;
}

.projects_items .owl-item:nth-child(even) .p_item p.name {
    padding: 0 0 10px;
    grid-row: 3/4;
}
.projects_items .owl-item:nth-child(even) .p_item .big_img {grid-row: 1/2;}

.projects_items .p_item span.modal_btn {
    position: absolute;
    bottom: 10px;
    right: -100px;
    width: 40px;
    height: 40px;
    background-color: var(--lightbrown);
    background-image: url(../img/site/sprite.svg);
    background-position: 7px -610px;
    opacity: 0.8;
    transition: all 320ms ease-out 120ms, opacity 120ms;
    cursor: pointer;
}
.projects_items .p_item span.modal_btn:hover {opacity: 1;}



.projects_items .owl-navigation {
    position: relative;
    margin: 20px 0 0 26px;
    width: calc(100% - 54px);
}

.projects_items a.reference_list {
    order: 4;
    width: 120px;
    flex-shrink: 0;
    font-size: 14px;
    line-height: 100%;
    text-decoration: underline;
    text-decoration-color: var(--lightbrown);
    margin-left: 10px;
    transition: 230ms ease-out;
}



@media screen and (min-width: 768px) {
    .projects_items .p_item div:hover span.modal_btn {right: 10px;}
    .projects_items a.reference_list:hover {text-decoration-color: white;}
}



/* --- TAB3 --- */
/* .projects_items#tab2,
.projects_items#tab3,
.projects_items>.inner {height: 100%;}


.pit_head,
.p_item_table {
    width: calc(100% - 66px);    
    padding: 0 40px 0 26px;    
}

.pit_head * {
    font-size: 18px;
    line-height: 100%;
    font-weight: 500;
    padding: 10px 0;
}

.pit_body {
    height: calc(100% - 38px);
    display: flex;
    flex-flow: column;
    justify-content: space-between;
}

.projects_items#tab3 .owl-stage-outer {
    width: 100%;
    height: calc(100% - 50px);
}
.projects_items#tab3 .owl-stage,
.projects_items#tab3 .owl-item {height: 100%;}



.pit_head, 
.pit_row {
    display: grid;
    grid-template-columns: 96px auto 30%;
    grid-gap: 20px;
} 
.p_item_table {
    display: flex;
    flex-flow: column;
    justify-content: space-between;
}

.pit_row {
    position: relative;
    padding: 10px 0;
}
.pit_row * {
    align-self: center;
    font-size: 16px;
    line-height: 130%;
}

.zakazchik * {margin-bottom: 5px;}

.pit_row .year {font-weight: 600;}
.pit_row .text {font-weight: 300;}
.pit_row .name {font-weight: 600;}
.pit_row .city {font-weight: 300;}
.pit_row .val {font-weight: 300; margin-bottom: 0;}
.pit_row .val span {font-weight: 500;}




.p_item_table .sep {
    width: 100%;
    height: 1px;
    background-image: url(../img/site/dot.svg);
    background-repeat: repeat-x;
}

 */


/* ///////////////// SERTS ///////////////// */
.serts_block .serts {
    grid-column: span 2;
    grid-row: span 3;
    background-image: url(../img/site/sert_back.webp);
    background-size: cover;
    background-position: center;
}
.serts_block .serts * {color: #fff;}
.serts_block .serts .inner {
    width: calc(85% - 37px);
    height: calc(100% - 160px);
    padding: 80px 37px 80px 15%;
    background-color: rgba(133,91,77,0.9);
}

.serts_block .serts .heading {margin-bottom: 30px;}
.serts_block .serts p {
    font-size: 16px;
    line-height: 130%;
    font-weight: 400;
    margin-bottom: 10px;
}

.serts_block .serts_items {
    margin-top: 40px;
    grid-gap: 30px;
}







.serts_block .serts_items>* {
    position: relative;
    border: 4px solid #fff;
    box-shadow: 2px 2px 6px rgba(0,0,0,0.23);
    opacity: 0;
    animation-timing-function: ease-out;
}

.serts_block .serts_items .img {
    width: 100%;
    padding-top: 140%;
    background-size: cover;
    background-position: center;
}

.viewport.serts_block .serts_items>* {animation: show_in_bottom 320ms both;}


.serts_block .serts_items img {
    width: 100%;
    margin-bottom: -5px;
}
.serts_block .serts_items .zoom {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(133,91,77,0.7);
    background-image: url(../img/site/zoom.svg);
    background-position: right bottom;
    opacity: 0;
    cursor: pointer;
    transition: 320ms ease-out;
}

@media screen and (min-width: 768px) {
    .serts_block .serts_items>*:hover .zoom {opacity: 1; background-position: center;}
}

.serts_block .lab_img {
    background-size: cover;
    background-position: center;
}





/* ///////////////// BLOG ///////////////// */
.blog_block {
    width: calc(100% - 80px);
    padding: 80px 40px;
    background: #332d2d;
}
.blog_block * {color: #fff;}

.blog_block .heading_line {margin-bottom: 40px;}

.blog_block .heading_line .heading {
    width: 195px;
    flex-shrink: 0;
    margin-right: 40px;
}

.blog_block .heading_line .navigation_block {
    width: 100%;
    align-self: stretch;
}
.blog_block .heading_line a.blog_link {
    width: 135px;
    flex-shrink: 0;
    margin-left: 30px;
}

.blog_block .heading_line a.blog_link span:first-child {    
    font-size: 16px;
    line-height: 100%;
    font-weight: 700;
    padding-bottom: 2px;
    border-bottom: 1px dashed #fff;
}
.blog_block .heading_line a.blog_link span.icon {
    width: 12px;
    height: 12px;
    display: inline-block;
    vertical-align: middle;    
    background-image: url(..//img/site/sprite.svg);
    background-position: 0px -116px;
    margin-left: 8px;
    margin-bottom: 3px;
}




.blog_items {position: relative;}

.blog_items .slide {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
}



.news {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 60px 40px;
    padding: 0 40px 200px;
}

.blog_items .item,
.news .item {
    width: 100%;
    display: flex;
    flex-flow: column;
    justify-content: flex-start;
}


.blog_items .item_heading,
.news .item_heading {
    height: 55px;
    font-size: 18px;
    line-height: 100%;
    font-weight: 600;
    display: flex;
    flex-flow: column;
    justify-content: flex-end;
    margin-bottom: 10px;
}

.blog_items .item .image.owl-lazy,
.news .item .image {
    width: calc(100% - 20px);
    padding-top: 65%;
    background-size: 105% auto;
    background-position: center;
    display: block;
    border: 10px solid #fff;    
    margin-bottom: 10px;    
    transition: 320ms ease-out, opacity 400ms ease-out, background-size 1200ms ease-out;
}

.news .item .image {box-shadow: 3px 3px 8px rgba(0,0,0,0.23);}

.blog_items .item .text,
.news .item .text {
    height: 70px;
    font-size: 15px;
    line-height: 120%;
    font-weight: 300;
    margin-bottom: 20px;
    text-align: right;
}

.news .item .text {margin-bottom: 0;}

.blog_items .item .read_more,
.news .item .read_more {
    position: relative;
    display: block;
    width: fit-content;
    align-self: flex-end;
    font-size: 14px;
    line-height: 100%;
    font-weight: 600;
    padding: 7px 23px;
    transition: 230ms ease-out;
    z-index: 2;
}



.blog_items .item .read_more span,
.news .item .read_more span {
    width: 15px;
    height: 10px;
    display: inline-block;
    vertical-align: middle;    
    background-image: url(../img/site/sprite.svg);    
    background-position: 0px -56px;
    margin-left: 6px;
    transition: margin 230ms ease-out;
    z-index: 2;
}

.news .item .read_more span {background-position: 0 -949px;}

.blog_items .item .read_more::before,
.news .item .read_more::before {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    padding: 0;
    background: var(--lightbrown);
    display: block;
    content: '';
    transition: 230ms ease-out;
    z-index: -1;
}


.pagination {
    position: relative;
    left: 40px;
    top: -80px;
    max-width: calc(100% - 80px);
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;
}

.pagination>* {
    display: block;
    margin-bottom: 20px;
}

.pagination>*:not(.disabled) a,
.pagination>*:not(.disabled) span {
    padding: 5px 10px;
    background-color: var(--lightbrown);
    color: white;
}
.pagination>*:not(:last-child) {margin-right: 10px;}


.pagination>.disabled a,
.pagination>.disabled span {
    padding: 5px 10px;
    background-color: var(--lightgrey);
    color: var(--darkbrown);
}




@media screen and (min-width: 768px) {
    .blog_block .heading_line a.blog_link:hover span:first-child {border-bottom: 1px solid #fff;}
    .blog_items .item:hover .image,
    .news .item:hover .image {border: 10px solid var(--lightbrown); background-size: 125% auto;}  
    .blog_items .item .read_more:hover,
    .news .item .read_more:hover {padding: 7px 19px 7px 23px;}
    .news .item .read_more:hover {color: white;}
    .blog_items .item .read_more:hover span,
    .news .item .read_more:hover span {margin-left: 10px;}
    .news .item .read_more:hover span {background-position: 0px -56px;}
    .blog_items .item .read_more:hover::before,
    .news .item .read_more:hover::before {height: 100%;}

    .blog_items .owl-navigation {
        position: absolute;
        top: -70px;
        left: 235px;
        width: calc(100% - 235px);
    }

    .blog_items .owl-navigation .owl-nav {order: 1; margin-right: 30px;}
    .blog_items .owl-navigation .owl-dots {order: 2;}
    .blog_items .owl-navigation .nav_line {order: 3; margin-right: 0;}

    .pagination>*:not(.disabled):hover a,
    .pagination>*:not(.disabled):hover span {background-color: var(--darkbrown);}
    
}


/* ///////////////// DIALER_MAP_BLOCK ///////////////// */
.dealer_block {
    background: var(--darkbrown);
    overflow: hidden;
}

.dealer_map,
.dealer_list_block {height: 600px;}

.dealer_map {
    opacity: 0;
    grid-column: span 2;
}
.dealer_block.viewport .dealer_map {animation: opacity_in 730ms both;}
.dealer_map iframe {filter: hue-rotate(194deg) saturate(0.5);}



.dealer_list_block>.inner {       
    height: calc(100% - 90px);
    padding: 40px 40px 50px 40px;
}

.dealer_block .heading_line {margin-bottom: 40px;}
.dealer_block .heading_line .heading {
    color: #fff;
    white-space: nowrap;
}
.dealer_block .heading_line span {
    width: 100%;
    height: 4px;
    background: #fff;
    margin-left: 30px;
}


.dealer_list {
    opacity: 0;
    height: calc(100% - 72px);
    overflow-y: scroll;
    border-right: 1px solid #fff;
}
.dealer_block.viewport .dealer_list {animation: show_in_right_big 600ms both; animation-delay: 320ms;}

.dealer_list::-webkit-scrollbar {width: 10px;}
.dealer_list::-webkit-scrollbar-track {background: transparent;}
.dealer_list::-webkit-scrollbar-thumb {
    background: #fff;
    transition: 320ms ease-out;
}
.dealer_list::-webkit-scrollbar-thumb:hover {background: var(--wood);}



.dealer_list * {color: #fff;}

.dealer_list .rayon {margin-bottom: 60px;}
.dealer_list .rayon>.heading {
    width: 85%;
    font-size: 23px;
    font-weight: 600;
    color: var(--wood);
    margin-bottom: 20px;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--wood);
}

.dealer_item {margin-bottom: 30px;}
.dealer_item .heading {
    font-size: 18px;
    font-weight: 600;  
    color: var(--lightbrown);
    margin: 4px 0;
}

.dealer_item .city {
    font-size: 16px;
    font-weight: 500;   
}

.dealer_item .adress {
    font-size: 14px;
    font-weight: 300;
    margin-bottom: 2px;
}
.dealer_item .phone {
    font-size: 16px;
    font-weight: 600;
}
.dealer_item .mail,
.dealer_item .site {
    font-size: 14px;
    font-weight: 400;
    text-decoration: underline;
    text-decoration-color: var(--wood);
    transition: 230ms ease-out;
}

.dealer_item .site,
.dealer_item .mail,
.dealer_item .phone {
    margin-right: 5px;
    white-space: nowrap;
}




@media screen and (min-width: 768px) {
    .dealer_item .mail:hover,
    .dealer_item .site:hover {color: var(--lightbrown);}
}




/* //////////////// VISUALIZATOR BANNER ////////////////////// */
.vis_banner {overflow: hidden;}
.vis_banner_image {
    position: relative;
    grid-column: span 2;
    background-color: #938B8B;
    overflow: hidden;
}

.vis_banner_image p {
    position: absolute;
    right: 0px;
    top: 0px;
    font-size: 32px;
    line-height: 36px;
    font-weight: 700;
    text-transform: uppercase;
    text-align: right;
    color: #fff;
    width: 50%;
    max-width: 600px;
    z-index: 3;
    background-color: rgba(133,91,77,0.7);
    padding: 40px;
}
.vis_banner_image::after {
    position: absolute;
    left: 0;    
    content: '';
}

.vis_banner_image::after {      
    bottom: 0;
    width: 110%;
    height: 90%;
    background-image: url(../img/site/house2.webp);
    background-size: auto 100%;
    background-position: right bottom;
    background-repeat: no-repeat;
    z-index: 4;
}



.vis_banner_form {background-color: #f7f7f7;}


.vis_banner_form>.inner {       
    height: calc(100% - 90px);
    padding: 40px 40px 50px 40px;
}
.vis_banner_form>.inner>p {margin: 20px 0 30px;}



/* ///////////////// PARTNERS ///////////////// */
.partners_block {
    width: calc(100% - 80px);
    padding: 60px 40px 80px;
}

.partners_block .heading {
    text-align: center;
    margin-bottom: 30px;
}

.partners {padding-bottom: 40px;}
.partners .owl-navigation {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
}
.partners .owl-item img.owl-lazy {
    width: 100%;
    /* filter: grayscale(100%); */
    transition: 320ms ease-out, opacity 400ms ease-out;
}


@media screen and (min-width: 768px) {
    /* .partners .owl-item img.owl-lazy:hover {filter: grayscale(0);} */

    .partners .owl-navigation .owl-nav {margin: 0 30px 0 20px;}
    .partners .owl-navigation .owl-dots {order: 2;}
    .partners .owl-navigation .nav_line {
        order: 1;
        margin: 0 30px 0 0;
    }
    .partners .owl-navigation .nav_line.nav_line2 {
        order: 4;
        margin: 0;
        width: 150px;
    }
    
}



/* ///////////////// FOOTER ///////////////// */
footer {
    position: relative;
    width: calc(100% - 80px);
    padding: 0 40px;
    background: var(--darkbrown);
    grid-template-columns: minmax(max-content, 30%) auto minmax(min-content, 30%);
    grid-gap: 0 40px;
    z-index: 9;
}
footer * {color: #fff;}

footer .logo_block {
    position: relative;
    width: calc(100% - 60px);
    height: 100%;
    padding: 0 30px 37px;
    align-self: end;
    margin-bottom: -37px;
    display: flex;
    flex-flow: column;
    justify-content: center;
    background-color: #fff;
    z-index: 1;
}
footer .logo_block .logo {margin: auto;}

.bottom_menu {padding: 60px 0 50px;}
.bottom_menu .prod_menu_items {
    max-width: 350px;
    margin-right: 40px;
}
.bottom_menu .main_menu_items {max-width: 200px;}
.bottom_menu .prod_menu_items>*,
.bottom_menu .main_menu_items>* {
    display: block;
    margin-bottom: 15px;
    font-size: 16px;
    font-weight: 400;
    line-height: 100%;
    text-decoration: underline;
    text-decoration-color: var(--lightbrown);
}
.bottom_menu .prod_menu_items span {
    text-decoration: none;
    font-weight: 600;
}

.bottom_menu .prod_menu_items>*:hover,
.bottom_menu .main_menu_items>*:hover {text-decoration-color: #fff;}

footer .contacts_block {
    width: calc(100% - 60px);
    padding: 40px 30px 100px;
    background: var(--lightbrown);
}

footer .contacts_block .tel {
    font-size: 23px;
    font-weight: 700;
    margin-bottom: 20px;
}


footer .contacts_block .mail,
footer .contacts_block .tg {
    display: block;
    margin-top: 6px;
}

footer .contacts_block .tg {margin-top: 10px;}

footer .contacts_block .mail span,
footer .contacts_block .tg span {
    font-size: 16px;
    font-weight: 400;    
    border-bottom: 1px solid #fff;
    transition: 230ms ease-out;
}



footer .contacts_block .mail:hover span,
footer .contacts_block .tg:hover span {border-bottom: 1px solid #332d2d;}

footer .contacts_block .mail svg {margin: 0 7px -6px 0;}
footer .contacts_block .tg svg {margin: 0 6px -5px 0;}
footer .contacts_block .mail path {stroke: #fff;}

footer .contacts_block p.adress {
    margin: 30px 0 20px;
    font-size: 16px;
}
footer .contacts_block p.adress span.icon {
    display: inline-block;
    width: 12px;
    height: 16px;    
    background-image: url(../img/site/sprite.svg);
    background-position: 0px -177px;
    margin: 0 8px -1px 0;
}
footer .contacts_block ul.list li {
    font-size: 16px;
    font-weight: 300;
}

footer .foot_line {
    position: relative;
    z-index: 2;
    height: 15px;
    font-size: 12px;
    font-weight: 300;
    padding: 10px 0 12px;
    color: #938B8B;
}
footer .foot_line * {color: #938B8B;}

footer .foot_line3 {
    padding: 10px 40px 12px;
    text-align: right;
    background-color: #66463b;
    color: #AB7F70;
}
footer .foot_line3 a {
    color: #AB7F70;
    text-decoration: underline;
    transition: 230ms ease-out;
}
footer .foot_line3 a:hover {color: #fff;}


footer .bottom_line {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 37px;
    background: #332d2d;
    z-index: 0;
}






/* ////////////////////////////////////////// 
///////////////// CONTENT ///////////////////
////////////////////////////////////////// */


/* ///////////////// FILTER ///////////////// */
.filter_block {background-color: #F7F7F7;}

.filter_big_group>.heading {
    position: relative;
    width: calc(100% - 40px);
    padding: 20px 20px 17px;
    background-color: #E7E7E7;
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;  
    cursor: default; 
    transition: 320ms ease-out;     
}

.filter_big_group.expand>.heading {background-color: var(--darkbrown); cursor: pointer;}
.filter_big_group.expand.active>.heading {background-color: #E7E7E7;}

.filter_big_group>.heading p {
    font-size: 18px;
    line-height: 100%;
    font-weight: 700;
    color: var(--darkbrown);
    text-align: center;
}

.filter_big_group.expand>.heading p {max-width: calc(100% - 46px); color: #fff;}
.filter_big_group.expand.active>.heading p {color: var(--darkbrown);}

.filter_big_group.expand>.heading span {
    position: absolute;
    top: 50%;        
    right: 20px;
    width: 18px;
    height: 12px;
    transform: translateY(-50%) rotate(180deg);
}
.filter_big_group.expand>.heading span svg {
    position: absolute;
    top: 0; left: 0;
}
.filter_big_group.expand.active>.heading span {transform: translateY(-50%) rotate(0deg);}
.filter_big_group.expand.active>.heading span svg path {stroke: var(--darkbrown);}



.filter_big_group .filter_items {
    width: calc(100% - 40px);
    max-width: 460px;
    margin: 15px auto 0;
    transition: 460ms ease-out;
}
.filter_big_group.expand .filter_items {
    max-height: 0;
    margin: 0 auto 0;
    overflow: hidden;
}
.filter_big_group.expand.active .filter_items {
    max-height: 1500px;
    margin: 15px auto 0;
}


.filter_big_group .f_item {
    width: calc(100% - 20px);
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
    padding: 7px 10px;
    border-bottom: 1px dashed #A6A6A6;
    transition: 230ms ease-out;
    cursor: pointer;
}
.filter_big_group .f_item:last-child,
.filter_items .color_group:last-child {
    border-bottom: 1px dashed transparent;
    margin-bottom: 20px;
}
.filter_big_group .f_item>* {align-self: center;}

.filter_big_group .f_item.active {
    background-color: #fff;
    border-bottom: 1px solid var(--lightbrown);
}


.filter_big_group .f_item .image {
    width: 75px;
    height: 32px;
    flex-shrink: 0;
    background-size: contain;
    background-position: center;
    margin-right: 20px;
}

.filter_big_group.vodo .f_item .image,
.filter_big_group.jbi .f_item .image,
.filter_big_group.metall .f_item .image {
    width: 70px;
    height: 46px;    
}


.filter_big_group .f_item span {
    font-size: 16px;
    line-height: 100%;
    font-weight: 400;
    color: var(--darkbrown);
    text-decoration: underline;
    transition: 320ms ease-out;
}

.filter_big_group .f_item.active span {
    color: var(--lightbrown);
    font-weight: 600;
    text-decoration: none;
}


.filter_items .color_group {
    border-bottom: 1px dashed #A6A6A6;
    margin-top: 15px;
    padding-bottom: 10px;
}
.filter_items .color_group .cg_name {
    grid-column: span 2;
    font-size: 18px;
    line-height: 100%;
    font-weight: 600;
    margin-bottom: 5px;
}
.filter_items .color_group .f_item, 
.filter_items .color_group .f_item:last-child {
    border: none;
    padding: 0;
    margin: 10px 0 0 0;
}
.filter_items .color_group .f_item:nth-child(odd) {justify-self: end;}

.filter_items .color_group .f_item .image {
    width: 40px;
    height: 40px;
    margin-right: 6px;
}


@media screen and (min-width: 768px) {
    .filter_big_group.expand:not(.active)>.heading:hover {background-color: var(--lightbrown);}

    .filter_big_group .f_item:not(.active):hover {
        background-color: #fff;
        border-bottom: 1px solid var(--lightbrown);
    }
    .filter_items .color_group .f_item:not(.active):hover {border: none;}
    .filter_big_group .f_item:not(.active):hover span {color: var(--lightbrown);}
}


/* ///////////////// CONTENT ///////////////// */
.content_block {
    position: relative;
    grid-column: span 2;
    background-color: #726D6D;
}
.content_block .inner {
    position: sticky;
    top: 0;
}

.content_group {padding-top: 15px;}
.content_group.blago {
    padding-top: 20px;
    background-color: var(--lightbrown);
}
.content_group.color_series {
    padding-top: 0;
    margin-top: -4px;
}
/* .content_group.forms {padding-bottom: 4px;} */
.content_group.forms,
.content_group.color_series {background-color: #726D6D;}


.content_block .heading_line {
    width: calc(100% - 70px);
    padding: 0 40px 10px 30px;
}
.content_block .heading_line * {color: #fff;}

.content_group.blago .heading_line {margin-bottom: 15px;}

.content_block .heading_line .heading {
    font-size: 21px;
    padding: 4px 0 3px;
    text-transform: uppercase;
    margin: 0 0 1px;
}
body.colors .content_block .heading_line .heading {margin-bottom: 4px;}
.content_group.color_series .heading {
    text-transform: none;
    font-weight: 600;
}

.content_group.color_series .text {
    width: calc(100% - 60px);
    padding: 30px;
    display: flex;
    flex-flow: column;
    justify-content: center;
    background-color: var(--lightgrey);
}

.content_group.color_series .heading {
    margin-bottom: 20px;
    font-size: 23px;
    color: var(--lightbrown);
    
}
.content_group.color_series .text p {
    color: var(--darkbrown);
    font-size: 16px;
    line-height: 21px;
    font-weight: 400;
}

.content_block .heading_line a.heading {border-bottom: 1px solid var(--darkbrown);}

.content_block .heading_line .sub_heading {
    text-transform: none;
    font-size: 18px;
    line-height: 120%;
    font-weight: 400;
    display: block;
    margin-top: 12px;
}

.content_block .heading_line .sub_heading a.tel {
    color: var(--lightbrown);
    font-weight: 600;
}

.content_block .heading_line .sub_heading span.modal_span {
    text-decoration: underline;
    text-decoration-color: var(--lightbrown);
    font-weight: 500;
    cursor: pointer;
}


.content_block .heading_line .show>p {
    font-size: 16px;
    line-height: 100%;
    font-weight: 500;
    padding-bottom: 3px;
    margin-right: 10px;
}
.content_block .heading_line .show>span {
    border-bottom: 1px solid #fff;
    padding: 0 10px;
}
.content_block .heading_line .show>span a {
    position: relative;
    font-size: 16px;
    line-height: 100%;
    font-weight: 300;
    padding: 4px 10px 8px;
    margin-right: 5px;
}
.content_block .heading_line .show>span a:last-child {margin-right: 0;}
.content_block .heading_line .show>span a.active {font-weight: 600;}

.content_block .heading_line .show>span a span {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 0;
    background: #fff;
    transition: 120ms ease-out;
}

.content_block .heading_line .show>span a.active span {height: 4px;}
@media screen and (min-width: 768px) {
    .content_block .heading_line .show>span a:not(.active):hover span {height: 1px;}
    .content_block .heading_line a.heading:hover {color: var(--lightbrown); border-bottom: 1px solid var(--lightbrown);}
    .content_block .heading_line .sub_heading span.modal_span:hover {color: var(--lightbrown);}
}


.content_items_block {
    width: calc(100% - 8px);
    padding: 4px;
    grid-gap: 4px;
}


.content_items_block .blago_item {
    position: relative;
    padding-top: 85%;
    cursor: pointer;
    background-size: cover;
    background-position: center;
}
.content_items_block .blago_item.span2 {
    grid-column: span 2;
    padding-top: 42.5%;
}
.content_items_block .blago_item .grad {
    position: absolute;
    left: 0;
    bottom: 0;
    width: calc(100% - 52px);
    padding: 50px 26px 30px;
    background: linear-gradient(rgba(66, 59, 59, 0), rgba(66, 59, 59, 0.8) 70%, rgba(66, 59, 59, 1));
    transition: 320ms ease-out 120ms;
}

.content_items_block .blago_item .grad * {color: #fff;}
.content_items_block .blago_item .grad .name {
    font-size: 18px;
    line-height: 100%;
    font-weight: 700;
}
.content_items_block .blago_item .grad .info,
.content_items_block .blago_item .grad .seriya {
    font-size: 16px;
    line-height: 100%;
    font-weight: 300;
    margin: 0;
    overflow: hidden;
    max-height: 0;
    transition: 320ms ease-out 120ms;
}




.content_items_block .blago_item .grad .bttns {
    width: calc(100% + 24px);
    margin-left: -12px;
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
    overflow: hidden;
    max-height: 0;
    transition: 320ms ease-out 120ms;
}

.content_items_block .blago_item .grad .bttns * {
    font-size: 14px;
    line-height: 100%;
    font-weight: 400;
    text-align: center;
    padding: 7px;
    border: 1px solid #fff; 
    transition: 230ms ease-out;   
}

.content_items_block .blago_item .grad .order_btn {
    padding: 7px 12px;
    margin-right: 10px;
    background-color: var(--lightbrown);
    border: 1px solid var(--lightbrown);   
}

@media screen and (min-width: 768px) {
    .content_items_block .blago_item:hover .grad {padding: 60px 26px 30px;}
    
    .content_items_block .blago_item:hover .grad .seriya,
    .content_items_block .blago_item:hover .grad .info,
    .content_items_block .blago_item:hover .grad .bttns {max-height: 50px;}

    .content_items_block .blago_item:hover .grad .seriya {margin: 0 0 6px;}
    .content_items_block .blago_item:hover .grad .info {margin: 6px 0 15px;}

    .content_items_block .blago_item .grad .order_btn:hover {
        background-color: var(--darkbrown);
        border: 1px solid var(--darkbrown);    
    }
    .content_items_block .blago_item .grad span:hover {
        background-color: #fff;
        color: var(--darkbrown);
    }
}





/* --- VODO_JBI --- */
.vodojbi_item {
    
    background-color: #fff;
    padding: 30px 30px 40px;
}

.vodojbi_item.col2_item {padding-bottom: 40px;}


.vodojbi.grid.col3 .vodojbi_item.col2_item {padding: 20px;}

.vodojbi_item.flex {
    display: flex;
    flex-flow: column;
    justify-content: space-between;
}
    
.vodojbi.grid.columns .vodojbi_item.col2_item .image_block {grid-template-columns: 1fr;}
.vodojbi.grid.columns .vodojbi_item.col2_item.zveniya .heading_block {height: 90px;}


.vodojbi_item.col2_item:not(.fullWidth)>* {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
}


.vodojbi_item .image_block.grid:not(.col2) {
    grid-template-columns: minmax(200px, 20%) minmax(auto, 900px);
    grid-template-rows: minmax(0, 1fr) minmax(min-content, max-content);
    grid-gap: 30px;
}


.vodojbi_item.col2_item .image_block.grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: minmax(100px, auto);
}

.plasma_table.grid {
    grid-template-columns: minmax(50%, auto) minmax(150px, 25%);
    grid-gap: 30px;
}
.plasma_table.grid td {white-space: unset;}
.plasma_table.grid .fw {
    flex-flow: column;
    justify-content: center;
}
.plasma_table.grid .image {
    width: 80%;
    margin: auto;
    padding-top: 112%;
    background-size: contain;
    background-position: center;
}


.metall .vodojbi_item .image_block .valc {padding-top: 50%;}
.img_cols {grid-gap: 30px;}
.img_cols .image {
    width: 100%;
    height: 100%;
    padding: 0;
    background-size: cover;
    background-position: center;
}
.metall .vodojbi_item .image_block.plasma {
    position: relative;
    padding-bottom: 28%;
}

.metall .vodojbi_item .image_block.plasma .image {
    position: absolute;
    left: -30px; top: -30px;
    width: calc(100% + 60px);
    height: 100%;
    padding: 0;
    background-size: 100% auto; 
    background-position: top;
    z-index: -1;  
}








.vodojbi_item .image_block .image {
    background-size: contain;
    background-position: center;
    padding-top: 66%;
}

.vodojbi_item .image_block .image.svarka {
    background-size: cover;
    height: calc(100% + 70px);
    padding: 0;
    margin: -30px -30px -70px 30px;
}
.vodojbi_item .image_block.izgotovlenie .image {
    background-size: cover;
    padding: 0;
}
.vodojbi_item .image_block.izgotovlenie .image.top {
    height: calc(100% + 30px);
    margin: -30px -30px 0 30px;
}
.vodojbi_item .image_block.izgotovlenie .image.bottom {
    height: calc(100% + 40px);
    margin: 0 -30px -40px 30px;
}


.vodojbi_item .image_block .fw_image {
    width: 100%;    
    padding-top: 42%;    
    margin-bottom: -20px;
}
.vodojbi_item img {
    width: 100%;
    max-width: 1000px;
    margin: 20px auto;
}


.vodojbi_item .image_block .text {grid-row: span 2;}
.vodojbi_item.col2_item .image_block.grid .text {
    grid-row: span 1;
    align-self: center;
}

.vodojbi_item .heading_block {margin-bottom: 20px;}
.vodojbi_item .heading_block>* {
    font-size: 20px;
    line-height: 110%;
    font-weight: 700;
    text-transform: uppercase;
}
.vodojbi_item .heading_block h1 span,
.vodojbi_item .heading_block h2 span {color: var(--lightbrown);}
.vodojbi_item .heading_block h2 {margin: 0;}

.vodojbi_item .heading_block .sub_heading {
    font-size: 18px;
    font-weight: 300;
}

.vodojbi_item .parag_heading {
    max-width: 1220px;
    margin: 10px 0;
    font-size: 16px;
    line-height: 130%;
    font-weight: 700;
    text-transform: uppercase;
}
.vodojbi_item .image_block.grid+.parag_heading {margin-top: 40px;}
.vodojbi_item .table_block+.parag_heading {margin-top: 40px;}

.vodojbi_item ul {margin-bottom: 20px;}
.vodojbi_item ul:last-child {margin-bottom: 0;}
.vodojbi_item ul li {
    font-size: 16px;
    line-height: 120%;
}

.vodojbi_item .order_btn {
    width: 100%;
    padding: 6px 0;
    background-color: var(--lightbrown);
    color: #fff;
    font-size: 16px;
    text-align: center;
    cursor: pointer;
    transition: 230ms ease-out;
}

.vodojbi_item.col2_item .order_btn {margin-top: 20px;}


.vodojbi_item .table_block {
    width: 100%;
    max-width: 1200px;
    overflow-x: auto;
}

.vodojbi_item table {
    width: 100%;    
    border-collapse: collapse;
}

.vodojbi_item.col2_item .table_block {margin-top: 20px;}

.vodojbi_item table td {
    text-align: center;
    padding: 6px;
    font-size: 16px;
    line-height: 100%;
    background-color: #fff;
    cursor: default;
    user-select: none;
}

.vodojbi_item .small_table table tr td:last-child {text-align: right;}

.vodojbi_item table thead td {
    font-weight: 600;
    border-bottom: 2px solid var(--lightbrown);
}
.vodojbi_item table tbody td {
    font-weight: 300;    
    white-space: nowrap;
    border-bottom: 1px dashed var(--lightbrown);
    transition: 120ms ease-out;
}
.vodojbi_item .small_table table tbody td {
    font-size: 14px;
    white-space: unset;
}

.deli .table_block {    
    max-width: none;
    max-height: 600px;
    overflow: auto;
}

.deli table tbody td { 
    font-size: 14px;
    white-space: unset;
}


.deli table thead td {position: sticky;}
.deli table thead tr td {top: 60px;}
.deli table thead tr:first-child td {
    top: 0;
    height: 50px;
}



.vodojbi_item table thead tr:first-child td:first-child,
.vodojbi_item table tbody tr td:first-child {text-align: left;}
.vodojbi_item table tbody tr td:first-child {font-weight: 500;}

.vodojbi_item table tbody td {
    font-weight: 300;    
    border-bottom: 1px dashed var(--lightbrown);
}

.vodojbi_item .table_block.dragable,
.vodojbi_item .table_block.big_dragable {
    padding-bottom: 20px;
    border-bottom: 1px solid var(--darkbrown);
}
.vodojbi_item .table_block.dragable * {cursor: ew-resize;}

.vodojbi_item .table_block.dragable thead tr:first-child td:first-child,
.vodojbi_item .table_block.big_dragable thead tr:first-child td:first-child,
.vodojbi_item .table_block.dragable tbody tr td:first-child,
.vodojbi_item .table_block.big_dragable tbody tr td:first-child {
    position: sticky;
    left: 0;
    z-index: 3;
}
.vodojbi_item .table_block thead tr td:first-child {z-index: 4 !important;}

.vodojbi_item .small_table.table_block.dragable tbody tr td:first-child {position: relative;}


.vodojbi_item .table_block.dragable::-webkit-scrollbar,
.vodojbi_item .table_block.big_dragable::-webkit-scrollbar {width: 10px; height: 10px;}
.vodojbi_item .table_block.dragable::-webkit-scrollbar-track,
.vodojbi_item .table_block.big_dragable::-webkit-scrollbar-track {background: transparent;}
.vodojbi_item .table_block.dragable::-webkit-scrollbar-thumb,
.vodojbi_item .table_block.big_dragable::-webkit-scrollbar-thumb {background: var(--darkbrown);}
.vodojbi_item .table_block.dragable::-webkit-scrollbar-thumb:hover,
.vodojbi_item .table_block.big_dragable::-webkit-scrollbar-thumb:hover {background: var(--wood);}


.vodojbi_item.deli p.parag_heading a {
    font-weight: 300;
    text-decoration: underline;
    text-decoration-thickness: 5%;
    color: var(--lightbrown);
    text-transform: none;
}

.vodojbi_item.deli p.parag_heading a:hover {color: var(--darkbrown);}



.vodojbi_item .nomenk {margin: 10px 0;}
.vodojbi_item .nomenk>* {
    max-width: 600px;
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
    margin: 0 20px 10px 0;
}
.vodojbi_item .nomenk>* span:not(.text) {
    margin-right: 10px;
    align-self: flex-start;
    padding: 6px 12px;
    font-size: 16px;
    font-weight: 600;
    color: #fff;
    background-color: var(--darkbrown);
}
.vodojbi_item .nomenk>* span.text{
    font-size: 16px;
    line-height: 100%;
    font-weight: 400;
    color: var(--darkbrown);
    align-self: center;
}



.vodojbi_item p {
    max-width: 1220px;
    font-size: 16px;
    line-height: 130%;
    margin-bottom: 20px;
}
.vodojbi_item p:last-child {margin-bottom: 0;}
.vodojbi_item .image_block+p {margin-top: 20px;}

.vodojbi_item .table_block+p.recall_text {margin-top: 30px;}
.vodojbi_item p.recall_text {font-weight: 500;}
.vodojbi_item p.recall_text a.tel {
    font-weight: 700;
    color: var(--lightbrown);
    white-space: nowrap;
}
.vodojbi_item p.recall_text span.modal_span {
    text-decoration: underline;
    text-decoration-color: var(--lightbrown);
    cursor: pointer;
}




@media screen and (min-width: 768px) {
    .vodojbi_item .order_btn:hover {background-color: var(--darkbrown);}
    .vodojbi_item table tbody tr:hover td {background: var(--lightgrey);}
    .vodojbi_item p.recall_text span.modal_span:hover {color: var(--lightbrown);}
}





/* --- ONE_FORM_PAGE --- */
.content_block.form_item {background-color: #E7E7E7;}
.content_block.color_item,
.content_group.form_item_block {background-color: #fff;}
.content_block.form_item .heading_line * {color: var(--darkbrown);}

.form_item_block .form_item_info {
    width: calc(100% - 70px);
    padding: 20px 40px 40px 30px;
    grid-gap: 20px;
}

.form_item_block .form_info,
.color_item_block .color_info {
    display: flex;
    flex-flow: column;
    justify-content: center;
}

.form_item_block .form_info h1,
.color_item_block .color_info h1 {line-height: 110%;}

.form_item_block .form_info h1 span,
.color_item_block .color_info h1 span {
    font-size: 23px;
    font-weight: 400;
}




.form_item_block .form_info ul.breadcrumbs,
.color_item_block .color_info ul.breadcrumbs {
    width: fit-content;
    position: absolute;
    top: -5px;
    z-index: 1;
}
.form_item_block .form_info ul.breadcrumbs {top: 20px;}

ul.breadcrumbs li {
    margin-right: 20px;
    display: inline-block;
}
ul.breadcrumbs li a {
    position: relative;
    font-size: 14px;
    text-decoration: underline;
    text-decoration-color: var(--lightbrown);
}

ul.breadcrumbs li a::after {
    position: absolute;
    right: -17px;
    top: 6px;
    width: 11px;
    height: 8px;
    content: '';
    background-image: url(../img/site/sprite.svg);
    background-position: 0px 0px;
    transform: rotate(-90deg) scale(0.75);
}
ul.breadcrumbs li a:hover {color: var(--lightbrown);}
.color_item_block .color_info ul.breadcrumbs li a:hover {color: #fff; text-decoration-color: #fff;}


.color_item_block .color_info {
    position: relative;
    z-index: 2;
    width: calc(100% - 70px);
    height: calc(100% - 160px);
    max-height: 420px;
    padding: 10px 40px 20px 30px;
}

.color_item_block .color_info * {color: #fff;}


.form_item_block .form_info .form_image {
    width: 100%;
    padding-top: 40%;
    background-size: contain;
    background-position: left center;
    margin: 20px 0;
}


.form_item_block .form_info .info p,
.color_item_block .color_info .info p {
    font-size: 16px;
    line-height: 130%;
    font-weight: 300;
    margin-bottom: 10px;
}
.form_item_block .form_info .info p>span {font-weight: 600;}
.color_item_block .color_info .info {margin: 20px 0 5%;}

.form_item_block .form_info .info p:first-child,
.color_item_block .color_info>p:first-child,
.color_item_block .color_info>a {
    font-size: 18px;
    line-height: 100%;
    font-weight: 700;
    margin-bottom: 15px;
}

.color_item_block .color_info>a {
    padding-bottom: 2px;
    display: block;
    width: fit-content;
}




.content_group.color_item_block {
    position: relative;
    padding: 0 0 30px;
}
.content_block.color_item .color_banner_text {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    padding-top: 15px;
}
.content_block.color_item .color_banner_text .grad {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    padding-top: 40%;
    background: linear-gradient(130deg, rgba(66,59,59,0.96)16%, rgba(66,59,59,0.7)30%, rgba(66,59,59,0)60%);
    z-index: 0;
}

.content_block.color_item .heading_line {
    position: relative;
    z-index: 2;
}

.content_block.color_item .heading_line a.heading,
.content_block.color_item .heading_line a.heading,
.color_item_block .color_info>a {
    color: #fff;
    border-bottom: 1px solid #fff;
}



@media screen and (min-width: 768px) {
    .content_block.color_item .heading_line a.heading:hover,
    .color_item_block .color_info>a:hover {color: #fff; border-bottom: 1px solid var(--lightbrown);}
    .content_block.color_item .heading_line a.heading:hover {
        color: #fff;
        border-bottom: 1px solid #fff;
        opacity: 0.7;
    }
}







body.news_page .form_item_block .form_info {justify-content: flex-start;}
body.news_page .form_item_block .form_info .info p {
    font-size: 16px;
    line-height: 150%;
    font-weight: 400;
}
body.news_page .form_item_block .form_info .info p a {
    color: var(--lightbrown);
    text-decoration: underline;
}

body.news_page .form_item_block .form_gallery .video {
    margin: 10px auto 30px;
    max-height: 460px;
    background-color: var(--darkbrown);
}


.one_img_gallery {height: 100%;}
.one_img_gallery .big_image {
    width: 100%;
    padding-top: 75%;
    background-size: cover;
    background-position: center;
    transition: 320ms ease-out;
}
body.not_news_page .one_img_gallery .big_image {    
    height: 100%;
    padding: 0;
}

.color_gallery .one_img_gallery .big_image {padding-top: 40%;}


.one_img_gallery .big_image .gal_img {    
    width: 0;
    height: 0;
    opacity: 0;
}
.one_img_gallery>.gal_img {
    width: 100%;
    padding-top: 66%;
    margin-bottom: 20px;
    background-size: cover;
    background-position: center;
}   

.one_img_gallery .controls {margin-top: 10px;}

.one_img_gallery .arrows {
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
}
.one_img_gallery .arrows>* {
    position: relative;
    align-self: center;
    width: 30px;
    height: 30px;
    margin-right: 20px;
    transition: 320ms ease-out;
    cursor: pointer;
}
.one_img_gallery .arrows>* span {
    position: absolute;
    left: 10px;
    top: 5px;
    width: 12px;
    height: 20px;
    background-image: url(../img/site/sprite.svg);
    background-position: 0px -547.5px;
}
.one_img_gallery .arrows .arr_left {transform: rotate(180deg);}
.one_img_gallery .desc {
    font-size: 16px;
    line-height: 100%;
    font-weight: 400;
}
.one_img_gallery .counter {padding-right: 10px};
.one_img_gallery .counter,
.one_img_gallery .counter>* {
    font-size: 14px;
    line-height: 100%;
    font-weight: 300;
}
.one_img_gallery .counter .cur {font-weight: 600;}


.color_gallery .one_img_gallery .controls {
    width: 50%;
    margin-left: 30px;
}



/* *** PDO_NEIGHBORS *** */
.neighbors {margin: 60px auto 40px;}
.neighbors * {
    font-size: 16px;
    font-weight: 400;
}
.neighbors>div {max-width: 45%;}
.neighbors>div.link-next {text-align: right;}
.neighbors>div>a {
    font-weight: 300;
    color: var(--lightbrown);
    text-decoration: underline;
    text-decoration-thickness: 5%;
    transition: 230ms ease-out;
}
.neighbors>div>a:hover {color: var(--darkbrown);}












/* *** FORM_COLOR_ITEMS *** */
.content_group.form_color_items,
.content_group.color_form_items {padding: 30px 0 60px;}
.content_group.color_form_items .heading_line {margin-bottom: 30px;}
.content_group.color_form_items .heading_line .heading,
.content_group.color_form_items .heading_line .sub_heading,
.content_group.color_form_items .heading_line .sub_heading span.modal_span {color: var(--darkbrown);}

.form_color_items .color_group {
    width: calc(100% - 70px);
    padding: 0 40px 0 30px;
    margin-top: 30px;
    grid-gap: 20px;
}
.form_color_items .color_group .cg_name {
    grid-column: span 2;
    overflow: hidden;
}

body.visualizer .form_color_items .color_group .cg_name {
    grid-column: 1/2;
}



.form_color_items .color_group .cg_name span {
    font-size: 18px;
    line-height: 100%;
    font-weight: 600;
    margin-right: 20px;
    white-space: nowrap;
    flex-shrink: 0;
}

.form_color_items .color_group .cg_name span.dash {
    width: 100%;
    height: 0;
    border-bottom: 1px dashed var(--darkbrown);
    margin-bottom: -4px;
}

.form_color_items .fc_item {
    display: grid;
    grid-template-columns: 25% auto;
    grid-gap: 10px;
    background: #fff;
    padding: 10px;
}

.form_color_items .fc_item .image {    
    padding-top: 70%;
    background-size: contain;
    background-position: left center;
}

.form_color_items .fc_item .info {align-self: center;}
.form_color_items .fc_item .info a.color_name {    
    font-size: 16px;
    line-height: 100%;
    font-weight: 600;
    text-decoration: underline;
    cursor: pointer;
}

.fc_item .info .thick_group {
    display: flex;
    flex-flow: column;
    justify-content: flex-start;
    padding: 8px 0;
    border-bottom: 1px dashed #a6a6a6;
}

.fc_item .info .thick_group:only-child,
.fc_item .info .thick_group:last-child {border: none;}
.fc_item .info .thick_group:only-child {padding: 0;}

.fc_item .info .thick_group_heading {
    order: 1;
    font-size: 16px;
    line-height: 100%;
    font-weight: 400;
    margin-bottom: 5px;
    display: none;
}
.color_form_items .fc_item .info .price_line {order: 2;}

.fc_item .info  .thick_group_heading span {font-weight: 600;}
.color_form_items .fc_item .info .thick_group_heading {display: inline-block;}
.color_form_items .fc_item .info .price_line span.thickness {display: none;}

.fc_item .info .price_line {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    margin-bottom: 8px;
}
.fc_item .info .thick_group .price_line:last-child {margin: 0;}





.fc_item .info .price_line>* {
    align-self: center;
    font-size: 14px;
    line-height: 100%;
    font-weight: 300;
}
.fc_item .info .price_line .thickness {font-weight: 400;}
.fc_item .info .price_line .price {font-weight: 600;}
.fc_item .info .price_line .order_btn {
    padding: 4px 8px 5px;
    background-color: var(--lightbrown);
    color: #fff;
    font-weight: 400;
    cursor: pointer;
    transition: 230ms ease-out;
}

.blago_color_items .fc_item .info .price_line {flex-flow: row wrap;}
.blago_color_items .fc_item .info .price_line .thickness {
    width: 100%;
    font-weight: 500;
}


.fc_item .info .price_line .price.akciya_price {position: relative;}
.fc_item .info .price_line .price.akciya_price span.old_price {
    font-size: 11px;
    text-decoration: line-through;
    padding-right: 12px;
    font-weight: 400;
}
.fc_item .info .price_line .price.akciya_price span.new_price {
    position: absolute;
    top: -11px; left: 0;
    width: 100%;
    font-size: 14px;
    font-weight: 600;
    color: #9c0000;
    white-space: nowrap;
}



.color_form_items .fc_item {
    display: flex;
    flex-flow: column;
    justify-content: flex-start;
    padding: 30px;
    border-right: 1px dotted var(--darkbrown);
    border-bottom: 1px dotted var(--darkbrown);
}
.color_form_items .fc_item:nth-child(3n) {border-right: none;}


.color_form_items .fc_item a.color_name {
    width: fit-content;
    font-size: 18px;
    line-height: 100%;
    font-weight: 600;
    padding-bottom: 3px;
    border-bottom: 1px solid var(--darkbrown);
}

.color_form_items .fc_item .image {   
    position: relative;
    width: 100%;
    padding-top: 70%;
    margin: 10px 0 20px;
}
.color_form_items .fc_item .image>* {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    background-size: contain;
    background-position: left center;
    transition: 460ms ease-out 120ms;
    z-index: 1;
}

.color_form_items .fc_item .image .image2 {
    opacity: 0;
    z-index: 2;
}







@media screen and (min-width: 768px) {
    .one_img_gallery .arrows>*:hover {background-color: #e7e7e7;}
    .form_color_items .fc_item .info .price_line .order_btn:hover {background-color: var(--darkbrown);}
    .color_form_items .fc_item .image:hover .image2 {opacity: 1;}
    .color_form_items .fc_item a.color_name:hover {    
        color: var(--lightbrown);
        border-bottom: 1px solid var(--lightbrown);
    }
    .content_group.color_form_items .heading_line .sub_heading span.modal_span:hover {color: var(--lightbrown);}
}








/*  *************************************
VISUALIZER
******************************* */
body.visualizer .grid.col3 {grid-template-columns: 360px minmax(500px, 1fr) minmax(430px, 30%);}

body.visualizer .visualizer_result {
    position: relative;
    padding: 30px;
    overflow: hidden;
}
body.visualizer .visualizer_result .container {
    position: relative;
    transform-origin: top center;
}
body.visualizer .form_color_items {
    padding: 0px 20px 120px 30px;    
    background-color: #F7F7F7;
}
body.visualizer .form_color_items #dynamic-content {
    margin-bottom: 20px;
    overflow-x: hidden;
    overflow-y: scroll;
    padding-right: 20px;
}

body.visualizer .form_color_items #dynamic-content::-webkit-scrollbar {width: 10px;}
body.visualizer .form_color_items #dynamic-content::-webkit-scrollbar-track {background: transparent;}
body.visualizer .form_color_items #dynamic-content::-webkit-scrollbar-thumb {background: var(--lightbrown);}



body.visualizer .form_color_items .heading {
    width: calc(100% - 20px);
    margin: 0 0 20px -30px;
    padding: 20px 40px 17px 30px;
    background-color: #e7e7e7;
    font-size: 21px;
    line-height: 100%;
    font-weight: 700;
    color: var(--darkbrown);
    text-transform: uppercase;    
}

body.visualizer .form_color_items .sub_heading {
    font-size: 16px;
    line-height: 140%;
    font-weight: 400;
}

body.visualizer .form_color_items .sub_heading a.tel {
    color: var(--lightbrown);
    font-weight: 600;
    white-space: nowrap;
}

body.visualizer .form_color_items .sub_heading span.modal_span {
    text-decoration: underline;
    text-decoration-color: var(--lightbrown);
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
}



body.visualizer .form_color_items .color_group {
    position: relative;
    width: 100%;
    padding: 0;
    margin-top: 0;
    margin-bottom: 30px;
}
body.visualizer .form_color_items .color_group>* {margin-bottom: 10px;}
body.visualizer .form_color_items .color_group>.cg_name  {
    position: sticky;
    top: 0;
    padding-bottom: 10px;
    margin-bottom: 5px;
    background-color: #f7f7f7;
}
body.visualizer .form_color_items .color_group .image {cursor: pointer;}
body.visualizer .form_color_items .fc_item {
    grid-template-columns: min(25%, 120px) auto;
    padding: 5px 10px 5px 5px;
    box-shadow: 1px 1px 3px rgba(0,0,0,0.12);
    border: 1px solid transparent;
}
body.visualizer .form_color_items .fc_item.active {
    grid-template-columns: min(25%, 120px) auto;
    padding: 5px 10px 5px 5px;
    box-shadow: 1px 1px 3px rgba(0,0,0,0);   
    border: 1px solid var(--wood); 
}

body.visualizer .form_color_items .fc_item.active .info a.color_name {
    color: var(--lightbrown);
    text-decoration: none;
}



body.visualizer .form_color_items .fc_item .thick_group {padding: 0;}
body.visualizer .fc_item .info .price_line {margin-bottom: 5px;}
body.visualizer .fc_item .info .price_line:last-child {margin-bottom: 0;}
body.visualizer .fc_item .info .price_line>* {font-size: 14px;}

#save_button {
    position: absolute;
    bottom: 30px;
    right: 30px;
    width: 40px;
    height: 40px;
    padding: 8px;
    background-color: #f7f7f7;
    border: none;
    border-radius: 0;
    overflow: hidden;
    transition: background-color 320ms ease-out, width 320ms ease-out;
    cursor: pointer;
    box-shadow: 2px 2px 4px rgba(0,0,0,0.23);
    z-index: 5;
}
#save_button.loading {
    width: 135px;
    background-color: var(--wood);
}
#save_button.loading svg path {stroke: #f7f7f7;}
#save_button.loading p {color: #f7f7f7;}



#save_button>* {flex-shrink: 0;}
#save_button svg {
    width: 22px;
    height: 22px;
    margin-left: 12px;
}
#save_button svg path {transition: 320ms ease-out;}

#save_button svg.load {display: none;}
#save_button.loading svg.save {display: none;}
#save_button.loading svg.load {display: inline-block;}

#save_button p {
    color: #f7f7f7;
    font-size: 14px;
    font-weight: 500;
}

@media screen and (min-width: 768px) {
    body.visualizer .form_color_items .fc_item {transition: 230ms ease-out;}


    #save_button:not(.loading):hover {
        width: 135px;
        background-color: var(--lightbrown);
    }
    #save_button:not(.loading):hover svg path {stroke: #f7f7f7;}

    body.visualizer .form_color_items .sub_heading span.modal_span:hover {color: var(--lightbrown);}
}

#texture_preloader {
    width: 0;
    height: 0;
    overflow: hidden;
    opacity: 0;
}











.scaling-container {
    width: 100%;
    max-width: 100%;
    margin: auto;
    overflow: hidden;
}


.work-area-container {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    overflow: visible;
    position: relative;
    margin: auto;
    box-shadow: 2px 2px 6px rgba(0,0,0,0.23);
}

.work-area {
    position: relative;
    overflow: visible;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
    transition: transform 0.3s;
    width: 100%;
    height: 100%;
    max-width: 1500px;
    max-height: 900px;
    min-width: 300px;
    min-height: 300px;
    user-select: none;
    margin: auto;
}

#imageLayer {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

#imageLayer img {
    max-width: 100%;
    max-height: 100%;
    display: block;
}

#textureLayer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    mask: url(#shapeMask);
    -webkit-mask: url(#shapeMask);
    mask-type: alpha;
    -webkit-mask-type: alpha;
    pointer-events: none;
}


#textureInner {
    position: absolute;
    top: -100%;
    left: -100%;
    width: 300%;
    height: 300%;
    background-image: url('/textures/bavaria_gray.webp');
    background-color: #232120;
    background-repeat: repeat;
    background-size: 10%;    
    transform-origin: center center;
    
}

@media screen and (min-width: 768px) {
    #textureInner {transition: 320ms ease-out;}
}


#editorSvg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

#maskSvg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    pointer-events: none;
}



























.ms,
.show1300 {display: none !important;}