.homepage-slideshow {position: relative; overflow: hidden; width: 100%; z-index: 7;
	opacity: 0;
	visibility: hidden;
	-webkit-transform: translate3d(0, 0, 0);
	-webkit-backface-visibility: hidden;
	-webkit-perspective: 1000;
    margin-bottom: 20px;
}
.homepage-slideshow.is-visible {opacity: 1; visibility: visible;}


.homepage-slideshow button:focus {outline:0;}

.slideshow-nav-container {	
	background-color: #000;	
	font-size: 1em;
	font-weight: 600;
	position: relative;	
	text-transform: uppercase;	
	width: 100%;
	z-index: 9999;
	-moz-box-shadow: rgba(0, 0, 0, .2) 0 -11px 9px 1px;
	-webkit-box-shadow: rgba(0, 0, 0, .2) 0 -11px 9px 1px;
	box-shadow: rgba(0, 0, 0, .2) 0 -11px 9px 1px;
}
.slideshow-nav {overflow: hidden; margin: 0 auto;}
.slideshow-nav ul {
	height: 2.625em;
	position: relative;
	list-style: none;
	line-height: 2.875em;
	overflow: hidden;
	margin: 0;
	padding: 0;
	-moz-transition-property: all;
	-o-transition-property: all;
	-webkit-transition-property: all;
	transition-property: all;
}
.slideshow-nav li {float: left; margin-right: 2.5em; margin-top: 0.625em;}
.slideshow-nav li:last-child {margin-right: 0;}
.slideshow-nav a, .slideshow-nav a:visited {color: #8f8f8f;}
.slideshow-nav a:hover, .slideshow-nav .slick-center a {color: #29dbe7; text-decoration: none;

}

.indicator {
	background: transparent url(/includes/public/assets/images/downward-arrow.png) no-repeat top left;
	position: absolute;
	left: 50%;
	height: 2.375em; 
	width: 4.375em; 	
	margin-top: -1.25em;
	margin-left: -2.188em;

}

.fade-edges {z-index: 10000; position: relative; margin: 0 auto;}
.fade-edges .fade-left, .fade-edges .fade-right {width: 30%; height: 2.625em; position: absolute; margin-top: -2.625em; background: transparent;}
.fade-edges .fade-left {
	left: 0;
	background: -webkit-gradient(linear, left top, right top, from(#000), to(transparent));
	background: -webkit-linear-gradient(left, #000, transparent);
	background: -moz-linear-gradient(left, #000, transparent);
	background: -ms-linear-gradient(left, #000, transparent);
	background: -o-linear-gradient(left, #000, transparent);
	background: linear-gradient(to right, #000, rgba(0, 0, 0, 0))
}
.fade-edges .fade-right {
	right: 0;
	background: -webkit-gradient(linear, right top, left top, from(transparent), to(transparent));
	background: -webkit-linear-gradient(right, #000, transparent);
	background: -moz-linear-gradient(right, #000, transparent);
	background: -ms-linear-gradient(right, #000, transparent);
	background: -o-linear-gradient(right, #000, transparent);
	background: linear-gradient(to left, #000, rgba(0, 0, 0, 0))
}

.slideshow-container {background-color: #000; position: relative; width: 100%;}
.slideshow-container .slides {
	display: block; width: 100%;}
.slideshow-container .slide {
	background-position: center center; width: 100%; position: relative;}
/*.slideshow-container .slide a {color: #000; position: absolute; max-width: 300px;}*/


.slideshow-container .slick-slider .slick-track, .slideshow-container .slick-slider .slick-list {
	-webkit-transform: none;
	-moz-transform: none;
	-ms-transform: none;
	-o-transform: none;
	transform: none;
}

 div.slideshow-container div.slide.slick-slide.slick-active .image-wrapper{
 	background-color: #111;
 	overflow: hidden;
 }

div.slideshow-container div.slide.slick-slide .image-wrapper > img.overlay{
    position: absolute;
    top: calc(50% - 175px);
    left: calc(50% - 175px);
    width: 350px;
    height: 350px;
}

div.slideshow-container div.slide.slick-slide img.video-img{
	position: absolute;
	opacity: 1;
	transition: all 2s ease-in-out;
	-moz-transition: all 2s ease-in-out;
	-webkit-transition: all 2s ease-in-out;
}

div.slideshow-container div.slide.slick-slide img.video-img.hide_img{
	opacity: 0;
}


div.slideshow-container div.slide.slick-slide .image-wrapper iframe{
    min-width: 106.5%;
	display: block;
	position: relative;
	top: 0;
	bottom: 0;
	left: -20px;
	right: 0;
}

div.slide div.no-click{
	min-height: 1000px;
	min-width: 100%;
    z-index: 999;
    position: absolute;
}


/*
div.slideshow-container div.slide.slick-slide > a img.video-img,
div.slideshow-container div.slide.slick-slide > a .image-wrapper > img.main{
	width: 100%;
	height: auto;
	display: block;
	max-width: 100%;
	max-height: 100%;
	position: relative;
	top: 0;
	bottom: 0;
	left: 0px;
	right: 0;
	transform: scale(1);
	transition: all 1s ease-in-out;
	-moz-transition: all 1s ease-in-out;
	-webkit-transition: all 1s ease-in-out;
}


div.slideshow-container div.slide.slick-slide > a .image-wrapper{
    visibility: hidden;
}

div.slideshow-container div.slide.slick-slide > a .image-wrapper.not-active{
    visibility: hidden;
}

div.slideshow-container div.slide.slick-slide.slick-active > a .image-wrapper{
    visibility: visible;
}

div.slideshow-container div.slide.slick-slide > a .image-wrapper > img.main.transIn{
    transform: scale(2);
}
div.slideshow-container div.slide.slick-slide > a .image-wrapper > img.main.transOut{
    transform: scale(0.5);
}


*/

button.slick-next{
	position: absolute;
	right: 20px;
    z-index: 1000;
    bottom: 50%;
	border: none !important;
    color: #fff !important;
    background-color: rgba(150,150,150,0.1) !important;
    margin: 0px;
    padding: 15px 10px 15px 15px;
    border-radius: 20%;
}

button.slick-next:hover{
	color: #FFDF00 !important;
}

button.slick-prev{
	position: absolute;
	left: 10px;
    z-index: 1000;
    bottom: 50%;
	border: none !important;
    color: #fff !important;
    background-color: rgba(150,150,150,0.1) !important;
    margin: 0px;
    padding: 15px 15px 15px 10px;
    border-radius: 20%;

}

button.slick-prev:hover{
	color: #FFDF00 !important;
}

button.slick-prev .fa{
	font-size: 40px;
}

button.slick-next .fa{
	font-size: 40px;
}

div.slide img.place-holder{
	display: none;
}


.mobile-image{

}

.mobile-image img{
    width: 100%;
}

.mobile-slide {width: 100%; position: relative;}

.moreArrow {
	position: absolute;
	bottom: 40px;
	display: block;
	width: 100%;
	z-index: 1000;
	text-align: center;
}
	.moreArrow > i {
		color: #fff;
		font-size: 40px;
	}
/*** mobile ***/
@media only screen and (max-width: 40em) { 

	ul.dots {
	    bottom: 0px;
	}

	ul.dots li button {
	    padding: 1px;
	    height: 10px;
	}

	button.slick-prev{
	    bottom: calc(50% - 50px);
    	left: -15px;
	}

	button.slick-next{
	    bottom: calc(50% - 50px);
    	right: -15px;
	}

	button.slick-next .fa {
	    font-size: 30px;
	}

	button.slick-prev .fa {
	    font-size: 30px;
	}

}

/*** tablet ***/
@media only screen and (min-width: 40.063em) and (max-width: 64em) { 
	.fade-edges .fade-left, .fade-edges .fade-right {width: 20%;}
}

/*** desktop ***/
@media only screen and (min-width: 64.063em) { 	

}
