header {position: absolute; left: 0; width: 100%; top: 0; z-index: 999;}
header .slide-line {left: 0; width: 100%; height: 4em; position: relative; top: 0; padding: 0.5em 0; background-color: var(--bgcolorW);}
header .active {position: fixed; box-shadow: 0 0 1em var(--bgcolor4);}
header .top-line {width: 100%; position: relative; height: 4.014em;}
header .top-line .flex {flex-direction: row; align-items: center; justify-content: space-between;}
header .top-line .flex figure {width: 8em;}
header .top-line .flex figure img {object-fit: contain; object-position: center;}
header .top-line .flex menu {display: flex; list-style: none; font-size: 0.8em;}
header .top-line .flex menu li {padding: 0 0.5em 0 0;}
header .top-line .flex menu li a {font-size: 0.8em; font-weight: 400; line-height: 1; padding: 1em 0.25em 0.9em;}
header .top-line .flex menu li a.button {padding: 1em 1.5em 0.9em;}
header .top-line .flex menu li a.button:hover {color: var(--bgcolorW); background-color: var(--color-main); border-color: var(--color-main);}
header .top-line .flex menu li.content {position: relative;}
header .top-line .flex menu li.content ul {position: absolute; list-style: none; left: -1em; width: calc(100% + 2em); padding: 0 1em 1em; background-color: var(--bgcolorW); box-shadow: 0 0.5em 0.5em var(--bgcolor4); transition: all 0.25s ease-out; visibility: collapse; opacity: 0;}
header .top-line .flex menu li.content:hover ul {visibility: visible; opacity: 1;}
header .top-line .flex menu li.submenu ul {position: absolute; left: 0; width: 100%; display: flex; flex-direction: row; flex-wrap: wrap; list-style: none; padding: 1em; background-color: var(--bgcolorW); box-shadow: 0 0.5em 0.5em var(--bgcolor4); transition: all 0.25s ease-out; visibility: collapse; opacity: 0;}
header .top-line .flex menu li.submenu ul li {display: flex; flex-direction: column; font-size: 1.2em; line-height: 1; padding: 0.25em 0.5em; width: 33.33%;}
header .top-line .flex menu li.submenu ul li a::after {content: ""}
header .top-line .flex menu li.submenu:hover ul {visibility: visible; opacity: 1;}
header .top-line form {display: flex; flex-direction: row; width: 30em; background-color: var(--bgcolorW); border: 1px solid var(--bgcolorD); border-radius: 0.5em;}
header .top-line form input {font-size: 1em; padding: 0 1em; background: none; border: 0; flex: 1 1 auto;}
header .top-line form button {font-size: 1em; width: 3em; border: 0; border-radius: 0.5em;}
header .top-line .flex nav {display: flex; flex-direction: row-reverse; align-items: center; font-size: 0.8em;}
header .top-line .flex nav a {display: flex; justify-content: center; font-size: 0.8em; font-weight: 400; line-height: 1; color: var(--bgcolorD); padding: 0.8em 1.5em; border: 1px solid var(--bgcolor1); border-radius: 0.5em; margin-right: 0.5em;}
header .top-line .flex nav a:hover {color: var(--bgcolorW); background-color: var(--color-main); border-color: var(--color-main);}
header .top-line .flex .navicon {display: none;}
header .top-line .flex nav .button {color: var(--bgcolorW); padding: 1em 1.5em 0.8em; background-color: var(--bgcolorD);}
header .top-line .search-block {display: none;}
header .bottom-line, header .hide-menu {display: none;}
.cataloque-case .case-body {position: relative; min-height: calc(100vh - 6em); display: flex; flex-direction: column; justify-content: center; padding: 6em 0 4em;}
.cataloque-case .flex {width: 100%; flex-direction: row; flex-wrap: wrap; gap: 2em;}
.cataloque-case .head-block {width: 100%; padding: 0 0 1.5em; text-align: center;}
.cataloque-case .head-block h1 {margin-bottom: 0.25em;}
.cataloque-case .flex section {display: flex; flex-direction: column; align-items: center; width: calc(33.33% - 1.5em); padding: 3em 1em; background-color: var(--color-main); border-radius: 0.5em; transition: all 0.25s ease-out; box-shadow: 0 0.5em 0.5em var(--bgcolor4);}
.cataloque-case .flex section:hover {background-color: var(--bgcolor3); box-shadow: 0 0.25em 0.5em var(--bgcolor4);}
.cataloque-case .flex section figure {width: 3em; height: 3em;}
.cataloque-case .flex section figure img {position: absolute; left: 0; width: 100%; top: 0;}
.cataloque-case .flex section:hover figure img:last-child {opacity: 0;}
.cataloque-case .flex section h3 {font-size: 0.8em; text-transform: uppercase; line-height: 1.2; text-align: center; margin-top: 1em;}
.cataloque-case .flex section a {position: absolute; left: 0; width: 100%; top: 0; height: 100%;}
.crumbs {padding-top: 4em;}
.crumbs .nav-line {padding: 1em 0 0.5em;}
.crumbs .nav-line nav {font-size: 0.7em;}
.crumbs .nav-line nav .separator {margin: 0 1em;}
.crumbs .head-line {display: flex; flex-direction: row; align-items: center; justify-content: space-between; padding: 0.5em 0 1em;}
.crumbs .head-line .but-block {font-size: 0.8em; max-width: 60%; display: flex; flex-direction: row; flex-wrap: wrap; gap: 0.5em;}
.crumbs .head-line .but-block .button {display: flex; flex: 1 1 auto; align-items: center; justify-content: center; }
.crumbs .head-line .but-block .button:hover {color: var(--bgcolorW); background-color: var(--color-main);  border-color: var(--color-main);}
.crumbs .head-line .but-block .active {color: var(--bgcolorW); background-color: var(--bgcolorD);}




