/* 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-thumbs { text-align: center; margin-bottom: 10px; }
.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: none; border: none; margin-bottom: 15px; height: 380px; width: 100% !important; object-fit: cover; object-position: center;}
.xzoom2, .xzoom3, .xzoom4, .xzoom5 { -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); }
/* Thumbs */
.xzoom-gallery, .xzoom-gallery2, .xzoom-gallery3, .xzoom-gallery4, .xzoom-gallery5 { border: 1px solid #000000; margin: 0 5px; border-radius: 5px; height: 60px; width: 60px; object-fit: cover; object-position: center; }
.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(../example/images/xloading.gif); width: 48px; height: 48px; }
/* Additional class that applied to thumb when it is active */
.xactive {  border: 1px solid #000000; border-radius: 5px; }/*-webkit-box-shadow: 0px 0px 3px 0px rgb(0, 0, 0); -moz-box-shadow: 0px 0px 3px 0px rgb(0, 0, 0); box-shadow: 0px 0px 3px 0px rgb(0, 0, 0);*/
/* Caption */
.xzoom-caption { position: absolute; bottom: -43px; left: 0; background: #000; width: 100%; text-align: left; }
.xzoom-caption span { color: #fff; display: block; font-size: 0.75em; font-weight: bold; padding: 10px; }
@media (max-width: 1199px) {
  .xzoom { height: 320px; width: 100% !important;}
  .xzoom-gallery { width: 50px; height: 50px;}
}
@media (max-width: 991px) {
  .xzoom { height: 280px; width: 100% !important;}
  .xzoom-gallery { width: 50px; height: 50px;}
}
@media (max-width: 767px) {
  .xzoom { height: 320px; width: 100% !important;}
  .xzoom-gallery { width: 60px; height: 60px;}
}

@media (max-width: 575px) {
  .xzoom { height: 270px; width: 100% !important;}
  .xzoom-gallery { width: 50px; height: 50px; }
}