#thumbnail-slider {
    margin:auto; /*center-aligned*/
    width:100%;/*width:400px;*/
    max-width:1000px;
    padding:20px;
    background-color:#f2f1ea;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
    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:2px 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 {
    display:inline-block;
    *display:inline!important; /*IE7 hack*/
    border:3px solid gray;

    margin:0;

    margin-right:10px; /* Spacing between thumbs*/

    transition:border-color 0.3s;

    box-sizing:content-box;

    text-align:center;

    vertical-align:middle;

    padding:0;

    position:relative;

    list-style:none;

    backface-visibility:hidden;

}



#thumbnail-slider ul li.active {

    border-color:white;

}



#thumbnail-slider .thumb {

    opacity:1;

    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

{

    opacity:1;

    position: absolute;

    /*background-color:#0346a3;*/

    *background-color:#ccc;/*IE7 hack*/

    backface-visibility:hidden;

    width:32px;

    height:60px;

    line-height:60px;

    top: 50%;

    margin:0;

    margin-top:-30px;

    color:white;    

    z-index:10;

    cursor:pointer;

}



#thumbnail-slider-prev {

    left:-30px; right:auto;

}



#thumbnail-slider-next {

    left:auto; right:-30px;

}

#thumbnail-slider-next.disabled, #thumbnail-slider-prev.disabled {

    opacity:0.3;

    cursor:default;

}





/* arrows */

#thumbnail-slider-prev::before, #thumbnail-slider-next::before {

    position: absolute;

    top: 19px;

    content: "";

    display: block;

    width: 12px;

    height: 12px;

    border-left: 6px solid black;

    border-top: 6px solid black;

}



#thumbnail-slider-prev::before {

    left:7px;

    -ms-transform:rotate(-45deg);/*IE9*/

    -webkit-transform:rotate(-45deg);

    transform: rotate(-45deg);

}



#thumbnail-slider-next::before {

    right:7px;

    -ms-transform:rotate(135deg);/*IE9*/

    -webkit-transform:rotate(135deg);

    transform: rotate(135deg);

}



/*Responsive settings*/

@media only screen and (max-width:736px){



    #thumbnail-slider {padding:10px 26px;}



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



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

}