@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((586 / 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;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-prev:hover::before, #ninja-slider-next:hover::before { border-left: 3px solid #4d4d4d; border-top: 3px solid #4d4d4d; }
#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; }
    }