.thumbelina {
    list-style:none;
    padding:0px;
    margin:0px;
    position:relative;
    /* font-size:0 stop gaps between display-inline li elemets */
    /* Either do this, or remove all white space in HTML beween li elements */
    font-size:0;
    /* prevent annoying iPad cut/paste actions */
    -webkit-touch-callout: none;
    -webkit-user-select: none;
	display: table;
    white-space: nowrap;
}

/* Style for the list items that surround the thumbnails */
.thumbelina li {
	margin: 0 0 13px 0; padding: 0;
	cursor: pointer;
	border: thin solid #e5e4e4;
	background-color: transparent;
	text-align: center; line-height: 0px;
	transition: all ease-in-out .3s; }

.thumbelina li:focus {
	opacity: .5; outline: none; }

/* Add a border to the thumbnails. */
.thumbelina li img {
	object-fit: contain; width:100%; height: 100%; }

/* Hover effect for the images */
.thumbelina li:hover {
	border: thin solid #761b7c; }
    
/*
    Following is the CSS for the navigation buttons.
    They are designed to fit flush on the ends of the slider
    using absolute positioning, with the container as the parent element.
    The sizes are set to match the demo slider.
    You can change any of this as you wish - you don't even need to use these classes.
    Position the buttons where you like on the page, change sizes, use images etc.
    They don't have to be children of the container.
*/

/* Common style for the buttons */
.thumbelina-but {
	/*opacity: 0;*/
    position:absolute; z-index: 1; cursor:pointer;
	transition: all ease-in-out .4s;
    /* Font related items for the symbols used on buttons */
    /* Obviously not needed if you're just using images */
}
.product-detail-gallery:hover .thumbelina-but {
	opacity: 1; }
/* Hover style for active button */    
.thumbelina-but:hover { }

/* Disabled style when button is not active due to extents being reached. */
/* You could do other things e.g. make buttons dissapear completely. */
.thumbelina-but.disabled,
.thumbelina-but.disabled:hover {
	cursor:default; box-shadow:none; }

/* Horizontal buttons. */
.thumbelina-but.horiz {
	width: 22px; height: 100%; top:-1px; }
/* Left edge button. */
.thumbelina-but.horiz.left { left: -55px;
	background: url(../images/icons/arrow-galeri-slider-left.png) no-repeat;
	background-position: center center; background-size: contain; }
/* Left edge disabled button. */
.thumbelina-but.horiz.left.disabled,
.thumbelina-but.horiz.left.disabled:hover { left: -55px;
	background: url(../images/icons/arrow-galeri-slider-left.png) no-repeat;
	background-position: center center; background-size: contain; }
/* Right edge button */
.thumbelina-but.horiz.right { right: -55px;
	background: url(../images/icons/arrow-galeri-slider-right.png) no-repeat;
	background-position: center center; background-size: contain; }
/* Right edge disabled button */
.thumbelina-but.horiz.right.disabled,
.thumbelina-but.horiz.right.disabled:hover { right: -55px;
	background: url(../images/icons/arrow-galeri-slider-right.png) no-repeat;
	background-position: center center; background-size: contain; }



/* Vertical buttons. */  
.thumbelina-but.vert {
    left: 50%; line-height: 20px;
    width: 21px; height: 14px;
	transform: translate(-50%, 0);
}

/* Top edge button. */
.thumbelina-but.vert.top { top: -28px;
    background: url(../images/icon/arrow-top-prod-gallery-blue.png) no-repeat;
	background-position: center center; background-size: contain; }
/* Top edge disabled button. */
.thumbelina-but.vert.top.disabled,
.thumbelina-but.vert.top.disabled:hover { top: -28px;
	background: url(../images/icon/arrow-top-prod-gallery.png) no-repeat;
	background-position: center center; background-size: contain; }

/* Bottom edge button. */
.thumbelina-but.vert.bottom { bottom: -19px;
    background: url(../images/icon/arrow-bottom-prod-gallery-blue.png) no-repeat;
	background-position: center center; background-size: contain; }
/* Bottom edge disabled button. */
.thumbelina-but.vert.bottom.disabled,
.thumbelina-but.vert.bottom.disabled:hover { bottom: -19px;
	background: url(../images/icon/arrow-bottom-prod-gallery.png) no-repeat;
	background-position: center center; background-size: contain; }