html * {max-height: 999999px;}
html {font-family: "Open Sans",Helvetica,Arial,sans-serif;
    font-size: 14px;
    line-height: 24px;
    -webkit-font-smoothing: subpixel-antialiased !important;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility:    hidden;
    -ms-backface-visibility:     hidden;
}
body, html {height: 100%; margin: 0px; padding: 0px; color: white; background-color: rgb(47, 56, 67);}
* {box-sizing: border-box;}
a {text-decoration: none; color: #1ca9bd; transition: all 0.5s ease;}
a:hover {color: white;}

:active, :hover, :focus {
    outline: 0;
    outline-offset: 0;
}
p {margin-top: 0px; margin-bottom: 20px;}
.center {text-align: center;}
.clear {clear: both;}
body.noscroll {overflow: hidden;}
.wrapper {max-width: 1160px; padding-left: 20px; padding-right: 20px; margin: 0px auto;}
.wrapper2 {max-width: 1640px; padding-left: 20px; padding-right: 20px; margin: 0px auto;}
.wrapper video {max-width: 100% !important; height: auto !important;}

header {background-color: #252C34; width: 100%; height: 86px; position: fixed; top: 0px; left: 0px; z-index: 10;}
/*header {background-color: rgba(73, 87, 103, 1); width: 100%; height: 86px; position: fixed; top: 0px; left: 0px; z-index: 10;}*/
header .logo {width: 220px; display: inline-block; vertical-align: middle; padding-top: 20px; margin-right: 50px;}
header .logo img {max-width: 100%;}
header .contacts {display: inline-block; vertical-align: middle; color: #87919F; padding-top: 15px;}
header .contacts i {margin-right: 10px;}
header .contacts p {margin: 0px;}
header .contacts .tel {font-size: 22px; font-weight: 500; color: white;}
header .contacts .map {font-size: 12px;}
header .menu {display: block; float: right;}
header .menu .item {position: relative; display: inline-block;}
header .menu .item:hover .submenu {display: block;}
header .menu .item a {color: white; display: block; padding: 29px 12px; border-bottom: 4px solid transparent;}
header .menu .item a:hover {color: #1ca9bd; border-bottom: 4px solid #1ca9bd; background-color: #2f3843;}
header .menu .submenu {border-top: 4px solid #1ca9bd; position: absolute; left: 0px; top: 82px; padding: 0px; margin: 0px; display: none;
    transition: all 0.5s ease;
}
header .menu .submenu li{list-style: none; padding: 0px; margin: 0px;}
header .menu .submenu li a {display: block; text-align: center; background-color: #252C34; border-bottom: 1px solid white; width: 240px; padding: 20px;}
header .menu .submenu li a:hover {border-bottom: 1px solid white;}
header .menu .social {float: none !important;}
header .menu .close {display: none; width: 30px; height: 30px; font-size: 30px; color: white; position: absolute; right: 20px; top: 20px;}
header .menu .contacts {display: none;}
header .menu .social {display: none;}

header .social {float: right; padding-top: 29px;}
header .social a {color: white; font-size: 20px; margin-left: 15px; display: inline-block; vertical-align: middle;}
header .social a:hover {color: #1ca9bd;}
header .social .telegramm svg {width: 22px;}
header .social .telegramm svg path{fill: white;  transition: all 0.5s ease;}
header .social .telegramm:hover svg path{fill: #1ca9bd;}

header .mobmenu {display: none; width: 40px; float: right; height: 30px; position: relative; padding-top: 13px; margin-top: 25px;}
header .mobmenu:after {content: ''; display: block; position: absolute; left: 0px; top: 0px; width: 100%; height: 3px; background-color: white;}
header .mobmenu:before {content: ''; display: block; position: absolute; left: 0px; bottom: 0px; width: 100%; height: 3px; background-color: white;}
header .mobmenu i {display: block; width: 100%; height: 3px; background-color: white;}
header .mobmenu:hover i,
header .mobmenu:hover:after,
header .mobmenu:hover:before
{background-color: #1ca9bd;}


footer {background-color: #252C34; width: 100%; padding: 50px 0px;}
footer .contacts {display: inline-block; vertical-align: top; margin-right: 50px; color: #87919F; font-size: 16px;}
footer .contacts i {margin-right: 10px;}
footer .copyright {color: #87919F; display: inline-block; vertical-align: top;}
footer .social {float: right;}
footer .social a {padding: 5px 9px; color: white; font-size: 20px; border: 2px solid white; border-radius: 50%; margin-left: 15px;}
footer .social a:hover {border-color: #1ca9bd;}


.contacts-about  {color: #87919F; font-size: 16px;}
.contacts-about i {margin-right: 10px;}



.policy {color: #828282 !important; font-size: 14px; line-height: 25px;}
.policy a {color: black;}
.policy a:hover {text-decoration: underline;}

h2 {font-size: 30px; line-height: 40px;}
h3 {color: #19e2e3;}

.bigA {display: inline-block; padding: 8px 40px; color: white !important; font-size: 18px; line-height: 25px; background-color: #1ca9bd; text-align: center; border-radius: 5px;}
.bigA:hover {opacity: 0.9;}

.bigA2 {display: inline-block; padding: 7px 20px; color: #1ca9bd; font-size: 14px; line-height: 25px; border: 1px solid #1ca9bd;}
.bigA2:hover {color: white; border-color: white;}


ul li {list-style: none; margin-bottom: 20px;}

.dott {border-bottom: 2px dotted;}



@keyframes animate{0%{transform: scale(0.5);opacity: 0;}50%{opacity: 1;}100%{transform: scale(1.2); opacity: 0;}}
.whatsapp-button {position: fixed; right: 0px; bottom: 190px; transform: translate(-50%, -50%); background: #25D366; background-position-x: 0%; background-position-y: 0%; background-repeat: repeat; background-image: none; border-radius: 50%; width: 55px; height: 55px; color: #fff; text-align: center; line-height: 53px; font-size: 35px; z-index: 99; background-image: url(../i/whatsapp.png); background-position: center; background-repeat: no-repeat;}
i.fa {text-decoration: none !important;}
.whatsapp-button::before, .whatsapp-button::after {content: " "; display: block; position: absolute; border: 50%; border: 1px solid #25D366; left: -20px; right: -20px; top: -20px; bottom: -20px; border-radius: 50%; animation: animate 1.5s linear infinite; animation-delay: 0s; opacity: 0; backface-visibility: hidden;}
.whatsapp-button::after {animation-delay: .5s;}

.navi {font-size: 12px; color: #87919F; margin-top: 20px; margin-bottom: 5px;}
.pageName {font-size: 28px; margin-bottom: 50px; margin-top: 0px; position: relative; line-height: 38px;}
.pageName span {background-color: #2f3843; position: relative; display: inline-block; z-index: 2; padding-right: 10px;}

.sendCall {text-align: center; padding-bottom: 50px; padding-top: 50px;}

.wrapper.content li {position: relative;}
.wrapper.content li:after {content: '—'; display: block; position: absolute; left: -20px; top: -1px;}

.sendCallFooter {float: right;}
.sendCallFooter .bigA {padding: 9px 20px; font-size: 15px;}

#not-found h2{font-size: 150px; margin: 0px;}
.not-found {padding-top: 21vh; padding-bottom: 21vh;}

.mrt40 {padding-top: 40px;}


.bigp {font-size: 16px;}

#firstSlide {background: url('../i/firstslide.jpg') center center; background-size: cover; position: relative; width: 100%; height: auto; margin-top: 86px;}
#firstSlide:after {content: ''; display: block; position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; background-color: #000000; opacity: 0.65; z-index: 1;}
#firstSlide .text {margin: 0px auto; width: 100%; max-width: 800px; text-align: center; position: relative; z-index: 2; padding: 130px 20px;}
#firstSlide h2 {font-size: 48px; margin-bottom: 40px; font-weight: normal; line-height: 58px;}
#firstSlide h1 {font-size: 30px; font-weight: normal; line-height: 40px;}
#firstSlide p.big {font-size: 60px;}

.f24 {font-size: 24px; line-height: 34px;}

#params {background-color: white; color: black; padding: 50px;}
#params ul {padding-left: 0px;}
#params ul li {position: relative; padding-left: 20px;}
#params ul li:after {display: block; content: '—'; position: absolute; left: 0px; top: -1px;}
#params .text {margin: 0px auto; max-width: 900px;}
#params ul.list {display: inline-block; vertical-align: top;}
#params img {display: inline-block; max-width: calc(100% - 200px);}

#advantage {background-color: #2f3843; padding: 50px;}
#advantage .text {margin: 0px auto; max-width: 900px;}
#advantage p.big {font-size: 36px; margin-top: 20px; line-height: 42px;}
#advantage .advs {font-size: 18px; padding-left: 43px; margin-top: 20px; margin-bottom: 40px; line-height: 28px;}

#peculiarities {background: url('../i/pattern.jpg'); padding: 50px; color: black;}
#peculiarities .text {margin: 0px auto; max-width: 1200px; text-align: center;}
#peculiarities .list .item {display: inline-block; vertical-align: top; margin: 20px; max-width: 280px;}
#peculiarities .list .item .svg {max-width: 40px; margin: 0px auto; text-align: center; height: 50px;}

.form { padding: 50px; background: url("../i/phone.jpg") no-repeat left center #253542;}
.form2 {margin: 0px auto; max-width: 361px; width: 100%;}
.form2 p {margin-bottom: 5px; margin-top: 20px; font-size: 16px;}
.form2 input {color: black; font-size: 16px; padding: 5px 10px; width: 100%;}
.form2 .policy {color: white !important; font-size: 14px;}
.form2 .policy a {color: white; text-decoration: underline;}
.form2 input[type="submit"] {cursor: pointer; display: inline-block; padding: 8px 40px; color: white !important; font-size: 18px; line-height: 25px; background-color: #1ca9bd; text-align: center; border-radius: 5px; border: 0px; max-width: 200px;}
.form2 .error {color: red;}

#advantages {background: url('../i/pattern.jpg'); padding: 50px; color: black;}
#advantages .text {margin: 0px auto; max-width: 1400px; text-align: center;}
#advantages .list .item {display: inline-block; vertical-align: top; margin: 20px; max-width: 180px;}
#advantages .list .item .svg {max-width: 40px; margin: 0px auto; text-align: center; height: 50px;}

#mission {background: url('../i/car.jpg') no-repeat center center #253542; padding: 50px; color: white;}
#mission .text {margin: 0px auto; max-width: 1000px; text-align: left;}
#mission .item {width: 100%; max-width: 500px; font-size: 16px; line-height: 26px; margin-bottom: 50px;}
#mission .item:nth-child(2) {margin-left: 20%;}
#mission .item:nth-child(3) {margin-left: 40%; margin-bottom: 0px;}
#mission .item b {display: block; font-size: 20px;}
#works {background-color: white;}
#works .item {width: calc((100%/3) - 40px); display: inline-block; vertical-align: middle; background-color: white; padding: 10px; margin: 20px; box-sizing: border-box; box-shadow: 4px 4px 17px 0px rgba(34, 60, 80, 0.2);}
#works .item img {width: 100%; height: auto;}

#response {background-color: white; text-align: center; padding: 50px; color: black;}
#response .item {display: inline-block; vertical-align: top; padding: 20px;}
#response .item img {max-width: 100%;}

.arrow-8 {
    position: relative;
    width: 50px;
    height: 50px;
    margin: 15px auto 40px auto;
	display: block;
    left: -50px;
    margin-left: 50%;
}
.arrow-8:before,
.arrow-8:after {
    content: '';
    position: absolute;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    border-left: 13px solid white;
    border-bottom: 13px solid white;
    animation: arrow-8 3s linear infinite;
}
.arrow-8:after {
    animation: arrow-8 3s linear infinite -1.5s;
}
@keyframes arrow-8 {
    0% {
        opacity: 0;
        transform: translate(0, -27px) rotate(-45deg);
    }
    10%, 90% {
        opacity: 0;
    }
    50% {
        opacity: 1;  
        transform: translate(0, 0) rotate(-45deg);
    }
    100% {
        opacity: 0;
        transform: translate(0, 27px) rotate(-45deg);
    }
}


@media all and (max-width: 1800px) {

}

@media all and (max-width: 1700px) {

}

@media all and (max-width: 1600px) {

}

@media all and (max-width: 1500px) {

}

@media all and (max-width: 1400px) {

}

@media all and (max-width: 1300px) {

}

@media all and (max-width: 1200px) {

}

@media all and (max-width: 1100px) {

}

@media all and (max-width: 1000px) {
    header .logo {margin-right: 20px;}
}

@media all and (max-width: 930px) {

}

@media all and (max-width: 900px) {
    header .menu {position: fixed; display: none; left: 0px; top: 0px; width: 100%; height: 100%; z-index: 100; background-color: #252C34; float: none !important; overflow-y: auto; padding: 20px;}
    header .social {display: none;}
    header .menu .item {display: block;}
    header .menu .submenu {position: relative; left: 50px; top: auto; display: block !important; text-align: left; border: none;}
    header .menu .item a {font-weight: bold; padding: 0 12px; border: 0px; margin-bottom: 10px; display: inline-block;}
    header .menu .submenu li a {font-weight: normal; padding: 0px; width: auto; text-align: left; border: 0px; margin-bottom: 10px;}
    header .menu .item a:hover {background-color: transparent; border: 0px;}
    header .menu .submenu li a:hover {background-color: transparent; border: 0px;}
    header .mobmenu, header .menu .close, header .menu .contacts, header .menu .social {display: none;}
    #mission .item:nth-child(2) {margin-left: 40px;}
    #mission .item:nth-child(3) {margin-left: 80px;}

}

@media all and (max-width: 800px) {
    footer .contacts {margin-right: 10px;}
    footer .social {line-height: 50px;}
    html {font-size: 16px;}
	.content p{font-size: 16px;}
    #params {padding-left: 30px; padding-right: 30px;}
    #params img {max-width: calc(100% - 205px);}
    #works .item {width: calc((100%/2) - 40px)}
}

@media all and (max-width: 700px) {
    footer .contacts {display: block;}
    footer .social {float: none; line-height: 60px;}
    footer .social a {margin-left: 0px; margin-right: 15px;}
    #mission .item:nth-child(2) {margin-left: 20px;}
    #mission .item:nth-child(3) {margin-left: 40px;}
    #advantage {padding-left: 30px; padding-right: 30px;}
    #advantage p.big {font-size: 26px; line-height: 36px;}
    #peculiarities {padding-left: 30px; padding-right: 30px;}
    #mission {padding-left: 30px; padding-right: 30px;}
    #response {padding-left: 30px; padding-right: 30px;}
}

@media all and (max-width: 600px) {
    .whatsapp-button {display: none;}
    #mission .item:nth-child(2) {margin-left: 0px;}
    #mission .item:nth-child(3) {margin-left: 0px;}
    #params img {max-width: 100%;}
}

@media all and (max-width: 500px) {
    header .contacts p:nth-child(1) .tel{font-size: 16px !important;}
    header .contacts p:nth-child(2){display: none;}
    .wrapper2 {padding-left: 10px; padding-right: 10px;}
    #firstSlide h2 {font-size: 32px; line-height: 42px;}
    #firstSlide h1 {font-size: 24px; line-height: 34px;}
    #firstSlide p.big {font-size: 40px; line-height: 50px;}
    .form {padding-left: 20px; padding-right: 20px;}
    #works .item {width: calc(100% - 40px);}
    #response {display: none;}
    #response {padding-left: 0px; padding-right: 0px;}
}

@media all and (max-width: 430px) {
    header .logo {width: 180px;}
}

@media all and (max-width: 400px) {
    header .logo {width: 110px; margin-right: 10px;}
    header {height: 60px;}
    #firstSlide {margin-top: 60px;}
    /*header .contacts {display: none;}**/
    header .menu .contacts {display: block;}
    .f24 {font-size: 20px; line-height: 30px;}
    #advantage p.big {font-size: 22px; line-height: 32px;}
    #advantage .advs {padding-left: 0px;}
}