footer .flex {flex-direction: row; width: calc(100% + 2em); margin-left: -1em; padding: 2em 1em; color: var(--bgcolorW); background-color: var(--bgcolorD); border-radius: 1em;}
footer .flex .items {display: flex; flex-direction: column; padding: 0 1em; flex: 1 1 auto;}
footer .flex .items figure {width: 6em;}
footer .flex .items h3 {font-size: 1em; margin: 0.9em 0;}
footer .flex .items ul {list-style: none; font-size: 0.8em; line-height: 2;}
footer .flex .items ul li a {color: var(--bgcolorW); line-height: 1;}
footer .flex .items ul li span {font-size: 0.8em; color: var(--color-main); margin-right: 0.5em;}
footer .flex .items ul li a:hover {color: var(--color-main);}
footer .flex .items .social {width: 75%; display: flex; flex-direction: row; align-items: center; justify-content: space-between; padding: 1em 0;}
footer .flex .items .social a {display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 1em; width: 2.3em; height: 2.3em; color: var(--bgcolorW); background-color: var(--bgcolor1); border-radius: 100%;}
footer .flex .items .social a:hover {color: var(--bgcolor1); background-color: var(--bgcolor3);}
footer .podval {font-size: 0.8em; padding: 1em;}
.callback {padding: 0 0 1em;}
.callback .flex {flex-direction: row; align-items: center; width: calc(100% + 2em); margin-left: -1em; padding: 1em; background-color: var(--bgcolor3); border-radius: 1em;}
.callback .flex .items {flex: 1 1 auto; padding: 1em;}
.callback .flex .items h3 {white-space: nowrap;}
.callback .flex .items .button {white-space: nowrap; color: var(--bgcolorW); background-color: var(--bgcolorD);}
.callback .flex .items .button:hover {background-color: var(--color-main); border-color: var(--color-main);}

