/* 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; box-shadow: 1px 1px 2px 0px rgba(0, 0, 0, 0.05); position: relative; border-radius: 4px; border-bottom-right-radius: 0; border-top-right-radius: 0; }

#resimZoom {text-align: center;overflow: hidden;position: relative;margin: 10px;}
#resimZoom img { max-height: 100%; width: auto !important; }
div.xzoom-thumbs {overflow: hidden;margin: 10px 10px 0 22px;}
div.xzoom-thumbs > div { overflow: hidden; white-space: nowrap; }
div.xzoom-thumbs a {display: inline-block;position: relative;width: 59px;height: 60px;overflow: hidden;margin: 0 0 0 10px;}
div.xzoom-thumbs a img { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); height: 100%; max-width: initial; }
.xzoom { }
.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; }

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

/* 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: 45px; height: 45px; 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; }
}