.transition(@target: all, @duration: 400ms, @type: ease, @delay: 0s) {
	-webkit-transition: @target @duration @type @delay;
	-moz-transition: @target @duration @type @delay;
	-ms-transition: @target @duration @type @delay;
	-o-transition: @target @duration @type @delay;
	transition: @target @duration @type @delay;
}

.box-sizing {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

.cover {
	background-size: cover;
	background-position: center center;
}

.contain {
	-webkit-background-size: contain;
	-moz-background-size: contain;
	-o-background-size: contain;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}

.clear {
	clear: both;
}

.clear-fix {
	&:after {
		content: '';
		display: table;
		clear: both;
	}
}

.no-select {
	-webkit-user-select: none;
	-moz-user-select: none;
	-webkit-user-select: none;
}

.border-radius( @value: 1000px ) {
	-webkit-border-radius: @value;
	border-radius: @value;
	-webkit-background-clip: padding-box; 
	-moz-background-clip: padding; 
	background-clip: padding-box;
}

/**/

@red: #F55249;

.image-preloader {
	position: absolute;
	width: 200px;
	height: 200px;
	left: -200%;
	top: -200%;
}

.preloader {
	position: fixed;
	z-index: 3;
	width: 100%;
	height: 100%;
	left: 0px;
	top: 0px;
	display: none;
	background-color: #ffffff;
	
	.line {
		@w: 200px;
		@h: 10px;
		@c: @red;
		
		position: absolute;
		width: @w;
		height: @h;
		margin-left: -@w / 2;
		margin-top: -@h / 2;
		left: 50%;
		top: 50%;
		background-color: lighten(@c, 30%);
	
		.bar {
			width: 0%;
			height: 100%;
			background-color: @c;
		}
	}
	
	&.shown {
		display: block;
	}
}

.start {
	padding-top: 50px;
	padding-bottom: 30px;

	.container {
		position: relative;
		width: 800px;
		margin: 0 auto;
		height: 350px;
	}
	
	.some(@x: 0, @y: 0, @w: 0, @h: 0) {
		position: absolute;
		width: @w;
		height: @h;
		left: @x;
		top: @y;
	}
	
	.one {
		.some(@w: 100%, @h: 50px);
		text-align: center;
		font-family: 'trivia-serif';
		font-size: 24px;
		line-height: 50px;
	}
	
	.two {
		.some(@y: 50px, @w: 100%, @h: 50px);
		text-align: center;
		font-family: 'oukwat-regular';
		font-size: 44px;
		line-height: 50px;
	}
	
	.three {
		.some(@y: 130px, @w: 300px, @h: 200px);
		font-family: 'oukwat-regular';
		font-size: 18px;
		line-height: 34px;
	}
	
	.four {
		.some(@x: 300px, @y: 130px, @w: 500px, @h: 200px);
		font-family: 'trivia-grotesk';
		font-size: 16px;
		line-height: 24px;
	}
}

.action {
	.container {
		width: 1200px;
		margin: 0 auto;
	
		.workspace {
			@s_width: 1192px;
			@s_height: 1339px;
			@l_width: 349px;
			@l_height: 593px;
			@max_zindex: 299792458;
			
			position: relative;
			z-index: 2;
			width: @s_width;
			height: @s_height;
			overflow: hidden;
			margin: 0 auto;
			
			.panel {
				z-index: @max_zindex;
				position: absolute;
				width: 480px;
				height: 140px;
				top: 50px;
				right: 0px;
				
				&.wait {
					background-image: url(../images/load.gif);
					background-repeat: no-repeat;
					background-position: center center;
				
					.print, .social, .download {
						display: none;
					}
				}
				
				.print {
					background-color: @red;
					padding: 15px 30px;
					color: #ffffff;
					font-size: 36px;
					cursor: pointer;
					float: left;
					font-family: 'Futura';
					margin-bottom: 20px;
					.border-radius(5px);
					
					&:hover {
						background-color: darken(@red, 5%);
					}
				}
				
				.download {
					display: none;
					float: left;
					margin-top: 23px;
					margin-left: 30px;
					font-family: 'Futura';
					font-size: 18px;
					color: red;
					border-bottom: 1px dashed @red;
					padding: 1px 0px;
					
					&.shown {
						display: block;
					}
					
					&:hover {
						color: #000000;
						border-color: #000000;
					}
				}
				
				.social {
					cursor: pointer;
					float: left;
					width: 150px;
					height: 45px;
					background-image: url(../images/btnShare.png);
					background-repeat: no-repeat;
					margin-right: 15px;
					.border-radius(5px);
					
					&.fb {
						background-position: 0px 0px;
						
						&:hover {
							background-position: 0px -46px;
						}
					}
					
					&.tw {
						background-position: -165px 0px;
						margin-right: 0px;
						
						&:hover {
							background-position: -165px -46px;
						}
					}
					
					&.vk {
						background-position: -330px 0px;
						
						&:hover {
							background-position: -330px -46px;
						}
					}
				}
			}
			
			.list {
				z-index: @max_zindex;
				position: absolute;
				width: 300px;
				height: 450px;
				top: 50%;
				right: 50px;
				margin-top: -225px;
				overflow: hidden;
				.no-select;
				.border-radius(5px);
				
				.controller {
					@w: 33px;
					@h: 20px;
				
					height: 50px;
					cursor: pointer;
					background-color: @red;
					position: relative;
					
					&:after {
						content: '';
						position: absolute;
						width: @w;
						height: @h;
						margin-left: -@w / 2;
						margin-top: -@h / 2;
						left: 50%;
						top: 50%;
						background-repeat: no-repeat;
						background-position: 0px 0px;
					}
					
					&.next {
						&:after {
							background-image: url(../images/arrowDown.png);
						}
					}
					
					&.prev {
						&:after {
							background-image: url(../images/arrowUp.png);
						}
					}
					
					&:hover {
						&:after {
							background-position: 0px -21px;
						}
						background-color: darken(@red, 5%);
					}
				}
				
				.items {
					position: relative;
					height: 350px;
					background-color: rgba(255, 255, 255, 0.8);
					overflow: hidden;
					
					&:before {
						content: '';
						position: absolute;
						width: 2px;
						height: 100%;
						left: 0px;
						top: 0px;
						background-color: @red;
					}
					
					&:after {
						content: '';
						position: absolute;
						width: 2px;
						height: 100%;
						right: 0px;
						top: 0px;
						background-color: @red;
					}
					
					.item {
						width: 100px;
						height: 100px;
						float: left;
						cursor: move;
						
						.image {
							width: 60px;
							height: 60px;
							margin: 20px;
							.contain;
						}
					}
					
					.long {
						position: absolute;
						left: 0px;
						top: 0px;
						width: 300px;
						.clear-fix;
						.transition(@duration: 400ms, @target: top);
					}
				}
			}
		
			.sarc {
				position: absolute;
				z-index: 5;
				left: 0;
				top: 0;
				width: @s_width;
				height: @s_height;
			}
			
			.lenin {
				position: absolute;
				z-index: 10;
				left: 265px;
				top: 474px;
				width: @l_width;
				height: @l_height;
			}
			
			.acc {
				display: block;
				position: absolute;
				cursor: move;
				z-index: 15;
				
				&.high {
					z-index: @max_zindex + 1!important;
				}
			}
			
			.picker {
				position: absolute;
				z-index: 7;
				
				&.shirt {
					width: 105px;
					height: 114px;
					left: 378px;
					top: 482px;
					z-index: 8;
				}
				
				&.jacket {
					width: 330px;
					height: 305px;
					left: 274px;
					top: 480px;
				}
				
				&.pants {
					width: 217px;
					height: 237px;
					left: 331px;
					top: 782px;
				}
				
				&.boots {
					width: 157px;
					height: 39px;
					left: 361px;
					top: 1018px;
					z-index: 6;
				}
			}
			
			.picker-controller {
				@size: 37px;
			
				position: absolute;
				z-index: @max_zindex;
				width: @size;
				height: @size;
				cursor: pointer;
				margin-left: -@size / 2;
				margin-top: -@size / 2;
				background-position: 0px 0px;
				
				&.prev {
					background-image: url(../images/leftArrow.png);
				}
				
				&.next {
					background-image: url(../images/rightArrow.png);
				}
				
				&:hover {
					background-position: 0px -50px;
				}
				
				&:active {
					background-position: 0px -100px;
				}
			}
		}
	}
}

.footer {
	padding-top: 50px;
	padding-bottom: 100px;
}