.contacts {padding: 1em 0 2em;}
.contacts .flex {flex-direction: row;}
.contacts .flex .items {display: flex; flex-direction: column; width: 50%; padding: 1em 0;}
.contacts .flex .items h2 {line-height: 1.3; margin-bottom: 0.5em;}
.contacts .flex .items p {margin-bottom: 0.5em; padding-right: 1em;}
.contacts .flex .items p a {color: var(--bgcolor2);}
.contacts .flex .items p a:hover {text-decoration: underline;}
.contacts .flex .items section {position: relative; width: 100%; height: 100%;  font-size:  0.8em; padding: 2em; border: 1px solid var(--bgcolor1); border-radius: 0.5em}
.contacts .flex .items section h3 {position: absolute; top: -0.75em; font-size:  1em; color: var(--bgcolor1); padding: 0.25em 0.5em; background-color: var(--bgcolorW);}
.contacts .flex .items section .form-content .title {padding-top: 0;}


@media(max-width:760px) {
header {font-size: 130%;}
header .top-line {height: 52.34px;}
header .top-line .flex menu {display: none;}
header .top-line .flex nav {display: none;}
header .top-line .flex .mobile {display: flex;}
header .top-line .flex .fa {display: block; font-size: 1.2em; margin-left: 1em;}
header .top-line .search-block {position: absolute; left: -2em; width: calc(100% + 4em); padding: 2em 1.5em; background-color: var(--bgcolor3); overflow: hidden;}
header .top-line .search-block form {width: 100%; font-size: 14px;}
header .top-line .search-block form input {padding: 0.5em;}
header .bottom-line {display: block; position: fixed; left: 0; width: 100%; bottom: 0; background-color: var(--bgcolor3); z-index: 2;}
header .bottom-line nav {display: flex; flex-direction: row; align-items: center; justify-content: space-between; padding: 1em 0;}
header .bottom-line nav a {display: flex; justify-content: center; font-size: 0.8em; font-weight: 400; line-height: 1; color: var(--bgcolorW); padding: 0.8em 1.5em; background-color: var(--bgcolor1); border-radius: 0.5em; margin-right: 0.5em;}
header .hide-menu {display: block; position: fixed; left: 0; width: 100%; top: 0; height: 100%; background-color: var(--bgcolorD); overflow: hidden; overflow-y: auto; transform: translateX(100%); transition: all 0.3s ease-out; z-index: 1;}
header .wish {transform: translateX(0);}
header .hide-menu menu {width: 100%; padding: 4em; }
header .hide-menu menu li a {display: block; font-size: 14px; text-transform: uppercase; line-height: 1; color: var(--bgcolorW);}
header .hide-menu menu li ul {padding: 1em 2em;}
header .hide-menu menu li ul li a {padding: 0.75em 0;}
header .hide-menu .close {position: absolute; top: 0.5em; right: 0.5em; font-size: 2em; color: var(--bgcolorW);}
.cataloque-case .case-body {padding: 6em 0 4em;}
.cataloque-case .head-block h1 {padding: 0 15%;}	
.cataloque-case .flex section {flex-direction: column; text-align: center; width: calc(50% - 1em);}
.cataloque-case .flex section h3 {font-size: 10px;}
.crumbs {font-size: 130%;}
.crumbs .nav-line nav {font-size: 12px; text-align: center;}
.crumbs .head-line {flex-direction: column;}
.crumbs .head-line h1 { text-align: center; padding-bottom: 0.25em;}
.crumbs .head-line .but-block {max-width: 100%;}




footer {font-size: 130%; padding-bottom: 5em;}
footer .flex {flex-direction: column;}
footer .flex .items {width: 100%; padding: 0 1em 1em;}
footer .flex .items h3 {font-size: 14px;}
footer .flex .items ul {font-size: 12px;}
footer .flex .items .social {width: 100%; padding: 2em 0 0;}
.callback {font-size: 130%}
.callback .flex {flex-direction: column;}
.callback .flex .items h3 {font-size: 16px;}

.contacts {font-size: 130%;}
.contacts .flex {flex-direction: column;}
.contacts .flex .items {width: 100%; padding: 1em 0;}
.contacts .flex .items section {margin: 0;}
.contacts .flex .items section h3 {font-size: 14px;}


}