@import 'font-awesome.min.css';
@import '../js/fancybox/jquery.fancybox.css';
@import '../js/ui/jquery-ui.min.css';
@import '../js/selectBoxIt/jquery.selectBoxIt.css';
@color_error:#e03c42;
@color_success:#4fad51;
@color_link:#145f86;
@color_text:#212121;
@color_white:#ffffff;
@color_black:#000000;
@color_gray:#cccccc;
@font_base:'Open Sans', sans-serif;
.border_radius(@radius:4px){
	-webkit-border-radius:@radius;
	-moz-border-radius:@radius;
	border-radius:@radius;
}
.box_shadow(@shadow){
	-webkit-box-shadow:@shadow;
	-moz-box-shadow:@shadow;
	box-shadow:@shadow;
}
.transition(@transition){
	-webkit-transition:@transition;
	-moz-transition:@transition;
	-o-transition:@transition;
	transition:@transition;
}
.transform(@transform){
	-moz-transform:@transform;
	-ms-transform:@transform;
	-webkit-transform:@transform;
	-o-transform:@transform;
	transform:@transform;
}
.inline_block{
	display:-moz-inline-stack;
	display:inline-block;
	vertical-align:top;
	zoom:1;
	*display:inline;
}
*{
	font-size:1em;
	font-family:@font_base;
}
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,font,img,ins,
kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,label,legend,caption{
	border:0px;
	margin:0px;
	outline:0px;
	padding:0px;
}
html,body{
	margin:0px;
	padding:0px;
	width:100%;
	height:100%;
}
html{
	overflow-y:scroll;
}
body{
	margin:0;
	padding:0;
	font-family:@font_base;
	font-size:16px;
	line-height:18px;
	font-weight: 300;
	color:@color_text;
	min-width:440px;
}
a{
	color:@color_link;
	text-decoration:underline;
	&:hover{
		text-decoration:none;
	}
}
article{
	p{
		margin-bottom:10px;
		text-align:justify;
	}
	ul,ol{
		margin-left:20px;
		margin-bottom:10px;
	}
	h1,h2,h3{
		margin-bottom:10px;
		line-height:1.2em;
	}
	h1{
		font-size:28px;
	}
	h2{
		font-size:24px;
	}
	h3{
		font-size:20px;
	}
	table{
		margin-bottom:10px;
		border-collapse:collapse;
	}
}
input[type=text],input[type=password],input[type=email],textarea{
	border:1px solid @color_link;
	font-family:@font_base;
	&:focus{
		outline:none;
		box-shadow:inset 0 0 5px fade(@color_link,50%);
	}
}
input[type=submit],input[type=button],button{
	background:@color_link;
	height:32px;
	padding:0 20px;
	border:0px;
	cursor:pointer;
	color:@color_white;
	border-radius: 5px;
	text-transform: uppercase;
	vertical-align: bottom;
	&:hover {
		box-shadow: 0 0 10px rgba(0,0,0,0.5);
		opacity: 0.8;
	}
}
.page_title{
	h1,.h1{
		margin-bottom:10px;
		line-height:1.2em;
		font-size:28px;
		font-weight:bold;
	}
}
.clear{
	clear:both;
}
.left{
	float:left;
}
.right{
	float:right;
}
.mess_err{
	color:@color_error;
	font-weight:bold;
}
.mess_ok{
	color:@color_success;
	font-weight:bold;
}
.wrap{
	width:100%;
	max-width: 1280px;
	margin:0 auto;
	padding: 0 10px;
	box-sizing: border-box;
}
#body{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	min-height:100%;
	min-width:440px;
	height:auto;
}
.top {
	background:@color_link;
	height: 44px;
	position: fixed;
	top: 0;
	display: block;
	z-index: 100;
	width: 100%;
	nav{
		padding: 10px 0px 0px 0px;
		ul{
			color: #fff;
			text-transform: uppercase;
			font-size: 24px;
			li{
				display:inline-block;
				vertical-align:top;
				position:relative;
				line-height:24px;
				margin-left: 30px;
				a{
					display:block;
					//padding:0 20px;
					text-decoration:none;
					color:@color_white;
				}
				&.active a, a:hover{
					color:@color_gray;
				}
				ul{
					position:absolute;
					top:40px;
					left:0;
					z-index:20;
					display:none;
					li{
						display:block;
						a{
							border-bottom:1px solid @color_white;
						}
					}
				}
				&:hover{
					ul{
						display:block;
					}
				}
				&:first-child {
					margin-left: 0px;
				}
			}
			li.phone{
				float: right;
				font-size: 18px;
				span {
					font-size: 24px;
					font-weight: bold;
				}
				&:last-child {
					margin-right: 0px;
				}
			}
			li.forma{
				float: right;
				line-height: 18px;
				button {
					padding: 0;
					background: #ebebeb;
					border-radius: 5px;
					text-transform: uppercase;
					height: 28px;
					a {
						color: @color_link;
						font-size: 14px;
						line-height: 14px;
						padding:0 20px;
					}
				}
			}
		}
	}
}
#catal, #cont
#catal, #cont {
	position: relative; /* важно - для того, чтобы псевдоэлемент позиционировался относительно этого элемента */
	border-top: 44px solid transparent;
	margin-top: -44px;
	-moz-background-clip: padding;
	-webkit-background-clip: padding-box;
	background-clip: padding-box;
}
#catal:before, #cont:before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
}
header{
	position:relative;
	margin-top: 44px;
	height:500px;
	background: url('../images/background-header.jpg') top center no-repeat;
	.logo {
		padding-top: 20px;
	}
	.top_slogan {
		color: #fff;
		line-height: 30px;
		background: rgba(0, 0, 0, 0.5);
		width: 75%;
		box-sizing: border-box;
		padding: 20px;
		display: inline-block;
		margin-top: 70px;
		.site_name {
			font-size: 30px;
			font-weight: bold;
			margin-bottom: 20px;
		}
		.site_text {
			font-size: 24px;
			font-weight: 400;
			a {
				float: right;
				color: #fff;
				margin-top: 20px;
				text-decoration: none;
				border-bottom: 1px solid rgba(255, 255, 255, 0.5);
				&:hover {
					border: none;
					color: #2fc204
				}
			}
		}
	}

}
.page_title, .title {
	color: @color_link;
	text-transform: uppercase;
	font-weight: bold;
	font-size: 30px;
	line-height: 30px;
	text-align: center;
	margin-bottom: 20px;
	padding-top: 20px;
}
#middle{
	height:auto;
	position:relative;
	padding-bottom:20px;
	padding-top:20px;
}
#left{
	float:left;
	width:280px;
	border:1px solid @color_gray;
}
#content{
	//border:1px solid @color_gray;
	position:relative;
	padding:0;
	.colors {
		text-align: center;
		margin-bottom: 10px;
		.title2 {
			font-size: 24px;
			line-height: 24px;
			color: @color_link;
			margin-bottom: 10px;
			h3 {
				font-weight: 400;
			}
		}
		.items {
			.item {
				display: inline-block;
				width: 2rem;
				height: 2rem;
				margin-right: 1rem;
				margin-bottom: .5rem;
				border-radius: 4px;
				&:last-child {
					margin-right: 0;
				}
			}
		}
	}
}
.catalog_filters {
	text-align: center;
	.catalog_filter_item {
		display: inline-table;
		margin-top: 5px;
	}
	.diameter {
		vertical-align: bottom;
		display: inline-table;
		padding: 0 10px;
	}
	.catalog_filters_clean {
		vertical-align: bottom;
		background: #e97e22;
		margin-top: 5px;
		a {
			color: #fff;
			text-decoration: none;
		}
	}
	.catalog_filters_submit {
		margin-top: 5px;
	}
}
.block{
	border:1px solid @color_gray;
	margin:10px;
}
footer{
	position: absolute;
	background: @color_link;
	bottom: 0;
	height: auto;
	width: 100%;
	padding: 15px 0;
	color: #fff;
	font-size: 14px;
	.footer_left {
		float: left;
		.mail {
			a {
				color: #fff;
				font-weight: 400;
			}
		}
	}
	.footer_right {
		float: right;
		text-align: right;
		.phone {
			a {
				font-size: 24px;
				line-height: 28px;
				color: #fff;
				text-decoration: none;
				span {
					font-size: 30px;
					font-weight: bold;
				}
				&:hover {
					color: #cccccc;
				}
			}
		}
		.copy {
			line-height: 12px;
			font-size: 10px;
			margin-top: 12px;
			a {
				color: #fff;
			}
		}
	}
}
.form{
	td{
		padding-bottom:4px;
	}
	input[type=text],input[type=email],input[type=password],textarea{
		width:400px;
		margin-bottom:7px;
	}
	input[type=text],input[type=email],input[type=password]{
		padding:2px 7px;
	}
	input[type=text]#captcha{
		width:70px;
		text-align:center;
	}
	input[type=submit]{
		float:right;
	}
	textarea{
		padding:7px;
		resize:none;
	}
}
.pages{
	padding:20px 0px;
	ul{
		list-style:none;
		text-align:center;
		li{
			display:inline-block;
			margin:0px 5px;
			line-height:20px;
			font-weight:bold;
			a{
				display:inline-block;
				width:20px;
				text-align:center;
				text-decoration:none;
				color:#ffffff;
				background:@color_link;
				.border_radius(50%);
				&:hover{
					background:transparent;
					color:@color_link;
				}
			}
		}
	}
}
.popup_page{
	padding:40px;
}
#color_changer{
	li{
		cursor:pointer;
		border:1px solid @color_text;
		display:inline-block;
		width:20px;
		height:20px;
		margin:0 5px 5px 0;
		vertical-align:top;
		&.active{
			border:1px solid @color_error;
		}
	}
}
#back_top{
	position:fixed;
	bottom:50px;
	right:50px;
	background:@color_link;
	opacity:0.7;
	.transition(1s);
	.border_radius(50%);
	&:hover{
		opacity:1;
	}
	a{
		width:50px;
		height:50px;
		line-height:50px;
		display:block;
		text-align:center;
		font-size:25px;
		color:@color_white;
	}
}
.termins{
	.termins_letter{
		font-size:1.5em;
		line-height:1.6em;
		font-weight:bold;
	}
	.termins_letter_container{
		margin-bottom:1.5em;
		.termin_item{
			width:30%;
			float:left;
			padding-bottom:0.4em;
		}
	}
}
.compare_table{
	width:100%;
	border-collapse:collapse;
	table-layout:fixed;
	tr{
		td{
			padding:7px;
			border-bottom:1px dashed @color_gray;
			border-right:1px dashed @color_gray;
			&:last-child{
				border-right:0px;
			}
		}
	}
	.photo{
		position:relative;
		a{
			text-decoration:none;
		}
		.delete_from_compare{
			display:block;
			position:absolute;
			right:10px;
			top:10px;
			background:@color_link;
			color:@color_white;
			.border_radius;
			padding:2px 4px;
		}
	}
	.name{
		font-weight:bold;
		text-transform:uppercase;
		a{
			text-decoration:none;
			&:hover{
				text-decoration:underline;
			}
		}
	}
	.param{
		font-weight:bold;
	}
}
.gallery{
	ul{
		list-style:none;
		li{
			float:left;
			margin:0 20px 20px 0;
			&:nth-child(4n){
				margin-right:0px;
			}
		}
	}
}
.article_item{
	margin-bottom:20px;
	.article_item_photo{
		float:left;
		width:200px;
	}
	.article_item_text{
		width:770px;
		float:right;
	}
	.article_item_name{
		font-size:18px;
		line-height:20px;
		margin-bottom:10px;
		font-weight:bold;
		a{
			text-decoration:none;
			&:hover{
				text-decoration:underline;
			}
		}
	}
	.date{
		color:@color_gray;
		font-size:12px;
	}
}
aside{
	.article_item{
		.article_item_photo,.article_item_text{
			float:none;
			width:100%;
		}
	}
}
.tabs{
	.tabs_navigation{
		ul{
			list-style:none;
			li{
				display:inline-block;
				vertical-align:top;
				border:1px solid @color_link;
				color:@color_link;
				height:40px;
				line-height:40px;
				padding:0 20px;
				cursor:pointer;
				&.active{
					background:@color_link;
					color:@color_white;
					cursor:default;
				}
			}
		}
	}
	.tabs_content{
		.tab{
			display:none;
			&.active{
				display:block;
			}
		}
	}
}
.form_messages{
	margin-bottom:20px;
	textarea{
		width:100%;
		resize:vertical;
		height:100px;
	}
}
.messages{
	.message_item{
		padding:10px;
		border:1px solid @color_gray;
		margin-bottom:20px;
		.info{
			font-weight:bold;
			margin-bottom:5px;
			span{
				font-style:italic;
				font-weight:normal;
			}
		}
	}
	.message_new{
		background:fade(@color_error,20%);
	}
	.message_item_sys{
		margin-left:70px;
	}
	.message_item_user{
		margin-right:70px;
	}
}
.catalog_limit{
	a{
		display:inline-block;
		vertical-align:top;
		.border_radius(14px);
		margin:0 2px;
		line-height:32px;
		padding:0 15px;
		background:@color_gray;
		text-decoration:none;
		color:@color_text;
		&.active,&:hover{
			color:@color_white;
			background:@color_text;
		}
	}
}
.catalog_sort{
	a{
		display:inline-block;
		vertical-align:top;
		padding-left:15px;
		color:@color_text;
		text-decoration:none;
		&.active,&:hover{
			color:@color_link;
		}
	}
}
@import 'basket.less';
.catalog {
	text-align: center;
	margin-top: 20px;
	.catalog_item {
		display: inline-table;
		position: relative;
		vertical-align: top;
		width: 290px;
		padding: 10px;
		margin: 10px;
		box-sizing: border-box;
		border: 1px solid #a5a4a4;
		height: 453px;
		.catalog_item_photo {
			height: 200px;
			display: table-row;
			.catalog_item_img {
				vertical-align: middle;
				display: table-cell;
			}
		}
		.catalog_item_name {
			font-weight: bold;
			font-size: 18px;
			line-height: 18px;
			color: @color_link;
			margin-bottom: 20px;
			height: 38px;
		}
		.catalog_item_price {
			float: left;
			color: @color_link;
			font-weight: bold;
			font-size: 28px;
			span {
				font-size: 22px;
				font-weight: 400;
			}
		}
		.catalog_price_old {
			float: right;
			color: @color_link;
			font-weight: 300;
			font-size: 22px;
		}
		.catalog_item_filters {
			margin-top: 20px;
			display: inline-block;
			text-align: left;
			width: 100%;
			.filter {
				font-weight: 400;
				line-height: 20px;
				span {
					font-weight: 300;
				}
			}
		}
		.send {
			margin-top: 20px;
			position: absolute;
			bottom: 15px;
			left: 0;
			width: 100%;
			box-sizing: border-box;
		}
	}
}
.block-1 {
	margin-top: 30px;
	p {
		line-height: 20px;
		margin-bottom: 10px;
		text-align:justify;
	}
	.catalog {
		font-size: 18px;
		text-align:justify;
		.item {
			display: inline-block;
			margin-bottom: 20px;
			.photo {
				float: left;
				margin-right: 20px;
			}
			.text {
				.name {
					color: @color_link;
					font-size: 24px;
					line-height: 24px;
					font-weight: 500;
					margin-bottom: 10px;
				}
				.announce {
					p {
						line-height: 24px;
					}
				}
			}
		}
	}
}
.block-2 {
	margin-top: 30px;
	.text {
		p {
			text-align: justify;
			line-height: 20px;
			margin-bottom: 10px;
		}
	}
	.items {
		text-align: center;
		.item {
			display: inline-table;
			.photo {
				display: inline-table;
			}
			.name {
				display: table-cell;
				vertical-align: middle;
				font-size: 18px;
				line-height: 22px;
				font-weight: 500;
				color: @color_link;
				width: 220px;
				text-align: left;
				padding-left: 14px;
			}
		}
	}
}
.block-3 {
	margin-top: 30px;
	.more {
		color: @color_link;
		float: right;
		margin-bottom: 20px;
		a {
			text-decoration: none;
		}
	}
	.instr {
		overflow:hidden;
		.items {
			.item {
				display: inline-block;
				margin-bottom: 20px;
				width: 100%;
				.photo {
					float: right;
					margin-left: 20px;
				}
				.text {
					.name {
						color: #145f86;
						font-size: 24px;
						font-weight: 500;
						margin-bottom: 10px;
					}
					.announce {
						p {
							line-height: 24px;
							margin-bottom: 10px;
							text-align: justify;
						}
					}
				}
			}
		}
	}
}
.block-4 {
	.forma1 {
		text-align: center;
	}
	.forma {
		background: @color_link;
		display: inline-block;
		padding: 20px;
		position: relative;
		max-width: 840px;
		width: 100%;
		box-sizing: border-box;
		.slogan {
			color: #fff;
			font-weight: bold;
			font-size: 24px;
			line-height: 30px;
			padding-bottom: 15px;
		}
		form {
			.inform {
				display: inline-block;
				vertical-align: top;
				width: 49%;
				box-sizing: border-box;
				.fio ,.mail {
					margin-bottom: 5px;
				}
				.phone {
					box-sizing: border-box;
					margin-bottom: 5px;
					input {
						width: 47%;
						float: left;
						margin-bottom: 5px;
					}
				}
				.captcha {
					box-sizing: border-box;
					input {
						width: 45%;
						float: right;
						margin-bottom: 5px;
					}
				}
			}
			.question {
				display: inline-block;
				vertical-align: top;
				width: 49%;
				box-sizing: border-box;
				textarea {
					height: 100px;
					padding: 5px;
					resize: none;
					width: 100%;
				}
			}
			.send {
				margin-top: 20px;
			}
			input {
				padding: 5px;
				width: 97%;
			}
			input[type=submit] {
				background: #fff;
				color: @color_link;
				padding: 0 20px;
				width: auto;
			}
		}
	}
}
#menu_opener {
	display: none;
}
#menu_mobil {
	display: none;
}
@media (max-width: 1070px){
	* {
		box-sizing: border-box;
	}
	body, #body {
		min-width: 100%;
	}
	.top nav {
		padding: 0;
	}
	#menu_mobil {
		display: block;
	}
	#menu {
		display: none;
	}
	#top_menu ul {
		display: none;
	}
	#menu_opener {
		display: block;
		color: #ffffff;
		font-size: 3em;
		text-align: center;
		cursor: pointer;
		height: 40px;
		width: 60px;
		float: right;
	}
	#menu_mobil ul {
		float: right;
		text-align: right;
		background: @color_link;
		padding: 10px;
		li {
			display: block;
			padding-bottom: 5px;
		}
		li.phone {
			float: none;
			margin-right:0;
		}
		li.forma  {
			float: none;
		}
		li:first-child {
			margin-right: 0;
		}
	}
	#menu_opener + ul {
		display: none;
	}
	.block-1 .catalog .item .photo {
		float:none;
	}
	header {
		.top_slogan {
			width: 100%;
			margin-top: 40px;
		}
	}
	.block-4 .forma form .inform .phone input {
		float:none;
		width: 97%;
	}
	.block-4 .forma form .inform .captcha input {
		float:none;
		width: 97%;
	}

}
@media (max-width: 550px){
	.logo img {
		width: 100%;
	}
	.popup_content {
		input[type=text] {
			width: 100%;
		}
		textarea {
			width: 100%;
		}
	}
}
@media (max-width: 450px){
	.photo {
		margin-right: 0px!important;
		img {
			width: 100%;
		}
	}
}
.netznach {
	color: #e32026;
	font-weight: 400;
	margin-top: 20px;
	text-align: center;
}
.selectboxit-disabled {
	display: none;
}
.popup_page h2{
	margin-bottom: 15px
}
#menu_opener{
	font-size: 25px !important; 
    width: 32px !important; 
    padding-top: 10px !important;
}
@media screen and (max-width: 750px) { 
	#menu_mobil ul li {
		padding: 5px 0;
	}
}
@media screen and (max-width: 414px) { 
	.catalog .catalog_item{
		height: auto;
		padding-bottom: 60px;
		width: 100% 
	}
	.catalog{
		padding-right: 20px
	}
	.block-1 .catalog{ padding-right:0 }
	.catalog_filters .diameter{
		display: block;
		    margin: 18px 0 10px;
	}
	input#diameter{
		height: 30px !important;
		width: 70px !important;
	}
}
.catalog p.error{
	color: red;
    font-size: 18px;
    text-transform: uppercase;
    padding-top: 32px;
}
.catalog_price_old strike{
	    color: #999;
}
input#diameter{
	width: 50px !important;
    height: 19px;
    border-radius: 4px;
    border: 1px solid #ccc;
    padding: 5px 5px 5px 10px;
    margin-left: 10px;
}