@color: #e86166;

@font: 'PT Sans', sans-serif;
@fontSec: 'PT Serif', serif;

.gradient(@type; @colors; @dir: 90deg; @prefixes: webkit, moz, ms, o; @index: length(@prefixes)) when (@index > 0) {
	.gradient(@type; @colors; @dir; @prefixes; (@index - 1));
	@prefix  : extract(@prefixes, @index);
	@dir-old : 90 - (@dir);
	background-image: ~"-@{prefix}-@{type}-gradient(@{dir-old}, @{colors})";
	& when ( @index = length(@prefixes) ) {
		background-image: ~"@{type}-gradient(@{dir}, @{colors})";
	}
}

.trn(@duration:.2, @ease:ease-out) {
	-webkit-transition: all ~"@{duration}s" @ease;
	transition: all ~"@{duration}s" @ease;
}

/* 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%;
}
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;
	}
}

@font-face {
    font-family: "ALSRublRegular";
	src: url( "../fonts/rouble-webfont.eot" );
    src: url( "../fonts/rouble-webfont.eot?#iefix" ) format( "embedded-opentype" ),
		 url( "../fonts/rouble-webfont.woff" ) format( "woff" ),
		 url( "../fonts/rouble-webfont.ttf" ) format( "truetype" ),
		 url( "../fonts/rouble-webfont.svg#ALSRublRegular" ) format( "svg" );
}

body {
	color: #181818;
	background: #fff;
	font: 16px/1.5 @font;
	min-width: 960px;
}
html, body{
	height: 100%;
}
.wrapper {
	min-height: 100%;
	padding-bottom: 220px;
	margin-bottom: -220px;
	box-sizing: border-box;
}
.section {
	display: block;
	max-width: 1280px;
	margin: 0 auto;
}
.container {
	width: 950px;
	margin: 0 auto;
}

.btn {
	.trn();
	display: inline-block;
	font: bold 13px/39px @font;
	color: #fff;
	background: url(../images/bg/btn.png) no-repeat 0 0;
	border: 0;
	width: 194px;
	height: 39px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;;
	text-decoration: none !important;
	cursor: pointer;
	text-transform: uppercase;
	text-align: center;
	box-sizing: border-box;
	padding: 0 15px;
	outline: none;
	&:hover {
		opacity: .8;
	}
}
.inline-link {
	color: #2cacb3;
	font-size: 12px;
	text-decoration: none;
	background: -webkit-linear-gradient(left,#2cacb3,#2cacb3 50%,transparent 50%);
	background: linear-gradient(left,#2cacb3,#2cacb3 50%,transparent 50%);
	background-size: 2px 1px;
	background-repeat: repeat-x;
	background-position: 0 1.2em;
	&:hover {
		color: @color;
		background-image: -webkit-linear-gradient(left,#f06569,#f06569 50%,transparent 50%);
		background-image: linear-gradient(left,#f06569,#f06569 50%,transparent 50%);
		background-position: 0 1.2em;
	}
}
.content {
	font: 16px/1.625 @font;
	h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
		margin-bottom: 0.8em;
		font: normal 18px/1.5 @fontSec;
	}
	h6, .h6 { font-size: 18px; }
	h5, .h5 { font-size: 20px; }
	h4, .h4 { font-size: 22px; }
	h3, .h3 { font-size: 26px; }
	h2, .h2 { font-size: 28px; }
	h1, .h1 { font-size: 32px; }

	p {
		margin: 1.5em 0;
	}
	strong, .strong, b, .b {
		font-weight: bold;
	}
	ul, ol {
		margin: 2em 0;
	}
	li {
		margin: .8em 0;
	}
	ul li {
		position: relative;
		&:before{
			content: '';
			background: #181818;
			width: 6px;
			height: 6px;
			border-radius: 50%;
			position: absolute;
			left: -14px;
			top: .75em;
		}
	}
	ol {
		list-style: inside decimal;
	}
	a, .a {
		text-decoration: underline;
		// color: @color;
		&:hover{
			text-decoration: none;
		}
	}
	img {
		max-width: 100%;
	}
	.table-wrap {
		display: block;
		width: 100%;
		overflow: auto;
	}
	table {
		border-collapse: collapse;
		font-size: 14px;
		margin: 2em 0;
		width: 100%;
		tr:hover {
			td {
				background: #eee;
			}
		}
		td {}
		th {
			font-weight: bold;
			text-align: center;
			background: #e8e8e8;
			color: inherit;
			font-size: 18px;
		}
		th, td {
			padding: 10px 15px;
			border: 1px solid #d6d6d6;
		}
		&.table_site {
			td {
				border: none;
				border-bottom: 1px solid #d6d6d6;
			}
		}
	}
}
.header, .footer-top {
	color: #292929;
	.container {
		border-bottom: 1px solid #e8e8e8;
		padding-top: 15px;
		padding-bottom: 15px;
	}
	.col {
		width: 33.333%;
		display: inline-block;
		vertical-align: top;
		text-align: right;
		+ .col {
			text-align: center;
			+ .col {
				text-align: left;
			}
		}
	}
	.slogon {
		color: @color;
		font: 20px/22px @fontSec;
		padding-top: 15px;
		.title {
			font: 27px/27px @font;
			margin-bottom: 20px;
			color: #292929;
		}
		p {
			margin-bottom: 15px;
		}
	}
	.logo {
		display: block;
		padding: 5px 15px;
		text-decoration: none;
		img {
			display: block;
			margin: 0 auto;
		}
	}
	.contacts-block {
		padding-top: 15px;
	}
	.link-callback {
	}
	.email {
		margin-top: 10px;
		a {
			display: block;
			font: 20px/22px @font;
			color: inherit;
			text-decoration: none;
		}
	}
	.phones {
		margin-top: 10px;
		font-size: 25px;
		line-height: 30px;
		p {
			margin-top: 5px;
		}
	}
	.skype {
		font-size: 25px;
		line-height: 30px;
		margin-top: 10px;
		a {
			text-decoration: underline;
		}
	}
}

.nav {
	text-align: center;
	background: #fff;
	li {
		display: inline-block;
		vertical-align: middle;
		+ li:before {
			content: '';
			display: inline-block;
			vertical-align: middle;
			width: 10px;
			height: 56px;
			background: url("../images/bg/menu-sep.png") no-repeat center center;
			margin: 0 10px 0 6px;
		}
		> a, > span {
			.trn();
			display: inline-block;
			vertical-align: middle;
			color: #2f2f2f;
			font-size: 14px;
			line-height: 20px;
			padding: 18px 15px;
			font-weight: bold;
			text-transform: uppercase;
			text-decoration: none;
			> span {
				.trn();
				display: inline-block;
				border-bottom: 1px dotted #2f2f2f;
			}
			&:hover, &.current {
				color: #f06569;
				> span {
					border-color: #f06569;
				}
			}
		}
		&.current {
			> a, > span {
				color: #f06569;
				> span {
					border-color: #f06569;
				}	
			}
		}
	}
	&.fixed {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 100;
		border-bottom: 1px solid #e8e8e8;
		width: 100%;
		max-width: 100%;
		&.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);
				}
			}
		}
	}
}

.main-slider {
	background: #f6f4f5;
	.slide {
		display: block;
		height: 408px;
		background-size: cover;
		background-position: center center;
		position: relative;
	}
	.slide-text-wrapper {
		position: absolute;
		width: 660px;
		left: 50%;
		margin-left: -330px;
		height: 160px;
		bottom: -55px;
		text-align: center;
		display: table;
		&:before {
			content: "";
			position: absolute;
			top: 50%;
			bottom: 0px;
			left: 30px;
			right: 30px;
			-webkit-box-shadow: 0 0 30px rgba(0,0,0,0.6);
			box-shadow: 0 0 30px rgba(0,0,0,0.6);
			border-radius: 100% / 80px;
		}
		.slide-text {
			display: table-cell;
			vertical-align: middle;
			padding: 20px 60px;
			position: relative;
			z-index: 5;
			background: #fff;
			border-radius: 20px;
			-webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2);
			box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2);

			color: @color;
			font: italic 32px/40px @fontSec;
		}
	}
	.slick-list {
		padding-bottom: 75px;
	}
	.slick-arrow {
		.trn();
		bottom: 20px;
		left: 50%;
		position: absolute;
		display: block;
		width: 60px;
		height: 160px;
		background: none;
		overflow: hidden;
		outline: none;
		border: none;
		z-index: 10;
		text-indent: 9999px;
		text-align: left;
		cursor: pointer;
		&:hover {
			opacity: .8;
		}
		&:after {
			content: '';
			position: absolute;
			top: 50%;
			margin-top: -19px;
			width: 37px;
			height: 37px;
			background: url(../images/bg/prev-next.png) no-repeat;
		}
		&.slick-prev {
			margin-left: -329px;
			&:after {
				background-position: center left;
				left: 10px;
			}
		}
		&.slick-next {
			margin-left: 271px;
			&:after {
				background-position: center right;
				right: 10px;
			}
		}
	}
	&-wrapper {
		position: relative;
	}
	&-form {
		position: absolute;
		left: 50%;
		margin-left: 345px;
		background: rgba(255,255,255,.7);
		top: 5px;
		padding: 0 20px;
	}
}
.col60 {
	width: 60%;
}
.section-title {
	font: 36px/40px @fontSec;
	text-align: center;
	color: @color;
	margin-bottom: 50px;
}

.section-prices {
	background: #f6f4f5;
	padding: 30px 0 50px;
	table {
		background: #fff;
	}
}

.section-list {
	background: url(../images/bg/side2.jpg) no-repeat top center / cover;
	padding: 40px 0 10px;
	.section-title {
		color: inherit;
		margin-bottom: 10px;
	}
	.col60 {
		background: rgba(255,255,255,.3);
		box-shadow: 0px 0px 0px 20px rgba(255,255,255,.3);
	}
}

.section-offers {
	background: #f6f5f5;
	padding: 70px 0 40px;
	.gallery-item a {
		border-radius: 50%;
		overflow: hidden;
	}
}

.gallery {
	> div {
		margin-left: -25px;
	}
	.gallery-item {
		display: inline-block;
		vertical-align: top;
		width: 300px;
		margin-left: 25px;
		margin-bottom: 20px;
		a {
			display: block;
			text-decoration: none;
		}
		img {
			max-width: 100%;
			display: block;
			margin: 0 auto;
		}
	}
	.title {
		font: 24px/28px @font;
		margin-top: 15px;
		margin-bottom: 10px;
		text-align: center;
	}
}

.section-why {
	background: url(../images/bg/side7.jpg) no-repeat top center / cover;
	padding: 40px 0 10px;
	.section-title {
		margin-bottom: 10px;
	}
	.col60 {
		background: rgba(255,255,255,.3);
		box-shadow: 0px 0px 0px 20px rgba(255,255,255,.3);
	}
}

.section-contacts {
	.section-title {
		padding: 100px 0 70px;
	}
	.section-contacts-content {
		position: relative;
		background: #e6f5f6;
		padding: 100px 0 100px;
		.corner-top {
			display: block;
			width: 64px;
			height: 32px;
			background: #fff;
			overflow: hidden;
			position: absolute;
			top: 0;
			left: 50%;
			margin-left: -32px;
			&:before, &:after {
				content: '';
				width: 64px;
				height: 64px;
				background: #e6f5f6;
				border-radius: 50%;
				position: absolute;
				top: 0;
			}
			&:before {
				right: 50%;
			}
			&:after {
				left: 50%;
			}
		}
		&:before {
			content: '';
			position: absolute;
			width: 294px;
			height: 294px;
			border-radius: 50%;
			top: 50%;
			left: 50%;
			margin: -147px 0 0 -147px;
			background: url("../images/bg/phone.jpg") no-repeat center center;
		}
		.col {
			display: inline-block;
			width: 50%;
			vertical-align: top;
			box-sizing: border-box;
			text-align: center;
			padding-right: 200px;
			+ .col {
				padding-right: 0;
				padding-left: 200px;
			}
		}
		.content {
			font-size: 20px;
			h3, .h3 {
				font-size: 32px;
			}
		}
	}
}

.form {
	text-align: center;
	.title {
		color: #2b2b2b;
		font-size: 28px;
		line-height: 30px;
		margin-bottom: 20px;
	}
	.inp {
		margin-bottom: 15px;
	}
	input, textarea {
		.trn();
		display: block;
		width: 100%;
		border: 1px solid #c9c9c9;
		padding: 5px 10px;
		font: 18px/24px @font;
		text-align: center;
		border-radius: 15px;
		box-sizing: border-box;
		&::-webkit-input-placeholder {color: #dfdfdf;}
		&:-moz-placeholder {color: #dfdfdf;}
		&:focus {
			outline: none;
			border: 1px solid #2cacb3;
			box-shadow: 0 0 0 2px rgba(44, 172, 179, 0.2) inset;
		}
	}
	textarea {
		height: 120px;
	}
	.btn {
		margin-top: 25px;
	}
}

.mdl-message {
	font: 22px/20px @fontSec;
	text-align: center;
	color: @color;
}
.mdl {
	border-radius: 25px;
}

.mdl-container {
	padding: 25px 25px;
	min-width: 300px;
}

.footer-top {
	.container {
		border-bottom: 0;
	}
}
.footer-bottom {
	text-align: center;
	.container {
		padding-top: 20px;
		padding-bottom: 20px;
		border-top: 1px solid #e8e8e8;
	}
	.col {
		display: inline-block;
		width: 50%;
		text-align: left;
		+ .col {
			text-align: right;
		}
	}
	.dev {
		color: #999;
		font-size: 12px;
	}
	.partners {
		margin-bottom: 15px;
	}
}

.section-content {
	padding: 50px 0 30px;
}

.news {
	.news-container {
		margin-left: -25px;
	}
	article {
		display: inline-block;
		vertical-align: top;
		width: 300px;
		margin-left: 25px;
		background: #f6f4f5;
		padding: 15px;
		box-sizing: border-box;
		margin-bottom: 25px;
		.img {
			margin-left: -15px;
			margin-right: -15px;
			margin-top: -15px;
			margin-bottom: 15px;
			img {
				width: 100%;
			}
		}
	}
}