section.main  {
	top: 0;
	background-size: cover;
	background-repeat: no-repeat;
	background-image: url(/img/background.jpg);

	-webkit-perspective: 800px;
	perspective: 800px;

	-webkit-box-shadow: 
		inset 0 200px 100px -100px rgba(255, 255, 255, 0.7);
	box-shadow: 
		inset 0 200px 100px -100px rgba(255, 255, 255, 0.7);
}

section.terminal {
	top: 100%;
	-webkit-perspective: 800px;
	perspective: 800px;
}

.logo { 
	position: absolute;
	height: 8%;
	left: 38%;
	width: 24%;
	background-position: center center;
	background-size: contain;
	background-repeat: no-repeat;
	background-image: url(/img/logo.png);
}

.logo.home { 
	top: 7%;
}
.logo.terminal { 
	bottom: 4%;
}

.btn {
	color: #fff;
	font-size: 1.25em;
	text-shadow: 0 2px rgba(0, 0, 0, 0.25);
	text-align: center;

	-webkit-box-shadow: 
		inset 0 2px 0 0 rgba(255, 255, 255, 0.15);
	box-shadow: 
		inset 0 2px 0 0 rgba(255, 255, 255, 0.15);

	cursor: pointer;
}

.btn.start_step_button { 
	position: absolute;
	height: 17%;
	bottom: 0;
	left: 28%;
	right: 28%;
	background: #3564ad;

	box-shadow: inset 0 2px 0 0 rgba(255, 255, 255, 0.15);
	z-index: 0;

	-webkit-transition: all 0.2s linear;
	-o-transition: all 0.2s linear;
	-moz-transition: all 0.2s linear;
	transition: all 0.2s linear;
}

.btn.start_step_button:active {
	-webkit-transform:  rotateX(10deg);
	transform:  rotateX(10deg);
}

.btn.start_step_button .arrow {
	position: absolute;
	display: table-cell;
	vertical-align: middle;
	top: 42%;
	bottom: 42%;
	left: 26%;
	right: 26%;
	
	background-repeat: no-repeat;
	background-size: contain;
	background-position: left center;
	background-image: url(/img/arrow_d.png);
}

.btn.home_step_button {
	position: absolute;
	top: 0;
	height: 17%;
	left: 28%;
	right: 28%;
	background: #ce007e;
	box-shadow: none;
	z-index: 3;

	-webkit-transition: all 0.2s;
	-o-transition: all 0.2s;
	-moz-transition: all 0.2s;
	transition: all 0.2s;
}

.btn.home_step_button:active {
	-webkit-transform:  rotateX(-10deg);
	transform:  rotateX(-10deg);
}

.btn.home_step_button .arrow {
	position: absolute;
	top: 35%;
	bottom: 42%;
	left: 26%;
	right: 26%;

	background-repeat: no-repeat;
	background-size: contain;
	background-position: left center;
	background-image: url(/img/arrow_u.png);
}

.central_block {
	position: absolute;
	top: 24%;
	bottom: 16%;

	text-align: center;
	font-size: 1.25em;
	color: #fff;
	text-shadow: 0 2px 2px rgba(0, 0, 0, 0.25);

	overflow: hidden;
	z-index: 0;

	-webkit-perspective: 800px;
	perspective: 800px;

	-webkit-transition: all 0.2s ease-out;
	transition: all 0.2s ease-out;
}

.central_block.active {
	z-index: 1000;
}

.central_block.next.active:active {
	-webkit-transform:  rotateY(-10deg);
	transform:  rotateY(-10deg);
	
}
.central_block.prev.active:active {
	-webkit-transform:  rotateY(10deg);
	transform:  rotate(10deg);
}

.central_block.center {
	left: 28%;
	right: 28%;
	z-index: 10;
}

.central_block.prev.active {
	left: -25%;
	right: 81%;
}

.central_block.prev {
	left: -72%;
	right: 128%;
}

.central_block.next.active {
	left: 81%;
	right: -25%;
}

.central_block.next {
	left: 128%;
	right: -72%;
}
	
	.btn.left, .btn.right {
		position: absolute;
		display: none;
		top: 0;
		width: 50%;
		height: 100%;
	}

	.central_block.center .btn.left, .central_block.center .btn.right {
		display: none;
	}

		.btn.left p, .btn.right p{
			position: absolute;
			width: 100%;
			top: 13%;
		}

		.btn.left .arrow, .btn.right .arrow {
			position: absolute;
			top: 25%;
			bottom: 70%;
			left: 0;
			right: 0;
			background-repeat: no-repeat;
			background-position: center center;
			background-image: url(/img/arrow_l.png);
		}

	.btn.left {
		left: 0;
		z-index: 6;
	}
	.central_block.next .btn.left {
		display: block;
	}


		.btn.left .arrow {
			background-image: url(/img/arrow_r.png);
		}


	.btn.right {
		right: 0;
/*		background: #77387a;*/
		z-index: 9;
	}
	.central_block.prev .btn.right {
		display: block;
	}

		.btn.right .arrow {
			background-image: url(/img/arrow_l.png);
		}

