@import 'library.less';

body {
	font-family: futura-pt-condensed, Arial;
	font-weight: 500;
	line-height: 1;
	-webkit-font-smoothing: antialiased;
	background: #000;
	overflow: hidden;
}

#wrapper {
	
}

.main_menu {
	width: 150px;
	height: 100%;
	position: fixed;
	left: 0px;
	top: 0px;
	background: #fff;
	font-size: 20px;
	font-weight: 700;
	text-align: center;
	z-index: 50;
	font-family: futura-pt;
	font-weight: 700;
	min-height: 550px;
	.transition;
	
	.logo {
		display: block;
		width: 150px;
		height: 100px;
		background: url(../images/logo.png) no-repeat center center;
		cursor: pointer;
	}
	
	.return {
		display: none;
		position: absolute;
		top: 16%;
		left: 0px;
		width: 100%;
		height: 47px;
		background: url(../images/arrow.png) no-repeat center 0px;
		cursor: pointer;
		margin-top: 15px;
		
		&:hover {
			background-position: center -47px
		}
	}
	
	.custom_item {
		position: absolute;
		top: 35%;
		margin-top: -20px;
		left: 0px;
		width: 100%;
		
		.item {
			min-height: 53px;
		    padding-top: 63px;
		    background-repeat: no-repeat;
		    background-position: 64px top;
		    cursor: pointer;
		    line-height: 1;
		    font-size: 16px;
		    text-align: center;
			
			&:hover {
				color: #FF0201;
			}
		}
	}
	
	.test {
		position: absolute;
		bottom: 28%;
		width: 100%;
		left: 0px;
		font-size: 16px;
		padding-top: 38px;
		background: url(../images/test.png) no-repeat center top;
		
		span {
			display: none;
			font-size: 16px;
		}
		&:hover {
			color: #FF0201;
		}
	}
	
	.brand {
		position: absolute;
		display: block;
		bottom: 0px;
		width: 100%;
		height: 140px;
		background: url(../images/logos.png) no-repeat center center;
		cursor: pointer;
	}
	
	&--shown {
		.translate(0px, 0px) !important;
	}
}

.blocks {
	position: absolute;
	width: 100%;
	height: 100%;
	padding-left: 150px;
	background: #eee;
	background: url(../images/blocks_bg.jpg) no-repeat center center;
	background-size: 100%;
	background-origin: content-box;
	opacity: 1;
	.transition;
	.box-sizing;
	
	.block {
		position: relative;
		float: left;
		width: 25%;
		height: 100%;
		.transition;
		
		.button {
			position: absolute;
			width: 100%;
			height: 75px;
			left: 0px;
			top: 50%;
			margin-top: -37px;
			cursor: pointer;
			
			&--disabled {
				opacity: 0.5;
				pointer-events: none;
			}
			
			&:after {
				content: '';
				position: absolute;
				width: 186px;
				height: 323px;
				left: 50%;
				top: 90px;
				margin-left: -186px/2;
				background-position: top center;
				background-repeat: no-repeat;
			}
		}
		
		&--1 .button {
			background: url(../images/block_1.jpg) no-repeat center center;
		}
		&--2 .button {
			background: url(../images/block_2.jpg) no-repeat center center;
			&:after {background-image: url(../images/char_2.png);}
		}
		&--3 .button {
			background: url(../images/block_3.jpg) no-repeat center center;
			&:after {background-image: url(../images/char_3.png);}
		}
		&--4 .button {
			background: url(../images/block_4.jpg) no-repeat center center;
			&:after {background-image: url(../images/char_4.png);}
		}
		&--disabled {
			pointer-events: none;
		}
		
		&:hover {
			background: rgba(0,0,0,0.25);
		}
	}
	
	&--hidden {
		opacity: 0.2;
	}
}

