@yellow: #ffc000;

@font: 'Open Sans', sans-serif;
@fontSec: 'Roboto', sans-serif;

@widthXLarge: 1170px;
@paddingXLarge: 0px;

@breakpointLarge: 1320px;
@widthLarge: 960px;
@paddingLarge: 0;

@breakpointMid: 1000px;
@widthMid: 780px;
@paddingMid: 0;

@breakpointSmall: 768px;
@widthSmall: 320px;
@paddingSmall: 15px;


/* v2.0 | 20110126
  http://meyerweb.com/eric/tools/css/reset/
  License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
/* ----------- */
html, body{
  height: 100%;
}
body {
	font: 18px/1.3 @font;
	background: #fff;
	color: #000;
	@media screen and (max-width: @breakpointMid) {
		padding-top: 60px;
	}
}
a {
	color: inherit;
}
img {
	max-width: 100%;
}
.nowrap {
	white-space: nowrap;
}

.overflow {
	overflow: hidden;
}
.clr {
	content: '';
	clear: both;
	display: block;
	&:after {
		content: '';
		clear: both;
		display: block;
	}
}
.container {
	position: relative;
	box-sizing: border-box;
	margin: 0 auto;
	max-width: @widthXLarge;
	padding: 0 @paddingXLarge;
	@media screen and (max-width: @breakpointLarge) {
		max-width: @widthLarge;
		padding: 0 @paddingLarge;
	}
	@media screen and (max-width: @breakpointMid) {
		max-width: @widthMid;
		padding: 0 @paddingMid;
	}
	@media screen and (max-width: @breakpointSmall) {
		min-width: @widthSmall;
		padding: 0 @paddingSmall;
		box-sizing: border-box;
	}
}
.trn {
	-webkit-transition: all .5s ease;
	transition: all .5s ease;
}
.icn {
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.content {
	font: 18px/1.667 @font;
	color: #000000;
	h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
		margin-bottom: 0.8em;
		line-height: normal;
		font-weight: bold;
	}
	h6, .h6 { font-size: 16px; margin: 1em 0; }
	h5, .h5 { font-size: 18px; margin: 1em 0; }
	h4, .h4 { font-size: 20px; margin: 1em 0; }
	h3, .h3 { font-size: 22px; margin: 1em 0; }
	h2, .h2 { font-size: 24px; margin: 1em 0; }
	h1, .h1 { font-size: 30px; margin: 1em 0; }

	p {
		margin: 1.667em 0;
	}
	strong {
		font-weight: bold;
	}
	ul, ol {
		margin: 2em 0;
	}
	li {
		margin: .8em 0;
	}
	ul li {
		position: relative;
		padding-left: 14px;
		&:before{
			content: '';
			background: #000;
			width: 6px;
			height: 6px;
			border-radius: 50%;
			position: absolute;
			left: 0px;
			top: .75em;
		}
	}
	ol {
		list-style: inside decimal;
	}
	a {
		text-decoration: underline;
		color: @yellow;
		&:hover{
			text-decoration: none;
		}
	}
	img {
		max-width: 100%;
	}
	sup,.sup {
		display: inline-block;
		vertical-align: top;
		margin-left: 3px;
		font-size: 80%;
	}
	.table-wrapper {
		display: block;
		width: 100%;
		overflow: auto;
	}
	table {
		border-collapse: collapse;
		font-size: 14px;
		margin: 2em 0;
		min-width: 75%;
		tr:hover {
			td {
				// background: @lyellow;
			}
		}
		td {}
		th {
			font-weight: bold;
			text-align: center;
			background: #322f36;
			color: #fff;
			font-size: 18px;
		}
		th, td {
			padding: 15px 25px;
			border: 1px solid #322f36;
		}
		&.table_site {
			td {
				border: none;
				border-bottom: 1px solid #322f36;
			}
		}
	}
	@media screen and (max-width: @breakpointSmall) {
		font: 14px/1.6 @font;
		h6, .h6 { font-size: 14px; margin: .8em 0; }
		h5, .h5 { font-size: 16px; margin: .8em 0; }
		h4, .h4 { font-size: 18px; margin: .8em 0; }
		h3, .h3 { font-size: 20px; margin: .8em 0; }
		h2, .h2 { font-size: 22px; margin: .8em 0; }
		h1, .h1 { font-size: 26px; margin: .8em 0; }
		table {
			margin: 1em 0;
			max-width: none;
			th {
				font-size: 14px;
			}
			th, td {
				padding: 5px 10px;
			}
		}
	}
}
.btn {
	.trn;
	display: inline-block;
	border: 0 solid transparent;
	font: bold 18px/31px @fontSec;
	text-align: center;
	text-decoration: none !important;
	width: 340px;
	max-width: 90%;
	color: #000 !important;
	background: rgb(255,174,0);
	background: -webkit-linear-gradient(top, rgba(255,174,0,1) 0%,rgba(255,168,0,1) 100%);
	background: linear-gradient(to bottom, rgba(255,174,0,1) 0%,rgba(255,168,0,1) 100%);
	
	box-shadow: none;
	box-sizing: border-box;
	outline: none;
	text-transform: uppercase;
	padding: 20px 25px;
	cursor: pointer;
	border-radius: 35px;
	letter-spacing: .5px;
	&:hover {
		background: rgb(255,214,23);
		background: -webkit-linear-gradient(top, rgba(255,174,0,1) 0%,rgba(193,111,0,1) 100%);
		background: linear-gradient(to bottom, rgba(255,174,0,1) 0%,rgba(193,111,0,1) 100%);
		color: #fff !important;
	}
	&:focus { 
		outline: none;
	}
	@media screen and (max-width: @breakpointMid) {
		line-height: 20px;
		width: 300px;
		padding: 15px 15px;
	}
	&--invert {
		background: rgb(255,255,255);
		background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(240,240,240,1) 100%);
		background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(240,240,240,1) 100%);
		&:hover {
			background: rgb(240,240,240);
			background: -webkit-linear-gradient(top, rgba(240,240,240,1) 0%,rgba(255,255,255,1) 100%);
			background: linear-gradient(to bottom, rgba(240,240,240,1) 0%,rgba(255,255,255,1) 100%);
		}
	}

	&--size-s {
		font-size: 16px;
		line-height: 20px;
		width: auto;
		max-width: 100%;
		padding: 10px 15px;
	}
}
.mob-panel {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	background: #fff;
	z-index: 100;
	border-bottom: 1px solid @yellow;
	.logo {
		float: left;
		text-decoration: none;
		display: block;
		font: 900 18px/24px @fontSec;
		color: #000;
		text-transform: uppercase;
		padding: 5px 15px 5px 15px;

		.img {
			display: inline-block;
			vertical-align: middle;
			position: relative;
			z-index: 2;
			height: 50px;
			background: #000;
			box-shadow: 0 0 0px 3px #000;
			img {
				display: block;
				max-width: 100%;
				max-height: 100%;
			}
		}
		.lbl {
			overflow: hidden;
			position: relative;
			padding: 5px 8px 0px 27px;
			z-index: 1;
			margin-left: -30px;
			&:before {
				content: '';
				display: block;
				width: 100%;
				height: 100%;
				background: fade(@yellow, 80);
				position: absolute;
				left: 0;
				top: 0;
				z-index: -1;
				-webkit-transform: skewX(-20deg);
				transform: skewX(-20deg);
			}
		}
	}
	.toggle-nav {
		display: block;
		position: relative;
		width: 100px;
		height: 60px;
		float: right;
		cursor: pointer;
		z-index: 10;
		.icn-bar {
			.trn;
			position: absolute;
			right: 0;
			top: 50%;
			width: 20px;
			height: 3px;
			background: @yellow;
			margin-top: -9px;
			border-radius: 1px;
			+ .icn-bar {
				margin-top: -1px;
				+ .icn-bar {
					margin-top: 7px;
				}
			}
		}
		&.open {
			.icn-bar {
				-webkit-transform:rotate(45deg) translateX(7px) translateY(4px);
				transform: rotate(45deg) translateX(7px) translateY(4px);
				+ .icn-bar {
					opacity: 0;
					-moz-transform: scale(.1);
					-webkit-transform:  scale(.1);
					-o-transform:  scale(.1);
					-ms-transform:  scale(.1);
					transform:  scale(.1);
					+ .icn-bar {
						opacity: 1;
						-webkit-transform: rotate(-45deg) translateX(7px) translateY(-4px);
						transform: rotate(-45deg) translateX(7px) translateY(-4px);
					}
				}
			}
		}
	}
	@media screen and (max-width: @breakpointMid) {
		display: block;
	}
	@media screen and (max-width: @breakpointSmall) {
		.container {
			padding: 0;
		}
		.toggle-nav {
			width: 60px;
			.icn-bar {
				right: 15px;
			}
		}
	}
}
.section-head {
	// position: fixed;
	z-index: 20;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	overflow: hidden;
	.section-head-top {
		padding: 25px 0 0 0;
		.container {
			max-width: 1720px;
		}
	}
	.logo {
		float: left;
		text-decoration: none;
		display: block;
		font: 900 22px/24px @fontSec;
		color: #000;
		text-transform: uppercase;
		padding: 11px 15px 15px 50px;
		.img {
			display: inline-block;
			vertical-align: middle;
			position: relative;
			z-index: 2;
			img {
				display: block;
			}
		}
		.lbl {
			overflow: hidden;
			position: relative;
			padding: 8px 11px 3px 30px;
			z-index: 1;
			margin-left: -30px;
			&:before {
				content: '';
				display: block;
				width: 100%;
				height: 100%;
				background: fade(@yellow, 80);
				position: absolute;
				left: 0;
				top: 0;
				z-index: -1;
				-webkit-transform: skewX(-20deg);
				transform: skewX(-20deg);
			}
		}
	}
	.btn-callback {
		float: right;
		margin-right: 105px;
		margin-top: 25px;
		display: inline-block;
		font: 600 16px/20px @font;
		color: #fff;
		border: 1px solid fade(#fff, 90);
		border-radius: 20px;
		text-decoration: none;
		text-align: center;
		padding: 8px 25px;
		outline: none;
		&:before {
			.icn;
			content: "\f095";
			vertical-align: middle;
			font-size: 24px;
			line-height: 20px;
			margin-right: 12px;
			margin-left: -7px;
		}
	}
	.phones {
		padding-top: 28px;
		overflow: hidden;
		text-align: center;
		margin-left: 350px;
		margin-right: 350px;
		font: 600 22px/30px @font;
		color: #fff;
		a {
			text-decoration: none;
		}
		> * {
			margin: 0 5px;
		}
	}
	.socials {
		float: right;
		clear: right;
		margin-right: 105px;
		margin-top: 15px;
		margin-bottom: 15px;
	}
	.soc {
		.trn;
		display: inline-block;
		vertical-align: top;
		width: 40px;
		height: 40px;
		border: fade(white, 20) 1px solid;
		border-radius: 50%;
		overflow: hidden;
		text-indent: 999px;
		text-align: left;
		text-decoration: none;
		color: white;
		position: relative;
		position: relative;

		svg {
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			fill: currentColor;
			transform: scale(0.75);
		}

		&:before, i {
			.icn;
			content: '';
			width: 40px;
			height: 40px;
			text-align: center;
			text-indent: 0;
			display: block;
			position: absolute;
			left: 50%;
			top: 50%;
			margin: -20px 0 0 -20px;
			font-size: 18px;
			line-height: 40px;

		}
		&.soc_fb:before {
			content: "\f09a";
		}
		&.soc_vk:before {
			content: "\f189";
		}
		&.soc_ok:before {
			content: "\f263";
		}
		&.soc_in:before {
			content: "\f16d";
		}
		&.soc_yo:before {
			content: "\f167";
		}
		&.soc_wa:before {
			content: "\f232";
		}
		&.soc_tg:before {
			content: "\f2c6";
		}
		&:hover {
			border-color: white;
			color: white;
		}
	}
	&.fixed {
		.logo .img {
			margin-top: 10px;
			background: black;
			box-shadow: 0 0 2px 5px black;
		}
		.socials {
			clear: none;
			margin-right: 15px;
			margin-top: 10px;
			margin-bottom: 0;

		}
		.soc {
			border: fade(black, 80) 1px solid;
			color: black;
			&:hover {
				border-color: black;
				color: black;
			}
		}
	}
	@media screen and (min-width: (@breakpointMid + 1)) {
		&.fixed {
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			background: #fff;
			z-index: 50;
			border-bottom: 2px solid @yellow;
			&.appear {
				animation-name: slideInDown;
				animation-duration: 1s;
				animation-fill-mode: both;
				@keyframes slideInDown {
					from {
						transform: translate3d(0, -100%, 0);
						visibility: visible;
					}
					to {
						transform: translate3d(0, 0, 0);
					}
				}
			}
			.section-head-top {
				padding-top: 0;
			}
			.logo {
				padding: 10px 5px 10px 50px;
				width: 107px;
			}
			.btn-callback {
				margin-top: 10px;
				border-color: #000;
				color: #000;
			}
			.phones {
				color: #000;
				padding-top: 16px;
				text-align: right;
				padding-right: 15px;
			}
			.nav {
				clear: right;
				color: #000;
				font-size: 16px;
				line-height: 20px;
				li {
					> a, > span {
						padding: 9px 5px;
					}
				}
			}
		}
	}
	@media screen and (max-width: @breakpointLarge) {
		.section-head-top {
			.container {
				max-width: @widthLarge;
			}
		}
		.btn-callback {
			margin-right: 0;
		}
		.phones {
			margin-left: 320px;
			margin-right: 230px;
		}
		.socials {
			margin-right: 0;
		}
		&.fixed {
			.phones {
				margin: 0;
				padding: 0px 15px 0;
				text-align: right;
				a {
					display: block;
				}
			}
		}
	}
	@media screen and (max-width: @breakpointMid) {
		top: 60px;
		.section-head-top {
			.container {
				max-width: @widthMid;
			}
		}
		.logo {
			display: none;
		}
		.phones {
			padding-top: 5px;
			margin: 0;
			text-align: center;
		}
		.socials {
			float: none;
			margin-top: 0;
			display: inline-block;
		}
		.btn-callback {
			margin-top: 0;
			margin-bottom: 15px;
		}
		
	}
	@media screen and (max-width: @breakpointSmall) {
		text-align: center;
		overflow: visible;
		.btn-callback {
			float: none;
		}
		.phones {
			margin-right: 0;
			text-align: center;
			> a, > span {
				white-space: nowrap;
			}
		}
		.socials {
			display: block;
			text-align: center;
		}
	}
}
.nav {
	clear: both;
	text-align: center;
	font: 18px/24px @font;
	color: #fff;
	li {
		display: inline-block;
		vertical-align: middle;
		margin: 0 5px;
		&.current {
			opacity: .7;
		}
		> a, > span {
			display: block;
			text-decoration: none;
			padding: 14px 10px;
		}
	}
	@media screen and (min-width: ( @breakpointMid + 1 )) {
		display: block !important;
		opacity: 1 !important;
	}
	@media screen and (max-width: @breakpointLarge) {
		li {
			margin: 0 3px;
			> a, > span {
				padding: 14px 6px;
			}
		}
	}
	@media screen and (max-width: @breakpointMid) {
		display: none;
		position: fixed;
		top: 60px;
		left: 0;
		right: 0;
		background: #fff;
		color: #000;
		height: 100%;
		overflow: auto;
		.nav-wrap {
			display: table;
			width: 100%;
			height: 100%;
		}
		.nav-container {
			display: table-cell;
			vertical-align: middle;
			padding: 20px 0 80px;
		}
		li {
			display: block;
			margin: 10px 0;
		}
	}
}
.scroll {
	width: 25px;
	margin: 0 auto;
	.scroll-dot {
		display: block;
		width: 10px;
		height: 10px;
		background: #fff;
		margin: 17px auto;
		border-radius: 50%;
	}
	.scroll-arrow {
		display: block;
		text-align: center;
		color: #fff;
		&:before {
			.icn;
			content: "\f103";
			font-size: 36px;
		}
	}
	@media screen and (max-width: @breakpointMid) {
		.scroll-dot {
			margin: 12px auto;
		}
	}
}
.section-title {
	position: relative;
	padding: 366px 0 72px;
	text-align: center;
	overflow: hidden;
	.bg {
		position: absolute;
		z-index: -1;
		background: url(../images/title-bg.jpg) center center no-repeat;
		background-size: cover;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
	}
	.title {
		color: #fff;
		margin-bottom: 20px;
		text-transform: uppercase;
		.main-title {
			font: 900 93px/83px @fontSec;
		}
		.lbl {
			display: inline-block;
			font: 700 22px/28px @font;
			background: fade(#d6870d, 80);
			margin-top: 22px;
			padding: 10px 20px;
			letter-spacing: .5px;
		}
	}
	.scroll {
		margin-top: 95px;
		margin-bottom: 42px;
	}
	@media screen and (max-width: @breakpointMid) {
		padding: 150px 0 40px;
		.title {
			.main-title {
				font-size: 70px;
				line-height: 60px;
			}
			.lbl {
				font-size: 18px;
				line-height: 24px;
				margin-top: 18px;
			}
		}
		.scroll {
			margin-top: 50px;
			margin-bottom: 20px;
		}
	}
	@media screen and (max-width: @breakpointSmall) {
		padding: 200px 0 40px;
		.title {
			.main-title {
				font-size: 32px;
				line-height: 40px;
			}
			.lbl {
				font-size: 16px;
				line-height: 18px;
				margin-top: 10px;
			}
		}
		.scroll {
			display: none;
		}
	}
}
.section-about, .section-text {
	padding: 48px 0 44px;
	overflow: hidden;
	.title {
		font: bold 30px/44px @fontSec;
		strong {
			font-size: 60px;
			color: @yellow;
		}
	}
	.nums {
		padding: 0 20px 15px;
		text-align: justify;
		background: @yellow url(../images/about-nums-bg.jpg) center center no-repeat;
		background-size: cover;
		line-height: 17px;
		margin: 48px 0 44px;
		color:#fff;
		&:after, &:before {
			content: '';
			width: 100%;
			display: inline-block;
		}
		li {
			display: inline-block;
			vertical-align: top;
			text-align: center;
			padding: 0;
			width: 220px;
			font: 22px/24px @font;
			margin: 10px 15px;
			color:#fff;
			&:before {
				display: none;
			}
			strong {
				display: block;
				font: bold 72px/80px @font;
				margin-bottom: 2px;
			}
		}
	}
	.download-price {
		background: url(../images/district-bg.jpg) left center no-repeat;
		background-size: cover;
		padding: 50px 20px;
		text-align: center;
	}
	.btns {
		text-align: center;
		margin-top: 49px;
	}
	@media screen and (max-width: @breakpointLarge) {
		.nums {
			li {
				width: 200px;
				margin: 10px 5px;
			}
		}
	}
	@media screen and (max-width: @breakpointMid) {
		padding: 30px 0 25px;
		.title {
			font-size: 24px;
			line-height: 36px;
			strong {
				font-size: 40px;
			}
		}
		.nums {
			margin: 25px 0 25px;
			padding: 0 10px 10px;
			li {
				width: 170px;
				font-size: 18px;
				margin: 10px 5px;
				strong {
					font-size: 60px;
					line-height: 70px;
				}
			}
		}
	}
	@media screen and (max-width: @breakpointSmall) {
		padding: 20px 0 20px;
		.title {
			font-size: 22px;
			line-height: 32px;
			strong {
				font-size: 28px;
			}
		}
		.nums {
			text-align: center;
		}
	}
}
.btn-more {
	display: inline-block;
	vertical-align: top;
	font: 600 16px/20px @font;
	padding: 10px 25px;
	border: 1px solid fade(#000,10);
	color: #000 !important;
	text-decoration: none !important;
	border-radius: 20px;
	cursor: pointer;
}
.section-header {
	font: 500 40px/51px @fontSec;
	color: #000;
	text-align: center;
	margin-bottom: 45px;
	> span {
		display: inline-block;
		vertical-align: top;
		position: relative;
		z-index: 1;
		padding: .125em .375em;
		background: #ffae00;
		.borders {
			position: absolute;
			left: -.25em;
			right: -.25em;
			top: -.25em;
			bottom: -.25em;
			border: 0.075em solid #c06e01;
			border-top-color: transparent;
			border-right-color: transparent;
			&:before, &:after {
				content: '';
				background: #c06e01;
				position: absolute;
			}
			&:before {
				top: -0.075em;
				left: -0.075em;
				height: 0.075em;
				right: 60%;
			}
			&:after {
				top: 25%;
				right: -0.075em;
				bottom: -0.075em;
				width: 0.075em;
			}
		}
	}
	@media screen and (max-width: @breakpointSmall) {
		font-size: 26px;
		margin-bottom: 25px;
	}
}
.section-services {
	padding: 39px 0 113px;
	overflow: hidden;
	.section-header {
		margin-bottom: 65px;
	}
	.servises {
		margin-left: -30px;
		> li {
			display: inline-block;
			vertical-align: top;
			width: 370px;
			margin-left: 30px;
			margin-bottom: 30px;
			position: relative;
			&.hidden {
				display: none;
			}
			> a, > span {
				display: table;
				width: 100%;
				height: 200px;
				text-decoration: none;
				font: bold 30px/36px @fontSec;
				text-align: center;
				text-transform: uppercase;
				background-repeat: no-repeat;
				background-position: center center;
				background-size: cover;
				color: #fff;
				position: relative;
				&:after {
					content: '';
					position: absolute;
					left: 0;
					top: 0;
					right: 0;
					bottom: 0;
					background: fade(#000, 30);
				}
				> span {
					display: table-cell;
					vertical-align: middle;
					padding: 20px 20px;
					z-index: 1;
					position: relative;
				}
			}
			&:hover {
				.btn-all {
					background: @yellow;
					color: #000!important;
					border-color: @yellow;
				}
				ul {
					display: block;
				}
			}
			&:nth-child(3n){
				ul {
					left: auto;
					right: 81%;
				}
			}
		}
		&.open {
			> li.hidden {
				display: inline-block;
			}
			+ .btns {
				display: none;
			}
		}
		ul {
			display: none;
			position: absolute;
			left: 81%;
			top: -20px;
			background: fade(@yellow, 95);
			color: #6e5506;
			font: 16px/20px @font;
			z-index: 15;
			width: 370px;
			padding: 30px 0;
			a {
				display: block;
				padding: 10px 35px;
				text-decoration: none;
				&:hover {
					color: #000;
					text-decoration: underline;
				}
			}
		}
		.btn-all {
			display: inline-block;
			vertical-align: top;
			font: 600 16px/20px @font;
			padding: 10px 25px;
			border: 1px solid fade(#fff,90);
			color: #fff !important;
			text-decoration: none !important;
			border-radius: 20px;
			text-transform: none;
			min-width: 120px;
		}
	}
	.btns {
		text-align: center;
		margin-top: 35px;
	}
	@media screen and (max-width: @breakpointLarge) {
		.servises {
			margin-left: -15px;
			> li {
				width: 310px;
				margin-left: 15px;
				margin-bottom: 15px;
				> span, > a {
					font-size: 26px;
				}
			}
			&:nth-child(3n){
				ul {
					left: auto;
					right: 0;
				}
			}
			ul {
				left: 0;
				top: 20px;
				width: 100%;
				a {
					padding: 10px 10px;
				}
			}
		}
	}
	@media screen and (max-width: @breakpointMid) {
		padding: 50px 0 50px;
		.servises {
			margin-left: -40px;
			> li {
				width: 370px;
				margin-left: 40px;
				margin-bottom: 40px;
				> span, > a {
					font-size: 30px;
				}
				ul {
					left: 0 !important;
					right: 0 !important;
					top: 0;
				}
			}
		}
	}
	@media screen and (max-width: @breakpointSmall) {
		.servises {
			margin-left: -10px;
			text-align: center;
			> li {
				width: 290px;
				margin-left: 10px;
				margin-bottom: 10px;
				> span, > a {
					font-size: 26px;
				}
			}
		}
	}
}
.section-district {
	padding: 65px 0 92px;
	background: @yellow url(../images/district-bg.jpg) center center no-repeat;
	background-size: cover;
	overflow: hidden;
	.district {
		.district-container	{
			max-width: 970px;
			margin: 0 auto;
			background: #f5eee9;
			color: #000000;
			position: relative;
		}
		.district-img {
			width: 48.45%;
			left: 0;
			top: 0;
			bottom: 0;
			position: absolute;
			background-position: center center;
			background-repeat: no-repeat;
			background-size: cover;
		}
		.district-content {
			width: 48.45%;
			margin-left: auto;
			box-sizing: border-box;
			padding: 45px 40px 50px 38px;
		}
		.name {
			font: 500 30px/40px @fontSec;
			margin-bottom: 30px;
			text-align: center;
		}
		.text {
			font: 16px/30px @font;
			p {
				margin-bottom: 20px;
			}
		}
		.btns {
			margin-top: 40px;
			text-align: center;
		}
	}
	@media screen and (max-width: @breakpointLarge) {
		.district {
			.district-container	{
				max-width: 860px;
			}
		}	
	}
	@media screen and (max-width: @breakpointMid) {
		padding: 30px 0 50px;
		.district {
			.district-container {
				margin: 0 50px;
			}
			.district-img {
				width: 35%;
			}
			.district-content {
				padding: 15px 20px;
				width: 65%;
			}
		}
	}
	@media screen and (max-width: @breakpointSmall) {
		.district {
			.district-img {
				width: 100%;
				height: 150px;
				position: static;
			}
			.district-content {
				width: auto;
			}
			.district-container {
				margin: 0 20px;
			}
			.name {
				font-size: 24px;
				line-height: 32px;
				margin-bottom: 10px;
			}
		}
	}
	.slick-slider {
		.slick-arrow {
			position: absolute;
			width: 140px;
			height: 50%;
			left: 100%;
			cursor: pointer;
			background: none;
			border: none;
			overflow: hidden;
			text-indent: 999px;
			text-align: left;
			padding: 0;
			margin: 0;
			color: #d4d4d4;
			outline: none;
			z-index: 20;
			&:before {
				content: '';
				display: block;
				width: 40px;
				height: 76px;
				position: absolute;
				right: 0;
				background: url(../images/slider-icns-invert.png) no-repeat;
				background-size: auto 200%;
			}
			&.slick-prev {
				bottom: 0;
				&:before {
					top: 4px;
					background-position: 0px 0px;
				}
				&:hover {
					&:before {
						background-position: 0px -76px;
					}
				}
			}
			&.slick-next {
				top: 0;
				&:before {
					bottom: 33px;
					background-position: -40px 0px;
				}
				&:hover {
					&:before {
						background-position: -40px -76px;
					}
				}
			}
		}
		@media screen and (max-width: 1470px) {
			.slick-arrow {
				&:before {
					left: 10px;
				}
			}
		}
		@media screen and (max-width: @breakpointLarge) {
			.slick-arrow {
				width: 50px;
				left: auto;
				right: 0;
			}
		}
		@media screen and (max-width: @breakpointSmall) {
			.slick-arrow {
				width: 40px;
				height: 100%;
				&:before {
					top: 50% !important;
					margin-top: -38px !important;
				}
				&.slick-prev {
					right: auto;
					left: -15px;
					top: 0;
					&:before {
						left: 0;
					}
				}
				&.slick-next {
					left: auto;
					right: -15px;
					top: 0;
					&:before {
						left: 0;
					}
				}
			}
		}
	}
}
.section-how {
	padding: 92px 0 80px;
	background: url(../images/how-bg.jpg) center center no-repeat;
	background-size: cover;
	overflow: hidden;
	.section-header {
		margin-bottom: 120px;
	}
	.btns {
		text-align: center;
		margin-top: -7px;
	}
	ul {
		margin-left: -50px;
		text-align: center;
		li {
			display: inline-block;
			vertical-align: top;
			width: 250px;
			margin-left: 50px;
			margin-bottom: 80px;
			text-align: center;
			color: #fff;
			font: 600 20px/24px @font;
			position: relative;

			&:before {
				content: '1';
				width: 78px;
				height: 78px;
				text-align: center;
				background: #d4860b;
				color: #ffdda7;
				font: bold 64px/78px @fontSec;
				position: absolute;
				left: 26px;
				top: -14px;
				border-radius: 50%;
			}
			+ li:before {content: '2'}
			+ li + li:before {content: '3'}
			+ li + li + li:before {content: '4'}
			+ li + li + li + li:before {content: '5'}
			+ li + li + li + li + li:before {content: '6'}
			+ li + li + li + li + li + li:before {content: '7'}
			+ li + li + li + li + li + li + li:before {content: '8'}
			+ li + li + li + li + li + li + li + li:before {content: '9'}
			+ li + li + li + li + li + li + li + li + li:before {content: '10'}
			+ li + li + li + li + li + li + li + li + li + li:before {content: '11'}
			+ li + li + li + li + li + li + li + li + li + li + li:before {content: '12'}
			+ li + li + li + li + li + li + li + li + li + li + li + li:before {content: '13'}

			a {
				color: inherit !important;
				text-decoration: none;

				&:hover {
					text-decoration: underline;
				}
			}

			.icn {
				display: block;
				width: 130px;
				height: 130px;
				position: relative;
				margin: 0 auto 25px;
				background: #fff;
				border-radius: 50%;
				z-index: 2;
				&:after {
					content: '';
					width: 90px;
					height: 90px;
					position: absolute;
					left: 50%;
					top: 50%;
					margin: -45px 0 0 -45px;
					// background: url(../images/how-icns.png);
					// background-size: auto 100%;
					// @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-resolution: 144dpi) {
					// 	background-image: url(../images/how-icns@2x.png);
					// }
					background-size: contain;
					background-repeat: no-repeat;
					background-position: center center;
				}
				&.icn-zay:after { background-image: url(../images/how-icn1.svg); }
				&.icn-trans:after { background-image: url(../images/how-icn-trans.png); }
				&.icn-zam:after { background-image: url(../images/saun.svg); }
				&.icn-ter:after { background-image: url(../images/tera.svg); }
				&.icn-barb:after { background-image: url(../images/barb.svg); }
				&.icn-velo:after { background-image: url(../images/velo.svg); }
				&.icn-sme:after { background-image: url(../images/how-icn3.svg); }
				&.icn-dog:after { background-image: url(../images/how-icn4.svg); }
				&.icn-opl:after { background-image: url(../images/how-icn5.svg); }
				&.icn-mat:after { background-image: url(../images/how-icn6.svg); }
				&.icn-rab:after { background-image: url(../images/how-icn7.svg); }
				&.icn-res:after { background-image: url(../images/how-icn8.svg); }
			}
		}
	}
	@media screen and (max-width: @breakpointLarge) {
		ul {
			margin-left: -22px;
			li {
				margin-left: 22px;
				width: 220px;
				&:before {
					left: 0px;
				}
			}
		}
	}
	@media screen and (max-width: @breakpointMid) {
		padding: 60px 0 40px;
		.section-header {
			margin-bottom: 70px;
		}
		ul {
			text-align: center;
			margin-left: 0;
			li {
				margin: 0 10px 35px;
				font-size: 20px;
			}
		}
	}
	@media screen and (max-width: @breakpointSmall) {

	}

}
.section-portfolio {
	padding: 103px 0 72px;
	overflow: hidden;
	.section-header {
		margin-bottom: 53px;
	}
	.tabs-btns {
		margin-bottom: 32px;
		text-align: center;
	}
	.tab-btn {
		display: inline-block;
		vertical-align: middle;
		font: bold 15px/18px @font;
		text-transform: uppercase;
		padding: 6px 30px;
		border-radius: 15px;
		margin: 0 10px 10px;
		cursor: pointer;
		&:hover {
			text-decoration: underline;
		}
		&.active {
			background: @yellow;
			text-decoration: none !important;
			cursor: default;
		}
	}
	// .tab-content {
	// 	display: none;
	// 	&.active {
	// 		display: block;
	// 	}
	// }
	.portfolio {
		li {
			display: inline-block;
			vertical-align: top;
			width: 33.333%;
			> a, > span {
				.trn;
				position: relative;
				text-decoration: none;
				display: block;
				.img {
					position: absolute;
					left: 0;
					top: 0;
					right: 0;
					bottom: 0;
					overflow: hidden;
					img {
						display: block;
						width: 100%;
						height: auto;
					}
				}
				.lbl {
					display: table;
					width: 100%;
					height: 250px;
					font: 600 18px/24px @font;
					text-align: center;
					background: fade(@yellow,90%);
					opacity: 0;
					z-index: 5;
					position: relative;
					> span {
						display: table-cell;
						vertical-align: middle;
						padding: 20px 20px;
					}
				}
				&:hover {
					.lbl {
						opacity: 1;
					}
				}
			}
		}
	}
	.btns {
		text-align: center;
		margin-top: 88px;
	}
	@media screen and (max-width: @breakpointLarge) {
		.portfolio-container {
			padding: 0 50px;
		}
		.portfolio {
			li {
				> a, > span {
					.lbl {
						height: 183px;
					}
				}
			}
		}
	}
	@media screen and (max-width: @breakpointMid) {
		padding: 50px 0 40px;
		.portfolio {
			li {
				width: 50%;
				> a, > span {
					.img {
						position: static;
						padding-top: 64%;
						margin-bottom: 10px;
					}
					.lbl {
						display: block;
						height: auto;
						display: block;
						opacity: 1;
						span {
							padding: 0;
						}
					}
				}
			}
		}
	}
	@media screen and (max-width: 480px) {
		.portfolio-container {
			padding: 0 25px;
		}
		.portfolio {
			text-align: center;
			li {
				width: 100%;
				// max-width: 230px;
				margin: 0 0;
				> a, > span {
					.img {
						position: static;
						padding-top: 64%;
						margin-bottom: 10px;
					}
					.lbl {
						display: block;
						height: auto;
						display: block;
						opacity: 1;
					}
				}
			}
		}
		.btns {
			margin-top: 30px;
		}
	}
	.slick-slider {
		.slick-arrow {
			position: absolute;
			width: 140px;
			height: 50%;
			left: 100%;
			cursor: pointer;
			background: none;
			border: none;
			overflow: hidden;
			text-indent: 999px;
			text-align: left;
			padding: 0;
			margin: 0;
			color: #d4d4d4;
			outline: none;
			z-index: 20;
			&:before {
				content: '';
				display: block;
				width: 40px;
				height: 76px;
				position: absolute;
				right: 0;
				background: url(../images/slider-icns.png) no-repeat;
				background-size: auto 200%;
			}
			&.slick-prev {
				bottom: 0;
				&:before {
					top: 4px;
					background-position: 0px 0px;
				}
				&:hover {
					&:before {
						background-position: 0px -76px;
					}
				}
			}
			&.slick-next {
				top: 0;
				&:before {
					bottom: 33px;
					background-position: -40px 0px;
				}
				&:hover {
					&:before {
						background-position: -40px -76px;
					}
				}
			}
		}
		@media screen and (max-width: 1470px) {
			.slick-arrow {
				&:before {
					left: 10px;
				}
			}
		}
		@media screen and (max-width: @breakpointLarge) {
			.slick-arrow {
				width: 50px;
				left: auto;
				right: 0;
			}
		}
		@media screen and (max-width: @breakpointSmall) {
			.slick-arrow {
				width: 40px;
				height: 100%;
				&:before {
					top: 50% !important;
					margin-top: -38px !important;
				}
				&.slick-prev {
					right: auto;
					left: -15px;
					top: 0;
					&:before {
						left: 0;
					}
				}
				&.slick-next {
					left: auto;
					right: -15px;
					top: 0;
					&:before {
						left: 0;
					}
				}
			}
		}
	}
}
.section-reviews {
	padding: 51px 0 100px;
	background: url(../images/reviews-bg.jpg) center center no-repeat;
	background-size: cover;
	overflow: hidden;
	.section-header {
		margin-bottom: 110px;
	}
	.reviews-slider-wrapper {

	}
	.review {
		padding: 30px 0 30px;
		.review-text {
			display: inline-block;
			vertical-align: top;
			// width: 507px;
			position: relative;
			margin-top: 28px;
			margin-right: 56px;
			margin-bottom: 40px;
			margin-left: 32px;
			background: fade(#fff,80);
			box-sizing: border-box;
			border: 4px solid @yellow;
			box-sizing: border-box;
			padding: 0 35px 17px 35px;
			font: 300 16px/30px @font;
			p {
				margin-bottom: 20px;
			}
			.img {
				display: block;
				width: 104px;
				height: 104px;
				border-radius: 50%;
				overflow: hidden;
				margin: -45px auto 12px;
				img {
					display: block;
					width: 100%;
					height: 100%;
				}
			}
			.name {
				text-align: center;
				font: 600 18px/22px @font;
				margin-bottom: 20px;
			}
		}
		&.with-video {
			.review-text {
				width: 507px;
			}
		}
		.review-video {
			display: inline-block;
			vertical-align: top;
			width: 550px;
			position: relative;
			img {
				display: block;
				width: 100%;
			}
			&:before {
				content: '';
				display: block;
				position: absolute;
				left: 0;
				top: 0;
				right: 0;
				bottom: 0;
				z-index: 1;
				background: fade(#000,35);
			}
			&:after {
				.icn;
				content: "\f04b";
				width: 50px;
				height: 50px;
				position: absolute;
				text-align: center;
				font-size: 70px;
				line-height: 50px;
				color: @yellow;
				top: 50%;
				left: 50%;
				margin-left: -25px;
				margin-top: -30px;
				z-index: 3;
			}
		}
	}
	@media screen and (max-width: @breakpointLarge) {
		.review {
			.review-container {
				padding: 0 50px;
			}
			&.with-video {
				.review-text {
					margin-left: 0;
					margin-right: 40px;
					width: 380px;
				}
			}
			.review-video {
				width: 430px;
				margin-top: 28px;
			}
		}
	}
	@media screen and (max-width: @breakpointMid) {
		padding: 40px 0 30px;
		.section-header {
			margin-bottom: 40px;
		}
		.review {
			.review-text {
				display: block;
				margin: 45px auto 20px;
				width: auto;
				max-width: 600px;
			}
			.review-video {
				display: block;
				margin: 0 auto;
				width: auto;
				max-width: 600px;	
			}
		}
	}
	@media screen and (max-width: @breakpointSmall) {
		.review {
			.review-container {
				padding: 0 10px;
			}
			.review-text {
				padding: 0 20px 10px 20px;
			}
		}
	}
	.slick-slider {
		.slick-arrow {
			position: absolute;
			width: 140px;
			height: 50%;
			left: 100%;
			cursor: pointer;
			background: none;
			border: none;
			overflow: hidden;
			text-indent: 999px;
			text-align: left;
			padding: 0;
			margin: 0;
			color: #d4d4d4;
			outline: none;
			z-index: 20;
			&:before {
				content: '';
				display: block;
				width: 40px;
				height: 76px;
				position: absolute;
				right: 0;
				background: url(../images/slider-icns.png) no-repeat;
				background-size: auto 200%;
			}
			&.slick-prev {
				bottom: 0;
				&:before {
					top: 4px;
					background-position: 0px 0px;
				}
				&:hover {
					&:before {
						background-position: 0px -76px;
					}
				}
			}
			&.slick-next {
				top: 0;
				&:before {
					bottom: 33px;
					background-position: -40px 0px;
				}
				&:hover {
					&:before {
						background-position: -40px -76px;
					}
				}
			}
		}
		@media screen and (max-width: 1470px) {
			.slick-arrow {
				&:before {
					left: 10px;
				}
			}
		}
		@media screen and (max-width: @breakpointLarge) {
			.slick-arrow {
				width: 50px;
				left: auto;
				right: 0;
			}
		}
		@media screen and (max-width: @breakpointSmall) {
			.slick-arrow {
				width: 40px;
				height: 100%;
				&:before {
					top: 50% !important;
					margin-top: -38px !important;
				}
				&.slick-prev {
					right: auto;
					left: -15px;
					top: 0;
					&:before {
						left: 0;
					}
				}
				&.slick-next {
					left: auto;
					right: -15px;
					top: 0;
					&:before {
						left: 0;
					}
				}
			}
		}
	}
}
.section-faq {
	padding: 101px 0 60px;
	background: url(../images/faq-bg.jpg) top right no-repeat;
	overflow: hidden;
	.section-header {
		margin-bottom: 69px;
	}
	.btns {
		text-align: center;
		margin-top: 72px;
	}
	ul.sliders {
		> li {
			background: fade(#fff,70);
			border: 1px dashed #d6d6d6;
			box-sizing: border-box;
			max-width: 970px;
			padding: 28px 70px 19px 97px;
			position: relative;
			margin: 0 auto 10px;
			.toggle {
				position: absolute;
				width: 70px;
				height: 90px;
				right: 0;
				top: 0;
				cursor: pointer;
				z-index: 5;
				&:before {
					content: '+';
					position: absolute;
					top: 20px;
					right: 10px;
					width: 40px;
					height: 50px;
					font: 48px/50px @font;
				}
			}
			&:before {
				content: '1';
				width: 80px;
				height: 90px;
				font: 500 48px/90px @fontSec;
				color: @yellow;
				position: absolute;
				left: 0;
				top: 0;
				text-align: center;
			}
			+ li:before {content: '2'}
			+ li + li:before {content: '3'}
			+ li + li + li:before {content: '4'}
			+ li + li + li + li:before {content: '5'}
			+ li + li + li + li + li:before {content: '6'}
			+ li + li + li + li + li + li:before {content: '7'}
			+ li + li + li + li + li + li + li:before {content: '8'}
			+ li + li + li + li + li + li + li + li:before {content: '9'}
			.quest {
				font: 600 22px/30px @font;
				margin-bottom: 12px;
			}
			.answ {
				padding-top: 19px;
				font: 16px/30px @font;
				color: #333333;
				p {
					margin-bottom: 30px;
				}
			}
			&.open {
				.answ {
					display: block;
				}
				.toggle {
					&:before {
						-webkit-transform: rotate(45deg);
						transform: rotate(45deg);
					}
				}
			}
		}
	}
	@media screen and (max-width: @breakpointMid) {
		padding: 50px 0 30px;
	}
	@media screen and (max-width: @breakpointSmall) {
		ul.sliders {
			li {
				padding: 15px 10px 19px 20px;
				.quest {
					padding-right: 70px;
					font-size: 18px;
					line-height: 26px;
				}
				&:before {
					display: none;
				}
			}
		}
	}
}
.section-contacts {
	padding: 67px 0 40px;
	.section-header {
		margin-bottom: 60px;
	}
	.contacts {
		position: absolute;
		top: 95px;
		margin-top: 40px;
		left: 100px;
		background: @yellow;
		z-index: 5;
		padding: 20px 25px 20px 25px;
		width: 320px;
		font: 600 18px/31px @font;
		p {
			margin-bottom: 21px;
		}
		strong {
			font-weight: bold;
			font-size: 24px;
			line-height: 24px;
		}
		.hidden {
			opacity: 0;
		}
	}
	.map {
		height: 600px;
		iframe {
			width: 100%;
			height: 100%;
			margin: 0;
			padding: 0;
			border: none;
		}
	}
	@media screen and (max-width: @breakpointMid) {
		padding: 50px 0 20px;
		.contacts {
			left: 0;
			padding: 20px 25px 20px 25px;
			width: 320px;
		}
	}
	@media screen and (max-width: @breakpointSmall) {
		.contacts {
			position: static;
			width: auto;
			margin: 0 auto 20px;
			text-align: center;
		}
	}
}
.section-feedback {
	padding: 40px 0 40px;
	text-align: center;
	@media screen and (max-width: @breakpointMid) {
		padding: 20px 0 20px;
	}
}
.form {
	input, feedback {
		display: inline-block;
		width: 260px;
		height: 50px;
		box-sizing: border-box;
		font: 16px/24px @font;
		color: #000;
		margin: 0 10px 15px;
		background: #e3e2ec;
		border: 1px solid transparent;
		padding: 12px 17px;
		outline: none;
		&::-webkit-input-placeholder {
			color: #000;
			opacity: .5;
		}
		&::-moz-placeholder {
			color: #000;
			opacity: .5;
		}
		&:-ms-input-placeholder {
			color: #000;
			opacity: .5;
		}
		&:-moz-placeholder {
			color: #000;
			opacity: .5;
		}
	}
	.checkbox-lbl {
		display: block;
		text-align: left;
		font-size: 14px;
		padding: 5px;
		margin: 0 auto 10px;
		max-width: 540px;
	}
	input[type="checkbox"] {
		display: inline-block;
		width: auto !important;
		height: auto;
		-webkit-box-shadow: none;
		box-shadow: none;
		margin: 0 5px 0 !important;
		vertical-align: middle;
	}
	.btns {
		margin-top: 35px;
	}

	.info {
		margin-bottom: 15px;
		font-weight: 700;
	}
}



.mdl-container {
	max-width: 460px;
	box-sizing: border-box;
	padding: 50px 50px 50px 50px !important;
	text-align: center;
	form {
		text-align: center;
	}
	input {
		width: 100%;
		box-shadow: inset 0 2px 0 0 #e8e8e8; 
		background: #f4f4f4;
		margin-left: 0;
		margin-right: 0;
		display: block;
	}
}

.servises-element {
	width: 750px;
	max-width: 80%;
	position: relative;
	overflow: visible !important;
	.se-nav {
		position: absolute;
		left: 100%;
		top: 0;
		.close, .prev, .next {
			position: relative;
			width: 100px;
			height: 70px;
			overflow: hidden;
			cursor: pointer;
			text-decoration: none;
			text-align: left;
			opacity: .8;
			text-indent: 999px;
			&:hover {
				opacity: 1;
			}
			&:before {
				.icn;
				position: absolute;
				width: 60px;
				height: 60px;
				right: 0;
				top: 0;
				text-align: center;
				box-sizing: border-box;
				border: 2px solid #fff;
				color: #fff;
				border-radius: 50%;
				font-size: 36px;
				line-height: 60px;
				text-indent: 0;
				-webkit-box-shadow: inset 0px 0px 5px 5px rgba(0,0,0,.1);
				box-shadow: inset 0px 0px 5px 5px rgba(0,0,0,.1);
				text-shadow: 0px 0px 10px rgba(0,0,0,.8);
			}
		}
		.close {
			margin-bottom: 25px;
			&:before {
				content: "\f00d";
			}
		}
		.prev {
			&:before {
				content: "\f104";
			}
		}
		.next {
			&:before {
				content: "\f105";
			}
		}
	}
	.se-head {
		box-sizing: border-box;
		min-height: 370px;
		background-size: cover;
		background-repeat: no-repeat;
		background-position: center center;
		padding-top: 60px;
		.folders-nav {
			position: relative;
			text-align: center;
			background: fade(@yellow, 90);
			padding: 12px 70px;
			.name {
				display: block;
				font: 600 24px/36px @font;
				white-space: nowrap;
				height: 36px;
				text-overflow: ellipsis;
				overflow: hidden;
			}
			// .folders-nav-prev, .folders-nav-next {
			// 	position: absolute;
			// 	width: 70px;
			// 	height: 100%;
			// 	text-indent: 999px;
			// 	overflow: hidden;
			// 	text-align: left;
			// 	text-decoration: none;
			// 	top: 0;
			// 	z-index: 5;
			// 	cursor: pointer;
			// 	&:before {
			// 		.icn;
			// 		font-size: 36px;
			// 		line-height: 40px;
			// 		position: absolute;
			// 		width: 40px;
			// 		height: 40px;
			// 		left: 50%;
			// 		top: 50%;
			// 		margin-left: -20px;
			// 		margin-top: -20px;
			// 		text-decoration: none;
			// 		text-align: center;
			// 		color: #000;
			// 		text-indent: 0;
			// 	}
			// }
			// .folders-nav-prev {
			// 	left: 0;
			// 	&:before {
			// 		content: "\f104";
			// 	}
			// }
			// .folders-nav-next {
			// 	right: 0;
			// 	&:before {
			// 		content: "\f105";
			// 	}
			// }
		}
	}
	.se-content {
		padding: 45px 55px;
	}
	.title {
		font: 500 30px/40px @fontSec;
		margin-bottom: 15px;
	}
	.block-title {
		font: 500 30px/40px @fontSec;
		margin-bottom: 15px;
		margin-top: 15px;
	}
	.gallery-slider {
		overflow: hidden;
		position: relative;
		.slick-arrow {
			position: absolute;
			right: 0;
			top: 50%;
			width: 80px;
			height: 60px;
			overflow: hidden;
			cursor: pointer;
			text-decoration: none;
			text-align: left;
			opacity: .8;
			background: none;
			outline: none;
			text-indent: 999px;
			overflow: hidden;
			cursor: pointer;
			text-decoration: none;
			text-align: left;
			border: none;
			outline: none;
			box-shadow: none;
			z-index: 5;
			&:hover {
				opacity: 1;
			}
			&:before {
				background: none;
				.icn;
				content: "\f00d";
				position: absolute;
				left: 0;
				top: 0 !important;
				font-size: 36px;
				line-height: 60px;
				text-indent: 0;
				width: 60px;
				height: 60px;
				text-align: center;
				box-sizing: border-box;
				border: 2px solid #fff;
				color: #fff;
				border-radius: 50%;
				-webkit-box-shadow: inset 0px 0px 5px 5px rgba(0,0,0,.1);
				box-shadow: inset 0px 0px 5px 5px rgba(0,0,0,.1);
				text-shadow: 0px 0px 10px rgba(0,0,0,.8);
			}

			&.slick-prev {
				margin-top: -60px;
				&:before {
					content: "\f104";
				}
			}
			&.slick-next {
				margin-top: 10px;
				&:before {
					content: "\f105";
				}
			}
		}
	}
	.videogallery {
		> div {
			margin: 0;
		}
		.video {
			margin: 0 0 15px 0;
			width: 100%;
			.img {
			}
		}
	}
	.price {
		font: 18px/24px @font;
		color: #000;
		margin-top: 15px;
		margin-bottom: 25px;
		strong, .strong {
			font: bold 32px/40px @fontSec;
		}
		table {
			width: 100%;
			border-collapse: collapse;
		}
		td {
			background: #eaeaea;
			vertical-align: middle;
			border-bottom: 1px solid #fff;
			padding: 10px 15px;
			+ td {
				background: @yellow;
				border-left: 1px solid #fff;
				text-align: center;
			}
		}
	}
	@media screen and (max-width: @breakpointMid) {
		width: 90%;
		max-width: none;
		.se-nav {
			left: auto;
			right: 30px;
			top: 30px;
			.close {
				margin-bottom: 80px;
			}
		}
		.se-head {
			padding-top: 80px;
			min-height: 300px;
		}
		.se-content {
			padding: 25px 0;
		}
		.price {
			strong, .strong {
				font-size: 24px;
				line-height: 30px;
			}
		}
	}
}

.serv-window .fancybox-slide>* {
	vertical-align: top;
}

.footer {
	padding: 25px 0;
	font: 14px/16px @font;
	color: #2d2d2d;
	padding-top: 10px;
	.container {
		padding: 0 40px;
		box-sizing: border-box;
	}
	.col {
		display: inline-block;
		vertical-align: bottom;
		width: 50%;
		+ .col {
			text-align: right;
		}
	}
	a {
		text-decoration: none;
	}
	.dev {
		margin-bottom: 15px;
	}
	@media screen and (max-width: @breakpointMid) {
		.col {
			width: 100%;
			display: block;
			text-align: center !important;
		}
	}
}


.totop {
	z-index: 30;
	cursor: pointer;
	position: fixed;
	bottom: 235px;
	left: 34px;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: @yellow;
	-webkit-box-shadow: 0 0 0 5px rgba(255,255,255,0.1);
	box-shadow: 0 0 0 5px rgba(255,255,255,0.1);
	&:after {
		.icn;
		content: "\f077";
		width: 20px;
		height: 20px;
		font-size: 20px;
		line-height: 20px;
		text-align: center;
		position: absolute;
		left: 50%;
		top: 50%;
		margin: -12px 0 0 -10px;
	}
}

.section-district-title {
	background: url(../images/district-title-bg.jpg) center center no-repeat;
	background-size: cover;
	padding: 300px 0 80px;
	text-align: center;
	.title {
		font: 900 60px/80px @fontSec;
		color: #fff;
		text-transform: uppercase;
		margin-bottom: 25px;
	}
	.select-district {
		display: inline-block;
		width: 400px;
		max-width: 80%;
		position: relative;
		.placeholder {
			font: 600 16px/50px @font;
			color: #9f9f9f;
			border-radius: 25px;
			height: 50px;
			padding: 0 30px;
			background: #fff;
			text-align: left;
			padding-right: 50px;
			overflow: hidden;
			text-overflow: ellipsis;
			&:after {
				.icn;
				content: "\f107";
				width: 50px;
				height: 50px;
				font-size: 24px;
				line-height: 50px;
				position: absolute;
				right: 0;
				top: 0;
			}
		}
		.dropdown {
			display: none;
			position: absolute;
			top: 100%;
			overflow: hidden;
			left: 0;
			right: 0;
			background: #fff;
			border-radius: 25px;
			z-index: 50;
			box-shadow: 0px 0px 0px 2px fade(#000,30);
			max-height: 400px;
			overflow: auto;
			a {
				display: block;
				font: 600 16px/20px @font;
				color: #000;
				padding: 15px 30px;
				text-decoration: none;
				text-align: left;
				&:hover {
					background: fade(#000, 10);
				}
			}
		}
		&:hover {
			.dropdown {
				display: block;
			}
		}
	}
	@media screen and (max-width: @breakpointMid) {
		padding: 150px 0 40px;
		.title {
			font-size: 32px;
			line-height: 40px;
		}
	}
	@media screen and (max-width: @breakpointSmall) {
		padding: 200px 0 40px;
		.title {
			font-size: 26px;
			line-height: 30px;
		}
	}
}

.videogallery {
	margin: 15px 0;
	> div {
		margin-left: -30px;
		@media screen and (max-width: @breakpointSmall) {
			margin-left: 0;
		}
	}
	.video {
		display: inline-block;
		vertical-align: top;
		margin-left: 30px;
		margin-bottom: 25px;
		max-width: 100%;
		@media screen and (max-width: @breakpointSmall) {
			display: block;
			margin-left: auto;
			margin-right: auto;
		}
		.img {
			display: block;
			background-position: center center;
			background-size: cover;
			background-repeat: no-repeat;
			position: relative;
			max-width: 100%;
			min-width: 320px;
			padding-top: 75%;
			&:before {
				.trn;
				position: absolute;
				width: 100%;
				height: 100%;
				top: 0;
				left: 0;
				content: '';
				background: rgba(0,0,0,.7);
				cursor: pointer;
			}
			&:after {
				.icn;
				.trn;
				content: "\f16a";
				position: absolute;
				font-size: 50px;
				line-height: 60px;
				height: 60px;
				width: 60px;
				text-align: center;
				cursor: pointer;
				top: 50%;
				left: 50%;
				margin-left: -30px;
				margin-top: -30px;
				color: #fff;
				z-index: 10;
			}
			&:hover {
				&:before {
					background: rgba(0,0,0,.5);
				}
				&:after {
					color: @yellow;
				}
			}
			&.playing {
				padding-top: 0;
				&:before, &:after {
					display: none;
				}
			}
		}
		.title {
			margin: 5px 0 0;
			font-size: 18px;
			font-weight: bold;
			text-align: center;
		}
	}
}

.section-services + .section-portfolio {
	padding-top: 0;
}

.section-about-gallery {
	overflow: hidden;
	.slick-slider {
		.slick-arrow {
			position: absolute;
			width: 140px;
			height: 50%;
			left: 100%;
			cursor: pointer;
			background: none;
			border: none;
			overflow: hidden;
			text-indent: 999px;
			text-align: left;
			padding: 0;
			margin: 0;
			color: #d4d4d4;
			outline: none;
			z-index: 20;
			&:before {
				content: '';
				display: block;
				width: 40px;
				height: 76px;
				position: absolute;
				right: 0;
				background: url(../images/slider-icns.png) no-repeat;
				background-size: auto 200%;
			}
			&.slick-prev {
				bottom: 0;
				&:before {
					top: 4px;
					background-position: 0px 0px;
				}
				&:hover {
					&:before {
						background-position: 0px -76px;
					}
				}
			}
			&.slick-next {
				top: 0;
				&:before {
					bottom: 33px;
					background-position: -40px 0px;
				}
				&:hover {
					&:before {
						background-position: -40px -76px;
					}
				}
			}
		}
		@media screen and (max-width: 1470px) {
			.slick-arrow {
				&:before {
					left: 10px;
				}
			}
		}
		@media screen and (max-width: @breakpointLarge) {
			.slick-arrow {
				width: 50px;
				// left: auto;
				// right: 0;
			}
		}
		@media screen and (max-width: @breakpointMid) {
			.slick-arrow {
				width: 40px;
				height: 100%;
				&:before {
					top: 50% !important;
					margin-top: -38px !important;
				}
				&.slick-prev {
					right: auto;
					left: -15px;
					top: 0;
					&:before {
						left: 0;
					}
				}
				&.slick-next {
					left: auto;
					right: -15px;
					top: 0;
					&:before {
						left: 0;
					}
				}
			}
		}
	}
	@media screen and (max-width: @breakpointLarge) {
		gallery-carousel-container {
			padding: 0 50px;
		}
	}
}

.page-title {
	background: url(../images/district-title-bg.jpg) center center no-repeat;
	background-size: cover;
	padding: 300px 0 10px;
	text-align: center;
	.title {
		font: 900 60px/80px @fontSec;
		color: #fff;
		text-transform: uppercase;
		margin-bottom: 25px;
	}
	@media screen and (max-width: @breakpointMid) {
		padding: 150px 0 10px;
		.title {
			font-size: 32px;
			line-height: 40px;
		}
	}
	@media screen and (max-width: @breakpointSmall) {
		padding: 200px 0 10px;
		.title {
			font-size: 26px;
			line-height: 30px;
		}
	}
}

.page {
	padding: 50px 0;
	overflow: hidden;
}



.news {
	&__items {
		margin-left: -30px;
	}
	&__item {
		text-align: left;
		display: inline-block;
		vertical-align: top;
		width: 270px;
		margin-left: 30px;
		margin-bottom: 30px;
		color: #000 !important;
		text-decoration: none !important;
		.trn();
		&:hover {
			opacity: .8;
		}
	}
	&__img {
		padding-top: 85%;
		background-size: cover;
		background-position: center center;
		background-repeat: no-repeat;
		&_noimg {
			background: #363533 url(../images/logo3.png) center center no-repeat;
			background-size: 80% auto;
		}
	}
	&__text {
		background: @yellow;
		padding: 15px 15px;
		min-height: 190px;
		position: relative;
	}
	&__date {
		font: 16px/20px @font;
		color: #000;
		margin-bottom: 15px;
		display: block;
	}
	&__title {
		display: block;
		font: bold 22px/30px @font;
		margin-bottom: 5px;
	}
	&__announce {
		font: 14px/17px @font;
		height: 68px;
		margin-top: 15px;
		overflow: hidden;
		display: block;
		display: -webkit-box;
		text-overflow: ellipsis;
		-webkit-line-clamp: 4;
		-webkit-box-orient: vertical;
	}
	@media screen and (max-width: @breakpointLarge) {
		&__items {
			margin-left: -30px;
		}
		&__item {
			width: 300px;
			margin-left: 30px;
		}
	}
	@media screen and (max-width: @breakpointMid) {
		&__items {
			margin-left: 0;
			text-align: center;
		}
		&__item {
			width: 320px;
			margin: 0 20px 20px;
		}
	}
	@media screen and (max-width: @breakpointSmall) {
		&__item {
			display: block;
			width: auto;
			max-width: 400px;
			margin: 0 auto 20px;
		}
	}
}



.btn-nav {
	.trn;
	display: block;
	text-align: center;
	font: 18px/24px font;
	color: black !important;
	text-decoration: none !important;
	padding: 10px 15px;
	margin: 15px auto;
	&__icn {
		margin: 15px auto;
		display: block;
		width: 40px;
		height: 40px;
		border: 2px solid;
		text-align: center;
		text-decoration: none;
		border-radius: 50%;
		position: relative;
		cursor: pointer;
		&, &:before, &:after {
			border-color: black;
		}
		&:before {
			content: '';
			display: block;
			width: 0;
			border-left: 2px solid black;
			height: 17px;
			position: absolute;
			left: 50%;
			margin-left: -1px;
			top: 50%;
			margin-top: -10px;
		}
		&:after {
			content: '';
			border-left: 2px solid black;
			border-top: 2px solid black;
			width: 8px;
			height: 8px;
			position: absolute;
			left: 50%;
			top: 50%;
			margin-left: -5px;
		}
	}
	&:hover {
		background: fade(black,10);
	}
	&_prev {
		margin-top: 0;
		.btn-nav__icn {
			&:after {
				margin-top: -10px;
				transform: rotate(45deg);
			}
		}
	}
	&_next {
		margin-bottom: 0;
		.btn-nav__icn {
			&:after {
				margin-top: -2px;
				transform: rotate(225deg);
			}
		}
	}
}


.gallery-carousel-block {
	.slick-slider {
		.slick-arrow {
			position: absolute;
			width: 140px;
			height: 50%;
			left: 100%;
			cursor: pointer;
			background: none;
			border: none;
			overflow: hidden;
			text-indent: 999px;
			text-align: left;
			padding: 0;
			margin: 0;
			color: #d4d4d4;
			outline: none;
			z-index: 20;
			&:before {
				content: '';
				display: block;
				width: 40px;
				height: 76px;
				position: absolute;
				right: 0;
				background: url(../images/slider-icns.png) no-repeat;
				background-size: auto 200%;
			}
			&.slick-prev {
				bottom: 0;
				&:before {
					top: 4px;
					background-position: 0px 0px;
				}
				&:hover {
					&:before {
						background-position: 0px -76px;
					}
				}
			}
			&.slick-next {
				top: 0;
				&:before {
					bottom: 33px;
					background-position: -40px 0px;
				}
				&:hover {
					&:before {
						background-position: -40px -76px;
					}
				}
			}
		}
		@media screen and (max-width: 1470px) {
			.slick-arrow {
				&:before {
					left: 10px;
				}
			}
		}
		@media screen and (max-width: @breakpointLarge) {
			.slick-arrow {
				width: 50px;
				// left: auto;
				// right: 0;
			}
		}
		@media screen and (max-width: @breakpointMid) {
			.slick-arrow {
				width: 40px;
				height: 100%;
				&:before {
					top: 50% !important;
					margin-top: -38px !important;
				}
				&.slick-prev {
					right: auto;
					left: -15px;
					top: 0;
					&:before {
						left: 0;
					}
				}
				&.slick-next {
					left: auto;
					right: -15px;
					top: 0;
					&:before {
						left: 0;
					}
				}
			}
		}
	}
	@media screen and (max-width: @breakpointLarge) {
		gallery-carousel-container {
			padding: 0 50px;
		}
	}
}



.gallery-block {
	margin: 15px 0;
	&__container {
		text-align: left;
		margin-left: -15px;
	}
	&__item {
		display: inline-block;
		vertical-align: top;
		width: 380px;
		margin-left: 15px;
		margin-bottom: 15px;
		text-decoration: none !important;
		text-align: center;
		color: inherit !important;
		outline: none;
		max-width: 100%;
		&-img {
			display: block;
			margin: 0 auto;
		}
		&-descr {
			margin: 5px 0 0 !important;
			font-size: 18px;
			font-weight: 400;
			text-align: center;
		}
	}
	@media screen and (max-width: @breakpointLarge) {
		&__container {
			margin-left: -30px;
		}
		&__item {
			width: 300px;
			margin-left: 30px;
		}
	}
	@media screen and (max-width: @breakpointMid) {
		&__container {
			margin-left: 0;
			text-align: center;
		}
		&__item {
			width: 320px;
			margin: 0 20px 20px;
		}
	}
	@media screen and (max-width: @breakpointSmall) {
		&__item {
			display: block;
			width: auto;
			max-width: 400px;
			margin: 0 auto 20px;
		}
	}
}


.article {
	&__date {
		text-align: center;
		font-size: 18px;
		margin: 0 0 10px 0;
	}
	&__title {
		font-size: 32px !important;
		margin: 0 0 30px !important;
		text-align: center;
	}
	&__img {
		text-align: center;
		margin-bottom: 30px;
		a {
			display: block;
		}
		img {
			display: block;
			margin: 0 auto;
		}
	}
}


.videogallery-block {
	margin: 15px 0;
	iframe {
		display: block;
	}
	&__container {
		margin-left: -10px;
	}
	&__item {
		display: inline-block;
		vertical-align: top;
		width: 580px;
		margin-left: 10px;
		margin-bottom: 25px;
		max-width: 100%;
		&-link {
			display: block;
			background-position: center center;
			background-size: cover;
			background-repeat: no-repeat;
			position: relative;
			padding-top: 62%;
			&:before {
				.trn;
				position: absolute;
				width: 100%;
				height: 100%;
				top: 0;
				left: 0;
				content: '';
				background: rgba(0,0,0,.7);
				cursor: pointer;
			}
			&:after {
				.icn;
				.trn;
				content: "\f16a";
				position: absolute;
				font-size: 50px;
				line-height: 60px;
				height: 60px;
				width: 60px;
				text-align: center;
				cursor: pointer;
				top: 50%;
				left: 50%;
				margin-left: -30px;
				margin-top: -30px;
				color: #fff;
				z-index: 10;
			}
			&:hover {
				&:before {
					background: rgba(0,0,0,.5);
				}
				&:after {
					color: @yellow;
				}
			}
			&.playing {
				padding-top: 0;
				&:before, &:after {
					display: none;
				}
			}
		}
		&-title {
			margin: 5px 0 0 !important;
			font-size: 18px;
			font-weight: 400;
			text-align: center;
		}
	}
	@media screen and (max-width: @breakpointLarge) {
		&__container {
			margin-left: -40px;
		}
		&__item {
			width: 460px;
			margin-left: 40px;
		}
	}
	@media screen and (max-width: @breakpointMid) {
		&__container {
			margin-left: 0;
			text-align: center;
		}
		&__item {
			width: 320px;
			margin: 0 20px 20px;
		}
	}
	@media screen and (max-width: @breakpointSmall) {
		&__item {
			display: block;
			width: auto;
			max-width: 400px;
			margin: 0 auto 20px;
		}
	}
}

.payment-items {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;

	&__item {
		width: 280px;
		margin: 0 15px 25px;
		max-width: 90%;
	}
}

.payment-item {
	text-align: center;
	border: 1px solid #ddd;
	border-radius: 10px;
	padding-top: 10px;
	padding-bottom: 10px;

	&__title {
		font-size: 120%;
		margin-bottom: 15px;
		font-weight: 700;
	}

	img {
		display: block;
		width: 100%;
		margin-bottom: 15px;
	}

	&__price {
		font-weight: 700;
		margin-bottom: 15px;
	}

	&__button {
		margin-bottom: 15px;
	}
}

.payment-content {
	margin-bottom: 25px;
}

.payment-item-days {
	&__title {
		margin-bottom: 10px;
	}


	&__content {
		li {
			margin-bottom: 5px;
			list-style: disc inside;
		}
	}
}

.section-video {
	padding: 50px 0;

	&__container {
		position: relative;

		&::before {
			content: '';
			padding-top: 56.5%;
			display: block;
		}

		iframe {
			margin-left: auto;
			margin-right: auto;
			display: block;
			position: absolute;
			width: 100% !important;
			height: 100% !important;
			top: 0;
			left: 0;
		}
	}
}

.phone-link {
	&__ico {
		width: 1em;
		height: 1em;
		fill: currentColor;
		display: inline-block;
    	vertical-align: middle;
	}
}