:root {
    --black: #000000;
    --gray: #777777;
    --lightgray: #9e9e9e;
    --xlightgray: #f2f2f2;
    --xxlightgray: #fbfbfb;
    --green: #1bae63;
    --red: #e43838;
    --white: #ffffff;
    --font-default: 'Montserrat', sans-serif;
    --filter-black: invert(0%) sepia(96%) saturate(27%) hue-rotate(235deg) brightness(107%) contrast(103%);
    --filter-white: invert(100%) sepia(0%) saturate(7487%) hue-rotate(337deg) brightness(109%) contrast(107%);
    --transition-filter: filter 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --transition-global: all 0.3. linear;
}

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, ins, kbd, q, s,
samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0; padding: 0; border: 0; font-family: inherit; font-size: 100%; font-weight: inherit; outline: 0; vertical-align: baseline
}
html {font-size: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%}
body {line-height: 1}
article, aside, details, figcaption, figure, footer, header, nav, section {display: block}
ol, ul {list-style: none}
table {border-collapse: separate; border-spacing: 0}
caption, th, td {font-weight: 400; text-align: left}
blockquote::before, blockquote::after, q::before, q::after {content: ''}
blockquote, q {quotes: '' ''}
a:focus {outline: 0}
a:active {outline: 0}
a img {border: 0}
em {font-style: italic}
u {text-decoration: underline}
strong {font-family: inherit; font-weight: 700}
.clear {display: block; clear: both}
.pointer {cursor: pointer}

/* General */
* {margin: 0; padding: 0}
*, *::after, *::before {-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box}

html {height: 100%!important; min-height: 100%!important; font-size: 16px}
html.mac {height: auto!important}
body {background-color: var(--white); width: 100%; height: 100%; min-height: 100%; margin: 0; padding: 0; color: var(--black); font-family: var(--font-default); font-size: 1rem; line-height: 30px; font-weight: 400; overflow-x: hidden; -webkit-overflow-scrolling: touch; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%-webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -o-user-select: none; user-select: none}

h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {margin: 0; padding: 0; color: var(--black); font-family: var(--font-default); font-weight: 600; line-height: 1.2; text-align: left; text-transform: none}
h1, .h1 {font-size: 2.5rem} h2, .h2 {font-size: 1.875rem} h3, .h3 {font-size: 1.625rem} h4, .h4 {font-size: 1.375rem} h5, .h5 {font-size: 1.125rem} h6, .h6 {font-size: 0.875rem}

a {color: var(--black); text-decoration: underline; -webkit-transition: all 0.3s; transition: all 0.3s}

