@fontMain : 'Open Sans', sans-serif;

@colorMain: #603879;

@breakpointL: 1170px;
@widthL: 900px;
@paddingL: 15px;

@breakpointM: 920px;
@widthM: 640px;
@paddingM: 15px;

@breakpointS: 640px;
@widthS: 320px;
@paddingS: 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;
}

.icon {
	display:inline-block;
	font-family:FontAwesome;
	font-style:normal;
	font-weight:normal;
	-webkit-font-smoothing:antialiased;
	-moz-osx-font-smoothing:grayscale;
}
a {
	color: inherit;
}
.clear {
	clear: both;
}

.overflow {
	overflow: hidden;
}

.hidden {
	display: none;
}
img {
	max-width: 100%;
	height: auto;
}

.transition {
	-webkit-transition: color .5s ease, background .5s ease, -webkit-box-shadow .5s ease, opacity .5s ease;
	transition: color .5s ease, background .5s ease, box-shadow .5s ease, opacity .5s ease;
}

.button {
	.transition;
	display: inline-block;
	background: #fecf13;
	color: #000;
	text-transform: uppercase;
	font-size: 20px;
	line-height: 30px;
	font-weight: 600;
	text-align: center;
	padding: 15px 30px;
	margin-top: 25px;
	text-decoration: none;
	border-radius: 5px;
	cursor: pointer;

	-webkit-box-shadow:inset 0 0 3px 6px rgba(255,255,255,.15), inset 0 -3px 0 0 #e3ae09;
	box-shadow:inset 0 0 3px 6px rgba(255,255,255,.15), inset 0 -3px 0 0 #e3ae09;

	border: none;
	font-family: inherit;

	&:focus, &:hover {
		border: none;
		background: #ffd739;
		outline: none;
	}
	@media screen and (max-width: @breakpointS) {
		padding: 10px 15px;
		font-size: 16px;
		line-height: 25px;
		margin-top: 15px;
	}
}


html, body{
  height: 100%;
}
.sup-wrapper {
	min-height: 100%;
}

.sup-container {
	padding-bottom: 560px;
}

.main-footer {
	min-height: 560px;
	margin-top: -560px;
}

body {
	font: 16px/1.5 @fontMain;
	color: #000;
}

.container {
	box-sizing: border-box;
	position: relative;
	max-width: 1200px;
	padding: 0 15px;
	margin: 0 auto;
	min-width: 320px;
	@media screen and (max-width: @breakpointL) {
		width: @widthL;
		padding: 0 @paddingL;
	}
	@media screen and (max-width: @breakpointM) {
		width: @widthM;
		padding: 0 @paddingM;
	}
	@media screen and (max-width: @breakpointS) {
		max-width: @widthM;
		width: auto;
		padding: 0 @paddingS;
	}
}

