/* ---- customize styles here ---- */

.parallax-slider{
	height: 536px;

	@media (min-width: 768px) and (max-width: 979px) {
		height: 400px;
	}

	@media (max-width: 767px) {
		height: 300px;
	}
	
	#mainCaptionHolder{
		.container {
			top: 31%;

			@media (max-width: 767px) {
				top: 35%;
			}

		}
		.slider_caption {
			background: none;
			padding: 0 22px;
			color: #fff;

			@media (min-width: 1201px) and (max-width: 1600px) {
				padding: 0 80px;
			}

			@media (min-width: 979px) and (max-width: 1200px) {
				padding: 0 80px;
			}

			@media (min-width: 768px) and (max-width: 979px) {
				padding: 0 80px;
			}

			@media (max-width: 767px) {
				padding: 0 20px;
				text-align: center;
			}

			body.cherry-fixed-layout & {
				text-align: center;
			}

			strong {
				display: block;
				line-height: 110px;
				font-size: 110px;
				font-weight: 900;
				text-transform: uppercase;

				@media (min-width: 1200px) and (max-width: 1575px) {
					line-height: 90px;
					font-size: 90px;
				}

				html.ie8 & {
					line-height: 90px;
					font-size: 90px;
				}

				@media (min-width: 768px) and (max-width: 979px) {
					margin: 0 0 10px 0;
					line-height: 60px;
					font-size: 60px;
				}

				@media (max-width: 767px) {
					margin: 0 0 10px 0;
					line-height: 40px;
					font-size: 40px;
				}

				@media (max-width: 480px) {
					line-height: 30px;
					font-size: 30px;
				}

			}

			p {
				margin: -3px 0 49px 0;
				line-height: 29px;
				font-size: 29px;
				text-transform: uppercase;
				color: #fff;

				@media (min-width: 979px) and (max-width: 1575px) {
					line-height: 20px;
					font-size: 20px;
				}

				html.ie8 & {
					line-height: 20px;
					font-size: 20px;
				}

				@media (min-width: 768px) and (max-width: 979px) {
					margin: 0 0 19px 0;
					line-height: 18px;
					font-size: 18px;
				}

				@media (max-width: 767px) {
					margin: 0 0 19px 0;
					line-height: 14px;
					font-size: 14px;
				}

				@media (max-width: 480px) {
					line-height: 12px;
					font-size: 12px;
				}

			}

			a {
				background: #01b0cd;
				display: inline-block;
				margin: 0;
				padding: 15px 20px 15px 20px;
				.border-radius(4px);
				.transition(0.8s);
				vertical-align: top;
				line-height: 20px;
				font-family: @AsapFontFamily;
				font-size: 20px;
				font-weight: 400;
				text-transform: uppercase;
				text-decoration: none;
				color: #fff;

				@media (max-width: 480px) {
					padding: 10px 15px 10px 15px;
					font-size: 16px;
				}

				&:focus {
					background: #01b0cd;
					.transition(0.4s);
				}

				&:hover {
					background: #fb4554;
					.transition(0.4s);
				}

				&:after {
					margin: 0 0 0 19px;
					font-family: FontAwesome;
					font-size: 18px;
					content: '\f0a9';
				}

			}

		}

	}
	
	.controlBtn {
		
		.slidesCounter{
			display: none !important;
			font-size: 16px;
			line-height: 60px;
			color: @linkColor;
			background: @linkColorHover;
		}

	}

	.parallaxPrevBtn {
		background: rgba(0,0,0,0.2);
		display: block;
		width: 50px;
		height: 50px;
		overflow: hidden;
		margin: -25px 0 0 -785px;
		.border-radius(4px);
		.transition(0.8s);
		top: 50%;
		left: 50%;

		@media (min-width: 1301px) {
			margin: -25px 0 0 0;
			.border-radius(0 4px 4px 0);
			left: 0;
		}

		@media (min-width: 1200px) and (max-width: 1300px) {
			margin: -25px 0 0 -585px;
		}

		@media (min-width: 980px) and (max-width: 1200px) {
			margin: -25px 0 0 -470px;
		}

		@media (min-width: 768px) and (max-width: 979px) {
			margin: -25px 0 0 -362px;
		}

		@media (max-width: 767px) {
			margin: 0 0 0 -80px;
			top: 20px !important;
		}

		body.cherry-fixed-layout & {
			margin: 0 0 0 -80px;
			.border-radius(4px);
			top: 20px !important;
			left: 50%;
		}

		html.ie8 & {
			background: url(images/button.png) repeat 0% 0%;
			margin: -25px 0 0 0;
			.border-radius(0 4px 4px 0);
			left: 0;
		}

		&:hover {
			background: #01b0cd;
			.transition(0.4s);

			html.ie8 & {
				background: #01b0cd;
			}

		}

		&:before {
			display: block;
			line-height: 50px;
			font-family: FontAwesome;
			font-size: 21px;
			text-align: center;
			color: #fff;
			content: '\f053';
		}

	}

	.parallaxNextBtn {
		background: rgba(0,0,0,0.2);
		display: block;
		width: 50px;
		height: 50px;
		overflow: hidden;
		margin: -25px -785px 0 0;
		.border-radius(4px);
		.transition(0.8s);
		top: 50%;
		right: 50%;

		@media (min-width: 1301px) {
			margin: -25px 0 0 0;
			.border-radius(4px 0 0 4px);
			right: 0;
		}

		@media (min-width: 979px) and (max-width: 1300px) {
			margin: -25px -585px 0 0;
		}

		@media (min-width: 980px) and (max-width: 1200px) {
			margin: -25px -470px 0 0;
		}

		@media (min-width: 768px) and (max-width: 979px) {
			margin: -25px -362px 0 0;
		}

		@media (max-width: 767px) {
			margin: 0 -80px 0 0;
			top: 20px !important;
		}

		body.cherry-fixed-layout & {
			margin: 0 -80px 0 0;
			.border-radius(4px);
			top: 20px !important;
			right: 50%;
		}

		html.ie8 & {
			background: url(images/button.png) repeat 0% 0%;
			margin: -25px 0 0 0;
			.border-radius(4px 0 0 4px);
			right: 0;
		}

		&:hover {
			background: #01b0cd;
			.transition(0.4s);

			html.ie8 & {
				background: #01b0cd;
			}

		}

		&:before {
			display: block;
			line-height: 50px;
			font-family: FontAwesome;
			font-size: 21px;
			text-align: center;
			color: #fff;
			content: '\f054';
		}

	}
	
	#paralaxSliderPagination{
		bottom: 15px;
		
		&.buttons_pagination{
			ul{
				li{
					border-radius: 50%;
					margin: 3px;
					width: 10px;
					height: 10px;
					border: 2px solid @linkColor;
					
					&:hover, &.active{
						background: @linkColor;
					}
				}
			}
		}
		&.images_pagination{
			ul{
				li{
					margin: 3px;
					opacity:.5;
					
					&:hover, &.active{
						opacity:1;
					}
				}
			}
		}
	}
	
	#previewSpinner{	
		width: 50px;
		height: 50px;
		margin-left: -25px;
		margin-top: -25px;
		border-radius: 25px;
		background: url(parallax-slider/img/spinner.GIF) 50% 50% #fff no-repeat;
	}
}



