/* 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; }
/* --------------- */

/* xZoom Styles below */
.xzoom-container { display: inline-block; }
#urunResimleri { background: #fff; padding: 10px; border: solid 1px #f4f4f4; position: relative; }

#resimZoom { text-align: center; overflow: hidden; position: relative; margin: 10px; }
#resimZoom img { max-height: 100%; width: auto !important; }
div.xzoom-thumbs { overflow: hidden; margin-top: 14px; }
div.xzoom-thumbs > div { overflow: hidden; display: flex; flex-wrap: wrap; }
div.xzoom-thumbs a { display: inline-block; }
div.xzoom-thumbs a img { margin-left: 5px; margin-bottom: 10px; border: 1px solid #cecece; width: 75px !important; height: 75px; object-fit: cover; }
.xzoom { box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.5); }
.xzoom2, .xzoom3, .xzoom4, .xzoom5 { margin-bottom: 15px; }

/* Thumbs */

.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 { z-index: 100; 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; z-index: 9; }

/* Loading */
.xzoom-loading { background-position: center center; background-repeat: no-repeat; border-radius: 100%; opacity: .7; background: url(../images/xloading.gif); 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: 1px solid #4aaad2 !important; }

/* 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 (max-width:767px) {
    div.xzoom-thumbs > div { overflow-x: auto; white-space: nowrap; }
    div.xzoom-thumbs a { width: 75px; height: 75px; margin: 0 0 3px 0; overflow: hidden; min-height: inherit; min-width: initial; display: inline-block; }

    #resimZoom { margin-left: 0; height: auto; }
    div.xzoom-thumbs { position: relative; height: initial; margin: 15px 0; }
}