@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700);
body { font-family: 'Open Sans', sans-serif; font-weight: 300; }
/* Visit http://www.menucool.com/responsive-slider for instructions */
#ninja-slider { width: 100%; margin: 0 auto; overflow: hidden; box-sizing: border-box; }
#ninja-slider.fullscreen { background: #000000; }
#ninja-slider .fs-icon { top: 20px; right: 20px; width: 60px; height: 26px; background: rgba(0, 0, 0, 0.3); z-index: 2; color: white; text-align: center; font: bold 11px/26px arial; border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 2px; opacity: 0; -webkit-transition: opacity 0.8s; transition: opacity 0.8s; }
#ninja-slider .slider-inner:hover .fs-icon, #ninja-slider.fullscreen .fs-icon { opacity: 1; }
#ninja-slider .fs-icon::before { content: "EXPAND"; display: block; }
#ninja-slider.fullscreen .fs-icon::before { content: "CLOSE"; }
#ninja-slider .slider-inner { margin: 0 auto;     /*center-aligned */ font-size: 0px; position: relative; box-sizing: border-box; }
#ninja-slider.fullscreen .slider-inner { width: 100%; max-width: 950px; }
#ninja-slider ul { overflow: hidden; position: relative; list-style: none; padding: 0; box-sizing: border-box; padding-top: calc((524 / 1366) * 100%) !important; height: auto !important; }
#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 img {border-radius:10px; box-sizing:border-box}*/
#ninja-slider li.ns-show { opacity: 1; }
/* --------- slider image ------- */
#ninja-slider .ns-img { background-color: rgba(0, 0, 0, 0.3); background-size: contain;     /*Note: If transitionType is zoom, it will be overridden to cover.*/     /*decorate border*/
/*box-shadow: 0 1px 5px rgba(0,0,0,.8),inset 0 0 2px rgba(255,255,255,.4);*/
border-radius: 10px; cursor: default; display: block; position: absolute; width: 100%; height: 100%; background-repeat: no-repeat; background-position: center center; }
#ninja-slider .ns-img2 { background-color: rgba(0, 0, 0, 0.3); background-size: contain;     /*Note: If transitionType is zoom, it will be overridden to cover.*/     /*decorate border*/
/*box-shadow: 0 1px 5px rgba(0,0,0,.8),inset 0 0 2px rgba(255,255,255,.4);*/
cursor: default; display: block; position: absolute; width: 100%; height: 100%; background-repeat: no-repeat; background-position: center center; }
/*---------- Captions -------------------*/
#ninja-slider .videoRegister { padding: 5px 10px; bottom: -100px; width: 50%; left: 50%; right: 50%; transform: translate(-50%, 0%); text-align: center; font-size: 12px; color: rgba(255, 255, 255, 0.50); position: absolute; z-index: 99999; animation-name: videoRegisterMove; animation-duration: .5s; animation-delay: 2s; animation-iteration-count: 1; animation-fill-mode: forwards; }
#ninja-slider .videoRegister:hover { color: rgba(255, 255, 255, 1); }
@keyframes videoRegisterMove {
from { bottom: -100px; }
to { bottom: 0px; }
}
#ninja-slider .caption { padding: 20px 40px; margin: auto; left: 0; right: 0; top: auto; bottom: 8%; width: 50%; text-align: center; font-family: sans-serif; font-size: 2.2em; color: #fff; background: rgba(0, 0, 0, 0.6); border: 1px solid rgba(255, 255, 255, 0.4); border-radius: 4px; position: absolute; box-sizing: border-box; opacity: 0; -webkit-transition: opacity 1s ease-in; transition: opacity 1s ease-in; z-index: 99999; }
#ninja-slider li[class*='-s'] .caption { opacity: 1; }
/* ---------If there are videos ------- */
#ninja-slider .video, .video-playbutton-layer { top: 0; left: 0; border: 0; width: 100%; height: 100%; text-align: center; background: var(--main-color); position: absolute; }
/* And if you have added the HTML: <div class="video-playbutton-layer"></div> */
.video-playbutton-layer { background: transparent url(video-btn.png) no-repeat center center; zoom: 60%; cursor: pointer; }
/* And if you have YouTube or Vimeo */
#ninja-slider div.stopVideoIcon { position: absolute; width: 30px; height: 30px; top: 0; right: 0px; margin: 0 0 6px 6px; background: rgba(0, 0, 0, 0.7); border-bottom-left-radius: 4px; cursor: pointer; }
#ninja-slider div.stopVideoIcon::before { content: "+"; color: white; font-family: 'Open Sans', sans-serif; font-weight: 300; font-size: 30px; line-height: 30px;     /*font:normal 30px/30px arial;*/ -webkit-transform: rotate(45deg); transform: rotate(45deg); display: block; }
/* ---------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 { position: absolute; display: inline-block; width: 60px; height: 100px; line-height: 100px; top: 50%; margin: 0; margin-top: -65px;     /*pager's height should also be counted*/ background-color: none; background-color: #ccc\9;     /*IE8 hack*/ backface-visibility: hidden; color: #F00; overflow: hidden; white-space: nowrap; -webkit-user-select: none; user-select: none; border-radius: 3px; z-index: 10; cursor: pointer; font-family: sans-serif; font-size: 0px; -webkit-transition: all 0.7s cubic-bezier(0.165, 0.84, 0.44, 1); transition: all 0.7s cubic-bezier(0.165, 0.84, 0.44, 1); -webkit-transform: scale(1, 1.3); transform: scale(1, 1.3);     /*border:1px solid white;*/ opacity: 0; }
#ninja-slider:hover #ninja-slider-prev, #ninja-slider:hover #ninja-slider-next { opacity: 1; cursor: pointer; color: #4D4D4D;     /*background-color:rgba(0,0,0,0.4);*/ }
#ninja-slider-prev { left: -25%; }
#ninja-slider-next { right: -25%; }
#ninja-slider:hover #ninja-slider-prev { left: 0; }
#ninja-slider:hover #ninja-slider-next { right: 0; }
/*#ninja-slider-prev {left:-70px;}
#ninja-slider-next {right:-70px;}*/
/*pagination within the prev/next buttons*/
#ninja-slider-prev div { opacity: 0; margin-left: 30px; transition: opacity 0.7s; }
#ninja-slider-next div { opacity: 0; float: right; margin-right: 30px; transition: opacity 0.7s; }
#ninja-slider-prev:hover div, #ninja-slider-next:hover div { opacity: 1; }
/* arrows */
#ninja-slider-prev::before, #ninja-slider-next::before { position: absolute; top: 25px; content: ""; display: inline-block; width: 30px; height: 30px; border-left: 3px solid var(--second-color); border-top: 3px solid var(--second-color); }
#ninja-slider:hover #ninja-slider-prev::before, #ninja-slider:hover #ninja-slider-next::before { border-left: 3px solid var(--color-main); border-top: 3px solid var(--color-main); }
#ninja-slider-prev::before { -ms-transform: rotate(-45deg);     /*IE 9*/ -webkit-transform: rotate(-45deg); transform: rotate(-45deg); backface-visibility: hidden; right: -16px; }
#ninja-slider-next::before { -ms-transform: rotate(135deg);     /*IE 9*/ -webkit-transform: rotate(135deg); transform: rotate(135deg); backface-visibility: hidden; left: -16px; }
/*------ pager(nav bullets) ------*/
/* The pager id should be: slider id + "-pager" */
/* #ninja-slider-pager { display:none;}*/
#ninja-slider-pager { padding-top: 20px;     /* set the distance away from the slider */ margin: 0 auto;     /* center align */ text-align: center; display: table; font-size: 0; vertical-align: middle; display: none; }
#ninja-slider-pager a { display: inline-block; width: 30px; height: 5px;     /*background-color: #888;*/ background-color: transparent; border: 1px solid #696969; font-size: 0;     /* Non-zero will show the index num */ margin: 2px 6px; cursor: pointer; border-radius: 5px;     /* box-shadow:inset 0 1px 3px #666666; */ vertical-align: middle; }
#ninja-slider-pager a:hover { background: #fff; opacity: 1; vertical-align: middle; }
#ninja-slider-pager a.active { width: 30px; height: 5px; background-color: #fff;     /*box-shadow:0 1px 1px rgba(0,0,0,.5);*/ vertical-align: middle;     /* timer dots */     /*opacity:1;
animation: cssAnimation 7s ease-in 0s forwards;*/ }
/* timer dots */
/*@keyframes cssAnimation {
to {
opacity:0;
}
}*/
#ninja-slider-pager, #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:950px) {
#ninja-slider-prev { left: -12px; }
#ninja-slider-next { right: -12px; }
}
@media only screen and (max-width:600px) {
#ninja-slider-prev, #ninja-slider-next, #ninja-slider-pager { display: none; }
}