html {min-width: 1024px;}
@keyframes pzv-icon-animation {
	    0%, 50%, 100% {transform: rotate(0deg);}
	    10%, 30% {transform: rotate(-30deg);}
	    20%, 40% {transform: rotate(30deg);}
}
.modal-open {overflow: hidden !important; padding-right: 17px;}
p {font-size: 0.8em; font-weight: 400; line-height: 1.5;}
.button {font-size: 0.8em; font-weight: 400; text-align: center;line-height: 1; color: var(--bgcolorW); padding: 0.75em 1.5em; background-color: var(--bgcolor2); border: 0; border-radius: 0.5em; transition: all 0.25s ease-out;}
.button:hover {color: var(--bgcolorD); background-color: var(--bgcolor1);}
.mobile {display: none;}
.vievport {scroll-snap-type: x proximity; scroll-behavior: smooth;}
.vievtrack {width: 100%; position: relative; scroll-snap-align: start; scroll-snap-stop: always;}
.container {width: 100%; max-width: 1280px; padding: 0 4em;}
a {color: #1f1f1f;}
a:hover {color: var(--bgcolor2);}
h1 {font-size: 2.4em; color: var(--bgcolorD);}
h2 {font-size: 1.6em;}
h3 {font-size: 1em;}
header {left: 0; position: fixed; width: 100%; top: 0; background-color: var(--bgcolorW); z-index: 999;}
header .flex {flex-direction: row; justify-content: space-between; align-items: center;}
header figure {display: flex; align-items: center;}
header figure img {width: 3em;}
header figure figcaption {font-size: 1em; font-weight: 600; text-transform: uppercase; color: var(--bgcolor2); margin-left: 0.5em;}
header menu {list-style: none; display: flex; flex-direction: row; font-size: 0.8em;}
header menu li {margin: 0 0.5em;}
header menu li a {color: rgba(0,0,0, 0.6);}
header menu li a:hover {color: var(--bgcolorD);}

.note {padding: 10em 0 4em;}
.note .flex {flex-direction: row-reverse;}
.note .flex .items {display: flex; flex-direction: column; width: 50%;}
.note .flex .items h1 {margin-bottom: 0.35em;}
.note .flex .items p {font-size: 1em;}
.note .flex .items .button {width: 50%; margin: 1.5em 0;}
.note .flex .items ul {font-size: 0.8em; list-style: none;}
.note .flex .items ul li {padding: 0.5em 0}
.note .flex .items ul li:before {font-family: FontAwesome; content: "\f05d"; font-size: 1.6em; vertical-align: middle; margin-right: 0.5em;}
.note .flex .items .box {width: 100%; height: 100%;}

.about .content {padding: 3em 30% 3em 2em; background-color: var(--bgcolor1);}
.about .content h2 {margin-bottom: 0.5em;}
.about .content p {line-height: 1.75; margin-bottom: 0.75em;}

.head-block {display: flex; flex-direction: column; width: 100%; align-items: center;}
.head-block h2 {margin-bottom: 0.5em;}
.head-block p {width: 60%; text-align: center;}

.services {padding: 4em 0;}
.services .flex {flex-direction: row; flex-wrap: wrap; gap: 1.5em;}
.services .flex .items {width: calc(50% - 0.75em); padding: 1em; border: 1px solid #ccc; border-radius: 0.5em;}
.services .flex .items span {display: flex; align-items: center; justify-content: center; font-size: 1.6em; width: 2em; height: 2em; background-color: var(--bgcolor1); line-height: 1; border-radius: 0.5em;}
.services .flex h3 {margin: 1em 0 0.5em;}
.services .flex .items:hover {border-color: var(--bgcolor2);}
.services .flex section {position: relative; width: calc(33.33% - 1em); display: flex; flex-direction: column; padding: 1em 1em 6em 1em; margin-top: 1em; border: 1px solid var(--bgcolor2); border-radius: 0.5em;}
.services .flex section p.bid {font-size: 1.6em; font-weight: 600; color: var(--bgcolor2); margin: 0.5em 0;}
.services .flex section ul {font-size: 0.8em; list-style: none;}
.services .flex section ul li {padding: 0.5em 0}
.services .flex section ul li:before {font-family: FontAwesome; content: "\f05d"; font-size: 1.6em; vertical-align: middle; margin-right: 0.5em;}
.services .flex section .button {position: absolute; left: 1em; width: calc(100% - 2em); bottom: 2em;}
.services .flex section.noactive {border-color: #ccc;}
.services .flex section.noactive .button {color: var(--bgcolor2); background-color: var(--bgcolorW); border: 1px solid var(--bgcolor2);}
.services .flex section.noactive .button:hover {background-color: var(--bgcolor1);}
.services .flex section.noactive:hover {box-shadow: 0.25em 0.25em 0.5em #ccc;}
.services .flex section .sector {font-size: 0.8em; padding: 0.25em 0.75em; left: 33%; top: -1em; color: var(--bgcolorW); background-color: var(--bgcolor2); border-radius: 1em;}

.work .flex {flex-direction: row; flex-wrap: wrap; gap: 1.5em; padding: 4em 2em; background-color: var(--bgcolor1);}
.work .flex .items {width: calc(25% - 1.2em); display: flex; flex-direction: column; align-items: center; text-align: center; padding: 1em 0;}
.work .flex .items span {display: flex; align-items: center; justify-content: center; font-size: 1em; width: 3em; height: 3em; color: var(--bgcolorW); background-color: var(--bgcolor2); line-height: 1; border-radius: 100%;}
.work .flex .items h4 {font-size: 0.8em; margin: 1em 0;}

footer {margin-top: 4em;}
footer .flex {flex-direction: row; flex-wrap: wrap; padding: 4em 2em; background-color: var(--bgcolor1);}
footer .flex .items {width: 33.33%; display: flex; flex-direction: column;}
footer figure {display: flex; align-items: center;}
footer figure img {width: 2em;}
footer figure figcaption {font-size: 0.8em; font-weight: 600; text-transform: uppercase; color: var(--bgcolor2); margin-left: 0.5em;}
footer menu, footer ul {list-style: none; font-size: 0.8em; padding: 1em 0 0 2em;}
footer h4 {margin-bottom: 0.5em;}
footer li {line-height: 2;}

.modal-content {display: inline-block; width: 30vw; line-height: 1; text-align: left; vertical-align: middle; padding: 0 2.5em 2.5em; background-color: #f7f7f7; box-shadow: 0 10px 15px -5px rgba(0, 0, 0, 0.3); overflow: hidden; transition: all 0.4s ease-out; transform: scale(0);}
.modal-content .close {font-size: 1.8em; position: absolute; top: 1em; right: 1em; color: #333; opacity: 0.3;}
.modal-content .modal-body {width: 100%; text-align: center; padding-top: 2.5em;}
.modal-content .modal-body span {font-size: 3.5em; color: var(--bgcolor2); margin: 20px 0;}
.modal-content .modal-body p {font-weight: 600; font-size: 1em; line-height: 1; color: var(--bgcolorD);}
.modal-content .close:hover {opacity: 1;}
.form-content {width: 100%; font-size: 0.8em; display: flex; flex-direction: row; flex-wrap: wrap; padding-top: 2em;}
.form-content p {font-size: 1em;}
.form-content .title {width: 100%; padding: 4em 0 1em; font-weight: normal;}
.form-content .title h4 {font-size: 2em; font-weight: 400; line-height: 1;}
.product-content .item-smal form .title {padding: 1em 0 2em;}
.product-content .item-smal form .title h4 {font-size: 1.6em;}
.form-content .form-group, .form-content .policy-note, .form-content .file-body {width: 50%; display: flex; flex-direction: column; position: relative; margin-bottom: 1.5em;}
.form-content .textarea {width: 100%;}
.form-content .form-group > label {position: absolute; left: 0; white-space: nowrap; max-width: 100%; overflow: hidden; top: 0; height: 3em; margin: 0; cursor: text; pointer-events: none; display: flex; align-items: center; color: var(--bgcolorD); opacity: 0.7; transition: all 0.2s ease;}
.form-content .form-group > label > span {margin: 0 0.4em; padding: 0 0.4em;}
.form-content .form-group > label > span.required::after {content: "*"; color: #ff0000; margin-left: 0.15em;}
.form-content .input-filled > label {top: -1.2em; height: 1em; line-height: 1em; font-size: 0.75em; color: inherit;}
.form-content .form-group i {position: absolute; right: 0.5em; width: 2.5em; font-size: 1em; font-style: normal; text-align: center; top: 1.5em; line-height: 2em; height: 2em; margin-top: -1em; opacity: 0.3; transition: all 0.3s ease; pointer-events: none;}
.form-content .form-group .form-control {display: block; width: 98%; height: 3em; font-size: 1em; color: var(--bgcolorD); padding: 0.5em 1.5em 0.5em 0.5em; background: none; border: 1px solid #bbb; border-radius: 0.5em;}
.form-content .textarea .form-control {width: 99%;}
.form-content .form-group textarea.form-control {height: auto;}
.form-content .form-group i.textarea {top: 1.5em;}
.form-content .form-group i.name::after {font-family: FontAwesome; content: "\f007";}
.form-content .form-group i.tel::after  {font-family: FontAwesome; content: "\f095";}
.form-content .form-group i.email::after {font-family: FontAwesome; content: "\f0e0";}
.form-content .form-group i.password {pointer-events: auto; cursor: pointer;}
.form-content .form-group i.password::after {font-family: FontAwesome; content: "\f070";}
.form-content .form-group i.openpassword::after {font-family: FontAwesome; content: "\f06e";}
.form-content .form-group i.textarea::after {font-family: FontAwesome; content: "\f040";}
.form-content .form-group i.search::after, .form-content .form-group button.search::after {font-family: FontAwesome; content: "\f002";}
.form-content .form-group .flex {flex-direction: row; flex-wrap: wrap; padding: 1em 0;}
.form-content .form-group .flex label {display: flex; flex-direction: column; flex: 1 0 auto; max-width: 50%; min-width: 19%; text-align: center;}
.form-content .form-group .flex label span {font-size: 0.8em;}
.form-content .policy-note label span {font-size: 0.8em;}
.form-content .file-body label {display: block; font-size: 0.8em; padding: 1.25em 1.5em 1em; text-align: center; background-color: #ddd; cursor: pointer;}
.form-content .file-body label span {cursor: pointer;}
.form-content .file-body label span::before {font-family: FontAwesome; content: "\f0c6"; font-size: 110%; margin-right: 0.5em;}
.form-content .file-body input {display: none;}
.form-content .button {font-size: 1em; width: 49%;}
.form-content .button:hover {border: 1px solid var(--bgcolor2);}
.popup {text-align: center; line-height: 100vh; background-color: rgba(0,0,0,0.5);}

.fancybox-inner {position: fixed; left: 0; width: 100%; top: 0; height: 100%; background-color: rgba(0,0,0,0.8);}
.fancybox-infobar {color: #ccc; font-size: 13px; -webkit-font-smoothing: subpixel-antialiased; height: 44px; left: 0; line-height: 44px; min-width: 44px; mix-blend-mode: difference; padding: 0 10px; pointer-events: none; top: 0;}
.fancybox-toolbar {right: 0; top: 0; z-index: 9999;}
.fancybox-toolbar .fancybox-button {color: #eee; background: rgba(30,30,30,.6); border: 0; cursor: pointer; display: inline-block; height: 44px; padding: 10px; position: relative; transition: color .2s; vertical-align: top; width: 44px;}
.fancybox-toolbar .fancybox-button i {font-size: 1.6em; font-style: normal;}
.fancybox-button-arrow {position: absolute; height: 100px; top: calc(50% - 50px); width: 70px; color: #eee; background: none; border: 0; cursor: pointer; z-index: 999;}
.fancybox-arrow-left {left: 0; padding: 31px 26px 31px 6px;}
.fancybox-arrow-right {right: 0; padding: 31px 6px 31px 26px;}
.fancybox-button-arrow i {font-size: 1.6em; font-style: normal; padding: 10px; background: rgba(30,30,30,.6);}
.fancybox-inner .container {height: 100%; padding: 44px 0;}
.fancybox-slide {width: 100%; height: 0; text-align: center; opacity: 0; visibility: collapse; transition: opacity 0.2s ease-out; transition: transform 0.35s ease-out; z-index: -1;}
.wish {height: 100%; opacity: 1; visibility: visible; z-index: 999;}
.zoom {transform: scale(1.5);}
.fancybox-slide img {width: auto; height: 100%; object-fit: contain; object-position: center; cursor: zoom-in;}
.zoom img {cursor: grab;}

.disclaimer {position: fixed; width: 40%; right: 1.5em; bottom: 1em; background-color: #ebebeb; border-radius: 0.25em; transform: translateY( calc(100% + 1em) ); transition: transform 0.6s ease-out; z-index: 8888;}
.disclaimer .flex {padding: 1.5em; flex-direction: row;}
.disclaimer .flex .text-item {display: flex; flex-direction: column; width: 95%; padding-right: 1em;}
.disclaimer .flex .text-item p {font-size: 0.8em; color: #111;}
.disclaimer .flex .text-item a {color: #7c69ef;}
.disclaimer .flex .but-item {display: flex; flex-direction: column; width: 5%;}
.disclaimer .flex .but-item .close {text-align: center; padding: 1em;}
.disclaimer-active {transform: translateY(0);}

@media(max-width:760px) {

html {min-width: 320px;}
.modal-open {padding-right: 0;}
.mobile {display: block;}
.desctop {display: none;}

.container {width: 100%; max-width: 760px; padding: 0 1em;}

header {font-size: 130%;}	
header menu {display: none;}
	
.note {font-size: 150%; padding: 5em 0 4em;}
.note .flex {flex-direction: column;}
.note .flex .items {width: 100%;}
.note .flex .items .box {height: 80vw; background-position: center;}
.note .flex h1 {margin-top: 1em;}
.note .flex .items .button {width: 100%;}
	
.about {font-size: 150%;}
.about .content {padding: 3em 2em;}
	
.head-block p {width: 100%;}
	
.services {font-size: 150%;}
.services .flex {flex-direction: column; }
.services .flex .items {width: 100%; padding: 2em;}
.services .flex section {width: 100%; padding: 2em 2em 6em 2em;}
.services .flex section .sector {left: 37%; top: -1em; color: var(--bgcolorW); background-color: var(--bgcolor2); border-radius: 1em;}
	
.work {font-size: 150%;}
.work .flex {flex-direction: column;}
.work .flex .items {width: 100%;}

footer {font-size: 150%;}
footer .flex {flex-direction: column;}
footer .flex .items {width: 100%; padding: 0 0 2em;}
footer menu, footer ul {padding: 0;}
	
.slider-track {position: relative; height: 90vw;}
.slider-track .slider-box figure {width: 100%;}

.middle-menu {flex-direction: row; flex-wrap: wrap; padding: 4em 0 0; gap: 1em;}
.middle-menu a {width: 48%; display: flex; flex: 0 1 auto; font-size: 12px;}

.gallery .gallery-body .gallery-track .gallery-line figure {width: 50%; min-width: 50%; height: auto;}
.gallery .gallery-body .gallery-track .gallery-line figure img {height: 100%;}


	
.modal-content {width: 90%; font-size: 130%; padding: 0 25px 25px;}
.form-content .form-group, .form-content .policy-note, .form-content .file-body {width: 100%;}
.form-content .form-group .form-control {width: 100%;}
.form-content .button {width: 100%;}
.form-content {font-size: 12px;}

.fancybox-slide img {width: 100%; height: 100%; object-fit: contain; object-position: center;}

table.table {width: 150%;}
	

.disclaimer {width: 100%; right: 0; bottom: 0; border-radius: 0; transform: translateY(100%);}
.disclaimer .flex .text-item p {font-size: 12px;}
.disclaimer .flex .but-item .close {font-size: 14px;}
.disclaimer-active {transform: translateY(0);}
}