/* --------- slider image ------- */  
.slider .ns-img {
    background-color:rgba(0,0,0,0.8);
    background-size:contain;/*Note: If transitionType is zoom, it will be overridden to cover.*/

    /*box-shadow: 0 1px 5px rgba(0,0,0,.8),inset 0 0 2px rgba(255,255,255,.4);*/
    border-radius:4px;

    cursor:pointer;
    display:block;
    width:100%;
    height:100%;
    background-repeat:no-repeat;
    background-position:center center;
max-height: 570px;
}
.slide{ position: relative;
   }

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

.slider .caption,.slider .caption_org,.slider .caption_photo,.slider .caption_loc {
    font-size:24px;
    position:absolute;
    width:10%;
    text-align:center;
    color:rgba(255,255,255,1);
    top:55%;
    padding: 10px;
    background: rgba(109, 109, 109, .5);
    width: 400px;
}

.slider .caption_org {
    top:70%;
}
.slider .caption_photo {
    top:80%;
}
.slider .caption_loc {
    top:60%;

  z-index: 2;
  height:27%;
  width:22%;
  bottom:0;
  margin-left:70%;

}

.slider li[class*='-s'] .caption,.slider li[class*='-s'] .caption_org,
.slider li[class*='-s'] .caption_photo,.slider li[class*='-s'] .caption_loc {
    /* 5s = (delay + transitionSpeed) set in the ninja-slider.js */
    -webkit-animation: titleAnimation 5s linear both;
    animation: titleAnimation 5s linear both;
}

@keyframes titleAnimation { 
	0% { opacity:0; }
	10% { opacity:0;transform: translateY(-20%);}
	20% { opacity:1;transform: translateY(0%);}
	70% {opacity:1;transform: translateY(0%);}
/*	80% {opacity:1;transform: translateY(100%);}
	100% {opacity:1;transform: translateY(100%);}
*/}

@-webkit-keyframes titleAnimation { 
	0% { opacity:0; }
	10% { opacity:0; -webkit-transform:translateY(-20%);}
	25% { opacity:1; -webkit-transform:translateY(0%);}
	70% {opacity:1; -webkit-transform:translateY(0%);}
/*	80% {opacity:1; -webkit-transform:translateY(100%);}
	100% {opacity:1; -webkit-transform:translateY(100%);}
*/}

/* ---------Arrow buttons ------- */   
/* The arrow button id should be: slider id + ("-prev", "-next", and "-pause-play") */ 
/* Usually the ninja-slider.js will create the arrow buttons and pager(nav dots) automatically, unless you have added their markup manually to the HTML as this demo did.
   This demo has put them inside a DIV.navWrapper. 
*/  

div.navsWrapper {
    position:absolute;
    height:52px;
    right:50%;
    bottom:9%;
    z-index:10;
}
 

/*Responsive settings*/
@media only screen and (max-width:500px){

.slider .caption_org,.slider .caption_photo,.slider .caption_loc {
     font-size:7px;
   }
}

@media only screen and (max-width:1100px){    
    .slider .caption,.slider .caption_org,.slider .caption_photo,.slider .caption_loc  {
        font-size:9px;
    }
}

@media only screen and (max-width:700px){    
    .slider .caption,.slider .caption_org,.slider .caption_photo,.slider .caption_loc  {
        font-size:10px;
    }
}

.slider .caption a:hover,.slider .caption_org a:hover,
.slider .caption_photo a:hover,.slider .caption_loc a:hover  {
    color:rgba(255,255,255,1);
}