html {
box-sizing: border-box;
scroll-behavior: smooth;
}

*{
scroll-behavior: smooth;
} 

*,
::before,
::after {
box-sizing: inherit;
}

*,
:focus {
outline: none;
outline: 0;
}

body {
font-family: 'Montserrat', sans-serif;
background: #fff;
color: #000;
font-weight: 400;
line-height: 1.7;
font-size: 16px;
margin: 0 auto;
}

a {
text-decoration: none;
}

.wrapper {
width: 100%;
max-width: 1200px;
margin: 0 auto;
}

/* header */

header {
width: 100%;
margin: 0 auto;
height: 70px;
display: flex;
}

header .wrapper {
display: flex;
flex-direction: row;
flex-grow: 3;
}

header nav {
width: 74%;
}

header .lg-bl {
width: 20%;
margin-top: 12px;
}

header .cnt-ic-bl {
display: flex;
width: 6%;
margin-top: 20px;
}

header nav button {
background: none;
border: 0;
color: #fff;
cursor: pointer;
font: inherit;
line-height: normal;
overflow: visible;
padding: 0;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}

header nav ul {
padding: 0;
margin: 0;
width: 100%;
max-width: 765px;
margin: 20px auto 0 auto;
}

header nav ul li {
padding-right: 20px;
}
header nav ul li:last-child {
padding-right: 0;
}

header nav a {
color: #fff;
font-size: 16px;
font-weight: 500;
position: relative;
text-transform: uppercase;
transition: 0.5s; 
}

header nav a:hover {
color: #f7941d;
}

/* --------- * Menu styles */

.menu::before {
content: "";
position: fixed;
z-index: 1;
display: block;
visibility: hidden;
opacity: 0;
background-color: rgba(0, 0, 0, 0.5);
top: 0;
left: 0;
width: 100%;
height: 100%;
transition: opacity 0.3s ease-out;
}

.menu_list {
display: flex;
flex-direction: column;
height: 100%;
width: 100%;
max-width: 20rem;
position: fixed;
z-index: 1;
top: 0;
right: 0;
margin: 0;
background-color: #f2f2f2;
transition: 0.4s;
padding-top: 60px;
visibility: hidden;
transform: translateX(100%);
overflow-y: auto;
-webkit-overflow-scrolling: touch;
overscroll-behavior-y: contain;
}

.menu_list_inner {
list-style: none;
display: flex;
flex-direction: inherit;
}

.has-open-menu .menu::before {
visibility: visible;
opacity: 1;
}

.has-open-menu .menu_list {
transform: translateX(0);
visibility: visible;
}

.menu_button--close {
position: absolute;
top: 1rem;
right: 1.75rem;
font-size: 2.5rem;
color: #f7941d;
}

.menu_button--open {
font-size: 2rem;
}

@media screen and (min-width: 55rem) {
	
.menu_list {
max-width: 100%;
height: auto;
transform: translateX(0);
visibility: visible;
position: static;
background-color: transparent;
flex-wrap: wrap;
flex-direction: row;
padding-top: 0;
}

.has-open-menu .menu::before {
display: none;
}

.has-open-menu .menu_list {
transform: translateX(0);
visibility: visible;
}

.menu_button {
display: none;
}
}

header .cnt-ic-bl .cnt-bl {
display: flex;
flex-direction: row;
flex-grow: 2;
}

header .cnt-ic-bl .cnt-bl .cnt-bl-lft,
header .cnt-ic-bl .cnt-bl .cnt-bl-rght {
width: 50%;
}

header .cnt-ic-bl .cnt-bl .cnt-bl-lft a {
display: block;
width: 28px;
height: 30px;
margin-right: 7px;
background: url(../images/icon-viber.png) no-repeat;
background-size: cover;
transition-duration:0.96s;
-webkit-transition-duration:0.96s;
-moz-transition-duration:0.96s;
-o-transition-duration:0.96s;
-ms-transition-duration:0.96s;
}

header .cnt-ic-bl .cnt-bl .cnt-bl-lft a:hover {
background: url(../images/icon-viber-hv.png) no-repeat;
}

header .cnt-ic-bl .cnt-bl .cnt-bl-rght a {
display: block;
width: 30px;
height: 30px;
margin-right: 7px;
background: url(../images/telegram-icon.png) no-repeat;
background-size: cover;
transition-duration:0.96s;
-webkit-transition-duration:0.96s;
-moz-transition-duration:0.96s;
-o-transition-duration:0.96s;
-ms-transition-duration:0.96s;
}

