﻿/* BASE */

.helper { display: inline-block; height: 100%; vertical-align: middle; }

.anchori i:hover { opacity: 1; }
.anchori i { opacity: 0.8; font-size: 1.5em; margin-top: 5px; }

.disabled i:hover { opacity: 0.2 !important; }
.disabled i { opacity: 0.2 !important; }

@media (min-width: 768px) {
    .slider-popup-container .modal-dialog { width: auto; margin: 100px auto auto auto; top: auto; bottom: auto; z-index: 100000; }
}

@media (max-width: 800px) {
    .slider-fullscreen-container .slideBox .modal-body .slider-nav { width: 100% !important; left: 0 !important;} 
}

.SliderLoader{ height: 40px;}

/* SLIDER START */
.slider { height: 40vh; position: relative; }
.slider-preview { float: left; width: 100%; overflow: auto; }
.slider-loading { position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; width: 60px; height: 45px; }
.slider-page { box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box;}
.slider-page img { /*box-shadow: 0px 1px 8px;*/ background-color: rgb(255, 255, 255); margin: 0; max-height:100%;}
.page-number { position: absolute; left: 5px; bottom: 5px; vertical-align: middle; background-color: rgba(255, 255, 255, 0.19); font-size: 10px; padding: 2px 5px 0px 5px; float: left; font-weight: bold; font-size: 11px; color: white; }
.slider-container .slider-page { max-height: 100%; position: relative;}
.slider-container .slider-nav { height: 31px; float: left; width: 100%;}
.slider-container .slider-nav .slider-bar,
.slider-fullscreen-container .slider-nav .slider-bar,
.slider-popup-container .slider-nav .slider-bar { height: 30px; text-align: center; position:relative;}

/* COLUMNS */
.slider.col-1 .slider-page { width: 100%; height: 100%; text-align: center; }
.slider.col-2 .slider-page { width: 50%; float: left; border: 2px solid transparent;}
.slider.col-2-dbl .slider-page { float: left; width: 50%; height: 100%;  border: 2px solid transparent;}
.slider.col-3 .slider-page { width: calc(99.9% / 3); float: left; border: 2px solid transparent;}
.slider.col-4 .slider-page { width: 25%; float: left;  border: 2px solid transparent;}
.slider.col-5 .slider-page { width: 20%; float: left; border: 2px solid transparent;}
.slider.col-6 .slider-page { width: calc(99.9% / 6); float: left; border: 2px solid transparent;}
.slider.col-7 .slider-page { width: calc(100% / 7); float: left; border: 2px solid transparent;}
.slider.col-8 .slider-page { width: calc(100% / 8); float: left; border: 2px solid transparent;}
.slider.col-9 .slider-page { width: calc(100% / 9); float: left; border: 2px solid transparent;}
.slider.col-10 .slider-page { width: calc(100% / 10); float: left; border: 2px solid transparent;}

.slider.col-2 .slider-page:hover { border-color: white;}
.slider.col-3 .slider-page:hover { border-color: white;}
.slider.col-4 .slider-page:hover { border-color: white;}
.slider.col-5 .slider-page:hover { border-color: white;}
.slider.col-6 .slider-page:hover { border-color: white;}
.slider.col-7 .slider-page:hover { border-color: white;}
.slider.col-8 .slider-page:hover { border-color: white;}
.slider.col-9 .slider-page:hover { border-color: white;}
.slider.col-10 .slider-page:hover { border-color: white;}


/* FULLSCREEN */

.slider-fullscreen-container .slideBox .modal-body { height: 100vh; padding: 0 !important; }
.slider-fullscreen-container .slideBox .modal-body .slider-nav { visibility: hidden; opacity: 0; transition:visibility 0s linear 0.5s,opacity 0.5s linear; position: absolute; bottom: 0; left: 35%; padding: 0px 15px 0px 15px; background-color:rgba(20, 97, 178, 0.29); height: 31px; width: 30vw; border-top-left-radius: 15px; border-top-right-radius: 15px;}
.slider-fullscreen-container .slideBox .modal-body .slider-nav:hover {background-color:rgba(20, 97, 178, 1)}
.slider-fullscreen-container { display: none; height: 100vh; overflow: auto; width: 100%; }
.slider-fullscreen-container .slider { height: 100%;}
.slider-fullscreen-container .slideBox .row-fluid i { float: right; opacity: 0.4; }
.slider-fullscreen-container .slider-page { position: relative; width: 100%; }