/* ---- necessary slider settings  ---- */
/* ---- without the need doesn't change anything  ---- */

.parallax-slider{
	overflow: hidden;
	position:relative;
	-ms-transform: translateZ(0);
	transform: translateZ(0);

	.baseList{
		display: none;
	}
	
	
	#mainImageHolder{
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		z-index: 1;
		
		.primaryHolder, .secondaryHolder{
			position: absolute;
			width: 100%;
			height: 100%;
			top: 0;
			left: 0;
			
			.imgBlock {
				max-width: inherit;
				background-repeat: no-repeat;
				background-position: center;
				background-size: cover;
			}
		}
		.primaryHolder{
			z-index:2;
		}
		.secondaryHolder{
			z-index: 1;
		}		
	}
	
	
	#mainCaptionHolder{
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		z-index: 2;
		
		.container {
			position:relative;
		}
		
		.primaryCaption, .secondaryCaption {
			position: absolute;
			width: 100%;
			top:0;
			left:0;
		}

		.primaryCaption {
			a {
				padding-right: 19px;
			}
		}

	}
	
	
	.controlBtn{
		position: absolute;
		cursor: pointer;
		display: block;
		top: 50%;
		z-index: 2;
		
		.innerBtn{
			.transition(all 0.3s ease);
			position: relative;
			display:block;
			width: 100%;
			height: 100%;
			text-align: center;
			z-index: 1;
		}
		.slidesCounter{
			.transition(all 0.3s ease);
			position: absolute;
			top: 0;
			width: 60%;
			height: 100%;
		}
		
		&.parallaxPrevBtn{
			.slidesCounter{
				left: 0%;
				text-align:left;
			}
			&:hover{
				.slidesCounter{
					left: 100%;
				}
			}
		}
		&.parallaxNextBtn{
			.slidesCounter{
				right: 0%;
				text-align:right;
			}
			&:hover{
				.slidesCounter{
					right: 100%;
				}
			}
		}
	}
	
	
	#paralaxSliderPagination{		
		position: absolute;
		width: 100%;
		text-align: center;
		z-index: 2;
		
		ul{
			list-style: none;
			margin: 0;
			
			li{
				.transition(all 0.5s ease);
				cursor: pointer;
				display: inline-block;
			}
		}
	}
	
	
	#previewSpinner{	
		position: absolute;
		display: block;
		top: 50%;
		left: 50%;
		z-index: 99;
	}
	
	
	&.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);
					}
			}
		}
	}
}