/* image-slider */
.image-slider { width: 980px; height:300px; margin:30px auto 20px auto; position:relative; z-index: 1 }
.image-slider.mobile { width: 90% }
.image-slider-back, .image-slider-forward { float:left; width:23px; height:98px; color:White; position:relative; top:24%; cursor:pointer }
.image-slider-back { background-image:url('../images/photos/arrow-left.png'); background-repeat:no-repeat; background-position:left }
.image-slider-forward { background-image:url('../images/photos/arrow-right.png'); background-repeat:no-repeat; background-position:right }
.image-slider-contents { width: 930px; height: 212px; float:left; position:relative; overflow:hidden }

.image-slider-contents .contents-wrapper { position:absolute; left:0 }
.image-slider-contents .outer { width: 220px; height:auto; background-color:#fff; float:left; margin-right:15px; cursor:pointer; position:relative; padding: 10px }
.spic { width: 100%; height: 170px; background-size: cover; background-position: center center; text-align: center; color: #333; float: left }

.hidden { display:none }
.visible { display:block }
.thumbnail-active { filter:alpha(opacity=100); opacity:1.0; cursor:pointer }
.thumbnail-inactive { filter:alpha(opacity=20); opacity:0.2; cursor:pointer }

.preview { position: absolute; z-index: 2; width: 600px; height: 350px; background-color: White; padding: 20px; border: solid 1px #ddd }
.preview .img-large { width: 540px; height: 100%; z-index:1000; text-align: center; margin:0 auto }
.preview .img-large .left { position:absolute; left:20px; top:160px; width:16px; height:24px; z-index:1000; background:url('../images/photos/arrow-left.png'); cursor:pointer }
.preview .img-large .right { position:absolute; right: 20px; top:160px; z-index:1000; width:16px; height:24px; background:url('../images/photos/arrow-right.png'); cursor:pointer }
.preview .img-large img { width: auto; max-width: 100%; height: 100%; margin: 0 auto }
.outer { border:solid 1px #ddd }