.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;
}

/**/

.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;
	.bg;
	
	.line {
		@w: 200px;
		@h: 10px;
		@c: #ffffff;
		
		position: absolute;
		width: @w;
		height: @h;
		margin-left: -@w / 2;
		margin-top: -@h / 2;
		left: 50%;
		top: 50%;
		background-color: fadeout(@c, 60%);
	
		.bar {
			width: 0%;
			height: 100%;
			background-color: @c;
		}
	}
	
	&.shown {
		display: block;
	}
}

body, html {
	height: 100%;
}

.page {
	height: 100%;
}

.start, .action, .finish {
	display: none;
	/*pointer-events: none;
	.transition(@duration: 400ms, @target: opacity);
	opacity: 0;*/

	&.shown {
		display: block;
		/*opacity: 1;
		pointer-events: auto;*/
	}
}

.bg {
	/*background-image: url(../images/bg.jpg);
	.cover;*/
	background-color: #000000;
}

.start {
	@w: 800px;
	@h: 480px;
	@g: 270px;
	@t: 40px;
	
	position: relative;
	height: 100%;
	.bg;
	color: #ffffff;
	font-family: 'trivia-serif';
	
	.container {
		position: absolute;
		width: @w;
		height: @h;
		margin-left: -@w / 2;
		margin-top: -@h / 2;
		left: 50%;
		top: 50%;
		background-image: url(../images/zahod.jpg);
		background-repeat: no-repeat;
		background-position: 0px 0px;
		
		.title {
			position: absolute;
			width: 550px;
			left: @g;
			top: 0px + @t;
			font-size: 42px;
			text-align: center;
			
			&:before {
				content: 'Тест';
				position: absolute;
				right: 100%;
				bottom: 100%;
				font-size: 18px;
			}
		}
		
		.lead {
			position: absolute;
			width: 550px;
			left: @g;
			text-align: center;
			font-size: 18px;
			line-height: 24px;
			top: 90px + @t;
		}
		
		.description {
			position: absolute;
			width: 400px;
			left: @g + 90px;
			font-size: 14px;
			line-height: 22px;
			top: 190px + @t;
		}
		
		.button {
			position: absolute;
			padding: 20px 40px;
			color: #000000;
			background-color: #ffffff;
			cursor: pointer;
			left: @g;
			bottom: 0px;
			font-size: 32px;
			.border-radius(5px);
			left: @g + 190px;
			
			&:hover {
				opacity: 0.8;
			}
		}
	}
}

.finish {
	@w: 500px;
	@h: 400px;
	
	position: relative;
	height: 100%;
	.bg;
	color: #ffffff;
	font-family: 'trivia-serif';
	text-align: center;

	.container {
		position: absolute;
		width: @w;
		height: @h;
		margin-left: -@w / 2;
		margin-top: -@h / 2;
		left: 50%;
		top: 50%;
	
		.you {
			font-size: 36px;
			line-height: 48px;
		}
		
		.description {
			font-size: 18px;
			line-height: 34px;
			margin-top: 20px;
		}
		
		.one-more {
			width: 361px;
			height: 127px;
			margin: 50px auto 0px auto;
			cursor: pointer;
			display: block;
			background-image: url(../images/maneMone.png);
			background-position: 0px 0px;
			
			&:hover {
				background-position: 0px -159px;
			}
		}
		
		.buttons {
			margin-top: 40px;
		
			.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;
					}
				}
			}
		}
	}
}

.action {
	@w: 900px;
	@h: 650px;
	
	.bg;
	padding: 50px 0px;
	font-family: 'trivia-grotesk';
	font-size: 14px;
	line-height: 20px;
	position: relative;
	min-height: 100%;

	.container {
		position: relative;
		width: @w;
		min-height: @h;
		margin: 0 auto;
		/*margin-left: -@w / 2;
		margin-top: -@h / 2;
		left: 50%;
		top: 50%;*/
	}
	
	.answer {
		position: absolute;
		width: 100%;
		height: 100%;
		z-index: 1;
		left: 0;
		top: 0;
		
		&.hidden {
			.right, .wrong, .title {
				opacity: 0;
			}
		}
		
		.title {
			color: #ffffff;
			text-align: center;
			font-size: 22px;
			line-height: 28px;
			padding-bottom: 30px;
			font-family: 'trivia-serif';
			font-style: inherit;
		
			.label {
				display: inline-block;
			}
			
			.next {
				display: inline-block;
				margin-left: 30px;
				border-bottom: 1px dashed #ffffff;
				cursor: pointer;
				
				&:hover {
					opacity: 0.7;
				}
			}
		}
		
		.image {
			width: 100%;
			height: 80%;
			.contain;
			background-position: center top;
		}
		
		.some {
			position: absolute;
			right: 0px;
			top: 0px;
			width: 300px;
			height: 100%;
		}
		
		.right, .wrong {
			position: absolute;
			width: 300px;
			padding: 15px;
			color: #ffffff;
			text-align: center;
			.border-radius(5px);
			.box-sizing;
			
			span {
				font-size: 12px;
				display: block;
			}
		}
		
		.right {
			background-color: fadeout(#00762B, 30%);
		}
		
		.wrong {
			background-color: fadeout(#FF0040, 30%);
		}
		
		&.ok {
			.wrong {
				display: none;
			}
		}
	}
	
	.question {
		position: absolute;
		width: 100%;
		min-height: 100%;
		z-index: 2;
		left: 0;
		top: 0;
		.contain;
		background-color: rgba(0, 0, 0, 1);
		opacity: 1;
		
		&.hidden {
			/*display: none;*/
			pointer-events: none;
			.transition(@duration: 400ms, @target: opacity);
			opacity: 0;
		}
	
		.dialog {
			@w: 400px;
			@s: 72px;
			
			width: @w;
			float: right;
			padding-top: 60px;
			
			.item {
				margin-bottom: 20px;
			
				.info {
					width: @s;
					float: left;
				
					.image {
						width: @s;
						height: @s;
					}
					
					.name {
						text-align: center;
						margin-top: 10px;
						color: #ffffff;
						font-size: 12px;
					}
				}
				
				.content {
					position: relative;
					width: @w - @s - 20px;
					margin-left: 20px;
					float: left;
					background-color: #ffffff;
					.box-sizing;
					padding: 15px;
					
					&:after {
						content: '';
						position: absolute;
						width: 15px;
						height: 19px;
						left: -15px;
						top: 13px;
						background-image: url(../images/leftTriangle.png);
					}
				}
				
				&.odd {
					.info, .content {
						float: right;
					}
					
					.content {
						margin-left: 0px;
						margin-right: 20px;
						
						&:after {
							background-image: url(../images/rightTriangle.png);
							left: auto;
							right: -15px;
						}
					}
				}
			}
		}
		
		.answers {
			width: 300px;
			float: right;
			margin-left: 50px;
		
			.header {
				color: #ffffff;
				text-align: center;
				margin-bottom: 20px;
			
				.counter {
				}
				
				.text {
					
				}
			}
			
			.content {
				.item {
					color: #ffffff;
					background-color: #242DBF;
					padding: 15px;
					text-align: center;
					cursor: pointer;
					margin-bottom: 20px;
					.border-radius(5px);
					
					span {
						font-size: 12px;
						display: block;
					}
					
					&:hover {
						background-color: darken(#242DBF, 5%);
					}
				}
			}
		}
	}
}

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