/* ==========================================================================
   Flexslider 
   ========================================================================== */

#slider {
	@include margin-trailer(1);
}

.flexslider {
	background: none;
	padding: 0;
	margin: 0;
	border: none;
	overflow: hidden;
	@include margin-trailer(1);
	@include box-shadow(0 0);
	.slides {
		display: block;
		padding: 0;
		margin: 0;
		overflow: hidden;
		@include border-radius(15px);
		@include margin-trailer(2);
		li {
			list-style: none;
		}
		img {
			@include border-radius(15px);
		}
	}
	.flex-control-thumbs {
		text-align:center;
		li {
			display: inline-block;
			float: none;
			width: 150px;
		  height: 150px;
			margin: 0 $base-line-height/2;
			img {
				width: 150px;
			  height: 150px;
				display: block;
				border: 10px solid #fff;
				outline:none;
				-webkit-user-select: none;
				-khtml-user-select: none;
				-moz-user-select: none;
				-o-user-select: none;
				user-select: none;
				@include border-radius(100%);
			}
		}
	}
	.flex-direction-nav {
		li {
			line-height: 40px;
			list-style: none;
			a {
				display: block;
				height: 40px;
				width: 40px;
				color: #fff;
			}
		}
	}
	&:hover {
		.flex-prev {
			left: 30px
		}
		.flex-next {
			right: 30px
		}
	}
}

.slider-caption {
	display: block;
	position: absolute;
	bottom: 0;
	width: 100%;
	color: #fff;
	font-family: $header-font;
	background: rgba(0,0,0,0.4);
	padding: $base-line-height*2;
	z-index: 99;
	overflow: hidden;
	text-align: center;
	@include border-bottom-left-radius(15px);
	@include border-bottom-right-radius(15px);
	.slider-title {
		color: #fff;
		font-weight: normal;
		@include margin-trailer(1);
		@include adjust-font-size-to(30px, 1);
		a {
			color: #fff;
		}
	}
	p {
		opacity: 0.8;
		font-weight: normal;
	}
	.slider-more {
		a {
			color: #fff;
			@include adjust-font-size-to(18px, 1);
		}
	}
}

@media only screen and ( max-width: 960px ) {

	.flexslider{
		.flex-control-thumbs {
			text-align:center;
			li {
				display: inline-block;
				float: none;
				width: 100px;
			  height: 100px;
				margin: 0 $base-line-height/2;
				img {
					width: 100px;
				  height: 100px;
					display: block;
					border: 10px solid #fff;
					@include border-radius(100%);
				}
			}
		}
	}

	.slider-caption {
		text-align: center;
		z-index: 99;
		padding-left: $hspace*2;
		padding-right: $hspace*2;
		@include rhythm(0, 1, 1, 0);
		.slider-title {
			@include margin-trailer(0.5);
			@include adjust-font-size-to(24px, 1);
			a {
				color: #fff;
			}
		}
		p {
			display: none;
		}
	}
}

@media only screen and ( max-width: 768px ) {

	.flexslider{
		.flex-control-thumbs {
			text-align:center;
			li {
				display: inline-block;
				float: none;
				width: 60px;
			  height: 60px;
				margin: 0 $base-line-height/2;
				img {
					width: 60px;
				  height: 60px;
					display: block;
					border: 5px solid #fff;
					@include border-radius(100%);
				}
			}
		}
	}

	.slider-caption {
		text-align: center;
		z-index: 99;
		padding-left: $hspace*2;
		padding-right: $hspace*2;
		@include rhythm(0, 1, 1, 0);
		.slider-title {
			@include margin-trailer(0.5);
			@include adjust-font-size-to(24px, 1);
			a {
				color: #fff;
			}
		}
		p {
			display: none;
		}
	}
}

@media only screen and ( max-width: 420px ) {

	.flexslider{
		margin: 0;
		.slides {
			margin: 0;
		}
		.flex-control-thumbs {
			display: none;
			text-align:center;
			li {
				display: inline-block;
				float: none;
				width: 60px;
			  height: 60px;
				margin: 0 $base-line-height/2;
				img {
					width: 30px;
				  height: 30px;
					display: block;
					border: none;
					@include border-radius(100%);
				}
			}
		}
	}

	.slider-caption {
		position: relative;
		text-align: center;
	  background: rgba(0,0,0,0.8);
		z-index: 99;
		padding-left: $hspace;
		padding-right: $hspace;
		@include rhythm(0, 1, 1, 0);
		.slider-title {
			@include margin-trailer(0.5);
			@include adjust-font-size-to(16px, 1);
			a {
				color: #fff;
			}
		}
		p {
			display: none;
		}
	}
}