/* header elements */
header {background-color: var(--white); display: block; width: 100%}
    header > .wrapper {min-height: 120px}
        header .logo {display: block; margin: 0 auto 0 15px; line-height: 0}
        nav .nav {height: 120px; font-size: 1.125rem; line-height: 1.2; font-weight: 500}
            nav .nav > li {display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin: 0 20px; position: relative}
            nav .nav > li::before, nav .nav > li::after {content: ''; background-color: var(--gray); width: 100%; height: 3px; opacity: 0; position: absolute; top: 50%; left: 0; -webkit-transition: all 0.3s; transition: all 0.3s}
            nav .nav > li::after {top: auto; bottom: 50%}
            nav .nav > li.active::before {opacity: 1; top: 0}
            nav .nav > li.active::after {opacity: 1; bottom: 0}
                nav .nav > li > a, nav .nav > li > span {display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; color: var(--black); text-decoration: none; cursor: pointer}
                nav .nav > li.withToggle > a::after, nav .nav > li.withToggle > span::after {content: ''; background-color: transparent; background-image: url('../art/svg/icon-chevron-down.svg'); background-repeat: no-repeat; background-position: center center; background-size: 10px; display: inline-block; width: 10px; height: 6px; margin-left: 6px; vertical-align: middle; -webkit-filter: var(--filter-black); filter: var(--filter-black)}
                nav .nav > li.active > a, nav .nav > li.active > span {color: var(--gray)}
                nav .nav .subMenu {
                    background-color: var(--white); width: 200px; color: var(--gray); font-size: 0.875rem; line-height: 18px; text-transform: none; opacity: 0; position: absolute; top: 100%; left: 0; z-index: -99999; visibility: hidden;
                    -webkit-box-shadow: 0 0 10px 0 rgba(0,0,0,0.2); -moz-box-shadow: 0 0 10px 0 rgba(0,0,0,0.2); box-shadow: 0 0 10px 0 rgba(0,0,0,0.2); -webkit-transition: all 0.3s ease; transition: all 0.3s ease
                }
                nav .nav .subMenu li {border-bottom: 1px solid var(--xlightgray)}
                    nav .nav .subMenu li a {display: block; padding: 12px 10px 10px; text-decoration: none}
                    nav .nav .subMenu li.active > a {background-color: var(--xlightgray)}
        .callMe {background-color: var(--black); height: 60px; margin-left: 10px; padding: 16px 30px 0; border: 1px solid var(--black); color: var(--white); font-size: 1.375rem; font-weight: 600; line-height: 1.2; text-decoration: none; border-radius: 60px}
        .langSelector {position: relative}
            .langSelector #toggleSelector {
                background-color: var(--xlightgray); display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;
                width: 60px; height: 60px; margin: 0 15px 0 20px; padding-top: 0; font-size: 1.125rem; font-weight: 600; line-height: 1; text-transform: uppercase; cursor: pointer; border-radius: 60px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none
            }
            .openedLangPopup .langSelector #toggleSelector::after {content: ''; width: 100vw; height: 100vh; position: fixed; top: 0; left: 0; z-index: 1; cursor: default}
            .langSelector .langList {background-color: var(--white); padding: 6px 40px 5px 30px; opacity: 0; overflow: hidden; position: absolute; top: calc(100% + 10px); left: -35px; z-index: -99; visibility: hidden; -webkit-box-shadow: 0 23px 44px 0 rgba(75,65,50,0.27); -moz-box-shadow: 0 23px 44px 0 rgba(75,65,50,0.27); box-shadow: 0 23px 44px 0 rgba(75,65,50,0.27)}
            .openedLangPopup .langSelector .langList {opacity: 1; z-index: 2; visibility: visible}
                .langSelector .langList li {padding: 5px 0; font-size: 0.875rem; line-height: 18px; white-space: nowrap}
                    .langSelector .langList li a {color: var(--black); font-weight: 500; text-decoration: none}
                    .langSelector .langList li a span {margin-left: 19px; font-weight: 400; text-transform: lowercase}
                    .langSelector .langList li.selected a, .langSelector .langList li.selected a span {font-weight: 700}
        .header-mobile-btn {display: none}

/* slider elements */
#top-slider {background-color: var(--white); margin-bottom: 80px; padding: 0 60px}
    #top-slider .slider-for {width: 100%; max-width: 100%; margin: 0 auto; overflow: visible}
        #top-slider .slider-for .slick-list {overflow: visible}
            #top-slider .slider-for .slick-list .slick-slide {padding: 0 0; opacity: 0.6; -webkit-transition: opacity 0.5s cubic-bezier(0.4,0,0.2,1); transition: opacity 0.5s cubic-bezier(0.4,0,0.2,1)}
            #top-slider .slider-for .slick-list .slick-slide.slick-active {opacity: 1}
        #top-slider .slider-for .slider-box picture {display: block; height: 900px; position: relative}
            #top-slider .slider-for .slider-box picture img {width: 100%; height: 100%; position: absolute; top: 0; left: 0; -moz-object-fit: cover; -o-object-fit: cover; object-fit: cover; -moz-object-position: center; -o-object-position: center; object-position: center}

/* contact-line */
#contact-line {height: 210px; position: relative; z-index: 0}
#contact-line::before, #contact-line::after {content: ''; background: transparent no-repeat center center; width: 50vw; height: 100%; position: absolute; top: 0}
#contact-line::before {background-image: url('../art/contact-line-before.webp'); left: 0; z-index: 1}
#contact-line::after {background-image: url('../art/contact-line-after.webp'); right: 0; z-index: 1}
    #contact-line .wrapper {height: 210px; padding: 0; position: relative; z-index: 2}
        #contact-line .wrapper .col-sm-7 {margin-left: auto}
            #contact-line .wrapper .btnLink {background-color: var(--black); min-height: inherit; padding: 21px 50px 19px; color: var(--white); font-size: 1.875rem; font-weight: 400; border-radius: 98px}

/* planning-section */
#planning-section {padding: 88px 0 89px; overflow: hidden}
#planning-section.padding-top-0 {padding-top: 0}
    #planning-section .planning-section-title-left {display: inline-block; margin-bottom: 16px; white-space: nowrap; -webkit-animation: marquee 110s linear infinite; animation: marquee 110s linear infinite}
    #planning-section .planning-section-title-right {display: inline-block; white-space: nowrap; -webkit-animation: marquee-2 190s linear infinite; animation: marquee-2 190s linear infinite}
        #planning-section span {margin-right: 100px; color: var(--gray); font-size: 2rem; font-weight: 500; line-height: normal; text-transform: uppercase; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none}

