/* 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 {padding: 10px 10px 10px 0;position: relative;border-radius: 4px;border-bottom-right-radius: 0;border-top-right-radius: 0;}

#resimZoom { text-align: center; overflow: hidden; height: 350px; position: relative; margin: 10px; }
#resimZoom img { max-height: 100%; width: auto !important; }
div.xzoom-thumbs { overflow: hidden; margin: 15px 55px 60px 55px; }
div.xzoom-thumbs > div { overflow: hidden; white-space: nowrap; }
div.xzoom-thumbs a { display: inline-block; position: relative; width: 103px; height: 75px; 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-y: 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; }
    .flexible { display: block; }
    #urunResimleri { margin: 0 0 10px 0; }
    .urunBilgileri { padding: 0 10px; }
}