.transition( @target: all, @duration: 300ms, @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;
}

.rotate( @value: 0deg ) {
	-webkit-transform: rotate( @value );
	-moz-transform: rotate( @value );
	-ms-transform: rotate( @value );
	-o-transform: rotate( @value );
	transform: rotate( @value );
}

.transform-origin( @x, @y ) {
	transform-origin: @x @y;
	-ms-transform-origin: @x @y;
	-webkit-transform-origin: @x @y;
}

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

.contain {
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center center;
}

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

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

.clear {
	clear: both;
}

.pos(@w: auto, @h: auto, @l: 0, @t: 0, @z: 1) {
	position: absolute;
	z-index: @z;
	width: @w;
	height: @h;
	left: @l;
	top: @t;
}

.translate(@x, @y) {
	-webkit-transform: translate(@x, @y);
	-ms-transform: translate(@x, @y);
	transform: translate(@x, @y);
}

/**/

.loader {
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	margin: auto;
  font-size: 5px;
  text-indent: -9999em;
  border-top: 1.1em solid rgba(255, 255, 255, 0.2);
  border-right: 1.1em solid rgba(255, 255, 255, 0.2);
  border-bottom: 1.1em solid rgba(255, 255, 255, 0.2);
  border-left: 1.1em solid #ffffff;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-animation: load8 1.1s infinite linear;
  animation: load8 1.1s infinite linear;
}
.loader,
.loader:after {
  border-radius: 50%;
  width: 10em;
  height: 10em;
}
@-webkit-keyframes load8 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes load8 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}


.preloader {
	position: fixed;
	width: 100%;
	height: 100%;
	left: 0px;
	top: 0px;
	background: #000;
	z-index: 1000;
}


body {
	font-family: trivia-grotesk;
}

#controls {
	.social-shares {
		position: relative;
		width: 132 + 20px;
		margin: 0;
	}
	
	.container {
		position: fixed;
		left: 50%;
		margin-left: -320px/2;
		width: 320px;
		height: 45px;
		top: 20px;
		z-index: 100;
	}
	
	.button {
		position: fixed;
		width: 45px;
		height: 45px;
		border-radius: 100px;
		cursor: pointer;
		z-index: 100;
		
		&--prev {
			left: 30px;
			top: 20px;
			background: url(../images/leftArrow.png) no-repeat;
			
			&:hover {
				background-position: 0px -45px;
			}
		}
		&--next {
			right: 30px;
			top: 20px;
			background: url(../images/arrowRight.png) no-repeat;
			
			&:hover {
				background-position: 0px -45px;
			}
		}
		&--comments {
			position: static;
			float: left;
			width: 137px;
			background: #fff;
			border: 3px solid #D80D0D;
			border-radius: 15px;
			color: #D80D0D;
			text-transform: uppercase;
			font-size: 11px;
			line-height: 1.15;
			padding-top: 8px;
			text-align: center;
			cursor: pointer;
			.box-sizing;
			
			&:hover {
				background: #D80D0D;
				color: #fff;
			}
		}
		&--shares {
			position: static;
			float: left;
			width: 132px + 20px;
			margin-right: 30px;
			
			.b-share-btn__wrap {
				
			}
			.b-share__link {
				width: 44px !important;
				height: 44px !important;
				margin-right: 10px;
				border-radius: 100px;
				background-image: url(../images/share.png);
				background-repeat: no-repeat;
				background-color: transparent !important;
			}
			
			.b-share-btn__vkontakte {
				background-position: 0px 0px;
				
				&:hover {
					background-position: 0px -44px;
				}
			}
			.b-share-btn__facebook {
				background-position: -44px 0px;
				
				&:hover {
					background-position: -44px -44px;
				}
			}
			.b-share-btn__twitter {
				background-position: -88px 0px;
				margin-right: 0px;
				
				&:hover {
					background-position: -88px -44px;
				}
			}
			.b-share-icon, .b-share-counter {
				display: none !important;
			}
		}
	}
}

#scene {
	position: fixed;
	width: 100%;
	height: 100%;
	left: 0px;
	top: 0px;
	z-index: 2;
	overflow-y: auto;
	
	.belt {
		position: relative;
		width: 10000px;
		height: 100%;
		padding-right: 100px;
		
		.slide {
			position: relative;
			float: left;
			height: 100%;
			
			&--fixed {
				width: 1000px;
				height: 100%;
				background: #000;
			}
			
			&--cars {
				position: relative;
				width: 7000px;
				
				.car {
					position: absolute;
					bottom: 2%;
					left: 0px;
					z-index: 2;
					
					i {
						position: absolute;
						width: 47px;
						height: 47px;
						background: url(../images/info.png);
						cursor: pointer;
						left: 20%;
						top: 2%;
						
						&:hover {
							background-position: 0px -47px;
						}
					}
					
					&[data-car-id="23"] i {
						left: 10%;
					}
					
					
					
					&:nth-child(even) {
						bottom: 20%;
						z-index: 1;
						.translate(-1300px, 0);
					}
					
					&[data-car-id="24"] {
						.translate(-1580px, 0);
					}
					&[data-car-id="12"] {
						.translate(-1121px, 0);
					}
				}
				
			}
			
			&--1 {
				z-index: 10;
				
				.img {
					position: relative;
					width: 100%;
					height: 100%;
					background: url(../images/title.png) no-repeat center center;
					background-size: 30%;
				}
			}
			
			&--2 {
				z-index: 10;
				color: #fff;
				font-size: 16px;
				line-height: 1.15;
				
				.abs {
					position: absolute;
					top: 0;
					left: 0;
					right: 0;
					bottom: 0;
					margin: auto;
					width: 445px;
					height: 290px;
				}
				.title {
					font-size: 24px;
					margin-bottom: 20px;
				}
				.author {
					margin-bottom: 20px;
				}
				a {
					color: inherit;
					text-decoration: underline;
				}
			}
		}
	}
	
}

