/**************** NORMALIZE ****************//**************** NORMALIZE ****************//**************** NORMALIZE ****************/

html {font-family: sans-serif; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased;}
body, body * {margin: 0px; padding: 0px; outline: none;}
div, section, article, header, footer, aside, nav, hgroup, h1, h2, h3, h4 {display: block; position: relative; margin: 0px; padding: 0px; box-sizing: border-box;}
a {outline: none; border: none; text-decoration: none; background-color: transparent;}
img {outline: none; border: none;}
input, optgroup, select, textarea {outline: none; color: inherit; margin: 0;}
button, select {text-transform: none;}
html input[disabled] {cursor: default;}
button::-moz-focus-inner, input::-moz-focus-inner {border: 0; padding: 0;}
input[type="checkbox"], input[type="radio"] {box-sizing: border-box; padding: 0;}
input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button {height: auto;}
input[type="number"].noarrow::-webkit-outer-spin-button, input[type="number"].noarrow::-webkit-inner-spin-button {-webkit-appearance: none; margin: 0;}
[type=number].noarrow {-moz-appearance: textfield;}
input[type="search"] {-webkit-appearance: textfield; box-sizing: content-box;}
input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration {-webkit-appearance: none;}
textarea {overflow: auto; resize: none;}
table {border-collapse: separate; border-spacing: 0;}



/**************** STANDART CLASS ****************//**************** STANDART CLASS ****************//**************** STANDART CLASS ****************/

.block {display: block !important;}
.inline {display: inline !important;}
.inblock {display: inline-block !important;}
.clear:after {content: ""; display: block; width: 0px; height: 0px; clear: both; visibility: hidden;}
.overhide {overflow: hidden !important;}
.hidebox {opacity: 0 !important; pointer-events: none !important; display: none !important;}
.waitbox {opacity: 0.5 !important; pointer-events: none !important;}



/**************** TEXT ****************//**************** TEXT ****************//**************** TEXT ****************/

.text-left {text-align: left !important;} .text-left input, .text-left textarea {text-align: left !important;} 
.text-right {text-align: right !important;} .text-right input, .text-right textarea {text-align: right !important;}
.text-center {text-align: center !important;} .text-center input, .text-center textarea {text-align: center !important;}
.text-capitalize {text-transform: capitalize;}
.text-nowrap {white-space: nowrap;}
.text-break {word-break: break-all;}
.text-for-copy {width: 1px; height: 1px; opacity: 0; overflow: hidden;}



/**************** FLEX ****************//**************** FLEX ****************//**************** FLEX ****************/

.flex, [class*='flex-'] {
    display: flex; display: -webkit-flex;
    flex-direction: row; -webkit-flex-direction: row;
    flex-wrap: wrap; -webkit-flex-wrap: wrap;
    justify-content: flex-start; -webkit-justify-content: flex-start;
    align-items: flex-start; -webkit-align-items: flex-start;
	align-content: flex-start; -webkit-align-content: flex-start;
}
.flex > * {flex: 0 0 auto; -webkit-flex: 0 0 auto;} [class*='flex-'] > * {flex: 0 0 auto; -webkit-flex: 0 0 auto;}
.flex-reverse {flex-direction: row-reverse; -webkit-flex-direction: row-reverse;}
.flex-column {flex-direction: column; -webkit-flex-direction: column;}
.flex-colreverse {flex-direction: column-reverse; -webkit-flex-direction: column-reverse;}
.flex-nowrap {flex-wrap: nowrap; -webkit-flex-wrap: nowrap;}
.flex-wrapreverse {flex-wrap: wrap-reverse; -webkit-flex-wrap: wrap-reverse;}
.flex-end {justify-content: flex-end; -webkit-justify-content: flex-end;}
.flex-between {justify-content: space-between; -webkit-justify-content: space-between;}
.flex-around {justify-content: space-around; -webkit-justify-content: space-around}
.flex-center {justify-content: center; -webkit-justify-content: center;}
.flex-iend {align-items: flex-end; -webkit-align-items: flex-end;}
.flex-icenter {align-items: center; -webkit-align-items: center;}
.flex-ibaseline {align-items: baseline; -webkit-align-items: baseline;}
.flex-istretch {align-items: stretch; -webkit-align-items: stretch;}
.flex-cend {align-content: flex-end; -webkit-align-content: flex-end;}
.flex-ccenter {align-content: center; -webkit-align-content: center;}
.flex-cbetween {align-content: space-between; -webkit-align-content: space-between;}
.flex-caround {align-content: space-around; -webkit-align-content: space-around;}