header .cnt-ic-bl .cnt-bl .cnt-bl-rght a:hover {
background: url(../images/telegram-icon-hv.png) no-repeat;
}

header .cnt-ic-bl .cnt-bl .cnt-bl-last a {
display: block;
width: 30px;
height: 30px;
background: url(../images/icon-instagram.png) no-repeat;
background-size: cover;
transition-duration:0.96s;
-webkit-transition-duration:0.96s;
-moz-transition-duration:0.96s;
-o-transition-duration:0.96s;
-ms-transition-duration:0.96s;
}

header .cnt-ic-bl .cnt-bl .cnt-bl-last a:hover {
background: url(../images/icon-instagram-hv.png) no-repeat;
}

/* banner */

#banner  {
background: url(../images/banner-bl.jpg) no-repeat;
background-size: cover;
margin-top: -70px;
height: 689px;
}

#banner .txt-bl {
padding-top: 160px;
}

#banner .txt-bl h1 {
color: #fff;
font-size: 36px;
font-weight: 700;
text-transform: uppercase;
text-align: center;
padding: 0;
margin: 0;
line-height: 1.2;
}

#banner .txt-bl h2 {
color: #fff;
font-size: 36px;
font-weight: 700;
text-transform: uppercase;
text-align: center;
padding: 30px 0 0 0;
margin: 0;
line-height: 1.2;
}

#banner .tl-bl {
text-align: center;
margin-top: 40px;
}

#banner .tl-bl a {
color: #fff;
font-size: 26px;
font-weight: 500;
transition: 0.5s;
}

#banner .tl-bl a:hover {
color: #f7941d;
}

/* adv-bl */

#adv-bl {
background: url(../images/adv-bl.jpg) no-repeat;
background-size: cover;
background-position: 100%;
}

#adv-bl .wrapper {
padding: 100px 0;
}

#adv-bl .title {
color: #fff;
font-size: 32px;
font-weight: 600;
text-transform: uppercase;
padding: 0;
margin: 0;
}

#adv-bl ul {
list-style-type: none;
padding: 0;
margin: 40px 0 0 0;
}

#adv-bl ul li {
padding-bottom: 20px;
}

#adv-bl ul li:last-child {
padding-bottom: 0;
}

#adv-bl ul li img,
#adv-bl ul li span {
display: inline-block;
vertical-align: middle;
}

#adv-bl ul li span {
color: #fff;
font-size: 18px;
font-weight: 500;
text-transform: uppercase;
padding-left: 7px;
}

/* nashi-uslugi */

#nashi-uslugi {
background: url(../images/nu-bl.jpg) no-repeat;
background-size: cover;
background-position: 100%;
}

#nashi-uslugi .wrapper {
padding: 100px 0;
}

#nashi-uslugi h2 {
font-size: 34px;
font-weight: 600;
text-transform: uppercase;
padding: 0 0 40px 0;
margin: 0;
text-align: center;
line-height: 1;
}

#nashi-uslugi .tp-bl.extra {
padding-top: 80px;
}

#nashi-uslugi .tp-bl .title {
font-size: 30px;
font-weight: 600;
text-transform: uppercase;
padding: 0 0 50px 0;
margin: 0;
text-align: center;
line-height: 1;
}

#nashi-uslugi .tp-bl .usl-bl {
display: flex;
flex-direction: row;
justify-content: space-between;
}

#nashi-uslugi .tp-bl .usl-bl.extra {
padding-top: 60px;
}

#nashi-uslugi .tp-bl .usl-bl .usl-bl-txt {
width: 100%;
max-width: 400px;
padding-top: 50px;
}

#nashi-uslugi .tp-bl .usl-bl .usl-bl-txt .ttl {
font-size: 28px;
font-weight: 600;
text-transform: uppercase;
padding: 0 0 40px 0;
margin: 0;
line-height: 1;
}

#nashi-uslugi .tp-bl .usl-bl .usl-bl-txt p {
font-size: 22px;
font-weight: 500;
padding: 0;
margin: 0;
line-height: 1.2;
width: 100%;
max-width: 360px;
}

#nashi-uslugi .tp-bl .usl-bl .usl-bl-img {
width: 100%;
max-width: 360px;
background: #fff;
padding: 30px 0 50px 0;
}

