#spotlight-surround li .feature-overlay {position: absolute; top: 0; bottom: 0; left: 0; right: 0; background: url(../images/bgs/spotlight-fade-dark.png) center top no-repeat;}

/*====== Stacked - Vertical ======*/

#spotlight-surround.stacked-vertical {max-width: 1240px; margin: 0 auto;}
.stacked-vertical .inner {padding: 20px 0; overflow: hidden}
.stacked-vertical .item {float: left; width: 33.3%;  padding-bottom: 19%; position: relative;overflow: hidden; padding-right: 20px;}
.stacked-vertical .item:nth-child(2), .stacked-vertical .item:nth-child(3) {}
.stacked-vertical .item:nth-child(3) {padding-right: 0;}
.stacked-vertical .item.first {width: 100%; height: 100%; padding-bottom: 56.3%;}
.stacked-vertical .feature-main {overflow: hidden; position: absolute; top: 0; left: 0; bottom: 0; right: 20px; padding-bottom: 30%; display: block;}
.stacked-vertical .item.first .feature-main {right: 0 !important}
.stacked-vertical .feature-sub {overflow: hidden; position: absolute; top: 20px; left: 0; bottom: 0px; right: 10px; padding-bottom: 30%; display: block;}
.stacked-vertical .item:nth-child(3) .feature-sub {left: 10px}
.stacked-vertical .item:nth-child(4) .feature-sub {left: 10px; bottom: 0; right: 0;}
.stacked-vertical .feature--content {position: absolute; bottom: 0; left: 0; right: 0; z-index: 999; padding: 20px;}


/*====== Stacked - Vertical - Tight ======*/
#spotlight-surround.stacked-vertical-tight {max-width: 1240px; margin: 0 auto;}
.stacked-vertical-tight .inner {padding: 20px 0; overflow: hidden}
.stacked-vertical-tight .item {float: left; width: 33.3%;  padding-bottom: 19%; position: relative;overflow: hidden; padding-right: 20px;}
.stacked-vertical-tight .item:nth-child(2), .stacked-vertical-tight .item:nth-child(3) {}
.stacked-vertical-tight .item:nth-child(3) {padding-right: 0;}
.stacked-vertical-tight .item.first {width: 100%; height: 100%;padding: 0 1px 0 0}
.stacked-vertical-tight .feature-main {overflow: hidden; display: block;}
.stacked-vertical-tight .item.first .feature-main {right: 0 !important}
.stacked-vertical-tight .feature-sub {overflow: hidden; position: absolute; top: 0; left: 0; bottom: 0px; right: 0; display: block;}
.stacked-vertical-tight .feature--content {position: absolute; bottom: 0; left: 0; right: 0; z-index: 999; padding: 20px;}
#spotlight-surround.stacked-vertical-tight .feature--image {position: initial}

/*====== Stacked - Horizontal ======*/
#spotlight-surround.stacked-horizontal {max-width: 1240px; margin: 0 auto;}
.stacked-horizontal .inner {padding: 20px 0; overflow: hidden}
.stacked-horizontal .item {float: left; width: 24.5%;  padding-bottom: 14%; position: relative;overflow: hidden; padding-right: 20px;}
.stacked-horizontal .item:nth-child(2), .stacked-horizontal .item:nth-child(3) {}
.stacked-horizontal .item:nth-child(3), .stacked-horizontal .item:nth-child(5) {padding-right: 0;}
.stacked-horizontal .item.first {width: 51%; height: 100%; padding-bottom: 28%;}

.stacked-horizontal .feature-main {overflow: hidden; position: absolute; top: 0; left: 0; bottom: 0; right: 20px; padding-bottom: 30%; display: block;}
.stacked-horizontal .feature-sub {overflow: hidden; position: absolute; top: 0; left: 0; bottom: 10px; right: 10px; padding-bottom: 30%; display: block;}
.stacked-horizontal .item:nth-child(3) .feature-sub {top: 0; left: 10px; bottom: 10px; right: 0;}
.stacked-horizontal .item:nth-child(4) .feature-sub {top: 10px; left: 0; bottom: 0; right: 10px;}
.stacked-horizontal .item:nth-child(5) .feature-sub {top: 10px; left: 10px; bottom: 0; right: 0;}
.stacked-horizontal .feature--content {position: absolute; bottom: 0; left: 0; right: 0; z-index: 999; padding: 20px;}


