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


#ninja-slider {
    width:100%;
	border: #cccccc solid 5px;
	border-radius: 20px;
    background:#FFF;
    padding: 0!important;
    margin:0 auto;
    overflow:hidden;
    box-sizing:border-box;
}

#ninja-slider .slider-inner {
    max-width:600px;
    margin:0 auto;/*center-aligned */
    font-size:0px;
    position:relative;
    box-sizing:border-box;
}

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

#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;
    box-sizing:border-box;
}


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


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


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

#ninja-slider .caption {
    font-size:2.5em;
    font-family: Tahoma,arial,sans-serif;
    position:absolute;
    width:100%;
    text-align:center;
    color:#666666;
    bottom:5%;
}
#ninja-slider li.ns-show .caption {
    /* 5s = (delay + transitionSpeed) set in the ninja-slider.js */
    -webkit-animation: titleAnimation 5s linear both;
    animation: titleAnimation 5s linear both;
}

#ninja-slider li.sl-0 .caption { 
    /*delay caption animation for the initial slide*/
    -webkit-animation: none;
    animation: none;
    display:none;
}

@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%);}
}


@media only screen and (max-width:64.063em){    
    #ninja-slider .caption {
        font-size:3em;
    }
}

@media only screen and (max-width:40.063em){    
    #ninja-slider .caption {
        font-size:2em;
    }
}