template.less

@main_font: 'Open Sans', sans-serif;
html {
	height: 100%;
	overflow-y: scroll;
	&.hidden {
		overflow: hidden;
	}
}

input {
	&[type="submit"] {
		background: #373333;
		border: 1px solid #000;
		border-bottom: 2px solid #000;
		border-top: 0;
		font: 600 18px/32px @main_font;
		height: 38px !important;
		top: 1px;
		padding: 0 10px 2px;
		color: #fff;
		border-radius: 6px;
		text-align: center;
	}
}

a.next_step {
	background: #373333;
	border: 1px solid #000;
	border-bottom: 2px solid #000;
	text-align: center;
	text-decoration: none;
	border-top: 0;
	font: 600 18px/36px @main_font;
	height: 38px !important;
	padding: 0;
	color: #fff;
	display: block;
	border-radius: 6px;
}

body {
	height: 100%;
	width: 100%;
	min-width: 1024px;
	position: relative;
	background: url('../images/main_background.png') repeat left top;
	&.under_overlay {
		& > div {
			&.overlay {
				position: fixed;
				z-index: 9990;
				opacity: 0.8;
				background: #999;
				height: 100%;
				width: 100%;
				top: 0;
				left: 0;
				overflow: hidden;
			}
			&.data_wrap {
				position: fixed;
				width: 100%;
				top: 0;
				left: 0;
				height: 100%;
				z-index: 9991;
				outline: medium none !important;
				overflow-x: hidden;
    			overflow-y: auto;
				& > div {
					height: 100%;
					left: 0;
					
					position: absolute;
					text-align: center;
					top: 0;
					width: 100%;
					&:after {
						content: "";
						display: inline-block;
						height: 100%;
						vertical-align: middle;
					}
				& > .data_container {
					display: inline-block;
				    margin: 0 auto;
				    position: relative;
				    text-align: left;
				    vertical-align: middle;
				    width: 100%;
				    z-index: 9993;
				& > .data_checking {
					width: 640px;
					
					background: #f4f4f4;
					overflow: hidden;
					border-radius: 6px;
					//display: inline-block;
					margin: 0 auto;
					position: relative;
					text-align: left;
					vertical-align: middle;
					& > form {
						display: inline-block;
						width: 100%;
						& > div {
							& > span {
								display: inline-block;
								width: 600px;
								padding: 20px;
								font: 24px/24px @main_font;
								border-bottom: 2px solid #e2e2e2;
								background: #fff;
								& > small {
									float: right;
									display: inline-block;
									width: 24px;
									height: 24px;
									cursor: pointer;
								}
							}
							& > ul {
								display: inline-block;
								width: 100%;
								padding: 10px 0 0;
								&.info {
									background: #fff;
									padding: 0;
									border-bottom: 2px solid #e2e2e2;
								}
							}
							&.order {
								& > ul {
									& > li {
										padding: 7px 20px 10px;
										width: 360px;
										float: left;
										& > div {
											&.select {
												font: 14px/22px @main_font;
												margin: 0 0 40px;
												& > div {
													border: 2px solid #e2e2e2;
													border-radius: 4px;
													& > div {
														& > div {
															& > div {
																& > span {
																}
																.jClever-element-select-list-wrapper {
																	border: 2px solid #e2e2e2;
																	border-top: 0;
																	left: -2px;
																}
															}
														}
													}
													&.opened {
														& > div {
															& > div {
																& > div {
																	& > span {
																	}
																}
															}
														}
													}
												}
											}
										}
										& > input {
											&[type="submit"] {
												width: 358px;
												background: #dc3b3b;
												border: 1px solid #a21919;
												border-bottom: 2px solid #a21919;
												margin: 0 0 10px;
											}
										}
										&:first-child {
											width: 200px;
											& > span {
												display: inline-block;
												width: 100%;
												font: 400 24px/36px @main_font;
												margin: 0 0 10px;
											}
											& > div {
												margin: 0;
												& > div {
													float: left;
													border: 0;
													width: 20px;
													height: 20px;
													display: inline-block;
													position: relative;
													top: 6px;
													left: -2px;
												}
												& > label {
													font: italic 400 14px/34px @main_font;
													margin: 0 0 0 25px;
												}
											}
										}
									}
									&.info {
										& > li {
											overflow: hidden;
											& > span {
												margin: 0;
												display: block;
												position: relative;
												height: 34px;
												font: 400 14px/34px @main_font;
												padding: 0 0 0 110px;
												& > span {
													display: inline-block;
													position: absolute;
													left: 0;
													color: #656565;
													font: 300 14px/34px @main_font;
												}
												& > small {
													font: 400 14px/34px @main_font;
												}
												&.full_price {
													color: #dc3b3b;
													font: 30px/20px @main_font;
													padding: 34px 0 0 110px;
													//height: 34px;
													& > small {
														color: #dc3b3b;
														font: 30px/20px @main_font;
													}
												}
											}
											&:first-child {
												width: 198px;
												border-right: 2px solid #e2e2e2;
												& > span {
													font: italic 400 14px/34px @main_font;
													padding: 0;
													& > i {
														display: inline-block;
														width: 20px;
														margin: 0 20px 0 0;
														color: #dc3b3b;
														font-size: 16px;
														&.fa-check {
															color: #33ae30;
														}
													}
												}
											}
										}
									}
								}
								&.info {
									& > ul {
										width: 100%;
										padding: 20px 0;
										& > li {
											width: 600px !important;
											padding: 0 20px !important;
											border: 0 !important;

											padding: 0;
											& > input {
												height: 36px;
												display: block;
												position: relative;
												margin: 20px 0;
												&[type="text"],
												&[type="email"] {
													background: #fff;
													border: 2px solid #ddd;
													border-radius: 6px;
													padding: 0 10px;
													width: 400px;
												}
											}
										}
									}
								}
							}
							&.files {
								& > ul {
									padding: 20px 0;
									& > li {
										padding: 0 20px;
										position: relative;
										& > a {
											display: inline-block;
											position: absolute;
											right: 30px;
											color: #dc3b3b;
											text-decoration: none;
											font: 400 14px/34px @main_font;
										}
									}
									&.info {
										padding: 30px 0 20px;
										& > li {
											margin: 0 0 20px;
											padding: 0 100px 0 80px;
											font: 400 18px/34px @main_font;
											background: url('../images/file_icon.png') no-repeat 30px 3px;
										}
									}
								}
							}
							&.hide {
								display: none;
							}
						}
					}
					input {
						&[type="submit"] {
							width: 358px;
							background: #dc3b3b;
							border: 1px solid #a21919;
							border-bottom: 2px solid #a21919;
							margin: 0 0 10px;
						}
					}
					&.files {
						height: 360px;
						margin: -180px 0 0 -310px;
					}
				}
			}
				
			}	


			}
		}
	}
}
.wrap_all {
	width: 1024px;
	min-height: 100%;
	overflow: hidden;
	margin: 0 auto;
	min-width: 1024px;
	position: relative;
	background: #fff;
	box-shadow: 0 0 8px #999;
	& > header {
		width: 100%;
		height: 178px;
		min-width: 1024px;
		position: relative;
		background: #fff;
		padding: 37px 0 15px;
		& > div {
			width: 944px;
			padding: 0 40px;
			height: 100%;
			margin: 0 auto;
			& > a {
				display: inline-block;
				width: 173px;
				height: 71px;
				background: url('../images/logo.png') no-repeat left top;
				float: left;
				margin: -18px 158px 0 0;
				position: relative;
				& > span {
					position: absolute;
					display: inline-block;
					width: 100%;
					font: 600 16px/16px @main_font;
					color: #dc3b3b;
					bottom: -15px;
					left: 0;
					width: 330px;
				}

			}
			& > section.location {
				width: 570px;
				padding: 0 10px 0 0;
				display: inline-block;
				float: right;
				.current {
					display: block;
				}
				& > a,
				& > span,
				& > div,
				& > div:first-child {
					position: relative;
					display: inline-block;
					width: 250px;
					float: left;
					color: #000;
					font: 400 13px/19px @main_font;
				}
				& > a {
					width: auto;
				}
				& > span {
					margin: 0 80px 0 0;
					top: 2px;
					& > span {
						display: none;
					}
				}
				& > div {
					width: 230px;
					& > span {
						display: none;
						font: 400 30px/48px @main_font;
						color: #dc3b3b;
					}
					& > ul {
						position: absolute;
						& > li {
							display: none;
							width: 100%;
							font: 400 24px/48px @main_font;
							cursor: pointer;
							&.current {
								& > i {
									font-size: 12px;
									position: relative;
									top: -2px;
									color: #dc3b3b;
									margin: 0 0 0 10px;
								}
							}
						}
					}
					&:first-child {
						margin: 0 80px 0 0;
						top: 2px;
						height: 48px;
						& > span {
							color: #000
						}
					}
					&.drop {
						& > ul {
							z-index: 999;
							background: #F2F2F2;
							opacity: 0.8;
							padding: 0 10px 10px;
							left: -10px;
							width: 100%;
							border-radius: 6px;
							& > li {
								display: block;
								& > i {
									display: none;
								}
								&:hover {
									color: #dc3b3b;
								}
								&.current{
									&:hover {
										color: #000;
									}
								}
							}
						}
					}
				}
			}

			& > nav {
				display: inline-block;
				width: 100%;
				height: 40px;
				margin: 67px 0 15px;
				& > ul {
					position: relative;
					height: 100%;
					left: -17px;
					& > li {
						float: left;
						height: 100%;
						margin: 0 0 0 9px;
						& > a {
							display: inline-block;
							padding: 0 17px;
							height: 40px;
							font: 600 18px/38px @main_font;
							color: #000;
							border-radius: 6px;
							text-decoration: none;
							&:hover,
							&.current {
								background: #dc3b3b;
								color: #fff;
							}
						}
						&:first-child {
							margin: 0;
						}
					}
				}
			}
		}
	}
	& > article {
		width: 944px;
		padding: 50px 40px;
		margin: 0 auto;
		height: 100%;
		min-height: 300px; //Удалить
		& > h1,
		& > h2,
		& > h3 {
			color: #000;
			margin: 0 0 20px;
		}
		h1 {
			font: 600 24px/24px @main_font;
			color: #000;
			margin: 0 0 20px;
		}
		h2 {
			font: 600 20px/20px @main_font;
			color: #000;
			margin: 0 0 20px;
		}
		h3 {
			font: 600 16px/16px @main_font;
			color: #000;
			margin: 0 0 20px;
		}
		& > div {
			&.content {
				font: 14px/20px @main_font;
				color: #000;
				padding: 0 0 40px;
				& > * {
					margin: 20px 0;
				}
				& > h1 {
					&:first-child {
						margin: 0 0 20px !important;
					}
				}
				img {
					display: block;
				}
				i.fa-rub {
					font-size: 13px;
				}
				a {
					color: #dc3b3b;
					text-decoration: underline;
					&.button {
						background: #fff;
						border: 2px solid #cb3434;
						border-radius: 6px;
						padding: 8px 10px 10px;
						display: inline-block;
						clear: both;
						color: #cb3434;
						text-decoration: none;
						font: 600 16px/18px @main_font;
						box-shadow: 1px 2px 0 #d49494;
						& > i {
							font-size: 18px;
							//font-weight: bold;
						}
					}
				}
				p {
					margin: 20px 0;
				}
				ul,ol {
					padding: 0 0 0 40px;
					margin: 20px 0;
					list-style: disc;
					& > li {
						margin: 0 0 10px;
						padding: 0 0 0 10px;
					}
					&.round_numbers {
						padding: 0;
						display: inline-block;
						margin: 0;
						& > li {
							list-style: none !important;
							margin: 0 0 30px;
						    padding: 0 20px 0 60px;
						    width: 380px;
						    position: relative;
						    float: left;
							& > small {
								display: inline-block;
								width: 36px;
								height: 36px;
								border-radius: 100%;
								background: #dc3b3b;
								color: #fff;
								font: 600 14px/36px @main_font;
								text-align: center;
								position: absolute;
								left: 0;
								top: 0;
							}
						}
					}
				}
				ol {
					list-style: decimal;
				}
				div.hide {
					display: none;
				}
				table {
					border: 1px solid #999;
					width: 100%;
					td,
					th {
						padding: 10px 20px;
						font: 14px/20px @main_font;
						border: 1px solid #999;
					}
					th {
						//background: #eee;
						font: bold 14px/20px @main_font;
						background: #DC3B3B;
						color: #fff;
						border: 1px solid #eee;
					}
					&.vertical {
						//display: none;
						th {
							text-align: left;
						}
					}
				}
				form {
					display: block;
					input {
						display: block;
						margin: 0 0 20px;
						&[type="text"],
						&[type="email"],
						&[type="password"] {
							background: #fff;
							border: 2px solid #cb3434;
							border-radius: 6px;
							padding: 0 10px;
							width: 276px;
							height: 36px;
							display: block;
							position: relative;
						}
					}
					textarea {
						display: block;
						margin: 0 0 20px;
						background: #fff;
						border: 2px solid #cb3434;
						border-radius: 6px;
						padding: 10px;
						height: 70px;
						font: 14px/14px @main_font;
						resize: none;
						width: 924px;
					}
				}
				& > div {
					&.images {
						width: 924px;
						height: 280px;
						position: relative;
						.item {
							position: relative;
							width: 308px;
							float: left;
							height: 280px;
						}
						a {
							position: absolute;
							display: inline-block;
							color: #999;
							top: 50%;
							margin: -20px 0 0;
							& > i {
								display: inline-block;
								font-size: 38px;
							}
							&:hover {
								color: #DC3B3B;
							}
							&.next {
								right: -15px;
							}
							&.prev {
								left: -15px;
							}
							&.disabled {
								cursor: default;
								& > i {
									display: none;
								}
							}
						}
					}
				}
				& > ul.card_way {
					padding: 0;
					& > li {
						display: inline-block;
						width: 100%;
						margin: 0 0 45px;
						& > span {
							display: block;
							padding: 10px;
							width: 244px;
							height: 156px;
							float: right;
							border: 2px solid #dc3b3b;
							//overflow: hidden;
							border-radius: 6px;
							position: relative;
							margin: 0 250px 0 20px;
							&:after {
								content: " ";
								display: block;
								width: 97px;
								height: 116px;
								background: url('../images/prod_arrow.png') no-repeat right top;
								position: absolute;
								right: -116px;
								top: -30px;


							}
							
							& > img {
								//float: left;
								width: 244px;
								height: 156px;
								//padding: 10px;
								//border: 2px solid #dc3b3b;
								border-radius: 6px;
								overflow: hidden;
								background: #fff;
							}
						}
						& > p,
						& > h2 {
							overflow: hidden;
							text-align: right;
						}
						& > h2 {
							overflow: visible;
							color: #dc3b3b;
						}
						&:nth-child(even) {
							& > span {
								float: left;
								margin: 0 20px 0 250px;
								&:after {
									background: url('../images/prod_arrow.png') no-repeat left top;
									position: absolute;
									right: auto;
									left: -116px;
									top: -30px;


								}
							}
							& > p,
							& > h2 {
								text-align: left;
							}
						}
						&:first-child {
							& > span {
								margin: 0 20px;
								&:after {
									display: none;
								}
							}
							
						}
					}
				}
			}
			&.contacts {
				margin: 0 0 30px;
				display: inline-block;
				width: 100%;
				& > div {
					//background: #fff;
					float: right;
					overflow: hidden;
					border-radius: 6px;
					margin: 0 0 0 20px;
					border: 2px solid #dc3b3b;
					padding: 25px;
					display: inline-block;
					&:first-child {
						margin: 0;
						border-radius: 0;
						border: 0;
						padding: 0;
						float: left;

						& >  {
							//display: inline-block;
							//float: left;

						}
						& > span {
							display: block;
							margin: 0 0 18px;
							& > a {
								font: 600 16px/20px @main_font;
								display: inline-block;
								text-decoration: none;
								border-bottom: 1px dashed #000;
								//float: right;
								margin: 0 0 0 10px;
								color: #000;
								&.current {
									color: #dc3b3b;
									border-bottom: 1px solid transparent;
									
								}
								&:first-child {
									//float: left;
									margin: 0;

								}
							}
						}
						& > a {
							margin: 0 0 20px;
							font: 14px/20px @main_font;
							color: #000;
							display: inline-block;
						}
						& > ul {
							display: none;
							width: 364px;
							//float: left;

							& > li {
								display: inline-block;
								width: 100%;
								font: 14px/20px @main_font;
								color: #000;
								margin: 0 0 18px;
								& > span {
									font: 600 24px/24px @main_font;
									color: #50505d;
								}
								& > h3 {
									margin: 0 0 20px;
								}
								& > img {
									border-radius: 6px;

								}
								& > small {
									display: inline-block;
									font: 10px/20px @main_font;
									color: #dc3b3b;
								}
							}
							&.current {
								display: block;
							}
						}
					}
				}
				& > div {
					background: #fff;
					float: right;
					overflow: hidden;
					border-radius: 6px;
					margin: 0 0 0 20px;
					border: 2px solid #dc3b3b;
					padding: 25px;
					display: inline-block;
					& > img {
						border-radius: 6px;
						overflow: hidden;
						display: none;
						&.current {
							display: inline;
						}
					}

				}
			}
		}
		& > ul {
			&.clients,
			&.news {
				display: inline-block;
				width: 100%;
				& > li {
					display: inline-block;
					width: 934px;
					padding: 20px 10px 20px 0;
					border-top: 1px solid #ededed;
					& > span {
						display: inline-block;
						float: left;
						height: 120px;
						margin: 0 0 0 20px;
						width: 180px;
						&:first-child {
							width: 220px;
							margin: 0;
						}
					}
					//& > span,
					//& > p {
						//width: 180px;
						//margin: 0 0 0 20px;
					//}
					& > p {
						display: inline-block;
						overflow: hidden;
						width: 490px;
						margin: 5px 0 0 20px;
					}
					&:first-child {
						border-top: 1px solid transparent;
					}
				}
			}
			&.news {
				& > li {
					& > h2 {
						display: inline-block;
						width: 100%;
						& > a {
							text-decoration: none;
							color: #DC3B3B;
						}
					}
					& > small {
						display: inline-block;
						width: 100%;
						margin: -10px 0 20px;
						font: 300 14px/14px @main_font;
						color: #000
					}
					& > p {
						width: 100% !important;
						margin: 0;
						font: 600 16px/18px @main_font;
					}
				}
			}
		}
		& > section {
			font: 0px/0px @main_font;
			margin: 0 0 40px;
			&.order {
				display: inline-block;
				width: 944px;
				margin: 30px 0 40px;
				input {
					height: 36px;
					display: block;
					position: relative;
					&[type="text"],
					&[type="email"] {
						background: #fff;
						border: 2px solid #cb3434;
						border-radius: 6px;
						padding: 0 10px;
					}
				}
				& > div {
					& > ul {
						height: 40px;
						margin: -60px 0 50px;
						& > li {
							float: left;
							margin: 0 0 0 20px;
							height: 36px;
							padding: 0 12px;
							cursor: pointer;
							border-radius: 6px;
							border: 2px solid #dfdfdf;
							font: 600 18px/34px @main_font;
							color: #000;
							&.current {
								border: 2px solid #DC3B3B;
							}
							&:first-child {
								margin: 0;
							}
						}
					}
					& > div {
						display: none;
						&.current {
							display: inline-block;
						}
						& > form {
							& > ul.order {
								position: relative;
								width: 936px;
								height: 192px;
								padding: 45px 30px 35px;
								margin: 0 0 0 2px;
								left: -28px;
								background: #dc3b3b;
								border-radius: 10px;
								& > li {
									display: inline-block;
									width: auto;
									float: left;
									margin: -25px 20px 75px 0;
									height: 80px;
									& > label {
										display: block;
										font: 600 14px/48px @main_font;
										color: #fff;
										border: 0 !important;
									}
									& > input {
										height: 36px;
										display: block;
										position: relative;
										&[type="text"],
										&[type="email"] {
											background: #fff;
											border: 2px solid #cb3434;
											border-radius: 6px;
											padding: 0 10px;
											width: 196px;
										}
										&.edition {
											width: 105px;
										}
										&[type="submit"],
										a.next_step {
											width: 208px;
											margin: 48px 0 0;
											float: right;
										}
									}
									a.next_step {
										width: 208px;
										margin: 48px 0 0;
									}
									& > p {
										display: block;
										width: 380px;
										height: 50px;
										border: 2px solid transparent;
										border-radius: 0;
										font: 48px/32px @main_font;
										color: #fff;
										margin: 0;
									}
									&.time {
										position: absolute !important;
										width: 215px !important;
										height: 98px !important;
										right: 0 !important;
										margin: 0 !important;
										top: -39px !important;
										background: url('../images/order_time.png') no-repeat center center;
									}
									&.info {
										position: absolute !important;
										width: 329px !important;
										height: 70px !important;
										left: 10px !important;
										margin: 0 !important;
										top: -26px !important;
										background: url('../images/order_info.png') no-repeat center center;
									}
									&.printing {
										position: absolute !important;
										width: 200px !important;
										height: 95px !important;
										right: 225px !important;
										margin: 0 !important;
										top: -39px !important;
										background: url('../images/order_printing.png') no-repeat center center;
									}
									&.prompt {
										position: absolute !important;
										bottom: 0;
										left: 30px;
										color: #fff;
										font: 10px/30px @main_font; 
										margin: 0 !important;
										width: auto;
										height: auto !important;
									}
								}
							}
						}
						&.easy_form {
							width: 944px;
							padding: 0 29px;
							position: relative;
							left: -29px;
							background: url('../images/easy_form_background.png') no-repeat left 100px;
							& > form {
								& > ul {
									width: 100%;
									display: inline-block;
									margin: 0 0 50px;
									& > li {
										width: 235px;
										float: left;
										height: 75px;
										& > span {
											width: 76px;
											height: 26px;
											border-radius: 30px;
											border: 2px solid #dfdfdf;
											display: block;
											float: left;
											position: relative;
											font-size: 16px;
											cursor: pointer;
											& > i {
												display: inline-block;
												position: relative;
												margin: 4px 0 0 17px;
											}
											& > span {
												float: left;
												height: 22px;
												width: 22px;
												border-radius: 100%;
												background: #dfdfdf;
												margin: 2px;
												display: block;
											}
											&.active {
												border: 2px solid #ededed;
												background: #ededed;
												& > span {
													float: right;
													background: #dc3b3b;
												}
												& > i {
													//margin: 4px 0px 0 0;
												}
											}
										}
										& > small {
											width: 26px;
											height: 26px;
											border-radius: 30px;
											border: 2px solid #dfdfdf;
											display: block;
											float: left;
											position: relative;
											font-size: 16px;
											text-align: center;
											cursor: pointer;
											color: #dc3b3b;
											margin: 0 0 0 10px;
											& > i {
												display: inline-block;
												position: relative;
												margin: 4px 0 0;

											}
											& > span {
												display: block;
												position: absolute;
												border: 2px solid #dfdfdf;
												color: #dfdfdf;
												top: -30px;

												& > i {
													font-size: 10px !important;
													position: absolute;
												}
												& > span {
													border: 2px solid #dfdfdf;
													position: absolute;
													display: block;
												}
												&.fifth_flag {
													border-bottom: 0;
													border-right: 0;
													top: -120px;
													right: -78px;
													width: 90px;
													height: 110px;
													& > i {
														top: -7px;
														right: -5px;
													}
												}
												&.sixth_flag {
													border-bottom: 0;
													border-right: 0;
													top: -155px;
													right: -148px;
													width: 160px;
													height: 145px;
													& > i {
														top: -7px;
														right: -7px;
													}
												}
												&.seventh_flag,
												&.eighth_flag {
													border-bottom: 0;
													border-right: 0;
													border-top: 0;
													top: -130px;
													right: -68px;
													width: 80px;
													height: 120px;
													& > i {
														top: -9px;
														right: 76px;
													}
												}
												&.eighth_flag {
													top: -240px;
													height: 230px;
												}
											}
											&.active {
												border: 2px solid #dc3b3b;
												color: #fff;
												background: #dc3b3b;
												& > span {
													border: 2px solid #dc3b3b;
													color: #dc3b3b;
													& > span {
														border: 2px solid #dc3b3b !important;
													}
													&.third_flag,
													&.fourth_flag {
														& > span {
															border: 0 !important;
															border-bottom: 2px solid #dc3b3b !important;
														}
													}
													&.fifth_flag,
													&.sixth_flag,
													&.seventh_flag,
													&.eighth_flag {
														border-bottom: 0;
														border-right: 0;
													}
													&.seventh_flag,
													&.eighth_flag {
														border-top: 0;
													}
												}
											}
										}
										& > p {
											display: inline-block;
											width: 100%;
											font: italic 18px/24px @main_font;
											color: #000;
											margin: 20px 0 0;
										}
									}
									&.visual_first {
										margin: 0 0 405px;
										& > li {
											& > small {
												& > span {
													//right: -10px;
													border-left: 0;
													border-bottom: 0;
													top: 12px;
													& > i {
														position: absolute;
														bottom: -6px;
														right: -6px;
														font-size: 10px;
													}
													&.first_flag {
														right: -66px;
														width: 56px;
														height: 195px;
													}
													&.second_flag {
														right: -66px;
														width: 56px;
														height: 184px;
													}
													&.third_flag {
														right: -66px;
														width: 56px;
														height: 235px;
														& > span {
															right: -48px;
															width: 46px;
															border: 0;
															border-bottom-width: 2px;
															border-style: solid;
															border-bottom-color: #dfdfdf;
															bottom: 0;
														}
														& > i {
															right: -50px;
															bottom: -4px;
														}
													}
													&.fourth_flag {
														right: -66px;
														width: 56px;
														height: 170px;
														& > span {
															left: 0;
															width: 58px;
															border: 0;
															border-bottom-width: 2px;
															border-style: solid;
															border-bottom-color: #dfdfdf;
															bottom: 0;
														}
														& > i {
															left: -52px;
															bottom: -4px;
														}
													}
												}
											}
										}
									}
									&.order {
										position: relative;
										width: 936px;
										height: 192px;
										padding: 70px 30px 35px;
										margin: 0 0 0 2px;
										left: -28px;
										background: #dc3b3b;
										border-radius: 10px;
										& > li {
											display: inline-block;
											width: auto;
											float: left;
											margin: -25px 18px 75px 0;
											height: 80px;
											//position: relative;
											& > label {
												display: block;
												font: 600 14px/48px @main_font;
												color: #fff;
												& > i {
													font-size: 10px;

												}
												&.error {
													background: #22B77E;

												}
											}
											& > input {
												height: 36px;
												display: block;
												position: relative;
												&[type="text"],
												&[type="email"] {
													background: #fff;
													border: 2px solid #cb3434;
													border-radius: 6px;
													padding: 0 10px;
													width: 196px;
												}
												&.edition {
													width: 105px;
												}
												&[type="submit"] {
													width: 200px;
													margin: 48px 0 0;
												}
											}
											a.next_step {
												width: 200px;
												margin: 48px 0 0;
											}
											& > p {
												display: block;
												width: 360px;
												height: 50px;
												border: 2px solid transparent;
												border-radius: 0;
												font: 48px/32px @main_font;
												color: #fff;
												margin: 0;
											}
											.jClever-element {
												display: inline-block;
												//margin: 0 0 0 10px !important;
												//margin: 0 5px !important;
												.jClever-element-select-list {
													font: 600 14px/24px @main_font;
												}
											}
											& > div {
												&.select {
													//width: 280px;
													position: relative;
													display: inline-block;
													vertical-align: middle;
													//margin: 0 10px;
													& > div {
														width: 100%;
														& > div {
															width: 100%;
															& > div {
																width: 100%;
																& > div {
																	width: 100%;
																}
															}
														}
													}
													&.materials {
														width: 220px;
													}
													&.color {
														width: 140px;
														& > div {
															width: 140px;
														}
													}
												}
											}
										}
									}
								}
								& > div {
									position: relative;
									width: 960px;
									height: 192px;
									padding: 35px 30px;
									margin: 0 0 0 2px;
									left: -28px;
									background: #dc3b3b;
									border-radius: 10px;
								}
							}
						}
						&.fast_form {
							& > form {
								& > ul {
									display: inline-block;
									height: auto;
									& > li {
										width: 100%;
										display: inline-block;
										margin: 0 0 10px 0;
										height: auto;
										& > span {
											font: 600 14px/48px @main_font;
											color: #fff;
											vertical-align: middle;
										}
										& > label {
											margin: 0 0 0 30px;
											&:first-child {
												margin: 0;
											}
										}
										& > small {
											display: inline-block;
											width: 210px;
											margin: 0 10px 0 0;
											& > input {
												display: inline-block;
											}
											& > label {
												font: 600 14px/48px @main_font;
												color: #fff;
												margin: 0 0 0 5px !important;
												position: relative;
												vertical-align: middle;
												border: 0 !important;
											}
											& > .jClever-element {
												display: inline-block;
												vertical-align: middle;
												 & > span {
													& > span {
														text-align: center;
														& > i {
															font-size: 16px;
															color: #000;
															display: none;
															position: relative;
															top: -2px;
															&.show {
																display: inline-block;
															}
														}
													}
												}
											}
										}
										& > input {
											display: inline-block;
											vertical-align: middle;
											margin: 0 10px;
										}
										& > label {
											display: inline-block;
											vertical-align: middle;

										}
										.jClever-element {
											display: inline-block;
											vertical-align: middle;
											.jClever-element-select-list {
												font: 600 14px/24px @main_font;
											}
										}
										& > div {
											&.select {
												position: relative;
												display: inline-block;
												vertical-align: middle;
												margin: 0 10px;
												& > div {
													width: 100%;
													& > div {
														width: 100%;
														& > div {
															width: 100%;
															& > div {
																width: 100%;
															}
														}
													}
												}
												&.materials {
													width: 280px;
												}
												&.type_of_lamination {
													width: 200px;
												}
												&.color {
													width: 80px;
												}
											}
											&.file {
												position: relative;
												display: inline-block;
												vertical-align: middle;
												margin: 0 10px;
												span.jClever-element-file-name {
													font: 14px/36px @main_font;
													color: #000;
												}
											}
										}
										& > a.next_step {
											margin: 28px auto 0;
										}
										& > p.sum {
											margin: 48px 0 0;
											float: left;
										}
									}
								}
							}
						}
						&.ready {
							& > ul {
								width: 960px;
								position: relative;
								left: -20px;
								display: inline-block;
								& > li {
									display: inline-block;
									float: left;
									padding: 0 10px 10px;
									width: 280px;
									margin: 0 0 60px 20px;
									vertical-align: top;
									& > span {
										display: inline-block;
										width: 100%;
										font: 18px/18px @main_font;
										color: #303030;

									}
									& > img {
										display: inline-block;
										max-width: 280px;
										margin: 15px 0 20px;

									}
									& > ul {
										display: inline-block;
										width: 280px;
										padding: 0 10px 0 0;
										margin: 0 0 10px;
										min-height: 64px;
										& > li {
											font: 600 12px/16px @main_font;
											color: #000;
											list-style: none;
											display: inline;
											margin: 0 5px 0 0;

											&:after {
												content: "/";
												display: inline-block;
												margin: 0 0 0 5px;
												color: #DC3B3B;
											}
											&.last {
												&:after {
													content: "";
												}
											}
										}
									}
									& > form {

										& > label {
											display: block;
											font: 14px/24px @main_font;
											color: #303030;
											margin: 0 0 5px;
											& > span {
												display: inline-block;
												width: 15px;
												height: 15px;
												border-radius: 100%;
												background: #e0e0e0;
												text-align: center;
												position: relative;
												top: 5px;
												margin: 0 0 0 10px;
												& > i {
													display: inline-block;
													position: relative;
													font-size: 12px;
													color: #303030;
													top: -5px;
												}
											}
										}
										& > input {
											&[type="text"] {
												width: 56px;
												border: 2px solid #bebebe;
												//border-radius: 6px;
												//height: 22px;
												font: 14px/36px @main_font;
												color: #303030;
												float: left;
												&.error {
													border: 2px solid #DC3B3B;
												}
											}
											&[type="submit"] {
												margin: 15px 0 0;
											}
										}
										& > span {
											display: inline-block;
											width: 180px;
											padding: 0 10px;
											font: 14px/36px @main_font;
											color: #303030;
										}
									}
								}
							}
						}
					}
				}
			}
			&.about {
				width: 924px;
				padding: 0 10px 60px;
				display: inline-block;
				& > ul {
					& > li {
						display: inline-block;
						float: left;
						width: 380px;
						margin: 40px 0 0;
						padding: 0 0 0 80px;
						& > span {
							font: 18px/30px @main_font;
							&:first-child {
								color: #000;
								font: 24px/40px @main_font;
								text-decoration: none;
								display: block;
							}
						}
						&.good_price {
							background: url('../images/good_price_icon.png') no-repeat left top;
						}
						&.equipment {
							background: url('../images/equipment_icon.png') no-repeat left top;
						}
						&.once_we {
							background: url('../images/once_we_icon.png') no-repeat left top;
						}
						&.fast_order {
							background: url('../images/fast_order_icon.png') no-repeat left top;
						}
					}
				}
			}
			&.news {
				width: 924px;
				padding: 0 10px;
				display: inline-block;
				& > ul {
					& > li {
						float: left;
						display: inline-block;
						width: 260px;
						margin: 40px 0 0 46px;
						& > a {
							color: #000;
							font: 600 18px/30px @main_font;
							display: inline-block;
							width: 100%;
							text-decoration: none;
							margin: 0 0 15px;
						}
						& > div {
							width: 278px;
							height: 175px;
							border-radius: 6px;
							border: 1px solid #ddd;
							overflow: hidden;
							margin: 0 0 15px;
						}
						& > span {
							display: inline-block;
							width: 100%;
							font: 14px/20px @main_font;
						}
						&:first-child {
							margin: 40px 0 0;
						}
					}
				}
			}
			&.benefits {
				width: 924px;
				padding: 0 10px 20px;
				display: inline-block;
				& > ul {
					position: relative;
					left: -27px;
					& > li {
						display: inline-block;
						float: left;
						width: 280px;
						height: 330px;
						margin: 40px 0 0 28px;
						padding: 0;
						text-align: center;
						& > * {
							display: inline-block;
						}
						& > span {
							font: 18px/24px @main_font;
							&:first-child {
								width: 200px;
								height: 200px;
								overflow: hidden;
								border: 2px solid #dfdfdf;
								border-radius: 100%;
							}
							&.cool_one {
								background: url('../images/cool_1.png') no-repeat center center;
							}
							&.cool_two {
								background: url('../images/cool_2.png') no-repeat center center;
							}
							&.cool_three {
								background: url('../images/cool_3.png') no-repeat center center;
							}
							&.cool_four {
								background: url('../images/cool_4.png') no-repeat center center;
							}
							&.cool_five {
								background: url('../images/cool_5.png') no-repeat center center;
							}
							&.cool_six {
								background: url('../images/cool_6.png') no-repeat center center;
							}
						}
						& > h2 {
							color: #000;
							font: 24px/40px @main_font;
						}
					}
				}
			}
			&.clients {
				width: 924px;
				padding: 0 10px 20px;
				display: inline-block;
				& > div {
					display: block;
					width: 100%;
					height: 100px;
					margin: 20px 0 20px;
					//overflow: hidden;
					position: relative;

				}
				.item {
					float: left;
					width: 150px;
					height: 100px;
					margin: 0 0 0 3px;

				}
				a {
					position: absolute;
					display: inline-block;
					color: #999;
					top: 50%;
					margin: -20px 0 0;
					& > i {
						display: inline-block;
						font-size: 38px;

					}
					&:hover {
						color: #DC3B3B;
					}
					&.next {
						right: -15px;

					}
					&.prev {
						left: -15px;
					}
					&.disabled {
						cursor: default;
						& > i {
							display: none;

						}
					}

				}


			}
			&.news,
			&.clients,
			&.about,
			&.benefits {
				& > span {
					display: inline-block;
					width: 100%;
					height: 30px;
					text-align: center;
					margin: 0;
					position: relative;
					&:after {
						content: " ";
						position: absolute;
						width: 100%;
						height: 2px;
						background: #ddd;
						z-index: 1;
						top: 15px;
						left: 0;
					}
					& > span {
						display: inline-block;
						font: 24px/30px @main_font;
						color: #000;
						background: #fff;
						position: relative;
						z-index: 2;
						padding: 0 10px;
						& > span {
							text-transform: uppercase;
						}
					}
				}
			}
			&.news {
				& > span {
					&:after {
						content: " ";
						position: absolute;
						width: auto;
						height: 2px;
						background: #ddd;
						z-index: 1;
						top: 14px;
						left: -10px;
						right: -10px;
					}
				}
			}
		}
	}
	& > div.clear_footer {
		width: 100%;
		clear: both;
		height: 290px;
	}
}
footer {
	width: 1024px;
	margin: -290px auto 0;
	min-width: 1024px;
	//height: 200px;
	position: relative;
	background: #f2f2f2;
	padding: 40px 0 50px;
	text-align: center;
	font: 0px/0px @main_font;
	box-shadow: 0 3px 8px #bfbebe;
	& > div {
		width: 944px;
		padding: 0 40px;
		margin: 0 auto;
		min-height: 200px;
		display: inline-block;
		text-align: left;
		& > span {
			display: inline-block;
			width: 40%;
			min-height: 200px;
			float: left;
			color: #000;
			font: 300 14px/30px @main_font;


			& > span,
			& > a {
				display: inline-block;
				width: 100%;
			}

			& > span {
				display: none;
				& > * {
					display: inline-block;
					width: 100%;
					//color: #000
				}
				& > span {
					//color: #000;
					font: 400 30px/48px @main_font;
				}
				& > small {
					//color: #000;
				}
				&.current {
					display: inline-block;
				}
			}

			& > a {
				color: #dc3b3b;
				margin: 0 0 45px;
				font: 400 14px/30px @main_font;
				width: auto;
			}
		}
		& > ul {
			display: inline-block;
			width: 450px;
			min-height: 200px;
			float: right;
			padding: 0 10px 0 0;
			text-align: right;
			position: relative;
			top: -8px;
			& > li {
				width: 220px;
				display: inline-block;
				float: left;
				margin: 0 0 0 0px;
				text-align: left;
				& > a {
					display: inline-block;
					font: 400 18px/48px @main_font;
					color: #000;
					text-decoration: none;
					&:hover {
						color: #dc3b3b;
					}
				}
			}
		}
	}
}

