.zoom {height:400px; position: relative;}
.zoom-main {
    height:80%;
    position:relative;
    text-align:center;
}
.zoom-thumb-hide .zoom-main {height:100%;}
.zoom-main span {
    background-position: 50% 50%;
    background-repeat:none;
    background-size:200%;
    overflow: hidden;
    position:absolute;
    cursor: zoom-in;
    border:dashed thin #ccc;
    position: relative;
    display:inline-block;
    height:100%;
}
.zoom-right .zoom-main span {left:0;}
.zoom-main img {
    height:100%;
    display:block; 
    background:#fff;
    transition: opacity .5s;
}
.zoom-main img:hover {opacity: 0;}
.zoom-right .zoom-main{height:100%;float:left;padding-right:5px;}
.zoom-thumb {height:20%;text-align:center;padding:5px;}
.zoom-right .zoom-thumb {display:inline;}
.zoom .zoom-thumb a {
    margin:0 5px 5px 0;
    padding:5px;
    border:solid thin #ccc;
    height:100%;
    display:inline-block;
    cursor: pointer;
}
.zoom-right .zoom-thumb a {float:left;height:20%;display:inline-block;}
.zoom .zoom-thumb a img {height:100%;}
.zoom-left .zoom-main, .zoom-left .zoom-thumb a{float:right;width:auto;}
@media all and (max-width: 735px){
    .zoom img{width:auto;max-width:100%;height:auto;}
    .zoom .zoom-thumb a img {width:auto;}
    .zoom-main, .zoom-thumb a{float:none !important;}
    .zoom-main {height:auto !important;}
    .zoom .zoom-thumb {display:block; height:100%;text-align:center !important;padding:5px;}
    .zoom-thumb a {height:20% !important;display:inline-block !important;}
}