/* Start:/bitrix/templates/pk/template_styles.css?177790452412978*/
/*-------------
 	General
-------------*/

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

html{
	font: normal 16px sans-serif;
	color: #555;
}

ul, nav{
	list-style: none;
}

a{
	text-decoration: none;
	color: inherit;
	cursor: pointer;

	opacity: 0.9;
}

a:hover{
	opacity: 1;
}

a.btn{
	color: #fff;
	border-radius: 4px;
	text-transform: uppercase;
	background-color: #2196F3;
	font-weight: 800;
	text-align: center;
}

hr{
	width: 150px;
	height: 2px;
	background-color: #2196F3;
	border: 0;
	margin-bottom: 80px;
}

section{
	display: flex;
	flex-direction: column;
	align-items: center;

	padding: 35px 100px;
}

@media (max-width: 1000px){

	section{
		padding: 100px 50px;
	}

}

@media (max-width: 600px){

	section{
		padding: 80px 30px;
	}

}

section h3.title{
	color: #414a4f;
	/*text-transform: capitalize; */
	font: bold 32px 'Open Sans', sans-serif;
	margin-bottom: 20px;
	text-align: center;
}

section p{
	max-width: 800px;
	text-align: center;
	margin-bottom: 35px;
	padding: 0 20px;
	line-height: 2;
}

ul.grid{
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}


/*-------------
 	Header
-------------*/

header{
	position: absolute;
	top: 0;
	left: 0;
	z-index: 10;
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	color: #fff;
	padding: 35px 100px 0;
}

header h2{
	font-family: 'Quicksand', sans-serif;
}

header nav{
	display: flex;
}

header nav li{
	margin: 0 15px;
}

header nav li:first-child{
	margin-left: 0;	
}

header nav li:last-child{
	margin-right: 0;	
}



@media (max-width: 1000px){
	header{
		padding: 20px 50px;
	}
}


@media (max-width: 700px){
	header{
		flex-direction: column;		
	}

	header h2{
		margin-bottom: 15px;
	}
}


/*----------------
	Compas section
----------------*/


@media (min-width:420px){
	.sec-compas{
		background-color: #395e78;
		min-height:600px;
		justify-content: center;
	}
}

@media (max-width:420px){
	.sec-compas{
		background-color: #395e78;
		min-height:400px;
		justify-content: center;
	}
}


/*----------------
 	Hero Section
----------------*/

.hero{
	position: relative;
	justify-content: center;
	min-height: 54vh;
	color: #fff;
	text-align: center;
}

.hero .background-image{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-size: cover;
	background-color: #2196F3;
	z-index: -1;
}

.hero .background-image:after{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	/*background-color: #414a4f;*/
	opacity: 0.75;
}

.hero h1{
	font: bold 60px 'Open Sans', sans-serif;
	margin-bottom: 15px;
}

.hero h3{
	font: normal 28px 'Open Sans', sans-serif;
	margin-bottom: 20px;
}

.hero a.btn{
	padding: 20px 46px;
}

@media (max-width: 800px){

	.hero{
		min-height: 600px;
	}

	.hero h1{
		font-size: 48px;
	}

	.hero h3{
		font-size: 24px;
	}

	.hero a.btn{
		padding: 15px 40px;
	}

}



/*--------------------
 	Our Work Section
---------------------*/

.оur-work{
	background-color: #fff;
}

.our-work .grid li{
	padding: 20px;
	height: 350px;
	border-radius: 3px;

	background-clip: content-box;
	background-size: cover;
	background-position: center;
	background-color: #333;
}

.our-work .grid li.small{
	flex-basis: 40%;
}

.our-work .grid li.large{
	flex-basis: 60%;
}


@media (max-width: 1000px){

	.our-work .grid li.small,
	.our-work .grid li.large{
		flex-basis: 100%;
	}

}



/*----------------------
 	Features Section
----------------------*/

.features{
	background-color: #f7f7f7;
}

.features .grid li{
	padding: 0 30px;
	flex-basis: 33%;
	text-align: center;
	transition: height 1s;
	height: 80px;
	overflow: hidden;
}

.features .grid li:hover{
	height: 380px;
}


.features .grid li i{
    font-size: 50px;
    color: #2196F3;
    margin-bottom: 25px;
}



.features .grid li h4{
	color: #555;
    font-size: 20px;
    margin-bottom: 25px;
}

.features .grid li p{
    margin: 0;
}

@media (max-width: 1000px){

	.features .grid li{
		flex-basis: 70%;
		margin-bottom: 65px;
	}

	.features .grid li:last-child{
		margin-bottom: 0;
	}

}


@media (max-width: 600px){

	.features .grid li{
		flex-basis: 100%;
	}

}



/*--------------------
 	Reviews Section
--------------------*/

.reviews{
	background-color: #fff;
}

