@font-face {
	font-family: 'Roboto';
	src: url('./fonts/roboto/regular.woff');
	font-weight: 400;
}

@font-face {
	font-family: 'Roboto';
	src: url('./fonts/roboto/italic.woff');
	font-weight: 400;
	font-style: italic;
}
@font-face {
	font-family: 'Roboto';
	src: url('./fonts/roboto/roboto-light.woff');
	font-weight: 300;
}

@font-face {
	font-family: 'Roboto';
	src: url('./fonts/roboto/lightItalic.woff');
	font-weight: 300;
	font-style: italic;
}

@font-face {
	font-family: 'Roboto';
	src: url('./fonts/roboto/medium.woff');
	font-weight: 500;
}

@font-face {
	font-family: 'Roboto';
	src: url('./fonts/roboto/bold.woff');
	font-weight: 700;
}


html {
   width: 100%;
   min-height: 100vh;
}

body {
	margin: 0;
	width: 100%;
	min-height: 100vh;
}
body *{
	margin: 0;
	box-sizing: border-box;
	outline: none;
	color: #2e2e2e;
	font-family: Roboto, sans-serif;
}

.site__content {
	width: 100%;
	max-width: 980px;
	margin: 70px auto 0;
}
img {
	display: block;
	max-width: 100%;
}
.blue {
	color: #26307a
}
.blue2 {
	color: #4f54b5;
	color: #1822df;
}

.main-h2 {
	font-size: 22px;
	text-align: center;
}
.main-h1 {
	font-size: 76px;
	text-align: center;
	margin: 70px 0 30px;
}

.lp2 {
	display: flex;
	flex-direction: column;
	margin: 70px 0;
}

.ink {
	display: flex;
	grid-gap: 10px;
}
.ink__img {
	width: 100%;
	max-width: 186px;
	overflow: hidden;
}
.ink__img2 {
	width: 100%;
	max-width: 162px;
	overflow: hidden;
}
.ink__img img {
	object-fit: cover;
	width: 100%;
	height: 100%;
}
.ink__content {
	width: 100%;
}

.in {
	display: flex;
	flex-direction: column;
	width: 100%;
}
.in * {
	color: #fff;
}
.in3 .in__head,
.in3 .in__item
{
	background: #1c586a
}
.in3 .in__head span {
	color: #f0af6f;	
	opacity: 1;
}
.in3 .in__del:before {
	height: 84%
}
.in4 .in__head,
.in4 .in__item
{
	/*background: #383bab*/
	/*background: #3A3CA6;*/
	background: #191de4;
}
.in4 .in__head span {
	color: #f0af6f;	
	opacity: 1;
}
.in4 .in__del:before {
	height: 84%
}
.in__head {
	background: #be6c0c;
	font-size: 34px;
	font-weight: 700;
	padding: 5px 40px;
	border-left: 2px solid #eb761d;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.in__head > span {
	display: flex;
	flex-direction: column;
	font-size: 10px;
	opacity: .7;
	text-transform: uppercase;
	flex-shrink: 0;
	margin-left: 20px;
	line-height: 1.5em;
}
.in__elem {
	display: flex;
}
.in__del {
	position: relative;
}
.in__del:before {
	height: 91.5%;
	width: 2px;
	background: #eb761d;
	content: '';
	display: block;

}
.in__content {
	display: flex;
	flex-direction: column;
}
.in__item {
	font-size: 14px;
	position: relative;
	font-weight: 500;
	background: #be6c0c;
	margin-top: 10px;
	margin-left: 30px;
	font-size: 16px;
	line-height: 1.5em;
	padding: 5px 20px;
	align-self: flex-start;
	font-weight: 500;
}
.in__item:nth-child(1) {
	margin-top: 20px;
}
.in__item-arr {
	position: absolute;
	display: flex;
	justify-content: flex-end;
	align-items: center;
	height: 2px;
	background: #eb761d;
	width: 30px;
	left: -30px;
	top: 50%;
	transform: translate(0, -50%);
}
.in__item-arr img {
	width: 16px;
}

