body {
	font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
	background-color: #42413C;
	margin: 0;
	padding: 0;
	color: #000;
	
}
img {
      	width: 100%;
		left: 0;
		bottom: 0;
		border: 0;
}
a img { /* this selector removes the default blue border displayed in some browsers around an image when it is surrounded by a link */
	border: none;
}

.LeftEye {
	z-index: 10;
	top: calc(8.41vw * 1582 / 891 );
	left: 42.4%;
	width: 0.7%;
	height: 0.5vw;
	position: absolute;	
	background-color: #D8D3A5; /* give the eyes different colours */
}	
.RightEye {
	z-index: 10;
	top: calc(8.49vw * 1582 / 891 );
	left: 43.5%;
	width: 0.7%;
	height: 0.5vw;
	position: absolute;
	background-color: #C4BC77; /* give the eyes different colours */
}	
.Eye{
	width: 100%;
	height: 100%;
	display: inline-block;
	border-radius: 50%;
	position: relative;
	overflow: hidden;
}

.EyePupil{
	width: 30%;
	height: 30%;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	border-radius: 50%;
	border: 1px solid #555;
	background-color: #333;
}
	
.ForegroundOverlay {
	z-index: 12; /* Give foreground higher z than eyes so they are behind - this enables the hotspots on image, but then cut eyeholes out of image and make image a gis so these holes are ransparent and moving eyes show through */
	width: 100%;
	height: 100%;
	left: 0%;
	top: 0%;
	position: absolute;
}