.blured {
	-webkit-filter: blur(10px) contrast(1.8) brightness(0.9);
	filter: blur(10px) contrast(1.8) brightness(0.9);
}

#bg {
	position: fixed;
	width: 100%;
	height: 100%;
	left: 0px;
	top: 0px;
	z-index: 1;
	
	.photo {
		position: absolute;
		top: 0px;
		width: 100%;
		height: 71%;
		top: 0px;
		z-index: 1;
		background: url(../images/bg.jpg) 0px -100px;
	}
	.road {
		position: absolute;
		width: 100%;
		height: 29%;
		padding-top: 80px + 205px;
		bottom: 0px;
		z-index: 1;
		background: url(../images/roadSign.png) 0px center;
	}
}

#popup_comments {
	position: fixed;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	background: fade(#DCDAD7, 80%);
	z-index: 50;
	left: -9999px;
	
	.close {
		position: absolute;
		top: 20px;
		right: 30px;
		width: 47px;
		height: 47px;
		background: url(../images/closeHover.png) no-repeat center center;
		cursor: pointer;
		z-index: 2;
		
		&:hover {
			opacity: 0.7;
		}
	}
	.comments_container {
		position: relative;
		width: 100%;
		margin: 0 auto;
		height: 100%;
		overflow-y: auto;
		z-index: 1;
		
		.label {
			color: #000;
		}
		.post-reply {
			background: #fff;
		}
		.comments-answer-container {
			width: 540px;
		}
	}
}

#popup {
	position: fixed;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	background: fade(#DCDAD7, 80%);
	z-index: 50;
	left: -9999px;
	
	.popup_container {
		position: absolute;
		left: 0px;
		top: 70px;
		bottom: 0px;
		right: 0px;
		margin: auto;
		width: 1000px;
		height: 483px;
		z-index: 2;
		
		.img {
			position: relative;
			float: left;
			width: 570px;
			height: 100%;
			background-position: center;
			background-size: contain;
			background-repeat: no-repeat;
			opacity: 0;
			.scale(0);
		}
		.text_container {
			position: relative;
			float: left;
			width: 365px;
			height: 100%;
			opacity: 0;
			margin-right: 44px;
			display: table;
			
			.va {
				display: table-cell;
				vertical-align: middle;
			}
			
			.title {
				font-size: 28px;
				line-height: 40px;
				margin-bottom: 15px;
			}
			.tag_car {
				font-size: 14px;
				line-height: 16px;
				margin-bottom: 15px;
			}
			.tag_sound {
				font-size: 14px;
				line-height: 16px;
				margin-bottom: 15px;
			}
			.text {
				font-size: 16px;
				line-height: 17px;
			}
		}
		.play {
			position: absolute;
			right: 120px;
			top: 35px;
			width: 47px;
			height: 47px;
			background: url(../images/horn.png) no-repeat center center;
			cursor: pointer;
			z-index: 5;
			
			&:hover {
				opacity: 0.7;
			}
		}
	}
	
	.close {
		position: absolute;
		top: 20px;
		right: 30px;
		width: 47px;
		height: 47px;
		background: url(../images/closeHover.png) no-repeat center center;
		cursor: pointer;
		
		&:hover {
			opacity: 0.7;
		}
	}
}

.page.popup_showed {
	#popup {
		left: 0px;
		
		.text_container {
			.transition(@duration: 0.35s,@delay: 0.15s);
			opacity: 1; 
		}
		.img {
			opacity: 1;
			.transition(@duration: 0.35s, @delay: 0.45s);
			.scale(1);
		}
	}
	#scene, #bg {
		.blured;
	}
	#controls {
		.button--prev, .button--next {
			display: none;
		}
	}
}

.page.comments_showed {
	#popup_comments {
		left: 0px;
	}
	#scene, #bg {
		.blured;
	}
	#controls {
		.button--prev, .button--next, .button--comments {
			display: none;
		}
		.container {
			display: none;
		}
	}
}

.page.first_section {
	#controls {
		.button--prev, .container {
			display: none;
		}
	}
}