/* 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;
  -o-transition: none;
  transition: none;
}
/* --------------- */

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

.xzoom-thumbs {text-align: center;
    margin-bottom: 10px;
   /* margin-top: 15px;*/
    float: left;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 10;
    width: 100px;
}

.xzoom-container11 {
    position: relative;
    margin-bottom:20px;
   /* display: flex;
    flex-direction: row-reverse;*/
}


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: flex;  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: 551px;  
/* 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:100px; padding:5px;
}

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

/* Thumbs */
.xzoom-gallery, .xzoom-gallery2, .xzoom-gallery3, .xzoom-gallery4, .xzoom-gallery5 {
 
  margin-left: 5px;
  margin-bottom: 10px; width:82px; padding:0px; border:1px solid #eee;

}

.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 rgb(157 8 5 / 34%);
  -moz-box-shadow: 0px 0px 3px 0px rgb(157 8 5 / 34%);
      box-shadow: 0px 0px 3px 0px rgb(157 8 5 / 34%);
   border: 1px solid #b7c3f7;
}

/* 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-image { height: 328px;}
 .xzoom-thumbs {text-align: center;
    margin-bottom: 10px;
    margin-top:0px;
   /* float: none !important; 
    position:relative;*/
    left: 0; right: 0;
    top: 0;
    z-index: 10;
    width: auto !important;
}
.xzoom-thumbs img{ max-width: 100%; width:50px; }
/*.xzoom-image { margin-left:0px;}*/

.xzoom-gallery, .xzoom-gallery2, .xzoom-gallery3, .xzoom-gallery4, .xzoom-gallery5 {
    
    width: 78px;
    padding:5px;
    
}

}

@media only screen and (max-width:280px){
/*.xzoom-image {
    height: 175px;
    padding: 5px;
}
 .modal-content .modal-header {
    
    margin-bottom:10px;
}*/

}