/* footer elements */
footer {display: block; width: 100%}
    #fbefore {background-color: var(--xxlightgray); padding-top: 43px; padding-bottom: 42px; position: relative}
    #fbefore::after {content: ''; background: transparent url('../art/footer-after-3.webp') no-repeat left center; background-size: cover; width: calc((100vw - 75%) + 3.6%); height: 100%; position: absolute; top: 0; right: 0}
        #fbefore .wrapper .col-sm-9 .logo {margin-right: 90px}
        #fbefore .wrapper .col-sm-9 ul {list-style: none; margin: 0; padding: 0}
        #fbefore .wrapper .col-sm-9 ul:last-child {margin-right: 80px; margin-left: 100px}
            #fbefore .wrapper .col-sm-9 ul li {color: var(--gray); font-size: 1.125rem; line-height: 28px}
            #fbefore .wrapper .col-sm-9 ul li.title {margin-bottom: 18px; color: var(--black); font-size: 1.5rem; font-weight: 500; line-height: 30px; text-transform: uppercase}
                #fbefore .wrapper .col-sm-9 ul li a {color: inherit; text-decoration: none}
    #fafter {background-color: var(--black)}
        #fafter .wrapper {height: 80px; color: #c1c1c1; font-size: 1rem; line-height: 18px}
            #fafter .wrapper .lSide {margin-left: auto; text-align: right}
                #fafter .wrapper a {color: inherit; text-decoration: none}
                #fafter .wrapper .sep {margin: 0 10px}
            #fafter .wrapper .rSide {text-align: right}

/* main elements */
main {background-color: var(--white); display: block; width: 100%}
    main > .wrapper {padding: 0 15px 160px}

        .menu-category {}
            .menu-category .lSide {line-height: 0; overflow: hidden; position: relative}
            .menu-category .lSide::before {content: ''; display: block; width: 100%; padding-top: 58.16%}
                .menu-category .lSide picture img {
                    width: 100%; height: 100%; position: absolute; top: 50%; left: 50%; -webkit-filter: grayscale(0%); filter: grayscale(0%); -moz-object-fit: cover; -o-object-fit: cover; object-fit: cover; -moz-object-position: center; -o-object-position: center; object-position: center;
                    -webkit-transform: translate(-50%,-50%); -moz-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); transform: translate(-50%,-50%); -webkit-transition: var(--transition-filter); transition: var(--transition-filter)
                }
            .menu-category .rSide {display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center}
                .menu-category .rSide .menu-category-data {width: 100%; padding: 0 60px}
                    .menu-category .rSide .menu-category-data p.title {margin-bottom: 22px}
                    .menu-category .rSide .menu-category-data p.desc {margin-bottom: 25px; font-size: 1.125rem; line-height: 22px}
                    .menu-category .rSide .menu-category-data .btnLink {}
            .menu-category.text-left .rSide {-webkit-box-ordinal-group: 0; -ms-flex-order: -1; order: -1; text-align: right}
                .menu-category.text-left .rSide .menu-category-data p.title {text-align: right}
                .menu-category.text-left .rSide .menu-category-data p.desc {text-align: right}

        .mTitle {height: 180px; margin-bottom: 100px; position: relative; z-index: 1}
        .mTitle::before {content: ''; background-color: var(--xlightgray); display: block; width: 100vw; height: 100%; position: absolute; top: 0; left: 50%; z-index: -1; transform: translateX(-50vw);}
        .menu-content {-webkit-box-align: start; -ms-flex-align: start; align-items: flex-start}
            .menu-content h2, .menu-content h3, .menu-content h4, .menu-content h5, .menu-content h6 {margin-bottom: 33px}
            .menu-content p {margin-bottom: 29px; padding-bottom: 0}
            .menu-content ul {list-style: none; margin: 0 0 29px; padding: 0; line-height: 30px}
                .menu-content ul li {padding-left: 39px; position: relative}
                .menu-content ul li::before {content: ''; background: transparent url('../art/svg/icon-circle.svg') no-repeat center center; background-size: 10px; width: 10px; height: 10px; position: absolute; top: 10px; left: 16px; -webkit-filter: var(--filter-black); filter: var(--filter-black)}
            .menu-content .menu-data {display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center}
                .menu-content .menu-data .menu-data-desc {width: 100%}
                .menu-content .menu-data.lSide .menu-data-desc {padding-right: 45px}
                .menu-content .menu-data.rSide .menu-data-desc {padding-right: 45px}
            .menu-content picture {display: block; line-height: 0; position: relative}
            .menu-content picture::before {content: ''; display: block; width: 100%; padding-top: 94.20%}
                .menu-content picture img {width: 100%; height: 100%; position: absolute; top: 50%; left: 50%; -moz-object-fit: cover; -o-object-fit: cover; object-fit: cover; -moz-object-position: center; -o-object-position: center; object-position: center; -webkit-transform: translate(-50%,-50%); -moz-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); transform: translate(-50%,-50%)}
        .menu-catalog {margin-right: -30px; margin-left: -30px}
            .menu-catalog .outerBox {-ms-flex: 0 0 calc(25% - 30px); flex: 0 0 calc(25% - 30px); max-width: calc(25% - 30px); margin-right: 30px; margin-left: 30px; padding: 0; border: 1px solid var(--xlightgray)}
                .menu-catalog .outerBox a {display: block; padding: 5px; text-decoration: none}
                    .menu-catalog .outerBox a picture::before {padding-top: 141.33%}
                        .menu-catalog .outerBox a picture img {-webkit-filter: grayscale(0%); filter: grayscale(0%); -webkit-transition: var(--transition-filter); transition: var(--transition-filter)}
                    .menu-catalog .outerBox a .title {display: block; margin: 5px 10px 15px; color: inherit; line-height: 1.4}

