.viewer {
    -ms-touch-action: none;
    height:567px;
    position:relative!important;
    border:#DDD 1px solid;
}

.iviewer_common {
    position:absolute;
    top:10px;
    height:32px;
    z-index: 5000;
}

.iviewer_cursor {
    cursor:move;
}

.viewer img{border:0;}

.iviewer_drag_cursor {
    cursor:  e-resize;
}

.iviewer_button {
    width:32px;
    cursor: pointer;
    background-position: center center;
    background-repeat: no-repeat;
}
.iviewer_button, .iviewer_zoom_status{ opacity:0; -webkit-transition:all 300ms linear; -moz-transition:all 300ms linear; -o-transition:all 300ms linear; -ms-transition:all 300ms linear;}

.mapping:hover .iviewer_button, .mapping:hover .iviewer_zoom_status{opacity:1;}

.iviewer_zoom_in {
    left:37%;
    background: url(../images/iviewer.zoom_in.png);
}

.iviewer_zoom_out {
    left: 42%;
    background: url(../images/iviewer.zoom_out.png);
}

.iviewer_zoom_zero {
    left:47%;
    display:none;
    background: url(../images/iviewer.zoom_zero.png);
}

.iviewer_zoom_fit {
    left:47%;
    background: url(../images/iviewer.zoom_fit.png);
}

.iviewer_zoom_status {
    right:2%;
    font-size:12pt;
    line-height:32px;
    text-indent:2px;
    color: #FFF;
    background-color:#3D3D3D;
    text-align: center;
    font-family:'Open Sans', Arial;
    font-weight:bold;
    border-radius:40px;
    width: 60px;
}

.iviewer_rotate_left {
    left:52%;
    background: url(../images/iviewer.rotate_left.png) center center no-repeat;
}

.iviewer_rotate_right {
    left:57%;
    background:url(../images/iviewer.rotate_right.png) center center no-repeat;
}

@media  (min-width:480px) and ( max-width:620px){
.iviewer_button{width:25px; height:25px;}
.iviewer_common{ height:25px;}
.iviewer_zoom_status{line-height:25px; font-size:10pt;}
.iviewer_zoom_in{left:10px; background-size:100%;}
.iviewer_zoom_out{left:50px; background-size:100%;}
.iviewer_zoom_zero{left:90px; background-size:100%;}
.iviewer_zoom_fit{left:130px; background-size:100%;}
.iviewer_zoom_status{left:170px; background-size:100%;}
.iviewer_rotate_left{left:240px; background-size:100%;}
.iviewer_rotate_right{left:280px; background-size:100%;}
}

@media  (min-width:240px) and ( max-width:479px){
.iviewer_button{width:25px; height:25px;}
.iviewer_common{ height:25px;}
.iviewer_zoom_status{line-height:25px; font-size:10pt;}
.iviewer_zoom_in{left:10px; background-size:100%;}
.iviewer_zoom_out{left:40px; background-size:100%;}
.iviewer_zoom_zero{left:70px; background-size:100%;}
.iviewer_zoom_fit{left:100px; background-size:100%;}
.iviewer_zoom_status{left:130px; background-size:100%;}
.iviewer_rotate_left{left:200px; background-size:100%;}
.iviewer_rotate_right{left:230px; background-size:100%;}
}