.pages {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0px;
	left: 0px;
	padding-left: 150px;
	z-index: 20;
	overflow-y: auto;
	background: #000;
	.box-sizing;
	.transition;
	.translate(0, 100%);
	
	.page {
		display: none;
		position: absolute;
		left: 0px;
		top: 0px;
		width: 100%;
		overflow: hidden;
		
		.popups {
			position: absolute;
			left: 0px;
			top: 0px;
			width: 100%;
			height: 100%;
			background-size: 100%;
			background-repeat: no-repeat;
			background-position: left top;
			background-origin: content-box;
			padding-left: 150px;
			.transition;
			.box-sizing;
					
			.container {
				position: relative;
				width: 100%;
				height: 100%;
			}
			.popup {
				position: absolute;
				width: 30px;
				height: 30px;
				z-index: 1;
				opacity: 0.75;
				
				i {
					display: block;
					width: 30px;
					height: 30px;
					background: #fff;
					border-radius: 100px;
					box-shadow: 0px 2px 4px rgba(0,0,0,0.5);
					text-align: center;
					line-height: 30px;
					font-size: 20px;
					font-weight: 700;
					cursor: default;
					
					&:before {
						position: absolute;
						content: '';
						width: 150%;
						height: 150%;
						left: -25%;
						top: -25%;
						border-radius: 1000px;
					}
				}
				.text {
					position: absolute;
					display: none;
					background: #fff;
					padding: 30px 50px;
					box-shadow: 0px 2px 16px rgba(0,0,0,0.3);
					width: 420px;
					top: -25px;
					font-family: futura-pt;
					font-weight: 400;
					line-height: 22px;
					
					a {
						display: inline-block;
						font-size: 18px;
						color: #0953fb;
						text-decoration: underline;
						margin-bottom: 8px;
					}
					p {
						font-size: 16px;
						color: #000;
						word-break: break-word;
						
						a {
							font-size: 14px;
							margin-right: 10px;
						}
					}
					
					
					&:before {
						position: absolute;
						content: '';
						width: 30px;
						top: 0px;
						height: 100%;
					}
					&:after {
						position: absolute;
						content: '';
						width: 30px;
						top: 38px;
						height: 2px;
						background: #fff;
						z-index: 2;
					}
				}
				
				&--left {
					.text {
						right: 60px;
						
						&:before {
							right: -30px;
						}
						&:after {
							right: -30px;
						}
					}
				}
				
				&--right {
					.text {
						left: 60px;
						
						&:before {
							left: -30px;
						}
						&:after {
							left: -30px;
						}
					}					
				}
				
				&--center {
					.text {
						left: 15px;
						.translate(-50%, -100%);
						
						&:before {
							top: auto;
							left: 0px;
							bottom: -30px;
							height: 30px;
							width: 100%;
						}
						&:after {
							top: auto;
							height: 30px;
							width: 2px;
							bottom: -30px;
							left: 50%;
							margin-left: -1px;
						}
					}					
				}
				
				&--top_right {
					.text {
						top: auto;
						bottom: -7px;
						left: 60px;
						
						&:before {
							left: -30px;
						}
						&:after {
							left: -30px;
							top: auto;
							bottom: 21px;
						}
					}					
				}
				
				&:hover {
					color: #FF0201;
					z-index: 2;
					opacity: 1;
					
					.text {
						display: block;
					}
				}
			}
		}
		
		.article {
			position: absolute;
			width: 100%;
			height: 100%;
			left: 0px;
			top: 0px;
			z-index: 5;
			.transition;
			.translate(100%, 0%);
			
			.scroll-container {
				position: absolute;
				top: 0px;
				width: 100%;
				height: 100%;
				overflow-y: auto;
				padding-left: 150px;
				.box-sizing;
			}
			.close {
			  position: absolute;
			  top: 110px;
			  left: 50%;
			  margin-left: 500px;
			  width: 32px;
			  height: 32px;
			  opacity: 0.7;
			  cursor: pointer;
			  z-index: 20;
			}
			.close:hover {
			  opacity: 1;
			}
			.close:before, .close:after {
			  position: absolute;
			  left: 15px;
			  content: ' ';
			  height: 33px;
			  width: 3px;
			  background-color: #fff;
			}
			.close:before {
			  .rotate(45deg);
			}
			.close:after {
			  .rotate(-45deg);
			}
			.container {
				width: 810px;
				padding: 60px 75px;
				background: #fff;
				margin: 100px auto;
				font-family: futura-pt;
				font-weight: 400;
				.box-sizing;
				
				h2 {
					font-size: 50px;
					font-weight: 700;
					color: #F42E2F;
					text-transform: uppercase;
				}
				img {
					display: block;
					width: 100%;
					margin:  30px 0;
				}
				p {
					font-size: 20px;
					margin-bottom: 1em;
				}
			}
			
			&--shown {
				.translate(0%, 0%);
			}
		}
		
		&--1 {
			padding-top: 164.07142%;
			.popups {background-image: url(../images/block_1_bg.jpg);}
		}
		&--2 {
			padding-top: 164.07142%;
			.popups {background-image: url(../images/block_2_bg.jpg);}
		}
		&--3 {
			padding-top: 164.07142%;
			.popups {background-image: url(../images/block_3_bg.jpg);}
		}
		&--4 {
			padding-top: 164.07142%;
			.popups {background-image: url(../images/block_4_bg.jpg);}
		}
		
		&--shown {
			display: block;
		}
	}
	
	&--shown {
		.translate(0, 0%);
	}
	&--overflow_hidden {
		overflow: hidden !important;
		
		.popups {	
			opacity: 0.2;
		}
	}
}

