body {
	background-color: black;

}

p,h3,h1{
	font-size:14px;
	font-family: "Lucida Grande",Verdana,"Bitstream Vera Sans",Arial,sans-serif;
	color:#dfd0d0;
	margin-left:10px;
	text-align:top;
}
h1{
	font-size:24px;
	font-weight: normal;
}
h2{
	font-size:18px;
	font-weight: normal;
}


/* Make the container relative */
.swap-on-hover {
  position: relative;	
  top:200px;
}


/* Select the image and make it absolute to the container */
.swap-on-hover img {
  position: absolute;
  top:0;
  left:0;
	overflow: hidden;

}

/* 
	We set z-index to be higher than the back image, so it's alwyas on the front.

We give it an opacity leaner to .25s, that way when we hover we will get a nice fading effect. 
*/
.swap-on-hover .swap-on-hover__front-image {
  z-index: 9999;
  transition: opacity .1s linear;
  cursor: pointer;
}

/* When we hover the figure element, the block with .swap-on-hover, we want to use > so the front-image is going to have opacity of 0, which means it will be hidden, to the back image will show */
.swap-on-hover:hover > .swap-on-hover__front-image{
  opacity: 0;
}