.parallax-slider{
	position: relative;
	width: 100%;
	height: 617px;
	display: block;
	overflow: hidden;
	margin: 0;
	top: 0;
	left: 0;
	-ms-transform: translateZ(0);
	transform: translateZ(0);

	@media (max-width: 767px) {
		height: 500px;
	}
	@media (max-width: 480px) {
		display: none !important;
	}
		.baseList{
			display: none;
		}
		#mainImageHolder{
			position: relative;
			width: 100%;
			height: 150%;
			top: 0;
			z-index: 1;
				.primaryHolder{
					position: absolute;
					width: 100%;
					height: 100%;
					top: 0;
					left: 0;
					z-index: 2;
						img{
							position: absolute;
							max-width: inherit;
						}
				}
				.secondaryHolder{
					position: absolute;
					width: 100%;
					height: 100%;
					top: 0px;
					left: 0px;
					z-index: 1;
						img{
							position: absolute;
							max-width: inherit;
						}
				}
		}
		#mainCaptionHolder{
			position: absolute;
			width: 100%;
			height: 150%;
			top: 0;
			left: 0;
			text-align: center;
			z-index: 2;
				.container{
					position: relative;
					top: 21%;
					width: 1170px;
					left: 50%;
					margin-left: -585px;

					@media (min-width: 980px) and (max-width: 1200px) {
						width: 940px;
						margin-left: -470px;
					}
					.ie8 & {
						width: 940px;
						margin-left: -470px;
					}
					@media (min-width: 768px) and (max-width: 979px) {
						width: 724px;
						top: 30%;
						margin-left: -362px;
					}
					@media (max-width: 767px) {
						width: 100%;
						margin-left: 0;
						left: 0;
						top: 20%;
						padding: 0;
						.box-sizing(border-box) !important;
					}
					.slider_caption {
						text-align: left;
						width: 1000px;

						@media (max-width: 1200px) {
							width: 100%;
						}
						.ie8 & {
							width: 100%;
						}
					}
						.primaryCaption{
							position: absolute;
							width: 100%;
							padding: 0 20px;
							.box-sizing(border-box);
						}
						.secondaryCaption{
							position: absolute;
							display: none !important;
							width: 100%;
						}
						h2{
							font: 500 italic 134px/1em @roboto;
							color: #fff;
							text-transform: uppercase;
							margin-bottom: 0;

							@media (max-width: 1200px) {
								font-size: 70px;
							}
							.ie8 & {
								font-size: 70px;
							}
						}
						h3{
							font: 500 italic 74px/1em @roboto;
							color: #cccccc;
							text-transform: uppercase;
							margin: -10px 0 18px;

							@media (max-width: 1200px) {
								font-size: 50px;
							}
							.ie8 & {
								font-size: 50px;
							}
						}
						p{
							font: 500 23px/32px @roboto;
							color: #fff;
							text-transform: none;
							margin-bottom: 30px;
						}
						.btn {
							margin: 0;
							font-size: 24px;
							font-weight: 900;
							padding: 15px 68px 15px 30px;
							color: #fff;
							background: url(images/logo-triangle.png) 100% 0;
							.transition;

							&:hover,
							&:active,
							&:focus {
								color: #000;
							}
						}
				}
		}
		&.zoom-fade-eff{
			#mainImageHolder{
				.primaryHolder{
					.opacity(100);
					.scale(1);
						&.animateState{
							.opacity(0);
							.scale(3);
						}
				}
				.secondaryHolder{
					.opacity(100);
						&.animateState{
							.opacity(0);
						}
				}
			}
			#mainCaptionHolder{
				.primaryCaption{
					.opacity(100);
						&.animateState{
							.opacity(0);
						}
				}
				.secondaryCaption{
					.opacity(100);
						&.animateState{
							.opacity(0);
						}
				}
			}
		}
		&.simple-fade-eff{
			#mainImageHolder{
				.primaryHolder{
					.opacity(100);
						&.animateState{
							.opacity(0);
						}
				}
				.secondaryHolder{
					&.animateState{
						.opacity(100);
							&.animateState{
								.opacity(0);
							}
					}
				}
			}
			#mainCaptionHolder{
				.primaryCaption{
					.opacity(100);
					.scale(1);
						&.animateState{
							.opacity(0);
						}
				}
				.secondaryCaption{
					.opacity(100);
						&.animateState{
							.opacity(0);
						}
				}
			}
		}
		&.slide-top-eff{
			#mainImageHolder{
				.primaryHolder{
					top: 0;
						&.animateState{
							top: -100%;
						}
				}
				.secondaryHolder{
					&.animateState{
						top: 0;
							&.animateState{
								top: 100%;
							}
					}
				}
			}
			#mainCaptionHolder{
				.primaryCaption{
					.opacity(100);
					.scale(1);
						&.animateState{
							.opacity(0);
						}
				}
				.secondaryCaption{
					.opacity(100);
						&.animateState{
							.opacity(0);
						}
				}
			}
		}
		.controlBtn{
			width: 40px;
			height: 60px;
			display: block;
			position: absolute;
			top: 50%;
			margin-top: -30px;
			cursor: pointer;
			z-index: 2;
				.innerBtn{
					width: 40px;
					height: 60px;
					font-size: 25px;
					line-height: 63px;
					text-align: center;
					color: #fff;
					display: block;
					position: relative;
					z-index: 1;
					background: #08C;
					.transition(all 0.3s ease);
				}
				.slidesCounter{
					width: 40px;
					height: 60px;
					background: #363636;
					display: block;
					position: absolute;
					top: 0;
					color: #fff;
					text-align: center;
					font-size: 16px;
					line-height: 60px;
					.transition(all 0.3s ease);
				}
				&.parallaxPrevBtn{
					left: 0;
						.innerBtn{
							border-radius: 0 3px 3px 0;
						}
						.slidesCounter{
							left: 0%;
							border-radius: 0 3px 3px 0;
						}
						&:hover{
							.innerBtn{
								background: #363636;
								border-radius: 0;
							}
							.slidesCounter{
								left: 100%;
							}
						}
				}
				&.parallaxNextBtn{
					right: 0;
						.innerBtn{
							border-radius: 3px 0 0 3px;
						}
						.slidesCounter{
							right: 0%;
							border-radius: 3px 0 0 3px;
						}
						&:hover{
							.innerBtn{
								background: #363636;
								border-radius: 0;
							}
							.slidesCounter{
								right: 100%;
							}
						}
				}
		}
		#paralaxSliderPagination{
			position: absolute;
			bottom: 0;
			padding: 0 0 69px;
			background: none;
			width: 100%;
			text-align: center;
			z-index: 2;
				ul{
					list-style: none;
					margin: 0 auto;
					width: 1170px;
					text-align: right;
					position: relative;
					height: 14px;
						li{
							width: 14px;
							height: 14px;
							display: inline-block;
							margin: 0 0 0 7px;
							border-radius: 50%;
							cursor: pointer;
							line-height: 14px;
							position: relative;
							background: #fff;
							.box-sizing(border-box);
							.transition(all 0.5s ease);

							&:first-child {
								margin: 0;
							}
								&:hover{
									background: @red;
								}
								&.active{
									background: @red;
								}
						}
				}
		}
		#previewSpinner{
			position: absolute;
			width: 50px;
			height: 50px;
			display: block;
			top: 50%;
			left: 50%;
			margin-left: -25px;
			margin-top: -25px;
			border-radius: 25px;
			z-index: 99;
		}
}