/*	.btn.right:active {
		-webkit-transform:  rotateY(15deg);
		transform:  rotateY(15deg);
	}
*/
	.central_block p {
		position: relative;
		margin-top: 15%;
	}

	.central_block p:first-child {
		margin-top: 0%;
		top: 12%;
	}

	.central_block .text {
		position: relative;
		top: 12%;
		text-align: center;
		color: #fff;
		text-shadow: 0 2px 2px rgba(0, 0, 0, 0.25);
		z-index: 0;
	}

		.central_block .text p {
			top: 0;
			text-align: center;
			color: #fff;
			text-shadow: 0 2px 2px rgba(0, 0, 0, 0.25);

		}

		.central_block p.comment {
			font-size: 0.6em;
		}

		.central_block p.result {
			font-size: 0.7em;
		}

		.central_block .text .comment{
			margin-top: 1%;
		}

		.central_block .text .result{
			margin-top: 4%;
		}

		.central_block p.margin {
			margin-top: 20%;
		}

		.central_block.text h3{
			text-align: center;
			color: #fff;
			text-shadow: 0 2px 2px rgba(0, 0, 0, 0.25);
		}

.central_block#account_number {
	background: #3564ad;

	-webkit-box-shadow: 0 0 250px 0 rgba(66, 125, 217, 0.33), inset 0 2px 0 0 rgba(255, 255, 255, 0.2);
	box-shadow: 0 0 250px 0 rgba(66, 125, 217, 0.33), inset 0 2px 0 0 rgba(255, 255, 255, 0.2);
}
.central_block#consultant_number {
	background: #5a479b;

	-webkit-box-shadow: 0 0 250px 0 rgba(90, 71, 155, 0.33), inset 0 2px 0 0 rgba(255, 255, 255, 0.2);
	box-shadow: 0 0 250px 0 rgba(90, 71, 155, 0.33), inset 0 2px 0 0 rgba(255, 255, 255, 0.2);
}
.central_block#payment {
	background: #77387a;

	-webkit-box-shadow: 0 0 250px 0 rgba(156, 0, 207, 0.33), inset 0 2px 0 0 rgba(255, 255, 255, 0.2);
	box-shadow: 0 0 250px 0 rgba(156, 0, 207, 0.33), inset 0 2px 0 0 rgba(255, 255, 255, 0.2);
}
	.central_block#payment form input {
		font-family: "Tahoma_Regular";
	}

.central_block#phone_number {
	background: #e01b4c;

	-webkit-box-shadow: 0 0 250px 0 rgba(255, 30, 85, 0.33), inset 0 2px 0 0 rgba(255, 255, 255, 0.2);
	box-shadow: 0 0 250px 0 rgba(255, 30, 85, 0.33), inset 0 2px 0 0 rgba(255, 255, 255, 0.2);
}

	.central_block#phone_number form {
		top: 19%;
	}

.central_block#money_putting {
	background: #f05f23;

	-webkit-box-shadow: 0 0 250px 0 rgba(240, 35, 45, 0.33), inset 0 2px 0 0 rgba(255, 255, 255, 0.2);
	box-shadow: 0 0 250px 0 rgba(240, 35, 45, 0.33), inset 0 2px 0 0 rgba(255, 255, 255, 0.2);
}		
	.central_block#money_putting {
		font-size: 1.17em;
		font-family: "Tahoma_Regular";
	}

.central_block#loading {
	background: #feb911;

	-webkit-box-shadow: 0 0 250px 0 rgba(255, 192, 0, 0.45), inset 0 2px 0 0 rgba(255, 255, 255, 0.2);
	box-shadow: 0 0 250px 0 rgba(255, 192, 0, 0.45), inset 0 2px 0 0 rgba(255, 255, 255, 0.2);
}
.central_block#error {
	background: #6c6c6c;

	-webkit-box-shadow: 0 0 250px 0 rgba(178, 178, 178, 0.45), inset 0 2px 0 0 rgba(255, 255, 255, 0.2);
	box-shadow: 0 0 250px 0 rgba(178, 178, 178, 0.45), inset 0 2px 0 0 rgba(255, 255, 255, 0.2);
}