.navShowArea { position: fixed; z-index: 100; height: 10vh; bottom: 0; left: 0; width: 100%;}
.navShowArea:hover .slider-nav { visibility: visible !important; opacity:1 !important; transition-delay:0s !important;}

.slider-fullscreen-container:fullscreen .slideBox .modal-body { height: 100vh; padding: 0 !important; }
.slider-fullscreen-container:fullscreen .slideBox .modal-body .slider-nav { visibility: hidden; opacity: 0; transition:visibility 0s linear 0.5s,opacity 0.5s linear; position: absolute; bottom: 0; left: 35%; padding: 0px 15px 0px 15px; background-color:rgba(20, 97, 178, 0.29); height: 31px; width: 30vw; border-top-left-radius: 15px; border-top-right-radius: 15px;}
.slider-fullscreen-container:fullscreen .slideBox .modal-body .slider-nav:hover {background-color:rgba(20, 97, 178, 1)}
.slider-fullscreen-container:fullscreen { display: none; height: 100vh; overflow: auto; }
.slider-fullscreen-container:fullscreen .slider { height: 100%;}
.slider-fullscreen-container:fullscreen .slideBox .row-fluid i { float: right; opacity: 0.4; }
.slider-fullscreen-container:fullscreen .slider-page { position: relative; width: 100%; }

.navShowArea:fullscreen { position: fixed; z-index: 100; height: 10vh; bottom: 0; left: 0; width: 100%;}
.navShowArea:fullscreen:hover .slider-nav { visibility: visible !important; opacity:1 !important; transition-delay:0s !important;}



/* POPUP */
.slider-popup-container { height: 100%; display: none; background: rgba(0, 0, 0, 0.5); z-index: 99999; }
.slider-popup-container .slider {height: calc(100vh - 285px); overflow: auto;}
.slider-popup-container .slider-page { width: inherit; text-align: center; margin: 0 auto; position: relative;}
.slider-popup-container .modal-body {padding:1px !important;}
.slider-popup-container .modal-header { padding: 0; height: 0; min-height: 0; }
    .slider-popup-container .modal-header .close { z-index: 9; background-color: black; opacity: 1 !important; padding: 5px; right: 20px; }
.slider-popup-container .modal-content { border-radius: 0; }



    /* NAVBAR */
    .slider-bar i { color: white; padding-left: 7px; padding-right: 7px; }
.slider-bar .left i { float: left; }
.slider-bar .right i { float: right; }
.slider-bar .btn-first > i { font-size: 1.1em; margin-top: 9px; }
.slider-bar .btn-previous > i { font-weight: bold; }
.slider-bar .btn-play > i { font-size: 1.1em; margin-top: 9px; }
.slider-bar .btn-next > i { font-weight: bold; }
.slider-bar .btn-last > i { font-size: 1.1em; margin-top: 9px; }
.slider-bar .btn-zoomin > i { }
.slider-bar .btn-zoomout > i { }
.slider-bar .btn-fullscreen > i { }
.slider-bar .btn-download > i { margin-right: 0.5em; }
.slider-bar .btn-doublepage > i { margin-right: 0.5em; }

.hidden { display: none; }

.CopyrightTxt {color: white; font-size: 11px; position: absolute; right: 140px; bottom: 1px; z-index:9999;}
.CopyrightTxt span i {font-size:10px;}
    .CopyrightTxt span:nth-child(2) { position: absolute; background-color: black; padding: 10px; top: 24px; box-shadow: black 0px 2px 7px 0px; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; z-index: 999 !important; width: 250px; right: -61px; }

/* SLIDER END */


