@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap');

*{margin:0; padding:0; box-sizing:border-box}

body{font-family: 'Inter', sans-serif; font-weight:400; font-size:18px; line-height:27px; color:#3b3b3b;}
h1{font-weight: 800; font-size:110px; line-height:80px;color: #253166; text-align:right;padding:0 50px 0 25px}
h1 span{padding:0 163px 0 0; display:block}
h2{font-weight: 900; font-size:80px; line-height:80px; color:#B71918; margin:0 0 50px 0; text-transform:uppercase}
h3{font-weight: 700; font-size: 24px; line-height: 36px; margin:0 0 16px 0}
h4{font-weight: 700; color: #8E8E8E;  margin:0 0 10px 0}
a{transition:all .3s; text-decoration:none}
img{max-width:100%}


.flexbox{display:flex}
.column{flex-direction:column}
.middle{align-items: center;}
.down{align-items: flex-end ;}
.center{text-align:center}
.both{justify-content:space-between}
.wrapper{max-width:1600px; margin:0 auto; padding:0 120px;}
.dos{width:50%}
.tres{width:calc(33.333% - 30px)}
.dos2{width:50%}
.m60{margin-bottom:60px}
.wrap{flex-wrap:wrap}
.height{height:100%}
.section:{position:relative}
.hidden{display:none}

.backimg img{object-fit:cover; width:100%; display:block}
.lefttext{padding:106px 0 0 calc(50% + 40px)}
.righttext{padding:80px calc(50% + 40px) 0 160px}

.popmenu{background: rgba(37, 49, 102, 0.86); position:absolute; top:0; right:0; height:100%; transition:all .5s; opacity:0; transform:translate(100%, -100%);
box-shadow: 1px 0px 8px 6px rgba(0, 0, 0, 0.15);}

.popmenu.opn{transform:translate(0%, 0%); opacity:1}
.popmenu .bar{cursor:pointer}
.popmenu a{font-weight:700; font-size:32px; line-height:41.6px; color:#fff; display:block; margin:0 0 30px 0}
.popmenu .close{float:right; margin:80px 140px 0 0; cursor:pointer}
.popmenu .list{padding:140px 60px 140px 140px; overflow:hidden}

.accords{border-bottom:1px solid #dcdcdc; margin:20px 0 0 0}
.accord .ttl{font-weight: 700; font-size: 32px; line-height:32px; padding:30px 0; position:relative; border-top:1px solid #dcdcdc; cursor:pointer}
.accord .ttl:after{content:'+'; float:right; font-weight: 200; font-size:40px; line-height:30px;}
.accord.opn .ttl:after{content:'-';}
.accord .descr{padding:0 0 0px 0; height:0; overflow:hidden; transition:all .5}
.accord.opn .descr{padding:0 0 20px 0; height:auto}

#screen1{background:url(../img/header.png) center bottom no-repeat; background-size:100% auto; padding: 0 0 370px 0; overflow:hidden; position:relative}
#screen1 .location{background:url(../img/location.svg) center left no-repeat; font-size:12px; line-height:16px;padding:0 0 0 35px}
#screen1 .phone{background:url(../img/phone.svg) center left no-repeat; font-weight:700; font-size:24px; line-height:31px;padding:0 0 0 35px}
#screen1 .topmenu{padding:10px 0 50px}
#screen1 .headbtn{color: #253166; font-weight:500; font-size:14px; line-height:24px;padding:0 15px; border-radius: 8px;border: 2px solid #253166;}
#screen1 .headbtn:hover{color:#fff; background:#253166;}

.bluebtn{background: #253166; color:#fff; text-transform:uppercase; letter-spacing:2px; display:inline-block; border-radius:8px; width:320px; height:55px; line-height:55px; margin:25px 0 0 0; text-align:center}

ul.plus li{position:relative; list-style:none; background:url(../img/plus.svg) top 9px left no-repeat; padding:0 0 5px 20px; display:flex; justify-content:space-between;}
ul.plus li:before{content:''; display:block; z-index:0; position:absolute; width: 80%; right: 0; bottom: 13px; border-bottom:1px dashed #AEAEAE}
ul.plus li b, ul.plus li strong {background:#fff; padding:0 0 0 10px; position:relative; z-index:2}
ul.plus li span{background:#fff; padding:0 10px 0 0; position:relative; z-index:2}
ul.plus.mini li{background:none; padding:0 0 5px 0px;}
ul.dots{padding:60px 0 0 0; list-style:inside}

#screen2{margin:100px 0 0 0}
#screen2 h3{color: rgba(37, 49, 102, 1); font-weight: 700; font-size:48px; line-height:62px; text-transform:uppercase}
#screen2 ul+p{margin:20px 0 100px 0}
#screen3{background:url(../img/kuzov.png) left bottom no-repeat; padding:150px 0 430px}
#screen4 h3{font-size:48px; font-weight:700; line-height:62px; text-transform:uppercase; padding:30px 0 20px 0}
#screen5{background:#F8F8F8; padding:50px 0; margin:150px 0 0 0}
#screen5 ul.plus li b,
#screen5 ul.plus li strong,
#screen5 ul.plus li span{background:#F8F8F8}

#screen6{background: #253166; padding:80px 0 120px}
#screen6 h3{color:#fff; font-size:48px; font-weight:700; line-height:62px; text-transform:uppercase}
#screen8{margin:150px 0}

hr{background:#ccc; border:none; width:90%; height:1px; margin:10px 0}

.gallery .slick-slide{padding:47px 0px; font-size:0px;text-align:center}
.gallery .img{background:#000;border-radius:12px; overflow:hidden; margin:0 10px 15px;}
.gallery img{height:215px; width:100%; object-fit: cover;  transition:all .5s; opacity:.3}
.gallery .slick-slide.slick-current+.slick-slide{padding:0 0px; font-size:16px}
.gallery .slick-slide.slick-current+.slick-slide img{height:310px; opacity:1}
.gallery span{color:#B71918}

.slick-dots{text-align:center; margin:10px 0 0 0}
.slick-dots li{list-style:none; display:inline-block}
.slick-dots li button{background: #DCDCDC; height:4px; width:60px; display:block; border:none; font-size:0; margin:0 5px; cursor:pointer}
.slick-dots li.slick-active button{background: #B71918;}

.slick-slider .slick-arrow{background:url(../img/arr.svg) center no-repeat; position:absolute; z-index:9; width:64px; height:64px; top:120px; left:14%; font-size:0; border:0; cursor: pointer;}
.slick-slider .slick-arrow.slick-next{left:auto; right:14%; transform:rotate(180deg)}
.slick-slider .slick-arrow.slick-disabled{display:none!important}

#screen6 .slick-slider .slick-arrow.slick-next{right:0; top:-75px;}
#screen6 .slick-slider .slick-arrow.slick-prev{right:100px; left: auto; top:-75px;}

.twentytwenty-container img {width: 100%; height: 435px; object-fit: cover;}
.bablock{height:435px!important;border-radius:12px; overflow:hidden}

.footer .tres{padding:0 0 20px 0}
#map, #map2, #map3, #map4{width: 100%; height: 380px; border-radius:12px; overflow:hidden; margin:20px 0 0}
.footer a{color:#3b3b3b}
.footer .copy a{color: #8E8E8E; text-decoration:underline}
.footer a.lnk{text-decoration:none}
.footer a.lnk span{color:#253166}
.footer .copy>div{padding:0 50px 0 0}
.footer .copy{padding:20px 0 50px}


.header .rightcol img{opacity:0}
.header .wrapper{position:relative;}
.header .topmenu{padding:55px 0 0px 0; font-weight:500; font-size:24px; line-height:37px;}
.header .topmenu a{display:inline-block; color:#3b3b3b; margin:0 50px 0 0; }
.header .topmenu a:hover{color: #01816C}
.header .phone{white-space:nowrap; color:#28293D; background: #fff url(../img/phone.svg) center left 15px no-repeat;
    padding: 5px 15px 5px 45px;
    border-radius: 30px;}
.header a.whitebtn{display:inline-block; height:55px; line-height:55px; width:280px; border-radius: 8px; background:#fff; color: #28293D; font-weight:500; text-align:center}
.header a.whitebtn:hover{color:#fff; background:#01816C;}
.header .main3{color: #8E90A6; margin:32px 0 0 0; font-size:21px}
.header .main3 h4{font-size:53px; line-height:64px; color: #008E70}
.header .leftcol{position:relative; width:50%; height:calc(100% - 150px); justify-content: center;}



.whitemenu{font-size:18px; margin:30px 0 30px 0}
.whitemenu a{color: #000000; display:inline-block; margin:0 40px 0 0; }
.whitemenu a:hover{color: #555770;}
.whitemenu img{max-width:300px}

.feedback{max-width:650px}
.feedback .line{margin:21px 0 0 0; position:relative}
.feedback input+label{font-size:16px; line-height:19px; color:#8E90A6; position:absolute; top:11px; left:16px}

.feedback input{font-family: 'Inter', sans-serif; font-weight:400; font-size:21px;}
.feedback input[type=text]::placeholder, .select .select__head{color: #8E90A6; font-size:21px;}

.feedback input[type=text], .feedback input[type=file], .select .select__head{background:#FFFFFF; height:75px; line-height:75px; padding:0 16px; width:100%; border: 2px solid #C7C8D9;border-radius: 12px; margin:0 0 15px 0}

.feedback input.name{background:#FFF url('../img/f1.svg') center right 12px no-repeat; }
.feedback input.phone{background:#FFF url('../img/f2.svg') center right 12px no-repeat; }
.feedback input.file{background:#FFF url('../img/f3.svg') center right 12px no-repeat; }
.feedback input.date{background:#FFF url('../img/f4.svg') center right 12px no-repeat; }

.feedback .line.both input, .feedback .line.both .select, .feedback input[type=submit]{width:calc(50% - 6px)}
.feedback input[type=submit]{height:55px; line-height:55px; width:320px; background:#B71918; border-radius:8px; color:#fff; letter-spacing:2px; text-transform:uppercase; border:none; text-align:center;cursor:pointer; transition:all .3s}
.feedback input[type=submit]:hover, .greenbtn:hover{background:#C7C8D9;}
.feedback p{font-size:12px; line-height:16px; color:#7C8188; padding:5px 0 20px 0}
.feedback p a{color:#253166;}
.feedback h3{font-size:32px; line-height:42px;}

.select{position:relative}
.select input{display:none}
.select .select__head:after{content:''; display:block;position:absolute; right:8px; top:calc(50% - 5px); width:34px; height:10px; background:url('../img/select.svg') center no-repeat;}
.select .select__head.open:after{transform:rotate(-180deg)}
.select .select__list{position:absolute; z-index: 9; top:100%; background: #fff; list-style: none; left: 8px; width: calc(100% - 16px); box-shadow: 0px 2px 4px rgba(40, 41, 61, 0.04), 0px 8px 16px rgba(96, 97, 112, 0.16);}
.select .select__list li{padding: 10px 12px; font-weight: 600; font-size: 16px;}
.select .select__list li:hover{background: #F2F2F5;}

#footer{text-align:right; padding:50px 0}
#totop{cursor:pointer}

@media(min-width:1400px){
	#screen1 {padding: 0 0 600px 0;}
	#screen3 {background-position:center bottom;}
}

	
@media(max-width:1024px){
	.wrapper{padding:0 40px}
	#screen1 .location{display:none}
	h1 {font-size:80px;line-height: 80px; padding: 0 50px 0 0;}
	h1 span {padding: 0 110px 0 0;}
	#screen1 .topmenu {padding: 10px 0 40px;}
	#screen1 {background-size: 115% auto;}
	h2 {font-size:63px; line-height:63px;}
	#screen2{margin: 100px 0 0 0;}
	#screen2 ul+p {margin: 20px 0 80px 0;}
	#screen3 {padding: 100px 0 430px;}
	#screen4 h3 {padding:0px 0 20px 0;}
	#screen5 {padding: 50px 0; margin: 50px 0 0 0;}
	#screen8 {margin: 100px 0; overflow:hidden}
	#screen8 .dos img{max-width:none; width:140%; margin:0 -50% 0 0;}
	
}

@media(max-width:768px){
	.wrapper{padding:0 30px}
	h2 {margin: 0 0 30px 0;}
	#screen1 {background-size: 160% auto; background-position:right -180px bottom;}
	#screen1 .headbtn{display:none}
	.header.flexbox, .accord.opn .descr, #screen3 .flexbox{flex-wrap:wrap}
	#screen1 h1+div{padding: 30px 80px 0 200px;}
	#screen2 p.dos br, #screen3 p.dos br, #screen5 p.dos br{display:none; }
	#screen3 {padding: 70px 0 430px;}
	.accord.opn .descr .dos, #screen3 .flexbox .dos{width:100%; text-align:center}
	#screen3 p.dos, #screen8 p.dos{text-align:left!important; margin:0 0 20px 0}
	.gallery img, .gallery .slick-slide.slick-current+.slick-slide img{height:auto}
	#screen4 h3 {padding: 0px 0 20px 0; margin:0}
	.gallery .slick-slide {padding: 0px 0px;}
	#screen6 {padding: 50px 0 70px;}
	#screen8 {margin: 50px 0;}
	#screen8 .dos{width:100%;}
	#screen8 .dos.center{display:none}
	.footer .tres{width:50%}
	#screen3 .flexbox ul.dos{text-align:left}
	#screen3 .flexbox ul.dos b,
	#screen5 .flexbox ul.dos b{text-align:right; white-space:nowrap}
}

@media(max-width:460px){
	.wrapper{padding: 0 20px;}
	h2 {font-size:42px; line-height:42px;}
	.flexbox.copy, .accords .descr{flex-wrap:wrap}
	.flexbox.copy div{padding:0 0 20px 0}
	.footer .tres{width:100%;}
	.accords .descr img{margin:30px 0 0 0}
	.twentytwenty-container img {height:260px;}
	.bablock {height:260px!important;}
	#screen5 .flexbox, .topmenu{flex-wrap:wrap}
	#screen5 .flexbox p, .dos{width:100%}
	#screen5 .flexbox>ul, #screen2 ul{width:100%; margin:20px 0 0 0}
	#screen2 h3{font-size:28px; line-height:36px}
	#screen2 ul+p {margin: 20px 0}
	#screen1 .phone{order:3; width:100%; padding:30px 0 20px 30px}
	#screen1 .headbtn{order:4; display:block}
	#screen1 .bar{padding: 15px 0 0 0;}
	h1 {font-size:64px; line-height: 64px; padding:0 0 0 0; text-align:left; width:100%}
	h1 span {padding: 0 0px 0 0;}
	#screen1 h1+div {padding: 30px 0px 0 0px;}
	#screen1{padding: 0 0 220px 0;background-position: right -100px bottom;}
	#screen2 {margin: 50px 0 0 0;}
	.popmenu .close {margin: 40px 40px 0 0;}
	.popmenu .list {padding: 140px 0px 40px 40px;}
	.popmenu{width:100%}
	#screen3 {padding: 70px 0 200px; background-size: contain;}
	#screen3 .flexbox ul.dos{margin:20px 0 0 0}
	.gallery .img {background:none;}
	.gallery .img img{opacity:1}

}