header {background-color: var(--bgcolorW); position: relative; left: 0; width: 100%; top: -100%; transition: all 0.35s ease-out; z-index: 999;}
header .flex {flex-direction: row; align-items: center; justify-content: space-between; height: 5em; padding-bottom: 0.5em;}
header .flex figure {width: 3em;}
header .flex menu {display: flex; flex-direction: row; list-style: none; font-size: 0.8em;}
header .flex menu li {position: relative; margin: 0 1em; }
header .flex menu .submenu ul {visibility: collapse; transform: scaleY(0); opacity: 0; position: absolute; list-style: none; background-color: var(--bgcolor3); padding: 0.5em 1em 1.5em; left: -2em; box-shadow: 0.25em 0.25em 0.5em var(--bgcolor1); border-radius: 0.5em; transition: all 0.25s ease-out;}
header .flex menu .submenu ul li {white-space: nowrap;}
header .flex menu .submenu ul li a {display: block; padding: 0.25em 0;}
header .flex menu .submenu:hover ul {visibility: visible; transform: scaleY(1); opacity: 1;}
header .flex .but-block {display: flex; align-items: center;}
header .flex .but-block .fa {font-size: 1.2em; color: var(--bgcolor1); margin: 0 1em 0 0;}
header .flex .but-block .button {color: var(--bgcolorW); background-color: var(--bgcolor1); border-color: var(--bgcolor1);}
header .flex .but-block .button:hover {background-color: var(--bgcolor2); border-color: var(--bgcolor2);}
header .flex .but-block .navicon {display: none;}
.slide-menu {position: fixed; top: 0;}
header .hide-menu {display: none;}
.camera {background-color: var(--bgcolor3); margin-top: 1em;}
.camera .flex {flex-direction: row; padding: 2em 0;}
.camera .flex .items {display: flex; flex-direction: column; width: 33.33%;}
.camera .flex .items:nth-child(3) {align-items: flex-end;}
.camera .flex .box {background-size: 100%; padding: 0 1em}
.camera .flex .box h2 {font-size: 1.35em;}
.camera .flex .box:nth-child(1) {animation: pzv-inner-animation 2s ease-in-out 0s alternate none infinite running;}
.camera .flex .box:nth-child(3) {animation: pzv-inner-animation 2.5s ease-in-out 0s alternate none infinite running;}
.camera .flex .box:nth-child(1) h2 {color: var(--bgcolor1);}
.camera .flex .box:nth-child(3) h2 {color: var(--bgcolor2);}
.camera .flex .box p {font-size: 1em; font-weight: 600;}
.camera .flex .intro {text-align: center; align-items: center;}
.camera .flex .intro figure {width: 50%;}
.camera .flex .intro h1 {font-size: 2.35em; padding: 0.1em 0;}
.camera .flex .intro p {font-weight: 600;}
.camera .flex .intro .text-intro {padding: 1.5em 1em 0;}
.camera .flex .intro .text-intro p {font-weight: 400;}
.camera .flex .intro .button {width: 70%; color: var(--bgcolorW); margin: 1.5em 0 1em; background-color: var(--bgcolor1); border-color: var(--bgcolor1);}
.camera .flex .intro .button:hover {background-color: var(--bgcolor2); border-color: var(--bgcolor2);}
.camera .flex .intro .pro-but {font-size: 0.8em; font-weight: 600; line-height: 2;}
.icon-line {padding: 3em 0 4em;}
.icon-line .flex {flex-direction: row; gap: 2em;}
.icon-line .flex section {width: 16%; text-align: center; padding: 0 1em;}
.icon-line .flex section img {height: 4.5em;}
.icon-line .flex section h4 {font-size: 0.8em;}

.icon-line-fave {padding: 0 0 4em;}
.icon-line-fave .head-block {text-align: center; padding: 0 0 2em;}
.icon-line-fave .head-block h2 {font-size: 1.35em;}
.icon-line-fave .flex {flex-direction: row; gap: 2em;}
.icon-line-fave .flex section {width: 20%; display: flex; flex-direction: column; align-items: center; text-align: center;}
.icon-line-fave .flex section img {height: 4.5em; position: relative;}
.icon-line-fave .flex section h4 {position: relative; height: 3.75em; font-size: 0.8em; padding: 1em 2.5em 0.5em;}
.icon-line-fave .flex section p {position: relative; line-height: 1;}
.icon-line-phore {background-color: var(--bgcolor3); margin-bottom: 4em;}
.icon-line-phore .flex {flex-direction: row; padding: 3em 0; gap: 2em;}
.icon-line-phore .flex section {width: 25%; display: flex; flex-direction: row; align-items: center;}
.icon-line-phore .flex section span {font-size: 3em; color: var(--bgcolor1);}
.icon-line-phore .flex section div {display: flex; flex-direction: column; padding-left: 1em;}
.icon-line-phore .flex section div h3 {font-size: 1.35em;}
.icon-line-phore .flex section div p {line-height: 1; padding: 0.5em 0;}

