.apiz-wrapper {
	overflow: hidden;
	position: relative;
	font-size: 30px;
	width: 90%;
	height: 100%;
	}

.apiz-wrapper,
.apiz-wrapper * {
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	   -moz-user-select: none;
	    -ms-user-select: none;
	     -o-user-select: none;
	        user-select: none;
	}

	.apiz-wrapper > img:first-child,
	.apiz-wrapper > svg:first-child {
		position: absolute;
		z-index: 5;
		left: 50%;
		top: 50%;
		-webkit-transform-origin: 0 0 0;
		   -moz-transform-origin: 0 0 0;
		    -ms-transform-origin: 0 0 0;
		     -o-transform-origin: 0 0 0;
		        transform-origin: 0 0 0;
		}

	.apiz-wrapper > svg:first-child {
		left: 0;
		top: 0;
	}

	.apiz-wrapper > .apiz-original-svg {
		/* This class is for the orignal SVG. It ensures that it is visible, but not visible on
		   the screen. The reason for this is, that is has to be visible, because else the reference
		   (<use> element) is not visible too, even if the reference is visible */
		display: block !important;
		visibility: visible !important;
		position: absolute !important;
		left: -100% !important;
	}

	.apiz-wrapper > .apiz-overlay {
		position: absolute;
		z-index: 10;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		/* you studid, studid IE... */
		/* http://stackoverflow.com/questions/9109911/ie-z-index-trouble-on-element-with-transparent-background */
		background: transparent url("data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBR‌​AA7");
		}

	.apiz-enabled > .apiz-overlay {
		cursor: move;
		cursor: grab;
		cursor: -webkit-grab;
		cursor: -moz-grab;
		}

	.apiz-enabled.apiz-dragging > .apiz-overlay {
		cursor: move;
		cursor: grab;
		cursor: -webkit-grabbing;
		cursor: -moz-grabbing;
		}

	.apiz-loading > .apiz-overlay {
		cursor: progress;
		}

	.apiz-disabled > .apiz-overlay {
		cursor: default;
		}

	.apiz-wrapper .apiz-error-message {
		color: #e0e0e0;
		font-size: 80px;
		line-height: 100px;
		text-align: center;
		margin: 40px 0 0 0;
		}

	.apiz-wrapper .apiz-loading-animation-text {
		position: absolute;
		z-index: 1;
		width: 100%;
		text-align: center;
		top: 49%;
		}

	.apiz-wrapper .apiz-loading-animation-image {
		position: relative;
		z-index: 1;
		width: 100%;
		height: 100%;
		background-position: center center;
		background-color: transparent;
		background-repeat: no-repeat;
		}

	/* Throbber animation inspired by http://codepen.io/argyleink/pen/goyiI */

	.apiz-wrapper .apiz-throbber {
		position: absolute;
		z-index: 1;
		top: 50%;
		left: 50%;
		margin: -90px 0 0 -90px;
		}

		.apiz-wrapper .apiz-throbber > .apiz-circle {
			/* absolute position with 3d animation = render layer */
			position: absolute;

			border: 3px solid transparent;
			border-top: 3px solid #5f5c5c;
			border-radius: 50%;
			}

		.apiz-wrapper .apiz-throbber > .apiz-circle.apiz-circle-one {
			height: 50px;
			width: 50px;
			left: 50px;
			top: 50px;
			-webkit-animation: 1.0s throbberRotateOne linear infinite;
			   -moz-animation: 1.0s throbberRotateOne linear infinite;
			    -ms-animation: 1.0s throbberRotateOne linear infinite;
			     -o-animation: 1.0s throbberRotateOne linear infinite;
			        animation: 1.0s throbberRotateOne linear infinite;
			}

		.apiz-wrapper .apiz-throbber > .apiz-circle.apiz-circle-two {
			height: 75px;
			width: 75px;
			top: 38px;
			left: 38px;
			-webkit-animation: 1.05s throbberRotateTwo linear infinite;
			   -moz-animation: 1.05s throbberRotateTwo linear infinite;
			    -ms-animation: 1.05s throbberRotateTwo linear infinite;
			     -o-animation: 1.05s throbberRotateTwo linear infinite;
			        animation: 1.05s throbberRotateTwo linear infinite;
			}

		.apiz-wrapper .apiz-throbber > .apiz-circle.apiz-circle-three {
			height: 100px;
			width: 100px;
			top: 25px;
			left: 25px;
			-webkit-animation: 1.1s throbberRotateThree linear infinite;
			   -moz-animation: 1.1s throbberRotateThree linear infinite;
			    -ms-animation: 1.1s throbberRotateThree linear infinite;
			     -o-animation: 1.1s throbberRotateThree linear infinite;
			        animation: 1.1s throbberRotateThree linear infinite;
			}

		/* Ring one */

		@-webkit-keyframes throbberRotateOne {
			from { transform: rotateZ(280deg); }
			to { transform: rotateZ(-80deg); }
			}

		@-moz-keyframes throbberRotateOne {
			from { transform: rotateZ(280deg); }
			to { transform: rotateZ(-80deg); }
			}

		@-ms-keyframes throbberRotateOne {
			from { transform: rotateZ(280deg); }
			to { transform: rotateZ(-80deg); }
			}

		@-o-keyframes throbberRotateOne {
			from { transform: rotateZ(280deg); }
			to { transform: rotateZ(-80deg); }
			}

		@keyframes throbberRotateOne {
			from { transform: rotateZ(280deg); }
			to { transform: rotateZ(-80deg); }
			}

		/* Ring two */

		@-webkit-keyframes throbberRotateTwo {
			from { transform: rotateZ(320deg); }
			to { transform: rotateZ(-20deg); }
			}

		@-moz-keyframes throbberRotateTwo {
			from { transform: rotateZ(320deg); }
			to { transform: rotateZ(-20deg); }
			}

		@-ms-keyframes throbberRotateTwo {
			from { transform: rotateZ(320deg); }
			to { transform: rotateZ(-20deg); }
			}

		@-o-keyframes throbberRotateTwo {
			from { transform: rotateZ(320deg); }
			to { transform: rotateZ(-20deg); }
			}

		@keyframes throbberRotateTwo {
			from { transform: rotateZ(320deg); }
			to { transform: rotateZ(-20deg); }
			}

		/* Ring three */

		@-webkit-keyframes throbberRotateThree {
			from { transform: rotateZ(360deg); }
			to { transform: rotateZ(0deg); }
			}

		@-moz-keyframes throbberRotateThree {
			from { transform: rotateZ(360deg); }
			to { transform: rotateZ(0deg); }
			}

		@-ms-keyframes throbberRotateThree {
			from { transform: rotateZ(360deg); }
			to { transform: rotateZ(0deg); }
			}

		@-o-keyframes throbberRotateThree {
			from { transform: rotateZ(360deg); }
			to { transform: rotateZ(0deg); }
			}

		@keyframes throbberRotateThree {
			from { transform: rotateZ(360deg); }
			to { transform: rotateZ(0deg); }
			}

