#ninja-slider
{
    width:100%;
    margin:2px auto; /*center aligned*/
	height:338px;
	z-index:-999;position: relative;
    overflow: hidden;
    /*visibility: hidden;*/
    padding:0;
}
#ninja-slider > ul
{
    padding:0;
    margin:0;
}    
/* The pager id should be: slider id + "-pager" */    
#ninja-slider-pager
{ width:100%; height:10px; z-index:1;
     margin:-25px auto; /* center each slide *//* set the distance away from the slider */ 
   /* center align */ 
    text-align:center;
    font-size:0;
}
         
#ninja-slider-pager a 
{
    display:inline-block;
    width: 10px;
    height: 10px;
    background-color: #CCCCCC; 
    font-size:0;
    margin:2px 6px;
    cursor:pointer;
    border-radius:10px;
    box-shadow:inset 0 1px 3px #666666;
}
#ninja-slider-pager a:hover 
{
    opacity:0.6;
}
#ninja-slider-pager a.active 
{
    background-color:#1293dc;
    box-shadow:inset 0 1px 3px -1px #28b4ea,0 1px 1px rgba(0,0,0,.5);
    background-image:linear-gradient(top,#1293dc,#0f6297);
}
 
/*styles for mobile*/
@media only screen and (max-width: 600px) { 
    #ninja-slider h2 {
        top:22%;
        font-size:40px;
    }

    #ninja-slider h3 {
        top:22%;
        font-size:20px;
        padding-top:60px;
    }
}

/* Usually you don't need to change the following settings
---------------------------------------------------------- */
#ninja-slider > ul
{
    -webkit-backface-visibility: hidden;
    -webkit-perspective: 1000px;
    backface-visibility: hidden;
    perspective: 1000px;
    -webkit-tap-highlight-color: transparent;
}
#ninja-slider > ul
{
    overflow: hidden;
    position: relative;
    list-style:none;
    margin:0;
	width: 100%;
}

#ninja-slider > ul > li
{
    float: left;
    width: 100%;
    position: relative;
    list-style:none;
    padding:0;margin:0;
}