*{
margin:0;
padding:0;
-webkit-font-smoothing: antialiased;
text-rendering: geometricPrecision;
-webkit-text-size-adjust: 100%;
-webkit-tap-highlight-color: transparent;
box-sizing: border-box;
-webkit-box-sizing: border-box;
}

html, body{
width: 100%;
min-width: 340px;
color: #000;
background: #fff;
font-family: var(--FF);
font-weight: 400;
font-size: 15px;
overflow-x: hidden;
overflow-y: auto;
}

body.hidden{
overflow-y: hidden;
}

input:autofill,
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus{
font-family: var(--FF);
font-size: 15px;
}

input[type="text"],
input[type="email"],
input[type="tel"] {
display: block;
width: 100%;
height: 30px;
margin: 0;
padding: 0;
font-family: var(--FF);
font-size: 15px;
font-weight: 300;
color: #000;
background: #fff;
border: 0;
border-bottom: 1px solid #e0e0e0;
outline: 0;
}

input[type="submit"],
button[type="submit"]{
font-family: var(--FF);
margin: 0;
}

input[type="checkbox"],
input[type="radio"]{
display: none;
}

input[type="checkbox"] + label,
input[type="radio"] + label{
cursor: pointer;
color: #555;
}

input[type="checkbox"] + label:before,
input[type="radio"] + label:before{
content: "";
display: inline-block;
vertical-align: middle;
width: 20px;
height: 20px;
margin: 0 10px 0 0;
background: #fff;
box-shadow: inset 0 0 0 1px #ccc;
-webkit-box-shadow: inset 0 0 0 1px #ccc;
border-radius: 3px;
-webkit-border-radius: 3px;
-webkit-transition: all 0.1s linear;
transition: all 0.1s linear;
}

input[type="checkbox"] + label:hover::before,
input[type="radio"] + label:hover::before{
background: var(--color3) no-repeat center center;
box-shadow: none;
-webkit-box-shadow: none;
}

input[type="checkbox"]:checked + label:before,
input[type="radio"]:checked + label:before{
background: var(--color3) url(images/check.svg) no-repeat center center;
background-size: 10px;
box-shadow: none;
-webkit-box-shadow: none;
}

input.lastname{
display: none !important;
}

table{
border-collapse: collapse;
border-spacing: 0;
border: 0;
}

tr:nth-child(2n+1){
background: #f5f5f5;
}

a{
color: var(--color1);
text-decoration: none;
-webkit-transition: all 0.1s linear;
transition: all 0.1s linear;
}

a:hover{
text-decoration: none;
color: var(--color3);
}

img{
border: 0;
font-size: 0;
vertical-align: middle;
image-rendering: -webkit-optimize-contrast;
user-select: none;
-webkit-user-select: none;
}

p{
font-size: 15px;
line-height: 1.5;
margin: 0;
}

b{
font-weight: 500;
}

h1{
display: inline-block;
vertical-align: top;
}

h2{
max-width: 500px;
width: 100%;
font-size: 50px;
font-weight: 500;
line-height: 1;
letter-spacing: -2px;
margin: 50px 0;
text-transform: uppercase;
color: var(--color2);
}

h3{
font-weight: 400;
font-size: 18px;
margin: 30px 0 0;
}

.br2{
border-radius: 2px;
-webkit-border-radius: 2px;
}

.br3{
border-radius: 3px;
-webkit-border-radius: 3px;
}

.br4{
border-radius: 4px;
-webkit-border-radius: 4px;
}

.button{
position: relative;
display: inline-block;
vertical-align: middle;
height: 44px;
margin: 0 15px;
padding: 0 15px;
font-family: var(--FF);
font-size: 11px;
font-weight: 400;
letter-spacing: 1px;
line-height: 44px;
text-align: center;
text-transform: uppercase;
color: #fff;
border: 0;
outline: 0;
overflow: hidden;
background: var(--color3);
cursor: pointer;
user-select: none;
-webkit-user-select: none;
}

.button:active{
box-shadow: inset 0 3px 5px rgb(0 0 0 / 13%);
-webkit-box-shadow: inset 0 3px 5px rgb(0 0 0 / 13%);
}

a.button:hover{
color: #fff;
}

.button .wave{
position: absolute;
background: rgb(255 255 255 / 80%);
pointer-events: none;
border-radius: 50%;
-webkit-border-radius: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-webkit-animation: background .5s linear;
animation: background .5s linear;
}

@keyframes background{
0%{opacity: 1; width: 0; height: 0;}
100%{opacity: 0; width: 300px; height: 300px;}
}

@-webkit-keyframes background{
0%{opacity: 1; width: 0; height: 0;}
100%{opacity: 0; width: 300px; height: 300px;}
}

.input{
position: relative;
margin: 20px 0 0;
}

