body {
margin:0; padding:0; background-color:black;}

#ninja-slider {
     width:100%;
    width:100%; height:100%;
    margin:0; padding:0;
    overflow:hidden;
    box-sizing:border-box; position:fixed;
}

#ninja-slider .slider-inner {
    /*max-width:720px;*/
    margin:0;/*center-aligned */
    font-size:1vw;
    width:100%; height:100%; 
    position:fixed;
}
#ninja-slider ul {width:100%; height:100%; min-height:100%; background-size:cover;
    list-style:none;
    padding:0; margin:0;
    box-sizing:border-box;
}

#ninja-slider li {    
 width:100%;
    height:100%;
    top:0;
    left:0;
    position: fixed;
    font-size:1vw;
    list-style:none;
    margin:0;
    padding:0;
    opacity:0;
    overflow:hidden;
    box-sizing:border-box;
}

#ninja-slider li::after {
    content:"";
    display:block;
    position:absolute;
    width:100%;
    height:100%;
    background:transparent url(pattern.png) repeat 0 0;
    top:0;left:0;
}


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


/* --------- slider image ------- */  
#ninja-slider .ns-img {
   
    background-size:contain;
    cursor:default;
    display:block;
    position: absolute;
    width:100%;
    height:100%;
    background-repeat:no-repeat;
    background-position:center center;
}


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

#ninja-slider .caption {
   font-size:6vw; text-shadow:0.1vw 0.1vw 0.2vw black; font-family:'Century Gothic'; 
    position:relative;
    top: 15vh;
    width:100%;
    text-align:center;
    color:white;
    bottom:10%;
}
#ninja-slider li[class*='-s'] .caption {
    /* 5s = (delay + transitionSpeed) set in the ninja-slider.js */
    -webkit-animation: titleAnimation 10s linear both;
    animation: titleAnimation 10s 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:0;transform: translateY(100%);}
	100% {opacity:0;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:0; -webkit-transform:translateY(100%);}
	100% {opacity:0; -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. 
*/