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

body, html {
	padding:  0px;
	margin:  0px;
	width: 100%;
	height:  100%;
}

.social-share {
	margin-top:  20px;
	margin-left: 20px;
	display: block!important;
	position: fixed;
	z-index: 200;
}

.box-sizing() {
	-webkit-box-sizing: border-box; /* Android ≤ 2.3, iOS ≤ 4 */
     -moz-box-sizing: border-box; /* Firefox 1+ */
          box-sizing: border-box;
}

.box-shadow() {
  -webkit-box-shadow: 4px 4px 6px 2px rgba(0,0,0,0.5); /* Android 2.3+, iOS 4.0.2-4.2, Safari 3-4 */
          box-shadow: 4px 4px 6px 2px rgba(0,0,0,0.5); /* Chrome 6+, Firefox 4+, IE 9+, iOS 5+, Opera 10.50+ */
}

.transition(@duration: 600ms) {
  -webkit-transition: all @duration ease;  /* Chrome 1-25, Safari 3.2+ */
     -moz-transition: all @duration ease;  /* Firefox 4-15 */
       -o-transition: all @duration ease;  /* Opera 10.50–12.00 */
          transition: all @duration ease;  /* Chrome 26, Firefox 16+, IE 10+, Opera 12.10+ */
}

.radius(@value:1000px) {
  -webkit-border-radius: @value; /* Android ≤ 1.6, iOS 1-3.2, Safari 3-4 */
          border-radius: @value; /* Android 2.1+, Chrome, Firefox 4+, IE 9+, iOS 4+, Opera 10.50+, Safari 5+ */

  /* useful if you don't want a bg color from leaking outside the border: */
  background-clip: padding-box; /* Android 2.2+, Chrome, Firefox 4+, IE 9+, iOS 4+, Opera 10.50+, Safari 4+ */
}

@width: 1200px;
@height: 600px;

.clear {
	clear: both;
}

