.apiz-wrapper {
	overflow: hidden;
	position: relative;
	font-size: 30px;
	width: 100%;
	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); }
			}