﻿
.imgbox {
  display: block; 
  width: 100%;
  text-align: center;
  margin-bottom: 40px;
}

.imgbox img {
  -webkit-box-shadow: 1px 4px 9px -1px rgba(0,0,0,0.65);
  -moz-box-shadow: 1px 4px 9px -1px rgba(0,0,0,0.65);
  box-shadow: 1px 4px 9px -1px rgba(0,0,0,0.65);
}

.credits { text-align: center; margin-bottom: 20px; }

.magnify {width: 600px; margin: 50px auto; position: relative; cursor: none;}

/* Let's create the magnifying glass */
.large {
	display: none;
	width: 250px; 
	height: 250px;
	position: absolute;
	-webkit-border-radius: 100%;
	-moz-border-radius: 100%;
	border-radius: 100%;
	
	/* box shadows to achieve the glass effect */
	-webkit-box-shadow: 0 0 0 7px rgba(255, 255, 255, 0.85), 0 0 7px 7px rgba(0, 0, 0, 0.25), inset 0 0 40px 2px rgba(0, 0, 0, 0.25);
	-moz-box-shadow: 0 0 0 7px rgba(255, 255, 255, 0.85), 0 0 7px 7px rgba(0, 0, 0, 0.25), inset 0 0 40px 2px rgba(0, 0, 0, 0.25);
	box-shadow: 0 0 0 7px rgba(255, 255, 255, 0.85), 0 0 7px 7px rgba(0, 0, 0, 0.25), inset 0 0 40px 2px rgba(0, 0, 0, 0.25)
}

/* To solve overlap bug at the edges during magnification */
.thumb { display: block; }