#ninja-slider {

    width:100%;

    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:850px;

    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;

}


.ns-show img {

    width: 100%;
    height: 100%;

}





/* --------- 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.*/



    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 {

        display:none;

    }

    #ninja-slider .fs-icon {

        display:none;

    }

}









#ninja-slider1 {

    width:100%;

    padding-bottom:10px;

    margin:0 auto;

    overflow:hidden;

    box-sizing:border-box;

}



#ninja-slider1.fullscreen {

    background:black;

}



#ninja-slider1.fullscreen #ninja-slider1-prev {

    left: -50px; 

}

#ninja-slider1.fullscreen #ninja-slider1-next {

    right: -50px;

}





#ninja-slider1 .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-slider1:hover .fs-icon {

    opacity: 1;

}



#ninja-slider1.fullscreen .fs-icon {

    background-position: center -45px;

    opacity:1;

}



#ninja-slider1 .slider-inner {

    max-width:850px;

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

    font-size:0px;

    position:relative;

    box-sizing:border-box;

}



#ninja-slider1.fullscreen .slider-inner {

    max-width:900px;

    max-height:80%;

}



#ninja-slider1 ul {

    /*overflow:hidden;*/

    position:relative;

    list-style:none;

    padding:0;

    box-sizing:border-box;

}



#ninja-slider1 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-slider1 li.ns-show {

    opacity:1;

}







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

#ninja-slider1 .ns-img {

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

    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-slider1-pause-play { display:none;}    



#ninja-slider1-prev, #ninja-slider1-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-slider1-prev, .slider-inner:hover #ninja-slider1-next {

    opacity:1;

}





#ninja-slider1-prev {

    left: 0; 

}

#ninja-slider1-next {

    right: 0;

}



/* arrows */

#ninja-slider1-prev::before, #ninja-slider1-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-slider1-prev::before {

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

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

    transform: rotate(-45deg);

    backface-visibility:hidden;

    right:4px;

}



#ninja-slider1-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-slider1-prev div, #ninja-slider1-next div {display:none;}





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

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

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





#ninja-slider1-pager, #ninja-slider1-prev, #ninja-slider1-next, #ninja-slider1-pause-play

{

    -webkit-touch-callout: none;

    -webkit-user-select: none;

    user-select: none;

}





/*Responsive settings*/

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



    #ninja-slider1-prev, #ninja-slider1-next {

        display:none;

    }

    #ninja-slider1 .fs-icon {

        display:none;

    }

}







#ninja-slider2 {

    width:100%;

    padding-bottom:10px;

    margin:0 auto;

    overflow:hidden;

    box-sizing:border-box;

}



#ninja-slider2.fullscreen {

    background:black;

}



#ninja-slider2.fullscreen #ninja-slider2-prev {

    left: -50px; 

}

#ninja-slider2.fullscreen #ninja-slider2-next {

    right: -50px;

}





#ninja-slider2 .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-slider2:hover .fs-icon {

    opacity: 1;

}



#ninja-slider2.fullscreen .fs-icon {

    background-position: center -45px;

    opacity:1;

}



#ninja-slider2 .slider-inner {

    max-width:850px;

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

    font-size:0px;

    position:relative;

    box-sizing:border-box;

}



#ninja-slider2.fullscreen .slider-inner {

    max-width:900px;

    max-height:80%;

}



#ninja-slider2 ul {

    /*overflow:hidden;*/

    position:relative;

    list-style:none;

    padding:0;

    box-sizing:border-box;

}



#ninja-slider2 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-slider2 li.ns-show {

    opacity:1;

}







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

#ninja-slider2 .ns-img {

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

    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-slider2-pause-play { display:none;}    



#ninja-slider2-prev, #ninja-slider2-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-slider2-prev, .slider-inner:hover #ninja-slider2-next {

    opacity:1;

}





#ninja-slider2-prev {

    left: 0; 

}

#ninja-slider2-next {

    right: 0;

}



/* arrows */

#ninja-slider2-prev::before, #ninja-slider2-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-slider2-prev::before {

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

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

    transform: rotate(-45deg);

    backface-visibility:hidden;

    right:4px;

}



#ninja-slider2-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-slider2-prev div, #ninja-slider2-next div {display:none;}





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

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

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





#ninja-slider2-pager, #ninja-slider2-prev, #ninja-slider2-next, #ninja-slider2-pause-play

{

    -webkit-touch-callout: none;

    -webkit-user-select: none;

    user-select: none;

}





