@font-face {
font-family: 'SFPro-Bold';
src: url('fonts/SFProDisplay-Bold.woff') format('woff');
}

@font-face {
font-family: 'SFPro-Reg';
src: url('fonts/SFProDisplay-Regular.woff') format('woff');
}

@font-face {
font-family: 'SFPro-Light';
src: url('fonts/SFProDisplay-Light.woff') format('woff');
}

@font-face {
font-family: 'SFPro-med';
src: url('fonts/SFProDisplay-Medium.woff') format('woff');
}

@font-face {
font-family: 'SFPro-black';
src: url('fonts/SFProDisplay-Black.woff') format('woff');
}

@font-face {
font-family: 'futura';
src: url('fonts/ofont.ru_Futura PT.ttf') format('woff');
}

*{
	margin: 0;
	padding: 0;
}

body, html{
	background-color: #F4F7F8;
}

.container{
	max-width: 810px;
	margin: 0 auto;

}

nav{
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-top: 29px;
	padding-bottom: 25px;
	border-bottom: 1px solid rgba(159, 159, 159, .2);
}

.nav-logo{
	margin-right: 7px;
}

.nav-logo{
	width: 25px;
	height: 25px;
}

.nav-logo.active{
	display: block;
	box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.2);
border-radius: 5.52535px;
}
.nav-logo-link{
	display: flex;
	align-items: center;
	font-family: 'SFPro-Bold', sans-serif;
	color: #8C94A1;
	text-decoration: none;
	text-transform: uppercase;
	font-size: 16.8px;
}

.nav-link{
	text-decoration: none;
	font-size: 17px;
	font-family: 'SFPro-med', sans-serif;
	color: #9F9F9F;
	transition: .3s all;
	padding: 2px 5px;
}

.nav-link.active, .nav-logo-link.active{
	color: #3183FF;
}

.nav-link:hover{
	color: rgba(4,15,26,.6);;
	background-color:rgba(4,15,26,.05);
	border-radius: 4px;
}

.nav-link:not(:last-child){
	margin-right: 18px;
}

.header-utp{
	text-align: center;
	margin: 100px 0;
	color: #4B545C;
}

.logo-subtitle{
	font-family: 'SFPro-Light', sans-serif;
	font-size: 21px;
	margin-bottom: 4px;
}

.logo{
	width: 76px;
	height: 76px;
	box-shadow: 0px 0px 19px rgba(0, 0, 0, 0.2);
border-radius: 16.7971px;
margin-right: 17px;
}

.logo-text{
	font-family: 'SFPro-black', sans-serif;
	color: #303336;
	font-size: 50px;
}

.logo-cont, .link-group, .link-icon, .img-cont, .load-icon{
	display: flex;
	align-items: center;
	justify-content: center;
}

.logo-cont{
	margin-bottom: 50px;
}

.header-title{
	max-width: 580px;
	font-size: 28px;
	line-height: 33px;
	font-family: 'SFPro-reg',sans-serif;
	margin: 0 auto;
	margin-bottom: 42px;
}

.header-subtitle, .new-subtitle, .load-subtitle, .app-subtitle, .page-subtitle{
	max-width: 580px;
	font-size: 21px;
	line-height: 25px;
	font-family: 'SFPro-reg',sans-serif;
	margin: 0 auto;
	text-align: center;
	color: #4B545C;
}

.link-icon{
	width: 36px;
	height: 36px;
	text-align: center;
	background-color: #3183FF;
	border-radius: 100%;
	line-height: 36px;
}

.link-icon:not(:last-child){
	margin-right: 12px;
}

.link-group{
	margin-bottom: 10px;
}

.new-group{
	display: block;
	text-decoration: none;
	position: relative;
	max-width: 400px;
	margin: 0 auto;
	text-align: center;
	margin-bottom: 75px;
}

.new-img{
	position: absolute;
	top: calc(50% - 22px);
	right: -44px;
	width: 24px;
	height: 44px;
}

.new-title, .load-title, .page-title{
	font-size: 36px;
	font-family: 'SFPro-bold',sans-serif;
	margin-bottom: 10px;
	color: #303336;
}

.new-subtitle{
	color: #4B545C;
}

.ic-img:first-child{
	margin-right: 30px;
}

.img-cont{
	margin-bottom: 75px;
}

.load-icon{
	margin-bottom: 10px;
}

.load-title{
	margin-bottom: 0;
	margin-left: 15px;
}

.load-cont{
	margin-bottom: 100px;
}

.app .logo{
	display: block;
	margin: 0 auto;
	margin-bottom: 15px;
}

.app-title{
	text-align: center;
	font-family: 'SFPro-bold',sans-serif;
	font-size: 28px;
}

.app{
	margin-bottom: 96px;
}

.app-subtitle{
	margin-bottom: 24px;
	color: #4B545C;
}

.app-img{
	display: block;
	margin: 0 auto;
}

.page-img-container{
    margin-top: 150px;
}

footer{
	background-color: #fff;
	padding-top: 88px;
	padding-bottom: 130px;
}

.footer-container{
	display: flex;
	justify-content: space-between;
	margin-bottom: 60px;
}

.footer-left{
	display: flex;
}

.fi-title{
font-family: 'SFPro-bold',sans-serif;
margin-bottom: 10px;
font-size: 17px;
color: #4B545C;
}

.fi-link{
	display: block;
	text-decoration: none;
	font-size: 17px;
	color: #4B545C;
	font-family: 'SFPro-reg',sans-serif;
}

.fi-link:not(:last-child){
	margin-bottom: 5px;
}