#nashi-uslugi .tp-bl .usl-bl .usl-bl-img img {
display: block;
margin: 0 auto;
-webkit-filter: drop-shadow(0 0 6px rgba(0, 0, 0, 0.3));
filter: drop-shdadow(0 0 6px rgba(0, 0, 0, 0.3));
}

#nashi-uslugi .tp-bl .usl-bl .usl-bl-img p {
font-size: 22px;
font-weight: 500;
padding: 20px 0 0 0;
margin: 0 auto;
line-height: 1.2;
text-align: center;
width: 100%;
max-width: 250px;
}

#nashi-uslugi .tp-bl.extra .usl-bl .usl-bl-img p {
width: 100%;
max-width: 350px;
}

/* etapy-raboty */

#etapy-raboty {
margin: 100px auto;
}

#etapy-raboty h2 {
font-size: 34px;
font-weight: 600;
text-transform: uppercase;
padding: 0 0 40px 0;
margin: 0;
text-align: center;
line-height: 1;
}

#etapy-raboty .un-ttl {
font-size: 26px;
padding: 0 0 50px 0;
margin: 0;
line-height: 1.2;
text-align: center;
}

#etapy-raboty .etr-bl {
display: flex;
flex-direction: row;
justify-content: space-between;
}

#etapy-raboty .etr-bl.extra {
padding-top: 60px;
}

#etapy-raboty .etr-bl .etr-bl-sm {
width: 100%;
max-width: 205px;
}

#etapy-raboty .etr-bl .etr-bl-sm p {
font-size: 16px;
font-weight: 500;
width: 100%;
max-width: 200px;
padding: 10px 0 0 0;
margin: 0 auto;
text-align: center;
line-height: 1.2;
}

/* oborudovanie */

#oborudovanie {
background: url(../images/nu-bl.jpg) no-repeat;
background-size: cover;
background-position: 100%;
}

#oborudovanie .wrapper {
padding: 100px 0;
}

#oborudovanie h2 {
font-size: 34px;
font-weight: 600;
text-transform: uppercase;
padding: 0 0 40px 0;
margin: 0;
text-align: center;
line-height: 1;
}

#oborudovanie .slide {
background: #fff;
width: 100%;
max-width: 280px;
height: 330px;
padding: 30px 0 35px 0;
margin: 0 15px;
}

#oborudovanie .slick-list {
position: relative;
display: block;
overflow: hidden;
margin: 0;
padding: 0;
}

#oborudovanie .slick-list:focus {
outline: none;
}

#oborudovanie .slick-list.dragging {
cursor: pointer;
cursor: hand;
}

#oborudovanie .slick-slider .slick-track,
#oborudovanie .slick-slider .slick-list {
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}

#oborudovanie .slick-track {
position: relative;
top: 0;
left: 0;
display: block;
}

#oborudovanie .slick-track:before,
#oborudovanie .slick-track:after {
display: table;
content: '';
}

#oborudovanie .slick-track:after {
clear: both;
}

#oborudovanie .slick-loading .slick-track {
visibility: hidden;
}

#oborudovanie .slick-slide {
display: none;
float: left;
}

[dir='rtl'] .slick-slide {
float: right;
}

#oborudovanie .slide.shtst img {
padding: 1px 0; 
}

#oborudovanie .slide.ras img {
padding: 56px 0; 
}

#oborudovanie .slick-slide img {
display: block;
margin: 0 auto;
}

#oborudovanie .slick-slide.slick-loading img {
display: none;
}

#oborudovanie .slick-slide.dragging img {
pointer-events: none;
}

#oborudovanie .slick-initialized .slick-slide {
display: block;
}

#oborudovanie .slick-loading .slick-slide {
visibility: hidden;
}

#oborudovanie .slick-vertical .slick-slide {
display: block;
height: auto;
border: 1px solid transparent;
}

#oborudovanie .slick-arrow.slick-hidden {
display: none;
}

#oborudovanie .slide p {
font-size: 16px;
font-weight: 500;
padding: 20px 0 0 0;
margin: 0;
text-align: center;
line-height: 1.2;
}

/* kontakty */

#kontakty {
background: url(../images/contact-bl.jpg) no-repeat;
background-size: cover;
background-position: 100%;
height: 679px;
}

#kontakty .cnt-bl {
display: flex;
flex-direction: row;
justify-content: space-between;
}

#kontakty .cnt-bl .cnt-bl-lft {
width: 50%;
padding-top: 180px;
}