/*====== Stacked - Surround ======*/
#spotlight-surround.stacked-surround {max-width: 1240px; margin: 0 auto;}
.stacked-surround .inner {padding: 20px 0; overflow: hidden}
.stacked-surround .item {float: left; width: 33.3%;  padding-bottom: 18.27%; position: relative;overflow: hidden; padding-right: 0px;}
.stacked-surround .item:nth-child(3), .stacked-surround .item:nth-child(3) {}
.stacked-surround .item:nth-child(2) {padding-right: 0;}
.stacked-surround .item.first {width: 66.6%; height: 100%; padding-bottom: 36.55%;}
.stacked-surround .feature-main {overflow: hidden; position: absolute; top: 0; left: 0; bottom: 0; right: 10px; padding-bottom: 30%; display: block;}
.stacked-surround .feature-sub {overflow: hidden; position: absolute; top: 0; left: 0; bottom: 10px; right: 10px; padding-bottom: 30%; display: block;}
.stacked-surround .item:nth-child(2) .feature-sub {top: 0; left: 10px; bottom: 10px; right: 0;}
.stacked-surround .item:nth-child(3) .feature-sub {top: 10px; left: 10px; bottom: 0; right: 0px;}
.stacked-surround .item:nth-child(4) {margin-left: 0px; clear: left;}
.stacked-surround .item:nth-child(4) .feature-sub {top: 20px; left: 0px; bottom: 0; right: 10px;}
.stacked-surround .item:nth-child(5) .feature-sub, .stacked-surround .item:nth-child(6) .feature-sub {top: 20px; left: 10px; right: 10px; bottom: 0;}
.stacked-surround .item:nth-child(5) .feature-sub, .stacked-surround .item:nth-child(6) .feature-sub {}
.stacked-surround .item:nth-child(6) .feature-sub {right: 0;}
.stacked-surround .item:nth-child(6) {margin-right: -10px;}
.stacked-surround .feature--content {position: absolute; bottom: 0; left: 0; right: 0; z-index: 999; padding: 20px;}
.stacked-surround .feature--image {position: absolute; left: 0; top: 0; bottom: 0; width: 100%; }

/*====== Stacked - Side ======*/
#spotlight-surround.stacked-side {max-width: 1240px; margin: 0 auto;}
.stacked-side .inner {padding: 20px 0; overflow: hidden}
.stacked-side .item {float: left; width: 25%;  padding-bottom: 14.05%; position: relative;overflow: hidden; padding-right: 0px;}
.stacked-side .item:nth-child(2), .stacked-side .item:nth-child(3) {}
.stacked-side .item:nth-child(3) {padding-right: 0;}
.stacked-side .item.first {width: 75%; height: 100%; padding-bottom: 42.2%;}
.stacked-side .feature-main {overflow: hidden; position: absolute; top: 0; left: 0; bottom: 0; right: 20px; padding-bottom: 30%; display: block;}
.stacked-side .feature-sub {overflow: hidden; position: absolute; top: 0; left: 0; bottom: 10px; right: 0px; padding-bottom: 30%; display: block;}
.stacked-side .item:nth-child(4) .feature-sub {left: 0; bottom: 0;}
.stacked-side .feature--content {position: absolute; bottom: 0; left: 0; right: 0; z-index: 999; padding: 20px;}

/*====== Rotation - Thumbnails Bottom ======*/
#spotlight-surround.rotation-thumb-bot {}
.rotation-thumb-bot .feature-main {float: left; width: 100%; height: 100%}
	.rotation-thumb-bot .feature-main .feature--content {top: inherit; bottom: 80px; left: 80px;}
.rotation-thumb-bot .feature-sub {height: 180px; width: 26%}
	.rotation-thumb-bot .feature-sub .feature--content {bottom: 20px; left: 20px;}
.rotation-thumb-bot .feature-image {bottom: 0; min-height: 100%}

.rotation-thumb-bot .main-spot-nav li {width: 20%; float: left; overflow: hidden; height: 130px;}
	.rotation-thumb-bot .main-spot-nav li.activeSlide img {opacity: 1}
.rotation-thumb-bot .main-spot-nav li img {width: 100%; min-height: 100%; display: block; opacity: 0.25}

/*====== Rotation - Thumbnails Right ======*/
#spotlight-surround.rotation-thumb-right {}
.rotation-thumb-right #spotlight {width: 83%; float: left}
.rotation-thumb-right .feature-main {float: left; width: 100%; height: 100%}
	.rotation-thumb-right .feature-main .feature--content {top: inherit; bottom: 80px; left: 80px;}

.rotation-thumb-right .feature-image {bottom: 0; min-height: 100%}

.rotation-thumb-right .main-spot-nav {width: 17%; float: right}
.rotation-thumb-right .main-spot-nav li {width: 100%; overflow: hidden; height: 120px;}
	.rotation-thumb-right .main-spot-nav li.activeSlide img {opacity: 1}
