@font-face {font-family: 'Sirin';src: url('webfonts/2CECCB_0_0.eot');src: url('webfonts/2CECCB_0_0.eot?#iefix') format('embedded-opentype'),url('webfonts/2CECCB_0_0.woff2') format('woff2'),url('webfonts/2CECCB_0_0.woff') format('woff'),url('webfonts/2CECCB_0_0.ttf') format('truetype');}

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

.box-sizing {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

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

.clear {
	clear: both;
}

.scale(@value: 1) {
	-webkit-transform: scale( @value );
	-moz-transform: scale( @value );
	-ms-transform: scale( @value );
	-o-transform: scale( @value );
	transform: scale( @value );
}

.border-radius( @value: 1000px ) {
	-webkit-border-radius: @value;
	border-radius: @value;
	-webkit-background-clip: padding-box; 
	-moz-background-clip: padding; 
	background-clip: padding-box;
}

.part-radius( @tl: 0px, @tr: 0px, @br: 0px, @bl: 0px ) {
	border-radius: @tl @tr @br @bl;
     -moz-border-radius: @tl @tr @br @bl;
     -webkit-border-radius:  @tl @tr @br @bl;
}

/**/

body, html {
	width: 100%;
	height: 100%;
}

@black: #000000;
@red: #FF231A;
@white: #ffffff;

.show-hide {
	pointer-events: none;
	.transition;
	.scale(1.3);
	opacity: 0;
	
	&.shown {
		.scale(1);
		opacity: 1;
		pointer-events: auto;
	}
}

#page {
	@width: 1200px;
	@height: 600px;
	min-height: 700px;

	position: relative;
	width: 100%;
	height: 100%;
	overflow: hidden;
	
	.chapters-wrapper {
		position: absolute;
		z-index: 5;
		width: 100%;
		height: 100%;
		left: 0px;
		top: 0px;
		overflow: hidden;
		background-color: fadeout(@black, 30%);
		.show-hide;
	
		.chapters {
			position: absolute;
			z-index: 2;
			left: 50%;
			top: 50%;
			width: @width;
			height: @height;
			margin-left: -@width / 2;
			margin-top: -@height / 2;
			
			.chapter {
				position: absolute;
			
				.name {
					position: absolute;
					color: @red;
					font-family: 'Sirin';
					text-align: center;
					font-size: 90px;
					line-height: 80px;
					cursor: pointer;
					
					&:hover {
						color: @white;
					}
				}
			}
		}
	}

	.intro {
		position: relative;
		z-index: 1;
		width: 100%;
		height: 100%;
		background-color: @black;
		background-image: url(../images/zahod.jpg);
		background-size: 100%;
		background-repeat: no-repeat;
		background-position: center center;
	
		.container {
			position: absolute;
			z-index: 1;
			left: 50%;
			top: 50%;
			width: @width;
			height: @height;
			margin-left: -@width / 2;
			margin-top: -@height / 2;
		
			.label {
				position: absolute;
				width: 500px;
				height: 14px;
				top: 50%;
				margin-top: -7px;
				left: 50%;
				margin-left: -250px;
				color: @white;
				font-size: 14px;
				font-family: 'trivia-grotesk';
				text-transform: uppercase;
				text-align: center;
			}
			
			.title {
				position: absolute;
				width: 1000px;
				height: 14px;
				top: 320px;
				left: 50%;
				margin-left: -500px;
				color: @white;
				font-size: 90px;
				line-height: 80px;
				font-family: 'Sirin';
				text-transform: uppercase;
				text-align: center;
				
				.red {
					color: @red;
				}
			}
			
			.button {
				cursor: pointer;
				position: absolute;
				width: 320px;
				height: 60px;
				top: 510px;
				left: 50%;
				margin-left: -160px;
				color: @white;
				font-size: 14px;
				line-height: 60px;
				font-family: 'trivia-grotesk';
				text-transform: uppercase;
				text-align: center;
				background-color: @red;
				.border-radius(10px);
				
				&:hover {
					background-color: darken(@red, 10%);
				}
			}
			
			.description {
				position: absolute;
				width: 230px;
				top: 296px;
				left: 17px;
				color: @white;
				font-size: 14px;
				line-height: 17px;
				font-family: 'trivia-grotesk';
			
				a {
					color: @red;
					text-decoration: underline;
				}
			}
		}
	}
	
	.sections {
		@screen_width: 990px;
		@screen_width_p: 100% * @screen_width / @width;
		@panel_width_p: 100% - @screen_width_p;
	
		position: absolute;
		z-index: 2;
		width: 100%;
		height: 100%;
		top: 0px;
		left: 0px;
		.show-hide;
		
		.section {
			position: absolute;
			z-index: 1;
			width: 100%;
			height: 100%;
			overflow: hidden;
			top: 0px;
			left: 0px;
			display: none;
		
			.panel {
				position: absolute;
				z-index: 2;
				width: @panel_width_p;
				height: 100%;
				top: 0px;
				.cover;
				background-image: url(../images/next_bg.jpg);
				
				.button {
					position: absolute;
					z-index: 1;
					width: 168px;
					height: 115px;
					left: 50%;
					top: 50%;
					margin-left: -84px;
					margin-top: -57px;
					background-position: 0px 0px;
					cursor: pointer;
					
					&:hover {
						background-position: 0px -115px;
					}
				}
			}
			
			.screen {
				position: absolute;
				z-index: 1;
				width: @screen_width_p;
				height: 100%;
				top: 0px;
				display: none;
				.box-sizing;
				background-image: url(../images/zahod.jpg);
				.cover;
			
				.container {
					position: absolute;
					z-index: 1;
					width: @screen_width;
					height: @height;
					left: 50%;
					top: 50%;
					margin-left: -@screen_width / 2;
					margin-top: -@height / 2;
				
					.back {
						position: absolute;
						z-index: 1;
						width: 139px;
						height: 61px;
						background-image: url(../images/back.png);
						background-position: 0px 0px;
						left: 0px;
						top: 0px;
						cursor: pointer;
						
						&:hover {
							background-position: 0px -61px;
						}
					}
					
					.title {
						position: absolute;
						z-index: 1;
						width: 700px;
						top: 0px;
						left: 150px;
						color: @red;
						font-family: 'Sirin';
						font-size: 90px;
						line-height: 80px;
					}
					
					.label {
						position: absolute;
						z-index: 1;
						width: 120px;
						top: 105px;
						left: 200px;
						color: @white;
						font-family: 'trivia-serif';
						font-size: 35px;
						line-height: 42px;
						font-style: italic;
					}
					
					.description {
						position: absolute;
						z-index: 1;
						width: 500px;
						top: 105px;
						left: 350px;
						color: @white;
						font-family: 'trivia-grotesk';
						font-size: 14px;
						line-height: 17px;
					}
					
					.item {
						@s: 120px;
					
						position: absolute;
						cursor: pointer;
						width: @s;
						top: 0px;
						left: 0px;
					
						.image {
							width: @s;
							height: @s;
						}
						
						.name {
							color: @red;
							font-size: 18px;
							line-height: 21px;
							text-align: center;
							font-family: 'trivia-grotesk';
							margin-top: 10px;
							width: @s;
						}
						
						&:hover, &.active {
							.name {
								color: @white;
							}
						}
					}
				}
				
				.future-button {
					background-color: @red;
					color: @white;
					font-family: 'trivia-grotesk';
					font-size: 12px;
					line-height: 16px;
					text-align: center;
					text-transform: uppercase;
					position: absolute;
					z-index: 1;
					width: 200px;
					height: 90px;
					padding-top: 34px;
					bottom: 0px;
					right: 0px;
					cursor: pointer;
					.part-radius(@tl: 50px);
					.box-sizing;
				}
			
				&.before {
				}
				
				&.after {
				}
			}
			
			&.on-before {
				.panel {
					right: 0px;
					
					.button {
						background-image: url(../images/next.png);
					}
				}
				
				.screen {
					left: 0px;
					
					&.before {
						display: block;
					}
				}
			}
			
			&.on-after {
				.panel {
					left: 0px;
					
					.button {
						background-image: url(../images/do.png);
					}
				}
				
				.screen {
					right: 0px;
					
					&.after {
						display: block;
					}
				}
			}
			
			&.shown {
				display: block;
			}
		}
	}
	
	.popups {
		position: absolute;
		z-index: 3;
		width: 100%;
		height: 100%;
		top: 0px;
		left: 0px;
		background-color: fadeout(@black, 30%);
		.show-hide;
	
		.popup {
			@w: 700px;
			@h: 400px;
		
			position: absolute;
			z-index: 1;
			display: none;
			width: @w;
			height: @h;
			left: 0;
			top: 0;
			right: 0;
			bottom: 0;
			margin: auto;
			background-color: @white;
			
			.title {
				background-color: @red;
				text-align: center;
				padding: 30px;
				color: @white;
				font-family: 'Sirin';
				font-size: 70px;
			}
			
			.box {
				background-color: @white;
				padding: 30px 50px;
				
				.image {
					margin-right: 50px;
					width: 120px;
					height: 120px;
					float: left;
					.cover;
				}
				
				.content {
					float: left;
					width: @w - 50px * 3 - 120px;
					font-family: 'trivia-grotesk';
					font-size: 16px;
					line-height: 19px;
					color: @black;
				}
			}
			
			.close {
				position: absolute;
				width: 61px;
				height: 61px;
				background-image: url(../images/cross.png);
				background-position: 0px 0px;
				cursor: pointer;
				right: -30px;
				top: -30px;
				
				&:hover {
					background-position: 0px -61px;
				}
			}
			
			&.no-image {
				.box {
					.image {
						display: none;
					}
					
					.content {
						width: auto;
					}
				}
			}
			
			&.shown {
				display: block;
			}
		}
	}
}