.central_block#done {
	background: #ce007e;

	-webkit-box-shadow: 0 0 250px 0 rgba(255, 109, 198, 0.45), inset 0 2px 0 0 rgba(255, 255, 255, 0.2);
	box-shadow: 0 0 250px 0 rgba(255, 109, 198, 0.45), inset 0 2px 0 0 rgba(255, 255, 255, 0.2);
}

	.gradient {
		position: relative;
		width: 100%;
		height: 100%;
		z-index: 0;
		background: -moz-linear-gradient(top, rgba(255, 255, 255, 0.05) 0%, rgba(0, 0, 0, 0.05) 100%); /* FF3.6+ */
		background: -webkit-gradient(linear, center top, center bottom, color-stop(0%,rgba(255, 255, 255, 0.05)), color-stop(100%,rgba(0, 0, 0, 0.1))); /* Chrome,Safari4+ */
		background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.05) 0%,rgba(0, 0, 0, 0.05) 100%); /* Chrome10+,Safari5.1+ */
		background: -o-linear-gradient(top, rgba(255, 255, 255, 0.05) 0%,rgba(0, 0, 0, 0.05) 100%); /* Opera 11.10+ */
		background: -ms-linear-gradient(top, rgba(255, 255, 255, 0.05) 0%,rgba(0, 0, 0, 0.05) 100%); /* IE10+ */
		background: linear-gradient(to bottom, rgba(255, 255, 255, 0.05) 0%,rgba(0, 0, 0, 0.05) 100%); /* W3C */
	}

	.content {
		position: relative;
		width: 100%;
		height: 100%;
	}

	.central_block.prev .content, .central_block.next .content {
		display: none;
	}
	.central_block.center .gradient {
		display: block;
	}

	.central_block form {
		position: relative;
		top: 24%;
		width: 58%;
		height: 60%;
		left: 21%;
		z-index: 1;
		overflow: hidden;
	}

		.central_block form input {
			width: 100%;
			height: 24%;
			padding-top: 0.1em;
			font-size: 1.2em;
			color: #121212;
			text-align: center;
			margin-bottom: 5%;
			border: 0;
			outline: 0;

			-webkit-box-shadow: inset 0 1px 5px rgba(119, 56, 122, 0.16);
			box-shadow: inset 0 1px 5px rgba(119, 56, 122, 0.16);

			-webkit-box-sizing: border-box;
			box-sizing: border-box;
		}

		.central_block form .button_cover {
			position: relative;
			float: left;
			width: 23.5%;
			height: 70%;
			margin-right: 2%;
			list-style: none;
		}

		.central_block form .button_cover:last-child {
			margin: 0;
		}

			.central_block form .button_cover .button {	
				position: relative;
				width: 100%;		
				height: 32%;
				margin-bottom: 7%;
				border: 0;
				outline: 0;
				background: #fff;
				color: #121212;
				font-size: 1em;
				text-shadow: none;

				-webkit-box-shadow:  0 2px 2px 0 rgba(0, 0, 0, 0.25);
				box-shadow:  0 2px 2px 0 rgba(0, 0, 0, 0.25);

				-webkit-transition: all 0.05s ease-out;
				transition: all 0.05s ease-out;

				cursor: pointer;
			}

			.central_block form .button_cover .button:last-child {	
				margin-bottom: 0%;
			}

			.central_block form .button_cover .button:active {
				box-shadow:  
					0 1px 0 0 rgba(255, 255, 255, 0.4), 
					inset 3px -2px 6px -3px rgba(0, 0, 0, 0.5),
					inset -3px -2px 6px -3px rgba(0, 0, 0, 0.5),
					inset 0px 50px 20px -20px rgba(255, 255, 255, 0.8),
					inset 0px -50px 20px -20px rgba(0, 0, 0, 0.1);
				background: #EEE;
				/*background: -webkit-linear-gradient(top, rgba(255, 255, 255, 1) 10%,#bababa 100%); */
			}

				.number_cover {
					display: table;
					width: 100%;
					height: 100%;
				}

					.number_cover .number {
						display: table-cell;
						width: 100%;
						height: 100%;
						text-align: center;
						vertical-align: middle;
						color: #000;
					}

						.number_cover .number .icon.backspace{
							position: absolute;
							top: 47%;
							bottom: 47%;
							left: 30%;
							right: 30%;
							background-position: center center;
							background-size: contain;
							background-repeat: no-repeat;
							background-image: url(/img/del.png);
						}

			.central_block form .button_cover .button:last-child {
				margin: 0;
			}
			.central_block form .button_cover .button.delete {
				height: 64%;
				padding-top: 7%;
			}

	.central_block .gradient .preloader {
		position: absolute;
		top: 40%;
		bottom: 45%;
		left: 21.5%;
		right: 21.5%;
		padding: 1% 1.2%;
		background: #fff;
		overflow: hidden;

		-webkit-box-sizing: border-box;
		box-sizing: border-box;
	}

		.central_block .gradient .preloader .preloader_mask {
			position: relative;
			width: 100%;
			height: 100%;
			/*background-size: cover;*/
			background-repeat: no-repeat;
			background-position: 1200px 0; 
			background-image: url(/img/loading.png);
		}