footer {background-color: var(--bgcolor3);}
footer .flex {flex-direction: row; align-items: center; justify-content: space-between; padding: 2em 0;}
footer .flex .logo {display: flex; flex-direction: row; align-items: center;}
footer .flex .logo figure {width: 3em;}
footer .flex .logo .text-item {padding-left: 1em;}
footer .flex .logo .text-item h4 {font-size: 0.8em; margin-bottom: 0.25em;}
footer .flex .logo .text-item p {line-height: 1;}
footer .flex .social {display: flex; flex-direction: row; align-items: center;}
footer .flex .social a {width: 2.5em; height: 2.5em; font-size: 1em; display: flex; align-items: center; justify-content: center; color: var(--bgcolorD); margin-left: 1em; background-color: var(--bgcolorW); border: 1px solid var(--bgcolorD); border-radius: 100%; opacity: 0.5;}
footer .flex .social a:hover {opacity: 1;}
footer .podval {width: 100%; color: var(--bgcolorW); background: var(--bgcolor1);}
footer .podval nav a {font-size: 0.7em; text-decoration: underline; color: var(--bgcolorW); margin: 0 1em;}
footer .podval nav a:hover {text-decoration: none;}
.crumbs .nav-line {padding: 1em 0; background-color: var(--bgcolor3);}
.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: 1em 0;}
.crumbs .head-line h1 {font-size: 2.35em;}
.crumbs .head-line .but-block {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 .active {color: var(--bgcolorW); background-color: var(--bgcolorD);}
.person-gallery .flex {flex-direction: row; flex-wrap: wrap;}
.person-gallery .flex section {display: flex; flex-direction: row; flex: 1 1 auto; align-items: center; padding: 1em;}
.person-gallery .flex section:first-child {flex-direction: row-reverse;}
.person-gallery .flex section figure {width: 7em; min-width: 7em; height: 7em;}
.person-gallery .flex section figure img {height: 100%; object-fit: cover; object-position: top center; border-radius: 0.5em;}
.person-gallery .flex section .text-item {padding: 0 1em;}
.person-gallery .flex section h4 {font-size: 0.8em; text-align: center; padding: 0 0 0.25em;}

.goodness-preview .content {padding: 2em; margin: -1em 0 3em; border: 1px solid var(--bgcolor1); border-radius: 0.5em;}
.goodness-preview .content h3 {position: absolute; top: -0.75em; font-size:  0.8em; color: var(--bgcolor1); padding: 0.25em 0.5em; background-color: var(--bgcolorW);}
.goodness-preview .content .goodness-body {display: flex; flex-direction: row-reverse;}
.goodness-preview .content .goodness-body .box {width: 44%; min-height: 20em; display: flex; flex-direction: column; background-position: top center; background-size: contain;}
.goodness-preview .content .goodness-body .text-item {width: 56%; display: flex; flex-direction: column; padding-right: 1em;}
.goodness-preview .content .goodness-body .text-item .head-block {display: flex; flex-direction: row-reverse; align-items: center; padding-bottom: 0.5em;}
.goodness-preview .content .goodness-body .text-item .head-block h2 {font-size: 1.35em; display: flex; flex-direction: column;}
.goodness-preview .content .goodness-body .text-item .head-block figure {height: 3em; display: flex; flex-direction: column; padding: 0 1em 0 0;}
.goodness-preview .content .goodness-body .text-item .head-block figure img {height: 100%; object-fit: contain;}
.goodness-preview .content .goodness-body .text-item .text-item-inner {padding: 1em 0;}
.goodness-preview .content .goodness-body .text-item .text-item-inner p {margin-bottom: 0.25em;}
.goodness-preview .content .goodness-body .text-item p > a {color: var(--bgcolor1);}
.goodness-preview .content .goodness-body .text-item .button {text-align: center; color: var(--bgcolorW); background-color: var(--bgcolor1); border-color: var(--bgcolor1);}
.goodness-preview .content .goodness-body .text-item .button:hover {background-color: var(--bgcolor2); border-color: var(--bgcolor2);}
.infor-catalog {padding: 0 0 3em;}
.infor-catalog .flex {flex-direction: row; flex-wrap: wrap;}
.infor-catalog .flex section {width: 50%; display: flex; flex-direction: column; align-items: center;  padding: 2em;}
.infor-catalog .flex section figure {width: 5em;}
.infor-catalog .flex section .text-item {width: 100%; padding: 1em 2em 0;}
.infor-catalog .flex section .text-item h2 {font-size: 1.35em; margin-bottom: 0.5em;}
.infor-catalog .flex section:first-child .text-item h2, .infor-catalog .flex section:last-child .text-item h2 {color: var(--bgcolor2)}
.infor-catalog .flex section .text-item .pro-but {font-size: 0.8em; color: var(--bgcolor1); margin-top: 0.5em;}
.infor-catalog .flex section .text-item .pro-but:hover {color: var(--bgcolor2);}




.contacts .flex {flex-direction: row;}
.contacts .flex .items {display: flex; flex-direction: column; width: 50%; padding: 0 0.5em;}
.contacts .flex .items h2 {font-size: 1.35em; line-height: 1.3; margin-bottom: 0.5em;}
.contacts .flex .items p {margin-bottom: 0.5em;}
.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%;  margin-top: -3em; padding: 2em; border: 1px solid var(--bgcolor1); border-radius: 0.5em}
.contacts .flex .items section h3 {position: absolute; top: -0.75em; font-size:  0.8em; color: var(--bgcolor1); padding: 0.25em 0.5em; background-color: var(--bgcolorW);}
.contacts .flex .items section .form-content .title {padding-top: 0;}
.contacts .flex .items section .form-content .title h4 {font-size: 1.35em;}





