#ninja-slider {
    width:100%;
    background:#191919;
    padding: 0;
    margin:0 auto;
    overflow:hidden;
    box-sizing:border-box;
}


#ninja-slider .fs-icon {
    top:6%;
    right:6%;
    z-index:2;
    text-align:center;
	font-size: 20px;
    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;
	top:6%; right: 6%;
}


#ninja-slider .slider-inner {
    /*max-width:700px;*/
    margin:0 auto;/*center-aligned */
    font-size:0px;
    position:relative;
    box-sizing:border-box;
    padding-bottom:100px!important;
}

#ninja-slider.fullscreen .slider-inner {
    width:55%; /* 100% will cause a big top gap issue in iPhone*/
}

#ninja-slider ul {
    position:relative;
    list-style:none;
    padding:0;
    box-sizing:border-box;

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

#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:100px!important;
}

#ninja-slider li.ns-show {
    opacity:1;
}



/* --------- slider image ------- */  
#ninja-slider .ns-img {
    background-size:contain;/*Note: If transitionType is zoom, it will be overridden to cover.*/

    cursor:default;
    display:block;
    position: absolute;
    width:100%;
    height:100%;
    background-repeat:no-repeat;
    background-position:center center;
}


/*---------- Captions -------------------*/
#ninja-slider .caption {
    position:absolute;
    top:98%;
    padding:0 40px;
    margin:auto;
    width:100%;
    text-align:center;
    font-family:sans-serif;
    font-size:14px;
    color:#ccc;
    box-sizing:border-box;    
}


/* ---------Arrow buttons ------- */   
/* The arrow button id should be: slider id + ("-prev", "-next", and "-pause-play") */ 
#ninja-slider-pause-play { display:none;}  

#ninja-slider-prev{
    position: absolute;
	background:url(../images/previous-active.png) no-repeat;	
    display:inline-block;
    width:97px;
    height:15px;
	font-size: 0px;
    top:auto;
    margin-top:-28px;
    background-color:rgba(0,0,0,0.4);
    background-color:#ccc\9;/*IE8 hack*/
    backface-visibility:hidden;
    -webkit-user-select: none;
    user-select:none;
    border-radius:2px;
    z-index:10;
    cursor:pointer;
    -webkit-transition:all 0.7s;
    transition:all 0.4s;
	bottom:0%;
	
	
}

 #ninja-slider-next
{
    position: absolute;
	background:url(../images/next_active.png) no-repeat;
	
    display:inline-block;
    width:50px;
    height:15px;
	font-size: 0px;
    top:auto;
    margin-top:-28px;
    background-color:rgba(0,0,0,0.4);
    background-color:#ccc\9;/*IE8 hack*/
    backface-visibility:hidden;
    -webkit-user-select: none;
    user-select:none;
    border-radius:2px;
    z-index:10;
    cursor:pointer;
    -webkit-transition:all 0.7s;
    transition:all 0.4s;
	bottom:0%;
}

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


#ninja-slider-prev {
    right: -20%; /*set it with a positive value if .slider-inner does not have max-width setting.*/
}
#ninja-slider-next {
    right: -30%;
}



/*pagination num within the arrow buttons*/
#ninja-slider-prev:hover, #ninja-slider-next:hover { font-size: 0px; }
#ninja-slider-prev:hover div, #ninja-slider-next:hover div {opacity:1; font-size: 0px;  }


/*------ 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;
}

.slider-inner{ text-align: left; padding: 10%; }
.faculty_img{ margin-bottom: 16px; }
.faculty_name{ font-size:24px; line-height: 24px; margin-bottom: 6px; }
.fac_subheading{ font-size: 18px; line-height: 18px; margin-bottom: 30px; }
.brief{ font-size: 14px; line-height:16px; margin-bottom: 40px; }

/*Responsive settings*/

@media only screen and (max-width:1050px){
    
    #ninja-slider-prev {
        left:0;
    }

    #ninja-slider-next {
        right:0;
    }
}

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

    #ninja-slider-prev, #ninja-slider-next, #ninja-slider-pager {
        sdisplay:none;
    }

    
    #ninja-slider li .cap1 {
        font-size:20px;
		
    }
}

@media (max-width: 767px) {

.faculty_img{ margin-bottom: 12px; }
.faculty_name{ font-size:18px; line-height: 18px; margin-bottom: 6px; }
.fac_subheading{ font-size: 14px; line-height: 16px; margin-bottom: 20px; }
.brief{ font-size: 12px; line-height:14px; }
.slider-inner{ padding: 8% 8% 15% 8%; }	

#ninja-slider-prev {
        left:-8px;
    }

#ninja-slider-next {
        right:-8px;
    }	
	
	#ninja-slider-prev, #ninja-slider-next{ display: none; }
	#ninja-slider.fullscreen .slider-inner {
    width:98%; /* 100% will cause a big top gap issue in iPhone*/
	
}