/* RESET */
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,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}table{border-collapse:collapse;border-spacing:0}

.clear {
	clear: both;
}

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

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

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

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

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

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

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

.no-select {
	-webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.pos(@w: auto, @h: auto, @l: auto, @t: auto, @z: 1) {
    position: absolute;
    width: @w;
    height: @h;
    left: @l;
    top: @t;
    z-index: @z;
}

html {
	&.stage- {
		&1 {
			.page .start {
				display: block;
			}
		}
		
		&2 {
			height: 100%;
			
			body, .page, .page .action {
				height: 100%;
			}
			
			.page .action {
				display: block;
			}
		}
		
		&3 {
			.page .finish {
				display: block;
			}
		}
	}
}

/*================================*/

.preloader {
	@w: 200px;
	@h: 10px;

	position: fixed;
	z-index: 299792458;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	display: none;
	background-color: #ffffff;

	.line {
		position: absolute;
		width: @w;
		height: @h;
		left: 50%;
		top: 50%;
		margin-left: -@w / 2;
		margin-top: -@h / 2;
		background-color: lighten(#000000, 80%);
		
		.bar {
			position: absolute;
			z-index: 1;
			left: 0;
			top: 0;
			width: 0%;
			height: 100%;
			background-color: #000000;
		}
		
		.counter {
			display: none;
			font-family: 'trivia-grotesk';
			position: absolute;
			z-index: 2;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			color: #006F7E;
			font-size: 12px;
			line-height: @h;
			text-align: center;
		}
	}
	
	&.shown {
		display: block;
	}
}

.page {
	position: relative;
	z-index: 1;

    .start {
    	display: none;
    	background-color: #ffffff;
    	color: #000000;
    	font-size: 14px;
    	line-height: 1.5;
    	font-family: 'trivia-grotesk';
    
    	.container {
    		position: relative;
    		padding: 50px 0;
    		width: 730px;
    		margin: 0 auto;
    	}
    	
    	.label {
    		
    	}
    	
    	.title {
    		font-size: 22px;
    		margin-bottom: 80px;
    		position: relative;
    		
    		&:after {
    			content: '';
    			position: absolute;
    			width: 33px;
    			height: 25px;
    			.contain;
    			background-image: url(../images/DIAMOND.png);
    			left: 130px;
    			top: 60px;
    		}
    	}
    	
    	.subtitle {
    		font-size: 16px;
    		margin-bottom: 80px;
    		position: relative;
    		
    		&:after {
    			content: '';
    			position: absolute;
    			width: 33px;
    			height: 25px;
    			.contain;
    			background-image: url(../images/DIAMOND.png);
    			left: 130px;
    			top: 53px;
    		}
    	}
    	
    	.authors {
    		display: none;
    	}
    	
    	.quote {
    		font-family: 'trivia-serif';
    		font-size: 18px;
    		text-decoration: underline;
    		margin-bottom: 20px;
    		position: relative;
    		
    		&:after {
    			content: '';
    			position: absolute;
    			width: 33px;
    			height: 25px;
    			.contain;
    			background-image: url(../images/DIAMOND.png);
    			left: 130px;
    			top: 177px;
    		}
    	}
    	
    	.quote-name {
    		font-family: 'trivia-serif';
    		font-size: 14px;
    		margin-bottom: 80px;
    	}
    	
    	.description {
    		width: 500px;
    		margin-bottom: 40px;
    	}
    	
    	.button {
    		cursor: pointer;
    		width: 310px;
    		height: 198px / 2;
    		background-image: url(../images/startBtn.png);
    		background-position: 0px 0px;
    		
    		&:hover {
    			background-position: 0px -198px / 2;
    		}
    	}
    }
    
    .action {
    	@as: 81px;
    
    	display: none;
    	position: relative;
    
    	.stone {
    		position: absolute;
    		width: 100%;
    		height: 100%;
    		left: 0;
    		top: 0;
    		.cover;
    		z-index: 1;
    	}
    	
    	.panel {
    		position: absolute;
    		width: 350px;
    		height: 150px;
    		z-index: 2;
    		left: 50%;
    		margin-left: -175px;
    		bottom: 30px;
    		display: none;
    		font-family: 'trivia-grotesk';
    		color: #105B9E;
    		
    		&.shown {
    			display: block;
    		}
    		
    		&.before {
    			.question {
    				text-align: center;
    				margin-bottom: 30px;
    			}
    			
    			.answer {
    				background-image: url(../images/buttons.png);
    				width: @as;
    				height: @as;
    				cursor: pointer;
    				float: left;
    			
    				&.true {
    					background-position: -@as * 2 0px;
    					margin-left: 55px;
    					margin-right: 60px;
    					
    					&:hover {
    						background-position: -@as * 2 -@as;
    					}
    				}
    				
    				&.false {
    					background-position: -@as * 3 0px;
    					
    					&:hover {
    						background-position: -@as * 3 -@as;
    					}
    				}
    				
    			}
    		}
    		
    		&.after {
    			.state {
    				text-align: center;
    				margin-bottom: 30px;
    			}
    			
    			.next {
    				background-image: url(../images/nextBtn.png);
    				width: 273px;
    				height: 70px;
    				background-position: -273px 0px;
    				cursor: pointer;
    				margin: 0 auto;
    				
    				&:hover {
    					background-position: -273px -70px;
    				}
    			}
    		}
    	}
    
    	&.dark {
    		.panel {
    			color: #EEC566;
    		
    			.answer {
    				&.true {
    					background-position: 0px 0px;
    					
    					&:hover {
    						background-position: 0px -@as;
    					}
    				}
    				
    				&.false {
    					background-position: -@as 0px;
    					
    					&:hover {
    						background-position: -@as -@as;
    					}
    				}
    			}
    			
    			.next {
    				background-position: 0px 0px;
    				
    				&:hover {
    					background-position: 0px -70px;
    				}
    			}
    		}
    	}
    }
    
    .finish {
    	display: none;
    	padding: 50px 0;
    	font-family: 'trivia-grotesk';
    	
    	.container {
    		margin: 0 auto;
    		width: 500px;
    	}
    	
    	.image {
    		width: 500px;
    		height: 250px;
    		.contain;
    		margin-bottom: 50px;
    	}
    	
    	.label {
    		font-size: 12px;
    		line-height: 1.5;
    		text-decoration: underline;
    	}
    	
    	.result {
    		font-size: 18px;
    		line-height: 24px;
    	}
    	
    	.shares {
    		font-size: 0;
    		margin: 50px 0 70px 0;
    	
    		.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;
    				}
    			}
    		}
    	}
    	
    	.other {
    		font-size: 20px;
    		text-decoration: underline;
    		display: block;
    	}
    }
}

.page.mobile {
	.start {
		.container {
			padding: 50px 15px;
			.box-sizing;
			width: 100%;
			
			.title {
				margin-bottom: 20px;
			
				&:after {
					display: none;
				}
			}
			
			.subtitle {
				margin-bottom: 20px;
			
				&:after {
					display: none;
				}
			}
			
			.quote {
				&:after {
					display: none;
				}
			}
			
			.quote-name {
				margin-bottom: 20px;
			}
			
			.description {
				width: 100%;
			}
			
			.button {
				/*.scale(0.8);*/
			}
		}
	}
	
	.action {
		.panel {
			width: 280px;
			margin-left: -140px;
			/*margin: 0 auto;*/
			
			.answer.true {
				margin-left: 35px;
			}
		}
	}
	
	.finish {
		.container {
			width: 90%;
			margin: 5% auto;
		}
		
		.image {
			width: 100%;
			height: 150px;
		}
		
		.shares {
			display: none;
		}
		
		.other {
			margin-top: 30px;
		}
	}
}