/* 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 {
	font-family: 'trivia-grotesk';

    .container {
    	position: relative;
    	margin: 0 auto;
    }
    
    .start, .action, .finish {
    	display: none;
    	
    	&.shown {
    		display: block;
    	}
    }
    
    .start {
    	.container {
    		width: 1083px;
    		margin: 0 auto;
    		height: 1300px;
    		background-image: url(../images/1.png);
    		background-repeat: no-repeat;
    		background-size: 100% auto;
    		background-position: 0px 50px;
    	}
    	
    	.a {
    		position: absolute;
    		left: 164px;
    		width: 120px;
    		height: 16px;
    	
    		&--1 {
    			top: 349px;
    		}
    		
    		&--2 {
    			top: 366px;
    		}
    	}
    	
    	.button {
    		position: absolute;
    		width: 296px;
    		height: 112px;
    		cursor: pointer;
    		bottom: 40px;
    		left: 50%;
    		margin-left: -148px;
    		background-image: url(../images/2.png);
    		opacity: 0.8;
    		
    		&:hover {
    			opacity: 1;
    		}
    	}
    }
    
    .action {
    	.container {
    		position: absolute;
    		width: 1200px;
    		height: 500px;
    		top: 50%;
    		left: 50%;
    		margin-top: -250px;
    		margin-left: -600px;
    	}
    	
    	.rules_button {
    		position: absolute;
    		right: 0;
    		top: 0;
    		height: 30px;
    		color: #FF0303;
    		text-decoration: underline;
    		font-size: 16px;
    		line-height: 1;
    		cursor: pointer;
    			
    		&:hover {
    			color: #000;
    		}
    	}
    	
    	.rules {
    		position: absolute;
    		z-index: 10;
    		left: 0;
    		top: 0;
    		width: 100%;
    		height: 100%;
    		background-color: fadeout(#F7FF2E, 10%);
    		display: none;
    		
    		&.shown {
    			display: block;
    		}
    		
    		&__title, &__text {
    			position: absolute;
    			left: 180px;
    			width: 600px;
    		}
    		
    		&__title {
    			top: 110px;
    			font-size: 22px;
    			line-height: 1;
    		}
    		
    		&__text {
    			top: 160px;
    			font-size: 16px;
    			line-height: 20px;
    		}
    		
    		&__ok {
    			position: absolute;
    			width: 164px;
    			height: 142px;
    			cursor: pointer;
    			top: 160px;
    			left: 860px;
    			background-image: url(../images/ok.png);
    			opacity: 0.8;
    			
    			&:hover {
    				opacity: 1;
    			}
    		}
    	}
    	
    	.team {
    		position: absolute;
    		width: 170px;
    		height: 280px;
    		top: 40px;
    		right: 0;
    		border: 2px solid #000000;
    		
    		.t_title {
    			font-size: 16px;
    			text-align: center;
    			line-height: 40px;
    		}
    		
    		.t_button {
    			position: absolute;
    			left: 13px;
    			bottom: -50px;
    			width: 146px;
    			height: 96px;
    			cursor: pointer;
    			background-color: #fff;
    			
    			&__image {
    				opacity: 0.8;
    				height: 100%;
    				background-image: url(../images/button2.png);
    			}
    			
    			&:hover {
    				.t_button__image {
    					opacity: 1;
    				}
    			}
    		
    			&.disabled {
    				pointer-events: none;
    			
    				.t_button__image {
    					opacity: 0.3;
    				}
    			}
    		}
    	
    		.t_items {
    			position: absolute;
    			width: 140px;
    			height: 180px;
    			left: 15px;
    			top: 40px;
    			
    			.t_item {
	    			position: absolute;
	    			width: 70px;
	    			height: 100px;
	    			cursor: pointer;
	    			.contain;
	    			
	    			&--1 {
	    				z-index: 1;
	    				left: 0;
	    				top: 0;
	    			}
	    			
	    			&--2 {
	    				z-index: 2;
	    				right: 0;
	    				top: 0;
	    			}
	    			
	    			&--3 {
	    				z-index: 3;
	    				left: 0;
	    				bottom: 0;
	    			}
	    			
	    			&--4 {
	    				z-index: 4;
	    				right: 0;
	    				bottom: 0;
	    			}
	    		}
    		}
    	}
    	
    	.add {
    		position: absolute;
    		left: 30px;
    		top: 260px;
    		width: 86px;
    		height: 123px;
    		cursor: pointer;
    		background-image: url(../images/button.png);
    		opacity: 0.8;
    		
    		&:hover {
    			opacity: 1;
    		}
    	}
    	
    	.person {
    		position: absolute;
    		width: 800px;
    		height: 400px;
    		left: 150px;
    		top: 0;
    	
    		.image {
    			position: absolute;
    			height: 100%;
    			width: 330px;
    			left: 0;
    			top: 0;
    			.contain;
    		}
    		
    		.info {
    			position: absolute;
    			height: 100%;
    			width: 430px;
    			right: 0;
    			top: 20px;
    		}
    		
    		.name {
    			color: #FA1106;
    			font-size: 26px;
    			line-height: 36px;
    			margin-bottom: 20px;
    		}
    		
    		.super {
    			color: #FA1106;
    			font-size: 18px;
    			line-height: 24px;
    			margin-bottom: 30px;
    		}
    		
    		.about {
    			font-size: 14px;
    			line-height: 18px;
    		}
    	}
    	
    	.slider {
    		width: 80%;
    		height: 80px;
    		position: absolute;
    		left: 10%;
    		bottom: 0;
    		
    		.flickity-prev-next-button {
    			width: 60px;
    			height: 60px;
    			.contain;
    			opacity: 0.8;
    			
    			&:hover {
    				opacity: 1;
    			}
    			
    			svg {
    				display: none;
    			}
    		
    			&.previous {
    				background-image: url(../images/arrow1.png);
    				left: -90px;
    			}
    			
    			&.next {
    				background-image: url(../images/arrow2.png);
    				right: -90px;
    			}
    		}
    	
    		.slide {
    			width: 110px;
    			height: 80px;
    			cursor: pointer;
    			
    			&.disabled {
    				opacity: 0.3;
    				pointer-events: none;
    			}
    			
    			.image {
    				width: 80px;
    				height: 80px;
    				margin: 0 auto;
    				background-color: #0702DB;
    				overflow: hidden;
    				.border-radius;
    				.cover;
    			}
    		}
    	}
    }
    
    .finish {
    	.container {
    		width: 900px;
    		padding: 50px 0;
    	}
    
    	.images {
    		position: relative;
    		height: 350px;
    		width: 100%;
    	
    		.image {
    			position: absolute;
    			height: 100%;
    			width: 300px;
    			top: 0;
    			.contain;
    		
    			&--1 {
    				z-index: 1;
    				left: 0px;
    			}
    			
    			&--2 {
    				z-index: 2;
    				left: 200px;
    			}
    			
    			&--3 {
    				z-index: 3;
    				left: 400px;
    			}
    			
    			&--4 {
    				z-index: 4;
    				left: 600px;
    			}
    		}
    	}
    	
    	.title {
    		font-size: 24px;
    		line-height: 28px;
    		text-align: center;
    		width: 750px;
    		margin: 0 auto;
    		margin-top: 30px;
    	}
    	
    	.fate {
    		width: 600px;
    		margin: 0 auto;
    		margin-top: 30px;
    		font-size: 14px;
    		line-height: 18px;
    	}
    	
    	.again {
    		display: inline-block;
    		margin-top: 30px;
    		margin-left: 150px;
    		padding: 10px 20px;
    		font-size: 16px;
    		cursor: pointer;
    		color: #000;
    		border: 2px solid #000;
    		
    		&:hover {
    			color: #F35423;
    			border-color: #F35423;
    		}
    	}
    
    	.shares {
    		font-size: 0;
    		width: 600px;
    		margin: 0 auto;
    		margin-top: 30px;
    	
    		.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;
    				}
    			}
    		}
    	}
    }
}