.rotation-thumb-right .main-spot-nav li img {width: 100%; min-height: 100%; display: block; opacity: 0.25}

/*====== Rotation - Thumbnails Right ======*/
#spotlight-surround.rotation-thumb-left {}
.rotation-thumb-left #spotlight {width: 83%; float: right}
.rotation-thumb-left .feature-main {float: left; width: 100%; height: 100%}
	.rotation-thumb-left .feature-main .feature--content {top: inherit; bottom: 80px; right: 80px; left: auto}

.rotation-thumb-left .feature-image {bottom: 0; min-height: 100%}

.rotation-thumb-left .main-spot-nav {width: 17%; float: left}
.rotation-thumb-left .main-spot-nav li {width: 100%; overflow: hidden; height: 120px;}
	.rotation-thumb-left .main-spot-nav li.activeSlide img {opacity: 1}
.rotation-thumb-left .main-spot-nav li img {width: 100%; min-height: 100%; display: block; opacity: 0.25}


/*====== Rotation - Markers ======*/
#spotlight-surround.rotation-markers {}
#spotlight-surround.rotation-markers #spotlight {text-align: center;}
#spotlight-surround.rotation-markers #spotlight .item {padding-bottom: 37%;height: 100%; position: relative; background-size: cover !important;}
#spotlight-surround.rotation-markers #spotlight .esc {position: absolute; z-index: 999; bottom: 0; left: 0; right: 0; max-width: 1240px; width: 100%;}

#spotlight-surround.rotation-markers #spotlight .owl-dots {position: absolute; bottom: 0; left: 0; right: 0; height: 15px;}
#spotlight-surround.rotation-markers #spotlight .owl-dots .owl-dot {width: 20%; height: 15px; float: left;}
#spotlight-surround.rotation-markers #spotlight .owl-dots .owl-dot span {display: block; height: 15px;}

#spotlight-surround.rotation-markers #spotlight .feature-image {width: 1600px; height: 900px; display: inline}
#spotlight-surround.rotation-markers .feature-main {float: left; width: 100%; height: 100%}
#spotlight-surround.rotation-markers .overlay {position: absolute; top: 0; left: 0; right: 0; bottom: 0;  background: linear-gradient(to right, #000 0%, #000 5%, rgba(0,0,0,0) 30%, rgba(0,0,0,0) 70%, #000 95%, #000 100%)}
#spotlight-surround.rotation-markers .feature-main .feature-content {bottom: 40px; position: absolute; left: 0px; max-width: 900px; width: 100%; text-align: left;}


/*====== Rotation - Arrows ======*/
#spotlight-surround.rotation-arrows .owl-theme .owl-controls {top: 0;;}
#spotlight-surround.rotation-arrows #spotlight {text-align: center; position: relative;}
#spotlight-surround.rotation-arrows #spotlight .item {padding-bottom: 37%;height: 100%; position: relative; background-size: cover !important; }
#spotlight-surround.rotation-arrows #spotlight .esc {position: absolute; z-index: 999; bottom: 0; left: 0; right: 0; max-width: 1240px; width: 100%;}
#spotlight-surround.rotation-arrows .owl-next {right: 20px;}
#spotlight-surround.rotation-arrows .owl-prev {left: 20px;}
#spotlight-surround.rotation-arrows .owl-prev, #spotlight-surround.rotation-arrows .owl-next {
	position: absolute;	top: 50%; 	margin-top: -40px; height: 80px; line-height: 80px; font-size: 80px; z-index: 9; cursor: pointer;}
#spotlight-surround.rotation-arrows .owl-prev .fa, #spotlight-surround.rotation-arrows .owl-next .fa {opacity: 0.4;  cursor: pointer;}
#spotlight-surround.rotation-arrows:hover .owl-prev .fa, #spotlight-surround.rotation-arrows:hover .owl-next .fa {opacity: 1;}

#spotlight-surround.rotation-arrows #spotlight .feature-image {width: 1600px; height: 900px; display: inline}
#spotlight-surround.rotation-arrows .feature-main {float: left; width: 100%; height: 100%}
#spotlight-surround.rotation-arrows .overlay {position: absolute; top: 0; left: 0; right: 0; bottom: 0;  background: linear-gradient(to right, #000 0%, #000 5%, rgba(0,0,0,0) 30%, rgba(0,0,0,0) 70%, #000 95%, #000 100%)}
#spotlight-surround.rotation-arrows .feature-main .feature-content {bottom: 0px; position: absolute; left: 0px; right: 0; width: 100%; text-align: left;}