* {margin: 0; padding: 0;}

/***********************************************/
/* Photo Stack Divs                                  */
/***********************************************/
div[class*='stack'] {
	float: left;
	height: 150px; width: 200px;
	position: relative;
	margin: 30px;
	z-index: 3;
	
	-webkit-box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
	-moz-box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
	box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
}   
div[class*='stack'] img {
	border: 6px solid #fff;
}
div[class*='stack']:before, div[class*='stack']:after {
	background: #768590;
	border: 6px solid #fff;
	content: "";
	height: 150px; width: 200px; 
	position: absolute;
	z-index: -1;
	-webkit-box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
	-moz-box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
	box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
	
	/*Dirty IE8 hack*/
	height: 0px\9; width: 0px\9; 
	border: none\9;
}

div[class*='stack']:before {
	background: #eff4de;
}

div[class*='stack']:hover {
	-webkit-box-shadow: 20px 20px 5px rgba(0,0,0,0.7);
	-moz-box-shadow: 20px 20px 5px rgba(0,0,0,0.7);
	box-shadow: 20px 20px 5px rgba(0,0,0,0.7);
}

/************************************************************/
/* Use thise section for 170 x 200 taller pictures to keep proportion */
/************************************************************/

div[class*='stackTall'] {
	float: left;
	height: 200px; width: 170px;
	position: relative;
	margin: 30px;
	z-index: 3;
	
	-webkit-box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
	-moz-box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
	box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
}   
div[class*='stackTall'] img {
	border: 6px solid #fff;
}
div[class*='stackTall']:before, div[class*='stackTall']:after {
	background: #768590;
	border: 6px solid #fff;
	content: "";
	height: 200px; width: 170px; 
	position: absolute;
	z-index: -1;
	-webkit-box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
	-moz-box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
	box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
	
	/*Dirty IE8 hack*/
	height: 0px\9; width: 0px\9; 
	border: none\9;
}

div[class*='stackTall']:before {
	background: #eff4de;
}

div[class*='stackTall']:hover {
	-webkit-box-shadow: 20px 20px 5px rgba(0,0,0,0.7);
	-moz-box-shadow: 20px 20px 5px rgba(0,0,0,0.7);
	box-shadow: 20px 20px 5px rgba(0,0,0,0.7);
}



/**********************************************************************/
/* Use thise section for 150 x 200 taller pictures to keep proportion */
/**********************************************************************/

div[class*='stackTall2'] {
	float: left;
	height: 200px; width: 150px;
	position: relative;
	margin: 30px;
	z-index: 3;
	
	-webkit-box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
	-moz-box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
	box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
}   
div[class*='stackTall2'] img {
	border: 6px solid #fff;
}
div[class*='stackTall2']:before, div[class*='stackTall2']:after {
	background: #768590;
	border: 6px solid #fff;
	content: "";
	height: 200px; width: 150px; 
	position: absolute;
	z-index: -1;
	-webkit-box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
	-moz-box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
	box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
	
	/*Dirty IE8 hack*/
	height: 0px\9; width: 0px\9; 
	border: none\9;
}

div[class*='stackTall2']:before {
	background: #eff4de;
}

div[class*='stackTall2']:hover {
	-webkit-box-shadow: 20px 20px 5px rgba(0,0,0,0.7);
	-moz-box-shadow: 20px 20px 5px rgba(0,0,0,0.7);
	box-shadow: 20px 20px 5px rgba(0,0,0,0.7);
}






/**********************************************/
/* stack numbers start here                   */
/**********************************************/

/*STACK ONE*/
.stackone:after {
	top: -2px;
	left: -6px;
}

.stackone:before {
	top: 4px;
	left: -6px;
}

/*STACK TWO*/
.stacktwo:after {
	top: 5px; 
	left: 0px;
	-webkit-transform: rotate(4deg);
	-moz-transform: rotate(4deg);
	-o-transform: rotate(4deg);
	-ms-transform: rotate(4deg);
	transform: rotate(4deg);
}

.stacktwo:before {
	top: 0px;
	left: -10px;
	-webkit-transform: rotate(-5deg);
	-moz-transform: rotate(-5deg);
	-o-transform: rotate(-5deg);
	-ms-transform: rotate(-5deg);
	transform: rotate(-5deg);
}

/*STACK THREE*/
.stackthree:after {
	top: -2px;
	left: -10px;
	-webkit-transform: rotate(-5deg);
	-moz-transform: rotate(-5deg);
	-o-transform: rotate(-5deg);
	-ms-transform: rotate(-5deg);
	transform: rotate(-5deg);
}

.stackthree:before {
	top: 5px;
	left: -15px;
	z-index: -1;
	-webkit-transform: rotate(-10deg);
	-moz-transform: rotate(-10deg);
	-o-transform: rotate(-10deg);
	-ms-transform: rotate(-10deg);
	transform: rotate(-10deg);
}

/*STACK FOUR*/
.stackfour:after {
	top: -17px;
	left: -16px;
	-webkit-transform: rotate(-3deg);
	-moz-transform: rotate(-3deg);
	-o-transform: rotate(-3deg);
	-ms-transform: rotate(-3deg);
	transform: rotate(-3deg);
}

