
@import "compass";
@import "theme_variables";


/* The slider */
.iviewSlider {
	overflow: hidden;
}

/* The timer in the Slider */
.iview-timer {
	position: absolute;
	z-index: 100;
	@include border-radius(5px);
	cursor: pointer;
	div {
		@include border-radius(3px);
	}
}


/* The Preloader in the Slider */
#iview-preloader {
	position: absolute;
	z-index: 1000;
	@include border-radius(3px);
	border: #000 1px solid;
	padding: 1px;
	width: 100px;
	height: 3px;
	div {
		float: left;
		@include border-radius(2px);
		height: 3px;
		background: #000;
		width: 0px;
	}
}

/* The strips and boxes in the Slider */
.iview-strip {
	display:block;
	position:absolute;
	z-index:5;
}
.iview-block {
	display:block;
	position:absolute;
	z-index:5;
}

/* Direction nav styles (e.g. Next & Prev) */
.iview-directionNav {
	a {
		position: absolute;
		top: 50%;
		z-index: 9;
		cursor:pointer;
		width: 32px;
		height: 90px;
		margin-top: -20px;
		background: rgba(0, 0, 0, 0.25);
		color: #FFF;
		text-align: center;
		font-size: 0px;
		@include transition(left 0.3s ease-in-out);
		@include transition-property(left,right);
		&:before{
			content: "";
			font-family: $font-icon;
			font-size: 20px;
			line-height: 88px;
		}
		&.iview-prevNav {
			left: -50px;
			&:before{
				content: "\f104";
			}
		}
		&.iview-nextNav {
			right: -50px;
			&:before{
				content: "\f105";
			}
		}
		&:hover{
			background: $theme-color-default;
		}
	}
}
.iview.iview-hover{
	.iview-directionNav{
		a{
			&.iview-prevNav {
				left: 0;
			}
			&.iview-nextNav {
				right: 0;
			}
		}
	}
}
/* Control nav styles (e.g. 1,2,3...) */
.iview-controlNav {
	div{
		&.iview-items {	
			z-index: 25; 
			position: absolute;
			@include transition(opacity 0.2s ease-out);
			@include rounded-corners(3px 0 0 0);
			bottom: 0;		
			@media (min-width: 667px) {
				left: 252px;
				background: $white;
				padding: 15px 30px;
				height: 36px;
				&:before {
				    border-color: transparent transparent #fff;
				    border-style: solid;
				    border-width: 36px;
				    content: "";
				    position: absolute;
				    right: -36px;
				    top: -36px;
				}
			}
			@media (max-width: 666px) {
				text-align: center;
			    display: inline-block;
			    width: 100%;
			}
			ul{
				li{
					display: inline-block;
					position: relative;
					a{
						&.iview-control {
							width: 7px;
							height: 7px;
							@include border-radius(100%);
							background-color: #ebebeb;
							text-indent: -9999px;
							display: inline-block;
							cursor: pointer;
							&.active,
							&:hover {
								background-color: $theme-color-default; 
							}
							@media (min-width: 667px) {
								margin-right: 25px;
							}
							@media (max-width: 666px) {
								margin-right: 5px;
							}
						}
					}
				}
			}
			&.customHtmlBullet{
				padding: 0px;
				height: 96px;
				width: 100%;
				background: #FFF;
				position: absolute;
				left: 0;
				bottom: 0;
				text-align: left;
				z-index: 3;
				ul{
					li{
						width: 33%;
						height: 96px;
						float: left;
						padding: 0;
					}
				}
				a{
					&.iview-control {
						padding: 20px 25px 20px 16%;
						float: left;
						width: 100%;
						height: 100%;
						color: $theme-color-secondary;
						background: none;
						text-transform: uppercase;
						border-left: 1px solid #DDD;
						@include border-radius(0);
						text-indent: inherit;
						margin: 0;
						&.active,
						&:hover {
							background: #fafafa;
							cursor: pointer;
							&:after{
								font-family: $font-icon;
								content: "\f0d8";
								position: absolute;
							    top: -33px;
							    right: auto;
							    left: 50%;
							    margin-left: -10px;
								font-size: 40px;
								color: #fafafa;
							}
							span{
								background-color: $theme-color-default;
								color: $white;
							}
						}	
						h5{color: $theme-color-secondary; font-size: 14px; font-weight: 400;font-family: $font-family-base; line-height: 20px;}	
						span{
							@include border-radius(100%);
							@include box-shadow(0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12));
							background: #eaeaea;
							width: 56px;
							height: 56px;
							line-height: 56px;
							color: $theme-color-secondary;
							display: inline-block;
							text-align: center;
							font-family: $font-family-senary;
							font-size: 18px;
							margin: 0 18px 0 0;
							float: left;	
						}
						p{
							margin: 0;
							color: $text-color;
						}
					}
				}
			}
		}
	}
}


/* The video show in the Slider */
.iview-video-show {
	background: #000;
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: 101;
	.iview-video-container {
		position: relative;
		width: 100%;
		height: 100%;
		a{
			&.iview-video-close {
				position: absolute;
				right: 10px;
				top: 10px;
				background: #222;
				color: #FFF;
				height: 20px;
				width: 20px;
				text-align: center;
				line-height: 29px;
				font-size: 22px;
				font-weight: bold;
				overflow: hidden;
				@include border-radius(15px);
				&:hover{
					background: #444;
				}
			}
		}
	}
}