#kontakty .cnt-bl .cnt-bl-rght {
width: 50%;
padding-top: 180px;
}

#kontakty .cnt-bl .cnt-bl-lft .title {
font-size: 38px;
font-weight: 500;
color: #fff;
padding: 0 0 35px 0;
margin: 0;
line-height: 1.2;
}

#kontakty .cnt-bl .cnt-bl-lft .title span {
font-weight: 700;
}

#kontakty .cnt-bl .cnt-bl-lft p {
font-size: 20px;
font-weight: 500;
color: #fff;
padding: 0;
margin: 0;
line-height: 1.2;
}

#kontakty .cnt-bl .cnt-bl-lft ul {
list-style-type: none;
padding: 0;
margin: 40px 0 0 0;
}

#kontakty .cnt-bl .cnt-bl-lft ul li {
margin-bottom: 20px;
}

#kontakty .cnt-bl .cnt-bl-lft ul li:last-child {
margin-bottom: 0;
}

#kontakty .cnt-bl .cnt-bl-lft .img-ic {
display: inline-block;
width: 32px;
height: 32px;
background: url(../images/icon-cnt.png) no-repeat;
padding-left: 0;
}

#kontakty .cnt-bl .cnt-bl-lft ul span {
font-size: 20px;
font-weight: 500;
color: #fff;
padding-left: 10px;
display: inline-block;
vertical-align: middle;
width: 400px;
line-height: 1.2;
}

#kontakty .cnt-bl .cnt-bl-rght .title {
font-size: 26px;
font-weight: 500;
margin: 0;
padding: 0 0 20px 0;
line-height: 1.2;
text-align: center;
}

#kontakty .cnt-bl .cnt-bl-rght p {
font-size: 18px;
font-weight: 500;
margin: 0;
padding: 0 0 20px 0;
line-height: 1.2;
text-align: center;
}

#kontakty .cnt-bl .cnt-bl-rght .ttl {
font-size: 16px;
font-weight: 600;
}

#kontakty form {
margin: 0 auto;
width: 100%;
max-width: 202px;
}

#kontakty form input {
display: block;
}

#kontakty form input[type="text"],
#kontakty form input[type="tel"] {
background: transparent;
border: 1px solid #a7a7a7;
border-radius: 30px;
padding: 10px 25px;
}

#kontakty form input[type="text"] {
margin-bottom: 15px;
}

#kontakty form input[type="tel"] {
margin-bottom: 25px;
}

#kontakty form input[type="submit"] {
background: linear-gradient(180deg, #fe8b32, #fea742);
border: none;
border-radius: 30px;
padding: 10px 25px;
font-size: 14px;
font-weight: 600;
color: #fff;
transition: all 0.1s ease-out;
cursor: pointer;
width: 100%;
max-width: 202px;
}

#kontakty form input[type="submit"]:hover {
background: linear-gradient(180deg, #fea742, #fe8b32);
}

/* nashi-raboty */

#nashi-raboty {
background: url(../images/nu-bl.jpg) no-repeat;
background-size: cover;
background-position: 100%;
}

#nashi-raboty .wrapper {
padding: 100px 0;
}

#nashi-raboty h2 {
font-size: 34px;
font-weight: 600;
text-transform: uppercase;
padding: 0 0 40px 0;
margin: 0;
text-align: center;
line-height: 1;
}

#nashi-raboty .nr-bl {
display: flex;
flex-direction: row;
justify-content: space-around;
}

#nashi-raboty .nr-bl.extra {
margin-top: 18px;
}

#nashi-raboty .nr-bl.extra.last {
justify-content: start;
padding-left: 10px;
}

#nashi-raboty .row > .column {
padding: 0 8px;
}

#nashi-raboty .row:after {
content: "";
display: table;
clear: both;
}

#nashi-raboty .column {
float: left;
width: 25%;
}

#nashi-raboty .modal {
display: none;
position: fixed;
z-index: 1;
padding-top: 20px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0, 0, 0, 0.8);
}

#nashi-raboty .modal-content {
position: relative;
margin: auto;
padding: 0;
width: 100%;
max-width: 800px;
}

#nashi-raboty .close {
color: white;
position: absolute;
top: 10px;
right: 25px;
font-size: 35px;
font-weight: bold;
}

#nashi-raboty .close:hover,
#nashi-raboty .close:focus {
color: #999;
text-decoration: none;
cursor: pointer;
}

