/**
 * Sliders
 * ========================================================
 */

/************* HTML Slider *************/

.hootslider-html-slide {
	cursor: -webkit-grab; cursor: -moz-grabbing; cursor: grab;
	overflow: hidden;
	// min-height: 360px;
	position: relative;
}
.hootslider-html-slide-img {
	//display: inline-block;
	position: relative;
	right: -50%;
	min-width: 100%;
	img {
		position: relative;
		left: -50%;
		//min-height: 100%;// @todo redundant unless we set 'height' of container (doesnt work with min-height set for container..) Hence users should upload images above 300px height (i.e. min-height of .hootslider-image-slide set above)
		//width: 100%;
		//max-width: none;
		min-width: 100%;
	}
}
.hootslider-html-slide-entry {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	.grid {
		display: table;
		height: 100%;
	}
	.column-1-2 {
		display: table-cell;
		vertical-align: bottom;
		float: none;
		padding-top: 20px;
		padding-bottom: 55px;
	}
}
	.hootslider-html-slide-title {
		display: inline-block;
		margin: 0;
		text-transform: uppercase;
		padding: 15px 25px;
		margin: 0 25px;
	}
	.hootslider-html-slide-content {
		display: inline-block;
		color: #fff;
		background: #444;
		background: rgba(0,0,0,0.6);
		color: #fff;
		padding: 7px 25px;
		margin: 0 25px;
		p { margin: @smallVerticalMargin 0; }
	}
	.hootslider-html-slide-button {
		margin-top: 5px;
	}

/*** Responsive HTML Slider ***/

// @media only screen and (max-width: @higherBreakPoint) {
// 	.hootslider-html-slide-img img { max-width: none; }
// }
@media only screen and (max-width: @breakPoint) {
	// .hootslider-html-slide-img img { height: 360px; max-width: none; min-width: initial;	}
	.hootslider-html-slide-entry { position: relative; }
	.hootslider-html-slide-entry .column-1-2 { padding: 0; }
	.hootslider-html-slide-title {
		padding: 5px 40px;
		margin: 0;
		display: block;
	}
	.hootslider-html-slide-content {
		padding: 1px 40px;
		margin: 0;
	}
}

/************* Image Slider *************/

.hootslider-image-slide { 
	cursor: -webkit-grab; cursor: -moz-grabbing; cursor: grab;
	position: relative;
	img { width: 100%; }
}
.hootslider-image-slide-caption {
	position: absolute;
	bottom: 10%;
	left: 0;
	margin: 0 50px;
	display: inline-block;
	padding: 10px 20px;
	font-family: inherit;
}

/*** Responsive Image Slider ***/

@media only screen and (max-width: @breakPoint) {
	.hootslider-image-slide-caption {
		position: relative;
		display: block;
		margin: 0;
		padding: 10px 20px;
	}
}

/************* Carousal Slider *************/

.hootslider-carousal-wrapper {
	margin: @verticalMargin 0;
	.lightSlider.fixedheight { height: auto !important; }
}
.hootslider-carousal-slide {
	cursor: -webkit-grab; cursor: -moz-grabbing; cursor: grab;
	.lightSlideCarousal {
		padding: 0 10px;
		margin: 5px 8px;
		border: solid 1px #ddd;
		.box-shadow( 3px 3px 0 0 rgba(80,80,80,0.1) );
	}
	.hootslider-carousal-slide-image { text-align: center; }
	.hootslider-carousal-slide-image,
	.hootslider-carousal-slide-content { margin: 10px 0; }
	h1, h2, h3, h4, h5, h6, .title {
		font-size: @baseFontSize;
		margin: 0;
		text-transform: uppercase;
		font-weight: bold;
		font-family: inherit;
		padding-top: 5px;
	}
	p { margin: @smallVerticalMargin/2 0; }
}