
body {
    background: #eee;
}

.clearfix {
    zoom: 1;
}

.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

.bzoom {
    direction: ltr;
    width: 100%
}

.bzoom,
.bzoom_thumb,
.bzoom_thumb_image,
.bzoom_big_image,
.bzoom_zoom_preview,
.bzoom_icon,
.bzoom_hint {
    display: none;
}

.bzoom_thumb_image {
    border-bottom: 1px solid $light-gray;
}

/*.bzoom .bzoom_thumb { background: #fff url(./img/loading.gif) center no-repeat; }*/

.bzoom,
.bzoom ul,
.bzoom li,
.bzoom img,
.bzoom_hint,
.bzoom_icon,
.bzoom_description {
    margin: 0;
    padding: 0;
    list-style: none
}


.bzoom_magnifier {
    display: none!important;
    @include responsive(mbtb) {
        display: none;
    }
}

.bzoom_zoom_area {
    display: none!important;
    @include responsive(mbtb) {
        display: none;
    }
}

.bzoom,
.bzoom_magnifier div,
.bzoom_magnifier div img,
.bzoom_small_thumbs ul,
ul .bzoom_small_thumbs li,
.bzoom_zoom_area div,
.bzoom_zoom_img {
    position: relative
}

.bzoom img,
.bzoom li {
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    user-select: none;
    -webkit-user-drag: none;
    -moz-user-drag: none;
    user-drag: none
}
.bzoom .bzoom_thumb.bzoom_thumb_active{
    opacity: 1!important;
}

.bzoom,
.bzoom_small_thumbs li {
    float: left
}

.bzoom_right {
    float: right
}

.bzoom li {
    position: absolute;

}

.bzoom .bzoom_thumb_active, .bzoom .bzoom_small_thumbs {
    transform: translateX(-50%);
    left: 50%;
    width: 100%;
}

.bzoom img {
    vertical-align: bottom;

}

.bzoom_small_thumbs li img {
    max-width: 90px;
    max-height: 90px;
    object-fit: contain;

}

.bzoom .bzoom_zoom_area,
.bzoom_zoom_area {
    border: 1px solid #ddd;
    padding: 6px;
    -webkit-box-shadow: 0 0 10px #ddd;
    -moz-box-shadow: 0 0 10px #ddd;
    box-shadow: 0 0 10px #ddd;
    display: none;
    z-index: 20;
    //@include responsive(mb){left:0!important;display: none!important}
}

.bzoom_zoom_area div {
    overflow: hidden;
}

.bzoom_zoom_area .bzoom_zoom_img {
    position: absolute;
}

.bzoom_wrap {
    width: 100%;
    position: relative;
    height: 520px;
    @include responsive(mbtb) {
        max-height: 370px;
        margin-bottom: 20px
    }

    img {
        transition: none;

    }
}

.bzoom_wrap .bzoom_magnifier {
    background: #fff;
    outline: #bbb solid 1px;
    display: none;
    cursor: move;
}

.bzoom_magnifier div {
    overflow: hidden;
}

.bzoom_wrap .bzoom_small_thumbs {
    overflow: hidden;
    @include responsive(mbtb) {
        top: 250px !important;
        max-width: 100%;
        max-height: 120px
    }
}

.bzoom_wrap .bzoom_small_thumbs ul {
    padding: 10px 0;
}

.bzoom_wrap .bzoom_small_thumbs li {
    border: 2px solid #FFF;
    margin: 0px 10px 0px 0px;
    position: relative;

    &:hover {
        cursor: pointer;
        border: 2px solid $light-gray;
    }

}

.bzoom_thumb.bzoom_thumb_active .bzoom_thumb_image {
    max-width: 100%;
    object-fit: contain;
    display: block;
    @include responsive(tb) {
        max-width: 80%;
        margin: auto
    }
    @include responsive(mbtb) {
        max-width: 80%;
        display: block !important;
        height: auto !important;
        margin: auto;
        max-height: 245px
    }
}

.bzoom_wrap ul li.bzoom_smallthumb_active {
    box-shadow: 0 3px 8px $default-light;
    border: 2px solid $default-color;

    &:hover {
        border: 2px solid $default-color;

    }
}