.flex > .nofix, [class*='flex-'] > .nofix {flex: 1 1 auto; -webkit-flex: 1 1 auto;}



/**************** UI ****************//**************** UI ****************//**************** UI ****************/

body {
    font-family: 'Roboto', sans-serif; font-style: normal; font-weight: 400; font-size: 14px; line-height: 1; letter-spacing: 0px; -webkit-font-smoothing: antialiased;
    color: rgb(43,46,66); background-color: rgb(255,255,255);
}
svg {transform: scale(1,-1);}

#body {
    position: fixed; top: 0px; left: 0px; width: 100%; height: 100%; color: rgb(43,46,66); background-color: rgb(255,255,255);
    transition: color ease 440ms, background-color ease 440ms; overflow-x: hidden; overflow-y: scroll; z-index: 1;
	/* нативное поэкранное пролистывание */
	scroll-snap-type: y mandatory; scroll-behavior: smooth;
}
#body svg {fill: rgb(253,67,68); stroke: rgb(253,67,68);}



/**************** FIX BLOCKS ****************//**************** FIX BLOCKS ****************//**************** FIX BLOCKS ****************/

.logo {display: block; position: fixed; top: 30px; left: 90px; width: 250px; height: 60px; cursor: pointer; z-index: 1000;}
.logo svg {display: block; width: 100%; height: 100%; fill: rgb(43,46,66) !important; stroke: rgb(43,46,66) !important; transition: all ease 440ms;}

.main-menu-lnk {position: fixed; top: 51px; right: 107px; width: 30px; height: 22px; cursor: pointer; z-index: 1000;}
.main-menu-lnk b {
    display: block; position: absolute; right: 0px; height: 3px; background-color: rgb(24,26,49); border-radius: 3px;
    transition: width linear 120ms, color ease 440ms, background-color ease 440ms;
}
.main-menu-lnk b:nth-child(1) {top: 0px; width: 85%;}
.main-menu-lnk b:nth-child(2) {top: 9px; width: 100%;}
.main-menu-lnk b:nth-child(3) {top: 18px; width: 70%;}
.main-menu-lnk:hover b {width: 100%;}

.fix-menu {position: fixed; bottom: 45px; left: 90px; z-index: 1000;}
.fix-menu span {display: block; margin-right: 40px; font-weight: 500; font-size: 15px; line-height: 1; color: rgb(43,46,66); cursor: pointer; transition: color ease 440ms;}
.fix-menu span.sel {color: rgb(43,46,66); transition: color ease 440ms;}
.fix-menu b {display: block; width: 1px; height: 30px; margin-right: 40px; background-color: rgb(171,171,171); transition: background-color ease 440ms;}

#main-menu {position: fixed; top: 0px; right: -501px; width: 500px; height: 100%; background-color: rgb(43,46,66); transition: right ease 300ms; z-index: 10000;}
#main-menu.open {right: 0px;}
#main-menu .close {position: absolute; top: 37px; right: 95px; width: 50px; height: 50px; cursor: pointer; z-index: 100;}
#main-menu .close:before, #main-menu .close:after {
    content: ""; display: block; position: absolute; top: 23px; right: 5px; width: 41px; height: 3px;
    background-color: rgb(255,255,255); transform: rotate(45deg);
}
#main-menu .close:after {transform: rotate(-45deg);}
#main-menu .mbox {padding: 120px 60px 0px 60px;}
#main-menu .mbox span {display: block; margin: 0px 0px 20px 0px; font-weight: 400; font-size: 25px; line-height: 1; color: rgb(255,255,255); cursor: pointer;}

/**//**//**/

@media screen and (max-width: 740px) {
    .logo {top: 20px; left: 30px; width: 175px; height: 40px;}
    .main-menu-lnk {top: 30px; right: 30px;}
    #main-menu {right: -301px; width: 300px;}
    #main-menu .mbox {padding: 75px 30px 0px 30px;}
    #main-menu .mbox span {font-size: 22px;}
}



/**************** SECTIONS ****************//**************** SECTIONS ****************//**************** SECTIONS ****************/

section {width: 100%; min-height: 100vh; padding: 105px 90px 105px 90px; scroll-snap-align: start; scroll-snap-stop: always;}
section .sbox {width: 100%;}

section .ttl {font-weight: 700; font-size: 40px; line-height: 1.35;}
section .ttl.mini {font-size: 20px; line-height: 1.35;}
section .text {font-weight: 400; font-size: 18px; line-height: 1.35;}
section .text.mini {font-size: 18px;}
section a {color: rgb(43,46,66); text-decoration: underline; transition: color ease 440ms;}