.footer-right .footer-item{
	text-align: right;
}

.footer-left .footer-item:not(:last-child){
	margin-right: 50px;
}

.footer-copy{
	display: flex;
	align-items: center;
}

.app-logo{
	margin-right: 10px;
}

.footer-copy span{
	font-size: 14px;
	font-family: 'futura', sans-serif;
	color: #4B545C;
}

.page-subtitle{
	max-width: 100%;
}


.page{
	max-width: 400px;
	margin: 0 auto;
	text-align: center;
	margin-top: 100px;
	margin-bottom: 75px;
}

.page-img-container{
	display: flex;
	justify-content: center;
	padding-bottom: 100px;
	border-bottom: 1px solid rgba(159, 159, 159, .2);
	margin-bottom: 40px;
}

.page-img-container img{
	width: 171px;
	height: 100%;
}

.page-img-container img:not(:last-child){
	margin-right: 15px;
}

.phone-2{
	margin-top: 62px;
}

.phone-3{
	margin-top: -62px;
}

.phone-4{
	margin-top: 92px;
}

.version-title{
	font-size: 28px;
	font-family: 'SFPro-bold', sans-serif;
	color: #303336;
}

.ver-cont{
	display: flex;
	align-items: center;
	margin-bottom: 15px;
}

.tag{
	display: block;
	margin-left: 5px;
	font-size: 14px;
	font-family: 'SFPro-reg', sans-serif;
	color: #fff;
	background: #3183FF;
	border-radius: 4px;
	padding: 1px 5px;
}

.version-date{
	font-size: 21px;
	font-family: 'SFPro-reg',sans-serif;
	margin-bottom: 30px;
	color: #303336;
}


.version-subtitle, .version-list{
	font-size: 17px;
	color: #4B545C;
	font-family: 'SFPro-reg',sans-serif;
	margin-bottom: 20px;
}

.version-list{
	list-style: decimal;
	margin-left: 18px;
}

.version-block{
	padding-bottom: 60px;
	border-bottom: 1px solid rgba(159, 159, 159, .2);
	margin-bottom: 40px;
}

.version-block:last-child{
	padding: 0;
	border:none;
	margin-bottom: 150px;
}

.form{
	margin: 0 auto;
	max-width: 500px;
	margin-bottom: 100px;
}

.form-input, .form-textarea{
	background: #E2E5E9;
	border-radius: 15px;
	padding: 18px 0px;
	padding-left: 20px;
	width: calc(100% - 20px);
	font-size: 21px;
	font-family: 'SFPro-Reg', sans-serif;
	outline: none;
	border: none;
	color: #4B545C;
	margin-bottom: 16px;
	text-align: left;
}

.form-textarea{
	margin-bottom: 0;
}

.form-input::placeholder, .form-textarea::placeholder{
	color: #4B545C;
}

.form-btn{
	margin-left: auto;
	display: block;
	margin-top: 25px;
	border: none;
	outline: none;
	color: #fff;
	background: #3183FF;
	border-radius: 15px;
	font-family: 'SFPro-Reg', sans-serif;
	font-size: 21px;
	padding: 18px 77px;
}

.content{
	margin-bottom: 100px;
}

.content p{
	font-size: 21px;
	font-family: 'SFPro-Reg', sans-serif;
	color: #4B545C;
}

.content p:not(:last-child){
	margin-bottom: 25px;
}

.content h3{
	font-size: 21px;
	font-family: 'SFPro-bold', sans-serif;
	margin-bottom: 25px;
	color: #4B545C;
}

.ic-img{
	width: 311px;
	height: auto;
}

@media(max-width: 811px){
	.container{
		max-width: 90vw;
		margin: 0 5vw;
	}
	
	.page-img-container{
    margin-top: 0px;
}

	.ic-img{
		width: 40vw;
		height: auto;
	}

	footer{
		padding: 40px 0;
	}

	.page-img-container img{
		height: 100%;
		width: calc((90vw / 4) - 45px);
		margin-top: 0;
		margin-bottom: 0;
	}
}

@media(max-width: 550px){

	.header-subtitle, .new-subtitle, .load-subtitle, .app-subtitle, .page-subtitle{
		max-width: 100%;
		font-size: 16px;
	}

	.content p, .content h3{
		font-size: 16px;
	}

	.header-utp{
		margin: 50px 0;
	}

	.page-img-container, .version-block{
		padding-bottom: 20px;
		margin-bottom: 20px;
	}

	.version-block:last-child{
		padding: 0;
		margin-bottom: 20px;
	}

	.page-img-container img{
		width: 23%;
		height: 100%;
		margin-top: 0;
		margin-bottom: 0;
	}

	.page{
		margin: 50px auto;
	}

	.new-title, .load-title{
		font-size: 28px;
	}

	.page-title{
		font-size: 26px;
	}

	.nav-link{
		font-size: 15px;
	}

	.nav-link:not(:last-child){
		margin-right: 5px;
	}

	.new-group{
		max-width: 100%;
	}

	.new-img{
		right: -10px;
	}

	.footer-right .footer-item{
		text-align: left;
	}

	.footer-container{
		flex-direction: column;
	}

	.footer-left{
		justify-content: space-between;
		margin-bottom: 10px;
	}

	.version-date{
		font-size: 17px;
	}

	.form-input, .form-textare{
		font-size: 18px;
	}
}

@media(max-width: 410px){
	.nav-logo-link span{
		display: none;
	}

		.header-title, .app-title, .version-title{
		font-size: 24px;
	}
}