body{font-family:'pf_square_sans_proregular',sans-serif; box-sizing:border-box}

section{padding:50px 0; overflow:hidden}

a{text-decoration:none}
a:hover{text-decoration:underline}

.container{max-width:1140px; margin:0 auto; position:relative}

.hide{display:none}

.bold{font-family:'pf_square_sans_probold',sans-serif}

.medium{font-family:'pf_square_sans_promedium',sans-serif}

.uppercase{text-transform:uppercase}
 button, .callback{ display:block;  margin-left:auto;  margin-right:auto;  padding:12px 25px;  background:#ffa100;  background-image:linear-gradient(to bottom,#ffa100,#ff9e00,#ff9c00,#f90,#ff9600,#ff9400,#ff9200,#ff9000,#ff8e00,#ff8d00,#ff8b00,#ff8900);  border-radius:5px;  -webkit-border-radius:5px;  -moz-border-radius:5px;  -ms-border-radius:5px;  -o-border-radius:5px;  box-shadow:0 1px 2px rgba(0,0,0,0.7);  border:none;  outline:none;  color:#fff;  font-family:'pf_square_sans_promedium',sans-serif;  text-shadow:0.5px 0.5px 1px rgba(0,0,0,0.4);  font-size:20px;  text-decoration:none;  transition:all 0.3;  -webkit-transition:all 0.3;  -moz-transition:all 0.3;  -ms-transition:all 0.3;  -o-transition:all 0.3}
button:hover{background:#ff9400; background-image:linear-gradient(to top,#ffa100,#ff9e00,#ff9c00,#f90,#ff9600,#ff9400,#ff9200,#ff9000,#ff8e00,#ff8d00,#ff8b00,#ff8900)}
button:active{background:#ffbc5f}
.callback{display:block; position:relative; text-decoration:none; width:280px}

.callback:hover{background:#ff9400; text-decoration:none}

header .callback{width:160px; margin-left:15px; margin-right:0; padding:7px 12px 8px; font-size:17px; text-align:center}

.header{padding:10px 0; width:100%; position:fixed; top:0; background:#efefef; z-index:101;background: #fff;}
.header_wrap{display:flex; align-items:center; justify-content:space-between}
//.logo{font-size:48px;font-family: "Open-sans";color:#f21e0f;}
.logo{display:inline-block; width:150px; text-decoration:none; height:50px; background:url("../images/logo-new.png") no-repeat left; background-size:contain}
.logo2{display:inline-block; width:150px; text-decoration:none; height:50px; background:url("../images/logo-footer.png") no-repeat left; background-size:contain}

.nav-menu{display:flex; flex-wrap:wrap; justify-content:center; padding:0; margin:0}
.nav-menu li{padding:0; margin:0; list-style-type:none}

.nav-menu a{margin:0 5px; color:#000; font-size:15px; font-family:'pf_square_sans_promedium',sans-serif; text-decoration:none; text-transform:uppercase; line-height:1.4}

.nav-menu a:hover{border-bottom:1px dotted #000}

.phone{font-size:14px; text-align:right}

.phone-number a{display:block; font-family:'pf_square_sans_promedium',sans-serif; font-size:20px; color:#000; text-decoration:none; width:162px}
.phone-number a:hover{text-decoration:underline}

.main{display:block; position:relative; width:100%; background:none; text-align:center}
.main-content{position:absolute; top:0; width:100%; z-index:1}

.slide{width:100%; top:0; z-index:1}
.slide img{width:100%; height:883px; object-fit:cover}

.bg-text{margin:100px 0 50px 0; display:inline-block; width:931px; height:109px; background:url("../images/bg-text.png") no-repeat center}

h1{font-family:'pf_square_sans_probold',sans-serif; font-size:38px; text-transform:uppercase; line-height:38px; margin:10px 0 0 0}

h2{font-size:26px; font-weight:normal; line-height:55px; margin:0 auto}

.main form{margin-left:auto; padding:30px 30px 50px; width:310px; background:rgba(241,241,241,.9); background:-moz-linear-gradient(left,rgba(241,241,241,.9) 0%,rgba(255,255,255,.9) 100%); background:-webkit-gradient(left,rgba(241,241,241,.9) 0%,rgba(255,255,255,.9) 100%); background:-webkit-linear-gradient(left,rgba(241,241,241,.9) 0%,rgba(255,255,255,.9) 100%); background:-o-linear-gradient(left,rgba(241,241,241,.9) 0%,rgba(255,255,255,.9) 100%); background:-ms-linear-gradient(left,rgba(241,241,241,.9) 0%,rgba(255,255,255,.9) 100%); background:linear-gradient(left,rgba(241,241,241,.9) 0%,rgba(255,255,255,.9) 100%); /* W3C */box-sizing:border-box}

.main .form-title{font-family:'pf_square_sans_promedium',sans-serif; font-size:20px; margin-bottom:10px; text-shadow:.5px .5px 0px rgb( 255,255,255)}

.form-title .bold{font-size:22px}

form input{width:100%; height:50px; -webkit-border-radius:5px;  -moz-border-radius:5px; border-radius:5px; border:1px solid #DADADA; outline:none; box-shadow:0 3px 3px #F3F3F3 inset; margin:5px 0; padding-left:20px; color:#B5B5B5; font-size:18px; box-sizing:border-box}

.main button{margin-top:10px}

.arrow{width:89px; height:200px; position:absolute; top:300px; right:80px; background:url("../images/form-arrow.png") no-repeat center}

.delievery{padding:15px 35px; width:400px; background:rgba(255,77,77,.85); text-align:left; color:#FFF; font-size:22px; line-height:22px; text-shadow:1px 2px 0px rgba(0,0,0,.6)}

.request-delievery{margin-bottom:30px; background:rgba(243,200,9,.95); text-align:left; padding:33px 40px 33px 40px; font-size:36px}

.clients{padding-top:20px; display:block; width:100%; text-align:center}

h3{display:inline-block; font-size:26px}

.clients-logo{width:100%; height:100px; background:url("../images/clients.png") no-repeat center; margin:35px auto 0 auto}
.clients-wrap{display:flex; flex-wrap:wrap; padding:10px 20px; align-items:center; justify-content:space-around; display:flex; background-color:#dbdbdb}
.clients-img{display:flex; margin-top:20px; margin-bottom:20px; width:130px; height:80px; justify-content:center; align-items:center; overflow:hidden}

.benefits{width:100%; text-align:center; background:#eaf3f7}
.benefits-wrap{display:flex; flex-wrap:wrap; justify-content:center}
.benefits-title{display:none}
.benefit-item__text{font-size:26px; line-height:26px; text-shadow:1px 2px 0px rgba(243,70,70,0.9); color:#FFF}
.benefit-item{display:flex; margin:15px; width:215px; height:216px; justify-content:center; align-items:center; flex-direction:column; background:url("../images/benefit-item.png") no-repeat center; box-sizing:border-box}

.we{padding-top:30px; padding-bottom:70px; width:100%; background:url("../images/we.jpg") no-repeat center; background-size:cover; text-align:center}
.we .callback{display:block; margin-top:20px}

.we h3{display:inline-block; font-weight:normal; font-size:26px; margin:60px 0 0 0; line-height:26px}

.auto{width:100%; height:504px; background:url("../images/we-auto2.jpg") no-repeat center; background-size:cover; margin:40px 0 0 0; position:relative}
.auto::before{content:''; position:absolute; top:0; right:0; width:455px; height:100%; background-color:rgba(243,70,70,0.9)}
.auto::after{content:''; position:absolute; top:50%; transform:translateY(-50%); right:455px; width:0; height:0; border:40px solid transparent; border-right-color:rgba(243,70,70,0.9); border-left:0; -webkit-transform:translateY(-50%); -moz-transform:translateY(-50%); -ms-transform:translateY(-50%); -o-transform:translateY(-50%)}

.auto-text{margin-left:auto; margin-top:20px; position:relative; top:20px; right:7vh; width:335px; color:#FFF; text-shadow:1px 2px 0px rgba(0,0,0,.2); display:block}

.more400{font-size:26px; line-height:26px}

.auto ul{text-align:left; margin:20px 0 0 50px; padding:0; font-size:20px; list-style-type:square}

.auto ul li{margin:8px 0}

.satellite{font-size:22px; line-height:22px; margin:20px 0 0 0}

.rout{font-size:16px; margin:20px 0 0 0}

.we-item{width:auto; display:inline-block; vertical-align:top; margin:50px 4px 0 4px; text-align:left; padding:5px}

.we-item-photo{width:342px; height:342px; position:relative}

.we1{background:url("../images/we1.png") no-repeat center; background-size: cover;}
 
.we2{background:url("../images/we2.png") no-repeat center; background-size: cover;}

.we3{background:url("../images/we3.png") no-repeat center; background-size: cover;}

.we-text{margin:10px 0 0 10px; font-size:18px}

.photo-title{width:322px; color:#FFF; font-size:22px; text-shadow:1px 2px 0px rgba(0,0,0,.2); text-align:center; line-height:22px}

.we1 .photo-title, .we2 .photo-title{position:absolute; top:30px; left:50%; transform: translateX(-50%);}
.we3 .photo-title{position:absolute; top:40px; left:50%; transform: translateX(-50%);}

.why{padding-bottom:70px; width:100%; text-align:center}

.why h3{margin-bottom:50px}
.why-items{display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center}

.why-item{width:772px; height:232px; position:relative; margin:0 auto 50px; font-size:19px; color:#FFF}

.why-item:nth-child(1){background:url("../images/why1.png") no-repeat center}

.why-item:nth-child(2){background:url("../images/why2.png") no-repeat center}

.why-item:nth-child(3){background:url("../images/why3.png") no-repeat center}

.why-item:nth-child(4){background:url("../images/why4.png") no-repeat center}

.why-item:nth-child(5){background:url("../images/why5.png") no-repeat center}

.why-item:nth-child(6){background:url("../images/why6.png") no-repeat center}

.why-text{width:230px; text-align:left; position:absolute; top:20px; left:510px; line-height:21px}

.why-item:nth-child(3) .why-text{position:absolute; top:35px; left:510px}

.why-item:nth-child(4) .why-text{position:absolute; top:55px; left:510px}

.why-item:nth-child(6) .why-text{width:255px; position:absolute; top:15px; left:505px}

.why-text ul{margin:0; padding:0 0 0 25px; list-style-type:square}

.why h4{font-size:19px; margin:10px 0; font-weight:normal}

.why .callback{margin:20px auto}

.projects{width:100%; background:#F2F5F7; text-align:center}

.projects h3{margin-bottom:5px}
.projects h4{font-weight:normal; font-size:26px; line-height:26px; margin:0 0 40px 0}

.project-item{max-width:960px; height:250px; position:relative; margin:20px auto; text-align:left; padding:25px 0 0 30px; color:#FFF; font-size:20px; text-shadow:1px 2px 0px rgba(0,0,0,.2)}

.project-item h4{font-size:28px; margin:0 0 5px 0}

.project-item:nth-child(1){background:url("../images/proj1.png") no-repeat center; background-size:contain}

.project-item:nth-child(2){background:url("../images/proj2.png") no-repeat center; background-size:contain}

.project-item:nth-child(3){background:url("../images/proj3.png") no-repeat center; background-size:contain}

.descriprion{font-size:18px; line-height:18px; margin:0 0 15px 0}

.project-item ul{margin:10px 0 0 10px; padding:0 0 0 25px; list-style-type:square}

.form2{text-align:center}

.form2 form{padding-bottom:50px; background-color:#ffdc39; border:15px solid #ffd200}

.form2-title{font-size:28px; margin:50px 0 25px 0}

.form2 form input{width:230px; height:45px; -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; border:1px solid #DADADA; outline:none; box-shadow:0 3px 3px #F3F3F3 inset; margin:5px 20px; padding-left:20px; color:#B5B5B5; font-size:18px; box-sizing:border-box}

.form2 button{margin:25px auto 0; display:block}

.certificates{padding-top:0; padding-bottom:30px; text-align:center}

.certificates h3{font-weight:normal; line-height:26px}

.brack{margin:20px auto; width:100%; height:41px; background:url("../images/brack.png") no-repeat center; background-size:contain}

.questions{padding-top:0; padding-bottom:0; width:100%; height:334px; background:url("../images/questions.png") no-repeat center}

.questions-text{margin:auto; margin-top:40px; text-align:right}

.questions h3{font-size:34px}

.questions .callback{margin-top:30px; margin-right:0; margin-left:auto; font-weight:bold; width:200px; text-align:center}

.mng{font-size:22px}

.phone-mng a{font-size:34px; color:#000; text-decoration:none}
.phone-mng a:hover{text-decoration:underline}

.certificat-wrap{display:flex; align-items:center; justify-content:center; flex-wrap:wrap; margin-top:25px}

.cert-arrow{position:absolute; width:10px; height:48px; top:35%; border:none; cursor:pointer; z-index:8}
.cert-arrow__prev{left:-10px; background:url(../images/certificates/sert-arrow-left.png) no-repeat center}

.cert-arrow__next{right:-10px; background:url(../images/certificates/sert-arrow-right.png) no-repeat center}

.certificates img{margin:10px 20px; width:250px; transform:scale(1); -webkit-transform:scale(1); -moz-transform:scale(1); -ms-transform:scale(1); -o-transform:scale(1); transition:transform 0.3s ease; -webkit-transition:transform 0.3s ease; -moz-transition:transform 0.3s ease; -ms-transition:transform 0.3s ease; -o-transition:transform 0.3s ease}
.certificates img:hover{transform:scale(1.1); -webkit-transform:scale(1.1); -moz-transform:scale(1.1); -ms-transform:scale(1.1); -o-transform:scale(1.1); z-index:9; position:relative}

.scheme{width:100%; text-align:center}

.scheme-first{display:flex; flex-wrap:wrap; justify-content:space-around}

.scheme-wrap{display:flex; justify-content:space-between; flex-wrap:wrap}
.scheme-block{display:flex; margin-bottom:20px; align-items:center; flex-direction:column}

.scheme-arrow{display:block; margin-top:68px; margin-left:10px; margin-right:10px; width:25px; height:25px; background-image:url(../images/sheme/scheme-arrow.png)}

.scheme-img1{width:163px; height:163px; position:relative; background-image:url(../images/sheme/scheme1.png)}
.scheme-img2{width:163px; height:163px; position:relative; background-image:url(../images/sheme/scheme2.png)}
.scheme-img3{width:163px; height:163px; position:relative; background-image:url(../images/sheme/scheme3.png)}
.scheme-img4{width:163px; height:163px; background-image:url(../images/sheme/scheme4.png)}

.scheme-text{margin-top:10px}

.form3{position:relative; padding-bottom:70px; text-align:center}

.form3 form{padding-bottom:30px; background-color:#ffdc39; border:15px solid #ffd200}

.form3-title{font-size:26px; line-height:26px; margin:40px 0 10px 0}

.form3 form input{height:50px; margin-left:20px; margin-right:20px; margin-bottom:20px; width:230px; -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; border:1px solid #DADADA; outline:none; box-shadow:0 3px 3px #F3F3F3 inset; padding-left:20px; color:#B5B5B5; font-size:18px; box-sizing:border-box}

.form3 button{text-transform:uppercase; font-size:20px}

.sale{margin-bottom:30px; font-size:26px; color:#AF0000}

.form3 fieldset{display:inline-block; vertical-align:top; width:580px; border:none; margin:5px 0 0 0}

.form3 textarea{width:285px; height:150px; -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; border:1px solid #DADADA; outline:none; box-shadow:0 3px 3px #F3F3F3 inset; padding:10px 20px; color:#B5B5B5; font-size:18px; resize:none; box-sizing:border-box}

footer{padding:40px 0; width:100%; background:rgb(24,24,24); overflow:hidden; color:rgb(218,218,218); text-align:center}
.footer-wrap{display:flex; margin-bottom:20px; justify-content:space-between; align-items:flex-start}
.contacts{text-align:right; font-size:15px; line-height:1.6}
.contacts a{color:rgb(218,218,218); font-size:17px}
.contacts span{font-size:18px}
.footer-text span{display:block; margin-bottom:5px}
.footer-text a{color:rgb(218,218,218)}
.agreement{color:rgb(218,218,218)}

.modal-fresh{position:relative; margin:40px auto; padding:25px 35px; background-color:#fff; border-radius:8px; max-width:350px; color:#222; text-align:center; font-family:'pf_square_sans_proregular',sans-serif; -webkit-box-shadow:0px 1px 11px 5px rgba(50,50,50,0.23); -moz-box-shadow:0px 1px 11px 5px rgba(50,50,50,0.23); box-shadow:0px 1px 11px 5px rgba(50,50,50,0.23)}
.modal-fresh textarea{display:block; margin-top:5px; margin-bottom:10px; margin-right:auto; width:100%; height:154px; padding:10px; font-size:20px; background:rgb(240,239,239); border-radius:6px; -moz-box-shadow:inset 0 0 5px rgba(0,0,0,0.15); -webkit-box-shadow:inset 0 0 5px rgba(0,0,0,0.15); box-shadow:inset 0 0 5px rgba(0,0,0,0.15); border:0; box-sizing:border-box; -webkit-border-radius:6px; -moz-border-radius:6px; -ms-border-radius:6px; -o-border-radius:6px; resize:vertical}

.modal-fresh h1{font-family:pf_square_sans_proregular,sans-serif; font-weight:400; font-size:19px; margin:0; padding-top:20px; padding-bottom:15px; line-height:26px}
.modal-fresh h1 span{color:#FF8100}
.modal-fresh input{width:100%; height:50px; display:inline-block; padding:0 10px; font-family:pf_square_sans_proregular,sans-serif; font-weight:300; margin-bottom:10px; font-size:20px; color:#161616; text-align:center; border-radius:5px; background:#e9e9e9; -webkit-box-shadow:inset 0px 0px 1px 0px rgba(0,0,0,0.3); -moz-box-shadow:inset 0px 0px 1px 0px rgba(0,0,0,0.3); box-shadow:inset 0px 0px 1px 0px rgba(0,0,0,0.3); background-size:cover; transition:all 0.5s; -webkit-border-radius:5px; -moz-border-radius:5px; -ms-border-radius:5px; -o-border-radius:5px}
.modal-fresh input .left{text-align:left}

.modal-btn{width:230px}

.punkt-wrap{margin-bottom:45px; display:flex; align-items:center; justify-content:center}
.punkt{border-radius:5px; height:40px; float:left; width:332px; color:#fff; background:#ff8200; font-size:15px; text-align:center; line-height:40px; cursor:pointer; margin-right:1px; font-family:'pf_square_sans_promedium',sans-serif}

.punkt-active{color:#404040; background:#ffdc39}

.clears{clear:both}
.why-block.first, .why-block.second{margin-top:52px}
.text2{width:796px; height:40px; color:#808080; font-size:18px; text-align:center; margin:0 auto}
.pochemucl-icons{background:url(../images/pochemu-cl-icons.png); width:950px; height:120px; margin-top:50px}

.why-block.active{display:block !important}

.why-block__wrap{display:flex; flex-direction:row; width:100%}

.third-con{display:flex; justify-content:center}
.block{margin:20px 15px; text-align:center}
.block__img{width:160px; min-height:95px; margin:0 auto}
.context{margin-top:20px; font-size:14px; font-weight:normal; color:#808080; margin:0}
.third h2{font-size:22px; text-align:center; color:#000; font-weight:bold}
.third h3{font-size:18px; text-align:center; color:#000; font-weight:normal}

.forth-img{margin-top:35px; width:100%; height:256px; background:url(../images/benefits1.png) no-repeat center; background-size:contain}

.form1{position:relative}
.form1-btn{width:100%}

.thanks{height:500px; color:#111; text-align:center}

.thanks-img{margin-top:70px}
.thanks-img img{width:50px; height:50px}
.thanks-title{margin-top:30px; margin-bottom:30px; font-size:48px; font-weight:700; text-transform:uppercase; letter-spacing:3px}
.thanks-descr{margin:0; font-size:24px}

.footer-thanks{justify-content:center}
.footer-thanks .contacts{text-align:center}

button.mfp-close{font-size:36px}

.success{display:none; position:absolute; bottom:0; left:0; width:100%; height:100%; align-items:center; justify-content:flex-end; flex-direction:column; background-color:#fff; color:#ff6c11; font-size:20px; z-index:9}

.success h2{line-height:1; padding:0 20px; font-size:26px; font-weight:700}
.success p{margin:0 0 5px; padding:0 20px; font-size:20px; font-weight:400}
.success p:last-child{margin-bottom:40px}
.visible{display:flex}

.success2{display:none; position:absolute; bottom:0; left:0; width:100%; height:100%; flex-direction:column; align-items:center; justify-content:flex-end; background-color:#fff; border-radius:8px; color:#ff6c11; font-size:20px; z-index:9; -webkit-border-radius:8px; -moz-border-radius:8px; -ms-border-radius:8px; -o-border-radius:8px}
.success2 h2{line-height:1; padding:0 20px; font-size:26px; font-weight:700}
.success2 p{margin:0 0 5px; padding:0 20px; font-size:20px; font-weight:400}
.success2 p:last-child{margin-bottom:40px}
.visible2{display:flex}

.my-mfp-zoom-in .zoom-anim-dialog{opacity:0; -webkit-transition:all 0.2s ease-in-out; -moz-transition:all 0.2s ease-in-out; -o-transition:all 0.2s ease-in-out; transition:all 0.2s ease-in-out; -webkit-transform:scale(0.8); -moz-transform:scale(0.8); -ms-transform:scale(0.8); -o-transform:scale(0.8); transform:scale(0.8)}

.my-mfp-zoom-in.mfp-ready .zoom-anim-dialog{opacity:1; -webkit-transform:scale(1); -moz-transform:scale(1); -ms-transform:scale(1); -o-transform:scale(1); transform:scale(1)}

.my-mfp-zoom-in.mfp-removing .zoom-anim-dialog{-webkit-transform:scale(0.8); -moz-transform:scale(0.8); -ms-transform:scale(0.8); -o-transform:scale(0.8); transform:scale(0.8); opacity:0}

.my-mfp-zoom-in.mfp-bg{opacity:0; -webkit-transition:opacity 0.3s ease-out; -moz-transition:opacity 0.3s ease-out; -o-transition:opacity 0.3s ease-out; transition:opacity 0.3s ease-out}

.my-mfp-zoom-in.mfp-ready.mfp-bg{opacity:0.8}

.my-mfp-zoom-in.mfp-removing.mfp-bg{opacity:0}

@media (max-width:1200px){.container{position:relative; max-width:90%}

.project-item:nth-child(1){background:url("../images/proj1.png") no-repeat left}

.project-item:nth-child(2){background:url("../images/proj2.png") no-repeat left}

.project-item:nth-child(3){background:url("../images/proj3.png") no-repeat left}
.form3 textarea{margin-bottom:30px; margin-top:0}
.nav-menu a{font-size:14px}

}

@media (max-width:992px){.header{padding:0}
header .callback{display:none}
header .phone{display:none}

.form3 textarea{width:350px}
.why-item{margin:30px auto}

.form3 button{display:block; margin-left:auto; margin-right:auto}

.why-block__wrap{display:flex; flex-direction:column; width:100%}
.why-block__content{order:-1}

.header_wrap{display:flex; justify-content:space-between}
.header-thanks{justify-content:center}
.main form{padding-top:20px}

.bg-text{padding:20px 0; margin-bottom:30px; width:100%; height:100%; background:rgba( 255,255,255,0.6)}

.bg-text h1{font-size:30px}
.bg-text h2{margin-top:10px; line-height:35px}

.hide{display:block}
.burger{display:flex; position:fixed; -webkit-box-pack:center; -webkit-justify-content:center; -ms-flex-pack:center; justify-content:center; -webkit-box-align:center; -webkit-align-items:center; -ms-flex-align:center; align-items:center; right:5vh; top:5px; height:40px; width:40px; z-index:9}

.burger:hover{cursor:pointer}

.burger span{position:absolute; width:30px; height:3px; background-color:#111}

.burger span:before{content:''; position:absolute; width:30px; height:3px; top:-8px; background-color:#111; -webkit-animation:menu-load-state-top .4s; animation:menu-load-state-top .4s}

.burger span:after{content:''; position:absolute; width:30px; height:3px; top:8px; left:0; background-color:#111; -webkit-animation:menu-load-state-bottom .4s; animation:menu-load-state-bottom .4s}

.nav-menu{display:none; padding:60px 20px; position:fixed; top:0; right:0; width:250px; height:100vh; background:#cbccd4; z-index:-1}
.nav-menu li{padding:0 20px; line-height:0; margin-bottom:5px}

.active span{background:0 0}

.active .burger{-webkit-transition:.3s; -o-transition:.3s; transition:.3s; background:0 0}

.active .nav-menu li{padding-top:10px; padding-bottom:10px}

.active .nav-menu li a{font-size:14px}

.active span:before{top:0; -webkit-animation:top-rot-in .4s forwards; animation:top-rot-in .4s forwards}

.active span:after{top:0; -webkit-animation:bot-rot-in .4s forwards; animation:bot-rot-in .4s forwards}

.active .nav-menu{display:flex; margin:0; flex-direction:column; justify-content:flex-start; -webkit-transition:opacity .7s ease; -o-transition:opacity .7s ease; transition:opacity .7s ease; -webkit-animation:menu-slide .7s; animation:menu-slide .7s; z-index:8}

@-webkit-keyframes menu-slide{0%{-webkit-transform:translateX(500px); transform:translateX(500px)}

100%{-webkit-transform:translateX(0); transform:translateX(0)}

0%{-webkit-transform:translateX(500px); transform:translateX(500px)}
}

@keyframes menu-slide{0%{-webkit-transform:translateX(500px); transform:translateX(500px)}

100%{-webkit-transform:translateX(0); transform:translateX(0)}

0%{-webkit-transform:translateX(500px); transform:translateX(500px)}
}

@-webkit-keyframes top-rot-in{0%{-webkit-transform:rotate(0); transform:rotate(0)}

100%{-webkit-transform:rotate(45deg); transform:rotate(45deg)}
}

@keyframes top-rot-in{0%{-webkit-transform:rotate(0); transform:rotate(0)}

100%{-webkit-transform:rotate(45deg); transform:rotate(45deg)}
}

@-webkit-keyframes bot-rot-in{0%{-webkit-transform:rotate(0); transform:rotate(0)}

100%{-webkit-transform:rotate(-45deg); transform:rotate(-45deg)}
}

@keyframes bot-rot-in{0%{-webkit-transform:rotate(0); transform:rotate(0)}

100%{-webkit-transform:rotate(-45deg); transform:rotate(-45deg)}
}

.logo{position:relative}
.header button{position:relative}
.callback{position:relative; right:0}

.phone{margin-left:auto; margin-right:20px}
.why-item{width:100%; height:232px}

.why-item:nth-child(1){background:url("../images/why1.png") no-repeat right}

.why-item:nth-child(2){background:url("../images/why2.png") no-repeat right}

.why-item:nth-child(3){background:url("../images/why3.png") no-repeat right}

.why-item:nth-child(4){background:url("../images/why4.png") no-repeat right}

.why-item:nth-child(5){background:url("../images/why5.png") no-repeat right}

.why-item:nth-child(6){background:url("../images/why6.png") no-repeat right}
.why-text{position:relative; margin-left:auto; width:230px; text-align:left; top:20px; left:auto; right:20px; line-height:21px}

.project-item{padding:0}
.project-text{position:relative; max-width:100%; padding:20px; z-index:1}
.request-delievery{font-size:28px}
}

@media (max-width:768px){.slide img{height:710px}
.why h3{margin-bottom:20px}
.punkt-wrap{flex-wrap:wrap}
.punkt{margin-bottom:5px}
.clients{margin-top:240px}
.clients-wrap{padding:10px}
.arrow{transform:rotate(-20deg); -webkit-transform:rotate(-20deg); -moz-transform:rotate(-20deg); -ms-transform:rotate(-20deg); -o-transform:rotate(-20deg)}
.delievery{margin-top:80px; padding:15px 30px; width:auto; font-size:18px}

.scheme-wrap{justify-content:center}
.forth-img{height:543px; background:url(../images/benefits-mob.png) no-repeat center; background-size:contain}

.form3 fieldset{padding:0; width:100%; box-sizing:border-box}
.form3 form input{margin-left:10px; margin-right:10px; width:350px}
.form2 form input{width:350px}
.projects{position:relative}
.project-item{    width:500px;     height:535px}
.project-item:nth-child(1){background:url("../images/proj1mob.png") no-repeat center; background-size:contain}

.project-item:nth-child(2){background:url("../images/proj2mob.png") no-repeat center; background-size:contain}

.project-item:nth-child(3){background:url("../images/proj3mob.png") no-repeat center; background-size:contain}
}

@media (max-width:576px){header .callback{display:none}
.thanks-title{font-size:36px; line-height:1.2}
.thanks-descr{font-size:18px}
.benefit-item{background-size:cover; margin-right:5px; margin-left:5px; width:170px; height:170px}
.benefit-item__text{font-size:20px; line-height:26px}
.arrow{display:none}
.clients{margin-top:200px}
.we-item-photo{width:auto;}
.we1 .photo-title, .we2 .photo-title{top:34px;}
.we3 .photo-title{top:44px;}
.third-con{flex-wrap:wrap}
.scheme-wrap{align-items:center; flex-direction:column}
.scheme-arrow{margin:10px auto 20px; transform:rotate(90deg); -webkit-transform:rotate(90deg); -moz-transform:rotate(90deg); -ms-transform:rotate(90deg); -o-transform:rotate(90deg)}

.project-text{background-color:#ff4d4d; font-size:18px}
.project-item h4{font-size:24px}
.project-item ul{font-size:17px}
.project-item{width:100%; height:550px; margin-bottom:20px}
.project-item:nth-child(1){background-size:cover}
.project-item:nth-child(2){background-size:cover}
.project-item:nth-child(3){background-size:cover}
.phone{display:none}
.request-delievery{padding:20px 30px; font-size:22px}

 .photo-title{width:100%}
.auto-text{margin-left:auto; margin-right:auto; right:auto; left:auto; width:90%}
.auto::before{width:100%}
.auto::after{display:none}
.auto ul{margin-left:auto; margin-right:auto; display:inline-block}
.main form{padding-top:10px; margin-left:auto; margin-right:auto}
form input{margin-left:0; margin-right:0}
.form2 form{padding:20px 20px 30px; border:7px solid #ffd200; margin-left:0; margin-right:0}
.form2 form input{margin:5px 0px; width:280px}
.form3 textarea{width:280px}
.form2-title{font-size:24px; margin:20px 0 25px 0}
.form3 form{padding:20px; border:7px solid #ffd200; margin-left:0; margin-right:0; padding-bottom:40px}
.form3 form input{margin-left:0; margin-right:0; width:280px}

.footer-wrap{flex-direction:column; justify-content:center; align-items:center}
.footer-text span{margin-top:25px}
.contacts{text-align:center; margin-top:25px}
}

@media (max-width:437px){.delievery{margin-top:50px}
.benefit-item{width:150px; height:150px}
.benefit-item__text{font-size:17px; line-height:20px}

}

@media (max-width:410px){.slide img{height:760px}

}

@media (max-width:376px){.we .callback{margin-top:30px}
.callback{width:230px}
.questions{padding-bottom:70px}
.punkt-wrap{margin-bottom:20px}
.third h2{line-height:36px}
.scheme{padding-top:20px}
.benefit-item{width:130px; height:130px}
.benefit-item__text{font-size:16px; line-height:18px}
.form3 textarea{width:100%}
.form3 form input{width:100%}
.form2 form input{width:100%}

.clients{margin-top:240px}

.main form{width:100%}
.sale{font-size:22px}
.form2 button{padding-left:20px; padding-right:20px}
.form3 button{padding-left:20px; padding-right:20px}

}