section ul.text {padding: 0px 0px 0px 26px; box-sizing: border-box;}
section ul.text li {padding: 0px 0px 5px 5px;}
section ul.text.mini {padding: 0px 0px 0px 22px;}
section ul.text.mini li {padding: 0px 0px 5px 5px;}

/**//**//**/

@media screen and (max-width: 1600px) {
    section .ttl {font-size: 36px; line-height: 1.2;}
    section .ttl.mini {font-size: 15px;}
    section .text {font-size: 16px;}
    section .text.mini {font-size: 16px;}
    section ul.text {padding: 0px 0px 0px 18px;}
    section ul.text li {padding: 0px 0px 5px 5px;}
    section ul.text.mini {padding: 0px 0px 0px 18px;}
}

/**//**//**/

@media screen and (max-width: 740px) {
    section .ttl {font-size: 28px;}
    section .ttl.mini {font-size: 20px;}
}



/**************** HOME ****************//**************** HOME ****************//**************** HOME ****************/

section.home .cbox {width: 100%; z-index: 10;}
section.home .cbox .ttl {padding: 0px 0px 60px 0px;}
section.home .cbox .lbox {max-width: 1080px; padding: 0px 0px 0px 60px;}

section.home .img {width: 35%; padding-top: 35%; margin-left: -100%; z-index: 1;}
section.home .img svg {display: block; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; fill: rgb(253,67,68) !important; stroke: rgb(253,67,68) !important;}

/**//**//**/

@media screen and (max-width: 1600px) {
    section.home .cbox .ttl {padding: 0px 0px 30px 0px;}
    section.home .cbox .lbox {padding: 0px 0px 0px 25px;}
    section.home .img {width: 25%; padding-top: 25%;}
}

/**//**//**/

@media screen and (max-width: 1200px) {
    section.home .img {width: 35%; padding-top: 35%; opacity: 0.25;}
}

/**//**//**/

@media screen and (max-width: 460px) {
    section.home .img {width: 100%; padding-top: 100%; opacity: 0.05;}
}



/**************** SERVICES ****************//**************** SERVICES ****************//**************** SERVICES ****************/

section.services .cbox {width: 100%;}
section.services .cbox .ttl {padding: 0px 45px 30px 0px; line-height: 48px;}
section.services .cbox .lbox {width: 100%; max-width: 1200px;}
section.services .cbox .lbox .list {width: 50%;}
section.services .cbox .lbox .list:nth-child(1) {padding: 0px 30px 30px 0px;}
section.services .cbox .lbox .list:nth-child(2) {padding: 0px 0px 30px 30px;}
section.services .cbox .lbox .list:nth-child(3) {padding: 0px 30px 0px 0px;}
section.services .cbox .lbox .list:nth-child(4) {padding: 0px 0px 0px 30px;}
section.services .cbox .lbox .list-ttl {padding: 0px 0px 30px 73px;}
section.services .cbox .lbox .list-ttl .img {position: absolute; top: 0px; left: 0px; width: 48px; height: 48px;}
section.services .cbox .lbox .list-ttl .img svg {display: block; width: 100%; height: 100%;}
section.services .cbox .lbox .list-ttl .ttl.mini {padding: 5px 0px 0px 0px; line-height: 1.35 !important;}
section.services .cbox .lbox .list ul {padding: 0px 0px 0px 95px;}

/**//**//**/

@media screen and (max-width: 1600px) {
    section.services .cbox .ttl {line-height: 42px;}
    section.services .cbox .lbox {max-width: 860px;}
    section.services .cbox .lbox .list:nth-child(1) {padding: 0px 20px 20px 0px;}
    section.services .cbox .lbox .list:nth-child(2) {padding: 0px 0px 20px 20px;}
    section.services .cbox .lbox .list:nth-child(3) {padding: 0px 20px 0px 0px;}
    section.services .cbox .lbox .list:nth-child(4) {padding: 0px 0px 0px 20px;}
    section.services .cbox .lbox .list-ttl {padding: 0px 0px 15px 55px;}
    section.services .cbox .lbox .list-ttl .img {width: 42px; height: 42px;}
    section.services .cbox .lbox .list ul {padding: 0px 0px 0px 75px;}
}

/**//**//**/

@media screen and (max-width: 1200px) {
    section.services .cbox .ttl {line-height: 1.2;}
    section.services .cbox .lbox {max-width: none;}
}

/**//**//**/