/* global */
.none {display: none} .block {display: block} .inline {display: inline-block} .bTable {display: table} .bTableRow {display: table-row} .bTableCell {display: table-cell} .floatLeft {float: left} .floatRight {float: right} .hidden {overflow: hidden}
.flex {display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap}

.align-items-start {-webkit-box-align: start; -ms-flex-align: start; align-items: flex-start}
.align-items-end {-webkit-box-align: end; -ms-flex-align: end; align-items: flex-end}
.align-items-center {-webkit-box-align: center; -ms-flex-align: center; align-items: center}
.align-items-stretch {-webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch}

.align-self-start {-ms-flex-item-align: start; align-self: flex-start}
.align-self-end {-ms-flex-item-align: end; align-self: flex-end}
.align-self-center {-ms-flex-item-align: center; align-self: center}

.align-content-start {-ms-flex-line-pack: start; align-content: flex-start}
.align-content-end {-ms-flex-line-pack: end; align-content: flex-end}
.align-content-center {-ms-flex-line-pack: center; align-content: center}

.justify-content-start {-webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start}
.justify-content-end {-webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end}
.justify-content-center {-webkit-box-pack: center; -ms-flex-pack: center; justify-content: center}
.justify-content-between {-webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between}
.justify-content-around {-ms-flex-pack: distribute; justify-content: space-around}

.flex-column {-webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column}

.flex-wrap {-ms-flex-wrap: wrap; flex-wrap: wrap}
.flex-nowrap {-ms-flex-wrap: nowrap; flex-wrap: nowrap}

.wrapper {width: 100%; max-width: 1440px; margin: 0 auto}
.row {margin-right: -15px; margin-left: -15px}
.boxBeforeAfter::before, .boxBeforeAfter::after {content: ''; display: block; clear: both}

.col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12 {width: 100%; padding-right: 15px; padding-left: 15px}

.col-sm-1 {-webkit-box-flex: 0; -ms-flex: 0 0 8.333333%; flex: 0 0 8.333333%; max-width: 8.333333%}
.col-sm-2 {-webkit-box-flex: 0; -ms-flex: 0 0 16.666667%; flex: 0 0 16.666667%; max-width: 16.666667%}
.col-sm-3 {-webkit-box-flex: 0; -ms-flex: 0 0 25%; flex: 0 0 25%; max-width: 25%}
.col-sm-4 {-webkit-box-flex: 0; -ms-flex: 0 0 33.333333%; flex: 0 0 33.333333%; max-width: 33.333333%}
.col-sm-5 {-webkit-box-flex: 0; -ms-flex: 0 0 41.666667%; flex: 0 0 41.666667%; max-width: 41.666667%}
.col-sm-6 {-webkit-box-flex: 0; -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%}
.col-sm-7 {-webkit-box-flex: 0; -ms-flex: 0 0 58.333333%; flex: 0 0 58.333333%; max-width: 58.333333%}
.col-sm-8 {-webkit-box-flex: 0; -ms-flex: 0 0 66.666667%; flex: 0 0 66.666667%; max-width: 66.666667%}
.col-sm-9 {-webkit-box-flex: 0; -ms-flex: 0 0 75%; flex: 0 0 75%; max-width: 75%}
.col-sm-10 {-webkit-box-flex: 0; -ms-flex: 0 0 83.333333%; flex: 0 0 83.333333%; max-width: 83.333333%}
.col-sm-11 {-webkit-box-flex: 0; -ms-flex: 0 0 91.666667%; flex: 0 0 91.666667%; max-width: 91.666667%}
.col-sm-12 {-webkit-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%}