.list {
	display: flex;
	justify-content: space-between;
	font-size: 14px;
	line-height: 1.5em;
	margin-top: 10px;
}
.list .img {
	max-width: 246px;
	margin-left: 10px;
	margin-top: -25px;
}

.list2 .img {
	max-width: 160px;
	margin-left: 10px;
	margin-top: 0;
}

.list-img {
	display: flex;
	grid-gap: 9px;
	margin-top: 20px;
}


.lp3 {
	display: flex;
	grid-gap: 10px;
	margin-bottom: 70px;
}
.lp3__content {
	width: 100%
} 
.lp3__img {
	max-width: 203px;
}
.lp3__img img {
	object-fit: cover;
	display: block;
	width: 100%;
	height: 100%;
}

.lp3__imgs {
	display: flex;
	grid-gap: 10px;
	align-items: flex-end;
}
.lp3__imgs + .lp3__imgs {
	margin-top: 10px;
}

.lp4 {
	display: flex;
	flex-direction: column;
	margin-bottom: 70px;
}
.lp4 .list-img {
	align-items: flex-end;
	margin-top: -9.5%;
}

.lp-note {
	font-size: 16px;
	color: #4044b7;
	border-left: 2px solid #eb761d;
	padding: 4px 0 4px 20px;
	line-height: 1.3em;
}
.lp-note * {
	font-size: 16px;
	color: #4044b7;
}
.lp5 {
	display: flex;
	flex-direction: column;
	margin-bottom: 70px;
}