.align-right{
	text-align: right;
}
.thumb-container{
	position: relative;
	margin-top: 10px;
}
#thumbnail-inner{
}
.apiz-image-contianer {
    max-height: 100%;
    max-width: 100%;
    position: relative;
    width: 100%;
    height: 100%;
}
.apiz-thumbnail {
    border: 1px solid;
    bottom: 10px;
    box-sizing: border-box;
    height: 100px;
    padding: 5px;
    position: absolute;
    right: 10px;
    width: 100px;
    z-index: 999;
    background: #dfdfdf;
}
.apiz-thumbnail img {
    height: auto;
    margin: 0 auto;
    max-height: 100%;
    max-width: 100%;
    width: auto;
}
.apiz-wrapper {
    position: relative;
}
.apiz-zoom-preview{
    border: 1px solid rgba(225, 225, 225, 0.5);
    position: absolute;
    background: rgba(225, 225, 225, 0.2);
    cursor: move;
}









.apiz-wrapper {
    background-color: #dfdfdf;
}





/* Outer */
.popup {
    width:100%;
    height:100%;
    display:none;
    position:fixed;
    top:0px;
    left:0px;
    background:rgba(0,0,0,0.75);
}
 
/* Inner */
.popup-inner {
    background: #fff none repeat scroll 0 0;
    border-radius: 0;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 1);
    height: 92%;
    left: 50%;
    max-width: 97%;
    padding: 10px 35px;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 97%;
}

.popup-inner-scroll{
	height: 100%;
	overflow-x:hidden;
	overflow-y:auto;
}
 
/* Close Button */

.popup-close {
    background: #b0002d none repeat scroll 0 0;
    color: #fff;
    display: inline-block;
    font-family: Arial,sans-serif;
    font-size: 20px;
    height: 30px;
    line-height: 100%;
    padding-top: 4px;
    position: absolute;
    right: 2px;
    text-align: center;
    top: 2px;
    transition: all 0.25s ease 0s;
    width: 30px;
}

.popup-btn {
    background: #b0002d none repeat scroll 0 0;
    color: #fff;
    display: inline-block;
    line-height: 100%;
    padding: 5px 15px;
    text-align: center;
    transition: all 0.25s ease 0s;
}
 