/* form element */
.form {background-color: var(--xxlightgray); margin: 30px 0 0; padding: 15px 30px}
    .form .descBlock {margin-bottom: 30px}

form .input, form select, form textarea, form .capcsa_input, form .input-text {
	background-color: var(--white); width: 100%; height: 46px; margin: 0; padding: 2px 15px 0; border: 1px solid #c3c3c3; color: var(--darkgray); font-family: inherit; font-size: 0.875rem; font-weight: 400; line-height: 1.2;
	outline: none; resize: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; border-radius: 3px; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s
}
form .input-text {background: var(--xlightgray); padding-top: 15px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none}
form textarea {height: 100px; padding: 15px}
form select {background-color: var(--white); background-image: url('../art/svg/icon-chevron-down.svg'); background-position: right 15px top 18px; background-repeat: no-repeat; background-size: 12px; padding-right: 35px; -webkit-appearance: none; -moz-appearance: none; appearance: none}
    form select option {background-color: var(--white); font-size: 0.875rem}

.btn, .btnLink {
	background-color: var(--white); display: inline-block; min-width: inherit; min-height: 42px; padding: 1px 25px 0; border: 1px solid var(--black); color: var(--black); font-family: inherit; font-size: 1rem; font-weight: 500; line-height: 1.2; text-align: center; text-decoration: none;
	text-transform: none; outline: none; cursor: pointer; position: relative; z-index: 0; -webkit-appearance: none; -moz-appearance: none; appearance: none; border-radius: 21px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;
    -webkit-transition: all 0.5s cubic-bezier(0.4,0,0.2,1); -moz-transition: all 0.5s cubic-bezier(0.4,0,0.2,1); transition: all 0.5s cubic-bezier(0.4,0,0.2,1)
}
.btn.big, .btnLink.big {min-height: 52px; padding-right: 40px; padding-left: 40px; font-size: 1rem; font-weight: 600; border-radius: 32px}
.btn.small, .btnLink.small {min-height: 32px; padding-right: 20px; padding-left: 20px; font-size: 0.875rem; border-radius: 16px}
.btnLink {padding-top: 11px; padding-bottom: 8px} .btnLink.big {padding-top: 17px; padding-bottom: 13px} .btnLink.small {padding-top: 7px; padding-bottom: 5px}
.btn.arrow::before, .btnLink.arrow::before, .btn.arrow::after, .btnLink.arrow::after {
    content: ''; background: url('../art/svg/icon-arrow-right-short.svg') no-repeat center center; background-size: 20px; display: inline-block; width: 11px; height: 11px;
    -webkit-transition: all 0.5s cubic-bezier(0.4,0,0.2,1); -moz-transition: all 0.5s cubic-bezier(0.4,0,0.2,1); transition: all 0.5s cubic-bezier(0.4,0,0.2,1)
}
.btn.arrow::after, .btnLink.arrow::after {margin-left: 20px}
.btn.arrow::before, .btnLink.arrow::before {width: 0; margin-right: 0; opacity: 0; -webkit-filter: var(--filter-white); filter: var(--filter-white)}

a.link {padding: 0 3px; text-decoration: none; position: relative; z-index: 0; -webkit-transition: 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); -moz-transition: 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); transition: 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94)}
a.link::after {content: ''; background-color: var(--black); width: 100%; height: 1px; position: absolute; bottom: -2px; left: 0; z-index: -1; -webkit-transition: 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); -moz-transition: 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); transition: 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94)}

.graphDesign {position: relative}
    .graphDesign input {display: none; width: 0; height: 0; opacity: 0; visibility: hidden}
    .graphDesign label {display: inline-block; min-height: 22px; padding-left: 32px; color: var(--darkgray); font-size: 0.875rem; cursor: pointer; position: relative}
    .graphDesign label::before {content: ''; background-color: var(--white); width: 22px; height: 22px; border: 1px solid var(--lightgray); position: absolute; top: 3px; left: 0; border-radius: 3px}
    .graphDesign label::after {content: ''; background-color: var(--black); width: 12px; height: 12px; opacity: 0; position: absolute; top: 8px; left: 5px; border-radius: 3px}
    .graphDesign input[type="radio"] + label::before, .graphDesign input[type="radio"] + label::after {border-radius: 50%}
    .graphDesign input[type="checkbox"]:checked + label::after, .graphDesign input[type="radio"]:checked + label::after {opacity: 1}
    .graphDesign label a {color: var(--black); font-weight: 500; text-decoration: underline}