#nashi-raboty .cursor {
cursor: pointer;
}

#nashi-raboty .prev,
#nashi-raboty .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -50px;
color: white;
font-weight: bold;
font-size: 20px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
-webkit-user-select: none;
}

#nashi-raboty .next {
right: 0;
border-radius: 3px 0 0 3px;
}

#nashi-raboty .prev:hover,
#nashi-raboty .next:hover {
background-color: rgba(0, 0, 0, 0.8);
}

#nashi-raboty .numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}

#nashi-raboty img {
margin-bottom: -4px;
}

#nashi-raboty .caption-container p {
text-align: center;
padding: 2px 16px;
color: #fff;
font-size: 18px;
font-weight: 500;
padding: 10px 0;
margin: 0 auto;
}

#nashi-raboty .active {
opacity: 1;
}

#nashi-raboty img.hover-shadow {
transition: 0.3s;
}

#nashi-raboty .hover-shadow:hover {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

#nashi-raboty .btn {
margin-top: 50px;
}

#nashi-raboty .btn a {
display: block;
background: linear-gradient(180deg, #fe8b32, #fea742);
border: none;
border-radius: 30px;
padding: 10px 25px;
margin: 0 auto;
font-size: 16px;
font-weight: 600;
color: #fff;
transition: all 0.1s ease-out;
width: 100%;
max-width: 255px;
}

#nashi-raboty .btn a:hover {
background: linear-gradient(180deg, #fea742, #fe8b32);
}

/* vd-bl */

#vd-bl .wrapper {
margin: 100px auto;
}

#vd-bl h2 {
font-size: 34px;
font-weight: 600;
text-transform: uppercase;
padding: 0 0 40px 0;
margin: 0;
text-align: center;
line-height: 1;
}

/* footer */

footer {
background: #dbdbdb;
padding: 30px 0;
}

footer .bg-bl {
display: flex;
flex-direction: row;
justify-content: space-between;
}

footer .bg-bl .bg-bl-lft,
footer .bg-bl .bg-bl-rght {
width: 50%;
}

footer .bg-bl .bg-bl-lft p {
font-size: 18px;
font-weight: 500;
padding: 0 0 10px 0;
margin: 0;
line-height: 1.2;
}

footer .bg-bl .bg-bl-lft .cnt-bl {
display: flex;
flex-direction: row;
}

footer .bg-bl .bg-bl-lft .cnt-bl .vb-bl,
footer .bg-bl .bg-bl-lft .cnt-bl .tl-bl {
height: 20px;
}

footer .bg-bl .bg-bl-lft .cnt-bl .vb-bl a {
display: block;
width: 18px;
height: 20px;
margin-right: 7px;
background: url(../images/icon-viber-ft.png) no-repeat;
background-size: auto;
background-size: cover;
transition-duration: 0.96s;
-webkit-transition-duration: 0.96s;
-moz-transition-duration: 0.96s;
-o-transition-duration: 0.96s;
-ms-transition-duration: 0.96s;
}

footer .bg-bl .bg-bl-lft .cnt-bl .vb-bl a:hover {
background: url(../images/icon-viber-ft-hv.png) no-repeat;
}

footer .bg-bl .bg-bl-lft .cnt-bl .tl-bl a {
display: block;
width: 20px;
height: 20px;
margin-right: 10px;
background: url(../images/telegram-icon-ft.png) no-repeat;
background-size: auto;
background-size: cover;
transition-duration: 0.96s;
-webkit-transition-duration: 0.96s;
-moz-transition-duration: 0.96s;
-o-transition-duration: 0.96s;
-ms-transition-duration: 0.96s;
}

footer .bg-bl .bg-bl-lft .cnt-bl .tl-bl a:hover {
background: url(../images/telegram-icon-ft-hv.png) no-repeat;
}

footer .bg-bl .bg-bl-lft .cnt-bl .tlf-bl a {
font-size: 16px;
font-weight: 500;
color: #000;
display: block;
line-height: 18px;
transition: 0.5s;
}

footer .bg-bl .bg-bl-lft .cnt-bl .tlf-bl a:hover {
color: #f7941d;
}

footer .bg-bl .bg-bl-rght a {
display: block;
width: 100%;
max-width: 242px;
margin-left: auto;
}

footer .un-bl {
margin-top: 30px;
}

footer .un-bl p {
font-size: 14px;
color: #333;
margin: 0;
padding: 0;
line-height: 1.2;
text-align: center;
}