@CHARSET "ISO-8859-1";

.qbOverlay {
    width: 100%;
    height: 100%;
    background: #000;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 500;
    display: none;
    background: rgba(0,0,0,0.8);
}

    .qbOverlay .qbBox {
        width: 90%;
        max-height: 90%;
        max-width: 1170px;
        position: absolute;
        top: 5%;
        left: 50%;
        transform: translateX(-50%);
        -webkit-transform: translateX(-50%);
        -moz-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        -o-transform: translateX(-50%);
        background: #FFF;
        border: 2px solid #52c9cc;
        padding: 10px 20px;
        border-radius: 5px;
        z-index: 1001;
        overflow-x: hidden;
        overflow-y: auto;
    }

    .qbOverlay .qbStage {
        position: relative;
        z-index: 1003;
        height: 100%;
        text-align: center;
        background: #FFF;
        overflow: auto;
        -webkit-overflow-scrolling: touch;
        -moz-overflow-scrolling: touch;
        -ms-overflow-scrolling: touch;
        -o-overflow-scrolling: touch;
        overflow-scrolling: touch;
    }

    .qbOverlay .qbBottom {
        position: relative;
        z-index: 1002;
        background: #fff;
        height: 45px;
        padding: 0 10px;
    }

    .qbOverlay .qbClose {
        width: 90%;
        max-width: 1170px;
        position: absolute;
        top: 5%;
        left: 50%;
        transform: translateX(-50%);
        -webkit-transform: translateX(-50%);
        -moz-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        -o-transform: translateX(-50%);
        background: #FFF;
        z-index: 1004;
    }

        .qbOverlay .qbClose i {
            width: 36px;
            height: 36px;
            background: #FFF;
            border: 2px solid #52c9cc;
            border-radius: 100%;
            text-align: center;
            line-height: 32px;
            position: absolute;
            right: -14px;
            top: -14px;
            cursor: pointer;
            z-index: 1005px;
        }

    .qbOverlay .qbPrev, .qbOverlay .qbNext {
        position: absolute;
        z-index: 1004;
        width: 40px;
        height: 60px;
        top: 25%;
        outline: none;
        background: #FFF;
        cursor: pointer;
        display: none;
        text-align: center;
        -webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
        -moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
        box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
    }

    .qbOverlay .qbPrev {
        left: 0px;
        -webkit-border-top-right-radius: 5px;
        -webkit-border-bottom-right-radius: 5px;
        -moz-border-radius-topright: 5px;
        -moz-border-radius-bottomright: 5px;
        border-top-right-radius: 5px;
        border-bottom-right-radius: 5px;
    }

    .qbOverlay .qbNext {
        right: 0px;
        -webkit-border-top-left-radius: 5px;
        -webkit-border-bottom-left-radius: 5px;
        -moz-border-radius-topleft: 5px;
        -moz-border-radius-bottomleft: 5px;
        border-top-left-radius: 5px;
        border-bottom-left-radius: 5px;
    }

        .qbOverlay .qbPrev i, .qbOverlay .qbNext i {
            line-height: 60px;
            font-size: 20px;
            color: #333;
        }

    .qbOverlay .qbBox:hover .qbPrev, .qbOverlay .qbBox:hover .qbNext {
        display: block;
    }

    .qbOverlay .qbPrev:hover i, .qbOverlay .qbNext:hover i {
        color: #52c9cc;
    }

    .qbOverlay .qbBox .loading {
        background: #fff url(../images/qbloading.gif) no-repeat center bottom;
        height: 77px;
        padding-top: 45px;
    }

    .qbOverlay .qbCaption {
        color: #666;
        font-size: 0.8em;
        font-weight: bold;
        max-width: 100%;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
    }

    .qbOverlay .qbCounter {
        font-family: "Trebuchet MS";
        color: #aaa;
        font-size: 0.8em;
        font-weight: bold;
    }

    .qbOverlay .qbBox img {
        max-width: 100%;
    }

.qbHidden {
    display: none;
    text-align: center;
}

@media (max-width:768px) {
    .qbOverlay .qbBox {
        padding: 10px;
        max-height: 90%;
    }

    .qbOverlay .qbClose {
    }

    .qbOverlay .qbBox .qbPrev, .qbOverlay .qbBox .qbNext {
        display: block;
        opacity: 0.75;
    }
}