.page {
	width: 100%;
	height: 100%;
	position: relative;
	min-width: @width;

	.unit {
	 	width: 100%;
	 	height: 100%;
	 	position: absolute;
	 	top: 0px;
	 	left: 0px;
	 	.transition;
	 
	 	.content {
	 		width: 100%;
		 	height: 100%;
		 	position: relative;
		 	background-size: cover;
		 	background-position: center center;
	 	
	 		.container {
	 			width: @width;
	 			height: @height;
	 			position: absolute;
	 			top: 50%;
	 			left: 50%;
	 			margin-top: -@height * 0.5;
	 			margin-left: -@width * 0.5;
	 		}
	 	}
	 	
	 	&.hidden {
	 		top: -200%;
	 	}
	}
	 
	.start {
		z-index: 100;
	
		.content {
			background-image: url( ../images/1.jpg );
		
			.container {
				font-family: MonoCondensed-Bold;
				color: #000000;
				
				.about {
					font-size: 18px;
					line-height: 20px;
					padding: 20px;
					.box-sizing;
					background: #ffffff;
					position: absolute;
					
					a {
						color: #000000;
					}
				}
				
				.rubric {
					width: 250px;
					height: 300px;
					font-size: 16px;
					line-height: 18px;
					background-color: #ffffff;
					top: 300px;
					left: 950px;
					padding: 20px;
					.box-sizing;
					position: absolute;
					
					a {
						color: #000000;
					}
				}
			
				.title {
					position: absolute;
					font-size: 70px;
					line-height: 84px;
					text-align: center;
					width: 700px;
					height: 170px;
					background: #ffffff;
					left: 250px;
					top: 0px;
					.box-shadow;
				}
				
				.lead {
					position: absolute;
					font-size: 20px;
					line-height: 46px;
					width: 540px;
					height: 46px;
					text-align: center;
					background: #ffffff;
					left: 330px;
					top: 200px;
					.box-shadow;
				}
				
				.description {
					position: absolute;
					font-size: 18px;
					line-height: 22px;
					width: 374px;
					height: 200px;
					background: #ffffff;
					left: 413px;
					top: 280px;
					.box-sizing;
					padding: 10px;
					.box-shadow;
				}
				
				.go {
					position: absolute;
					font-size: 70px;
					line-height: 80px;
					text-align: center;
					width: 240px;
					height: 80px;
					background: #ffffff;
					left: 480px;
					top: 520px;
					.box-shadow;
					cursor: pointer;
					.transition(120ms);
					
					&:hover {
						background-color: #000000;
						color: #ffffff;
					}
				}
			}
		}
	}
	
	.action {
		z-index: 50;
	
		.content {
			background-image: url( ../images/2.jpg );
		
			.container {
				.title {
					font-family: MonoCondensed-Bold;
					position: absolute;
					font-size: 32px;
					line-height: 40px;
					height: 40px;
					width: 100%;
					text-align: center;
					color: rgba( 255, 255, 255, 1 );
					text-shadow: #000000 1px 1px 2px;
				}
				
				.buttons-wrapper {
					width: 600px;
					margin: 0 auto;
					margin-top: 100px;
				
					.buttons {
						height: 50px;
						margin-top: 30px;
						
						.button {
							.radius( 5px );
							font-family: MonoCondensed-Bold;
							font-size: 18px;
							background-color: #ffffff;
							line-height: 50px;
							.box-sizing;
							padding: 0px 20px;
							cursor: pointer;
							.transition(100ms);
							
							&.inactive {
								opacity: 0.5;
								font-size: 16px;
							}
							
							&.active {
								cursor: default;
								font-size: 22px;
								.box-shadow;
							}
						}
					
						.left {
							width: 260px;
							float: left;
							
							.button {
								float: right;
								height: 50px;		
							}
						}
						
						.cross {
							text-align: center;
							font-size: 40px;
							line-height: 50px;
							color: rgba( 255, 255, 255, 1 );
							text-shadow: #000000 1px 1px 2px;
							width: 80px;
							float: left;
							height: 50px;
						}
						
						.right {
							width: 260px;
							float: left;
							
							.button {
								float: left;
								height: 50px;		
							}
						}
					}
				}
				
				.finish {
					width: 327px;
					height: 48px;
					background-image: url( ../images/result.png );
					position: absolute;
					top: 550px;
					cursor: pointer;
					left: 431px;
					
					&.disabled {
						opacity: 0.5;
						cursor: default;	
					}
				}
			}
		}
	}
	
	.result {
		z-index: 10;
	
		.content {
			background-image: url( ../images/3.jpg );
		
			.container {
				.again {
					width: 156px;
					height: 147px;
					background-image: url( ../images/OneMore.png );
					background-repeat: no-repeat;
					position: absolute;
					top: 200px;
					left: 1050px;
					cursor: pointer;
					
					&:hover {
						background-image: url( ../images/OneMoreHover.png );
					}
				}
			
				.field {
					background-color: #ffffff;
					width: 600px;
					height: 100%;
					margin: 0 auto;
					.box-shadow;
					.box-sizing;
					padding: 20px 60px;
				
					.car {
						width: 480px;
						height: 341px;
						background-size: cover;
						margin: 0 auto;
						.box-shadow;
					}
					
					.social {
						padding: 30px 0px 20px 0px;
						.button {
							float: left;
							width: 145px;
							height: 35px;
							cursor: pointer;
							margin-right: 20px;
							
							&.fb {
								background-image: url( ../images/fb.png );
								
								&:hover {
									background-image: url( ../images/fb_hover.png );
								}
							}
							
							&.vk {
								background-image: url( ../images/vk.png );
								
								&:hover {
									background-image: url( ../images/vk_hover.png );
								}
							}
							
							&.tw {
								background-image: url( ../images/twitter.png );
								margin-right: 0px;
								
								&:hover {
									background-image: url( ../images/twitter_hover.png );
								}
							}
						}
					}
					
					.description {
						font-family: MonoCondensed-Bold;
						font-size: 16px;
						line-height: 19px;
						
						a {
							color: #000000;
						}
					}
				}
			}
		}
	}
}