@charset "utf-8"; 

@font-face {font-family: Roboto; font-weight: normal; font-style: normal; font-display: swap;
src: local("Roboto"), local("Roboto-Regular"), url(/css/fonts/Roboto.woff2) format(woff2);}
@font-face {font-family: Roboto; font-weight: bold; font-style: normal; font-display: swap;
src: local("Roboto Bold"), local("Roboto-Bold"), url(/css/fonts/Robotobold.woff2) format(woff2);}

@font-face {font-family: Bebas; font-weight: normal; font-style: normal; font-display: swap; 
 src: local("Bebas Neue Regular"), local("BebasNeueRegular"), url(/css/fonts/bebasneueregular.woff2) format(woff2);}

@font-face { font-family: Manrope;  font-weight: normal; font-style: normal; font-display: swap;
src: local("Manrope Regular"), local("Manrope-Regular"), url(/css/fonts/Manrope-Regular.woff2) format("woff2");}

@font-face { font-family: Manrope;  font-weight: bold; font-style: normal; font-display: swap;
src: local("Manrope Bold"), local("Manrope-Bold"), url(/css/fonts/Manrope-Bold.woff2) format("woff2");}


hr {border: 0; height: 2px; margin: 10px 0 30px; background-image: linear-gradient(to right, #ccc 50%, #337ab7 50%, #337ab7 60%, #ff9100 60%, #ff9100 70%, #05b5e6 70%, #05b5e6 80%, #b448b8 80%, #b448b8 90%, #ccc 90%, #ccc 100%); clear:both;}


:root {font-size: 16px; line-height:1.5; 
--padding-section: calc(50% - 650px); 
--padding-text: calc(50% - 600px);
--padding: 50px; }


/* 1401px */ 
@media (width <= 1401px) { :root {--padding-section: 50px;}	}

/* 1301px */ 
@media (width <= 1301px) { :root {--padding-text: 50px;}	}


/* 901px */ 
@media (width <= 901px) { :root {font-size: 14px; --padding-section: 30px; --padding-text: 30px;}	}



/* HEADER ========================================================================================= */


header {height:80px; background: #eee; position:relative; z-index:1;}

.logo {width:360px; height:60px; background: url(/css/logo.svg) center / contain no-repeat; position:absolute; top:10px; left:50px; z-index:10;} 

header [href*="tel"] {font:bold 120%/40px Roboto, sans-serif; color:#678; text-align:right; display:inline-block; position:absolute; top:20px; right:400px;
&:hover {color:#f25;} }
header [href*="tel"]:before {content: ""; height: 20px; width: 20px; background:#a97; position:absolute; top:10px; left:-30px; clip-path: polygon(50% 0%, 100% 0%, 50% 100%, 0% 100%);}


nav {width:140px; height:40px; position:absolute; top:20px; right:20px; overflow:hidden; }

header [href*="wa"], header [href*="t.me"], header [href*="max"] {width:40px; height:40px; display:block; position:absolute; 
&:hover {filter: hue-rotate(0.6turn);} }
header [href*="wa"] {top:0; right:0; background:url(/css/logo_Whatsapp.svg) 0 0 / contain no-repeat;}
header [href*="t.me"] {top:0; right:50px; background: url(/css/logo_Telegram.svg) 0 0 / contain no-repeat;}
header [href*="max"] {top:0; right:100px; background: url(/css/logo_Max.svg) 0 0 / contain no-repeat;}

header button {width:200px; height:40px; font: bold 90%/40px Manrope, sans-serif; color:#fff; letter-spacing:2px; text-align:center; text-transform:uppercase; background:#f25; border-radius:8px; display:block; cursor:pointer; border: 0; appearance: none; position:absolute; top:20px; right:170px; z-index:5; user-select: none; &:hover {color:#fff; background:#906;} }



/* 1101px */ 
@media (width <= 1101px) { 

header {height:150px; background: #fff; }
.logo {position:absolute; top:25px; left:30px; } 

header [href*="tel"] {font:bold 120%/30px Manrope, sans-serif; color:#467; text-align:left; padding:5px 0 0; top:auto; right:auto; left:30px; bottom:5px; border-top:2px solid red; &:before {display:none;} }


header button {width:200px; height:40px; font-size:90%; line-height: 40px; top:auto; right:20px; bottom:20px;
&:hover {color:#fff; background:#906;} }

}

/* 601px */ 
@media (width <= 601px) { 

nav {top:auto; right:20px; bottom:10px; }
header [href*="tel"] {font:bold 100%/20px Manrope, sans-serif; padding:3px 0 0;  top:auto; right:auto; left:20px; bottom:5px; }
header button {width:180px; height:40px; font-size:80%; top:auto; right:auto; bottom:-50px; left:10px;}
}

/* 501px */ 
@media (width <= 501px) { 

.logo {width:calc(100vw - 60px); aspect-ratio:1/6; top:20px; left:50%; translate:-50% 0;} 

}



/* SECTION  TITLE ========================================================================================= */

.title {width: 100%; aspect-ratio:3.3/1; background:url(/img/header.webp) right bottom / contain no-repeat, #678; position:relative;}

.title div {width: 50%; height:100%; display: grid; align-content: center; position:absolute; top:0; left:55px;}

.title h1 { font: normal 340%/1.1 Bebas, sans-serif; color:#ddd; text-align:left; padding:0; margin:0 0 40px; display:block; }
.title h1 b {font:bold 90%/1.1 Manrope, sans-serif; color:#fff; text-shadow:4px 4px 12px #0005; display:block;}


.title h2 {font: normal 240%/1.1 Bebas, sans-serif; color:#a97; text-align:left; letter-spacing: 0.2em; }
.title span { font: normal 100%/1.4 Manrope, sans-serif; color:#fff; text-align:left; text-transform:uppercase; letter-spacing:2px; white-space:pre-line; }
.title span b {font: bold 140%/1.6 Manrope, sans-serif; color:#fb9724; text-transform:none; padding:0 0 20px; margin:20px 0 0; display:inline-block; border-bottom:4px solid #a97;}


/* 1401px */ 
@media (width <= 1401px) { 

.title div {width: 45%;}

.title {aspect-ratio:3/1; background:url(/img/header.webp) right bottom / contain no-repeat, #678; }
.title h1 {font: normal 250%/1.1 Bebas, sans-serif; }
.title h1 b {font:bold 100%/1.1 Manrope, sans-serif; }

.title span {font: normal 90%/1.4 Manrope, sans-serif;}
.title span b {font: bold 120%/1.6 Manrope, sans-serif;}
}


/* 1101px */ 
@media (width <= 1101px) { 

.title {aspect-ratio:auto; background: url(/img/1100/header.webp) 0 0 / contain no-repeat; padding:43vw 30px 0; }

.title div {width: 100%; height:auto; display: block; position:relative; left:0; border-bottom:2px solid #a97; border-bottom:4px solid #a97;}

.title h1 {font: normal 300%/1.1 Bebas, sans-serif; color:#a97; margin:0 0 20px; }
.title h1 b {color:#f25;}

.title span {width: 100%; font: normal 100%/1.6 Manrope, sans-serif; color:#252525; letter-spacing:1px; padding:0 30vw 0 0; }
.title span b {font: bold 130%/1.6 Manrope, sans-serif; color: #789; border-bottom:none;}

}

/* 901px */ 
@media (width <= 901px) { .title span {padding:0 15vw 0 0;}  }


/* 601px */ 
@media (width <= 601px) { 

.title {background:url(/img/600/header.webp) right top / contain no-repeat; padding:53vw 30px 0; margin:0 0 30px;}
.title h1 {font-size:min(220%, 8vw); line-height:1.3;}
.title span {font: normal 90%/1.4 Manrope, sans-serif; padding:0; margin:0 0 20px;}

.title h2 {font: normal 200%/1.1 Bebas, sans-serif; color:#678;}
}


/* SECTION  TEXT ========================================================================================= */

.text {width: 100%; padding:30px var(--padding-text); margin:10px 0;}

.text p:first-of-type::first-letter {font-size: 300%; color:#fff; background: #678; padding: 6px 10px; margin-right: 8px; border-radius: 4px;
-webkit-initial-letter: 2; initial-letter: 2;}
.text p:first-of-type::first-line {font: bold 100%/1.6 Manrope, sans-serif; text-align:left;}

.text strong {font: normal 140%/1.6 Manrope, sans-serif; text-align:left; text-transform:uppercase; text-wrap: balance; color:#f25; margin:40px 0 0; display:block;}
.text p:last-of-type {padding:0 0 30px; margin:10px 0; border-bottom:15px solid #a97;}

/* 601px */ 
@media (width <= 601px) { 

.text {padding:0 var(--padding-text) 20px; margin:0;}

}





/* SECTION  NUMBERS ========================================================================================= */


.numbers {width: 100%; padding:50px var(--padding-section); margin:0 0 20px; display: grid; gap: 50px; grid-template-columns: repeat(3, 1fr); }

.numbers span {width: 100%; font-size: 80%; color:#666; line-height:1.6; text-align:center; text-transform:uppercase; letter-spacing:2px; display:block; padding:0 0 25px; border-bottom:1px solid #444;}
.numbers b {font: normal 400%/1.1 Bebas, sans-serif; color:#f25; display:block;}


/* 901px */ 
@media (width <= 901px) { 

.numbers {padding:20px; gap: 30px; }
.numbers b {font: normal 300%/1.1 Bebas, sans-serif; }
}

/* 601px */ 
@media (width <= 601px) { 

.numbers {grid-template-columns:1fr; }


}



/* SECTION  BUSINESS ========================================================================================= */

.business_h1 {font-family: Bebas, sans-serif; font-size:clamp(2rem, 2vw + 2rem, 400%); text-align:center; letter-spacing:2px; padding:0 50px; margin:0 0 30px;}

.business {width: 100%; aspect-ratio:4/1; background:#4a4a4a; padding:0 var(--padding-section); margin:50px 0 15%; position:relative;  }
.business:after {width: 20vw; height: 10%;  content: ""; background:#fff; display:block; position: absolute; top: 0; left: 50%; translate: -50% -5px;}

.business div {width: 1300px; min-height:120%; background:url(/img/business.webp) 0 0 / cover no-repeat, #aaa; position:absolute; top:0; left: 50%; translate: -50% 15%; z-index:5; box-shadow: 0 5px 15px 0 rgba(0, 0, 0, 0.3); display:flex; flex-direction: column; justify-content: flex-end; }

.business article {width: 80%; height:auto; font-size:130%; text-align:center; color:#906; background:#ffffff95; padding:20px; margin:0 auto; display:block; border-bottom:10px solid #fc0; backdrop-filter: blur(6px);}

.business article b {font: normal 300%/1.1 Bebas, sans-serif; color:#906; display:block;}

.business article span {font: bold 90%/1.5 Manrope, sans-serif; color:#222; text-wrap: balance; margin:20px 0; display:block;}


/* 1401px */ 
@media (width <= 1401px) { 
.business {aspect-ratio:3/1;}
.business div {width: calc(100% - 100px); aspect-ratio:5.5/1;}
}


/* 1101px */ 
@media (width <= 1101px) { .business {aspect-ratio:2/1; margin:50px 0 25%;}  }


/* 601px */ 
@media (width <= 601px) { 

.business_h1 {padding:0 30px;}

.business {aspect-ratio:auto; background:transparent; padding:0 30px; margin:50px 0;  }
.business:after {display:none;}

.business div {width: 100%; aspect-ratio:1/1.3; background:url(/img/business.webp) center / cover no-repeat, #aaa; position:relative; top:0; left: 0; translate: 0 0;
box-shadow: none;}

.business article {font-size:110%; }
.business article b {font: normal 250%/1 Bebas, sans-serif; }
.business article span {font: bold 80%/1.3 Manrope, sans-serif; margin:10px 0; }

}




/* SECTION  STEPS ========================================================================================= */

.steps_h2 {font: normal 280%/1.1 Bebas, sans-serif; color:#f31; text-align:center; letter-spacing: 1px; padding:0 50px;}


.steps {width: 100%; padding:20px var(--padding-section); margin:20px 0; display: grid; gap: 20px; grid-template-columns: repeat(3, 1fr); }

.steps > div {width: 100%; position: relative; overflow: hidden; padding:80px 20px 10px; background: #f5f5f5; position:relative;
display: grid; gap: 10px 0; grid-template-columns: 1fr; grid-template-rows: 1fr 2fr; border-bottom:5px solid #bd7;  }

.steps > div:after { content: ""; width: 40px; height: 40px; background: url(/css/circle.svg) 0 0 / cover no-repeat; position: absolute; top: 25px; left: 40px;  }

.steps > div:nth-child(2):after {filter: hue-rotate(0.2turn);}
.steps > div:nth-child(3):after {filter: hue-rotate(0.4turn);}

.steps > div b {font: bold 120%/1.3 Manrope, sans-serif; color:#f25; text-transform:uppercase; text-wrap: balance; margin:0 0 20px;}


/* 901px */ 
@media (width <= 901px) { 

.steps {grid-template-columns: 1fr; }
.steps > div {display: block; }
.steps > div b {font: bold 120%/1.3 Manrope, sans-serif; margin:0 0 10px;}
}

/* 601px */ 
@media (width <= 601px) { .steps_h2 {font: normal 200%/1.1 Bebas, sans-serif; letter-spacing: 1px; padding:0 30px;}  }


/* SECTION SUPPORT ========================================================================================= */

.support {width: 100%; background:#f25; padding:50px var(--padding-section) 100px; margin:50px 0; position:relative;  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 50% 90%, 0% 100%);}

.support h3 {font: normal 250%/1.2 Bebas, sans-serif; color:#fff; text-align:center;  letter-spacing: 0.1em; margin:0 0 30px;}


/* DETAILS ▼▼▼▼▼ */

.details-group {background:#fff; padding:30px 30px 0; margin:50px var(--padding-section);}

details {font-size:110%; white-space:pre-line; hyphens: auto; padding:0 0 20px; margin:0 0 20px;
overflow: hidden; border-bottom: 1px dotted #aaa; transition: height 300ms ease-in-out;}
details:last-child {border-bottom: 0;}

summary {font: bold 100%/1.2 Manrope, sans-serif; color: #212121; hyphens: none; position: relative; list-style: none; padding-left: 50px; outline: 0; cursor: pointer; text-transform: uppercase; transition: color 300ms ease-in-out;}
[open] > summary {color: #f25;}

summary::-webkit-details-marker {display: none;}
summary:before, summary:after {content: ""; position: absolute;}
summary:before {left: 20px; top: 50%; height: 2px; margin-top: -1px; width: 16px; background: #f25;}
summary:after {left: 28px; top: 50%; height: 16px; margin-top: -8px; width: 2px; margin-left: -1px; background: #f25; transition: all 300ms ease-in-out;}
[open] summary:after {opacity: 0; translate: 0 25%; }


/* 901px */ 
@media (width <= 901px) { 
.support {padding:50px 0 20px; clip-path: none;}
.details-group {padding:30px 30px 0;}
details {font-size:100%;}
}


/* SLOGAN ========================================================================================= */

.Slogan {font-family: Bebas, sans-serif; font-size:clamp(2rem, 3vw + 2rem, 12rem); line-height:1; color:#0e0e0e; text-align:left; text-wrap: balance; padding:20px var(--padding-section);}
.Slogan b {color:#fc351f;}



/* SECTION PROFIT ========================================================================================= */


.profit {width: 100%; height:auto; padding:0 var(--padding-section); margin:20px 0;  }

.profit div {margin:0 auto; position:relative; 
display: grid; gap: 40px; grid-template-columns: repeat(2, 1fr); place-items: center;
background: url(/img/profit.webp) left center / contain no-repeat, 
linear-gradient(200deg, hsl(200deg 19% 55%) 0%, hsl(200deg 18% 54%) 23%, hsl(200deg 17% 52%) 36%, hsl(200deg 16% 50%) 45%, hsl(200deg 17% 47%) 54%, hsl(200deg 17% 45%) 62%, hsl(200deg 18% 43%) 71%, hsl(200deg 19% 40%) 80%, hsl(200deg 20% 37%) 100%);}

.profit span {width: 40%; height:100%; margin:0 0 0 60%; display:flex; flex-direction:column; justify-content: center; align-items: start;}

.profit span b {font: bold 120%/1.4 Manrope, sans-serif; display:block; margin:0 0 10px;}
.profit span { font: normal 100%/1.4 Manrope, sans-serif; color:#fff; text-align:left;  white-space:pre-line;}

.profit article {height:100%; font-size:110%; text-align:left; text-transform:uppercase; white-space:pre-line; background: #fff; padding:50px 50px; display:block;}
.profit h4 {font: bold 120%/1.2 Manrope, sans-serif; color:#212121; letter-spacing: 0.1em; padding:0 0 10px; margin:0 0 20px; border-bottom:1px solid #f25;}
.profit article b {font: normal 200%/1.6 Bebas, sans-serif; color:#f31;}

/* 1401px */ 
@media (width <= 1401px) { .profit span {width: 35%; margin:0 0 0 65%;} }

/* 1301px */ 
@media (width <= 1301px) {

.profit div {grid-template-columns: 1fr 1fr;}
 .profit span {width: 40%; margin:0 0 0 70%;} 
.profit article {font-size:100%;}
.profit article b {font: normal 180%/1.6 Bebas, sans-serif;}
}


/* 1101px */ 
@media (width <= 1101px) { 

.profit div {width: 100%; height:auto; background: transparent; display:block;}
.profit span {width:100%; min-height:330px; color:#444; padding:0 20vw 0 280px; margin:0; background: url(/img/1100/profit.webp) left top / 260px auto no-repeat; border-bottom:5px solid #fc0; display:flex;}

.profit article {padding:30px 0;}
.profit h4 {font: bold 110%/1.2 Manrope, sans-serif; }
}

/* 501px */ 
@media (width <= 501px) { 

.profit span {background: url(/img/1100/profit.webp) left top / 210px 280px no-repeat; padding:280px 0 0 0; border-bottom:none;}
.profit span b {width: 100%; padding:20px 0 0; border-top:5px solid #fc0; }

.profit article {font-size:90%; padding:30px 0;}
.profit article b {font: normal 170%/1.5 Bebas, sans-serif; }
}



/* TEAM ========================================================================================= */

.team {width: 100%; min-height:100px; font: bold 110%/1.4 Manrope, sans-serif; text-align: center; text-transform:uppercase; letter-spacing:3px; color:#fff; background: #678; padding:25px var(--padding-section); margin:60px 0 0; display:grid; align-self: center; border-bottom:1px solid #000;}
.team span {font-size:80%; display:block;}




/* SECTION CONTACTS ========================================================================================= */


.contacts {height: auto; min-height: 600px; margin:0; background: url(/img/footer.webp) left center / cover no-repeat; display: grid; grid-template-columns: 1fr 1fr; gap: 0;}

.contacts_left, .contacts_right {color:#fff; padding: 20px var(--padding); overflow:hidden;}

.contacts_right h4 {font: bold 140%/1.2 Manrope, sans-serif; color:#f5f5f5; text-transform:uppercase; letter-spacing: 0.1em; padding:10px 0; margin:30px 0;border-bottom:1px solid #888;}

address {font: bold 110%/1.4 Manrope, sans-serif; line-height:3; text-align:left; color:#fff; white-space:pre-line; margin:0 0 30px;}
address a {font: normal 100%/1.2 Manrope, sans-serif; color:#fd9;  &:hover {color:#3cf;} }


/* 1401px */ 
@media (width <= 1401px) { .contacts {background: #444; grid-template-columns: 30px 1fr; }  }

/* 601px */ 
@media (width <= 601px) { 
.contacts {min-height: auto; grid-template-columns: 20px 1fr;}  
.contacts_left, .contacts_right {padding:10px 30px 10px 20px; }
address {font: bold 90%/2 Manrope, sans-serif; line-height:2; margin:0 0 10px;}
}



/* BUTTON ZAKAZ ========================================================================================= */

.zakaz {width: 240px; height: 60px; font: bold 110%/60px Manrope, sans-serif; text-transform: uppercase; letter-spacing:2px; color: #fff; background: #f06; display: block; margin: 25px auto; cursor:pointer; outline: none; border: none; position: relative; 
&:hover {background-color: #099;} }

.zakaz:before, .zakaz:after { content: ""; height: 30px; position: absolute; width: 30px; transition: 1s;}
.zakaz:before {border-top: 4px solid #f06; left: 0; top: -8px;}
.zakaz:after { border-bottom: 4px solid #f06; bottom: -8px; right: 0;}

.zakaz:hover:before, .zakaz:hover:after { height: 100%; width: 100%; border-color:#099;}

.contacts_right .zakaz {margin: 35px 0;}


/* 601px */ 
@media (width <= 601px) { .zakaz {width: 180px; height: 46px; font: bold 100%/40px Manrope, sans-serif; letter-spacing:.1em; border-radius:4px;}  }




/* ТЕКСT ========================================================================================= */

h1, h2, h3 {line-height:1.2; text-transform:uppercase; white-space:pre-line; display:block; position:relative; hyphens: none; }

p:not([class]) {font-size: 110%; color:#222; line-height:1.6; text-align:justify; padding:10px 0 5px; white-space:pre-line; hyphens: auto;}

small {font-size:85%; color:#444;}

ul:not([class]) {margin:15px 0 10px; overflow:hidden;}
ul:not([class]) li {font: normal 100%/1.4 Manrope, sans-serif; text-align:left; white-space:pre-line; color:#1f2b37; margin: 4px 0 4px 20px; hyphens: auto; }
ul:not([class]) li:before {content:""; width:10px; height:10px; background:#b44; float:left; margin:8px 0 0 -20px; overflow:hidden; border-radius: 50%;}




/* КОНТАКТЫ ▼▼▼▼▼▼▼▼▼▼▼ */


form {width:100%; height:auto; max-width:800px; background:#fff; padding:30px 20px 20px; margin:30px 0; filter: drop-shadow(0 0 8px #0004); }

textarea {width: 100%; min-height:180px; line-height:1.6; padding:14px; margin:0 0 10px; border:1px solid #aaa5; appearance: none; resize:none; overflow: auto; }

input[type="checkbox"] {display: none; }
input[type="checkbox"] + label {width: calc(100% - 40px); height: 36px; font-size:90%; line-height: 1.2; text-align:left; color:DarkSlateGrey; display: flex; justify-content: start; align-items: center; position: relative; cursor: pointer; translate: 30px 0; margin:0 0 15px;}

#contactForm input[type="checkbox"] + label {translate: 50px 0;}

input[type="checkbox"] + label:before {position: absolute; content: ""; width: 36px; height: 36px; line-height: 36px; left: 0; border: 4px solid #e25; translate: -50px 0;}

input[type="checkbox"] + label:hover {color:OrangeRed; }

input[type="checkbox"]:checked + label:before {content: "\2731"; font-size:180%; line-height:30px; font-weight:bold; color:Crimson; text-align: center; color:#fff; background:LimeGreen; border: 4px solid LimeGreen; }
input[type="checkbox"]:checked ~ button[type="submit"], input[type="checkbox"]:checked ~ #submitZAKAZ {opacity: 1; cursor: pointer; pointer-events: auto;}

button[type="submit"], #submitZAKAZ {width:180px; font-size:120%; line-height:50px; text-transform:uppercase; text-align:center; color: #fff; background: #f55; margin:25px auto 10px; display:block; opacity: 0.2; border: 0; border-radius:4px; appearance: none; outline: none; cursor: not-allowed; pointer-events: none; 
&:hover, &:focus {background: #904;} }

input[name="nickname"] {width:.5%; height:5px!Important; position: absolute; left: -9999px;}

.message {width: 100%; font-size:90%!Important; text-align:center; color: OrangeRed; margin:10px 0; display: block; visibility: visible; z-index:999;}






/* ОТПРАВИТЬ ЗАЯВКУ DIALOG////////////////////////////////////////////////////// */

body:has(dialog[open]) {overflow: hidden;}
dialog::backdrop {background: rgba(0, 0, 0, .7); overflow: hidden; z-index:20;}

dialog {width:90%; max-width:600px; background:#f8f8f8; padding:0 30px; border-radius:10px; border:none; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
 opacity: 0; transform: translate(0, 50px); transition: all .3s linear;}

dialog[open] {opacity: 1; transform: translate(0, 0);}
@starting-style {dialog[open] {opacity: 0; transform: translate(0, 50px); } }

.close_dialog {width:30px; height:30px; display: block; position:absolute; top:10px; right:10px; background:url(/css/form_close.svg) 0 0 no-repeat; background-size: contain; transition: 0.8s; cursor:pointer; border: 0; appearance: none;
&:hover {transform: rotate(90deg) scale(1.0);} }




#zakaz_form {width:100%; height:auto; background:transparent; display:block; }

legend {width:100%; font-size:140%; line-height:1.2; text-align:center; text-transform:uppercase; color:#f15; pointer-events: none; cursor: not-allowed;}

#zakaz_form input[type="text"], #zakaz_form input[type="tel"], #zakaz_form input[type="email"], #zakaz_form input[type="search"] {width:100%; height:40px; line-height:40px; font-size:110%; color: #111; padding:0 10px; margin:10px 0 0; display:block; background:#fff; position:relative; outline:none; }

#zakaz_form input[type="search"] {font-size:85%; text-transform:uppercase; color: #000; background:transparent;}

#zakaz_form textarea {width: 100%; min-height:180px; line-height:1.6; background:#fff; padding:14px; margin:10px 0; border:1px solid #aaa5; appearance: none; resize:none; overflow: auto; }

label {width:100%; height:auto; font-size:80%; line-height:30px; color:#222; text-align:left; text-transform:uppercase; display:block; position:relative; top: 10px; left: 0; }

#zakaz_form input[type="checkbox"] + label {translate: 50px 0;}


/* 501px */ 
@media (width <= 501px) {

dialog {padding:0 5px; box-shadow: none;}

#zakaz_form input[type="text"], #zakaz_form input[type="tel"], #zakaz_form input[type="email"], #zakaz_form input[type="search"] {width:100%; height:30px; line-height:30px; font-size:100%;  }

#zakaz_form input[type="search"] {font-size:95%; }

label {font-size:60%; line-height:30px;  }
}