@charset "utf-8";
/*
* Zoomer v3.0.12 - 2014-11-25
* A jQuery plugin for smooth image exploration. Part of the formstone library.
* http://formstone.it/components/zoomer/
*
* Copyright 2014 Ben Plum; MIT Licensed
*/
html, body {
-ms-content-zooming: none;
-ms-touch-action: none;
}
.zoomer .zoomer-holder { -ms-touch-action: none; }
.zoomer, .zoomer * {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
}
.zoomer { background: #eee url(../advertisement/images/jquery.fs.zoomer-loading.gif) no-repeat center; height: 100%; overflow: hidden; position: relative; width: 100%;
-webkit-transition: none;
-moz-transition: none;
-ms-transition: none;
-o-transition: none;
transition: none;
}
.zoomer .zoomer-positioner { margin: 0; height: 1px; position: absolute; width: 1px; }
.zoomer .zoomer-holder { box-shadow: 0 0 3px rgba(0, 0, 0, 0.5); opacity: 0; position: relative;
-webkit-transition: none;
-moz-transition: none;
-ms-transition: none;
-o-transition: none;
transition: none;
}
.zoomer .zoomer-image { cursor: move; float: left; height: 100%; width: 100%;
-webkit-transition: opacity 0.25 linear;
-moz-transition: opacity 0.25 linear;
-ms-transition: opacity 0.25 linear;
-o-transition: opacity 0.25 linear;
transition: opacity 0.25 linear;
}
.zoomer .zoomer-tiles { height: 100%; position: relative; width: 100%; }
.zoomer .zoomer-tile { height: auto; position: absolute; width: auto; }
/* CONTROLS */
.zoomer .zoomer-controls { background: rgba(0, 0, 0, 0.6);/* box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);*/ border-radius: 5px 5px 0px 0px; padding: 5px; position: absolute;
-webkit-transition: opacity 0.25 linear;
-moz-transition: opacity 0.25 linear;
-ms-transition: opacity 0.25 linear;
-o-transition: opacity 0.25 linear;
transition: opacity 0.25 linear;
}
.zoomer .zoomer-controls span { border-radius: 5px; color: #fff; cursor: pointer; display: block; font-size: 40px; font-weight: bold; height: 50px; line-height: 50px; margin: 0; text-align: center; width: 50px; }
.zoomer .zoomer-controls .zoomer-next,
.zoomer .zoomer-controls .zoomer-previous { display: none; }
.zoomer.zoomer-gallery .zoomer-controls .zoomer-next,
.zoomer.zoomer-gallery .zoomer-controls .zoomer-previous { display: block; }
/* CONTROLS - TOP, BOTTOM */
.zoomer .zoomer-controls-top,
.zoomer .zoomer-controls-bottom { left: 50%; margin: 0 0 0 -75px; }
.zoomer .zoomer-controls-top { bottom: auto; top: 10px; }
.zoomer .zoomer-controls-bottom { bottom: 0px; top: auto; }
.zoomer.zoomer-gallery .zoomer-controls-top,
.zoomer.zoomer-gallery .zoomer-controls-bottom { margin: 0 0 0 -105px; }
.zoomer .zoomer-controls-top span,
.zoomer .zoomer-controls-bottom span { float: left; }
.zoomer .zoomer-controls-top span:first-child,
.zoomer .zoomer-controls-bottom span:first-child { margin: 0 1px 0 0; }
/* CONTROLS - LEFT, RIGHT, TOP LEFT, TOP RIGHT, BOTTOM LEFT, BOTTOM RIGHT */
.zoomer .zoomer-controls-left,
.zoomer .zoomer-controls-top-left,
.zoomer .zoomer-controls-bottom-left
.zoomer .zoomer-controls-right,
.zoomer .zoomer-controls-top-right,
.zoomer .zoomer-controls-bottom-right { height: 71px; width: 40px; }
.zoomer.zoomer-gallery .zoomer-controls-left,
.zoomer.zoomer-gallery .zoomer-controls-top-left,
.zoomer.zoomer-gallery .zoomer-controls-bottom-left
.zoomer.zoomer-gallery .zoomer-controls-right,
.zoomer.zoomer-gallery .zoomer-controls-top-right,
.zoomer.zoomer-gallery .zoomer-controls-bottom-right { height: 131px; }
.zoomer .zoomer-controls-left,
.zoomer .zoomer-controls-right { margin: -35px 0 0 0; top: 50%; }
.zoomer.zoomer-gallery .zoomer-controls-left,
.zoomer.zoomer-gallery .zoomer-controls-right { margin: -65px 0 0 0; }
.zoomer .zoomer-controls-left { left: 10px; }
.zoomer .zoomer-controls-top-left { left: 10px; top: 10px; }
.zoomer .zoomer-controls-bottom-left { bottom: 10px; left: 10px; }
.zoomer .zoomer-controls-right { right: 10px; }
.zoomer .zoomer-controls-top-right { right: 10px; top: 10px; }
.zoomer .zoomer-controls-bottom-right { bottom: 10px; right: 10px; }
.zoomer_wrapper { box-sizing: border-box; border: 1px solid #ddd; border-radius: 3px; height: 320px; margin: 10px 0; overflow: hidden; width: 100%; }
.zoomer.dark_zoomer { background: #333 url(../advertisement/images/zoomer-bg-dark.png) repeat center; }
.zoomer.dark_zoomer img { box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); }
#controller {
width: 70%;
margin: 20px auto 22px 0;
}
@media all and (max-width: 480px) {
#controller {
width: 70%;
margin: 20px auto -7px 0;
}
}
@media all and (max-width: 375px) {
#controller {
width: 70%;
margin: 20px auto -7px 0;
}
}
@media all and (max-width: 360px) {
#controller {
width: 70%;
margin: 0 auto -13px 0;
}
}
@media all and (max-width: 320px) {
#controller {
width: 70%;
margin: 0 auto -13px 0;
}
}
#controller span {
color: #FFFFFF;
float: left;
display: table;
width: 25%;
height:54px;
line-height: 54px;
text-align: center;
}
#controller span.zoomer_flyer_previous,
#controller span.zoomer_flyer_next,
#controller span.zoomer_flyer_zoomin,
#controller span.zoomer_flyer_zoomout {
display: table-cell;
text-align: center;
vertical-align: middle;
}
#controller span.zoomer_flyer_previous {
background-color: #000000;
border-radius: 5px 0 0 5px;
box-sizing: border-box;
border-right: 1px dotted #868686;
}
#controller span.zoomer_flyer_next {
background-color: #000000;
border-radius: 0;
box-sizing: border-box;
}
#controller span.zoomer_flyer_zoomin {
background-color: #000000;
border-radius: 5px 0 0 5px;
box-sizing: border-box;
border-right: 1px dotted #868686;
border-left: 1px dotted #868686;
font-size: 140%;
/* font-size: 140%;
background-color: #006BC4;
border-radius: 0;
box-sizing: border-box;
border-right: 1px dotted #B3CFFF; */
}
#controller span.zoomer_flyer_zoomout {
background-color: #000000;
border-radius: 0;
box-sizing: border-box;
border-radius: 0 5px 5px 0;
font-size: 140%;
/* font-size: 140%;
background-color: #006BC4;
border-radius: 0 5px 5px 0; */
}
.cf:before,
.cf:after {
content:"";
display:table;
}
.cf:after {
clear:both;
}
@media screen and (min-width: 980px) {
.zoomer .zoomer-controls span:hover { background: #000; }
}