/*Responsive settings*/

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



    #ninja-slider2-prev, #ninja-slider2-next {

        display:none;

    }

    #ninja-slider2 .fs-icon {

        display:none;

    }

}









#ninja-slider3 {

    width:100%;

    padding-bottom:10px;

    margin:0 auto;

    overflow:hidden;

    box-sizing:border-box;

}



#ninja-slider3.fullscreen {

    background:black;

}



#ninja-slider3.fullscreen #ninja-slider3-prev {

    left: -50px; 

}

#ninja-slider3.fullscreen #ninja-slider3-next {

    right: -50px;

}





#ninja-slider3 .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-slider3:hover .fs-icon {

    opacity: 1;

}



#ninja-slider3.fullscreen .fs-icon {

    background-position: center -45px;

    opacity:1;

}



#ninja-slider3 .slider-inner {

    max-width:850px;

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

    font-size:0px;

    position:relative;

    box-sizing:border-box;

}



#ninja-slider3.fullscreen .slider-inner {

    max-width:900px;

    max-height:80%;

}



#ninja-slider3 ul {

    /*overflow:hidden;*/

    position:relative;

    list-style:none;

    padding:0;

    box-sizing:border-box;

}



#ninja-slider3 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-slider3 li.ns-show {

    opacity:1;

}







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

#ninja-slider3 .ns-img {

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

    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-slider3-pause-play { display:none;}    



#ninja-slider3-prev, #ninja-slider3-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-slider3-prev, .slider-inner:hover #ninja-slider3-next {

    opacity:1;

}





#ninja-slider3-prev {

    left: 0; 

}

#ninja-slider3-next {

    right: 0;

}



/* arrows */

#ninja-slider3-prev::before, #ninja-slider3-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-slider3-prev::before {

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

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

    transform: rotate(-45deg);

    backface-visibility:hidden;

    right:4px;

}



#ninja-slider3-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-slider3-prev div, #ninja-slider3-next div {display:none;}





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

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

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





#ninja-slider3-pager, #ninja-slider3-prev, #ninja-slider3-next, #ninja-slider3-pause-play

{

    -webkit-touch-callout: none;

    -webkit-user-select: none;

    user-select: none;

}





/*Responsive settings*/

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



    #ninja-slider3-prev, #ninja-slider3-next {

        display:none;

    }

    #ninja-slider3 .fs-icon {

        display:none;

    }

}









#ninja-slider4 {

    width:100%;

    padding-bottom:10px;

    margin:0 auto;

    overflow:hidden;

    box-sizing:border-box;

}



#ninja-slider4.fullscreen {

    background:black;

}



#ninja-slider4.fullscreen #ninja-slider4-prev {

    left: -50px; 

}

#ninja-slider4.fullscreen #ninja-slider4-next {

    right: -50px;

}





#ninja-slider4 .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-slider4:hover .fs-icon {

    opacity: 1;

}



#ninja-slider4.fullscreen .fs-icon {

    background-position: center -45px;

    opacity:1;

}



#ninja-slider4 .slider-inner {

    max-width:850px;

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

    font-size:0px;

    position:relative;

    box-sizing:border-box;

}



#ninja-slider4.fullscreen .slider-inner {

    max-width:900px;

    max-height:80%;

}



#ninja-slider4 ul {

    /*overflow:hidden;*/

    position:relative;

    list-style:none;

    padding:0;

    box-sizing:border-box;

}



#ninja-slider4 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-slider4 li.ns-show {

    opacity:1;

}







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

#ninja-slider4 .ns-img {

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

    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-slider4-pause-play { display:none;}    



#ninja-slider4-prev, #ninja-slider4-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-slider4-prev, .slider-inner:hover #ninja-slider4-next {

    opacity:1;

}





#ninja-slider4-prev {

    left: 0; 

}

#ninja-slider4-next {

    right: 0;

}



/* arrows */

#ninja-slider4-prev::before, #ninja-slider4-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-slider4-prev::before {

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

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

    transform: rotate(-45deg);

    backface-visibility:hidden;

    right:4px;

}



#ninja-slider4-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-slider4-prev div, #ninja-slider4-next div {display:none;}





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

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

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





#ninja-slider4-pager, #ninja-slider4-prev, #ninja-slider4-next, #ninja-slider4-pause-play

{

    -webkit-touch-callout: none;

    -webkit-user-select: none;

    user-select: none;

}





/*Responsive settings*/

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



    #ninja-slider4-prev, #ninja-slider4-next {

        display:none;

    }

    #ninja-slider4 .fs-icon {

        display:none;

    }

}