.stackfour:before {
	top: -19px;
	left: -26px;
	-webkit-transform: rotate(-7deg);
	-moz-transform: rotate(-7deg);
	-o-transform: rotate(-7deg);
	-ms-transform: rotate(-7deg);
	transform: rotate(-7deg);
}

/*STACK FIVE*/
.stackfive:after {
	top: -8px;
	left: -6px;
	-webkit-transform: rotate(5deg);
	-moz-transform: rotate(5deg);
	-o-transform: rotate(5deg);
	-ms-transform: rotate(5deg);
	transform: rotate(5deg);
}

.stackfive:before {
	top: -10px;
	left: -6px;
	-webkit-transform: rotate(9deg);
	-moz-transform: rotate(9deg);
	-o-transform: rotate(9deg);
	-ms-transform: rotate(9deg);
	transform: rotate(9deg);
}

/*STACK SIX*/
.stacksix:after {
	top: -2px;
	left: 8px;
	-webkit-transform: rotate(2deg);
	-moz-transform: rotate(2deg);
	-o-transform: rotate(2deg);
	-ms-transform: rotate(2deg);
	transform: rotate(2deg);
}

.stacksix:before {
	top: -6px;
	left: 12px;
	-webkit-transform: rotate(8deg);
	-moz-transform: rotate(8deg);
	-o-transform: rotate(8deg);
	-ms-transform: rotate(8deg);
	transform: rotate(8deg);
}

/*STACK SEVEN*/
.stackseven:after {
	top: -5px;
	left: -5px;
	-webkit-transform: rotate(-8deg);
	-moz-transform: rotate(-8deg);
	-o-transform: rotate(-8deg);
	-ms-transform: rotate(-8deg);
	transform: rotate(-8deg);
}

.stackseven:before {
	top: 5px;
	left: 5px;
	-webkit-transform: rotate(8deg);
	-moz-transform: rotate(8deg);
	-o-transform: rotate(8deg);
	-ms-transform: rotate(8deg);
	transform: rotate(8deg);
}

/*STACK EIGHT*/
.stackeight:after {
	top: -5px;
	left: -6px;
	-webkit-transform: rotate(-10deg);
	-moz-transform: rotate(-10deg);
	-o-transform: rotate(-10deg);
	-ms-transform: rotate(-10deg);
	transform: rotate(-10deg);
}

.stackeight:before {
	top: -5px;
	left: -6px;
	-webkit-transform: rotate(10deg);
	-moz-transform: rotate(10deg);
	-o-transform: rotate(10deg);
	-ms-transform: rotate(10deg);
	transform: rotate(10deg);
}

	/* Read more at http://designshack.net/articles/css/use-pseudo-elements-to-create-an-image-stack-illusion/#xw3cmhC04Jq2wWuS.99 */


/*********************/
/*  TALL  150 x 200  */
/*********************/

/*STACK ONE*/
.stackonet:after {
	top: -4px;
	left: -6px;
	-webkit-transform: rotate(-10deg);
	-moz-transform: rotate(-10deg);
	-o-transform: rotate(-10deg);
	-ms-transform: rotate(-10deg);
	transform: rotate(-10deg)
}

.stackonet:before {
	top: 4px;
	left: -6px;
	-webkit-transform: rotate(10deg);
	-moz-transform: rotate(10deg);
	-o-transform: rotate(10deg);
	-ms-transform: rotate(10deg);
	transform: rotate(10deg);

}


/*STACK THREE tall*/
.stackthreet:after {
	top: -5px;
	left: 2px;
	-webkit-transform: rotate(-10deg);
	-moz-transform: rotate(-10deg);
	-o-transform: rotate(-10deg);
	-ms-transform: rotate(-10deg);
	transform: rotate(-10deg);
}

.stackthreet:before {
	top: -5px;
	left: -2px;

	-webkit-transform: rotate(-10deg);
	-moz-transform: rotate(-10deg);
	-o-transform: rotate(-10deg);
	-ms-transform: rotate(-10deg);
	transform: rotate(-10deg);
}

/*STACK SIX*/
.stacksixt:after {
	top: -2px;
	left: 8px;
	-webkit-transform: rotate(2deg);
	-moz-transform: rotate(2deg);
	-o-transform: rotate(2deg);
	-ms-transform: rotate(2deg);
	transform: rotate(2deg);
}

.stacksixt:before {
	top: -6px;
	left: 12px;
	-webkit-transform: rotate(-8deg);
	-moz-transform: rotate(-8deg);
	-o-transform: rotate(-8deg);
	-ms-transform: rotate(-8deg);
	transform: rotate(-8deg);
}


/*STACK SEVEN Tall*/
.stacksevent:after {
	top: -5px;
	left: -5px;
	-webkit-transform: rotate(-8deg);
	-moz-transform: rotate(-8deg);
	-o-transform: rotate(-8deg);
	-ms-transform: rotate(-8deg);
	transform: rotate(-8deg);
}

.stacksevent:before {
	top: 5px;
	left: 5px;
	-webkit-transform: rotate(8deg);
	-moz-transform: rotate(8deg);
	-o-transform: rotate(8deg);
	-ms-transform: rotate(8deg);
	transform: rotate(8deg);
}