/* 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; width: 100%; margin-bottom: 2px; } .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: 0px 0px 5px 0px rgba(0,0,0,0.5); */ /*border: 1px solid #cecece;*/ } .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 #cecece; margin-left: 5px; margin-bottom: 10px; }*/ .xzoom-thumbs.left-icon a { border: 0px solid #cecece; /* margin-left: 5px; */ margin-bottom: 5px; display: inline-block; width: 70px; height: 80px; /* border: 1px solid #790000; */ } .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; /*width: 100%!important; height: 100%!important;*/ } /* 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 rgb(0 0 0); -moz-box-shadow: 0px 0px 3px 0px rgba(74,169,210,1); box-shadow: 0px 0px 3px 0px rgb(0 0 0);*/ border: 1px solid #000000; } /* 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; } .xzoom-tint { background-color: transparent !important; } .fancybox__content { background: #000; /* Example: Set lightbox background to black */ } .xzoom-gallery { cursor: pointer; border: 2px solid transparent; transition: border 0.2s ease-in-out; } .xzoom-gallery:hover, .xzoom-gallery.active { border-color: #790000; opacity:1; } .xzoom-thumbs.left-icon a:focus{ border: 2px solid #790000; opacity: 1; background-image: url("../images/selected-img.svg") ; background-size: cover; background-position: center; } .xzoom-thumbs.left-icon a:active { border: 2px solid #790000; opacity: 1; background-image: url("../images/selected-img.svg") ; background-size: cover; background-position: center; } .xzoom-thumbs.left-icon a { border: 0px solid #cecece; /* margin-left: 5px; */ margin-bottom: 5px; display: inline-block; width: 70px; height: 80px; /* border: 1px solid #790000; */ /* opacity: 0.5 !important; */ }