/* Visit http://www.menucool.com/responsive-slider for instructions */



#ninja-slider {

    width:100%;

    background:#191919;

    padding: 0;



    margin:0 auto;

    overflow:hidden;

    box-sizing:border-box;

}





#ninja-slider .fs-icon {

    top:6px;

    right:6px;

    width:60px;

    height:26px;

    background: rgba(0,0,0,0.2);

    z-index:2;

    color:white;

    text-align:center;

    text-shadow:0 0 3px black;

    font:bold 18px/36px arial;

    border-radius:2px;

    opacity:0;

    -webkit-transition:opacity 0.8s;

    transition:opacity 0.8s;

}



#ninja-slider .slider-inner:hover .fs-icon,

#ninja-slider.fullscreen .fs-icon {

    opacity: 1;

}



#ninja-slider .fs-icon::before {

    content:"EXPAND";

    display:block;

}

#ninja-slider.fullscreen .fs-icon {
    top: 14px !important;
    height: 50px;
}


#ninja-slider.fullscreen .fs-icon::before {
    transform: rotate(135deg);
    right: 53px;

    position: absolute;
    top: 17px;
    content: "";
    display: inline-block;
    width: 30px;
    height: 30px;
    border-left: 2px solid white;
    border-top: 2px solid white;
    backface-visibility: hidden;
/*     content:"+";


    display:block;

    font-weight:normal;

    font-size:5em;

    transform: rotate(-45deg); */

}


#ninja-slider.fullscreen .fs-icon::after {
    transform: rotate(135deg);
    right: 10px;

    position: absolute;
    top: 17px;
    content: "";
    display: inline-block;
    width: 30px;
    height: 30px;
    border-bottom: 2px solid white;
    border-right: 2px solid white;
    backface-visibility: hidden;
/*     content:"+";


    display:block;

    font-weight:normal;

    font-size:5em;

    transform: rotate(-45deg); */

}



#ninja-slider .slider-inner {

    max-width:500px;

    margin:0 auto;/*center-aligned */

    font-size:0px;

    position:relative;

    box-sizing:border-box;

}



#ninja-slider.fullscreen .slider-inner {

    width:90%; /* 100% will cause a big top gap issue in iPhone*/
    height: 90%;
    max-width:90%;
    max-height: 90%;

}



#ninja-slider ul {

    position:relative;

    list-style:none;

    padding:0;

    box-sizing:border-box;
    padding-top: 0 !important;
    height: 100% !important;



    overflow:visible!important; /*For showing captions outside the slider when transitionType is "fade". */

    margin-bottom:0!important;

}



#ninja-slider li {



    width:100%;

    height:100%;

    top:0;

    left:0;

    position: absolute;

    font-size:12px;

    list-style:none;

    margin:0;

    padding:0;

    opacity:0;

    /*overflow:hidden;*/ /*Comment it out to show the caption*/

    box-sizing:border-box;



    margin-bottom:0!important;

}



#ninja-slider li.ns-show {

    opacity:1;

}







/* --------- slider image ------- */

#ninja-slider .ns-img {

    background-color:rgba(0,0,0,0.3);

    background-size:contain; /* Note: If transitionType is zoom, it will be overridden to cover. */



    /*decorate border*/

    box-shadow: inset 0 0 2px rgba(255,255,255,.3);

    border-radius:6px;



    cursor:default;

    display:block;

    position: absolute;

    width:100%;

    height:100%;

    background-repeat:no-repeat;

    background-position:center center;
    background-size: contain;

}





/*---------- Captions -------------------*/

#ninja-slider .caption {

    position:absolute;

    top:auto;bottom:-25px;

    /* padding:0 40px; */

    margin:auto;

    width:100%;

    text-align:left;

    font-family:sans-serif;

    font-size:14px;

    color:white;

    box-sizing:border-box;
    font-family: Circular,"Helvetica Neue",Helvetica,Arial,sans-serif;
    /* text-transform: uppercase; */
    font-weight: 500;

}





/* ---------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!important;

    height:66px;

    line-height:66px;

    top: calc(50% - 28px); /* not 50% as caption at bottom should be counted.*/

    /* margin-top:-28px; */

    /* background-color:rgba(0,0,0,0.4); */

     /* background-color:#ccc\9;*/

    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.4s;

}



.slider-inner:hover #ninja-slider-prev, .slider-inner:hover #ninja-slider-next {

    opacity:1;

}





#ninja-slider-prev {

    left: -42px; /*set it with a positive value if .slider-inner does not have max-width setting.*/

}

#ninja-slider-next {

    right: -42px;

}



/* arrows */

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

    position: absolute;

    top: 17px;

    content: "";

    display: inline-block;

    width: 30px;

    height: 30px;

    border-left: 2px solid white;

    border-top: 2px solid white;

    backface-visibility:hidden;

}



#ninja-slider-prev::before {

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

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

    transform: rotate(-45deg);

    left:16px;

}



#ninja-slider-next::before {

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

    -webkit-transform:rotate(135deg);

    transform: rotate(135deg);

    right:16px;


}





/*pagination num within the arrow buttons*/

#ninja-slider-prev:hover, #ninja-slider-next:hover {width:80px;background-color:rgba(0,0,0,0.5);}

#ninja-slider-prev div {margin-right:8px;white-space:nowrap;opacity:0;float:right;display:none;}

#ninja-slider-next div {margin-left:8px;white-space:nowrap;opacity:0;float:left;display:none;}

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





/*------ pager(nav bullets) ------*/

/* The pager id should be: slider id + "-pager" */

#ninja-slider-pager { display:none;}



#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:600px){



    #ninja-slider-prev, #ninja-slider-next, #ninja-slider-pager {

        display:none;

    }





    #ninja-slider li .cap1 {

        font-size:20px;

    }

}