.lp-st {
	display: flex;
	flex-wrap: wrap;
	margin-top: 30px;
	justify-content: space-between;
}
.lp-st__item {
	width: 25%;
	margin: 2% 1.5%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.lp6 {
	margin: 100px 0;
	text-align: center;
}
.lp6 * { 
	font-size: 16px;
	text-decoration: none;
	color: #3522a0;
	color: #1c209c;
	font-weight: 700;
	line-height: 1.5em;
	margin-top: 10px;
}

.lp6 a:hover {
	text-decoration: underline;
}
.lp6-logo {
	margin-bottom: 70px;
}

@media only screen and (max-width: 1024px){
	.site__content {
		max-width: 100%;
		padding: 0 20px;
	}

	.ink__img,
	.lp3__img {
		display: none;
	}
}

@media only screen and (max-width: 790px){
	.main-h1 {
		font-size: 40px;
	}
	.main-h2 {
		font-size: 18px;
	}

	.in__head {
		font-size: 24px;
	}
}

@media only screen and (max-width: 772px){
	.in4 .in__del:before {
		height: 77%;
	}

}

@media only screen and (max-width: 718px){
	.in3 .in__del:before {
		height: 86.5%;
	}
}
@media only screen and (max-width: 459px){
	.in3 .in__del:before {
		height: 89.5%;
	}
}

@media only screen and (max-width: 650px){
	.lp-note br {
		display: none;
	}
}
@media only screen and (max-width: 586px){
	.lp-st__item {
		width: 45%;
	}
	.main-h1 {
		font-size: 24px;
	}
	.main-h2 {
		font-size: 16px;
	}
	.in__head {
		font-size: 18px;
		padding: 5px 20px;
	}
	.in__head > span {
		font-size: 8px;
	}
	.in4 .in__del:before {
		height: 81%;
	}

	.lp4 .list-img {
		margin-top: 0;
	}
	.lp2 .list {
		flex-direction: column;
		margin: 20px 0;
	}
	.lp2 .list .img {
		margin: 20px 0 0;
		max-width: 100%;
		width: 48%;
	}

	.lp2 .list-img {
		flex-wrap: wrap;
	}
	.lp2 .list-img__item {
		width: 48%;
	}

	.lp2 .list-img__item img {
		object-fit: cover;
		width: 100%;
		height: 100%;
	}
	.lp4 .list {
		flex-direction: column;
		margin: 20px 0;
	}
	.lp4 .list .img {
		margin: 20px 0;
		max-width: 100%;
		width: 48%;
	}
	.lp4 .list-img {
		flex-wrap: wrap;
		align-items: inherit;
	}
	.lp4 .list-img__item {
		width: 48%;
	}
	.lp4 .list-img__item img {
		object-fit: cover;
		width: 100%;
		height: 100%;
	}
	.lp3__imgs {
		flex-wrap: wrap;
	}
	.lp3__imgs > div {
		width: 48%;
		order: 10;
	}
	.lp3__imgs > div img{
		object-fit: cover;
		width: 100%;
		height: 100%;
	}
	.lp3__imgs > div:nth-child(3) {
		width: 48%;
		order: 5;
		align-self: flex-start;
		margin-top: 20px;
		width: 100%;
	}
	.lp3__imgs {
		align-items: inherit;
	}
	.lp3__imgs > div:nth-child(3) img {
		width: 48%;
	}
	.lp3__imgs + .lp3__imgs > div:nth-child(3) {
		width: 48%;
		margin-top: 0;
	}
	.lp3__imgs + .lp3__imgs > div:nth-child(3) img {
		width: 100%;
	}
}

@media only screen and (max-width: 420px){
	.lp2 .list-img {
		flex-wrap: wrap;
	}
	.lp2 .list-img__item {
		width: 100%;
	}
	.lp2 .list .img {
		margin: 20px 0 0;
		max-width: 100%;
		width: 100%;
	}

	.lp3__imgs > div {
		width: 100%;
	}
	.lp3__imgs > div:nth-child(3) img {
		width: 100%;
	}
	.lp3__imgs + .lp3__imgs > div:nth-child(3) {
		width: 100%;
		margin-top: 0;
	}
	.lp3__imgs + .lp3__imgs > div:nth-child(3) img {
		width: 100%;
	}

	.lp4 .list .img {
		margin: 20px 0 0;
		max-width: 100%;
		width: 100%;
	}
	.lp4 .list-img__item {
		width: 100%;
	}
}


@media only screen and (max-width: 533px){
	.in2 .in__del:before {
		height: 92.3%;
	}
}
@media only screen and (max-width: 503px){
	.in2 .in__del:before {
		height: 93%;
	}
}
@media only screen and (max-width: 435px){
	.in2 .in__del:before {
		height: 93.5%;
	}
}
@media only screen and (max-width: 364px){
	.in2 .in__del:before {
		height: 93.7%;
	}
}
@media only screen and (max-width: 332px){
	.in2 .in__del:before {
		height: 94%;
	}
}

@media only screen and (max-width: 502px){
	.in4 .in__del:before {
		height: 76.5%;
	}
}
@media only screen and (max-width: 344px){
	.in4 .in__del:before {
		height: 73.5%;
	}
}
@media only screen and (max-width: 337px){
	.in4 .in__del:before {
		height: 71%;
	}
}
@media only screen and (max-width: 332px){
	.in4 .in__del:before {
		height: 73.5%;
	}
}

@media only screen and (max-width: 440px){
	.in__head {
		font-size: 16px;
		padding: 5px 10px;
	}
	.in__head > span {
		font-size: 6px;
	}
}

@media only screen and (max-width: 364px){
	.in__item {
		padding: 5px 10px;
	}
}

@media only screen and (max-width: 1024px){
	.site__content {
		margin-top: 20px;
	}
	.main-h1 {
		margin: 30px 0;
	}

	.lp2 {
		margin: 30px 0;
	}
	.lp3,
	.lp4,
	.lp5 {
		margin-bottom: 30px;
	}

	.lp6 {
		margin: 50px 0;
	}
	.lp6-logo {
		margin: 10px 0 30px;
	}
}