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


#ninja-slider                                           {width:100%;height:100vh;background:#FFF;padding: 0!important;margin:0 auto;overflow:hidden;box-sizing:border-box;border-bottom:solid #0c4621 3px}

#ninja-slider .slider-inner                             {margin:0 auto;font-size:0px;position:relative;box-sizing:border-box;}

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

#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;}

.screen                                                 {width:100%;height:100%;background:rgba(255,255,255,0.3);position:absolute;z-index:1}

/* --------- slider image ------- */  
#ninja-slider .ns-img                                   {background-color:rgba(0,0,0,0.8);background-size:contain;border-radius:4px;cursor:default;display:block;position: absolute;width:100%;height:100%;background-repeat:no-repeat;background-position:center center;}

#ninja-slider .caption                                  {font-size:4em;position:absolute;max-width:1200px;width:auto;left:0;margin:0 auto 0 0;text-align:center;color:#ffffff;bottom:9%;background:#0c4621;padding:15px 50px;border:solid #ffffff 2px;z-index:3}

#ninja-slider li[class*='-s'] .caption                  {-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: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%);}
}  

div.navsWrapper                                         {position:absolute;height:52px;right:90px;bottom:9%;z-index:10;}
 
#ninja-slider-prev, #ninja-slider-next                  {position: absolute;display:inline-block;width:52px;height:52px;line-height:52px;margin:0;border:2px solid white;backface-visibility:hidden;color:white;overflow:hidden;-webkit-user-select: none;user-select:none;font-family:sans-serif;font-size:14px;transition:all 0.5s;cursor:pointer;background:#0c4621}

#ninja-slider-prev                                      {left:auto; right:-1px;}
    #ninja-slider                                   {height:auto!important;}

#ninja-slider-next                                      {left:-1px; right:auto;}

#ninja-slider-prev:hover, #ninja-slider-next:hover      {width:80px;background-color:rgba(0,0,0,0.6);}

#ninja-slider-prev div                                  {margin-right:41px;white-space:nowrap;float:right;opacity:0;}
#ninja-slider-next div                                  {margin-left:41px;white-space:nowrap;opacity:0;}
#ninja-slider-prev:hover div, 
#ninja-slider-next:hover div                            {opacity:1;}

/* arrows */
#ninja-slider-prev::before, #ninja-slider-next::before  {position: absolute;top: 17px;content: "";display: inline-block;width: 13px;height: 13px;border-left: 4px solid white;border-top: 4px solid white;backface-visibility:hidden;}

#ninja-slider-prev::before                              {-ms-transform:rotate(-45deg);/*IE 9*/-webkit-transform:rotate(-45deg);transform: rotate(-45deg);right:15px;}

#ninja-slider-next::before                              {-ms-transform:rotate(135deg);/*IE 9*/-webkit-transform:rotate(135deg);transform: rotate(135deg);left:15px;}

/*------ pager(nav bullets) ------*/      
/* The pager id should be: slider id + "-pager" */
#ninja-slider-pager, #ninja-slider-pause-play           {display:none;} 

/*Responsive settings*/
@media only screen and (max-width:500px){
    #ninja-slider-prev, #ninja-slider-next, #ninja-slider-pager {display:none;}
}

@media only screen and (max-width:1100px){    
    #ninja-slider .caption                              {font-size:3em;padding:9px 30px;}
}

@media only screen and (max-width:700px){    
    #ninja-slider .caption                              {font-size:1.6em;padding:5px 20px;}
}