.input.from label,
.input.delivery label{
display: block;
margin: 10px 0 0;
}



header {
position: fixed;
top: 0;
left: 0;
right: 0;
padding: 0 15px;
overflow: hidden;
background: transparent;
z-index: 1000;
-webkit-transition: all 0.2s linear;
transition: all 0.2s linear;
}

header.scroll {
background: var(--color1);
}

.header {
max-width: 1200px;
margin: 0 auto;
font-size: 0;
}

.logo {
display: inline-block;
vertical-align: middle;
margin: 15px 0;
}

.logo a {

}

.logo img {
display: block;
width: 80px;
}


.menu {
display: inline-block;
vertical-align: middle;
width: calc(100% - 282px);
text-align: center;
}

.menu ul {
display: block;
}

.menu li {
display: inline-block;
vertical-align: top;
margin: 0 15px;
}

.menu li a {
display: block;
font-size: 13px;
line-height: 1;
color: #fff;
}

.menu li a:hover {

}

.mMenu {
display: none;
}

.header .button {
display: inline-block;
vertical-align: middle;
width: 202px;
margin: 0;
}


#main {
padding: 0 15px;
}

#content {
max-width: 1200px;
margin: 0 auto;
position: relative;
}

.banner {
position: relative;
max-width: 1200px;
height: 760px;
margin: 0 auto;
}

.banner h1 {
position: relative;
max-width: 600px;
margin: 200px 15px 0;
font-size: 60px;
font-weight: 500;
line-height: 1;
letter-spacing: -2px;
text-transform: uppercase;
color: #fff;
z-index: 10;
    text-shadow: 2px 2px 10px #000;
}

.banner p {
position: relative;
max-width: 600px;
margin: 30px 15px 0;
color: #eee;
z-index: 10;
    text-shadow: 0 0 5px #000;
}

.banner .button {
position: relative;
margin: 40px 15px 0;
z-index: 10;
}

.banner img {
position: absolute;
top: 0;
left: 50%;
width: 1920px;
transform: translateX(-50%);
-webkit-transform: translateX(-50%);
filter: brightness(0.8);
-webkit-filter: brightness(0.8);
z-index: 0;
}


.section {
position: relative;
padding: 50px 0 100px;
font-size: 0;
z-index: 0;
}

.section::before {
content: "";
position: absolute;
top: 0;
left: 50%;
display: block;
width: 1920px;
height: 100%;
transform: translateX(-50%);
-webkit-transform: translateX(-50%);
z-index: -1;
}

.section:nth-child(1)::before,
.section:nth-child(3)::before {
background: #f7f7f4;
}

.section:nth-child(2)::before {
background: #eceeea;
}



.section h2 {
display: inline-block;
vertical-align: middle;
}

.section .descr {
display: inline-block;
vertical-align: middle;
max-width: 350px;
width: 100%;
margin: 0 0 0 calc(100% - 850px);
font-size: 13px;
color: #555;
}

.advantages {
display: grid;
grid-template-columns: repeat(3, 1fr);
border-top: 1px solid #ccc;
border-left: 1px solid #ccc;
}

.advantage {
position: relative;
min-height: 220px;
padding: 30px;
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
}

.advantageIcon {
    width: 75px;
    height: 75px;
    margin: 0 auto;
    font-size: 24px;
    font-weight: 800;
    line-height: 75px;
    text-align: center;
    color: #fff;
    background: var(--color2);
    border-radius: 50%;
	-webkit-border-radius: 50%;
overflow: hidden;
}

.advantageName {
margin: 30px 0 0;
font-size: 15px;
font-weight: 500;
color: var(--color1);
text-transform: uppercase;
}

.advantageText {
margin: 15px 0 0;
color: #555;
}

.advantageText p {
font-size: 13px;
}

.advantageText ul {
list-style: disc;
padding: 0 0 0 15px;
}

.advantageText li {
font-size: 13px;
}

.advantageNum {
position: absolute;
bottom: 10px;
right: 10px;
font-size: 14px;
font-weight: 500;
line-height: 1;
color: #ccc;
}


.applications {
display: flex;
gap: 15px;
padding: 0 0 15px;
overflow-x: auto;
scroll-snap-type: x mandatory;
scrollbar-width: thin;
scrollbar-color: var(--color2) transparent;
}

.application {
flex: 0 0 calc(33.33333% - 10px);
scroll-snap-align: start;
position: relative;
}

.applicationImg {
position: relative;
width: 100%;
}

.applicationImg img {
width: 100%;
height: 100%;
object-fit: cover;
}

.applicationName {
margin: 15px 0 0;
font-size: 15px;
font-weight: 500;
line-height: 1;
text-transform: uppercase;
}

.applicationText {
margin: 15px 0 0;
color: #555;
}

