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

/*---------------------------- Thumbnails ----------------------------*/
#thumbnail-slider {
margin:15px auto; /*center-aligned*/
width:100%;/*width:400px;*/
/*max-width:600px;*/
height:80px; 
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;
/*padding:20px;*/
background-color:#fff;
box-shadow: 0 2px 6px rgba(0,0,0,0.3);
box-sizing:border-box;
z-index:999;
}

#thumbnail-slider div.inner {
/*the followings should not be changed */
position:relative;
overflow:hidden;
padding:0;
margin:0;
/*background-color: #333;*/
}


#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*/
width:120px;
height:74px;
border:3px solid #fff;
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:#4d8fff;    
-webkit-filter: initial;
filter: initial;
}
#thumbnail-slider li:hover {
border-color:rgba(0,0,0,0.5);
-webkit-filter: grayscale(50%);
filter: grayscale(50%);
}

#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;
}

/* --------- 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;
top:0;
background-color:rgba(0,0,0,0.3);
width:30px;
height:100%;
text-align:center;
vertical-align: middle;
margin:0;
color:white;
z-index:999;
cursor:pointer;
transition:opacity 0.3s;
*background-color:#ccc;/*IE7 hack*/
backface-visibility:hidden;
}

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

#thumbnail-slider-next {
right: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: 10px;
height: 10px;
top:50%;
margin-top:-5px;
margin-left:-5px;
border-left: 4px solid white;
border-top: 4px solid white;
}

#thumbnail-slider-prev::before {
-ms-transform:rotate(45deg);/*IE9*/
-webkit-transform:rotate(-45deg);
transform: rotate(-45deg);
}

#thumbnail-slider-next::before {
-ms-transform:rotate(-135deg);/*IE9*/
-webkit-transform:rotate(135deg);
transform: rotate(135deg);
}



.slick-slider {
margin:0
}
.slick-slider .slick-track,
.slick-slider .slick-list {
/*line-height: 0;*/
}

.slick-tabs .item {
float: none;
display: inline-block;
width:120px;
height:80px;
margin: 3px;
border:none;
cursor: pointer;
}
.slick-tabs .item.active {
/*border-width: 3px;
border-style: solid;
border-color: rgb(235, 0, 9);**/
outline: 3px solid rgb(235, 0, 9);
-webkit-filter: initial;
filter: initial;
}
.slick-tabs .item:hover {
/*border-width: 3px;
border-style: solid;
border-color: #4d8fff;*/
outline: 3px solid #4d8fff;
/*-webkit-filter: grayscale(50%);
filter: grayscale(50%);*/
}
.slick-tabs .item.active img,
.slick-tabs .item:hover img {
}

.slick-tabs .item > .thumb {
width:100%;
height: 100%;
background-size:cover;
background-repeat:no-repeat;
background-position:center center;
display:block;
font-size:0;
max-height: 80px;
margin: auto;
}

.slick-tabs .slick-myprev, .slick-tabs .slick-mynext {
position: absolute;
top: 0;
background-color: rgba(0,0,0,0.3);
width: 30px;
height: 80px;
text-align: center;
vertical-align: middle;
margin: 0;
padding: 0;
color: white;
z-index: 99;
cursor: pointer;
transition: opacity 0.3s;
*background-color: #ccc;/*IE7 hack*/
backface-visibility: hidden;
}
.slick-tabs .slick-myprev {
left: 0;
}
.slick-tabs .slick-mynext {
right: 0;
}
.slick-tabs .slick-myprev:before,
.slick-tabs .slick-mynext:before {
position: absolute;
content: "";
display: block;
width: 16px;
height: 16px;
top: 50%;
margin-top: -5px;
margin-left: 8px;
font: normal normal normal 14px/1 FontAwesome;
/*border-left: 4px solid white;
border-top: 4px solid white;*/
}
.slick-tabs .slick-myprev:before {
content: "\f053";
/*-ms-transform:rotate(45deg);
-webkit-transform:rotate(-45deg);
transform: rotate(-45deg);*/
}
.slick-tabs .slick-mynext:before {
content: "\f054";
/*-ms-transform:rotate(-135deg);
-webkit-transform:rotate(135deg);
transform: rotate(135deg);*/
}
.slick-myprev:hover,
.slick-myprev:focus,
.slick-mynext:hover,
.slick-mynext:focus
{
    opacity: 1;
}
.slick-myprev.slick-disabled,
.slick-mynext.slick-disabled
{
    opacity: .25;
}