/* Compatibility styles for frameworks like bootstrap, foundation e.t.c */
.xzoom-source img, .xzoom-preview img, .xzoom-lens img {
  display: block;
  max-width: none;
  max-height: none;
  -webkit-transition: none;
  -moz-transition: none;45
  -o-transition: none;
  transition: none;
}
/* --------------- */

/* xZoom Styles below */
.xzoom-container {
  display: inline-block;
}

/*.xzoom-thumbs {text-align: center;*/
/*    margin-bottom: 10px;*/
/*    margin-top: 0px;*/
/*    float: left;*/
/*    position: absolute;*/
/*    left: 0;*/
/*    top: 0;*/
/*    z-index: 100;*/
/*    width: 100px;*/
/*    max-height: 469px; */
/*    overflow: hidden;*/
/*    overflow-y: auto;*/
/*}*/



.xzoom-thumbs {
    text-align: center;
    margin-bottom: 10px;
    margin-top: 0;
    float: left;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 100;
    width: 100px;
    max-height: 469px;
    overflow-y: auto;
    overflow-x: hidden; 
    scrollbar-width: none;     
    -ms-overflow-style: none;  
}

.xzoom-thumbs::-webkit-scrollbar {
    display: none;              
}





.xzoom-container11 {
    position: relative;
}


img#xzoom-magnific {/*
    width: 100% !important;*/
}
.xzoom {
  -webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.5);
  -moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.5);
  box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.5);
}
.xzoom2, .xzoom3, .xzoom4, .xzoom5 {
}

.xzoom-image{ text-align:center;
  display: block;
  align-items: center;
  justify-content: center;
 /*box-shadow: rgb(60 64 67 / 30%) 0px 1px 2px 0px, rgb(60 64 67 / 15%) 0px 2px 6px 2px;*/
 /*height:470px;*/
 /*border:1px solid #eee; box-shadow: rgb(60 64 67 / 5%) 0px 1px 2px 0px, rgb(60 64 67 / 5%) 0px 2px 6px 2px;
 */margin-left:  120px;
}

.xzoom-image img{ max-width:100%; width: auto !important; max-height:100%; margin: auto; }

/* Thumbs */
.xzoom-gallery, .xzoom-gallery2, .xzoom-gallery3, .xzoom-gallery4, .xzoom-gallery5 {
  margin-left: 5px;
  margin-bottom: 10px; width: 90px; padding: 4px; border:2px solid #eee;
  /*height: 65px;*/

}

.xzoom-source, .xzoom-hidden {
  display: block;
  position: static;
  float: none;
  clear: both;
}

/* Everything out of border is hidden */
.xzoom-hidden {
  overflow: hidden;
}

/* Preview */
.xzoom-preview {
  border: 1px solid #888;
  background: #2f4f4f;
  box-shadow: -0px -0px 10px rgba(0,0,0,0.50);
}

/* Lens */
.xzoom-lens {
  border: 1px solid #555;
  box-shadow: -0px -0px 10px rgba(0,0,0,0.50);
  cursor: crosshair;
}

/* Loading */
.xzoom-loading {
  background-position: center center;
  background-repeat: no-repeat;
  border-radius: 100%;
  opacity: .7;
  background: url(../images/xloading.html);
  width: 48px;
  height: 48px;
}

/* Additional class that applied to thumb when it is active */
.xactive {
  /*-webkit-box-shadow: 0px 0px 3px 0px rgba(74,169,210,1);
  -moz-box-shadow: 0px 0px 3px 0px rgba(74,169,210,1);
  box-shadow: 0px 0px 3px 0px rgba(74,169,210,1); */
  border: 2px solid #ffb911;
}

/* Caption */
.xzoom-caption {
  position: absolute;
  bottom: -43px;
  left: 0;
  background: #000;
  width: 100%;
  text-align: left;
}

.xzoom-caption span {
  color: #fff;
  font-family: Arial, sans-serif;
  display: block;
  font-size: 0.75em;
  font-weight: bold;
  padding: 10px;
}


@media only screen and (max-width: 767px) {



.xzoom-thumbs {text-align: center;
    margin-bottom: 10px;
    margin-top: 15px;
    float: none !important;
    position:relative;
    left: 0; right: 0;
    top: 0;
    z-index: 100000;
    width: auto !important;
    
    display: flex;
    gap: 10px;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    scroll-behavior: smooth;
    justify-content: flex-start;
    scrollbar-width: none;
}

.xzoom-image { margin-left:0px;  height: 322px;
}

.xzoom-gallery, .xzoom-gallery2, .xzoom-gallery3, .xzoom-gallery4, .xzoom-gallery5 {

    width: 78px;
    padding:5px;

}
.video { width: 78px;
    padding:5px;

}
}


.video{

  margin-left: 5px;
  margin-bottom: 10px; width: 90px; padding: 10px; border:2px solid #eee;

}