div.viewbox-container {
	position:fixed;
	top:0;
	right:0;
	bottom:0;
	left:0;
	background-color:rgba(0, 0, 0, 0.5);
	z-index:700;
}
div.viewbox-container > div.viewbox-body {
	position:absolute;
	display:flex;
	flex-direction:column;
	align-items:center;
	top:50%;
	left:50%;
	background-color:#FFF;
	border-radius:10px;
	box-shadow:0 0 10px rgba(0, 0, 0, 0.6);
}
div.viewbox-container > div.viewbox-body > div.viewbox-content {
	margin:10px;
}
div.viewbox-container > div.viewbox-body > div.viewbox-content > img.viewbox-image {
	width:100%;
	height:100%;
}
div.viewbox-container > div.viewbox-body > div.viewbox-footer {
	margin:0 10px 10px 10px;
	font-size:15px;
	font-weight:bold;
	text-align:center;
}

/* buttons */
div.viewbox-container > div.viewbox-button-default {
	position:absolute;
	width:64px;
	height:64px;
	fill:#999;
	cursor:pointer;
	z-index:9;
}
div.viewbox-container > div.viewbox-button-default > svg {
	width:100%;
	height:100%;
	background:inherit;
	fill:inherit;
	pointer-events:none;
	transform:translateX(0);
}
div.viewbox-container > div.viewbox-button-default.viewbox-button-close {
	top:10px;
	right:10px;
}
div.viewbox-container > div.viewbox-button-default.viewbox-button-next, div.viewbox-container > div.viewbox-button-default.viewbox-button-prev {
	width:128px;
	height:128px;
	top:50%;
	margin-top:-64px;
}
div.viewbox-container > div.viewbox-button-default.viewbox-button-next {
	right:10px;
}
div.viewbox-container > div.viewbox-button-default.viewbox-button-prev {
	left:10px;
}

@media (max-width:480px){

	div.viewbox-container > div.viewbox-button-default.viewbox-button-close {
		top:0;
		right:0;
	}
	div.viewbox-container > div.viewbox-button-default.viewbox-button-next, div.viewbox-container > div.viewbox-button-default.viewbox-button-prev {
		width:81px;
		height:81px;
		margin-top:-40px;
	}
	div.viewbox-container > div.viewbox-button-default.viewbox-button-next {
		right:-15px;
	}
	div.viewbox-container > div.viewbox-button-default.viewbox-button-prev {
		left:-15px;
	}

}

/* loader */
div.viewbox-loader {
	position:absolute;
	widows:100%;
	top:50%;
	left:50%;
	margin:-25px 0 0 -25px;
}
div.viewbox-loader > * {
	margin:0;
	padding:0;
}
div.viewbox-loader > div.viewbox-spinner {
	position:relative;
	width:50px;
	height:50px;
	margin:0 auto;
}
div.viewbox-loader > div.viewbox-spinner > div.viewbox-double-bounce1, div.viewbox-loader > div.viewbox-spinner > div.viewbox-double-bounce2 {
	position:absolute;
	width:100%;
	height:100%;
	top:0;
	left:0;
	background-color:#999;
	border-radius:50%;
	opacity:0.6;
	-webkit-animation:viewbox-sk-bounce 2.0s infinite ease-in-out;
	animation:viewbox-sk-bounce 2.0s infinite ease-in-out;
}
div.viewbox-loader > div.viewbox-spinner > div.viewbox-double-bounce2 {
	-webkit-animation-delay:-1.0s;
	animation-delay:-1.0s;
}

@-webkit-keyframes viewbox-sk-bounce {
	0%, 100% {
		-webkit-transform:scale(0.0);
	}
	50% {
		-webkit-transform:scale(1.0);
	}
}
@keyframes viewbox-sk-bounce {
	0%, 100% {
		transform:scale(0.0);
	}
	50% {
		transform:scale(1.0);
	}
}