.start {
	position: fixed;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	overflow-y: auto;
	background: #000 url(../images/bg.jpg);
	z-index: 100;
	.cover;
	.transition;
	
	.container {
		padding: 150px 0 70px 0;
		
		.logo {
			width: 1050px;
			height: 400px;
			margin: 0 auto;
			background: url(../images/title.png);
			.contain;
		}
		.text {
			width: 660px;
			line-height: 1.2;
			font-size: 24px;
			padding-top: 40px;
			color: #fff;
			margin: 0 auto;
		}
		.button {
			position: absolute;
			left: 50%;
			margin: -160px 0 0 360px;
			width: 245px;
			height: 245px;
			background: url(../images/start.png);
			cursor: pointer;
			opacity: 0.75;
			.translate(0px, -50%);
			
			&:hover {
				opacity: 1;
			}
		}
	}
	
	&--hidden {
		.translate(0, 100%);
	}
}

.social-shares {
	position: fixed;
	right: 40px;
	top: 30px;
	width: 38px;
	z-index: 100;
	
	.likely__widget {
		width: 50px;
		height: 50px;
		background: url(../images/shares.png);
		cursor: pointer;
		opacity: 0.75;
		
		.likely__icon {
			display: none;
		}
		
		&_facebook {
			background-position: 0px 0px;
		}
		&_vkontakte {
			background-position: 0px -100px;
		}
		&_twitter {
			background-position: 0px -50px;
		}
		
		&:hover {
			opacity: 1;
		}
	}
}

#preloader {
	position: fixed;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	overflow-y: auto;
	background: #101010;
	z-index: 200;
	.transition;
	
	img {
		position: absolute;
		display: block;
		left: 50%;
		top: 50%;
	}
}

.burger {
	display: none;
}

@media only screen and (max-width: 768px) {
	.mobile_styles !important;
	
	.main_menu {
		.translate(-100%, 0);
	}
}

.mobile_bg {
	display: none;
}

.mobile_styles {
	.start {
		font-family: futura-pt;
		font-weight: 400;
		
		.container {
			padding-top: 20px;
			padding-bottom: 0px;
		}
		.logo {
			width: auto;
			height: 130px;
			margin: 0 20px;
		}
		.text {
			width: auto;
			padding: 20px 20px 0 20px;
			font-size: 20px;
		}
		.button {
			position: static;
			margin: 30px auto 0 65px;
			.translate(0px, 0px) !important;
		}
	}
	.main_menu {
		width: 200px;
		
		.logo {
			width: 100%;
		}
	}
	.social-shares {
		display: none;
	}
	.burger {
		display: block;
		position: fixed;
		left: 10px;
		top: 10px;
		z-index: 49;
		width: 50px;
		height: 50px;
		background: url(../images/burger.png) no-repeat center center;
	}
	.blocks {
		padding-left: 0px;
		width: 100%;
		background: url(../images/mobile_bg.jpg) no-repeat center center;
		background-size: cover !important;
		
		.block {
			float: none;
			width: 100%;
			height: 25%;
		}
	}
	.pages, .popups {
		padding-left: 0px;
	}
	.custom_item {
		display: none;
	}
	.pages {
		.page {
			overflow-y: auto;
			padding-top: 0px;
			height: 100%;
			
			.mobile_bg {
				display: block;
				width: 100%;
				height: auto;
			}
			
			.article {
				position: static;
				height: auto;
				.translate(0px, 0px);
				
				.scroll-container {
					position: static;
					height: auto;
					overflow: visible;
					padding-left: 0px;
					
					.container {
						width: 100%;
						padding: 20px;
						margin: 0;
						
						img {
							width: 100%;
							height: auto;
						}
					}
				}
			}
			
			.popups {
				position: relative;
				height: auto;
				background: none;
				
				.container {
					height: auto;
					.translate(0px, 0px);
				}
				.popup {
					position: static;
					width: 100%;
					height: auto;
					opacity: 1;
					border-top: 1px solid #ddd;
					
					.text {
						position: static;
						display: block;
						width: 100%;
						padding: 20px;
						.box-sizing;
					}
					i {
						display: none;
					}
				}
			}
		}
	}
}