Menu
Cart 0
html, body { margin: 0; padding: 0; } body { position: absolute; width: 100%; height: 100%; overflow: hidden; text-align: center; background-color: #ffffff; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } img { position: relative; display: block; top: 50%; width: auto; height: 100%; margin-left: auto; margin-right: auto; -ms-transform: translateY(-50%); -webkit-transform: translateY(-50%); transform: translateY(-50%); } #topContainer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; margin-left: auto; margin-right: auto; } #imageContainer { position: absolute; top:0; left:0; width: 100%; height: 100%; z-index: 1; overflow: hidden; } .image { -webkit-transition: opacity 0.2s ease-in-out; -moz-transition: opacity 0.2s ease-in-out; -ms-transition: opacity 0.2s ease-in-out; -o-transition: opacity 0.2s ease-in-out; transition: opacity 0.2s ease-in-out; } .imageInvisible { position: absolute; visibility: hidden; } .imageOpaque { position: absolute; opacity: 0.5; -webkit-transition: opacity 0.2s ease-in-out; -moz-transition: opacity 0.2s ease-in-out; -ms-transition: opacity 0.2s ease-in-out; -o-transition: opacity 0.2s ease-in-out; transition: opacity 0.2s ease-in-out; } .imageVisible { position: absolute; opacity: 0.8; -webkit-transition: opacity 0.2s ease-in-out; -moz-transition: opacity 0.2s ease-in-out; -ms-transition: opacity 0.2s ease-in-out; -o-transition: opacity 0.2s ease-in-out; transition: opacity 0.2s ease-in-out; } #hotspotcanvas { position: absolute; left: 0; right: 0; margin-left: auto; margin-right: auto; /*-ms-transform: translateX(-50%); -webkit-transform: translateX(-50%); transform: translateX(-50%);*/ z-index: 8; cursor: ew-resize; /*width: 100%;*/ height: 100%; } #zoomContainer { position: relative; z-index: 9; width: 100%; height: 100%; overflow: hidden; display: none; } #draggableContainer { position: relative; width: 100%; height: 100%; cursor: move; } #controllerContainer { position: absolute; display: inline-block; bottom: 0; left: 0; z-index: 10; padding: 8px; } #logoContainer { position: absolute; display: inline-block; top: 0; left: 0; z-index: 11; } #logoContainer img { position: absolute; top: 0px; left: 0px; width: auto; height: auto; -ms-transform: translateY(0%); -webkit-transform: translateY(0%); transform: translateY(0%); } #deepzoom { display: inline-block; color: #1390ff; } #topContainer:-webkit-full-screen { position: fixed; height: 100%; top: 0; background: none; background-color: #ffffff; } #topContainer:-moz-full-screen { position: fixed; height: 100%; top: 0; background: none; background-color: #ffffff; } #topContainer:-ms-fullscreen { width: auto; height: auto; margin: auto; background-color: #ffffff; } #topContainer:fullscreen { position: fixed; height: 100%; top: 0; background: none; background-color: #ffffff; }