/* 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: 600ms, @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;
}

.translate(@x: 0, @y: 0, @z: 0) {
	-webkit-transform:       translate(@x, @y);
	-moz-transform: 	 translate(@x, @y);
	-ms-transform: 		 translate(@x, @y);
	-o-transform: 		 translate(@x, @y);
	transform:       translate(@x, @y);
	
	-webkit-transform:       translate3d(@x, @y, @z);
	-moz-transform: 	 translate3d(@x, @y, @z);
	-ms-transform: 		 translate3d(@x, @y, @z);
	-o-transform: 		 translate3d(@x, @y, @z);
	transform:       translate3d(@x, @y, @z);
}

html, body {
	font-family: 'trivia-serif';
	font-size: 14px;
	line-height: 20px;
	background-color: #E6E5E4;
}

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

@duration: 500ms;

.page {
	overflow: hidden;

	.pre {
		position: absolute;
		left: -200%;
		top: -200%;
		width: 10px;
		height: 100px;
	}

	.start {
		.container {
			width: 1200px;
			margin: 0 auto;
		}
		
		.title {
			height: 250px;
			background-image: url(../images/zahod.png);
			background-repeat: no-repeat;
			background-position: center center;
		}
		
		.columns {
			.column {
				float: left;
				height: 420px;
				
				&.left {
					width: 325px;
					background-image: url(../images/eve.png);
					background-repeat: no-repeat;
					background-position: center center;
				}
				
				&.center {
					width: 550px;
				}
				
				&.right {
					width: 325px;
					background-image: url(../images/lilith.png);
					background-repeat: no-repeat;
					background-position: center center;
				}
			}
		}
	}
	
	.action {
		position: relative;
		background-color: #000000;
		overflow: hidden;
		
		.result {
			position: absolute;
			z-index: 5;
			left: 0;
			top: 0px;
			width: 100%;
			height: 100%;
			background-color: rgba(0, 0, 0, 0.8);
			color: #ffffff;
			.translate(@y: -100%);
			.transition(@duration: @duration);
		
			.columns {
				width: 500px;
				padding-top: 100px;
				margin: 0 auto;
				
				.column {
					&.left {
						width: 212px;
						height: 404px;
						float: left;
						
					}
					
					&.right {
						width: 220px;
						float: right;
					}
				}
			}
			
			.title {
				font-size: 24px;
				line-height: 34px;
				margin-bottom: 20px;
			}
			
			.text {
				font-size: 14px;
				line-height: 20px;
			}
			
			.image {
				width: 100%;
				height: 100%;
			}
			
			.shares {
				text-align: center;
				margin-top: 40px;
			
				.share {
					display: inline-block;
					background-image: url(../images/ShareButtons.png);
					width: 149px;
					height: 40px;
					cursor: pointer;
					
					&.fb {
						background-position: 0px 0px;
						
						&:hover {
							background-position: 0px -40px;
						}
					}
					
					&.vk {
						background-position: -150px 0px;
						
						&:hover {
							background-position: -150px -40px;
						}
					}
					
					&.tw {
						background-position: -300px 0px;
						
						&:hover {
							background-position: -300px -40px;
						}
					}
				}
			}
			
			&.shown {
				.translate(@y: 0%) !important;
			}
			
			&.a {
				.image {
					background-image: url(../images/lilith.png);
				}
			}
			
			&.b {
				.image {
					background-image: url(../images/eve.png);
				}
			}
			
			&.c {
				.image {
					background-image: url(../images/evelilith.png);
				}
			}
			
			&.d {
				.column.left {
					display: none;
				}
				
				.column.right {
					float: none;
					margin: 0 auto;
				}
			}
		}
	
		.container {
			width: 1200px;
			margin: 0 auto;
		}
		
		.portrait {
			position: relative;
			background-image: url(../images/bg.jpg);
			width: 1200px;
			height: 630px;
			
			.info {
				position: absolute;
				z-index: 4;
				width: 300px;
				left: 50%;
				margin-left: -205px;
				text-align: center;
				color: #ffffff;
				padding-top: 25px;
				.translate(@y: -100%);
				.transition(@duration: @duration);
				
				a {
					color: #ffffff;
					text-decoration: underline;
				}
				
				.authors {
					
				}
				
				.rubrics {
					
				}
				
				&.shown {
					.translate(@y: 0%);
				}
			}
			
			.question {
				position: absolute;
				left: 100px;
				top: 70px;
				color: #ffffff;
				width: 250px;
				opacity: 0;
				.transition(@duration: @duration, @target: opacity);
			
				.count {
					font-size: 24px;
					line-height: 40px;
				}
			
				.text {
					font-size: 14px;
					line-height: 20px;
				}
				
				&.shown {
					opacity: 1;
				}
			}
			
			.secret {
				position: absolute;
				display: none;
				
				.mask {
					position: absolute;
					z-index: 3;
					width: 100%;
					height: 100%;
				}
				
				.button {
					position: absolute;
					z-index: 2;
					cursor: pointer;
					.transition(@duration: @duration, @target: top);
				
					&.start {
						width: 150px;
						height: 75px;
						background-image: url(../images/start.png);
						left: 20px;
						top: 200px;
						
						&.shown {
							top: 90px;
						}
					}
					
					&.a {
						width: 75px;
						height: 75px;
						background-image: url(../images/a.png);
						left: 0px;
						top: 210px;
						
						&.shown {
							top: 130px;
						}
					}
					
					&.b {
						width: 75px;
						height: 75px;
						background-image: url(../images/b.png);
						left: 72px;
						top: 160px;
						
						&.shown {
							top: 80px;
						}
					}
					
					&.c {
						width: 75px;
						height: 75px;
						background-image: url(../images/c.png);
						left: 142px;
						top: 200px;
						
						&.shown {
							top: 130px;
						}
					}
					
					&.d {
						width: 75px;
						height: 75px;
						background-image: url(../images/d.png);
						left: 220px;
						top: 190px;
						
						&.shown {
							top: 90px;
						}
					}
					
					&.active {
						z-index: 4;
					}
					
					&.disabled {
						display: none !important;
					}
				}
				
				&.s-1 {
					width: 300px;
					height: 630px;
					left: 451px;
					top: 0;
				
					.mask {
						background-image: url(../images/start-mask.png);
					}
				}
				
				&.s-2 {
					width: 300px;
					height: 630px;
					left: 451px;
					top: 0;
				
					.mask {
						background-image: url(../images/question-mask.png);
					}
				}
				
				&.shown {
					display: block;
				}
			}
		}
	}
}