@media only screen and (min-width: 0) {
    div#blockUI_piczoom_odd {
        display         : none;
        width           : 95%;
        height          : 90%;
        overflow        : hidden;
        position        : absolute;
        top             : 0;
        left            : 0;
        background-color: rgba(0, 0, 0, .5);
        padding         : 2.5%;
    }

    div#blockUI_piczoom_odd button {
        z-index: 5;
    }

    button#picZoomViewerExitBtn {
        width           : 2em;
        height          : 2em;
        border-radius   : 100%;
        background-color: rgba(255, 255, 255, .5);
        color           : rgba(0, 0, 0, .7);
        position        : absolute;
        top             : 2.5%;
        right           : calc(2.5% - 1em);
        transition      : linear 100ms;
    }

    button#picZoomViewerExitBtn:hover {
        background-color: rgba(255, 255, 255, .8);
    }

    div#blockUI_piczoom_odd div.img {
        width   : 100%;
        height  : 70%;
        float   : left;
        position: relative;
    }

    div#blockUI_piczoom_odd div.img img {
        width     : auto;
        height    : auto;
        max-width : 100%;
        max-height: 100%;
        transition: linear 100ms;
        position  : relative;
        top       : 50%;
        transform : translateY(-50%);
    }

    div#blockUI_piczoom_odd div.img:hover button {
        opacity: 1;
    }

    button#picZoomViewerPreviousBtn,
    button#picZoomVieweNextBtn {
        width           : 1.5em;
        height          : 3em;
        background-color: rgba(255, 255, 255, .4);
        color           : rgba(0, 0, 0, .7);
        text-align      : center;
        position        : absolute;
        top             : calc(50% - 1.5em);
        z-index         : 3;
        font-size       : 2rem;
        transition      : linear 100ms;
        opacity         : 1;
    }

    button#picZoomViewerPreviousBtn:hover,
    button#picZoomVieweNextBtn:hover {
        background-color: rgba(255, 255, 255, .8);
    }

    button#picZoomViewerPreviousBtn {
        left: 0;
    }

    button#picZoomVieweNextBtn {
        right: 0;
    }

    div#blockUI_piczoom_odd div.alt {
        width           : 100%;
        height          : 30%;
        float           : left;
        position        : relative;
        text-align      : left;
        margin-top      : 15px;
        background-color: rgba(255, 255, 255, .1);
    }

    div#blockUI_piczoom_odd div.alt[data-only-img] {
        display: none;
    }

    div#picZoomAlt {
        margin    : 15px;
        color     : white;
        text-align: left;
    }

    div#count {
        display         : inline-block;
        font-size       : .8em;
        padding         : 3px 5px;
        position        : absolute;
        bottom          : 0;
        right           : 0;
        /* border-radius: 3px; */
        background-color: rgba(0, 0, 0, .55);
        z-index         : 5;
    }

    div#count * {
        float: left;
        color: rgba(255, 255, 255, .7);
    }
}

@media only screen and (min-width: 1000px) {
    div#blockUI_piczoom_odd div.img {
        width : calc(75% - 15px);
        height: 100%;
    }

    div#blockUI_piczoom_odd div.img[data-only-img] {
        width : 100%;
        height: 100%;
    }

    div#blockUI_piczoom_odd div.alt {
        width      : 25%;
        height     : 100%;
        margin-top : 0;
        margin-left: 15px;
    }

    button#picZoomViewerPreviousBtn,
    button#picZoomVieweNextBtn {
        opacity: 0;
    }
}