/* 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, body {
}

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

.page {
	@s: 206px;

	font-family: 'trivia-grotesk';
	background-image: url(../images/bg.jpg);
	.cover;

    .container {
    	position: relative;
    	margin: 0 auto;
    }
    
    .start, .rules, .action, .register, .me {
    	padding: 50px 0;
    	display: none;
    	
    	&.shown {
    		display: block;
    	}
    }
    
    .pos(@w: 0px, @h: 0px, @x: 0.5, @y: 0.5) {
    	position: absolute;
    	width: @w;
    	height: @h;
    	left: 100% * @x;
    	top: 100% * @y;
    	margin-left: -@w * @x;
    	margin-top: -@h * @y;
    }
    
    .bg(@img) {
    	background-image: url(@img);
    	background-repeat: no-repeat;
    	background-size: auto auto;
    	background-position: center top;
    }
    
    .btn(@img) {
    	opacity: 0.8;
    	cursor: pointer;
    	.bg(@img);
    	
    	&:hover {
    		opacity: 1;
    	}
    }
    
    .start {
    	.container {
    		width: 883px;
    		height: 640px;
    		.bg('../images/start.png');
    	}
    	
    	.button {
    		.pos(229px, 111px, 0.5, 1);
    		.btn('../images/b1.png');
    	}
    	
    	.author {
    		position: absolute;
    		width: 97px;
    		height: 20px;
    		left: 532px;
    		top: 200px;
    	}
    }
    
    .rules {
    	.container {
    		width: 885px;
    		height: 650px;
    		.bg('../images/rules.png');
    	}
    	
    	.button {
    		.pos(308px, 111px, 0.5, 1);
    		.btn('../images/b2.png');
    	}
    }
    
    .me {
    	.container {
    		width: 885px;
    		height: 406px;
    	}
    
    	.button {
    		.pos(154px, 55px, 1, 0);
    		.btn('../images/b2.png');
    		background-size: 154px 55px;
    	}
    	
    	.shares {
    		font-size: 0;
    		width: 172px;
    		margin: 0 auto;
    		margin-top: 30px;
    	
    		.share {
    			display: inline-block;
    			margin-left: 20px;
    			cursor: pointer;
    			background-image: url(../images/share.png);
    			width: 44px;
    			height: 44px;
    		
    			&.vk {
    				margin-left: 0;
    				background-position: 0px 0px;
    				
    				&:hover {
    					background-position: 0px -44px;
    				}
    			}
    			
    			&.fb {
    				background-position: -44px 0px;
    				
    				&:hover {
    					background-position: -44px -44px;
    				}
    			}
    			
    			&.tw {
    				background-position: -88px 0px;
    				
    				&:hover {
    					background-position: -88px -44px;
    				}
    			}
    		}
    	}
    }
    
    .action {
    	.container {
    		width: 885px;
    		height: 436px;
    	}
    }
    
    .action, .me {
    	.title {
    		width: 212px;
    		height: 42px;
    		margin: 0 auto;
    		.bg('../images/title.png');
    	}
    	
    	.image {
    		width: @s;
    		height: @s;
    		.cover;
    		margin: 30px auto;
    	}
    	
    	.text {
    		font-size: 20px;
    		line-height: 1;
    		text-align: center;
    		margin-bottom: 30px;
    	}
    	
    	.drinked {
    		position: absolute;
    		left: 570px;
    		top: 72px;
    		width: 190px;
    	
    		.label {
    			font-size: 16px;
    		}
    		
    		.glasses {
    			position: absolute;
    			width: 108px;
    			top: 0;
    			right: 0;
    		
    			&__item {
    				float: left;
    				width: 31px;
    				height: 31px;
    				margin-right: 5px;
    				margin-bottom: 5px;
    				.bg('../images/glass.png');
    			}
    			
    			&__last {
    				float: left;
    				width: 50px;
    				height: 31px;
    				line-height: 31px;
    				font-size: 20px;
    				margin-right: 5px;
    				margin-bottom: 5px;
    				
    				&:empty {
    					display: none;
    				}
    			}
    		}
    	}
    	
    	.you {
    		@ss: 88px;
    		
    		position: absolute;
    		right: 0;
    		top: 0;
    	
    		&__image {
    			width: @ss;
    			height: @ss;
    			.cover;
    		}
    		
    		&__button {
    			width: @ss;
    			height: 51px;
    			cursor: pointer;
    			.btn('../images/b6.png');
    		}
    	}
    	
    	.panel {
    		text-align: center;
    	
    		.yes {
    			width: 216px;
    			height: 78px;
    			display: inline-block;
    			.btn('../images/b4.png');
    		}
    		
    		.no {
    			width: 390px;
    			height: 78px;
    			display: inline-block;
    			.btn('../images/b5.png');
    			margin-left: 60px;
    		}
    	}
    	
    	.drink {
    		.pos(756px, 100px);
    		.bg('../images/drink.png');
    		opacity: 0;
    		pointer-events: none;
    	}
    	
    	.drink_line {
    		opacity: 0;
    		.pos(756px, 10px, 0.5, 0.7);
    		background-color: #fff;
    		pointer-events: none;
    	}
    	
    	&.drink_now {
    		.image, .text, .panel, .drinked {
    			opacity: 0 !important;
    			pointer-events: none !important;
    		}
    		
    		.drink {
    			opacity: 1 !important;
    		}
    		
    		.drink_line {
    			opacity: 1 !important;
    			width: 0;
    			margin-left: 0;
    			.transition(@duration: 5s);
    		}
    	}
    }
    
    .register {
    	.container {
    		width: 676px;
    		height: 1504px;
    		.bg('../images/register.png');
    	}
    	
    	.button {
    		.pos(308px, 111px, 0.5, 1);
    		.btn('../images/b3.png');
    	}
    	
    	.video {
    		position: absolute;
    		width: 560px;
    		height: 315px;
    		top: 580px;
    		left: 80px;
    	}
    	
    	.form {
    		position: absolute;
    		width: 560px;
    		height: @s;
    		top: 1010px;
    		left: 80px;
    	
    		.photo {
    			position: absolute;
    			width: @s;
    			height: @s;
    			left: 0;
    			top: 0;
    			cursor: pointer;
    			background-image: url(../images/upload.png);
    			opacity: 0.8;
    			
    			&.ready {
    				display: block;
    				.cover;
    			}
    			
    			&:hover {
    				opacity: 1;
    			}
    			
    			&.wait {
    				&:after {
    					content: '';
    					position: absolute;
    					z-index: 2;
    					left: 0;
    					top: 0;
    					width: 100%;
    					height: 100%;
    					background-color: rgba(255, 255, 255, 0.75);
    					cursor: default;
    				}
    			}
    			
    			.qq-uploader {
    				position: absolute;
    				z-index: 1;
    				left: 0;
    				top: 0;
    				width: 100%;
    				height: 100%;
    				
    				.qq-upload-button {
    					position: absolute;
    					left: 0;
    					top: 0;
    					width: 100%;
    					height: 100%;
    					
    					div {
    						display: none;
    					}
    					
    					input {
    						position: absolute;
    						z-index: 2;
    						left: 0;
    						top: 0;
    						width: 100%;
    						height: 100%;
    					}
    				}
    				
    				.qq-upload-drop-area, .qq-drop-processing, .qq-upload-list {
    					display: none !important;
    				}
    			}
    		}
    		
    		.name, .age, .text {
    			position: absolute;
    			left: 0;
    			top: 0;
    			border: none;
    			line-height: 36px;
    			height: 36px;
    			padding: 0 9px;
    			font-size: 18px;
    			font-family: 'trivia-grotesk';
    			outline: none !important;
    		}
    		
    		.name {
    			top: 50px;
    			left: 240px;
    			width: 302px;
    			
    		}
    		
    		.age {
    			top: 110px;
    			left: 240px;
    			width: 152px;
    		}
    		
    		.text {
    			top: 299px;
			    left: 200px;
			    width: 342px;
    		}
    	}
    }
}