@keyframes herotext {
	0% {
		transform: translate(-100px,0px);
		opacity: 0;
	}
	
	100% {
		transform: translate(0px,0px);
		opacity: 1;
	}
}

@-webkit-keyframes herotext {
	0% {
		-webkit-transform: translate(-100px,0px);
		opacity: 0;
	}
	
	100% {
		-webkit-transform: translate(0px,0px);
		opacity: 1;
	}
}

@-moz-keyframes herotext {
	0% {
		-moz-transform: translate(-100px,0px);
		opacity: 0;
	}
	
	100% {
		-moz-transform: translate(0px,0px);
		opacity: 1;
	}
}

.heroImageIeMask {
	display: none;
}

.IE {
	.featureHeader {
		.heroImageIeMask {
			display:block;
			position: absolute;
			top: 0px;
			left: 0px;
			right: 0px;
			height: 200px;
			z-index:4;
			background: -moz-linear-gradient(top, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0) 100%); /* FF3.6+ */
			background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.65)), color-stop(100%,rgba(0,0,0,0))); /* Chrome,Safari4+ */
			background: -webkit-linear-gradient(top, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); /* Chrome10+,Safari5.1+ */
			background: -o-linear-gradient(top, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); /* Opera 11.10+ */
			background: -ms-linear-gradient(top, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); /* IE10+ */
			background: linear-gradient(to bottom, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); /* W3C */
			filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6000000', endColorstr='#00000000',GradientType=0 ); /* IE6-9 */
		}
		
		.owl-controls {
			.owl-dot.active {
				span {
					width: 8px !important;
					height: 8px !important;
				}
			}
		}
	}
}


