/* Visit http://www.menucool.com/responsive-slider for instructions */ #ninja-slider { width:81.65%; padding: 0px; margin:0 auto; /*overflow:hidden;*/ box-sizing:border-box; } #ninja-slider.fullscreen { background:black; } #ninja-slider div.fs-icon { top:10px; right:6px; 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; display: none; } #ninja-slider .slider-inner:hover div.fs-icon, #ninja-slider.fullscreen div.fs-icon { opacity: 1; } #ninja-slider div.fs-icon::before { content:"EXPAND"; display:block; } #ninja-slider.fullscreen div.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 { /*width:100%;*/ /*overflow:hidden;*/ position:relative; list-style:none; padding:0; box-sizing:border-box; touch-action:pan-y; padding-top:69.5% !important; } .slider_detalils2 #ninja-slider ul { padding-top:100% !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.ns-show { opacity:1; } /* --------- slider image ------- */ #ninja-slider .ns-img { background-size:contain;/*Note: If transitionType is zoom, it will be overridden to cover.*/ background-size: 100% 100% !important; cursor:default; display:block; position: absolute; width:100%; height:100%; background-repeat:no-repeat; background-position:center center; border-radius:9px; } /* ---------If there are videos ------- */ #ninja-slider .video, .video-playbutton-layer { top:0; left:0; border:0; width: 100%;height: 100%; text-align: center; background: black; position: absolute; } /* And if you have added the HTML:
*/ .video-playbutton-layer { /*background: transparent url(../css-img/video.png) no-repeat center center;*/ } /* 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:bold 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:33px; height:33px; line-height:33px; bottom: -65px; color: #383a49; margin-top:0; background-color:rgba(255,255,255,255.8); backface-visibility:hidden; overflow:hidden; white-space:nowrap; -webkit-user-select: none; user-select:none; z-index:10; opacity:1; font-family:sans-serif; font-size:17px; cursor:pointer; -webkit-transition:all 0.7s; transition:all 0.7s; font-family: 'Lato', sans-serif; font-weight:900; } #ninja-slider-prev:hover, #ninja-slider-next:hover { opacity:1; } #ninja-slider-prev { left: 0; } #ninja-slider-next { left: 205px; } #ninja-slider.fullscreen #ninja-slider-prev { left: -50px; opacity:1; } #ninja-slider.fullscreen #ninja-slider-next { right: -50px; opacity:1; } /*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;margin-right:30px;transition:opacity 0.7s;} #ninja-slider.fullscreen #ninja-slider-prev:hover div {opacity:1;} #ninja-slider.fullscreen #ninja-slider-next:hover div {opacity:1;} #ninja-slider-prev { overflow:inherit} #ninja-slider-prev div { opacity:1; margin:0; position:absolute; left:103px; top:0; z-index:1; letter-spacing:3px; } /* arrows */ #ninja-slider-prev::before, #ninja-slider-next::before { position: absolute; top: 10px; content: ""; display: inline-block; width: 14px; height: 14px; border-left: 2px solid #bbbec8; border-top: 2px solid #bbbec8; } #ninja-slider-prev:hover::before, #ninja-slider-next:hover::before { border-color:#383a49} #ninja-slider-prev::before { -ms-transform:rotate(-45deg);/*IE 9*/ -webkit-transform:rotate(-45deg); transform: rotate(-45deg); backface-visibility:hidden; left:12px; } #ninja-slider-next::before { -ms-transform:rotate(135deg);/*IE 9*/ -webkit-transform:rotate(135deg); transform: rotate(135deg); backface-visibility:hidden; right:14px; } /*------ pager(nav bullets) ------*/ /* The pager id should be: slider id + "-pager" */ #ninja-slider-pager { display:none;} #ninja-slider-pager, #ninja-slider-pause-play { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }