@font-face {
	font-family: 'Roboto'; /* Имя шрифта */
	src: url(fonts/roboto-regular.ttf); /* Путь к файлу со шрифтом */
	font-weight: normal;
}
@font-face {
	font-family: 'Roboto'; /* Имя шрифта */
	src: url(fonts/roboto-thin.ttf); /* Путь к файлу со шрифтом */
	font-weight: 200;
}
@font-face {
	font-family: 'Roboto'; /* Имя шрифта */
	src: url(fonts/roboto-light.ttf); /* Путь к файлу со шрифтом */
	font-weight: 300;
}
@font-face {
	font-family: 'Roboto'; /* Имя шрифта */
	src: url(fonts/roboto-lightitalic.ttf); /* Путь к файлу со шрифтом */
	font-weight: 300;
	font-style: italic;
}
@font-face {
	font-family: 'Roboto'; /* Имя шрифта */
	src: url(fonts/roboto-medium.ttf); /* Путь к файлу со шрифтом */
	font-weight: 500;
}

@font-face {
	font-family: 'Roboto'; /* Имя шрифта */
	src: url(fonts/roboto-mediumitalic.ttf); /* Путь к файлу со шрифтом */
	font-weight: 500;
	font-style: italic;
}

@font-face {
	font-family: 'Roboto'; /* Имя шрифта */
	src: url(fonts/roboto-bold.ttf); /* Путь к файлу со шрифтом */
	font-weight: bold;
}

@font-face {
	font-family: 'Roboto'; /* Имя шрифта */
	src: url(fonts/roboto-bolditalic.ttf); /* Путь к файлу со шрифтом */
	font-weight: bold;
	font-style: italic;
}


body {
	background: #0f1e37;
	margin: 0;
	padding: 0;
	font-family: 'Roboto';
}

* {
	box-sizing: border-box;
}

.h1 {
	font-size: 43px;
	font-size: 2.2vw;
	font-weight: 200;
	color: #fff;
	position: fixed;
	z-index: 200;
	left: 255px;
	left: 13.2vw;
	top: 38px;
	top: 1.968vw;
}

.home-page {
	background: url(img/bg-1.jpg) center no-repeat;
	width: 100%;
	height: 100%;
	background-size: cover;
}

.project-page {
	background: url(img/bg-2.jpg) center no-repeat;
	width: 100%;
	height: 100%;
	background-size: cover;
}

.area-work-page {
	background: url(img/bg-3.jpg) center no-repeat;
	width: 100%;
	height: 100%;
	background-size: cover;
}

.partners-page {
	background: url(img/bg-4.jpg) center no-repeat;
	width: 100%;
	height: 100%;
	background-size: cover;
}

.contacts-page {
	background: url(img/bg-5.jpg) center no-repeat;
	width: 100%;
	height: 100%;
	background-size: cover;
}

.about-line {
	background: url(img/about-box.png) center no-repeat;
	width: 100%;
	height: 429px;
	height: 19.2vw;
	background-size: cover;
	position: absolute;
	bottom: 0;
	z-index: 10;
}

.about-text {
	width: 1005px;
	//width: 47vw;
	width: 52vw;
	margin-left: 75px;
	margin-left: 3.88vw;
	z-index: 100;
	margin-top: 150px;
	margin-top: 7.7vw;
}

.about-text h1 {
	margin: 0;
	font-size: 33px;
	font-size: 1.7vw;
	color: #fff;
	font-weight: 500;
	line-height: 40px;
	line-height: 140%;
}

.about-text h3 {
	margin: 0;
	font-size: 18px;
	color: #fff;
	font-weight: 300;
	line-height: 29px;
	line-height: 1.5vw;
	margin-top: 30px;
	margin-top: 1.55vw;
}

.logo {
	background: url(img/logo.svg) no-repeat;
	width: 198px;
	height: 47px;
	position: fixed;
	top: 40px;
	left: 40px;
	z-index: 999;
	background-size: contain !important;
}

.logo img {
	width: 10.32vw;
	height: 2.45vw;
}

.phone-box {
	position: fixed;
	top: 40px;
	top: 2.07vw;
	right: 40px;
	right: 2.07vw;
	color: #fff;
	z-index: 999;
}

.phone-box__call-us {
	font-size: 16px;
	font-size: 0.829vw;
	font-weight: 300;
	text-align: right;
}

.phone-box__number {
	font-size: 34px;
	font-size: 1.76vw;
	font-weight: 300;
	text-align: right;
	margin-top: 5px;
}

.button {
	background: #e42722;
	display: inline-block;
	padding: 9px 29px 11px 29px;
	border-radius: 30px;
	font-size: 16px;
	font-size: 0.829vw;
	font-weight: 300;
	color: #fff;
	text-decoration: none;
}

#back-call {
	float: right;
	margin-top: 16px;
}

.brain {
	background: url(img/brain.png) no-repeat;
	width: 510px;
	height: 420px;
	position: absolute;
	z-index: 100;
	left: 0;
	right: 0;
	margin: auto;
	margin-top: 90px;
	zoom: 0.9;
}

.prev-text {
	position: absolute;
	z-index: 50;
	left: 0;
	right: 0;
	margin: auto;
	margin-top: 425px;
	text-align: center;
}

.prev-text h1 {
	font-size: 62px;
	font-size: 3.24vw;
	font-weight: 500;
	font-style: italic;
	color: #fff;
	margin: 0;
}

.prev-text h2 {
	font-size: 26px;
	font-size: 1.34vw;
	font-weight: 200;
	color: #fff;
	margin: 0;
}

.left-menu {
	position: fixed;
	z-index: 999;
	top: 185px;
	top: 9.58vw;
	left: 50px;
	left: 2.59vw;
}

.left-menu a {
	color: #fff;
	text-decoration: none;
	font-size: 17px;
	font-weight: 300;
	margin-bottom: 10px;
	display: table;
	width: initial;
	padding: 8px 19px 10px 19px;
}


.left-menu .pagination a.active, .left-menu a:hover {
	background: #e32723;
	border-radius: 30px;
}

.left-menu .pagination {
	position: initial;
	right: initial;
	top: initial;
	width: initial;
	border: initial;
	border-radius: initial;
	padding: 0;
	transform: initial;
}

.left-menu .pagination a {
	display: initial;
	height: initial;
	position: initial;
	color: #fff;
	text-decoration: none;
	font-size: 17px;	
	font-size: 0.9vw;
	font-weight: 300;
	margin-bottom: 10px;
	margin-bottom: 0.51vw;
	display: table;
	width: initial;
	padding: 0.41vw 0.98vw 0.51vw 0.98vw;
}


.left-menu .pagination a:after {
	display: none;
}

.pagination {
	position:fixed;
	right: 58px;
	right: 3vw;
	top: 50%;
	transform: translateY(-50%);
	z-index: 999;
	list-style: none;
	border-radius: 50px;
	border: 1px solid rgba(255, 255, 255, 0.2);
	width: 49px;
	width: 2.53vw;
	padding: 1.55vw 0;
}

.pagination a {
	display: block;
	height: 28px;
	height: 1.45vw;
	position: relative;
}
.pagination a.active:after {
	background: #e52721;
	width: 18px;
	width: 0.932vw;
	height: 18px;
	height: 0.932vw;
}
.pagination a .hover-text {
	position: absolute;
	right: 41px;
	right: 2.12vw;
	top: 4px;
	top: 0.2vw;
	opacity: 0;
	-webkit-transition: opacity 0.5s ease;
	transition: opacity 0.5s ease;
	padding-right: 15px;
	padding-right: 0.77vw;
	font-size: 15px;
	font-size: 0.77vw;
	color: rgb(255, 255, 255);
	width: 140px;
	width: 7.25vw;
	text-align: right;
}