.featureHeader {
	min-height: 80px;
	
	position:relative;
	z-index:1;
	top: 0px;
	
	.owl-carousel {
		overflow: hidden;
	}
	
	
	
	.owl-controls {
		position: relative;
		
		
		.owl-dots {
			
				position: absolute;
				bottom: 20px;
				left: 50%;
				z-index:2;
				transform: translateX(-50%);
				-webkit-transform: translateX(-50%);
				
				.owl-dot {
					display: inline-block;
					position: relative;
					border-radius: 20px;
					width: 18px;
					height: 18px;
					border: 3px solid rgba(255,255,255,0.5);
					margin-right: 4px;
					
					span {
						opacity: 0;
						transition: opacity 0.3s;
						-webkit-transition: opacity 0.3s;
					}
					
				}
				
				
				
				.owl-dot.active {
					span {
						opacity: 1;
						display: block;
						border-radius: 30px;
						position: absolute;
						top: 50%;
						left: 50%;
						z-index:1;
						width: 7px;
						height: 7px;
						background: rgba(255,255,255,0.8);
						transform: translate(-50%,-50%);
						-webkit-transform: translate(-50%,-50%);
					}
				}
				
				@-moz-document url-prefix() { 
					.owl-dot.active {
						span {
							width: 6px;
							height: 6px;
						}	
					}
				}
				
				
		}
		
		.owl-nav {
			position: absolute;
			
			left: 0px;
			right: 0px;
			bottom: 230px;
			z-index:3;
			
			
			.owl-prev {
				position: absolute;
				top: 50%;
				left: 2%;
				z-index:1;
				width: 24px;
				height: 70px;
				opacity: 0.2;
				text-indent: 10000000px;
				background: url("../images/nextarrow.svg") no-repeat;
				background-size: 100% 100%;
				transform: translateY(-50%) rotate(180deg);
				-webkit-transform: translateY(-50%) rotate(180deg);
				transition: opacity 0.3s;
				-webkit-transition: opacity 0.3s;
			}
			
			.owl-next {
				position: absolute;
				top: 50%;
				right: 2%;
				z-index:1;
				width: 24px;
				height: 70px;
				opacity: 0.2;
				text-indent: 10000000px;
				background: url("../images/nextarrow.svg") no-repeat;
				background-size: 100% 100%;
				transform: translateY(-50%);
				-webkit-transform: translateY(-50%);
				transition: opacity 0.3s;
				-webkit-transition: opacity 0.3s;
			}
			
			.owl-next:hover, .owl-next:focus, .owl-prev:hover, .owl-prev:focus {
				opacity: 0.9;
			}
		}
	}
	
	
	.heroImageContainerSVG {
		width: 100%;
		position: absolute;
		top: 0px;
		left: 0px;
		right: 0px; 
		bottom: 0px;
		z-index:2;
		min-height: 185px;
	}
		
	.heroImageBlur {
		position: absolute;
		top: 0px;
		left: 0px;
		right: 0px;
		bottom: 0px;
		z-index:2;
		overflow: hidden;
		
		@-moz-document url-prefix() {
			div.heroImageBlurInner {
				
				filter: url(../../resources.svg#svgBlur);
				
			}
			
		}
		
		
		.heroImageBlurInner {
			position: absolute;
			left:-15px;
		    right:-15px;
		    top:-15px;
		    bottom:-15px;
			z-index:2;
			min-height: 500px;
			background-size: cover;
			background-position: center center;
			filter: blur(8px);
			-webkit-filter: blur(8px);
		
		
		-moz-mask-image: -moz-linear-gradient(top, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 28%, rgba(0,0,0,0) 40%, rgba(0,0,0,0) 100%); /* FF3.6+ */
		-webkit-mask-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,1)), color-stop(28%,rgba(0,0,0,1)), color-stop(40%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,0))); /* Chrome,Safari4+ */
		-webkit-mask-image: -webkit-linear-gradient(top, rgba(0,0,0,1) 0%,rgba(0,0,0,1) 28%,rgba(0,0,0,0) 40%,rgba(0,0,0,0) 100%); /* Chrome10+,Safari5.1+ */
		-o-mask-image: -o-linear-gradient(top, rgba(0,0,0,1) 0%,rgba(0,0,0,1) 28%,rgba(0,0,0,0) 40%,rgba(0,0,0,0) 100%); /* Opera 11.10+ */
		—ms-mask-image: -ms-linear-gradient(top, rgba(0,0,0,1) 0%,rgba(0,0,0,1) 28%,rgba(0,0,0,0) 40%,rgba(0,0,0,0) 100%); /* IE10+ */
		mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%,rgba(0,0,0,1) 28%,rgba(0,0,0,0) 40%,rgba(0,0,0,0) 100%); /* W3C */
		//filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#000000',GradientType=0 ); /* IE6-9 */
		
		filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100,FinishOpacity=0,Style=1,StartX=0,FinishX=0,StartY=0,FinishY=300);
		
		}
		
		
	}
	
	.owl-item.active, .heroSingle {
		.heroHeading {
			h1 {
				animation: herotext 0.6s forwards;
				animation-iteration-count: 1;
				animation-delay: 0.3s;
				-webkit-animation: herotext 0.6s forwards;
				-webkit-animation-iteration-count: 1;
				-webkit-animation-delay: 0.3s;
				-moz-animation: herotext 0.6s forwards;
				-moz-animation-iteration-count: 1;
				-moz-animation-delay: 0.3s;
				transform: translate(-100px,0px);
				opacity: 0;
					
				span {
					animation: herotext 0.6s forwards;
					animation-iteration-count: 1;
					animation-delay: 0.4s;
					-webkit-animation: herotext 0.6s forwards;
					-webkit-animation-iteration-count: 1;
					-webkit-animation-delay: 0.4s;
					-moz-animation: herotext 0.6s forwards;
					-moz-animation-iteration-count: 1;
					-moz-animation-delay: 0.4s;
					transform: translate(-100px,0px);
					opacity: 1;
				}
			}	
		}
	}
	
	.heroImage {
		min-height: 500px;
		position: relative;
		background-position: center center;
		background-size: cover;
		
		.heroOverlay {
			position: absolute;
			top: 0px;
			left: 0px;
			right: 0px;
			bottom: 0px;
			z-index:2;
			background: rgba(0,0,0,0.2);
		}
		
		
		.heroHeadingWrapper {
			
			max-width: $content-width-max;
			margin: 0 auto;
			
			position: absolute;
			top: 0px;
			left: 0px;
			right: 0px;
			bottom: 0px;
			z-index:5;
		
			.heroHeading {
				display:block;
				position: absolute;
				bottom: 70px;
				left: 30px;
				z-index:1;
				text-decoration: none;
				color: #fff;
				border-left: 2px solid $uwred;
				padding-left: 14px;
				transition: 0.4s;
				-webkit-transition: 0.4s;
				-moz-transition: 0.4s;
				text-shadow: 0px 1px 4px rgba(0,0,0,0.4);
				
				
				h1 {
					font-family: 'Roboto Condensed', sans-serif;
					font-size: 34px;
					font-weight: 400;
					color: #fff;
					line-height:1;
					text-transform: none;
					
					
					
					span {
						font-family: 'Roboto Condensed', sans-serif;
						display: block;
						text-transform: uppercase;
						color: rgba(255,255,255,0.6);
						font-size: 17px;
						font-weight: 300;
						letter-spacing: 0.4px;
						line-height:1;
						margin-bottom: 0.2em;
						
						
					}
				}	
			}
			
			a.heroHeading:hover, a.heroHeading:focus {
				border-left: 8px solid $uwred;
			}
		}
	}
	
	.heroImageDefault {
		background: url("../../dist/images/bascom_sample.jpg") no-repeat;
		background-position: center center;
		background-size: cover;
	}
}