/* Layout */
.stack { float: left;
width: 22%;
margin: 0px 4% 4% 0px;
position: relative;
z-index: 10; }

/* Image styles */
.stack img { max-width: 180px;
height: auto;
vertical-align: bottom;
border: 10px solid #FFF;
border-radius: 3px;
box-sizing: border-box;
box-shadow: 0px 1px 2px #cdcdcd;
left: 21px;
}
.stack:last-of-type { margin-right: -85px; }

/* Stacks creted by the use of generated content */
.stack:before, .stack:after { content: "";
border-radius: 3px;
width: 100%;
height: 100%;
position: absolute;
border: 10px solid #FFF;
left: 0px;
box-sizing: border-box;
box-shadow: 0px 1px 2px #cdcdcd;
transition: all 0.3s ease-out 0s;
}
.stack:before { top: 15px;
z-index: -10;
width: 193px;
left: 14px;} /* 1st element in stack (behind image) */	
.stack:after { top: 21px;
z-index: -19;
width: 207px;
display: none; } /* 2nd element in stack (behind image) */

/* Second stack example (rotated to the right from the bottom left) */
.stack.rotated:before { 
	-webkit-transform-origin: bottom left;
	-moz-transform-origin: bottom left;
	transform-origin: bottom left;
	-webkit-transform: rotate(2deg);
	-moz-transform: rotate(2deg);
	transform: rotate(2deg);
}
.stack.rotated:after { 
	-webkit-transform-origin: bottom left;
	-moz-transform-origin: bottom left;
	transform-origin: bottom left;
	-webkit-transform: rotate(4deg);
	-moz-transform: rotate(4deg);
	transform: rotate(4deg);
}	

/* Third stack example (One stack element rotated in the opposite direction) */
.stack.twisted:before {
	-webkit-transform: rotate(-5deg);
	-moz-transform: rotate(-5deg);
	transform: rotate(-5deg);
}	
.stack.twisted:after {
	-webkit-transform: rotate(-6deg);
	-moz-transform: rotate(-6deg);
	transform: rotate(-6deg);
}	

/* Fourth stack example (Similar to the second but rotated left) */
.stack.rotated-left:before {
	-webkit-transform-origin: bottom left;
	-moz-transform-origin: bottom left;
	transform-origin: bottom left;
	-webkit-transform: rotate(-3deg);
	-moz-transform: rotate(-3deg);
	transform: rotate(-3deg);
}
.stack.rotated-left:after {
	-webkit-transform-origin: bottom left;
	-moz-transform-origin: bottom left;
	transform-origin: bottom left;
	-webkit-transform: rotate(-6deg);
	-moz-transform: rotate(-6deg);
	transform: rotate(-6deg);
}

/* Reset all rotations on hover */
.stack:hover:before, .stack:hover:after {
	-webkit-transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	transform: rotate(0deg);
}

/*
iPhone and mobile widths --------------------------------------------------------------------------------------------------------------------------- */
@media only screen and (min-width: 320px) and (max-width: 480px) {
	.stack { float: none; width: auto; margin-bottom: 35px; }
	h1.title { margin: 15px 0; }
}