@font-face {
    font-family: 'oukwat-regular';
    src: url('fonts/oukwat-regular_b-webfont.eot');
    src: url('fonts/oukwat-regular_b-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/oukwat-regular_b-webfont.woff2') format('woff2'),
         url('fonts/oukwat-regular_b-webfont.woff') format('woff'),
         url('fonts/oukwat-regular_b-webfont.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

* {
	margin: 0;
	padding: 0;
}

html.show_action {
	.page.zahod {
		display: none;
	}
	.page.action {
		display: block !important;
	}
}

#page {
	
	.page {
		
		&.zahod {
			background: url(../images/bg.jpg) no-repeat center center;
			background-size: cover;
			
			.zah {
				position: relative;
				width: 1200px;
				height: 1053px;
				margin: 0 auto;
				background-position: center;
				background-image: url(../images/zahod.png);
				
				.a1 {
					position: absolute;
					left: 220px;
					top: 623px;
					width: 151px;
					height: 20px;
				}
				
				.a2 {
					position: absolute;
					left: 375px;
					top: 623px;
					width: 129px;
					height: 20px;
				}
				
				.start {
					position: absolute;
					bottom: 23px;
					left: 520px;
					width: 180px;
					height: 180px;
					cursor: pointer;
				}
			}
		}
		
		&.action {	
			display: none;
			background: url(../images/bg.jpg) no-repeat center center;
			background-size: cover;
			height: 100%;
			
			.text {
				position: absolute;
				display: table;
				width: 940px;
				left: 50%;
				top: 20%;
				margin-left: -(940px / 2);
				height: 63 * 4px;
				font-size: 54px;
				line-height: 63px;
				color: #fff;
				text-align: center;
				font-family: oukwat-regular;
				-webkit-font-smoothing: antialiased;
				
				.va {
					display: table-cell;
					vertical-align: middle;
				}
			}
			
			.generate {
				position: absolute;
				width: 152px;
				height: 161px;
				cursor: pointer;
				background-image: url(../images/marx_btn.png);
				background-position: 0px 0px;
				background-repeat: no-repeat;
				bottom: 3%;
				right: 2.5%;
				
				&:hover {
					background-position: 0px -161px;
				}
			}
			
			.sh {
				position: absolute;
				left: 50%;
				margin-left: -(470px / 2);
				bottom: 24%;
				width: 480px;
				z-index: 2000;
			
				.social {
					float: left;
					width: 150px;
					height: 45px;
					background-image: url(../images/btnShare.png);
					margin-right: 10px;
					cursor: pointer;
				
					&.fb {
						background-position: 0px 0px;
						
						&:hover {
							background-position: 0px -46px;
						}
					}
					
					&.vk {
						background-position: -330px 0px;
						
						&:hover {
							background-position: -330px -46px;
						}
					}
					
					&.tw {
						background-position: -165px 0px;
						
						&:hover {
							background-position: -165px -46px;
						}
					}
				}
			}
			
		}
		
	}
}

@media (max-height: 600px) {
	.sh {
		bottom: 10% !important;
	}
}