.pagination a:hover .hover-text {
	opacity: 1;
}

.pagination a:after {
	-webkit-transition:box-shadow 0.5s ease;
	transition:box-shadow 0.5s ease;
	width: 8px;
	width: 0.414vw;
	height: 8px;
	height: 0.414vw;
	display: block;
	border-radius: 20px;
	border-radius: 1vw;
	content:'';
	position: absolute;
	margin: auto;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: #fff;
}


.two-box {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-gap: 30px;

}



.static-main {
	position: absolute;
	bottom: 0;
	right: 110px;
	right: 5.69vw;
	height: 275px;
	height: 14.3vw;
	z-index: 50;
}

.static-main .static-main-item::before {
	content: '';
	display: table;
	position: absolute;
	left: 0;
	right: 0;
	margin: auto;
	width: 1px;
	height: 100%;
	background: #5768b9;
	z-index: -1;
}

.static-main .static-main-item {
	text-align: center;
	margin-left: 75px;
	margin-left: 3.9vw;
	float: left;
	height: 100%;
	position: relative;

	cursor: pointer;
}

.static-main .static-main-item .number {
	font-size: 62px;
	font-size: 3.2vw;
	color: #fff;
	font-weight: 500;
	height: 91px;
	height: 4.7vw;
	margin-top: 38px;
	margin-top: 1.96vw;
}

.static-main .static-main-item .name-static {
	font-size: 19px;
	font-size: 0.98vw;
	color: #fff;
	font-weight: 300;
	line-height: 23px;
	line-height: 1.19vw;
}

.static-main-item .dot-red {
	width: 23px;
	height: 23px;
	background: #e22724;
	border-radius: 50px;
	position: absolute;
	left: 0;
	right: 0;
	margin: auto;
	display: flex;
	justify-content: center;
}


.static-main-info {
	transition: 0.3s ease;
	position: absolute;
	background: #fff;
	border-radius: 10px;
	padding: 20px;
	font-size: 16px;
	font-weight: 400;
	z-index: 100;
	bottom: 16px;
	margin: 0 auto;
	box-shadow: 0 0 30px #132144;

	transform: translateY(15px);
	opacity: 0;

	width: 150px;
}


.static-main-item:hover .static-main-info {
	display: table;

	transform: translateY(0px);
	opacity: 1;
}



.all-project {
	opacity: 0;
	position: absolute;
	top: 23px;
	top: 1.19vw;
	left: 125px;
	left: 6.47vw;
	width: 100%;
	font-size: 0.82vw; 
	font-weight: 300;
}

.all-project a {
	color: #b3bffd !important;
	background: initial !important;
	border-bottom: 1px solid #6473c5;
	border-radius: 0 !important;
	padding: 0 !important;
	padding-bottom: 1px !important;
	font-size: 16px !important;
	font-size: 0.82vw !important; 
}

.all-project a:hover {
	border-bottom: 0;
}

.proj.active ~ .all-project {
	opacity: 1;
}

.proj:hover ~ .all-project {
	opacity: 1;
}

.content {
	width: calc(100% - 25.38vw);
	position: absolute;
	left: 350px;
	left: 18.13vw;
	margin-top: 200px;
	margin-top: 10.36vw;
}


.project-list {
	overflow: hidden;
	overflow-y: auto;
}

.project-list .project-item {
	display: table;
	width: 100%;
	margin-bottom: 30px;
}

.project-item_logo-box {
	display: inline-block;
	vertical-align: middle;
}

.project-list .project-item .project-item_logo {
	width: 150px;
	width: 7.77vw;
	height: 150px;
	height: 7.77vw;
	border-radius: 150px;
	border-radius: 7.77vw;
	justify-content: center;
	display: flex;
}

.project-list .project-item .project-item_logo img {
	width: initial;
	height: initial;
	align-self: center;
}

