.container{position:relative;width:100%;max-width:1280px;margin:0 auto;padding:0 15px;box-sizing:border-box}
.row{width:100%;box-sizing:border-box}
.row:after { content: ""; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; margin: 0; padding: 0}

@media (min-width:400px){
.container{width:98%;padding:0}
}
@media (min-width:550px){
.container{width:98%}
.row{width:100%;margin-left:0}
}
html{font-size:62.5%}
section{padding:40px 0;overflow: hidden;}



a{text-decoration: none;}

body{font-family: "Manrope", sans-serif;font-weight:400; font-style: normal;font-size:16px;background-color:#fff;color:#191a1c;margin:0;padding:0}
.ovhi{overflow:hidden}


header{position:fixed; width:100%;top:0;left:0;background: #000278;border-bottom: 1px solid rgb(255 255 255 / 25%);padding:15px 0;z-index:9;transition: .3s ease;}
#openmenu{display:none;width: 2.4rem;float: left;margin: 1.3rem 0 1.3rem 0;}
.mobonly, .navhead{display:none}
.hgone{padding:5px 0;}
.toplogo {width:280px;float:left;z-index:9;}
.toplogo img {height: 40px;float: left;padding:5px 0}
nav{width:calc(100% - 460px);float:left;line-height: 50px;text-align:center}
nav a, .topphone a{color:#fff;font-size:15px;margin:0 12px;font-weight: 600;text-transform: uppercase;}
nav a:hover, .topphone a:hover{color:#f8db1e}

.topphone a{margin:0;padding-left: 22px;background: url(../img/icon/phone.svg) left center no-repeat;background-size: 15px;}

.topphone{float:left;width:180px;line-height: 50px;text-align:right}

.links {width: fit-content;margin: 0 auto;}


#topblcok{position: relative;height: 100vh;max-height: 719px;padding:81px 0 20px;background-size: cover;border-bottom:4px solid #F8DB1E;}

#topblcok video {z-index:1;position: absolute;top: 0;left: 0;width: 100%;height: 100%;object-fit: cover;z-index: -1;}
#topblcok .tbc{z-index:2;position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: rgb(0 0 0 / 30%);backdrop-filter: blur(3px);}

.mainblock{position: absolute;width: 100%;max-width: 800px;height: fit-content;top: 0;bottom: 0;right: 0;left: 0;margin: auto;text-align: center;}
.mainblock h1{font-weight: 700;font-size: 40px;text-transform: uppercase;text-shadow: 0px 0px 4px rgba(0,0,0,1);color:#fff}
.mainblock .readmore {float:unset;width: fit-content;margin: 0 auto;}


section{padding:60px 0;z-index:1}


#about{position: relative;background-image: url(../img/bg/grid.png);background-position: top 4.5rem right calc(40% - 38rem);background-size: 38rem;background-repeat: no-repeat}
#about h2.hti, .info h2.hti, #services h2.hti{text-align:left}
#about p{line-height: 2.8rem;margin: 3.5rem 0 2.5rem}
.aleft, .aright{width:50%;float:left}
.aright{width:46%;margin-left:4%;position: relative}
.aright img.collage1{float:left;width:72%;margin-bottom:11%;border-radius:.8rem}
.aright img.collage2{width:49%;position:absolute;margin:0;right:6%;bottom:0;border-radius:.6rem;box-shadow: 0 0 0 1rem #fff;z-index:1}
.arv{font-size: 2rem;line-height: 3rem;font-weight: 600;color: #191a1c;background: #fbcd21;display: inline-block;border-radius: .6rem;padding: .7rem 1.5rem;-webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);position: absolute;right: -1.4rem;top: 12rem}
	
.hiddenbut{width:100%;display:none}
.hiddenbut .linkbutton  {width: 26rem;text-align: center;margin: 2rem calc(50% - 15.5rem) 0}

.apluses{float:left;width:100%;margin:1rem 0}
.aplus{float:left;width:48%;font-size: 1.6rem;font-weight: 500;color: #191a1c;line-height:3rem}
.aplus:nth-child(odd){margin-right:4%}
.aicon{width:2rem;height:2rem;float:left;box-shadow: 0 .3rem .6rem rgba(0, 0, 0, .2);margin:.5rem 1.5rem 3.5rem 0;border-radius:50%;background-image: url(../img/icon/done.svg);background-position:center;background-size:1.4rem;background-repeat: no-repeat;background-color:#F8DB1E}
h2.hti{text-align:center;font-size: 3rem;line-height: 4rem;font-weight: 700;margin-top: 0;}
h2.hti span {font-size: 1.7rem;text-transform: uppercase;font-weight: 900;display: inline-block;margin-bottom: -1rem;}
h2.hti span, .gradient{color: #000278;
-webkit-background-clip: text;background-clip: text;}

.readmore{float:left}
.linkbutton {line-height:5.2rem;height:5.2rem;padding:0 2.5rem;background:#F8DB1E;color:#191a1c;border-radius:.6rem;cursor:pointer;font-size:1.7rem;font-weight:600;letter-spacing: 0;text-transform: unset;border: none;user-select:none;transition: .3s ease;}
.linkbutton:hover{transform: scale(1.05);background:#000278;color:#dadada;}
.readmore .linkbutton{background:#000278;color:#dadada;}
.readmore .linkbutton:hover{background:#F8DB1E;color:#191a1c;}


#service{background: #F1F1F6;}
#services{background: #d5d5da;}

.service{width:calc(33.3333333% - 5rem);float:left;margin:0 1rem 1rem;text-align:center;padding:1.5rem;border-radius:.6rem;transition: .3s ease}
.sbody{margin-top:2rem}
.service:hover{box-shadow: 0 0 6.5rem 0 rgb(0 0 0 / 7%)}
.service h3{font-weight:700;font-size: 1.8rem}
.service img{height: 6.4rem;padding: 1.5rem 0 1rem; }
.p5 img{padding: 2.5rem 0 0}
.service p {width:80%;font-size: 1.3rem;line-height: 2rem;margin: .5rem 10%;height: 6rem;color: #484848}
.service a {color: #484848;border-bottom: 1px dashed #484848}
.service a:hover{border-bottom: 1px dashed #191a1c}
.service:nth-child(10){display:none}




.map{float: right;width: calc(55% - 20px);border-radius: 6px;overflow: hidden;}
.info{float: right;width: calc(45% - 20px);margin-left:40px;}
.info h2.hti{margin-top:-1rem}


footer{background:#f1f1f6;padding:50px 0 30px;border-top:4px solid #F8DB1E;}
.flogo{float:left;width:320px}
.flogo img{float:left;height:60px;margin: 0;}


.falert{float:left;width:calc(100% - 320px);color:#777;font-size:13px;line-height: 18px;text-align: justify;}
.falert a{color:#777;}
.dev a, .pdmenu a, .copy a{color:#777;}
.falert a:hover, .dev a:hover, .pdmenu a:hover, .copy a:hover{color:#000278;}
.pdmenu a{margin-right:10px}



.supfot{color:#777;margin-top:20px;font-size:13px;padding-top:20px;border-top:1px solid #dfdfdf;line-height:20px}
.copy{float:left}
.dev {float:right}
.pdmenu{float:left;margin-left:30px;}

#mask{display:none;position: fixed;top: 0;left: 0;width: 100%;height: 100%;z-index: 99;background: rgb(255 255 255 / 95%);backdrop-filter: blur(4px);}

.orderwin h4{line-height:36px;font-size:22px;font-weight: 600;letter-spacing:1px;margin: 0 auto 5px;text-align: center;width: fit-content;text-transform: uppercase;}
.orderwin{display:none;width:92%;max-width:400px;height: fit-content;position:fixed;right:0;left:0;top:0;bottom:0;margin:auto;z-index:912;text-align: center;}
.orderwin input, .orderwin textarea{float: left;box-sizing: border-box;height: 47px;padding: 0 10px;border: 0;border-radius: 0;float: left;width: 100%;outline: none;transition: .3s all ease;font-size: 14px;color:#191a1c;background-color: transparent;border-bottom: 1px solid #000278;background-size: 22px;background-position: bottom 14px right 10px;background-repeat: no-repeat;margin-bottom: 15px}
.orderwin  input:hover, .orderwin  input:focus  {border-bottom: 1px solid #000278}
.orderwin button{color: #252525;width: 100%;margin-top: 10px}
.orderwin .linkbutton {cursor:pointer;}

.orderwin textarea{height:141px;resize: none;}

.orderwin input.fcin{background-image: url(../img/icon/fa.svg)}
.orderwin input.fcip{background-image: url(../img/icon/fp.svg)}
.orderwin textarea.fcim{background-image: url(../img/icon/fm.svg)}

.orderclose, .closeser, .calcback, .callerclose{float: left;font-size: 13px;border-bottom: 1px dashed rgb(0 2 120 / 100%);color: #000278;line-height: 16px;width:58px;text-align: center;margin: 10px calc(50% - 29px) 0;cursor: pointer;transition: .3s all ease;user-select: none}
.orderclose:hover, .closeser:hover{border-bottom: 1px dashed rgb(0 2 120 / 0%)}
.message, .message2 {display:none;line-height: 22px;font-size: 15px;padding: 50px 0;color: #fff}

.callerclose{position: absolute;bottom: -30px;left: 0}
.orderwin .checkbox {float:left}

.orderwin #iagree, .orderwin #iagree2{position: absolute;z-index: -1;opacity: 0;height: 24px;
width: 24px;}
.orderwin label{display: inline-flex;align-items: center;user-select: none;}
.orderwin label p{margin: 0;text-align: left;line-height: 13px;font-weight: 100;font-size: 12px;}
.orderwin label p span{color:#000278;cursor:pointer}
.orderwin label p span:hover{color:#F8DB1E}
.orderwin label::before {content: '';display: inline-block;width: 22px;height: 22px;
flex-shrink: 0;flex-grow: 0;border: 1px solid #000278;border-radius: 2px;margin-right: 8px;background-repeat: no-repeat;background-position: center center;background-size: 50% 50%;}
.orderwin #iagree:checked + label::before, .orderwin #iagree2:checked + label::before{background:#000278;background-image: url(../img/icon/check.svg);background-position: center center;background-size: 70% 70%;background-repeat: no-repeat;}


.infotext{position: absolute;top: 0;bottom: 0;left: 0;right: 0;margin: auto;width: 1020px;max-width:100%;height: calc(100vh - 40px);text-align: justify;padding-top: 20px;display:none}
.infotext a{color:#000278}
.infotext a:hover{color:#F8DB1E}
.buttline{position: relative;overflow: hidden;width: fit-content;margin: 20px auto 0;z-index: 1;}
.infotext .butt{float: left;margin:0 5px;dipslay:none}


.loader {display:none;width: 220px;font-size:13px;color:#191a1c;height: fit-content;position: absolute;top: 0;bottom: 0;left: 0;right: 0;margin: auto;text-align: center;z-index: 2;}
.loader p {margin: 20px 0 0}
.loader svg{width: 100px;height:100px;margin: 0 20px 0}


.msgr{position: fixed;bottom: 110px;right: 50px;width: 50px;display:none;z-index: 12}
.msg{position: relative;width: 42px;float: left;border-radius: 50%;margin:0 4px 5px;box-shadow: 2px 2px 6px -4px rgb(21 21 21)}
.msg img{width: calc(100% - 20px);padding: 10px;float: left}
.ctg{background: #37AEE2}
.ctg::before{content: "написать в Telegram";}
.vib{background: #7F4DA0}
.vib::before{content: "написать в Viber";}
.wsp{background: #2AB200;cursor:pointer}
.wsp::before{content: "Заказать звонок";}
.msg::before{position: absolute;width: max-content;color: #191a1c;padding: 5px 10px;right: 60px;top: 9px;line-height: 14px;font-size: 13px;opacity: 0;transition: .1s ease;z-index: 10;pointer-events: none;background:#F8DB1E}
.msg::after{content: '';width: 0;height: 0;display: block;position: absolute;z-index: 10;border-top: 6px solid transparent;border-bottom: 6px solid transparent;border-left: 6px solid #F8DB1E;top: 15px;right: 55px;opacity: 0;transition: .1s ease;pointer-events: none;}
.msg:hover::before, .msg:hover::after{opacity:1}

@keyframes myImgAnimation {
  0% { opacity: 0; }
  1% { opacity: 1; }
  33.3333% { opacity: 1; }
  34.3333% { opacity: 0; }
  100% { opacity: 0; }
  }
  
  @keyframes bgcolor {
  0% { transform: scale(.95);background: #37AEE2;box-shadow: 0 0 0 5px rgba(55, 174, 226, 12%)}
  32.5% { background: #37AEE2;box-shadow: 0 0 0 10px rgba(55, 174, 226, 40%)}
  33.5% { transform: scale(1.2);background: #7F4DA0;box-shadow: 0 0 0 11px rgba(201, 12, 221, 11%)}
  65.5% { transform: scale(.95);background: #7F4DA0;box-shadow: 0 0 0 6px rgba(201, 12, 221, 30%)}
  66.5% { transform: scale(1);background: #2AB200;box-shadow: 0 0 0 6px rgba(0, 189, 41, 11%)}
  100% { transform: scale(.95);background: #2AB200;box-shadow: 0 0 0 12px rgba(0, 189, 41, 30%)}
}
 .msc {position: fixed;z-index: 12;bottom: 50px;right: 50px;width: 50px;height: 50px;float: left;border-radius: 50%;background: #151515;cursor:pointer;transition: .3s ease;display:none}
.msc:hover{background: #C23191a1c}
.msc img{width: calc(100% - 26px);padding: 13px;float: left}
.msgrb {position: fixed;z-index: 12;cursor:pointer;bottom: 50px;right: 50px;width: 50px;height: 50px;float: left;box-shadow: 0 0 0 0 rgba(55, 174, 226, 40%);border-radius: 50%;background: #37AEE2;animation-name: bgcolor; animation-duration: 12s; animation-iteration-count: infinite}
.msgrb img {position: absolute;opacity:0; width: calc(100% - 20px);padding: 10px;float: left; animation-name: myImgAnimation; animation-duration: 12s; animation-iteration-count: infinite; }
.msgrb img:nth-child(1) { animation-delay: 0s; }
.msgrb img:nth-child(2) { animation-delay: 4s; }
.msgrb img:nth-child(3) { animation-delay: 8s; }


#textbody{width:calc(100% - 20px);max-height:calc(100% - 78px);overflow-y: scroll;padding: 0 10px;line-height:22px}
#textbody h3{color: #000278;font-size: 22px;}
#textbody p{margin: 0 0 20px;}

#textbody::-webkit-scrollbar-button{background-image:url('');background-repeat:no-repeat;width:6px;height:0px}
#textbody::-webkit-scrollbar-track{background-color:#fff)}
#textbody::-webkit-scrollbar-thumb{-webkit-border-radius: 0px;border-radius: 0px;background-color:#000278}
#textbody::-webkit-scrollbar-thumb:hover{background-color:#000278}
#textbody::-webkit-resizer{background-image:url('');background-repeat:no-repeat;width:2px;height:0px}
#textbody::-webkit-scrollbar{width: 2px}

#textbody .ppol * {vertical-align: baseline;}
 #textbody .ppol li {list-style-type: none;background-image:none;}
 #textbody .ppol ol li h3 {display: inline; font-size:22px}
 #textbody .ppol ol {counter-reset: list1;}
 #textbody .ppol ol > li:before {counter-increment: list1;content: counter(list1) ". "; font-weight: bold;}
 #textbody .ppol ol ol {counter-reset: list2;margin: 5px 0 10px 0;}
 #textbody .ppol ol ol > li:before {counter-increment: list2;content: counter(list1) "." counter(list2) ". ";font-weight: normal;}
 #textbody .ppol ul {list-style-type: disc;margin: 5px 0 10px 25px;}
 #textbody .ppol ul > li {list-style-type: disc;}

.morephoto {text-align: center;margin: 30px 0 0;font-size:18px}
.morephoto a{border-bottom: 1px dashed rgb(0 2 120 / 100%);color: #000278;}
.morephoto a:hover{border-bottom: 1px dashed rgb(0 2 120 / 0%);}
.morephoto img{width: 20px;margin: 0 5px -4px}

.msngrs{float:right;}
.msngr {float:right;margin-left:.5rem;padding:.6rem;border-radius:.3rem;transition: .3s all ease;}
.msngr img{width:2rem;float: left;}
.msgrtg{background-color:#37AEE2}
.msgrvb{background-color:#7F4DA0}
.msgrin{ background: #f09433;background: -moz-linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);background: -webkit-linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%);background: linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f09433', endColorstr='#bc1888',GradientType=1 );}
.msngr:hover{background-color:#151515!important;background:#151515!important}

.conbut, .iline{float: left;width: 100%;}
.conbut{margin-top:20px}
.conbut .linkbutton{width:fit-content}

.iline{text-align:right;width: calc(100% - 16px);line-height:32px;padding:10px 8px;margin-bottom:10px;background: #f1f1f6;border-radius: 6px;}
.iline span{float:left}
.iline a {color:#191a1c;font-weight:600}


@media (max-width:1100cpx){
	nav a{margin:0 7px}
}


@media (max-width:900px){
.service{width: calc(50% - 5rem);}
#about h2.hti, h2.hti, #services h2.hti{font-size:2.6rem;text-align:center}
.mainblock h1{font-size:3.6rem}
.aleft{width:100%}
.aleft h2{padding-bottom:39rem;}
.aright{position: absolute;top: 10rem;left: 0;right: 0;width:40rem;height: fit-content;margin: 0 auto;}
.aright img.collage2{right:0}
.readmore{width:100%}
.readmore .linkbutton{margin: 0 auto;width: fit-content;}
nav{box-sizing: border-box;position: absolute;background: rgb(255 255 255 / 90%);backdrop-filter: blur(3px);z-index: 15;width: 400px;max-width: 100%;height: 100vh;left: -410px;top: -15px;padding: 60px 20px 0;transition: .3s ease;}
.hgone nav{top: -5px;}
.navcame{left:0}
.navhead{position: absolute;width: calc(100% - 10px);left: 0;top: 0;padding-left: 10px;text-align: left;display:block;line-height:50px;font-size:22px;background:#F8DB1E;}
.navhead img.navc{position: absolute;width: 22px;right: 10px;top: 14px;filter: invert(1);}
.links{width:100%}
nav a{margin: 0;display: block;text-align: left;color: #191a1c;}
#openmenu{display:block;position: absolute;left: 0;}
.topphone{position: absolute;right: 0;}
.toplogo {height: 50px;width:100%}
.toplogo img{width: auto;position: absolute;left: 0;right: 0;margin: 0 auto;}
#services .aright, #services .row2 .aleft{padding-top: 3rem;width:60rem;margin: 0 auto;position: absolute;left: 0;right: 0;}
#services .row2 .aleft{width:100%;position: relative;width:60rem;margin:0 calc(50% - 30rem);padding-top:20rem}
#services .row2 .aright{width:100%;position: relative;top: 0;}
 #services .row2 .aright h2{position: absolute;width:100%;top: -70rem;}

}


@media (max-width:820px){
	.map, .info{width:100%}
	.info{margin: 0 0 40px}
	.conbut .linkbutton{margin: 0 auto;}
	.info h2.hti {text-align:center}
}

@media (max-width:700px){
	.flogo{width:100%;text-align:center}
	.flogo img{float:unset;margin:0 0 20px}
	.falert{width:100%;}
	.pdmenu{float:right}
	.dev{width: 100%;text-align: center;margin-top: 15px;font-size: 12px;}
	.mainblock h1{font-size:3.2rem}
	.service h3{font-size:1.7rem}
}
@media (max-width:650px){
.topphone{width: 24px;}
.topphone span{display:none;}
.topphone a{display: block;padding-left: 0;background-size: 24px;height: 24px;width: 24px;float: right;margin: 13px 0;}
#services .aright, #services .row2 .aleft{padding-top: 2rem;width:100%;max-width:calc(100% - 2rem);margin:0}
#services .row2 .aleft{text-align:center;max-width:100%;padding-top: 15rem;}

}

@media (max-width:560px){
	.copy{width:100%;margin:0;text-align:center;}
	.pdmenu{width:100%;margin:0;text-align:center;margin-top: 15px;}
	.pdmenu a{margin:0 5px}
	#openmenu{left:1rem}
	.topphone{right:1rem}
	#topblcok{max-height: 519px;}
	#services .row2 .aright h2{top: -66rem;}
}

@media (max-width:500px){
	h2.hti, #about h2.hti, h2.hti, #services h2.hti{font-size:2.4rem;line-height: 3.6rem;}
	h2.hti span , #about h2.hti span, h2.hti span, #services h2.hti span{font-size:1.6rem;}
	.msgrb, .msc{right:25px;bottom:25px}
	.msgr{bottom: 85px;right: 25px}
	body{font-size:15px}
	.service{width: calc(50% - 3rem);padding: .5rem;}
	.service p{width:90%;margin: .5rem 5%;}
	.service h3{font-size:1.6rem}
	.mobonly{display:block;margin: 0;}
	.mobonly a.linkbutton{display: block;width:100%;text-align: center;padding: 0;border-radius: 0 0 6px 6px}
	#services .aright{padding-top: 1.5rem;}
	#services .row2 .aright h2{top: -60rem;}
}

@media (max-width:460px){
	.aleft h2{padding-bottom: 32rem;}
	.aright{width:32rem}
	.mainblock h1{font-size:2.8rem}
	h2.hti, #about h2.hti, h2.hti, #services h2.hti{font-size: 2.2rem;line-height: 3.2rem;}
	#services .row2 .aright h2{top: -55rem;}
}

@media (max-width:410px){
	.toplogo img{height:40px;margin: 5px auto 0;}
	.service p {width: 100%;margin: .5rem 0;font-size: 1.2rem;line-height: 1.5rem;}
	#services .aright{padding-top: 2.5rem;}
	#services .row2 .aright h2{top: -52rem;}
}

@media (max-width:400px){
	.aleft h2{padding-bottom: 29rem;}
	.aright{width:29rem}
	#services .row2 .aright h2{top: -51rem;}
}

@media (max-width:360px){
.aplus, .aplus:nth-child(odd){width: 100%;margin:0}
#services .row2 .aright h2{top: -50rem;}
}