.popup-close:hover {
    background:rgba(0,0,0,1);
    text-decoration:none;
}


.apiz-wrapper{
	float: left;
	width: 95%;
	width: -webkit-calc(100% - 45px);
	width: -moz-calc(100% - 45px);
	width: calc(100% - 45px); 

	height: -webkit-calc(100% - 120px);
	height: -moz-calc(100% - 120px);
	height: calc(100% - 120px);
}

.zoom-tool-bottom {
    display: table;
    width: 100%;
    padding-top: 10px;

	width: -webkit-calc(100% - 45px);
	width: -moz-calc(100% - 45px);
	width: calc(100% - 45px); 
}
.zoom-tool-bottom .zoom-tool-info{
	float: left;
	width: 90%;
	width: -webkit-calc(100% - 100px);
	width: -moz-calc(100% - 100px);
	width: calc(100% - 100px); 
	padding-right: 10px;
}
.zoom-tool-bottom .thumb-container{
	float: left;
	width: 100px;
	display:none !important;
	
}
.zoom-tool-bottom .zoom-tool-info h1 {
    margin-bottom: 10px;
}

.popup-inner .align-right {
    box-sizing: border-box;
    float: right;
    padding-left: 10px;
    position: relative;
    width: 45px;
    height: 100%;
}
.apiz-thumbnail{
	position: relative;
	right: auto;
	left: auto;
}

.image-zoom-main{
	height: 100%;
	min-height: 400px;
}

.buttons {
    bottom: 10px;
    left: 50%;
    margin: 0 auto 0 -8px;
    position: absolute;
}
.buttons .controls{
	margin-bottom: 5px;
}

.popup-btn {
    background: #b0002d none repeat scroll 0 0;
    color: #fff;
    display: block;
    line-height: 100%;
    margin: 5px auto;
    padding: 5px 15px;
    text-align: center;
    transition: all 0.25s ease 0s;
    width: 90px;
}




.controls{
	background: url('../../controls.gif') no-repeat;
	height: 25px;
    width: 25px;
    cursor: pointer;
    display: table;
    transition: all 0.15s ease-in-out 0s !important;
}
.controls.reset {
    background-position: 0 -75px;
}

.controls.reset:hover, .controls.reset:active, .controls.reset:focus {
    background-position: -25px -75px;
}

.controls.fullscreen {
    background-position: 0 -50px;
}

.controls.fullscreen:hover, .controls.fullscreen:active, .controls.fullscreen:focus {
    background-position: -25px -50px;
}

.controls.fullscreen.disabled, .controls.fullscreen.disabled:hover, .controls.fullscreen.disabled:active, .controls.fullscreen.disabled:focus {
    background-position: -50px -50px;
    cursor: default;
    pointer-events: none;
}

.controls.zoomIn:hover, .controls.zoomIn:active, .controls.zoomIn:focus {
    background-position: -25px 0;
}

.controls.zoomIn.disabled, .controls.zoomIn.disabled:hover, .controls.zoomIn.disabled:active, .controls.zoomIn.disabled:focus {
    background-position: -50px 0;
    cursor: default;
    pointer-events: none;
}

.controls.zoomOut {
    background-position: 0 -25px;
}

.controls.zoomOut:hover, .controls.zoomOut:active, .controls.zoomOut:focus {
    background-position: -25px -25px;
}

.controls.zoomOut.disabled, .controls.zoomOut.disabled:hover, .controls.zoomOut.disabled:active, .controls.zoomOut.disabled:focus {
    background-position: -50px -25px;
    cursor: default;
    pointer-events: none;
}

.controls.close {
    background-position: -50px -125px;
}

.controls.close:hover, .controls.close:active, .controls.close:focus {
    background-position: -25px -125px;
}
.apiz-wrapper > img:first-child, .apiz-wrapper > svg:first-child{
	transition: none;
}

.slider-container{
	height: -webkit-calc(100% - 120px);
	height: -moz-calc(100% - 120px);
	height: calc(100% - 120px);
    margin: 0 auto;
    width: 7px;
}
.ui-slider-vertical {
    border-radius: 0 !important;
    height: 100%;
    width: 5px;
}
.ui-slider-vertical .ui-slider-range {
    background: #dedede none repeat scroll 0 0;
    left: 1px;
    width: 100%;
}
.ui-slider-vertical .ui-slider-handle {
    height: 10px;
    left: -3px;
    margin-bottom: -5px;
    margin-left: 0;
    width: 10px;
}

.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active, a.ui-button:active, .ui-button:active, .ui-button.ui-state-active:hover{
	background:#dedede;
}