.zoom {height:750px; position: relative;}
.zoom-main {
    height:auto;
    position:relative;
    text-align:center;
}
.zoom-thumb-hide .zoom-main {height:100%;}
.zoom-main span {
    background-position: 50% 50%;
    background-repeat:no-repeat;
    background-size:200%;
    overflow: hidden;
    position:absolute;
    cursor: zoom-in;
    /*border:dashed thin #ccc;*/
    position: relative;
    display:inline-block;
    height:auto;
}
.zoom-right .zoom-main span {left:0;}
.zoom-main img {
    height:auto;
    width: 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:10%;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;}
.nextandprev {
    background-color: Transparent;
    background-repeat:no-repeat;
    border: none;
    cursor:pointer;
    overflow: hidden;
}
@media only screen and (max-width:768px) and (min-width:481px){
    .zoom {height:690px; position: relative;}
   .zoom-main {
    height:100% !important;
    position:relative;
    text-align:center;
   }
   .zoom-main img {
    height:100%;
    width: auto;
    display:block; 
    background:#fff;
    transition: opacity .5s;
}
   .zoom-thumb {height:8%;text-align:center;padding:3px;}
}
@media only screen and (max-width:480px) and (min-width:320px){
    .zoom {height:500px; position: relative;}
   .zoom-main {
    height:auto !important;
    position:relative;
    text-align:center;
   }
   .zoom-thumb {height:8%;text-align:center;padding:3px;}
}