@max-width: 1280px;
@min-width: 1024px;
@img: '../img/';
@color-blue:#0003c7;
@color-red:#cc0000;

/* Reset */
body {
	line-height: 1;
	margin: 0;
	padding: 0;
	font-family: 'PT Sans Narrow',sans-serif;
	font-weight: normal;
}

div, p, ul, li {
	margin: 0;
	padding: 0;
}

h1,h2,h3,h4,h5,h6 {
	margin: 0;
	padding: 0;
}

a {
	text-decoration: none;
}

ul {
	list-style: none;
}

p {
	font-size: 18px;
	line-height: 24px;
	margin-top: 24px;
	font-family: serif;
}
/* END Reset */

/* forms */
	input.warning,
	textarea.warning {
		border:1px solid red;
	}
/* END forms */

/* Heads */
h1 { color: #ffffff;
	font-size: 60px;
	font-family: serif; }

h2 { font-size:48px; font-family: serif;  }
h2.medium { font-size: 36px;
			line-height: 48px; }

h3 { font-size: 30px; }
h4 { font-size: 24px; font-family: serif; }
h5 { font-size: 18px; }
h6 { font-size: 16px;
	 font-weight: normal; }
/* END Heads */

.uppercase { text-transform: uppercase; }

.linear-gradient(@position, @from, @to) {
	background: -webkit-linear-gradient(@position, @from, @to);
	background: linear-gradient(@position, @from, @to);
	background: -o-linear-gradient(@position, @from, @to);
	background: -moz-linear-gradient(@position, @from, @to);
}

.logo {
	text-align: center;
	color: #ffffff;
	line-height: 25px;
	&>h3 {
		a {
			font-family: Regata-Normal;
			font-style: normal;
			font-weight: normal;
			text-shadow: 1px 1px 5px #000;
			color:#ffffff;
		}
	}
	&>h6 {
		&.bottom {
			font-family: serif;
		}
	}
}

/* Catalog icon */
.icat {
	background: url('@{img}catalog-sprite.jpg') no-repeat center center;
	width: 90px;
	height: 60px;
	margin: auto;
}

.icat-generate(@n, @posX) when (@n > 0) {
	.icat-generate((@n - 1), (@posX - 90));
	.icat-@{n} { .icat; background-position: -@posX 0;}
}
.icat-generate(10, 810px);

.icatm {
	background: url('@{img}catalog-sprite-med.jpg') no-repeat;
	width: 270px;
	height: 180px;
	margin: 12px auto 12px auto;
	box-shadow: 0px 0px 22px -5px #000000;
}

.icatm-generate(@n, @posX) when (@n > 0) {
	.icatm-generate((@n - 1), (@posX - 270));
	.icatm-@{n} { .icatm; background-position: -@posX 0;}
}
.icatm-generate(10, 2700px);

.icon {
	display: block;
	width: 24px;
	height: 24px;
	background-position:center;
	background-repeat: no-repeat;
	background-image: url('@{img}icon.png');

	&-phone {
		background-position: 0 0;
	}

	&-dot {
		background-position: -24px 0;
	}

	&-mail {
		background-position: -48px 0;
	}
}

/* END Catalog icon */

.icon-why {
	display: block;
	width: 62px;
	height: 62px;
	background-position:center;
	background-repeat: no-repeat;
	background-image: url('@{img}why-icon.png');

	&-human {
		background-position: 0 0;
	}

	&-shield {
		background-position: -62px 0;
	}

	&-work {
		background-position: -124px 0;
	}
}

.fadeIn {
	-webkit-transition: opacity 0.2s;
	transition: opacity 0.2s;

	opacity: 1 !important;
}

.blocks {
	.block {
		float: left;
		.sub-block {
			float: left;
		}
	}
}

.float {
	&-left {
		float: left;
	}

	&-right {
		float: right;
	}
}

.img {
	margin: 10px;
	border:4px solid #ffffff;
	box-shadow: 1px 1px 3px #000000;
}

