

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

.parallax-slider{
	height: 815px;
	
	@media only screen and (min-width: 980px) and (max-width: 1200px) {
		height: 700px;
	}
	@media only screen and (min-width: 768px) and (max-width: 979px) {
		height: 650px;
	}
	@media only screen and (max-width: 767px) {
		height: 500px;
	}
	#mainCaptionHolder{
		.container {
			top:25%;

			@media only screen and (min-width: 980px) and (max-width: 1200px) {
				top: 20%;
			}
			@media only screen and (min-width: 768px) and (max-width: 979px) {
				top: 20%;
			}
			@media only screen and (max-width: 767px) {
				top: 5%;
			}
		}
		.slider_caption {
			text-align:center;
			color: @white;
			
			@media only screen and (max-width: 767px) {
				padding: 0 20px;
				.box-sizing(border-box);
			}
			img {
				display: inline-block;
				margin: 0 0 30px;

				@media only screen and (max-width: 1200px) {
					margin: 0 0 10px;
				}
				@media only screen and (max-width: 767px) {
					max-height: 180px;
				}
			}
			h1,
			h2 {
				font: bold 60px/1.2em @exo;
				margin: 0 0 30px;

				@media only screen and (min-width: 980px) and (max-width: 1200px) {
					font-size: 40px;
					margin: 0 0 10px;
				}
				@media only screen and (min-width: 768px) and (max-width: 979px) {
					font-size: 36px;
				}
				@media only screen and (max-width: 767px) {
					font-size: 30px;
					margin: 0 0 10px;
				}
			}
			h2 {
				font-size: 56px;

				@media only screen and (min-width: 980px) and (max-width: 1200px) {
					font-size: 36px;
				}
				@media only screen and (min-width: 768px) and (max-width: 979px) {
					font-size: 32px;
				}
				@media only screen and (max-width: 767px) {
					font-size: 28px;
				}
			}
			p {
				font: 300 36px/1.2em @exo;
				color: @blue;
				margin: 0;

				@media only screen and (min-width: 980px) and (max-width: 1200px) {
					font-size: 20px;
				}
				@media only screen and (min-width: 768px) and (max-width: 979px) {
					font-size: 20px;
				}
				@media only screen and (max-width: 767px) {
					font-size: 16px;
				}
			}
		}
	}
	
	.controlBtn {
		width: 55px;
		height: 55px;
		margin-top: -28px;
		
		.innerBtn{				
			font-size: 31px;
			line-height: 55px;
			color: #a9a9a9;
			background: #fff;
		}
		.slidesCounter{
			font-size: 16px;
			line-height: 55px;
			color: #fff;
			background: @blue;
		}
	}
	.controlBtn:hover {
		.innerBtn{
			color: #fff;
			background: @blue;
		}
	}
	
	.parallaxPrevBtn, .parallaxNextBtn {
		.transition(all 0.5s ease);
	}
	.parallaxPrevBtn {
		left: -55px;
	}
	.parallaxNextBtn {
		right: -55px;
	}
	&:hover {
		.parallaxPrevBtn{
			left:0;
		}
		.parallaxNextBtn{
			right:0;
		}
	}
	
	#paralaxSliderPagination{
		padding:10px 0;
		bottom: 95px;
		
		@media only screen and (max-width: 1200px) {
			bottom: 20px;
		}
		&.buttons_pagination{
			ul{
				counter-reset: list; 

				li{
					margin: 4px;
					width: 30px;
					height: 30px;
					font: 300 16px/30px @roboto;
					color: @white;
					background: rgba(255,255,255,0.5);
					
					&:before {
						counter-increment: list;
    					content: counter(list); 
					}
					&:hover, &.active{
						background: @blue;
					}
					&.active {
						font-weight: bold;
					}
				}
			}
		}
		&.images_pagination{
			ul{
				li{
					margin: 3px;
					opacity:.5;
					
					&:hover, &.active{
						opacity:1;
					}
				}
			}
		}
	}
	
	.parallax-slider-video-progress {
		background:@white;
	}
	
	#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;
	}
	
	.parallax-slider-video-progress-bar {
		position:absolute;
		overflow:hidden;
		top:0;
		left:0;
		width:100%;
		height:8px;
		background:url(parallax-slider/img/loader.gif) 0 0 repeat-x;
		z-index:5;
	}
	.parallax-slider-video-progress {
		width:0;
		height:100%;
		
		-webkit-transition: all .5s;
		   -moz-transition: all .5s;
			 -o-transition: all .5s;
				transition: all .5s;
	}
	
	.parallax-slider-vimeo-video {
		overflow:hidden;
		
		.parallax-slider-vimeo-iframe{
			margin-top:-100px;
			max-width:none;
		}
	}
	
	#mainImageHolder{
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		z-index: 1;
		
		.primaryHolder, .secondaryHolder{
			position: absolute;
			width: 100%;
			top: 0;
			left: 0;
			
			&:before {
				content: '';
				width: 100%;
				height: 100%;
				position: absolute;
				top: 0;
				left: 0;
				
				z-index: 2;
			}
			.obj-inner {
				max-width: inherit;
				background-repeat: no-repeat;
				background-position: center;
				background-size: cover;
			}
		}
		.primaryHolder{
			
		}
		.secondaryHolder{
			
		}		
	}
	
	
	#mainCaptionHolder{
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		z-index: 2;
		
		>a{
			position:absolute;
			top:0;
			left:0;
			width:100%;
			height:100%;
		}
		
		.container {
			position:relative;
		}
		
		.primaryCaption, .secondaryCaption {
			position: absolute;
			width: 100%;
			top:0;
			left:0;
		}
	}
	
	
	.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);
					}
			}
		}
	}
}