.project-list .project-item .project-name-box {
	display: inline-block;
	width: calc(100% - 184px);
	width: calc(100% - 9.8vw);
	margin-left: 30px;
	margin-left: 1.55vw;
	vertical-align: middle;
}

.project-list .project-item .project-name-box .project-name,
.project-list .project-item .project-name-box .project-name a {
	font-size: 16px;
	color: #fff;
	font-weight: 500;
	line-height: 23px;
	text-decoration: none;
}

.project-list .project-item .project-name-box .go-to-site {
	margin-top: 10px;
	margin-top: 0.518vw;
	font-size: 0.829vw;
}

.project-list .project-item .project-name-box .go-to-site i.link-ico {
	display: inline-block;
	vertical-align: middle;
	width: 19px;
	height: 15px;
	background: url(img/link-ico.png) no-repeat;
	margin-right: 8px;
}

.project-list .project-item .project-name-box .go-to-site a {
	color: #a2affa;
	text-decoration: none;
}

.project-list .project-item .project-name-box .go-to-site a:hover {
	color: #fff;
}

/*Colors bg logo project*/
.blue {background: #0063d2;}
.blue-yugu {background: #336aba;}
.red {background: #c41419;}
.brown {background: #7a4a2b;}
.dark-blue {background: #162d79;}
.green-dol {background: #145664;}
.faint-blue {background: #3a5a80;}
.green {background: #3f910d;}
/*END*/

.box-li {
	color: #fff;
	margin-bottom: 30px;
}

.h3 {
	color: #fff;
	font-size: 30px;
	margin-bottom: 30px;
}

.box-li ul {
	display: inline-block;
	vertical-align: top;
	//width: 40%;
	margin: 0;
	padding-left: 20px;
}

.box-li ul li {
	font-size: 18px;
	font-weight: 300;
	color: #fff;
	margin-bottom: 20px;
	list-style-image: url(img/li-ico.png);
	padding-left: 10px;
}

.partners-box img {
	height: 70px;
	margin-right: 100px;
	margin-bottom: 80px;
}

.feedback {
	width: 930px;
	width: 48.18vw;
	display: inline-block;
}

.feedback input {
	color: #fff;
	border: 0;
	border-radius: 30px;
	font-size: 20px;
	font-size: 1.03vw;
	outline: none;
	font-weight: 300;
	font-family: 'Roboto';
}

.feedback input[type=text] {
	height: 56px;
	height: 2.9vw;
	width: 40%;
	margin-right: 30px;
	margin-right: 1.55vw;
	padding: 0 1.81vw;
	display: inline-block;
	background: #383b89;
}

.feedback input[type=text]:nth-child(2) {
	margin-right: 0;
}

.feedback .sumbit {
	background: #749715;
	height: 56px;
	height: 2.9vw;
	width: 100%;
	font-weight: 300;
	text-align: center;
	cursor: pointer;
	margin-bottom: 30px;
	margin-bottom: 1.55vw;
}

.feedback textarea {
	background: #383b89;
	color: #fff;
	border: 0;
	border-radius: 30px;
	margin-top: 25px;
	margin-bottom: 30px;
	font-size: 17px;
	outline: none;
	width: 850px;
	width: 44.04vw;
	height: 95px;
	height: 4.92vw;
	resize: none;
	padding: 25px 35px;
	padding: 1.29vw 1.8vw;
	font-weight: 300;
	font-family: 'Roboto';
}

.feedback input::-webkit-input-placeholder, .feedback textarea::-webkit-input-placeholder {
	color: #888acf;
}
.feedback input::-moz-placeholder, .feedback textarea::-moz-placeholder {
	color: #888acf;
}
.feedback input:-ms-input-placeholder, .feedback textarea:-ms-input-placeholder {
	color: #888acf;
}
.feedback input:-moz-placeholder, .feedback textarea:-moz-placeholder {
	color: #888acf;
}

.contacts {
	display: inline-block;
	vertical-align: top;
	margin-left: 93px;
	color: #fff;
	font-weight: 300;
}

.contacts .signature {
	font-size: 16px;
	font-size: 0.829vw;
	margin-bottom: 9px;
}

.contacts .numb {
	font-size: 34px;
	font-size: 1.76vw;
	margin-bottom: 21px;
	margin-bottom: 1.08vw;
}

.contacts .numb a {
	color: #1ec7ff;
	text-decoration: none;
}

@media (max-width: 1280px) {
	.content {
		width: calc(100% - 440px);
		left: 300px;
	}

	.static-main {
		zoom: 0.9;
		right: 50px;
	}

	.static-main .static-main-item {
		margin-left: 50px;
	}

	.about-text {
		width: 50%;
		margin-left: 50px;
	}

	.about-text h1 {
		font-size: 30px;
	}

	.about-text h3 {
		margin-top: 15px;
	}


	.feedback {
		width: 100%;
	}

	.feedback input[type=text] {
		width: calc(47% - 70px);
	}

	.feedback textarea {
		width: calc(100% - 70px);
	}

	.contacts {
		margin-left: 0;
		margin-top: 50px;
	}

	.contact-item {
		display: inline-block;
		vertical-align: top;
		margin-right: 50px;
	}

	.hidden {
		height: calc(100% - 300px);
		overflow: hidden;
	}

	.box-li {
		margin-bottom: 30px;
	}

	.box-li ul li {
		font-size: 17px;
	}
}

@media (max-width: 1024px) {
	.logo {
		zoom: 0.9;
	}

	.h1 {
		left: 230px;
		left: 11.9vw;
		top: 34px;
		top: 1.76vw;
		font-size: 34px;
		font-size: 1.76vw;
	}

	.phone-box__call-us {
		font-size: 15px;
	}

	.phone-box__number {
		margin-top: 2px;
		font-size: 28px;
	}

	.static-main {
		zoom: 0.8;
		right: 50px;
	}

	.static-main .static-main-item {
		margin-left: 50px;
	}

	.about-text {
		margin-top: 199px !important;
		zoom: 0.9;
		width: 43%;
	}

	.project-list .project-item {
		width: 100% !important;
		margin-bottom: 30px !important;
		margin-right: 0 !important;
	}

	.project-list .project-item .project-item_logo {
		width: 50px;
		height: 50px;
	}

	.project-list .project-item .project-item_logo img {
		zoom: 0.5;
	}

	.feedback input[type=text] {
		margin-right: 11px;
	}
}

@media (max-height: 768px) {
	.brain, .prev-text {
		zoom: 0.7;
	}

	.h3 {
		margin-bottom: 30px;
	}

	.box-li {
		margin-bottom: 20px;
	}

	.content {
		//height: calc(100% - 250px);
		//height: calc(100% - 12.95vw);
		//margin-top: 150px;
		//margin-top: 7.77vw;
	}

	.box-li ul li {
		font-size: 16px;
		font-size: 0.829vw;
		margin-bottom: 18px;
	}

	.partners-box img {
		zoom: 0.8;
	}

	.feedback {
		zoom: 0.8;
	}

	.feedback textarea {
		width: calc(100% - 98px);
	}

	.feedback .sumbit {
		width: 97%;
	}

	.about-text h1 {
		//font-size: 28px;
		line-height: 36px;
		line-height: 1.86vw;
	}

	.about-text {
		//margin-top: 170px;
	}
}

@media (max-width: 768px) {
	body {
		padding-top: 150px;
	}

	html, body {
		height: 100%;
	}

	.brain {
		display: none;
	}

	.prev-text {
		margin-top: 0;
		position: initial;
		padding: 0 30px;
	}

	.prev-text h1 {
		font-size: 33px;
		line-height: 100%;
		font-style: normal;
	}

	.prev-text h2 {
		font-size: 21px;
		font-weight: 400;
		margin-top: 15px;
	}

	.about-text {
		all: unset;
	}

	.about-line {
		background: initial;
		padding: 0 30px;
		height: initial;
		position: initial;
		margin-top: 40px;
	}

	.about-text h1 {
		font-size: 24px;
		line-height: 120%;
	}

	.about-text h3 {
		font-size: 17px;
		line-height: 150%;
	}

	.pagination, .left-menu {
		display: none;
	}

	.static-main {
		all: unset;
		position: initial;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		margin-top: 40px;
	}

	.static-main .static-main-item {
		all: unset;
		text-align: center;
		width: 40%;
		position: relative;
	}

	.static-main .static-main-item .number {
		all: unset;
		font-size: 53px;
		color: #ffffff;
		font-weight: 600;
		display: table;
		margin: 0 auto;
		text-align: center;
	}

	.static-main .static-main-item .name-static {
		all: unset;
		font-size: 19px;
		color: #fff;
		font-weight: 300;
		line-height: 23px;
	}

	.h1 {
		display: none;
	}

	.logo {
		position: absolute;
		left: 0;
		right: 0;
		margin: auto;
	}

	.phone-box {
		all: unset;
		position: absolute;
		left: 0;
		right: 0;
		margin: 0 auto;
		top: 85px;
	}

	.phone-box__call-us {
		display: none;
	}

	.phone-box__number {
		text-align: center;
		font-size: 24px;
		font-weight: 600;
		color: #fff;
	}

	.section-page {
		height: initial !important;
		display: table;
	}

	.content {
		width: 100%;
		position: relative !important;
		margin-top: 0 !important;
		left: initial !important;
		height: initial !important;
		padding: 0 30px;
	}

	.project-list {
		margin-top: 50px;
	}

	.project-list .project-item .project-name-box .project-name, .project-list .project-item .project-name-box .project-name a {
		font-size: 16px;
		line-height: 23px;
	}

	.project-list .project-item .project-name-box .go-to-site {
		margin-top: 10px;
		font-size: 16px;
		font-weight: 500;
	}

	.box-li ul {
		width: 100% !important;
	}

	.area-work-page {
		padding-top: 50px;
	}

	.partners-box {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.partners-box a {
		width: 100%;
		text-align: center;
		margin-bottom: 23px;
	}

	.partners-box img {
		width: auto;
		height: 60px;
		margin-right: 0;
		margin-bottom: 0;
	}

	.box-li ul li {
		font-weight: 400;
	}

	.h3 {
		color: #fff;
		font-size: 30px;
		margin-bottom: 30px;
		font-weight: 500;
	}

	.feedback input[type=text] {
		width: 100%;
		height: 50px !important;
		padding: 20px;
		font-size: 17px !important;
		font-weight: 500;
		margin-bottom: 15px;
		border-radius: 10px;
	}

	.contacts-page {
		padding-top: 50px;
	}

	.feedback textarea {
		width: 100%;
		height: 150px;
		padding: 20px;
		font-size: 17px !important;
		font-weight: 500;
		margin-bottom: 15px;
		border-radius: 10px;
		margin-top: 0;
	}

	.feedback .sumbit {
		background: #749715;
		height: 63px;
		width: 100%;
		text-align: center;
		cursor: pointer;
		margin-bottom: 30px;
		border-radius: 10px;
		font-size: 17px;
		font-weight: 500;
	}

	.contacts {
		margin-left: 0;
		margin-top: 30px;
		padding-bottom: 50px;
	}

	.contacts .signature {
		font-size: 16px;
		font-weight: 400;
	}

	.contacts .numb {
		font-size: 34px;
		margin-bottom: 21px;
		font-weight: 500;
	}

	li {
		font-size: 17px !important;
	}

	a {
		color: #fff;
	}

	.static-main-item .dot-red {
		width: 16px;
		height: 16px;
		background: #e22724;
		border-radius: 50px;
		position: absolute;
		left: 0;
		right: 0;
		margin: auto;
		margin-top: -15px;
		display: flex;
		justify-content: center;
	}
}