/* Visit http://www.menucool.com/responsive-slider for instructions */
#ninja-slider {
width:100%;
background:#fff;;
padding-top:0;
padding-bottom:10px;
margin:0 auto;
overflow:hidden;
box-sizing:border-box;
}
#ninja-slider.fullscreen {
background:black;
}
#ninja-slider.fullscreen #ninja-slider-prev {
left: -50px;
}
#ninja-slider.fullscreen #ninja-slider-next {
right: -50px;
}
#ninja-slider .fs-icon {
top:0px;
right:0px;
width:45px;
height:45px;
background: rgba(0,0,0,0.1) url(fullscreen.png) no-repeat 0 0;
z-index:2;
opacity:0;
-webkit-transition:opacity 0.8s;
transition:opacity 0.8s;
}
#ninja-slider:hover .fs-icon {
opacity: 1;
}
#ninja-slider.fullscreen .fs-icon {
background-position: center -45px;
opacity:1;
}
#ninja-slider .slider-inner {
max-width:100%;
margin:0 auto;/*center-aligned*/
font-size:0px;
position:relative;
box-sizing:border-box;
}
#ninja-slider.fullscreen .slider-inner {
max-width:900px;
max-height:80%;
}
#ninja-slider ul {
/*overflow:hidden;*/
position:relative;
list-style:none;
padding:0;
box-sizing:border-box;
}
#ninja-slider li {
background-color:#111;
width:100%;
height:100%;
top:0;
left:0;
position: absolute;
font-size:12px;
list-style:none;
margin:0;
padding:0;
opacity:0;
overflow:hidden;
box-sizing:border-box;
}
#ninja-slider li.ns-show {
opacity:1;
}
/* --------- slider image ------- */
#ninja-slider .ns-img {
background-color:rgba(0,0,0,0.1);
background-size:contain;/*Note: If transitionType is zoom, it will be overridden to cover.*/
border-radius:3px;
cursor:default;
display:block;
position: absolute;
width:100%;
height:100%;
background-repeat:no-repeat;
background-position:center center;
}
/* ---------Arrow buttons ------- */
/* The arrow button id should be: slider id + ("-prev", "-next", and "-pause-play") */
#ninja-slider-pause-play { display:none;}
#ninja-slider-prev, #ninja-slider-next
{
position: absolute;
display:inline-block;
width:42px;
height:56px;
line-height:56px;
top: 50%;
margin-top:-28px;
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:2px;
z-index:10;
opacity:0.3;
font-family:sans-serif;
font-size:13px;
cursor:pointer;
-webkit-transition:all 0.7s;
transition:all 0.7s;
}
.slider-inner:hover #ninja-slider-prev, .slider-inner:hover #ninja-slider-next {
opacity:1;
}
#ninja-slider-prev {
left: 0;
}
#ninja-slider-next {
right: 0;
}
/* arrows */
#ninja-slider-prev::before, #ninja-slider-next::before {
position: absolute;
top: 17px;
content: "";
display: inline-block;
width: 20px;
height: 20px;
border-left: 2px solid white;
border-top: 2px solid white;
}
#ninja-slider-prev::before {
-ms-transform:rotate(-45deg);/*IE 9*/
-webkit-transform:rotate(-45deg);
transform: rotate(-45deg);
backface-visibility:hidden;
right:4px;
}
#ninja-slider-next::before {
-ms-transform:rotate(135deg);/*IE 9*/
-webkit-transform:rotate(135deg);
transform: rotate(135deg);
backface-visibility:hidden;
left:4px;
}
/*pagination num within the arrow buttons*/
#ninja-slider-prev div, #ninja-slider-next div {display:none;}
/*------ pager(nav bullets) ------*/
/* The pager id should be: slider id + "-pager" */
#ninja-slider-pager { display:none;}
#ninja-slider-pager, #ninja-slider-prev, #ninja-slider-next, #ninja-slider-pause-play
{
-webkit-touch-callout: none;
-webkit-user-select: none;
user-select: none;
}
/*Responsive settings*/
@media only screen and (max-width:800px){
#ninja-slider-prev, #ninja-slider-next, #ninja-slider-pager {
display:none;
}
#ninja-slider .fs-icon {
display:none;
}
}