.bordered {
	border: 4px solid #ffffff;
	background: #ffffff;
	&>div {
		border: double @color-blue;
		padding: 9px;
	}
}

.redbutton {
	display: block;
	border: 1px solid #990000;
	height: 34px;
	width: 370px;
	color: #ffffff;
	font-size: 16px;
	border-radius: 24px;
	padding-top: 14px;
	text-align: center;
	margin: auto;
	text-shadow: 1px 1px 3px #000;
	.linear-gradient(top, #d43f3f, #cc0101);

	&:hover {
		.linear-gradient(top, #e15252, #db0101);
	}

	&:active {
		.linear-gradient(top, #b10000, @color-red);
	}
}

/* Site Conteiner */
div.container {

	/* Header block */
	div.header {
		background: url('@{img}header.jpg') no-repeat center top #d9d9d9;
		min-height: 722px;

		div.menu-top {
			height: 48px;
			width: 100%;
			background: url('@{img}top-menu-bg.jpg') repeat-x;

			&>ul {
				width: 986px;
				overflow-x: hidden;
				margin: auto;

				li {
					float: left;
					margin-top: 14px;
					margin-right: 14px;
					margin-left: 14px;

					&>a {
						color: #333333;
						text-transform: uppercase;
						font-size: 16px;
						&:hover, &.active {
							text-decoration: underline;
							color: @color-red;
						}
					}

					div.logo {
						width: 398px;
						height: 142px;
						background: url('@{img}logo-bg.png') no-repeat center;
						padding-top: 40px;
						margin-top: -14px;
						position: relative;
					}
				}
			}
		}

		&>div.address {
			width: 986px;
			height: 76px;
			background: url('@{img}top-address-bg.png') no-repeat center;
			background-size: 100% 100px;
			color: #ffffff;
			padding-top: 27px;
			line-height: 21px;
			margin: auto;

			.icon {
				float: left;
			}

			&>div.blocks {
				overflow: hidden;
				padding: 0px 33px;
				&>div.block {
					p { margin:0;
						font-size: 16px; }
				}

				div.center { width: 398px; }
				div.left { width: 267px; text-align: right;}
				div.right { width: 156px; text-align: right; }
			}


		}

		&>div.text {
			position: relative;
			top: 55px;

			div.label {
				height: 48px;
				width: 770px;
				color: #333333;
				background: url('@{img}label.png') repeat-x center;
				margin: auto;
				text-align: center;
				&>h4 { font-weight: normal; }
			}

			&>h1 {
				margin: auto;
				width: 615px;
			}

		}

		&>div.catalog-menu-top {
			height: 216px;
			margin: auto;
			position:relative;
			top:95px;
			min-width: @min-width;
			max-width: @max-width;
			border: 4px solid @color-blue;

				ul.items {
					display: block;
					position: relative;
					height: 100%;
					margin: 0 1px;

					& li:first-child {
						a {
							div.text { border-left: double #ffffff; }
							div.image { border-left: double @color-blue; }
						}
					}

					& li:last-child {
						a {
							div.text { border-right: double #ffffff; }
							div.image { border-right: double @color-blue; }
						}
					}


					li {
						float: left;
						width: 10%;
						display: block;
						height: 100%;

						a {
							display: block;
							height: 100%;

							div.text {
								background: @color-blue;
								border-top: double #ffffff;
								height: 55px;
								padding: 30px 0;
								span {
									font-size: 13px;
									color: #ffffff;
									display: block;
									text-transform: uppercase;
									line-height: 24px;
									width: 90px;
									margin: auto;
									text-align:center;

								}
							}

							&>div.image {
								border-bottom: double @color-blue;
								height: 77px;
								padding-top: 17px;
							}
						}

						&:hover {

							a {
								border: 4px solid @color-red;
								position: relative;
								margin: -5px;
								padding: 1px 1px 0px;

								div.text {
									span { text-decoration: underline; }
									border-top: double @color-red;
									border-left: double @color-red;
									border-right: double @color-red;
								}

								&>div.image {
									border-bottom: double @color-red;
									border-left: double @color-red;
									border-right: double @color-red;
								}

							}

							&:first-child {
								a {
									div.text { padding-left: 3px; }
									&>div.image {	padding-left: 3px; }
								}
							}

							&:last-child {
								a {
									div.text { padding-right: 3px; }
									&>div.image { padding-right: 3px; }
								}
							}

						}
					}

				}

		}
	}
	/* End Header block */

	/* Content block */
	div.content {
		div.about {
			background: url('@{img}about-bg.png') no-repeat center;
			height: 520px;
			text-align: center;
			padding-top: 50px;
			min-width: @min-width;
			max-width: @max-width;
			margin: auto;

			&>div.blocks {
				overflow: hidden;
				margin: 33px 0 0 0;
				&>div.block {
					float: left;
					width: 33%;
					line-height: 24px;
					&>div {
						text-align: justify;
						font-size: 18px;
						width: 240px;
						margin: auto;
					}

					&>div.bordered {
						width: 370px;
						&>div {
							height: 250px;
							&>div.description {
								font-size: 18px;
								width: 310px;
								margin: auto;
								line-height: 24px;
								text-transform: uppercase;
								margin-top: 30px;
								text-align: center;
							}

							&>div.address {
								margin-top: 33px;
								text-align: center;
								a {
									font-size: 24px;
									font-style: italic;
									text-decoration: underline;
									color: @color-blue;
									font-family: serif;
								}
								span.icon {
									float: left;
								}
							}
						}
					}
				}
			}
		}

		div.why {
			background: url('@{img}/why-bg.jpg') repeat-x;
			width: 100%;
			height: 528px;

			div.why-content {
				margin: auto;
				max-width: @max-width;
				min-width: @min-width;
				line-height: 24px;
				div.left {
					float: left;
					width: 70%;
					margin: 15px 0 0 0;
					&>div.container{
						h2.medium {
							position: relative;
							top: -65px;
						}
							max-width: 850px;
							min-width: 640px;
							margin: 0 auto;
						&>div.blocks {
							overflow: hidden;
							margin: 50px 0 0 0;
							&>div.block {
								float: left;
								width: 25%;
								margin: 0 4%;
								h4 {
									margin: 10px 0 0 0;
									height: 73px;
								}
								p {
									font-size: 18px;
									margin: 20px 0 0 0;
									text-align: justify;
								}
							}
						}
					}
				}

				div.right {
						float: left;
						width: 30%;
					&>div.container {
						padding-top: 50px;
						background: #f2f1ef;
						height: 478px;
						position: relative;
						width: 270px;

						h5 {
							text-align: center;
						}

						div.consultant-icon {
							width: 132px;
							height: 132px;
							background: url('@{img}consultant-icon.png') no-repeat;
							margin: 52px auto 0 auto;
						}

						div.info {
							text-align: center;
							width: 155px;
							margin: 10px auto 0 auto;
						}

						div.phone {
							&:extend(h4);
							text-align: center;
							font-size: 24px;
							line-height: 30px;
							margin: 24px auto 0 auto;
							div.small {
								font-size: 18px;
							}
						}

						div.mail {
							width: 155px;
							margin: auto;
							&>span {
								float: left;
							}

							&>a {
								font-style: italic;
								text-decoration: underline;
								font-size: 18px;
								padding-left: 10px;
							}
						}
					}
				}
			}
		}

		div.brend {
			max-width: @max-width;
			min-width: @min-width;
			padding-top: 50px;
			margin: auto;
			div.head {
				text-align: center;
			}
			div.slide {
				margin-top: 45px;
				overflow: hidden;
				div.items {
					float: left;
					position: relative;
					overflow: hidden;
					width: 75%;
					height: 123px;
					&>ul {
						width: 1055px;
						position: absolute;
						li {
							float: left;
							line-height: 123px;
							margin: 0 1%;
							&>img {
								vertical-align: middle;
							}
						}
					}
				}

				div.control {
					width: 62px;
					height: 62px;
					float: left;
					background: url('@{img}slide-control.png') no-repeat;
					margin: 30px 30px 0 30px;
					&-left {
						background-position: 0 0;
						&:hover {
							background-position: 0 -63px;
						}
					}
					&-right {
						background-position: -63px 0;
						&:hover {
							background-position: -63px -63px;
						}
					}
				}
			}
		}

		&>div.catalog-block {
			clear: both;
			max-width: @max-width;
			min-width: @min-width;
			margin: 72px auto;
			h6,h2 {
				text-align: center;
			}
			div.blocks {
				background: url('@{img}/catalog-bg.png') no-repeat center center;
				min-width: @min-width;
				max-width: @max-width;
				height: 770px;
				margin: 48px auto;
				padding: 48px 0;
				div.block {
					width: 100%;
					height: 277px;
					float: none;

					div.sub-block {
						width: 25%;
						overflow: hidden;
						a {


							span {
								width: 270px;
								margin: auto;
								display: block;
								font-size: 20px;
								text-transform: uppercase;
								text-decoration: underline;
								color: @color-blue;
							}
						}
					}

					div.catalog-info {
						width: 50%;
						div.text {
							text-align: left;
							font-size: 18px;
							line-height: 24px;
							padding: 0px 58px;
						}
						div.phone {
							text-align: center;
						}
					}

				}
			}
		}

		div.gallery {
			height: 384px;
			background: url("@{img}why-bg.jpg") repeat-x;
			width: 100%;
				div.blocks {
					max-width: @max-width;
					min-width: @min-width;
					margin: auto;
					padding: 25px 0 0 0;
					overflow: hidden;
					div.block {
						width: 40%;
						margin: 0 5%;
						a.redbutton {
							margin: 10px 0 0 0;
							width: 250px;
						}
					}
				}

		}
	}
	/* End content block */
	/* Footer block */
	div.footer {
		height: 615px;
		width: 100%;
		background: url('@{img}/footer-bg.jpg') no-repeat center center;
		div.contacts {
			max-width: @max-width;
			min-width: @min-width;
			overflow: hidden;
			margin: auto;
			div.blocks {
				div.block {
					min-height: 200px;
					margin-top: 48px;
					div.bordered {
						width: 270px;
						margin: auto;
						&>div {
							height: 267px;
							padding: 37px;
						}
					}

					a { text-decoration: underline; }

					h6 { line-height: 24px;
						text-align: center; }
					h2 { line-height: 48px;
						text-align: center; }
				}

				div.side { width: 30%; }
				div.center { width: 40%; }
			}
		}

		div.menu-bottom,
		div.menu-bottom2 {
			div.logo {
				width: 370px;
				height: 110px;
				background: url('@{img}/logo-bottom-bg.png') no-repeat;
				margin: auto;
				position: relative;
				bottom: -20px;
				padding: 30px 0 0 0;
			}

			background: url('@{img}/menu-bottom-bg.png') repeat-x bottom;

			div.menu-line {

				max-width: @max-width;
				min-width: @min-width;
				height: 72px;
				margin: auto;

				ul {
					position: relative;
					overflow: hidden;
					top: 27px;
					li {
						float: left;
						width: 20%;
						text-align: center;
						a {
							font-size: 18px;
							text-transform: uppercase;
							color:#ffffff;
							&:hover, &.active  {
								text-decoration: underline;
								color: @color-red;
							}
						}
					}
				}
			}
		}
	}
	/* End footer block */
}


form.feedback {
	margin-top: 15px;
	&>table {
		td {
			padding: 5px;
			label {
				font-size: 14px;
			}

			input {
				height: 24px;
				width: 270px;
			}

			textarea {
				width: 370px;
				height: 100px;
			}

			input[type=submit] {
				height: 34px;
				padding: 0;
				width: 170px;
				margin:0;
			}


		}
	}
}