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

#thumbnail-slider {
    margin:0 auto; /*center-aligned*/
    width:100%;
    padding:0;
    box-sizing:border-box;
    position:relative;
    -webkit-user-select: none;
    user-select:none;
}

#thumbnail-slider div.inner {    
    /*the followings should not be changed */
    position:relative;
    overflow:hidden;
    padding:0;
    margin:0;
}
 
#thumbnail-slider div.inner ul {    
    /*the followings should not be changed */
    white-space:nowrap;
    position:relative;
    left:0; top:0;
    list-style:none;
    font-size:0;
    padding:0;
    margin:0;
    float:left!important;
    width:auto!important;
    height:auto!important;
}

#thumbnail-slider ul li {
    opacity: 0.5;
    display:inline-block;
    margin:34px -20px;  /* Spacing between thumbs*/
    -webkit-transform:scale(0.9);
    transform:scale(0.9); /*Note: The scale down will increase the spacing between slides. You can set negative margins as did above to roll back the spacing. */
    -webkit-transition:-webkit-transform 0.5s;
    transition:transform 0.5s;
    box-sizing:content-box;
    text-align:center;
    vertical-align:middle;
    padding:0;
    position:relative;
    list-style:none;
    backface-visibility:hidden;
    
    /*-webkit-filter: grayscale(100%);
    filter: grayscale(100%);*/
    
}

#thumbnail-slider ul li.active {
    opacity: 1;    
    -webkit-transform:scale(1.15); 
    transform:scale(1.15); /*Note: if scale is greater than 1, the margin-top and margin-bottom in the selector "#thumbnail-slider li" must be set with a sufficient value so the enlarged image will be shown within the margins.*/
    background-color:transparent;
    
    /*-webkit-filter: initial;
    filter: initial;*/
}

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

}


/* --------- 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;
    display:inline-block;
    width:50px;
    height:50px;
    line-height:56px;
    top: 55%;
    margin-top:-51px;/*pager's height should also be counted*/
    background-color:rgba(0,0,0,0.4);
    background-color:#ccc\9;/*IE8 hack*/
    backface-visibility:hidden;
    color:white;
    overflow:hidden;
    white-space:nowrap;
    -webkit-user-select: none;
    user-select:none;
    border-radius:50px;
    z-index:10;
    opacity:0.3; 
    font-family:sans-serif;   
    font-size:13px;
    cursor:pointer;
    -webkit-transition:all 0.7s;
    transition:all 0.7s;
}


#thumbnail-slider-prev {
    left: 0px;
}

#thumbnail-slider-next {
    right: 0px;
}

 

#thumbnail-slider-next:hover, #thumbnail-slider-prev:hover{
    opacity:1;
}


/* arrows */
#thumbnail-slider-prev::before, #thumbnail-slider-next::before {
    position: absolute;
    top: 14px;
    content: "";
    display: inline-block;
    width: 20px;
    height: 20px;
    border-left: 2px solid white;
    border-top: 2px solid white;
    backface-visibility:hidden;
}

#thumbnail-slider-prev::before {
    -ms-transform:rotate(-45deg);/*IE 9*/
    -webkit-transform:rotate(-45deg);
    transform: rotate(-45deg);
    right:10px;
}

#thumbnail-slider-next::before {
    -ms-transform:rotate(135deg);/*IE 9*/
    -webkit-transform:rotate(135deg);
    transform: rotate(135deg);
    left:10px;
}

@media only screen and (max-width: 599px) {
#thumbnail-slider-prev, #thumbnail-slider-next{
    top:60%;
}
}