body{
	background-attachment: fixed;
	background-image: url(images/creampaper.png);
	background-repeat: repeat;
}

#container{
	position: absolute;
	top: 0px;
	width: 1000px;
	left: 50%;
	margin-left: -500px;
}

#header{
	font-family: 'Lobster', cursive;
	font-size: 100px;
	color: #333333;
	text-shadow: 2px 2px 0 rgba(50, 50, 50, 0.5);
	width: 100%;
	text-align: center;
	margin-top: 50px;
	margin-bottom: 50px;
}

#description{
	font-family: 'Lobster', cursive;
	font-size: xx-large;
	color: #666666;
	width: 100%;
	text-align: center;
	margin-bottom: 50px;
	
}

.stack { 
	position: relative;
	z-index: 10;
	float: left;
	clear: none;
	margin-right: 25px;
	margin-left: 25px;
	margin-bottom: 20px;
	background: #FFFFFF;
}
 
/* Image styles */
.stack img {
	max-width: 200px;
	border: 10px solid #fff;
	border-radius: 3px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.5);
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.5);
}
 
/* Stacks creted by the use of generated content */
.stack:before, .stack:after {
	background: #FFFFFF;
	content: "";
	border-radius: 3px;
	width: 100%;
	height: 100%;
	position: absolute;
	border: 10px solid #fff;
	left: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.5);
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.5);
    -webkit-transition: 0.5s all ease-out;
    -moz-transition: 0.5s all ease-out;
    transition: 0.5s all ease-out;
}
.stack:before { top: 5px; z-index: -10; } /* 1st element in stack (behind image) */
.stack:after { top: 10px; z-index: -20; } /* 2nd element in stack (behind image) */

.stack.jumbledoff:before {
    -webkit-transform: rotate(5deg);
    -moz-transform: rotate(5deg);
    transform: rotate(5deg);
}
.stack.jumbledoff:after {
    -webkit-transform: rotate(-5deg);
    -moz-transform: rotate(-5deg);
    transform: rotate(-5deg);
}

/* remove jumble on hover */
.stack.jumbledoff:hover:before, .stack.jumbledoff:hover:after {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    transform: rotate(0deg);
}

.stack.jumbledon:before, .stack.jumbledon:after {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    transform: rotate(0deg);
}

/* apply jumble on hover */
.stack.jumbledon:hover:before {
    -webkit-transform: rotate(5deg);
    -moz-transform: rotate(5deg);
    transform: rotate(5deg);
}
.stack.jumbledon:hover:after {
    -webkit-transform: rotate(-5deg);
    -moz-transform: rotate(-5deg);
    transform: rotate(-5deg);
}

/* apply rotations on hover */
.stack.rotate:hover:after {
    -webkit-transform-origin: bottom left;
    -moz-transform-origin: bottom left;
    transform-origin: bottom left;
	-webkit-transform: rotate(10deg);
	-moz-transform: rotate(10deg);
    transform: rotate(10deg);
}
.stack.rotate:hover:before {
    -webkit-transform-origin: bottom left;
    -moz-transform-origin: bottom left;
    transform-origin: bottom left;
    -webkit-transform: rotate(5deg);
    -moz-transform: rotate(5deg);
    transform: rotate(5deg);
}