#slideWrapper { width: 100%; height: 100%; position: absolute; overflow: hidden; } .gallery-image { width: 80%; margin: 0 auto; margin-top:1%; height: 65%; box-shadow: 0px 2px 8px 0px #999; position: relative; overflow: hidden; } .slideshow-control { width: 10%; } .gallery-thumb { width: 100%; margin: 0 auto; margin-top: 2%; height: 20%; } #selector-img { height: 100%; width: 80%; /*overflow: hidden;*/ margin: 0 auto; position: relative; left: 20px; } #control-prev { float: left; } #control-next { float: right; clear:none; clear:none; position: relative; top: -100%; } .main-control { width: 10%; height: 100%; opacity: 0.65; -moz-user-select: none; -khtml-user-select: none; -webkit-user-select: none; user-select: none; background-color: #AAAAAA; } #main-control-prev { float: left; background-color: gray; z-index: 1; position: relative; background-image: url('../../img/main_previous.png'); background-repeat: no-repeat; background-size: contain; background-position: center; } #main-control-next { float: right; clear:none; background-color: gray; z-index: 1; position: relative; top: -100%; background-image: url('../../img/main_next.png'); background-repeat: no-repeat; background-size: contain; background-position: center; } .slideshow-control img { height:50%; width: 50%; margin-top: 40%; } #control-prev img { float:right; } #main-img { background-color: black; height:100%; width: 100%; z-index: 0; position: relative; } .mainThumbnail { background-repeat: no-repeat; background-size: contain; background-position: center; height: 100%; width: 100%; position: absolute; display: block; } .thumbnail { width: 15%; height: 100%; padding: 2px; margin: 0% 1%; display: block; vertical-align: middle; box-shadow: 0px 2px 8px 0px #ccc; background-repeat: no-repeat; background-size: contain; background-position: center; border:3px solid #fff; background-color: black; float: left; clear: none; position: relative; } .first { margin-left: 23px; }