.applicationText p {
font-size: 13px;
}

.applicationText ul {
list-style: disc;
padding: 0 0 0 15px;
}

.applicationText li {
font-size: 13px;
}

.applicationNum {
position: absolute;
bottom: 10px;
right: 10px;
font-size: 12px;
font-weight: 500;
line-height: 1;
color: #fff;
text-shadow: 0 0 1px #000;
}


.items {
display: flex;
gap: 20px 20px;
flex-wrap: wrap;
}

.items .item {
flex: 0 0 calc(50% - 10px);
padding: 30px;
background: #fff;
overflow: hidden;
}

.items.i3 .item {
flex: 0 0 calc(33.33333% - 15px);
padding: 15px;
}

.items .item a.button {
display: block;
max-width: 200px;
margin: 30px 0 0 auto;
}

.items.i3 a.button {
max-width: unset;
}

.itemImg {
width: 100%;
max-height: 370px;
}

.itemImg img {
width: 100%;
height: 100%;
object-fit: contain;
}

.itemName {
margin: 30px 0 0;
font-size: 24px;
font-weight: 500;
letter-spacing: -1px;
text-transform: uppercase;
text-align: center;
}

.items.i3 .itemName {
font-size: 20px;
}

.itemProp {
display: table;
width: 100%;
margin: 30px 0 0;
padding: 15px 0;
border-top: 1px solid #ddd;
border-bottom: 1px solid #ddd;
}

.itemProp > div {
display: table-cell;
vertical-align: top;
}

.itemProp > div:nth-child(1) {
padding: 0 10px 0 0;
}

.itemProp > div:nth-child(2) {
padding: 0 10px;
border-left: 1px solid #ddd;
border-right: 1px solid #ddd;
}

.itemProp > div:nth-child(3) {
padding: 0 0 0 10px;
}

.itemProp b {
font-size: 12px;
font-weight: 600;
letter-spacing: -0.5px;
white-space: nowrap;
}

.itemProp p {
margin: 5px 0 0;
font-size: 9px;
font-weight: 500;
line-height: 1;
}




#contacts {
padding: 80px 0 0;
}

#contacts::before {
display: none;
}

#contacts h2 {
margin: 0;
color: #fff;
}

.footerButtons {
margin: 50px 0;
}

.footerButtons .button {
margin: 0 15px 0 0;
}


.feedbackForm {
display: inline-block;
vertical-align: middle;
width: calc(100% - 500px);
}

.feedbackForm form {
display: block;
max-width: 360px;
width: 100%;
margin: 0 0 0 auto;
padding: 30px;
background: #fff;
}

.feedbackForm h3 {
margin: 0;
font-size: 15px;
font-weight: 300;
text-transform: uppercase;
}

.feedbackForm label {
line-height: 30px;
}

.feedbackForm label span {
display: inline-block;
vertical-align: middle;
width: calc(100% - 34px);
line-height: 30px;
font-size: 11px;
font-weight: 400;
letter-spacing: -0.5px;
line-height: 1;
}

.feedbackForm .button {
width: 100%;
margin: 30px 0 0;
}

.feedbackForm .input.politic {
margin: 15px 0 0;
}

.input.error:before {
content: "!";
position: absolute;
bottom: 0px;
left: -15px;
display: block;
font-size: 21px;
font-weight: 600;
line-height: 30px;
color: red;
}


.fon {
position: absolute;
top: 0;
left: 50%;
width: 1920px;
transform: translateX(-50%);
-webkit-transform: translateX(-50%);
filter: brightness(0.5);
-webkit-filter: brightness(0.5);
z-index: -1;
}

.fon img {
width: 100%;
height: 100%;
object-fit: cover;
}



footer {
padding: 30px 0;
border-top: 1px solid #fff;
display: flex;
align-items: center;
justify-content: space-between;
}

.footerBlock {
font-size: 13px;
color: #eee;
}



#bloom {
position: fixed;
width: 200%;
height: 200%;
transform: translate3d(-50%, -50%, 0);
-webkit-transform: translate3d(-50%, -50%, 0);
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(3px);
z-index: 9999;
}

#loader {
position: fixed;
left: 50%;
top: 50%;
width: 48px;
height: 48px;
margin: -24px 0 0 -24px;
border: 5px solid;
border-color: var(--color2) transparent;
border-radius: 50%;
display: inline-block;
box-sizing: border-box;
-webkit-box-sizing: border-box;
animation: rotation 1s linear infinite;
-webkit-animation: rotation 1s linear infinite;
z-index: 9999999;
}

@keyframes rotation {
  0% {
transform: rotate(0deg);
  }
  100% {
transform: rotate(360deg);
  }
}

