/* 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 {
	&.h1 {
	    .page:not(.mobile) {
	        height: 1420px;
	    }
	    
	    .start {
	        display: block;
	    }
	}
	
	&.h2 {
		height: 100%;
	
	    body, .page:not(.mobile) {
	        height: 100%;
	    }
	    
	    .action {
	        display: block;
	    }
	}
	
	&.h3 {
	    .page:not(.mobile) {
	        height: 1000px;
	    }
	    
	    .finish {
	        display: block;
	    }
	}
}

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

@blue: #3375F6;

.page {
    overflow: hidden;
    background-color: #E7E1F4;
    font-family: 'trivia-grotesk';
    
    .container {
        position: relative;
    	width: 900px;
    	margin: 0 auto;
    }
    
    .start, .action, .finish {
        position: relative;
        display: none;
    }
    
    .start {
        padding: 50px 0;
    
        .label {
            .pos(70px, auto, 0, 0);
            font-size: 28px;
            line-height: 1;
            color: @blue;
            text-transform: uppercase;
            font-weight: bold;
            text-align: center;
           
            &:after {
                content: '';
                background-color: @blue;
                .pos(100%, 10px, 0, 30px);
            }
        }
        
        .title {
            .pos(800px, auto, 100px, 0);
            font-size: 90px;
            line-height: 1;
            color: @blue;
            font-weight: bold;
        }
        
        .subtitle {
            .pos(400px, auto, 300px, 230px);
            font-size: 32px;
            line-height: 1.6;
            color: @blue;
        }
        
        .authors {
            .pos(300px, auto, 50px, 330px);
            font-size: 16px;
            line-height: 1;
            color: @blue;
            
            a {
                position: relative;
                
                &:after {
                    content: '';
                    background-color: @blue;
                    .pos(100%, 5px, 0, 25px);
                }
            }
        }
        
        .image {
            &--1 {
                .pos(336px, 250px, 450px, 490px, 1);
                background-image: url(../images/1.jpg);
            }
            
            &--2 {
                .pos(341px, 429px, 50px, 600px, 1);
                background-image: url(../images/1.png);
            }
        }
        
        .description {
            .pos(500px, auto, 300px, 800px, 2);
            font-size: 16px;
            line-height: 1.3;
        }
        
        .button {
            .pos(397px, 164px, 300px, 1120px);
            cursor: pointer;
            background-image: url(../images/beginBtn.png);
            background-position: 0px 0px;
            background-repeat: no-repeat;
            
            &:hover {
                background-position: 0px -164px;
            }
        }
    }
    
    .action {
    	position: absolute;
    	left: 0;
    	top: 0;
    	right: 0;
    	bottom: 0;
    	width: 100%;
    	height: 400px;
    	margin: auto;
        .transition(@duration: 600ms);
        
        &.hidden {
            opacity: 0;
        }
        
        .counter {
            font-weight: bold;
            text-align: center;
            margin-bottom: 50px;
        }
        
        .text {
            font-weight: bold;
            text-align: center;
            font-size: 18px;
        }
        
        .answers {
            text-align: center;
            font-size: 0px;
            
            .a {
                position: relative;
                display: inline-block;
                height: 300px;
                width: 300px;
                text-align: center;
                font-size: 16px;
                cursor: pointer;
                
                .state {
                    position: absolute;
                    width: 100%;
                    left: 0;
                    top: 0;
                    z-index: 2;
                    height: 130px;
                    line-height: 130px;
                    display: none;
                }
                
                .a-text {
                    position: absolute;
                    z-index: 2;
                    top: 130px;
                    left: 15%;
                    height: 160px;
                    width: 70%;
                }
                
                &:after {
                    content: '';
                    position: absolute;
                    width: 100%;
                    height: 100%;
                    left: 0;
                    top: 0;
                    background-image: url(../images/hover.png);
                    opacity: 0;
                    .transition(@duration: 300ms);
                    background-position: center center;
                    background-repeat: no-repeat;
                    background-size: 95%;
                }
                
                &:hover:not(.already), &.answered {
                    &:after {
                        opacity: 1;
                    }
                }
                
                &.already {
                    cursor: default;
                }
                
                &.answered {
                    .state {
                        display: block;
                    }
                    
                    &.state-false {
                    	&:after {
                    		background-image: url(../images/Wrong.png);
                    	}
                    }
                }
            }
        }
    }
    
    .finish {
    	padding: 50px 0;
    
    	.image {
    		&--1 {
    			width: 222px;
    			height: 167px;
    			background-image: url(../images/2.jpg);
    		}
    		
    		&--2 {
    			width: 129px;
    			height: 185px;
    			background-image: url(../images/2.png);
    			margin: 30px 0;
    		}
    	}
    	
    	.result, .percent {
    		font-size: 24px;
    		line-height: 1.3;
    		font-weight: bold;
    		margin-top: 40px;
    		margin-bottom: 60px;
    	}
    	
    	.shares {
    		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 {
    		position: relative;
    		font-size: 24px;
    		color: @blue;
    		
    		&:after {
    		    content: '';
    		    background-color: @blue;
    		    .pos(100%, 10px, 0, 30px);
    		}
    	}
    }
}

.page.mobile {
	.container {
		width: 90%;
	}

	.start {
		.label, .title, .image, .subtitle, .authors, .description, .button {
			position: relative;
			left: auto;
			top: auto;
			width: auto;
		}
		
		.label {
			font-size: 16px;
			margin-bottom: 20px;
		
			&:after {
				display: none;
			}
		}
		
		.title {
			font-size: 32px;
			text-align: center;
			margin-bottom: 20px;
		}
		
		.image {
			display: none;
		}
		
		.subtitle {
			font-size: 16px;
			text-align: center;
			margin-bottom: 20px;
		}
		
		.description {
			font-size: 16px;
			margin-bottom: 30px;
		}
		
		.button {
			background-image: none;
			width: 200px;
			margin: 0 auto;
			height: 50px;
			font-size: 32px;
			text-align: center;
			color: @blue;
			text-decoration: underline;
			
			&:after {
				content: 'Начать';
			}
		}
		
		.authors {
			text-align: center;
			margin-bottom: 20px;
			font-size: 16px;
			
			a {
				&:after {
					display: none;
				}
			}
		}
	}
	
	.action {
		position: relative;
		width: auto;
		height: auto;
		left: auto;
		top: auto;
		right: auto;
		bottom: auto;
		padding: 50px 0;
		
		.counter {
			margin-bottom: 30px;
		}
		
		.answers {
			.a {
				height: 110px;
				display: table;
				
				.state {
					display: none !important;
				}
				
				.a-text {
					position: relative;
					display: table-cell;
					vertical-align: middle;
					height: 110px;
					top: 0;
				}
				
				&:after {
					background-size: 50%;
				}
			}
		}
	}
	
	.finish {
		.shares {
			display: none;
		}
		
		.image {
			display: none;
		}
		
		.result {
			font-size: 18px;
			margin: 0;
		}
		
		.percent {
			margin: 30px 0;
		}
	}
}