/* http://www.menucool.com/jquery-slider */

/*---------------------------- Thumbnails ----------------------------*/
#thumbnail-slider {    
    height: 614px; 
    display:inline-block;
    padding:0px 0; /*Increse its value if want to move the arrows out of the div.inner */
    position:relative;
    -webkit-user-select: none;
    user-select:none;
	float: left;
	width: 95px;
	 overflow-y:auto;
	 margin-right: -2px; margin-top: -2px;
	 border-right:2px solid #f4f4f4;
}

#thumbnail-slider div.inner {
    height:100%;
	box-sizing:border-box;
    position:relative;
   
    margin:0;
}
 
#thumbnail-slider div.inner ul {    
    position:relative;
    left:0; top:0;
    list-style:none;
    font-size:0;
    padding:0;
    margin:0;
    float:left!important;
    width: 100% !important;
    height:auto!important;
}

#thumbnail-slider ul li {
	
    opacity:1;
    display:block;
    border:2px solid #f4f4f4;
    padding: 9px 15px; 
    transition:none;
    text-align:center;
    position:relative;
    list-style:none;
    box-sizing:content-box;
    backface-visibility:hidden;
	border-top:0px; border-right:0px;  
}
#thumbnail-slider ul li:hover { cursor:pointer; border-color:#cc0c2f; }
#thumbnail-slider ul li:hover:after, #thumbnail-slider ul li.active:after { cursor:pointer; position: absolute; top: 0px; width: 100%; left:0px; content:""; height: 2px; background:#cc0c2f  }
#thumbnail-slider ul li:hover:before, #thumbnail-slider ul li.active:before  { cursor:pointer; position: absolute; top: 0px; width: 2px; right:0px; content:""; height: 100%; background:#cc0c2f  }


#thumbnail-slider li.active {
	border-color:#cc0c2f;  
}

#thumbnail-slider .thumb {
    width:100%;
    height: 100%;
    background-size:contain;
    background-repeat:no-repeat;
    background-position:center center;
    display:block;
    position:absolute;
    font-size:0;
}

/* --------- navigation controls ------- */   
/* The nav id should be: slider id + ("-prev", "-next", and "-pause-play") */  

#thumbnail-slider-pause-play {display:none;} /*.pause*/

#thumbnail-slider-prev, #thumbnail-slider-next {
    position: absolute;
    width:100%;
    text-align:center;
    margin:0;
    color:white;
    z-index:10;
    cursor:pointer;
    transition:opacity 0.6s;
    *background-color:#ccc;/*IE7 hack*/
    backface-visibility:hidden;
}

#thumbnail-slider-prev {
    top:0;
}

#thumbnail-slider-next {
    bottom:0;
}
#thumbnail-slider-next.disabled, #thumbnail-slider-prev.disabled {
    opacity:0.1;
    cursor:default;
}


/* arrows */
#thumbnail-slider-prev::before, #thumbnail-slider-next::before {
    position:absolute;
    content: "";
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-left:-5px;
   
}

#thumbnail-slider-prev::before {
    top: -28px;
	background: url(https://beachactive.nl/wp-content/themes/beach/images/arrow-top.png) no-repeat center bottom;
   
}

#thumbnail-slider-next::before {
    bottom: -28px;
	background: url(https://beachactive.nl/wp-content/themes/beach/images/arrow-bottom.png) no-repeat center bottom;
}