.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;
}

.clear {
	clear: both;
}

.cover {
	background-size: cover;
	background-position: center center;
}

body {
	padding-bottom: 100px;
}

#page {
	@width: 1200px;
	@height: 720px;
	@bg_color: #6f6f91;

	position: relative;
	min-width: @width;
	background-color: @bg_color;
	padding-bottom: 400px;

	.intro {
		position: relative;
		width: 800px;
		margin: 0px auto;
		height: 500px;
		color: #ffffff;
		padding-bottom: 20px;
		
		div {
			position: absolute;
		}
		
		a {
			color: #ffffff;
			text-decoration: underline;
		}
		
		.circle {
			z-index: 1;
			width: 370px;
			height: 428px;
			background-image: url(../images/startShit.png);
			top: 70px;
		}
		
		.rubrics {
			z-index: 2;
			top: 140px;
			left: 158px;
			font-size: 18px;
			text-transform: uppercase;
			font-family: 'trivia-serif';
			
			a {
				font-family: 'trivia-serif';
			}
		}
		
		.title {
			z-index: 2;
			font-family: 'trivia-serif';
			top: 202px;
			left: 27px;
			font-size: 40px;
			text-transform: uppercase;
			text-align: center;
			line-height: 56px;
			letter-spacing: 12px;
		}
		
		.subtitle {
			font-family: 'trivia-serif';
			font-style: italic;
			top: 70px;
			left: 400px;
			font-size: 16px;
			line-height: 32px;
		}
		
		.description {
			font-family: 'trivia-serif';
			top: 150px;
			left: 400px;
			font-size: 16px;
			line-height: 26px;
		}
	}
	
	.action {
		position: relative;
		height: @height;
		/*border-top: 2px solid #0C0B09;
		border-bottom: 2px solid #0C0B09;*/
	
		#atm {
			display: block;
			position: absolute;
			z-index: 1;
			width: @width;
			height: @height;
			left: 50%;
			top: 50%;
			margin-left: -@width / 2;
			margin-top: -@height / 2;
		}
		
		.layer {
			position: absolute;
			z-index: 3;
			width: @width;
			height: @height;
			left: 50%;
			top: 50%;
			margin-left: -@width / 2;
			margin-top: -@height / 2;
		}
		
		.mask {
			position: absolute;
			z-index: 2;
			width: @width;
			height: @height;
			left: 50%;
			top: 50%;
			margin-left: -@width / 2;
			margin-top: -@height / 2;
			background-image: url(../images/atmOff.jpg);
			opacity: 1;
			.transition;
			.cover;
			
			&.hidden {
				opacity: 0;
			}
		}
		
		.zone {
			@w: 770px;
			@h: 690px;
			
			position: absolute;
			z-index: 4;
			width: @w;
			height: @h;
			left: 50%;
			top: 50%;
			margin-left: -@w / 2;
			margin-top: -@h / 2;
		}
		
		.no-yt {
			position: absolute;
			z-index: 4;
			width: 130px;
			height: 100px;
			left: 50%;
			margin-left: 470px;
			bottom: 0px;
			background-color: @bg_color;
			pointer-events: none;
		}
		
		.rur {
			position: absolute;
			z-index: 1;
			pointer-events: none;
			top: 50%;
			left: 50%;
			margin-left: -163px;
			margin-top: -45px;
			color: #ffffff;
			font-family: 'trivia-grotesk';
			font-size: 60px;
			text-align: center;
			text-shadow: 0px 0px 8px #ffffff;
			
			span {
				margin-top: 16px;
				font-size: 14px;
			}
		}
		
		.instruction {
			position: absolute;
			z-index: 4;
			pointer-events: none;
			font-family: 'trivia-grotesk';
			font-size: 14px;
			color: #ffffff;
			width: 500px;
			left: 50%;
			margin-left: -250px;
			text-align: center;
			top: 720px;
		}
	}
}