@-webkit-keyframes rotation {
  0% {
transform: rotate(0deg);
  }
  100% {
transform: rotate(360deg);
  }
}




@media screen and (max-width: 1024px){
.banner {
height: 600px;
}
.banner h1 {
font-size: 50px;
}
#contacts h2 {
font-size: 40px;
}
}

@media screen and (max-width: 900px){
#contacts h2 {
width: 50%;
}
.feedbackForm {
width: 50%;
}
}

@media screen and (max-width: 768px){
.banner img {
filter: brightness(0.5);
-webkit-filter: brightness(0.5);
}
.banner h1 {
max-width: unset;
margin: 80px 15px 0;
font-size: 40px;
text-align: center;
text-shadow: unset;
}
.banner p {
position: absolute;
bottom: 150px;
left: 50%;
width: 100%;
margin: 0;
padding: 0 15px;
text-align: center;
text-shadow: unset;
transform: translateX(-50%);
}
.banner .button {
position: absolute;
bottom: 50px;
left: 50%;
transform: translateX(-50%);
display: block;
max-width: 230px;
margin: 0;
}
.logo img {
width: 46px;
}
.menu {
display: block;
position: fixed;
top: 0;
bottom: 0;
right: -200px;
width: 200px;
padding: 60px 0 0;
background: var(--color1);
-webkit-transition: all 0.2s linear;
transition: all 0.2s linear;
z-index: 1000;
}
.menu li {
display: block;
margin: 0;
border-bottom: 1px solid #555;
}
.menu li:first-child {
border-top: 1px solid #555;
}
.menu li a {
font-size: 15px;
text-align: right;
padding: 15px;
}
.mMenu {
position: absolute;
top: 0;
right: 15px;
display: block;
width: 30px;
height: 60px;
cursor: pointer;
z-index: 1001;
}
.mMenu::before {
content: "";
position: absolute;
top: 25px;
left: 0px;
display: block;
width: 30px;
height: 3px;
background: #fff;
-webkit-transition: all 0.2s linear;
transition: all 0.2s linear;
}
.mMenu::after {
content: "";
position: absolute;
bottom: 25px;
left: 0px;
display: block;
width: 30px;
height: 3px;
background: #fff;
-webkit-transition: all 0.2s linear;
transition: all 0.2s linear;
}
.mMenu.active::before {
top: 27px;
transform: rotate(45deg);
}
.mMenu.active::after {
bottom: 30px;
transform: rotate(-45deg);
}
.header .button {
margin: 0 0 0 30px;
}
h2 {
font-size: 30px;
width: 50%;
}
#contacts h2 {
   font-size: 30px;
}
.section {
padding: 0 0 50px;
}
.section .descr {
width: 50%;
padding: 0 0 0 30px;
margin: 0;
}
.advantages {
grid-template-columns: repeat(2, 1fr);
}
.application {
flex: 0 0 40%;
}
.applicationName {
font-size: 13px;
}
.applicationText {
margin: 10px 0 0;
}
.applicationText p {
font-size: 11px;
}
.applicationText li {
font-size: 11px;
}
.items .item {
padding: 15px;
}
.itemName {
font-size: 18px;
}
.itemProp > div:nth-child(1) {
padding: 0 5px 0 0;
}
.itemProp > div:nth-child(2) {
padding: 0 5px;
}
.itemProp > div:nth-child(3) {
padding: 0 0 0 5px;
}
.feedbackForm {
width: 50%;
padding: 0 0 0 30px;
}
.footerButtons {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 15px;
}
.footerButtons .button {
margin: 0;
}
.footerBlock {
font-size: 11px;
}
}

@media screen and (max-width: 640px){
.banner h1 {
font-size: 30px;
}
.section h2 {
width: 100%;
max-width: unset;
text-align: center;
line-height: 1.2;
font-size: 26px;
margin: 50px auto 25px;
}
.section .descr {
width: 100%;
max-width: unset;
margin: 0 0 30px;
padding: 0;
text-align: center;

}
.advantages {
grid-template-columns: repeat(1, 1fr);
}
.application {
flex: 0 0 75%;
}
.items .item {
flex: 0 0 100%;
}
.items .item a.button {
margin: 30px auto 0;
}
#contacts {
padding: 50px 0 0;
}
#contacts h2 {
display: block;
width: 100%;
max-width: unset;
text-align: center;
}
.feedbackForm {
width: 100%;
padding: 0;
}
.feedbackForm form {
margin: 50px auto 0;
}
footer {
flex-wrap: wrap;
align-items: flex-start;
padding: 15px 0;
}
.footerBlock {
flex: 0 0 50%;
padding: 5px 15px;
text-align: center;
}
}

@media screen and (max-width: 360px){
.header .button {
margin: 0 0 0 15px;
}
.footerButtons .button {
width: 200px;
}
}