.reviews .quote{
	text-align: center;
	width: 80%;
    font-size: 22px;
    font-weight: 300;
    line-height: 1.5;
    margin-bottom: 20px;
    padding: 0;
}

.reviews .author{
    font-size: 18px;
    margin-bottom: 50px;
}

.reviews .author:last-child{
    margin-bottom: 0;
}

@media (max-width: 1000px){

	.reviews .quote{
		font-size: 20px;
	}

	.reviews .author{
	    font-size: 16px;
	}

}



/*---------------------
 	Contact Section
---------------------*/

.contact{
	background-color: #f7f7f7;
}

.contact form{
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;

	max-width: 800px;
	width: 80%;
}

.contact form input{
	padding: 15px;
	flex: 1;
	margin-right: 30px;
	font-size: 18px;
	color: #555;
}

.contact form .btn{
	padding: 18px 42px;
}


@media (max-width: 800px){

	.contact form input{
		flex-basis: 100%;
		margin: 0 0 20px 0;
	}

}




/*-------------
 	Footer
-------------*/

footer{
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    color: #fff;
    background-color: #395e78;
    padding: 60px 0;
    background-image: url(/images/zd.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    background-blend-mode: multiply;
	background-position-y: bottom;
}

footer ul{
	display: flex;
	margin-bottom: 25px;
	font-size: 32px;
}

footer ul li{
	margin: 0 8px;	
}

footer ul li:first-child{
	margin-left: 0;	
}

footer ul li:last-child{
	margin-right: 0;	
}

footer p{
	text-transform: uppercase;
	font-size: 14px;
	color: rgba(255,255,255,0.6);
	margin-bottom: 10px;
}

footer p a{
	color: #fff;
}

@media (max-width: 700px){

	footer{
		padding: 80px 15px;
	}

}


/* -- Demo ads -- */

@media (max-width: 1200px) {
	#bsaHolder{ display:none;}
}



/* Compas */

@media (max-width: 420px) {
				:root {
				--base-grid: 4px;
				--colour-white: #fafafa;
				--colour-black: #060606;
				--rotate-angle: 140deg;
				}
}
@media (min-width: 420px) {
				:root {
				--base-grid: 6px;
				--colour-white: #fafafa;
				--colour-black: #060606;
				--rotate-angle: 140deg;
				}
}

.compass_view {

}

				.compass {
				width: 250px;
				padding: 60px;
				position: relative; 
				top: -3px;
				left: 125px;
				animation-name: spin;
				animation-duration: 20000ms;
				animation-iteration-count: infinite;
				animation-timing-function: ease-out;
				border: 2px solid #283b48;
				border-radius: 100%;
				}
				@keyframes spin {
				0% {
				transform:rotate(120deg);
				}
				10% {
				transform:rotate(192deg);
				}
				20% {
				transform:rotate(48deg);
				} 
				30% {
				transform:rotate(-24deg);
				} 
				40% {
				transform:rotate(192deg);
				} 
				50% {
				transform:rotate(120deg);
				} 
				60% {
				transform:rotate(264deg);
				} 
				70% {
				transform:rotate(128deg);
				} 
				80% {
				transform:rotate(48deg);
				} 
				90%{
				transform:rotate(-24deg);
				}
				100% {
				transform:rotate(120deg);
				}
				}
				.links {
				/* Размер кружков */
				--link-size: calc(var(--base-grid)*25);
				/* Цвет содержимого кружков */
				color: var(--colour-white);
				/* Радиус расположения кружков */
				--link-radius: 1.1;
				display: flex;
				justify-content: center;
				align-items: center;
				width: 100%;
				padding-top: 60px;
				padding-bottom: 60px;

position: absolute;
left: 10px
				}
				.links__list {
				font-family: 'Roboto', Arial, sans-serif;
				box-sizing: border-box;
				position: relative;
				list-style: none;
				}
				.links__item {
				/* Скорость движения кружков */
				transition: all 0.9s;
				width: var(--link-size);
				height: var(--link-size);
				position: absolute;
				top: 0;
				left: 0;
				margin-top: calc(var(--link-size)/-2);
				margin-left: calc(var(--link-size)/-2);
				--angle: calc(360deg/var(--item-total));
				--rotation: calc(var(--rotate-angle) + var(--angle)*var(--item-count));
				transform: rotate(var(--rotation)) translate(calc(var(--link-size)*var(--link-radius) + var(--base-grid)*2)) rotate(calc(var(--rotation)*-1));
				}
				.links__link {
				color: var(--colour-white) !important;
				opacity: 0;
				animation: on-load .3s ease-in-out forwards;
				animation-delay: calc(var(--item-count)*80ms);
				width: 100%;
				height: 100%;
				border-radius: 50%;
				position: relative;
				/* Цвет кружка */
				background-color: #4473C5;
				display: flex; 
				text-align: center;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				text-decoration: none;
				}
				/* Кнопка назад */
				.reset__link {
				animation: on-load .3s ease-in-out forwards;
				animation-delay: calc(var(--item-count)*80ms);
				width: 55px;
				height: 55px;
				transform: scale(0.75);
				border-radius: 50%;
				margin-top: calc(var(--link-size)/3.4);
				margin-left: calc(var(--link-size)/3.1);
				position: relative;
				background-color: #283b48;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				text-decoration: none;
				}
				.links__icon {
				width: calc(var(--base-grid)*9);
				height: calc(var(--base-grid)*9);
				margin-bottom: calc(var(--base-grid)*4.6);
				transition: all .3s ease-in-out;
				}
				.reset__icon {
				width: calc(var(--base-grid)*5);
				height: calc(var(--base-grid)*5);
				transition: all .3s ease-in-out;
				}
				.links__text {
				position: absolute;
				width: 80%;
				transition: all .3s ease-in-out;
				height: calc(var(--base-grid)*6);
				font-size: calc(var(--base-grid)*1.8);
				bottom: calc(var(--base-grid)*2.7);
				}
				.links__link:after {
				content: "";
				background-color: transparent;
				width: var(--link-size);
				height: var(--link-size);
				border: 2px dashed var(--colour-white);
				display: block;
				border-radius: 50%;
				position: absolute;
				top: -2px;
				left: -2px;
				transition: all .3s cubic-bezier(.53,-.67,.73,.74);
				transform: none;
				opacity: 0;
				}
				.links__link:hover .links__icon{
				transition: all .3s ease-in-out;
				transform: translateY(calc(var(--base-grid)*-0.3));
				}
				.reset__link:hover .reset__icon{
				transition: all .3s ease-in-out;
				transform: translateY(calc(var(--base-grid)*-0.3));
				}
				.links__link:hover .links__text{
				transition: all .3s ease-in-out;
				transform: translateY(calc(var(--base-grid)*-0.3));
				}
				.links__link:hover:after {
				transition: all .3s cubic-bezier(.37,.74,.15,1.65);
				transform: scale(1.1);
				opacity: 1;
				}
				@keyframes on-load {
				0% {
				opacity: 0;
				transform: scale(.3);
				}
				70% {
				opacity: .7;
				transform: scale(1.1);
				}
				100% {
				opacity: 1;
				transform: scale(1);
				}
			}

/*end Compas*/

/*Nasvigator*/
.checkboxes {
width: fit-content;
padding: 4px;
}
.category_label {
display: flex;
justify-content: left;
align-items: center;
background-color: #283B49;
border-radius: 12px;
color: var(--colour-white);
font-size: 12px;
font-family: 'Roboto', Arial, sans-serif;
line-height: 12px;
padding: 12px 16px 12px 10px;
margin: 4px;
width: 33%;
height: 24px;
}
.subject_label {
display: flex;
justify-content: left;
align-items: center;
width: max-content;
height: 40px;
background-color: #283B49;
border-radius: 12px;
color: var(--colour-white);
font-size: 12px;
font-family: 'Roboto', Arial, sans-serif;
line-height: 14px;
padding: 12px 16px 12px 10px;
margin: 4px;
}
.category_cb {
width: 14px;
height: 14px;
margin-right: 12px;
}
.subject_cb {
width: 14px;
height: 14px;
margin-right: 12px;
}
.filter{
width: min-content;
background-color: #406B87;
/*min-height: 600px;*/
transition: height 1s;
border-radius: 20px;
padding: 10px;
}
.filter_list {
width: fit-content;
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-content: center;
justify-content: flex-start;
}
.filter_li {
position: relative;
min-width: 284px;
width: 25%;
}
.filter_link {
display: flex;
color: #ae68ba;
justify-content: left;
align-items: center;
background-color: #283B49;
border-radius: 12px;
color: var(--colour-white);
font-size: 12px;
font-family: 'Roboto', Arial, sans-serif;
line-height: 18px;
text-decoration: none;
padding: 5px;
margin: 8px;
*/height: 40px;*/
list-style-type: none;
} 
.filter_icon {
/*filter: invert(1);*/
height: 40px;
}
.filter_text {
color: var(--colour-white);
margin-left: 18px;
}
.categories {
margin-top: 0px;
margin-bottom: 0px;
display: flex;
width: 100%;
}
@media(max-width:450px){
	.subjects {
	margin-top: 0px;
	margin-bottom: 0px;
	display: flex;
	flex-wrap: wrap;
	width: 100%;
	}
}
@media(min-width:451px){
	.subjects {
	margin-top: 0px;
	margin-bottom: 0px;
	display: flex;
	width: 100%;
	min-width:900px;
	}
}

/*end Navigator*/
/* End */
/* /bitrix/templates/pk/template_styles.css?177790452412978 */