.colZoneContainer{font-family:Roboto;font-size:14px;background-color:#ffffff!important;overflow-x: visible;min-width:414px;width:100%;}

/**
 * Here's where everything gets included. You don't need
 * to change anything here, and doing so might break
 * stuff. Here be dragons and all that.
 */
/**
 * Default variables
 *
 * While these can be set with JavaScript, it's probably
 * better and faster to just set them here, compile to
 * CSS and include that instead to use some of that
 * hardware-accelerated goodness.
 */
.unslider {
width: 100%;
overflow: hidden;
margin: 0;
padding: 0;
position:relative;
margin-bottom:-6px;
border-bottom: 1px solid #535353;
}
.unslider-wrap {
position: relative;
}
.unslider-wrap.unslider-carousel > li {
float: left;
}
.unslider-vertical > ul {
height: 100%;
}
.unslider-vertical li {
float: none;
width: 100%;
}
.unslider-fade {
position: relative;
}
.unslider-fade .unslider-wrap li {
position: absolute;
left: 0;
top: 0;
right: 0;
z-index: 8;
}
.unslider-fade .unslider-wrap li.unslider-active {
z-index: 10;
}
.unslider ul, .unslider ol, .unslider li {
list-style: none;
/* Reset any weird spacing */
margin: 0;
padding: 0;
border: none;
}

.unslider li img{
width:100%;
max-height:500px;
border: none;
min-height:200px;
}

.unslider-arrow {
position: absolute;
left: 20px;
z-index: 2;
cursor: pointer;
}
.unslider-arrow.next {
left: auto;
right: 20px;
}


.unslider-nav { 
/* position the navigation dots over the slides */
position: absolute;
left: 0;
right: 0;
bottom: 0px;
z-index: 1000; /* Make sure the dots show over the images */
}

.unslider-nav ol {
list-style: none;
text-align: center;
}
.unslider-nav ol li {
display: inline-block;
width: 12px;
height: 12px;
margin: 1px;
background-color: rgba(255,255,255,0.2)!important;
border-radius: 10px;
overflow: hidden;
text-indent: -999em;
border: 1px solid rgba(255,255,255,1)!important;
cursor: pointer;
}
.unslider-nav ol li.unslider-active {
background: rgba(255,255,255,1.0)!important;
cursor: default;
border: 2px solid #fff!important;
}


@if($unslider-dot-navigation){
	.#{$unslider-namespace}-nav, %#{$unslider-namespace}-nav {
		ol {
			list-style: none;
			text-align: center;

			li {
				display: inline-block;
				width: 6px;
				height: 6px;
				margin: 0 4px;

				background: transparent;
				border-radius: 5px;

				overflow: hidden;
				text-indent: -999em;

				border: 2px solid $unslider-dot-colour;

				cursor: pointer;

				&.unslider-active {
					background: $unslider-dot-colour;
					cursor: default;
				}
			}
		}
	}
}



.#{$unslider-namespace}, %#{$unslider-namespace} {
	//Should either be relative or absolute
	//as long as it's not static, but we'll
	//set it using jQuery
	// position: relative;
	overflow: auto;
	margin: 0;
	padding: 0;

	&-wrap {
		position: relative;
		
		&.unslider-carousel > li {
			float: left;
		}
	}

	//Vertical sliders don't float left
	&-vertical {
		> ul {
			height: 100%;
		}

		li {
			float: none;
			width: 100%;
		}
	}

	//Fading needs everything to appear on top of
	//each other
	&-fade {
		position: relative;

		.unslider-wrap li {
			position: absolute;
			left: 0;
			top: 0;
			right: 0;
			z-index: 8;

			&.unslider-active {
				z-index: 10;
			}
		}
	}
	
	ul, ol, li {
		list-style: none;
		
		/* Reset any weird spacing */
		margin: 0;
		padding: 0;
		
		border: none;
	}

	&-arrow {
		position: absolute;
		left: 20px;
		z-index: 2;

		cursor: pointer;

		&.next {
			left: auto;
			right: 20px;
		}
	}
}