@media(max-width:760px) {
header .flex {height: 8em;}
header .flex figure {width: 5em;}
header .flex menu {display: none}
header .flex .but-block { flex-direction: row-reverse;}
header .flex .but-block .fa {font-size: 16px; margin: 0 0 0 1em;}
header .flex .but-block .navicon {display: block;}
header .hide-menu {display: block; position: fixed; width: 100%; top: 0; right: 0; height: 100vh; padding: 6em; background-color: var(--bgcolor3); transform: translateX(100%); transition: all 0.35s ease-out;}
header .hide-menu menu {list-style: none; font-size: 16px; text-transform: uppercase;}
header .hide-menu menu li {white-space: nowrap; margin: 0.75em 0;}
header .hide-menu menu .submenu {margin: 0;}
header .hide-menu menu .submenu ul {list-style: none; padding: 0 0 0 2em;}
header .hide-menu menu li .button {width: 100%; text-align: center; color: var(--bgcolorW); margin-bottom: 1em; background-color: var(--bgcolor1); border-color: var(--bgcolor1);}
header .hide-menu .sector {font-size: 16px; top: 1em; right: 1em;}
header .wish {transform: translateX(0);}
.camera {font-size: 130%;}
.camera .flex {flex-direction: column;}
.camera .flex .items {width: 100%; align-items: center;}
.camera .flex .box {display: none;}
.camera .flex .intro {padding: 0;}
.camera .flex .intro .pro-but {font-size: 14px;}
.icon-line {padding: 3em 0 5em;}
.icon-line .flex {font-size: 150%; flex-wrap: wrap;}
.icon-line .flex section {width: 45%;}

.icon-line-fave .head-block {font-size: 130%;}
.icon-line-fave .flex {font-size: 150%; flex-wrap: wrap;}
.icon-line-fave .flex section {width: 100%;}
.icon-line-fave .flex section h4 {height: auto; padding: 1em 1.5em 0.5em;}
.icon-line-phore {font-size: 150%;}
.icon-line-phore .flex {flex-direction: column;}
.icon-line-phore .flex section {width: 100%;}
.icon-line-phore .flex section:nth-child(even) {justify-content: flex-end; text-align: left;}

footer {font-size: 130%;}
footer .flex {flex-direction: column; padding: 4em 0;}
footer .flex .logo figure {width: 5em;}
footer .flex .logo .text-item h4 {font-size: 14px;}
footer .flex .social {padding: 2em 0 0;}
footer .flex .social a {font-size: 16px;}
footer .podval nav {font-size: 130%; padding-bottom: 2em;}
.crumbs {font-size: 130%;}
.crumbs .nav-line nav {font-size: 12px; text-align: center;}
.crumbs .head-line {flex-direction: column;}
.crumbs .head-line h1 {padding-bottom: 0.25em;}
.crumbs .head-line .but-block {max-width: 100%;}
.person-gallery {font-size: 130%;}
.person-gallery .flex {flex-direction: column;}
.person-gallery .flex section {flex: none; }
.person-gallery .flex section:first-child {flex-direction: row;}
.person-gallery .flex section h4 {font-size: 14px; text-align: left;}

.goodness-preview {font-size: 130%;}
.goodness-preview .content {margin: 0 0 3em;}
.goodness-preview .content h3 {font-size:  14px;}
.goodness-preview .content .goodness-body {flex-direction: column;}
.goodness-preview .content .goodness-body .box {width: 100%; height: 60vw; background-position: bottom center;}
.goodness-preview .content .goodness-body .text-item {width: 100%; display: flex; flex-direction: column; padding: 2em 0 0;}
.infor-catalog {font-size: 130%;}
.infor-catalog .flex {flex-direction: column;}
.infor-catalog .flex section {width: 100%;}
.infor-catalog .flex section .text-item {padding: 1em;}




.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;}





}