.form-group {margin-bottom: 15px}
.form-group:not(.graphDesign) label {}
    .form-group label {font-size: 0.875rem}
        .form-group label .required {color: var(--red)}
    .form-group .warning {width: 100%; padding-top: 2px; color: var(--red); font-size: 0.875rem; font-weight: 500; line-height: 1.2}
    .form-group.captcha label {width: 100%}
    .form-group.captcha .input {width: 120px; margin-right: 15px}
    .form-group.captcha img {margin: 7px 0}
.form-group.btnBlock {padding-top: 20px; text-align: center}

/* hover */
@media (-moz-touch-enabled: 0), (hover: hover){
    nav .nav > li:not(.active):hover::before {opacity: 1; top: 0}
    nav .nav > li:not(.active):hover::after {opacity: 1; bottom: 0}
        nav .nav > li:not(.active):hover > a {color: var(--gray)}
        nav .nav > li:hover > .subMenu {opacity: 1; top: 100%; z-index: 99999; visibility: visible}
        nav .nav .subMenu li:not(.active) a:hover {background-color: var(--xlightgray)}
    .callMe:hover {background-color: var(--white); color: var(--black)}
    .langSelector .langList li:not(.selected) a:hover {color: var(--gray)}
    #contact-line .wrapper .btnLink:hover {background-color: var(--white); color: var(--black)}
    #fbefore .wrapper .col-sm-9 ul li:not(.active) a:hover {color: var(--black)}
    #fafter .wrapper a:hover {color: var(--white)}
    .menu-category:hover .lSide picture img {-webkit-filter: grayscale(100%); filter: grayscale(100%)}
    .menu-catalog .outerBox a:hover {color: var(--gray)}
        .menu-catalog .outerBox a:hover picture img {-webkit-filter: grayscale(100%); filter: grayscale(100%)}
    .btn:hover, .btnLink:hover {background-color: var(--black); color: var(--white)}
    .btn.arrow:hover::before, .btnLink.arrow:hover::before {width: 11px; margin-right: 20px; opacity: 1}
    .btn.arrow:hover::after, .btnLink.arrow:hover::after {width: 0; margin-left: 0; opacity: 0}
    .graphDesign label a:hover {color: var(--gray); text-decoration: none}
    a.link:hover {color: var(--white)}
    a.link:hover::after {height: calc(100% + 4px)}
}

/* animation */
@-webkit-keyframes marquee {
    0% {-webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0)}
    100% {-webkit-transform: translate3d(-50%,0,0); transform: translate3d(-50%,0,0)}
}
@keyframes marquee {
    0% {-webkit-transform: translate3d(0,0,0); transform: translate3d(0, 0, 0)}
    100% {-webkit-transform: translate3d(-50%,0,0); transform: translate3d(-50%,0,0)}
}
@-webkit-keyframes marquee-2 {
    100% {-webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0)}
    0% {-webkit-transform: translate3d(-50%,0,0); transform: translate3d(-50%,0,0)}
}
@keyframes marquee-2 {
    100% {-webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0)}
    0% {-webkit-transform: translate3d(-50%,0,0); transform: translate3d(-50%,0,0)}
}

