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

#ninja-slider {
    width:100%;
    background:#f3f3f3;
    padding: 0;

    margin:0 auto;
    overflow:hidden;
    box-sizing:border-box;
}


#ninja-slider .fs-icon {
  border: 2px solid;
  border-radius: 50%;
  color: #009bd4;
  font: bold 18px/36px arial;
  height: 37px;
  opacity: 0;
  right: 6px;
  text-align: center;
  top: 6px;
  transition: opacity 0.8s ease 0s;
  width: 38px;
  z-index: 2;
}

#ninja-slider .slider-inner:hover .fs-icon,
#ninja-slider.fullscreen .fs-icon {
    opacity: 1;
}
#ninja-slider .slider-inner:hover .fs-icon, #ninja-slider.fullscreen .fs-icon {
  right: 50% !important;
}
#ninja-slider .fs-icon::before {      
    content:"EXPAND";
    display:block;
}

#ninja-slider.fullscreen .fs-icon::before {
  content: "+";
  display: block;
  font-size: 25px;
  font-weight: bold;
  transform: rotate(-45deg);
}

#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 {
  max-width: 92%;
  width: 98%;
}

#ninja-slider ul {
    position:relative;
    list-style:none;
    padding:0;
    box-sizing:border-box;
	margin-top: 80px !important;
    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, #ninja-slider-next {
  -moz-user-select: none;
  backface-visibility: hidden;
  background-color: #009BD4;
  border-radius: 2px;
  color: white;
  cursor: pointer;
  display: inline-block;
  font-family: sans-serif;
  font-size: 13px;
  height: 75px;
  line-height: 56px;
  margin-top: -28px;
  opacity: 0.3;
  overflow: hidden;
  position: absolute;
  top: 40%;
  transition: all 0.4s ease 0s;
  white-space: nowrap;
  width: 30px;
  z-index: 10;
}

.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.*/
   margin-top: 40px;
}
#ninja-slider-next {
    right: -42px;
    margin-top: 40px;
}

/* arrows */
#ninja-slider-prev::before {
  backface-visibility: hidden;
  content: "";
  display: inline-block;
  font-family: fontawesome;
  font-size: 18px;
  height: 20px;
  position: absolute;
  top: 10px;
  width: 20px;
}
#ninja-slider-next::before {
  backface-visibility: hidden;
  content: "";
  display: inline-block;
  font-family: fontawesome;
  font-size: 18px;
  height: 20px;
  position: absolute;
  top: 0;
  width: 20px;
}
#ninja-slider-prev::before {
  left: 5px;
  margin-top: 0;
}

#ninja-slider-next::before {
  right: 5px;
  margin-top: 11px;
}


/*pagination num within the arrow buttons*/
#ninja-slider-prev:hover, #ninja-slider-next:hover {width:80px;background-color: #009BD4;}
#ninja-slider-prev div {
  float: right;
  margin-right: 8px;
  margin-top: 11px;
  opacity: 0;
  white-space: nowrap;
}
#ninja-slider-next div {
  float: left;
  margin-left: 8px;
  opacity: 0;
  white-space: nowrap;
  margin-top: 11px;
}
#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:1050px){
    
    #ninja-slider-prev {
        left:0;
    }

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

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

    

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