/* Add any CSS that will be needed by your ZOOM gallery template. This will be output to the frontend */
/*minicolors.js*/
.minicolors { position: relative; }  .minicolors-swatch { position: absolute; vertical-align: middle; background: url(jquery.minicolors.png) -80px 0; border: solid 1px #ccc; cursor: text; padding: 0; margin: 0; display: inline-block; }  .minicolors-swatch-color { position: absolute; top: 0; left: 0; right: 0; bottom: 0; }  .minicolors input[type=hidden] + .minicolors-swatch { width: 28px; position: static; cursor: pointer; }  /* Panel */ .minicolors-panel { position: absolute; width: 173px; height: 152px; background: white; border: solid 1px #CCC; box-shadow: 0 0 20px rgba(0, 0, 0, .2); z-index: 99999; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; display: none; }  .minicolors-panel.minicolors-visible { display: block; }  /* Panel positioning */ .minicolors-position-top .minicolors-panel { top: -154px; }  .minicolors-position-right .minicolors-panel { right: 0; }  .minicolors-position-bottom .minicolors-panel { top: auto; }  .minicolors-position-left .minicolors-panel { left: 0; }  .minicolors-with-opacity .minicolors-panel { width: 194px; }  .minicolors .minicolors-grid { position: absolute; top: 1px; left: 1px; width: 150px; height: 150px; background: url(jquery.minicolors.png) -120px 0; cursor: crosshair; }  .minicolors .minicolors-grid-inner { position: absolute; top: 0; left: 0; width: 150px; height: 150px; background: none; }  .minicolors-slider-saturation .minicolors-grid { background-position: -420px 0; }  .minicolors-slider-saturation .minicolors-grid-inner { background: url(jquery.minicolors.png) -270px 0; }  .minicolors-slider-brightness .minicolors-grid { background-position: -570px 0; }  .minicolors-slider-brightness .minicolors-grid-inner { background: black; }  .minicolors-slider-wheel .minicolors-grid { background-position: -720px 0; }  .minicolors-slider, .minicolors-opacity-slider { position: absolute; top: 1px; left: 152px; width: 20px; height: 150px; background: white url(jquery.minicolors.png) 0 0; cursor: row-resize; }  .minicolors-slider-saturation .minicolors-slider { background-position: -60px 0; }  .minicolors-slider-brightness .minicolors-slider { background-position: -20px 0; }  .minicolors-slider-wheel .minicolors-slider { background-position: -20px 0; }  .minicolors-opacity-slider { left: 173px; background-position: -40px 0; display: none; }  .minicolors-with-opacity .minicolors-opacity-slider { display: block; }  /* Pickers */ .minicolors-grid .minicolors-picker { position: absolute; top: 70px; left: 70px; width: 12px; height: 12px; border: solid 1px black; border-radius: 10px; margin-top: -6px; margin-left: -6px; background: none; }  .minicolors-grid .minicolors-picker > div { position: absolute; top: 0; left: 0; width: 8px; height: 8px; border-radius: 8px; border: solid 2px white; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; }  .minicolors-picker { position: absolute; top: 0; left: 0; width: 18px; height: 2px; background: white; border: solid 1px black; margin-top: -2px; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; }  /* Inline controls */ .minicolors-inline { display: inline-block; }  .minicolors-inline .minicolors-input { display: none !important; }  .minicolors-inline .minicolors-panel { position: relative; top: auto; left: auto; box-shadow: none; z-index: auto; display: inline-block; }  /* Default theme */ .minicolors-theme-default .minicolors-swatch { top: 5px; left: 5px; width: 18px; height: 18px; } .minicolors-theme-default.minicolors-position-right .minicolors-swatch { left: auto; right: 5px; } .minicolors-theme-default.minicolors { width: auto; display: inline-block; } .minicolors-theme-default .minicolors-input { height: 28px; width: auto; display: inline-block; padding-left: 26px; } .minicolors-theme-default.minicolors-position-right .minicolors-input { padding-right: 26px; padding-left: inherit; } 

/*Lets create the magnifying glass*/
.magnify { position: relative; display: block; float: left;}

.large {
	position: absolute;
	-webkit-border-radius: 100%;
	-moz-border-radius: 100%;
	border-radius: 100%;
	
	/*Lets load up the large image first*/
	z-index: 999;
	
	/*hide the glass by default*/
	display: none;
}

/*To solve overlap bug at the edges during magnification*/
.small { display: block; }

/* Gutter widths */
.foogallery-zoom.spacing-width-0 .magnify {
	margin-right: 0px;
	margin-bottom: 0px;
}

.foogallery-zoom.spacing-width-5 .magnify {
	margin-right: 5px;
	margin-bottom: 5px;
}

.foogallery-zoom.spacing-width-10 .magnify {
	margin-right: 10px;
	margin-bottom: 10px;
}

.foogallery-zoom.spacing-width-15 .magnify {
	margin-right: 15px;
	margin-bottom: 15px;
}

.foogallery-zoom.spacing-width-20 .magnify {
	margin-right: 20px;
	margin-bottom: 20px;
}

.foogallery-zoom.spacing-width-25 .magnify {
	margin-right: 25px;
	margin-bottom: 25px;
}

.magnify:hover {cursor: none;}

/* Border styles */ 
.foogallery-zoom.border-style-rounded .small {
 border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; }
  .foogallery-zoom.border-style-square-white .small {
 border: 5px solid #FFF; -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); -moz-box-shadow: 0 0 10px rgba(0,0,0,0.5); box-shadow: 0 1px 5px rgba(0, 0, 0, 0.5); }
  .foogallery-zoom.border-style-circle-white .small {
 border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; border: 5px solid #FFF; -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); -moz-box-shadow: 0 0 10px rgba(0,0,0,0.5); box-shadow: 0 1px 5px rgba(0, 0, 0, 0.5); }
  .foogallery-zoom.border-style-circle-black .small {
 border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; border: 3px solid #000; -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); -moz-box-shadow: 0 0 10px rgba(0,0,0,0.5); box-shadow: 0 1px 5px rgba(0, 0, 0, 0.5); }
  .foogallery-zoom.border-style-square-black .small {
 border: 3px solid #000; -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); -moz-box-shadow: 0 0 10px rgba(0,0,0,0.5); box-shadow: 0 1px 5px rgba(0, 0, 0, 0.5); }
  .foogallery-zoom.border-style-inset .magnify {
 box-shadow: inset 0 0 20px #000; -moz-box-shadow: inset 0 0 20px #000; -webkit-box-shadow: inset 0 0 20px #000; }
 

/* Grayscale/Blur Settings */ 
svg {
  position:absolute;
  left:-999px;
}
.foogallery-zoom .small {
-webkit-filter: grayscale(0) blur(0);
filter: grayscale(0) blur(0);
filter: none;
}
div[class*=on-hover] .magnify:hover .small { -webkit-transition: all 750ms ease-in-out; -moz-transition: all 750ms ease-in-out; -ms-transition: all 750ms ease-in-out; -o-transition: all 750ms ease-in-out; transition: all 750ms ease-in-out; }

.foogallery-zoom.gray-on-load .small,
.foogallery-zoom.gray-on-load.blur-on-hover .small,
.foogallery-zoom.gray-on-hover .magnify:hover .small  {
	-webkit-filter: grayscale(100%) blur(0); 
	-o-filter: grayscale(100%) blur(0); 
	-ms-filter: grayscale(100%) blur(0); 
	filter: grayscale(100%) blur(0); }

.foogallery-zoom.blur-on-hover .magnify:hover .small {
 -webkit-filter: grayscale(0) blur(3px); -o-filter: grayscale(0) blur(3px); -ms-filter: grayscale(0) blur(3px); filter: grayscale(0) blur(3px); }
 
 
.foogallery-zoom.gray-on-load.blur-on-hover .magnify:hover .small,
.foogallery-zoom.gray-on-hover.blur-on-hover .magnify:hover .small, 
.foogallery-zoom.gray-on-load.blur-on-load .small, 
.foogallery-zoom.gray-on-hover.blur-on-load .magnify:hover .small  {
 -webkit-filter: grayscale(100%)  blur(3px); -o-filter: grayscale(100%)  blur(3px); -ms-filter: grayscale(100%)  blur(3px); filter: grayscale(100%)  blur(3px); }