@media screen and (max-width: 740px) {
    section.services .cbox .lbox .list {width: 100%; padding: 0px 0px 20px 0px !important;}
    section.services .cbox .lbox .list:nth-child(4) {padding: 0px 0px 0px 0px !important;}
    section.services .cbox .lbox .list-ttl {padding: 0px 0px 15px 47px;}
    section.services .cbox .lbox .list-ttl .img {width: 37px; height: 37px;}
    section.services .cbox .lbox .list ul {padding: 0px 0px 0px 42px;}
}


/**************** MAINTENANCE ****************//**************** MAINTENANCE ****************//**************** MAINTENANCE ****************/

section.maintenance .cbox {width: 100%;}
section.maintenance .cbox {width: 100%; z-index: 10;}
section.maintenance .cbox .ttl {padding: 0px 0px 60px 0px;}
section.maintenance .cbox .lbox {max-width: 1080px; padding: 0px 0px 0px 60px;}

section.maintenance .img {width: 35%; padding-top: 35%; margin-left: -100%; z-index: 1;}
section.maintenance .img .size {position: absolute; top: 50%; left: 50%; width: 50%; padding-top: 50%; transform: translate(-50%,-50%);}
section.maintenance .img svg {display: block; position: absolute; width: 50%; height: 50%;}
section.maintenance .img svg.ico01 {top: 0px; left: 0px;}
section.maintenance .img svg.ico02 {top: 0px; right: 0px;}
section.maintenance .img svg.ico03 {bottom: 0px; right: 0px;}
section.maintenance .img svg.ico04 {bottom: 0px; left: 0px;}

/**//**//**/

@media screen and (max-width: 1600px) {
    section.maintenance .cbox .ttl {padding: 0px 0px 30px 0px;}
    section.maintenance .cbox .lbox {max-width: 600px; padding: 0px 0px 0px 25px;}
    section.maintenance .img {width: 25%; padding-top: 25%;}
    section.maintenance .img .size {width: 75%; padding-top: 75%;}
}

/**//**//**/

@media screen and (max-width: 1200px) {
    section.maintenance .img {width: 35%; padding-top: 35%; opacity: 0.3;}
    section.maintenance .img .size {transform: translate(-50%,-45%);}
}

/**//**//**/

@media screen and (max-width: 460px) {
    section.maintenance .img {width: 100%; padding-top: 100%; opacity: 0.1;}
    section.maintenance .img .size {width: 90%; padding-top: 90%; transform: translate(-50%,-50%);}
}



/**************** INDUSTRIES ****************//**************** INDUSTRIES ****************//**************** INDUSTRIES ****************/

section.industries .cbox {width: 100%; z-index: 10;}
section.industries .cbox .ttl {padding: 0px 0px 0px 0px;}
section.industries .cbox .ttl.mini {padding: 0px 0px 60px 0px;}
section.industries .cbox .lbox {padding: 0px 0px 0px 60px;}
section.industries .cbox .lbox .list:first-child {padding: 0px 120px 0px 0px;}

section.industries .img {width: 35%; padding-top: 35%; margin-left: -100%; z-index: 1;}
section.industries .img svg {display: block; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%;}

/**//**//**/

@media screen and (max-width: 1600px) {
    section.industries .cbox .ttl.mini {padding: 0px 0px 30px 0px;}
    section.industries .cbox .lbox {padding: 0px 0px 0px 25px;}
    section.industries .cbox .lbox .list:first-child {padding: 0px 60px 0px 0px;}
    section.industries .img {width: 25%; padding-top: 25%;}
}

/**//**//**/

@media screen and (max-width: 1200px) {
    section.industries .img {width: 35%; padding-top: 35%; opacity: 0.25;}
}

/**//**//**/

@media screen and (max-width: 460px) {
    section.industries .img {width: 100%; padding-top: 100%; opacity: 0.05;}
}



/**************** WHOM ****************//**************** WHOM ****************//**************** WHOM ****************/

section.whom .cbox {width: 100%; z-index: 10;}
section.whom .cbox .ttl {padding: 0px 0px 60px 0px;}
section.whom .cbox .lbox {max-width: 1080px; padding: 0px 0px 0px 60px;}

section.whom .img {width: 35%; padding-top: 35%; margin-left: -100%; z-index: 1;}
section.whom .img svg {display: block; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%;}

/**//**//**/

@media screen and (max-width: 1600px) {
    section.whom .cbox .ttl {padding: 0px 0px 30px 0px;}
    section.whom .cbox .lbox {max-width: 600px; padding: 0px 0px 0px 25px;}
    section.whom .img {width: 25%; padding-top: 25%;}
}

/**//**//**/

@media screen and (max-width: 1200px) {
    section.whom .img {width: 35%; padding-top: 35%; opacity: 0.3;}
}