.main-header {
	.top {
		padding: 9px 0;
		position: relative;
		z-index: 50;
		.toggle-nav {
			display: none;
		}
		.col {
			display: inline-block;
			vertical-align: middle;
			width: 35%;

			+ .col {
				width: 65%;
				text-align: right;
			}
		}

		.logo {

			text-decoration: none;
			display: block;

			img {
				display: inline-block;
				vertical-align: middle;
				margin-right: 12px;
			}

			p {

				display: inline-block;
				vertical-align: middle;
				text-transform: uppercase;
				font-weight: 600;
				font-size: 18px;
				line-height: 22px;
				color: @colorMain;

				strong {

					display: block;
					font-size: 30px;
					color: #000;
				}
			}
		}

		nav {

			margin-right: -15px;
			margin-top: 14px;

			ul.main-nav {

				> li {

					position: relative;
					display: inline-block;
					// margin-left: 6px;

					> a {

						.transition;
						display: block;
						padding: 10px 10px;
						border-radius: 5px;
						font-weight: 600;
						font-size: 13px;
						line-height: 15px;
						color: #2c2c2c;
						text-transform: uppercase;
						text-decoration: none;

						&:hover {
							color: @colorMain;
						}
					}

					&.active {
						a {
							background: @colorMain;
							color: #fff;
						}
					}

					ul {
						.transition;
						display: none;
						opacity: 0;
						position: absolute;
						top: 100%;
						left: 15px;
						width: 230px;
						padding: 20px 15px 20px 20px;
						background: @colorMain;
						background: rgba(87,45,114,.95);
						border-radius: 5px;
						z-index: 5;
						text-align: left;

						li {

							a {
								display: block;
								padding: 5px 0;

								font-weight: 600;
								font-size: 13px;
								line-height: 15px;
								color: #fff;
								text-transform: uppercase;
								text-decoration: none;

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

						&:before {
							content: '';
							position: absolute;
							top: -7px;
							left: 10px;
							width: 0;
							height: 0;
							border-style: solid;
							border-width: 0 4px 7px 4px;
							border-color: transparent transparent @colorMain transparent;
							border-color: transparent transparent rgba(87,45,114,.95) transparent;

						}
					}

					&:hover ul {
						  display: block;
						  opacity: 1;
						  // -webkit-animation-duration: .5s;
						  // animation-duration: .5s;
						  // -webkit-animation-fill-mode: both;
						  // animation-fill-mode: both;
						  // -webkit-animation-name: fadeInUp;
						  // animation-name: fadeInUp;
					}
				}
			}
		}
		&.fixed {
			position: fixed;
			left: 0;
			top: 0;
			width: 100%;
			z-index: 40;
			background: #fff;

			-webkit-animation-duration: .5s;
			animation-duration: .5s;
			-webkit-animation-fill-mode: both;
			animation-fill-mode: both;
			-webkit-animation-name: fadeInDown;
			animation-name: fadeInDown;

			.col {
				width: 20%;

				+ .col {
					width: 80%;
				}
			}

			.logo {

				p {
					display: none;
				}

				img {
					width: 60px;
				}
			}
		}
	}
	.bottom {
		padding: 37px 0 45px 0;
		background: #cbe1f7 url(../images/panels_bg.jpg) bottom -10px center no-repeat;
		color: @colorMain;
		position: relative;
		overflow: hidden;
		.col {
			display: inline-block;
			vertical-align: top;
			width: 50%;
			position: relative;
			z-index: 3;

			+ .col {
				text-align: right;
			}
		}
		.photo {
			display: block;
			float: left;
			width: 100px;
			height: 100px;
			border-radius: 50%;
			margin: -5px 30px -17px 40px;

			img {
				display: block;
				width: 100%;
				height: 100%;
				border-radius: 50%;
			}
		}
		.slogan {
			font-weight: bold;
			font-size: 24px;
			line-height: 1.2;
			text-transform: uppercase;
		}
		.phone {

			p {
				font-weight: 600;
				font-size: 12px;
				line-height: 1.3;
				text-transform: uppercase;
				letter-spacing: -.35px;
			}

			h5 {

				font-weight: 600;
				font-size: 32px;
				letter-spacing: -.7px;

				a {
					text-decoration: none;
					color: inherit;
				}
			}
		}
	}
	@media screen and (min-width: ( @breakpointL + 1 )) {
		.top .main-nav-wrapper {
			display: block !important;
			opacity: 1 !important;
		}
	}
	@media screen and (max-width: @breakpointL) {
		padding-top: 100px;
		.top {
			padding: 0;
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			background: #fff;
			.container {
				padding: 0;
			}
			.col {
				width: 75%;
				+ .col {
					width: 25%;
				}
			}
			.logo {
				display: inline-block;
				padding: 9px 15px;
			}
			nav {
				margin: 0;
			}
			.toggle-nav {
				.transition;
				display: block;
				cursor: pointer;
				z-index: 10;
				padding-right: 15px;
				.toggle-nav-label {
					font: 16px/24px @fontMain;
					text-transform: uppercase;
					color: @colorMain;
					display: inline-block;
					vertical-align: middle;
					padding-top: 4px;
				}
				.toggle-nav-icn {
					display: inline-block;
					vertical-align: middle;
					width: 30px;
					height: 100px;	
					position: relative;
				}
				.icn-bar {
					.transition;
					position: absolute;
					right: 0;
					top: 50%;
					width: 20px;
					height: 3px;
					background: @colorMain;
					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);
							}
						}
					}
				}
			}
			.main-nav-wrapper {
				display: none;
				position: fixed;
				top: 100px;
				bottom: 0;
				left: 0;
				right: 0;
				overflow: auto;
				background: #fff;
				.main-nav-container {
					display: table;
					width: 100%;
					height: 100%;
					ul.main-nav {
						display: table-cell;
						vertical-align: middle;
						text-align: center;
						> li {
							display: block;
							ul {
								display: block;
								opacity: 1;
								position: relative;
								left: 0;
								top: 0;
								right: 0;
								bottom: 0;
								width: 260px;
								margin: 0 auto;
								&:before {
									left: 50%;
									margin-left: -2px;
								}
							}
						}
					}
				}
			}
			&.fixed {
				-webkit-animation: none;
				animation: none;
				.logo {
					padding-top: 5px;
					padding-bottom: 5px;
					p {
						display: none;
					}
					img {
						height: 40px;
					}
				}
				.toggle-nav {
					.toggle-nav-icn {
						height: 50px;
					}
				}

				.main-nav-wrapper {
					top: 50px;
				}
			}
		}
	}
	@media screen and (max-width: @breakpointM) {
		.bottom {
			padding: 15px 0;
			.photo {
				display: none;
			}
			.slogan {
				font-size: 18px;
			}
			.phone {
				p {
					font-size: 10px;
				}
				h5 {
					font-size: 25px;
				}
			}
		}
	}
	@media screen and (max-width: @breakpointS) {
		padding-top: 70px;
		.top {
			.col {
				width: 68%;
				+ .col {
					width: 32%;
				}
			}
			.logo {
				display: block;
				img {
					width: 60px;
					margin-right: 5px;
				}
				p {
					font-size: 12px;
					line-height: 18px;
					strong {
						font-size: 16px;
					}
				}
			}
			.toggle-nav {
				padding-right: 10px;
				.toggle-nav-icn {
					width: 25px;
					height: 70px;
				}
			}
			.main-nav-wrapper {
				top: 60px;
			}
			&.fixed {
				.col {
					width: 70%;
					+ .col {
						width: 30%;
					}
				}
				.logo {
					p {
						display: inline-block;
					}
					img {
						height: auto;
						width: 60px;
					}
				}
				.main-nav-wrapper {
					top: 50px;
				}
			}
		}
		.bottom {
			.col {
				display: block;
				width: 100%;
				padding: 0;
				margin: 0;
				text-align: center;
				+ .col {
					text-align: center;
					margin-top: 10px;
				}
			}
		}
	}
}
.main-footer {

	.top {
		padding: 96px 0 94px 0;
		background: #cbe1f7 url(../images/panels_bg.jpg) bottom center no-repeat;
		background-size: auto 100%;

		.feedback {

			margin: 0 auto;
			max-width: 1030px;
		}
	}

	.bottom {

		font-size: 14px;
		color: #333333;

		.col {
			display: inline-block;
			vertical-align: top;
			width: 60%;

			+ .col {
				width: 40%;
				text-align: right;
			}
		}

		.bot-top {
			padding: 25px 0 5px 0;
		}

		.bot-bot {

			padding: 5px 0 5px 0;

			.col {
				vertical-align: bottom;
			}
		}

		.slogan {
			font-size: 30px;
			line-height: 32px;
			color: @colorMain;
			font-weight: bold;
			padding-right: 20px;
			text-transform: uppercase;
		}
		.phone {
			font-size: 30px;
			line-height: 32px;
			color: @colorMain;
			font-weight: 600;
			margin-bottom: 5px;
			letter-spacing: -.8px;

			a {
				.transition;
				color: inherit;
				text-decoration: none;

				&:hover {
					color: #333;
				}
			}
		}
		address {}
		.dev {
			font-size: 12px;

			p {
				margin-bottom: 2px;
			}

			a {
				color: inherit;
				text-decoration: underline;

				&:hover {
					color: @colorMain;
				}
			}
		}
		.counters {}

		p {
			margin-bottom: 5px;
		}
	}
	@media screen and (max-width: @breakpointM) {
		text-align: center;
		.col {
			display: block;
			width: 100% !important;
			margin: 10px 0 !important;
			text-align: center !important;
		}
	}
}
form {
	text-align: center;
	padding: 10px 10px;
	background: #dbecfa;
	background: rgba(255,255,255,.3);
	border-radius: 5px;

	> div {
		display: inline-block;
		width: 31%;
		padding: 0 1%;
		vertical-align: top;
		margin-bottom: 15px;
	}

	.inp {
		.transition;
		position: relative;
		background: #fff;
		padding: 12px 12px;
		border: 1px solid #dddddd;
		border-radius: 1px;
		-webkit-box-shadow:inset 1px 2px 7px 1px rgba(221,221,221,.85);
		box-shadow:inset 1px 2px 7px 1px rgba(221,221,221,.85);

		&.error {
			border-color: red;
		}

		&.name, &.email {
			padding-left: 40px;

			&:before {

				.icon;
				font-size: 16px;
				line-height: 20px;
				width: 40px;
				height: 20px;
				position: absolute;
				left: 0;
				top: 50%;
				margin-top: -10px;
				text-align: center;
				color: @colorMain;

			}
		}

		&.name:before {
			content: '\f007';
		}

		&.email:before {
			content: '\f0e0';
		}
	}

	input, textarea {
		  display: block;
		  background: none;
		  -webkit-box-shadow: none;
		  box-shadow: none;
		  border-radius: 15px;
		  height: 20px;
		  width: 100% !important;
		  line-height: 20px;
		  padding: 0;
		  margin: 0 !important;
		  border: none;
		  font-family: inherit;

		  &:focus, &:hover {
			border: none;
			color: @colorMain;
			outline: none;
		}

		&:focus {
			&::-webkit-input-placeholder {opacity: 0}
			&::-moz-placeholder          {opacity: 0}
			&:-ms-input-placeholder      {opacity: 0}
		}
	}

	.checkbox-lbl {
		display: block;
		text-align: left;
		font-size: 14px;
		background: fade(#fff,40);
		padding: 5px;
		margin: 0 1.5% 10px;
	}
	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;
	}

	.capture {
		text-align: left;
		.capture_img {
			display: inline-block;
			vertical-align: middle;
			img {
				display: block;
			}
		}
		.inp {
			display: inline-block;
			vertical-align: middle;
			width: 216px;
			margin-left: 28px;
		}
	}

	textarea {
		max-height: 110px !important;
		 padding: 0 5px;
		 box-sizing: border-box;
	}

	button {
		.button;
	}
	@media screen and (max-width: @breakpointL) {
		padding: 15px 15px;
		.inp {
			padding: 8px 15px;
		}
	}
	@media screen and (max-width: @breakpointS) {
		> div {
			width: 100%;
			margin-left: 0;
			margin-right: 0;
			padding: 0;
			margin-bottom: 10px;
		}
		.capture {
			.inp {
				width: 162px;
				margin-left: 15px;
			}
		}
	}
}
.page {
	padding: 23px 0;
	.page-head {
		.page-head-label {
			text-align: center;
			color: #000;
			font-size: 36px;
			line-height: 1.5;
			padding: 15px 0 34px 0;
			font-weight: bold;
		}
	}
	nav {
		display: table;
		width: 100%;
		max-width: 880px;
		margin: 5px auto 58px auto;
		border-spacing: 6px 0;

		a {
			display: table-cell;
			max-width: 210px;
			min-width: 125px;
			vertical-align: middle;
			padding: 6px 15px;

			margin: 0 3px;

			background: @colorMain;
			border-radius: 5px;
			text-decoration: none;
			font-size: 18px;
			line-height: 22px;
			color: #fff;
			text-align: center;
			font-weight: 600;
			position: relative;

			&.active {
				background: #0dab1c;

				&:after {
					content: '';
					width: 0;
					height: 0;
					border-style: solid;
					border-width: 9px 9.5px 0 9.5px;
					border-color: #0dab1c transparent transparent transparent;
					position: absolute;
					top: 100%;
					left: 50%;
					margin-left: -9.5px;
				}
			}
		}
	}
	@media screen and (max-width: @breakpointS) {
		.page-head {
			.page-head-label {
				font-size: 26px;
				padding: 15px 0 20px 0;
			}
		}
		nav {
			display: block;
			text-align: center;
			a {
				display: none;
				&.active {
					display: inline-block;
				}
			}
		}
	}
}
.content {
	h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6 {
		font: bold 16px/1.5 @fontMain;
		color: @colorMain;
		margin-bottom: .8em;
	}
	h1,.h1 {font-size: 32px}
	h2,.h2 {font-size: 28px}
	h3,.h3 {font-size: 20px}
	h4,.h4 {font-size: 18px}
	h5,.h5 {font-size: 16px}
	h6,.h6 {}
	p {
		margin-bottom: 1.5em;
	}
	img {
		max-width: 100%;
	}
	strong,.strong {
		font-weight: bold;
		color: #000;
	}
	a {
		.transition;
		color: inherit;
		text-decoration: underline;
		&:hover {
			color: inherit;
			text-decoration: none;
		}
	}
	ul, ol {
		margin-bottom: 1.5em;
	}
	ul {
		padding-left: 20px;
		-moz-column-count: 2;
		-moz-column-gap: 70px;
		-webkit-column-count: 2;
		-webkit-column-gap: 60px;
		column-count: 2;
		column-gap: 60px;
		li {
			padding-left: 17px;
			position: relative;
			&:before {
				content: '';
				display: block;
				width: 8px;
				height: 8px;
				border-radius: 50%;
				background: @colorMain;
				position: absolute;
				left: 0;
				top: 7px;
			}
		}
	}
	ol {
		padding-left: 20px;
		-moz-column-count: 2;
		-moz-column-gap: 70px;
		-webkit-column-count: 2;
		-webkit-column-gap: 60px;
		column-count: 2;
		column-gap: 60px;
		padding-left: 20px;
		list-style: inside decimal;
		li {}
	}
	hr {}
	table {
		width: 100%;
		border-collapse: collapse;
		margin: 15px 0 25px 0;
		tr {
			&:hover > td {
				background: rgba(87,45,114,.1);
			}
		}
		th, td {
			padding: 11px 3%;
			border: 1px solid #e2e2e2;
			.transition;
		}
		th {
			background: @colorMain;
			color: #fff;
			text-align: center;
			font-weight: normal;
		}

		td {}

		&.table_site {
			width: auto;

			td {
				border: none;
				border-bottom: 1px #e2e2e2;
			}
		}
	}
	@media screen and (max-width: @breakpointM) {
		ul, ol {
			-moz-column-count: 1;
			-moz-column-gap: 0;
			-webkit-column-count: 1;
			-webkit-column-gap: 0;
			column-count: 1;
			column-gap: 0;
		}
	}
	@media screen and (max-width: @breakpointS) {
		h1,.h1 {font-size: 26px}
		h2,.h2 {font-size: 22px}
		h3,.h3 {font-size: 18px}
		h4,.h4 {font-size: 16px}
		h5,.h5 {font-size: 14px}
		h6,.h6 {font-size: 12px}
	}
}
section.articles {
	padding-top: 5px;
	text-align: center;
	article {
		.transition;
		text-align: left;
		display: inline-block;
		vertical-align: top;
		width: 23%;
		margin-right: 2.66%;
		margin-bottom: 29px;
		font-size: 14px;
		color: #000000;
		line-height: 20px;


		&:hover {
			background: #f5f5f5;
  			background: rgba(242, 242, 242, 0.95);
  			-webkit-box-shadow: 0 0 0 15px rgba(242,242,242,0.95);
			box-shadow: 0 0 0 15px rgba(242,242,242,0.95);
		}

		&:nth-child(4n){
			margin-right: 0;
		}

		a {
			text-decoration: none;
		}


		.img {
			border-radius: 5px;
			margin-bottom: 15px;

			img {
				display: block;
				width: 100%;
				border-radius: 5px;
			}

			.noImg {
				width: 100%;
				padding-top: 63.33%;
				background: #e2e2e2;
				border-radius: 5px;
			}
		}


		.date {
			color: #888888;
			margin-bottom: 3px;
		}


		p {
			margin-bottom: 5px;
		}

		&.show{

			-webkit-animation-duration: 1s;
			animation-duration: 1s;
			-webkit-animation-fill-mode: both;
			animation-fill-mode: both;
			-webkit-animation-name: zoomInDown;
			animation-name: zoomInDown;

			+ article {
				-webkit-animation-delay: .1s;
				animation-delay: .1s;

				+ article {
					-webkit-animation-delay: .2s;
					animation-delay: .2s;

					+ article {
						-webkit-animation-delay: .3s;
						animation-delay: .3s;

						+ article {
							-webkit-animation-delay: .4s;
							animation-delay: .4s;

							+ article {
								-webkit-animation-delay: 5s;
								animation-delay: .5s;
							}
						}
					}
				}
			}

		}
	}

	.load-prev, .load-more {
		.transition;
		display: inline-block;
		font-size: 14px;
		line-height: 30px;
		padding: 0 15px;
		color: @colorMain;
		text-decoration: none;
		border: 2px solid @colorMain;
		border-radius: 5px;
		overflow: hidden;
		margin: -2px 0 25px 0;

		&:hover {
			color: #fff;
			background: @colorMain;

			&.loading:after {
				color: #fff;
			}
		}


		&:before {
			.icon;
			content: '';
			display: inline-block;
			font-size: 18px;
			line-height: 20px;
			margin-right: 5px;
			vertical-align: middle;
		}

		&.loading {

			position: relative;
  			color: transparent;

			&:after {
				.icon;
				content:"\f110";

				color: @colorMain;

				display: block;
				position: absolute;
				left: 0;
				top: 50%;
				width: 100%;
				margin-top: -10px;

				font-size: 30px;
				line-height: 20px;


				animation-name: spin;
				animation-duration: 4000ms;
				animation-iteration-count: infinite;
				animation-timing-function: linear;

				-webkit-animation-name: spin;
			    -webkit-animation-duration: 4000ms;
			    -webkit-animation-iteration-count: infinite;
			    -webkit-animation-timing-function: linear;
			}
		}
	}

	.load-prev:before {
			content: '\f106';
	}

	.load-more:before {
		content: '\f107';
	}
	@media screen and (max-width: @breakpointM) {
		article {
			width: 48%;
			margin-left: 1% !important;
			margin-right: 1% !important;
		}
	}
	@media screen and (max-width: @breakpointS) {
		article {
			width: 100%;
			margin: 0 auto 20px;
			max-width: 400px;
		}
	}
}
article.article {
	.preview {
		width: 370px;
		float: left;
		margin-right: 25px;
		margin-bottom: 15px;
	}

	.date {
		color: #b8b8b8;
		margin-bottom: 0;
		font-size: 13px;
	}

	h2 {
		max-width: 36em;
	}
	@media screen and (max-width: @breakpointM) {
		.preview {
			float: none;
			width: 100%;
			max-width: 370px;
			margin: 0 auto 20px;
		}
	}
}
a.btn-back {
	.transition;
	display: inline-block;
	font-size: 14px;
	line-height: 30px;
	padding: 0 15px;
	color: @colorMain;
	text-decoration: none;
	border: 2px solid @colorMain;
	border-radius: 5px;
	overflow: hidden;
	margin: 20px 0 20px 0;

	&:hover {
		color: #fff;
		background: @colorMain;
	}

	&:before {
		.icon;
		content: '\f104';
		display: inline-block;
		font-size: 18px;
		line-height: 20px;
		margin-bottom: 3px;
		margin-right: 5px;
		vertical-align: middle;
	}
}
a.more {
	.transition;
	display: inline-block;
	font-size: 14px;
	line-height: 30px;
	padding: 0 25px;
	color: @colorMain;
	text-decoration: none;
	border: 2px solid @colorMain;
	border-radius: 5px;
	overflow: hidden;
	margin: 15px 0 15px 0;
	&:hover {
		color: #fff;
		background: @colorMain;
	}

	&:after {
		.icon;
		content: '\f105';
		display: inline-block;
		font-size: 18px;
		line-height: 20px;
		margin-bottom: 3px;
		margin-left: 13px;
		vertical-align: middle;
	}
}
.files {
	margin-top: 25px;
}
.nav_pages, .content ul.nav_pages {
	padding: 15px 0;
	text-align: center;
	li {
		display: inline-block;
		padding: 5px;

		&:before {
			display: none;
		}

		a {

			&.current {
				text-decoration: none;
				cursor: default;
				color: inherit;

				&:after {
					display: none !important;
				}
			}
		}

	}
}
.gallery {
	margin-bottom: 25px;
	a {
		display: inline-block;
		vertical-align: top;
		text-decoration: none;
		margin-right: 10px;
		width: 180px;

		img {
			width: auto;
			max-width: 100%;
		}

		p {
			text-align: center;
			padding: 0 10px;
		}
	}
	@media screen and (max-width: @breakpointS) {
		text-align: center;
	}
}
.videos {
	margin-bottom: 25px;
	.item {
		display: inline-block;
		text-align: center;
		vertical-align: top;
		width: 460px;
		max-width: 100%;
		&:after {
			display: none !important;
			text-decoration: none;
		}
		.img {

			position: relative;

			img, iframe {
				display: block;
				max-width: 100%;
			}

			&:before {
				.transition;
				position: absolute;
				width: 100%;
				height: 100%;
				top: 0;
				left: 0;
				content: '';
				background: rgba(0,0,0,.7);
				cursor: pointer;
			}

			&:after {
				.icon;
				.transition;
				content:"\f144";

				position: absolute;
				font-size: 50px;
				line-height: 30px;
				height: 30px;
				width: 30px;
				text-align: center;
				cursor: pointer;

				top: 50%;
				left: 50%;
				margin-left: -30px;
				margin-right: -30px;

				color: #fff;

				z-index: 10;
			}

			&:hover {
				&:before {
					background: rgba(0,0,0,.5);
				}
				&:after {
					color: @colorMain;
				}
			}

			&.playing {
				&:before, &:after {
					display: none;
				}
			}
		}
	}
}
.share {
	margin-top: 25px;
	margin-bottom: 15px;
	.b-share__handle {

		display: inline-block !important;
		float: none !important;
		vertical-align: middle;
		padding: 0 !important;
		margin-right: 10px;
	}

	.b-share__link {
		.transition;
		width: 32px;
		height: 32px;
		padding: 0 !important;
		position: relative;
		background: @colorMain;
		border-radius: 5px;
		opacity: .3;

		&:hover {
			opacity: 1;
		}

		span {
			display: none;
		}

		&:before {
			content: '';
			width: 30px;
			height: 30px;
			position: absolute;
			left: 50%;
			top: 50%;
			margin-left: -15px;
			margin-top: -15px;
			background: url(../images/soc_icons.png) no-repeat;
		}

		&.b-share-btn__vkontakte:before {background-position: top 0px center;}
		&.b-share-btn__odnoklassniki:before {background-position: top -90px center;}
		&.b-share-btn__facebook:before {background-position: top -30px center;}
		&.b-share-btn__twitter:before {background-position: top -60px center;}
	}
}
.main-page {
	.main-header {
		.bottom {
			background-size: auto 102%;
			position: relative;				
			background-image: none;
			z-index: 0;
			padding: 0;
			&.noslider{background-image: url(../images/bg.jpg);}
			min-height: 450px;
			.btn-order {
				display: inline-block;
				.button;
				margin-top: 5px;
			}
			.main-slider {
				z-index: 10;
				position: absolute;
				left: 0;
				top: 0;
				right: 0;
				bottom: 0;
				.bx-wrapper, .bx-viewport, .sliderBlock {
					width: 100%;
					height: 100%;
				}
				.container {
					padding: 0;
				}
				.slide {
					display: block;
					width: 100%;
					height: 100%;
					background-size: cover;
					background-position: center top;
					background-repeat: no-repeat;
					z-index: 50;
					position: relative;
					text-decoration: none;
					.container {
						height: 100%;
					}
					.slogan {
						position: absolute;
						top: 0;
						left: 0;
						padding-top: 30px;
					}
					.slider-text {
						vertical-align: bottom;
						position: absolute;
						width: 500px;
						left: 0;
						top: 50%;
						transform: translateY(-50%);
						text-align: center;

						font-size: 32px;
						color: @colorMain;
						text-transform: uppercase;
						font-weight: bold;
					}
				}
				.bx-prev, .bx-next {
					.transition;
					width: 55px !important;
					height: 55px !important;
					border-radius: 50% !important;
					background: #fff !important;
					background: rgba(255,255,255,.4) !important;
					color: @colorMain !important;
					text-decoration: none !important;
					top: 50% !important;
					margin: -28px 0 0 0 !important;
					opacity: .5;
					z-index: 10 !important;

					&:hover {
						opacity: 1;
					}

					&:after {
						.icon;
						position: absolute;
						text-indent: 0px;
						font-size: 48px;
						line-height: 30px;
						text-align: center;
						width: 30px;
						height: 30px;
						top: 50%;
						margin-top: -15px;
						left: 50%;
						margin-left: -15px;
					}
				}
				.bx-prev {
					left: 20px !important;

					&:after {
						content:"\f104";
					}
				}
				.bx-next {
					right: 20px !important;
					&:after {
						content:"\f105";
					}
				}
			}
			.main-header-content {
				.container {
					// height: 526px;
					padding: 0;
				}
				.main-header-content-container {
					position: relative;
					width: 370px;
					margin-left: auto;
					text-align: right;
					z-index: 15;
					padding: 30px 0 25px;
				}
				.phone {
					margin-bottom: 25px;					
					letter-spacing: 0;
				}
				.form {
					form {
						> div {
							width: 100%;
							padding: 0;
							margin-bottom: 10px;
						}
						textarea {
							height: 50px !important
						}
						button {
							margin-top: 9px;
							font-size: 20px;
							padding-left: 5%;
							padding-right: 5%;
							width: 100%;
						}
						.checkbox-lbl {
							margin-left: 0;
							margin-right: 0;
						}
					}
				}
			}
			@media screen and (max-width: @breakpointL) {
				.main-header-content {
					.form form {
					 	> div {
					 		margin-bottom: 10px;
					 	}
					 	button {
							margin-top: 5px;
							font-size: 18px;
							padding: 10px 20px;
						}
					}
					.main-header-content-container {
						width: 340px;
						padding: 15px 0 10px;
						.phone {
							margin-bottom: 15px;
						}
					}
				}
				.main-slider {
					.slide {
						 .slider-text {
							width: 380px;
							font-size: 28px;
						}
					}
				}
			}
			@media screen and (max-width: @breakpointM) {
				// .main-slider {
				// 	position: static;
				// 	height: 300px;
				// }
				.main-slider {
					.slide {
						.slogan {
							font-size: 20px;
						}
						.slider-text {
							width: 270px;
							font-size: 21px;
						}
					}
				}
				.main-header-content {
					.form {
						display: none;
					}
					.btn {
						margin-top: 200px;
					}
					.phone {
						display: inline-block;
						padding: 15px 15px;
						background: #dbecfa;
						background: rgba(255,255,255,.5);
						border-radius: 5px;
						p {
							font-size: 10px;
						}
						h5 {
							font-size: 22px;
						}
					}
				}
			}
			@media screen and (max-width: @breakpointS) {
				.main-slider {
					position: static;
					height: 400px;
					.slide {
						.container {
							background: rgba(255,255,255,.8);
							position: absolute;
							bottom: 0;
							left: 0;
							right: 0;
							height: auto;
							padding: 15px 0;
							text-align: center;
						}
						.slogan, .slider-text {
							position: static;
							text-align: center;
							display: block;
							width: auto;
							height: auto;
							margin: 0;
							padding: 0 15px;
							transform: none;
						}
						.slider-text {
							margin-top: 15px;
							font-size: 16px;
						}
					}
				}
				.main-header-content {
					.container {
						height: auto;
						.main-header-content-container {
							width: auto;
							margin: 0;
							padding: 15px;
							text-align: center;
						}
						.btn {
							margin-top: 15px;
							font-size: 18px;
						}
					}
				}
			}
		}
	}
	.main-footer {
		min-height: 170px;
		margin-top: -170px;
	}
	.sup-container {
		padding-bottom: 170px;
	}
	.page .page-head .page-head-label {
		padding: 22px 0 55px 0;
	}
	.content {
		a.video-link {
			display: block;
			float: left;
			max-width: 49%;
			margin-right: 2.5%;
			margin-top: 7px;
			position: relative;

			img {
				max-width: 100%;
				height: auto !important;
				display: block;
				border-radius: 5px;
			}

			img, iframe {
				display: block;
				max-width: 100%;
			}

			&:before {
				.transition;
				position: absolute;
				width: 100%;
				height: 100%;
				top: 0;
				left: 0;
				content: '';
				background: rgba(96,56,121,.3);
				cursor: pointer;
				border-radius: 5px;
			}

			&:after {
				.icon;
				.transition;
				content:"\f04b";

				position: absolute;
				font-size: 50px;
				line-height: 30px;
				height: 30px;
				width: 30px;
				text-align: center;
				cursor: pointer;

				top: 50%;
				left: 50%;
				margin-left: -30px;
				margin-right: -30px;

				color: #fff;

				z-index: 10;
			}

			&:hover {
				&:before {
					background: rgba(96,56,121,.1);
				}
				&:after {
					color: @colorMain;
				}
			}

			&.playing {
				&:before, &:after {
					display: none;
				}
			}
		}
		@media screen and (max-width: @breakpointL) {
			.main-page-img {
				width: 300px;
			}
		}
		@media screen and (max-width: @breakpointM) {
			.main-page-img {
				width: 250px;
			}
		}
		@media screen and (max-width: @breakpointS) {
			.main-page-img {
				float: none !important;
				margin: 0 auto 15px !important;
			}
		}
	}
}
.services {
	background: #4d4686;
	height: 668px;
	overflow: hidden;
	position: relative;

	.container {
		height: 100%;
		position: relative;
	}

	h3 {
		padding: 49px 0;
		text-align: center;
		color: #fff;
		font-size: 36px;
		font-weight: bold;
		position: relative;
		z-index: 10;
	}

	.bg, .bg2, .line, .sphere_1, .sphere_2, nav {
		position: absolute;
		height: 804px;
		top: 50%;
		margin-top: -402px;
		left: 50%;
	}

	.bg {
		background: url(../images/services_bg.jpg) top 0px center no-repeat;
		width: 1920px;
		margin-left: -960px;
		z-index: 1;
	}

	.bg2 {
		background: url(../images/services_bg_2.png) top 50px center no-repeat;
		z-index: 2;
		width: 779px;
		margin-left: -390px;
	}

	.line {
		background: url(../images/services_line.png) top 325px center no-repeat;
		z-index: 3;
		width: 692px;
		margin-left: -346px;
	}
	.sphere_1 {
		background: url(../images/services_sphere_big.png) top 285px left 10px no-repeat;
		z-index: 4;
		width: 500px;
		margin-left: -250px;
	}
	.sphere_2 {
		background: url(../images/services_sphere_small.png) top 295px left 260px no-repeat;
		z-index: 4;
		width: 500px;
		margin-left: -250px;
	}

	nav {
		width: 900px;
		margin-left: -450px;

		a {
			-webkit-transition: all .5s ease;
			transition: all .5s ease;
			position: absolute;
			width: 200px;
			z-index: 10;
			text-decoration: none;
			color: #fff;
			font-weight: 600;
			text-align: center;
			font-size: 18px;
			line-height: 22px;


			&:before {
				-webkit-transition: all .5s ease;
				transition: all .5s ease;
				z-index: 1;
				content: '';
				width: 122px;
				height: 122px;
				background: url(../images/services_item.png) top center no-repeat;
				background-size: 100% 200%;
				margin: 0 auto;
				opacity: 1;
				display: block;
				margin-bottom: 13px;
			}

			&:after {
				-webkit-transition: all .5s ease;
				transition: all .5s ease;
				z-index: 2;
				content: '';
				width: 122px;
				height: 122px;
				background: url(../images/services_item.png) bottom center no-repeat;
				background-size: 100% 200%;
				position: absolute;
				left: 50%;
				margin-left: -61px;
				top: 0;
				opacity: 0;
				display: block;
			}

			span:after {
				-webkit-transition: all .5s ease;
				transition: all .5s ease;
				content: '';
				position: absolute;
				z-index: 3;
				width: 70px;
				height: 70px;
				top: 27px;
				left: 50%;
				margin-left: -35px;
				background: url(../images/services_icons.png) top 0px center no-repeat;
				display: block;
			}

			&.pid_11 {
				left: 3px;
				top: 359px;
				span:after{
					background-position: top 0px center;
				}
			}

			&.pid_12 {
				left: 218px;
				top: 429px;
				span:after{
					background-position: top -70px center;
				}
			}

			&.pid_13 {
				left: 485px;
				top: 427px;
				span:after{
					background-position: top -140px center;
				}
			}

			&.pid_14 {
				left: 677px;
				top: 379px;
				span:after{
					background-position: top -210px center;
				}
			}
&.pid_20 {
				left: 530px;
				top: 250px;
				span:after{
					background-position: top -280px center;
				}
			}
&.pid_23 {
				left: 300px;
				top: 250px;
				span:after{
					background-position: top -350px center;
				}
			}



			&:hover {
				margin-top: -21px;

				&:before, &:after {
					width: 164px;
					height: 164px;
				}

				&:before {
					opacity: 0;
				}

				&:after {
					opacity: 1;
					margin-left: -82px;
				}

				span:after {
					top: 48px;
				}
			}
		}
	}
	@media screen and (max-width: @breakpointM) {
		height: auto;
		padding-bottom: 25px;
		.line, .sphere_1, .sphere_2 {
			display: none;
		}
		h3 {
			padding: 25px 0;
		}
		nav {
			position: static;
			margin: 0 !important;
			width: auto;
			height: auto;
			text-align: center;
			a {
				display: inline-block;
				vertical-align: top;
				position: relative;
				left: 0 !important;
				right: 0 !important;
				bottom: 0 !important;
				top: 0 !important;
				margin: 0 20px 20px !important;
				&:hover {
					margin-top: 0;
					&:before, &:after {
						width: 122px;
						height: 122px;
					}

					&:before {
						opacity: 0;
					}

					&:after {
						opacity: 1;
						margin-left: -61px;
					}

					span:after {
						top: 27px;
					}
				}
			}
		}
	}
	@media screen and (max-width: @breakpointS) {
		padding: 0;
		.bg {
			height: 100%;
			top: 0;
			margin: 0 !important;
			background-size: cover;
			left: 0;
		}
	}
}
.last-news {

	padding: 48px 0 25px 0;
	text-align: center;

	h3 {
		margin-bottom: 55px;
		text-align: center;
		color: #000;
		font-size: 36px;
		font-weight: bold;
		position: relative;
		z-index: 10;

		a {
			text-decoration: none;
			color: inherit;
		}
	}

	.articles-slider-wrap {
		margin-bottom: 16px;
	}



	.bx-prev, .bx-next {
		.transition;
		width: 55px !important;
		height: 55px !important;
		border-radius: 50% !important;
		background: #fff !important;
		background: rgba(255,255,255,.4) !important;
		color: @colorMain !important;
		text-decoration: none !important;
		top: 24.55% !important;
		margin: 0 !important;
		opacity: .5;
		z-index: 10 !important;

		&:hover {
			opacity: 1;
		}

		&:after {
			.icon;
			position: absolute;
			text-indent: 0px;
			font-size: 48px;
			line-height: 30px;
			text-align: center;
			width: 30px;
			height: 30px;
			top: 50%;
			margin-top: -15px;
			left: 50%;
			margin-left: -15px;
		}
	}

	.bx-prev {
		left: 20px !important;

		&:after {
			content:"\f104";
		}
	}

	.bx-next {
		right: 20px !important;
		&:after {
			content:"\f105";
		}
	}



	article {

		text-align: left;
		width: 370px;
		font-size: 15px;
		line-height: 20px;
		float: left;

		a {
			.transition;
			text-decoration: none;
			color: #010101;

			&:hover {
				color: @colorMain;
			}
		}


		.img {
			border-radius: 5px;
			margin-bottom: 15px;

			img {
				display: block;
				width: 100%;
				border-radius: 5px;
			}

			.noImg {
				width: 100%;
				padding-top: 63.33%;
				background: #e2e2e2;
				border-radius: 5px;
			}
		}


		.date {
			color: #888888;
			margin-bottom: 3px;
		}


		p {
			margin-bottom: 5px;
		}
	}
	@media screen and (max-width: @breakpointM) {
		padding: 25px 0 15px;
		.bx-prev, .bx-next {
			opacity: .8;
			background: #fff !important;
		}
		.bx-prev {
			left: -0px !important;
		}

		.bx-next {
			right: -0px !important;
		}
	}
}
.rates {
	padding: 40px 0 49px;
	background: #f1ede5 url(../images/prices_bg.jpg) center center no-repeat;
	background-size: cover;
	text-align: center;

	h3 {
		margin-bottom: 40px;
		text-align: center;
		color: #000;
		font-size: 36px;
		font-weight: bold;
	}

	.content {

		table {
			border-spacing: 1px;

			td, th {
				background: #fff;
				background: rgba(255,255,255,.55);
				border-color: rgba(0,0,0,.1);
			}
			th {
				text-align: center;
				font-size: 24px;
				font-weight: 600;
				color: #000000;
				padding: 17px;
			}
			td {
				color: #333333;
				text-align: left;
				padding: 5px 22px 8px;;

				+ td {
					text-align: center;
					color: @colorMain;
					font-weight: bold;
					font-size: 30px;
					line-height: 56px;
					width: 36%;
				}
			}
			strong{
				color: @colorMain;
			}

			tr:hover td {
				background: rgba(255,255,255,.75);
			}
		}
	}
	.button {
		margin-top: 20px;
	}
	@media screen and (max-width: @breakpointM) {
		padding: 25px 0;
		h3 {
			margin-bottom: 25px;
		}
		.content {
			table {
				th {
					font-size: 20px;
					padding: 10px;
				}
				td {
					padding: 3px 15px 5px;
					+ td {
						font-size: 25px;
						line-height: 40px;
					}
				}
			}
		}
	}
	@media screen and (max-width: @breakpointS) {
		overflow: hidden;
		padding: 15px 0;
		h3 {
			margin-bottom: 15px;
		}
		.content {
			table {
				th {
					font-size: 16px;
					padding: 5px;
				}
				td {
					padding: 3px 15px 5px;
					+ td {
						font-size: 20px;
						line-height: 30px;
					}
				}
			}
		}
	}
}
.responses {

	padding: 53px 0 84px 0;
	text-align: center;

	h3 {
		margin-bottom: 42px;
		text-align: center;
		color: #000;
		font-size: 36px;
		font-weight: bold;
		position: relative;
		z-index: 10;

		a {
			text-decoration: none;
			color: inherit;
		}
	}
	@media screen and (max-width: @breakpointM) {
		padding: 25px 0 25px;
	}
	@media screen and (max-width: @breakpointS) {
		padding: 15px 0;
	}
}
.responses-slider-wrap {
	margin-bottom: 16px;
	padding: 0 60px;
	.bx-prev, .bx-next {
		.transition;
		width: 60px !important;
		height: 60px !important;
		border-radius: 50% !important;
		background: #fff !important;
		background: rgba(255,255,255,.4) !important;
		color: @colorMain !important;
		text-decoration: none !important;
		top: 44px !important;
		margin: 0 !important;
		opacity: .5;
		z-index: 10 !important;

		&:hover {
			opacity: 1;
		}

		&:after {
			.icon;
			position: absolute;
			text-indent: 0px;
			font-size: 60px;
			line-height: 60px;
			text-align: center;
			width: 60px;
			height: 60px;
			top: 50%;
			margin-top: -30px;
			left: 50%;
			margin-left: -30px;
		}
	}

	.bx-prev {
		left: -60px !important;

		&:after {
			content:"\f104";
			text-align: left;
		}
	}

	.bx-next {
		right: -60px !important;
		&:after {
			content:"\f105";
			text-align: right;
		}
	}



	article {

		text-align: left;
		font-size: 15px;
		line-height: 20px;
		width: 100%;
		float: left;

		a {
			.transition;
			text-decoration: none;
			color: #010101;

			&:hover {
				color: @colorMain;
			}
		}


		.img {
			border-radius: 50%;
			width: 130px;
			height: 130px;
			border: 6px solid @colorMain;
			float: left;
			margin-right: 25px;
			overflow: hidden;

			img {
				display: block;
				width: 100%;
				height: 100%;
				border-radius: 50%;
			}

			.noImg {
				width: 100%;
				padding-top: 100%;
				background: #e2e2e2;
				border-radius: 50%;
			}
		}


		.text {
			overflow: hidden;
			padding-right: 10px;
			font-size: 14px;
			line-height: 1.65;

			&:before {
				content: '';
				display: block;
				width: 82px;
				height: 63px;
				background: url(../images/quotes.png);
				float: left;
				margin-right: 16px;
				margin-bottom: 10px;
			}

			&:after {
				content: '';
				clear: both;
			}

			p {
				margin-bottom: .9em;
			}
		}

		.info {
			text-align: right;
			margin-top: 30px;
			color: @colorMain;
			font-size: 14px;
		}
	}
	@media screen and (max-width: @breakpointM) {
		article {
			.img {
				float: none;
				margin: 0 auto 20px;
			}
		}
	}
	@media screen and (max-width: @breakpointS) {
		padding: 0 40px;
		.bx-prev {
			left: -40px !important;
		}
		.bx-next {
			right: -40px !important;
		}
		article {
			.text {
				text-align: center;
				padding-right: 0;
				&:before {
					display: none;
				}
			}
		}
	}
}
.contacts {
	height: 640px;
	overflow: hidden;
	position: relative;

	.map {

		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		z-index: 1;

		.ymaps-image {
			background: url(../images/map-pin.png) !important;
			background-size: 100% 100% !important;
			width: 38px !important;
			height: 62px !important;
			left: -18px !important;
			top: -62px !important;
		}
	}

	.container {
		z-index: 3;
	}

	.feedback {
		width: 371px;
		vertical-align: bottom;
		position: absolute;
		top: 50px;
		left: 14px;

		form {
			background: rgb(241, 241, 241);
			background: rgba(241, 241, 241, 0.85);

			> div {
				width: 100%;
				padding: 0;
				margin-bottom: 10px;
			}

			textarea {
				height: 50px !important
			}

			button {
				margin-top: 9px;
				font-size: 20px;
				padding-left: 5%;
				padding-right: 5%;
				width: 100%;
			}
			.checkbox-lbl {
				margin-left: 0;
				margin-right: 0;
			}
		}
	}
	@media screen and (max-width: @breakpointS) {
		height: auto;
		padding-bottom: 400px;
		.map {
			// position: relative;
			height: 400px;
			top: auto;
			width: auto;
			left: 20px;
			right: 20px;
			bottom: 0;
		}
		.feedback {
			position: relative;
			width: auto;
			top: 0;
			left: 0;
			max-width: 320px;
			margin: 20px auto;
			form {
				button {
					font-size: 18px;
				}
			}
		}
	}
}
@-webkit-keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -50px, 0);
    transform: translate3d(0, -50px, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -50px, 0);
    transform: translate3d(0, -50px, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}


@-webkit-keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 30px, 0);
    transform: translate3d(0, 30px, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 30px, 0);
    transform: translate3d(0, 30px, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}


@-webkit-keyframes zoomInDown {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
    transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
    animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
    transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
  }
}


@keyframes zoomInDown {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
    transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
    animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
    transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
  }
}


@-webkit-keyframes spin {
    from { -webkit-transform: rotate(0deg); }
    to { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
    from {
        transform:rotate(0deg);
    }
    to {
        transform:rotate(360deg);
    }
}


@media screen and (max-width: @breakpointS) {
	.about-img {
		float: none !important;
		margin: 0 auto 20px !important;
		display: block;
	}
}