/* media */
@media (min-width: 1921px){
    #fbefore::after {width: calc((100vw - 75%) + 7.2%)}
        #fbefore .wrapper .col-sm-9 ul:last-child {margin-right: 80px}
}
@media (min-width: 993px){
    .pcNone {display: none!important}
    .mobileNone {display: block!important}
}
@media (max-width: 1440px){
    header .logo img {max-width: 220px; height: auto}
    nav .nav {font-size: 1rem}
    .callMe {padding-top: 18px; font-size: 1.175rem}
    .langSelector #toggleSelector {font-size: 1rem}
        .langSelector .langList {right: 15px; left: auto}
    #top-slider {padding: 0 15px}
    #fbefore .wrapper .col-sm-9 {-webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start}
        #fbefore .wrapper .col-sm-9 .logo img {width: 232px; height: auto}
        #fbefore .wrapper .col-sm-9 ul li {font-size: 1rem}
        #fbefore .wrapper .col-sm-9 ul li.title {font-size: 1.125rem}
    .menu-category {margin-right: 0; margin-left: 0}
}
@media (max-width: 1180px){
    header .logo img {max-width: 210px}
    nav .nav > li {margin-right: 15px; margin-left: 15px}
    .callMe {height: 50px; padding-top: 14px; padding-right: 15px; padding-left: 15px; font-size: 1rem}
    .langSelector #toggleSelector {width: 50px; height: 50px; margin-left: 15px; font-size: 1rem}
    #fbefore .wrapper .col-sm-9 .logo {margin-right: 70px}
    #fbefore .wrapper .col-sm-9 ul:last-child {margin-right: 0; margin-left: 70px}
}
@media (max-width: 1080px){
    header .logo img {max-width: 200px}
    nav .nav > li {margin-right: 10px; margin-left: 10px}
    #fbefore .wrapper .col-sm-9 .logo {margin-right: 50px}
        #fbefore .wrapper .col-sm-9 .logo img {width: 200px}
}
@media (max-width: 992px){
    .pcNone {display: block!important}
    .mobileNone {display: none!important}
    header > .wrapper {min-height: 80px}
    .callMe {height: 40px; margin-left: 0; padding-top: 10px}
    .langSelector #toggleSelector {width: 40px; height: 40px; font-size: 0.875rem}
    .header-mobile-btn {
        background-color: var(--black); display: block; float: right; width: 40px; height: 40px; margin: 0 15px 0 0; padding: 0; border: none; font-size: 0; line-height: 0; position: relative;
        cursor: pointer; vertical-align: middle; border-radius: 40px; -webkit-transition: var(--transition-global); -moz-transition: var(--transition-global); transition: var(--transition-global)
    }
    .openedNav .header-mobile-btn:after {content: ''; display: block; width: 100vw; height: 100vh; position: fixed; top: 0; left: 0; z-index: 98}
        .header-mobile-btn span {
            background-color: var(--white); display: block; width: calc(100% - 24px); height: 2px; font-size: 0; line-height: 0; overflow: inherit;
            position: absolute; top: 50%; left: 12px; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%)
        }
            .header-mobile-btn span:before, .header-mobile-btn span:after {
                content: ''; background-color: var(--white); width: 100%; height: 100%; position: absolute; left: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden;
                -webkit-transform: translateZ(0); transform: translateZ(0); transition: -webkit-transform 0.3s; transition: transform 0.3s; transition: transform 0.3s, -webkit-transform 0.3s
            }
            .header-mobile-btn span:before {top: -7px; -webkit-transform: rotate(0); -moz-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0)}
            .header-mobile-btn span:after {bottom: -7px; -webkit-transform: rotate(0); -moz-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0)}
        .openedNav .header-mobile-btn span {background-color: var(--black)}
            .openedNav .header-mobile-btn span:before, .openedNav .header-mobile-btn span:after {background-color: var(--white)}
            .openedNav .header-mobile-btn span:before {top: 0; -webkit-transform: rotate(135deg); -moz-transform: rotate(135deg); -ms-transform: rotate(135deg); transform: rotate(135deg)}
            .openedNav .header-mobile-btn span:after {bottom: 0; -webkit-transform: rotate(225deg); -moz-transform: rotate(225deg); -ms-transform: rotate(225deg); transform: rotate(225deg)}
    nav {background-color: transparent; width: auto; height: 100vh; padding: 0; text-align: left; position: fixed; top: 0; left: 0; z-index: 99; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none}
    	nav > .wrapper {
            background-color: var(--black); width: 100%; max-width: 414px; height: 100vh; height: calc(var(--vh, 1vh) * 100); margin: 0; padding: 0; opacity: 0; overflow: hidden; overflow-y: auto; position: fixed; top: 0; left: -105%; z-index: 999; -webkit-box-shadow: 0 0 70px 10px rgba(0,0,0,0.3); -moz-box-shadow: 0 0 70px 10px rgba(0,0,0,0.3); box-shadow: 0 0 70px 10px rgba(0,0,0,0.3);
            -webkit-transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94); -moz-transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94); transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94); will-change: transform; -webkit-overflow-scrolling: touch; -webkit-backface-visibility: hidden; backface-visibility: hidden
        }
    	.openedNav nav > .wrapper {opacity: 1; left: 0}
            nav .nav {display: block; width: 100%}
                nav .nav > li {display: block; width: 100%; margin: 0; border-bottom: 1px solid var(--gray); font-size: 1.125rem}
                nav .nav > li::before, nav .nav > li::after {display: none}
                    nav .nav > li > a, nav .nav > li > span {padding: 22px 15px; color: var(--white)}
                    nav .nav > li > a::after, nav .nav > li > a::after {display: none}
                    nav .nav .subMenu {width: 100%; font-size: 1rem; line-height: 24px; opacity: 1; position: relative; top: auto; z-index: 1; visibility: visible}
                        nav .nav .subMenu li a {padding: 15px 30px 13px}
    #top-slider {margin-bottom: 60px}
        #top-slider .slider-for .slider-box picture {height: auto; padding-top: 54.38%}
    #contact-line::before {display: none}
    #contact-line::after {width: 100vw}
        #contact-line .wrapper .col-sm-7 {-ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; text-align: center}
            #contact-line .wrapper .col-sm-7 .btnLink {min-height: 68px; padding: 22px 70px 20px; font-size: 1.375rem}
    #planning-section {padding: 48px 0 49px}
        #planning-section span {font-size: 2rem}
    #fbefore::after {display: none}
        #fbefore .wrapper .col-sm-9 {-webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%}
            #fbefore .wrapper .col-sm-9 .logo, #fbefore .wrapper .col-sm-9 ul, #fbefore .wrapper .col-sm-9 ul:last-child {margin: 0 auto}
        #fafter .wrapper .col-sm-6 {-ms-flex: auto; flex: auto; width: auto; max-width: inherit}
    main > .wrapper {padding-bottom: 100px}
        .menu-category .rSide .menu-category-data {padding: 30px 20px}
            .menu-category .rSide .menu-category-data p.desc {font-size: 1rem}
        .mTitle {height: auto; margin-bottom: 40px; padding: 40px 0}
        .menu-content .menu-data {-ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; margin-bottom: 40px}
            .menu-content .menu-data.lSide .menu-data-desc {padding-right: 0}
        .menu-content .rSide {-ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%}
        .menu-content .contact-form {-ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; margin-bottom: 40px}
    .menu-catalog .outerBox {-ms-flex: 0 0 calc(50% - 30px); flex: 0 0 calc(50% - 30px); max-width: calc(50% - 30px); margin: 0 15px 30px}
    h1, .h1 {font-size: 2rem}
}
@media (max-width: 768px){
    #top-slider {margin-bottom: 40px}
    #fafter .wrapper .col-sm-6 {-webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; text-align: center}
    .menu-category .lSide {-ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; padding: 0}
    .menu-category .rSide {-webkit-box-ordinal-group: 0; -ms-flex-order: -1; order: -1; -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; padding: 0; text-align: center!important}
        .menu-category .rSide .menu-category-data {padding: 20px 0}
            .menu-category .rSide .menu-category-data p.title {text-align: center!important}
            .menu-category .rSide .menu-category-data p.desc {text-align: center!important}
    .form-group.col-sm-4 {-ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%}
}
@media (max-width: 640px){
    #fbefore .wrapper .col-sm-9 .logo {width: 100%; margin-bottom: 20px; text-align: center}
        #fbefore .wrapper .col-sm-9 .logo img {width: 300px}
    #fbefore .wrapper .col-sm-9 ul {width: 100%; margin-bottom: 40px; text-align: center}
    #fbefore .wrapper .col-sm-9 ul:last-child {margin-bottom: 0}
    #fafter .wrapper {height: auto}
        #fafter .wrapper .copyright {width: 100%; padding-top: 15px}
        #fafter .wrapper .copyright::after {content: ''; background-color: var(--gray); display: block; width: 100%; height: 1px; margin: 15px 0; opacity: 0.5}
            #fafter .wrapper .sep {display: none}
        #fafter .wrapper .rSide {padding-bottom: 15px}
        #fafter .wrapper .rSide::before {content: ''; background-color: var(--gray); display: block; width: 100%; height: 1px; margin: 15px 0; opacity: 0.5}
}
@media (max-width: 576px){
    nav > .wrapper {max-width: calc(414px - 70px)}
    .callMe {display: none}
    .menu-catalog {margin-right: -7px; margin-left: -7px}
        .menu-catalog .outerBox {-ms-flex: 0 0 calc(50% - 14px); flex: 0 0 calc(50% - 14px); max-width: calc(50% - 14px); margin: 0 7px 14px}
            .menu-catalog .outerBox a .title {font-size: 1rem}
}
@media (max-width: 414px){
    nav > .wrapper {max-width: calc(100% - 70px)}
    h1, .h1 {font-size: 1.875rem}
}