form.call {
	position: absolute;
	width: 300px;
	height: 286px;
	padding: 10px 10px 10px 30px;
	border-radius: 6px;
	background: #DC3B3B;
	display: block;
	right: 20px;
	top: 30px;
	z-index: 9990;
	cursor: default;
	& > span {
		display: inline-block;
		width: 100%;
		font: 16px/24px @main_font;
		color: #fff;
		& > small {
			float: right;
			display: inline-block;
			width: 24px;
			height: 24px;
			cursor: pointer;
			color: #fff;
			font: 24px/24px @main_font;
		}
	}
	& > small {
		display: block;
		position: absolute;
		left: 12px;
		font-size: 10px;
		color: #fff;
		width: 10px;
		height: 10px;
		top: 52px;
		&.phone {
			top: 102px;
		}
	}
	& > input {
		height: 36px;
		display: block;
		position: relative;
		margin: 10px 0;
		&[type="text"] {
			background: #fff;
			border: 2px solid #cb3434;
			border-radius: 6px;
			padding: 0 10px;
			width: 276px;
		}
	}
	& > textarea {
		width: 276px;
		background: #fff;
		border: 2px solid #cb3434;
		border-radius: 6px;
		padding: 10px;
		height: 70px;
		font: 14px/14px @main_font;
		resize: none;
	}
	&.hide {
		display: none;
	}
}

i.error {
	position: absolute;
	display: none;
	padding: 20px;
	border-radius: 6px 6px 6px 0;
	background: #22B77E;
	opacity: 0.8;
	//width: 200px;
	color: #fff;
	font: 600 14px/14px @main_font;
	//top: -10px;
	z-index: 99;
	&.show {
		display: inline-block;
	}
}
input.error {
	border: 2px solid #22B77E !important;
}