.transition( @target: all, @duration: 300ms, @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;
}

.rotate( @value: 0deg ) {
	-webkit-transform: rotate( @value );
	-moz-transform: rotate( @value );
	-ms-transform: rotate( @value );
	-o-transform: rotate( @value );
	transform: rotate( @value );
}

.transform-origin( @x, @y ) {
	transform-origin: @x @y;
	-ms-transform-origin: @x @y;
	-webkit-transform-origin: @x @y;
}

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

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

.scale( @value: 1 ) {
	-webkit-transform: scale( @value );
	-moz-transform: scale( @value );
	-ms-transform: scale( @value );
	-o-transform: scale( @value );
	transform: scale( @value );
}

.clear {
	clear: both;
}

/**/

.page {
	@green: #00FF03;
	
	font-family: 'trivia-grotesk';
	color: #000000;

	.container {
		position: relative;
		width: 1200px;
		margin: 0 auto;
	}
	
	.image {
		position: absolute;
		z-index: 1;
	
		&-1 {
			width: 500px;
			height: 621px;
			background-image: url(../images/1.jpg);
			left: 58px;
			top: -240px;
			
			&:after {
				content: 'Marc Quinn, The Toxic Sublime - W"=5.96YK6?jG7r';
				position: absolute;
				left: 0;
				bottom: -20px;
				font-size: 10px;
				color: @green;
			}
		}
		
		&-2 {
			width: 320px;
			height: 330px;
			background-image: url(../images/2.jpg);
			left: 50%;
			margin-left: -160px;
			top: 700px;
			
			&:after {
				content: 'Marcel Duchamp , Fountation';
				position: absolute;
				left: 0;
				bottom: -20px;
				font-size: 10px;
				color: @green;
			}
		}
		
		&-3 {
			width: 155px;
			height: 210px;
			background-image: url(../images/a1.png);
			right: 230px;
			top: 210px;
		}
		
		&-4 {
			width:113px;
			height: 92px;
			background-image: url(../images/a2.png);
			left: 150px;
			top: 710px;
		}
		
		&-5 {
			width:66px;
			height: 91px;
			background-image: url(../images/a3.png);
			left: 150px;
			top: 600px;
		}
		
		&-6 {
			width:149px;
			height: 77px;
			background-image: url(../images/a4.png);
			right: 150px;
			top: 1600px;
		}
		
		&-7 {
			width:61px;
			height: 88px;
			background-image: url(../images/a5.png);
			left: 150px;
			top: 2460px;
		}
	}
	
	.intro {
		padding-top: 1px;
		padding-bottom: 470px;
	
		.title {
			position: relative;
			z-index: 2;
			font-size: 34px;
			line-height: 44px;
			text-align: center;
			margin-bottom: 10px;
			margin-top: 300px;
			letter-spacing: 15px;
		}
		
		.subtitle {
			position: relative;
			z-index: 2;
			font-size: 16px;
			line-height: 30px;
			text-align: center;
			margin-bottom: 20px;
		}
		
		.author {
			position: relative;
			z-index: 2;
			font-size: 14px;
			line-height: 30px;
			text-align: center;
			margin-bottom: 180px;
		}
		
		.description {
			position: relative;
			z-index: 2;
			font-size: 14px;
			line-height: 20px;
			text-align: center;
			width: 520px;
			margin: 0 auto;
		}
	}
	
	.action {
		.section {
			width: 500px;
			margin: 0 auto;
			margin-bottom: 90px;
		
			.header {
				position: relative;
				
				.num {
					position: absolute;
					color: @green;
					left: -50px;
					font-size: 54px;
					line-height: 1;
					top: 0;
				}
			
				.title {
					font-size: 20px;
					line-height: 24px;
					text-align: center;
					margin-bottom: 20px;
					
					span {
						font-size: 14px;
						line-height: 20px;
					}
				}
			}
			
			.content {
				.block {
					&-chose {
						text-align: center;
					
						.item {
							display: inline-block;
							padding: 5px 15px;
							font-size: 16px;
							line-height: 20px;
							cursor: pointer;
							
							&.active, &:hover {
								background-color: @green;
							}
							
							&.active {
								cursor: default;
							}
						}
					}
					
					&-input {
						padding-top: 5px;
					
						input {
							width: auto;
							display: block;
							padding: 6px 11px;
							border: 2px solid @green;
							width: 470px;
							background-color: #ffffff;
							font-size: 20px;
							line-height: 20px;
							height: 20px;
							font-family: 'trivia-grotesk';
							color: #000000;
							outline: none !important;
							
							&:focus {
								background-color: @green;
							}
						}
					}
				}
			}
		}
		
		.make {
			width: 241px;
			height: 119px;
			margin: 0 auto;
			background-image: url(../images/makeBtn.png);
			cursor: pointer;
			margin-bottom: 50px;
			
			&.disabled {
				opacity: 0.5;
				cursor: default;
			}
			
			&.hidden {
				display: none;
			}
		}
	}
	
	.finish {
		padding: 130px 0;
		background-image: url(../images/bg.jpg);
		
		&.hidden {
			display: none;
		}
	
		.result {
			width: 500px;
			margin: 0 auto;
			font-size: 16px;
			line-height: 20px;
			margin-bottom: 50px;
		}
		
		.shares {
			font-size: 0;
			width: 500px;
			margin: 0 auto;
		
			.share {
				display: inline-block;
				margin-left: 20px;
				cursor: pointer;
				background-image: url(../images/btnShare.png);
				width: 150px;
				height: 45px;
			
				&.vk {
					margin-left: 0;
					background-position: -330px 0px;
					
					&:hover {
						background-position: -330px -46px;
					}
				}
				
				&.fb {
					background-position: 0px 0px;
					
					&:hover {
						background-position: 0px -46px;
					}
				}
				
				&.tw {
					background-position: -165px 0px;
					
					&:hover {
						background-position: -165px -46px;
					}
				}
			}
		}
	}
}