/**//**//**/

@media screen and (max-width: 460px) {
    section.whom .img {width: 100%; padding-top: 100%; opacity: 0.1;}
}



/**************** CONTACTS ****************//**************** CONTACTS ****************//**************** CONTACTS ****************/

section.contacts .cbox {width: 50%;}
section.contacts .cbox .ttl {padding: 0px 0px 60px 0px;}
section.contacts .cbox .lbox {padding: 0px 210px 0px 0px; text-align: right;}
section.contacts .cbox .lbox .ttl.mini {padding: 0px 0px 0px 0px;}
section.contacts .cbox .lbox .text {padding: 0px 0px 15px 0px;}

section.contacts .map {height: 500px;}
section.contacts .map .size {position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; background-color: rgb(235,241,243);}

/**//**//**/

@media screen and (max-width: 1600px) {
    section.contacts .cbox .ttl {padding: 0px 0px 30px 0px;}
    section.contacts .cbox .lbox {padding: 0px 120px 0px 0px;}
    section.contacts .map {height: 350px;}
}

/**//**//**/

@media screen and (max-width: 1200px) {
    section.contacts .cbox .lbox {padding: 0px 30px 15px 0px; text-align: left;}
    section.contacts .map {height: 400px;}
}

/**//**//**/

@media screen and (max-width: 740px) {
    section.contacts .sbox {flex-wrap: wrap; -webkit-flex-wrap: wrap;}
    section.contacts .cbox {width: 100%;}
    section.contacts .map {width: 100%;}
}



/**************** BODY RED & GREY ****************//**************** BODY RED & GREY ****************//**************** BODY RED & GREY ****************/

#body.red {color: rgb(255,255,255); background-color: rgb(253,67,68);}
#body.red svg {fill: rgb(255,255,255); stroke: rgb(255,255,255);}
#body.red.grey {color: rgb(255,255,255); background-color: rgb(43,46,66);}

#body.red a {color: rgb(255,255,255);}
#body.red.grey a {color: rgb(255,255,255);}

#body.red .logo svg {fill: rgb(255,255,255) !important; stroke: rgb(255,255,255) !important;}
#body.red .main-menu-lnk b {background-color: rgb(255,255,255);}
#body.red .fix-menu span.sel {color: rgb(255,255,255);}
#body.red .fix-menu b {background-color: rgba(235,241,243,0.5);}

#body.red.grey .fix-menu span {color: rgb(255,255,255);}
#body.red.grey .fix-menu span.sel {color: rgb(238,34,12);}



/**************** BODY TOUCH ****************//**************** BODY TOUCH ****************//**************** BODY TOUCH ****************/

#body.touch {scroll-snap-type: none;}
#body.nosnap {scroll-snap-type: none;}

#body.touch section {min-height: 0px; padding: 90px 90px 90px 90px; color: rgb(255,255,255); background-color: rgb(253,67,68); scroll-snap-align: none; scroll-snap-stop: normal;}
#body.touch section svg {fill: rgb(255,255,255); stroke: rgb(255,255,255);}
#body.touch section.home {min-height: 100vh; padding: 105px 90px 105px 90px; color: rgb(43,46,66); background-color: rgb(240,240,240);}
#body.touch section.home svg {fill: rgb(253,67,68); stroke: rgb(253,67,68);}
#body.touch section.contacts {min-height: 100vh; color: rgb(255,255,255); background-color: rgb(43,46,66);}
#body.touch section.contacts a {color: rgb(255,255,255);}

#body.touch .logo {position: absolute; left: 90px;}
#body.touch .main-menu-lnk {position: absolute; right: 90px;}
#body.touch .fix-menu {display: none;}

#body.touch  #main-menu .close {right: 77px;}

/**//**//**/

@media screen and (max-width: 1200px) {
    #body.touch .logo {position: absolute; left: 60px;}
    #body.touch .main-menu-lnk {position: absolute; right: 60px;}
    #body.touch  #main-menu .close {right: 47px;}
    #body.touch section {padding: 60px 60px 60px 60px;}
    #body.touch section.home {padding: 105px 60px 60px 60px;}
}

/**//**//**/

@media screen and (max-width: 740px) {
    #body.touch .logo {top: 20px; left: 30px; width: 175px; height: 40px;}
    #body.touch .main-menu-lnk {top: 30px; right: 30px;}
    #body.touch  #main-menu .close {top: 16px; right: 17px;}
    #body.touch section {padding: 45px 30px 45px 30px;}
    #body.touch section.home {padding: 95px 30px 45px 30px;}
}