/* 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;
}

html {
	&.h1 {
		background-color: #000000;
	
		.page {
			height: 1000px;
		}
		
		.start {
			display: block;
		}
		
		.comm {
			* {
				color: #ffffff !important;
			}
		}
	}
	
	&.h2 {
		background-color: #F7F7F7;
	
		.page {
			height: 750px;
		}
		
		.action {
			display: block;
		}
	}
	
	&.h3 {
		background-color: #f7f7f7;
	
		.page {
			height: 510px;
		}
		
		.finish {
			display: block;
		}
	}
}

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

.page {
    overflow: hidden;
    
    .container {
    	width: 900px;
    	margin: 0 auto;
    }
    
    .start {
    	overflow: hidden;
    	position: relative;
    	display: none;
    	color: #ffffff;
    	padding: 125px 0;
    	/*background-color: #000000;*/
    	
    	&:before {
    		content: '';
    		position: absolute;
    		left: 0;
    		top: 0;
    		width: 100%;
    		height: 94px;
    		background-image: url(../images/1.png);
    		z-index: 1;
    	}
    	
    	&:after {
    		content: '';
    		position: absolute;
    		left: 0;
    		bottom: 0;
    		width: 100%;
    		height: 94px;
    		background-image: url(../images/2.png);
    		z-index: 1;
    	}
    	
    	.container {
    		position: relative;
    		z-index: 2;
    		width: 600px;
    		/*height: 750px;*/
    	}
    	
    	.label {
    		text-align: center;
    		font-size: 26px;
    		line-height: 1;
    		font-family: 'trivia-serif';
    		margin-bottom: 25px;
    	}
    	
    	.title {
    		text-align: center;
    		font-size: 44px;
    		line-height: 64px;
    		font-family: 'trivia-serif';
    		margin-bottom: 45px;
    	}
    	
    	.subtitle {
    		text-align: center;
    		font-size: 24px;
    		line-height: 32px;
    		font-family: 'trivia-serif';
    		margin-bottom: 35px;
    	}
    	
    	.authors {
    		text-align: center;
    		font-size: 17px;
    		line-height: 24px;
    		font-family: 'trivia-serif';
    		margin-bottom: 20px;
    	}
    	
    	.description {
    		text-align: center;
    		font-size: 17px;
    		line-height: 24px;
    		font-family: 'trivia-serif';
    		margin-bottom: 70px;
    	}
    	
    	.button {
    		width: 313px;
    		height: 344px / 2;
    		margin: 0 auto;
    		cursor: pointer;
    		background-image: url(../images/startBtn.png);
    		background-position: 0px 0px;
    		
    		&:hover {
    			background-position: 0px -172px;
    		}
    	}
    }
    
    .action {
    	overflow: hidden;
    	position: relative;
    	display: none;
    	color: #000000;
    	padding: 50px 0;
    	/*background-color: #000000;*/
    	
    	.questions {
    		position: relative;
    		height: 650px;
    		overflow: hidden;
    	
    		.q {
    			position: absolute;
    			left: 0;
    			top: 0;
    			height: 100%;
    			width: 100%;
    			overflow: hidden;
    			.transition(@duration: 500ms, @target: top);
    			
    			top: 0%;
    			
    			&.before {
    				top: 100%;
    			}
    			
    			&.after {
    				top: -100%;
    			}
    			
    			&.answered {
    				&:before {
    					content: '';
    					position: absolute;
    					left: 0;
    					top: 0;
    					width: 100%;
    					height: 100%;
    					z-index: 10;
    				}
    			}
    		
    			.counter {
    				text-align: center;
    				font-size: 14px;
    				line-height: 1;
    				font-family: 'trivia-serif';
    				margin-bottom: 10px;
    			}
    			
    			.text {
    				text-align: center;
    				font-size: 24px;
    				line-height: 40px;
    				font-family: 'trivia-serif';
    				width: 520px;
    				margin: 0 auto;
    				margin-bottom: 20px;
    			}
    			
    			.res {
    				text-align: center;
    				font-size: 18px;
    				line-height: 24px;
    				font-family: 'trivia-serif';
    				height: 70px;
    				
    				&:empty {
    					opacity: 0;
    				}
    				/*width: 300px;
    				margin: 0 auto;*/
    			}
    			
    			.answers {
    				.a {
    					position: relative;
    					float: left;
    					width: 300px;
    					height: 300px;
    					cursor: pointer;
    					
    					.img {
    						position: absolute;
    						left: 0;
    						top: 0;
    						right: 0;
    						bottom: 0;
    						margin: auto;
    						pointer-events: none;
    						display: block;
    						width: 60%;
    						height: 60%;
    						.transition(@duration: 300ms);
    						background-repeat: no-repeat;
    						.cover;
    					}
    					
    					&:hover, &.chosen {
    						.img {
    							width: 100%;
    							height: 100%;
    						}
    					}
    				}
    			}
    		}
    	}
    }
    
    .finish {
    	overflow: hidden;
    	position: relative;
    	display: none;
    	color: #000000;
    	padding: 50px 0;
    	/*background-color: #ffffff;*/
    	
    	.text {
    		width: 680px;
    		margin: 0 auto;
    		text-align: center;
    		font-size: 24px;
    		line-height: 40px;
    		font-family: 'trivia-serif';
    	}
    	
    	.shares {
    		text-align: center;
    		font-size: 0;
    		margin: 50px 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;
    				}
    			}
    		}
    	}
    	
    	.more {
    		display: block;
    		width: 282px;
    		height: 120px;
    		background-image: url(../images/moreTests.png);
    		margin: 0 auto;
    		background-position: 0px 0px;
    		
    		&:hover {
    			background-position: 0px -120px;
    		}
    	}
    }
    
    &.mobile {
    	height: auto !important;
    
    	.social-shares {
    		display: none;
    	}
    	
    	.container {
    		width: 80% !important;
    	}
    	
    	.start {
    		.label {
    			font-size: 16px;
    			margin-bottom: 15px;
    		}
    		
    		.title {
    			font-size: 24px;
    			line-height: 44px;
    			margin-bottom: 25px;
    		}
    		
    		.subtitle, .description {
    			font-size: 14px;
    			line-height: 24px;
    			margin-bottom: 25px;
    		}
    		
    		.authors {
    			font-size: 14px;
    		}
    		
    		.button {
    			background-size: 100% auto;
    			width: 140px;
    			height: 76px;
    			
    			&:hover {
    				background-position: 0px 0px !important;
    			}
    		}
    	}
    	
    	.action {
    		.q {
    			.text {
    				width: auto;
    				font-size: 18px;
    				line-height: 32px;
    				margin-bottom: 25px;
    			}
    		}
    		
    		.answers {
    			margin-bottom: 25px !important;
    		
    			.a {
    				width: 250px !important;
    				float: none !important;
    				margin: 0 auto !important;
    				height: 125px !important;
    				
    				.img {
    					height: 80%;
    					background-size: auto 100% !important;
    				}
    			}
    		}
    	}
    	
    	.finish {
    		.text {
    			width: auto;
    			font-size: 18px;
    			line-height: 28px;
    		}
    		
    		.shares {
    			display: none !important;
    		}
    		
    		.share {
    			display: block !important;
    			margin: 5px auto !important;
    		}
    		
    		.more {
    			background-size: 100% auto;
    			width: 141px;
    			height: 60px;
    			margin-top: 25px;
    			
    			&:hover {
    				background-position: 0px 0px !important;
    			}
    		}
    	}
    }
}