/* -------------------------------------------------------------------------------------------------------------------------
Grid of images
---------------------------------------------------------------------------------------------------------------------------- */
#grid { margin: 35px 0; }
/*
Add the transition affect to the images in the grid. Any changes to the element will be transtioned from it's current state, for example on :hover */
#grid li { float: left; list-style: none; margin: 0 25px 25px 0; position: relative; overflow: hidden; border-top: 1px solid rgba(255, 255, 255, 0.25);
	-webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.4);
	-moz-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
	box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
	-webkit-transition: all 0.15s ease-in;
	-moz-transition: all 0.15s ease-in;
	-ms-transition: all 0.15s ease-in;
	transition: all 0.15s ease-in;
}

#grid li:hover { z-index: 2;
	-webkit-transform: scale(1.1) translateY(-30px);	
	-moz-transform: scale(1.1) translateY(-30px);	
	-ms-transform: scale(1.1) translateY(-30px);	
	transform: scale(1.1) translateY(-30px);	
	-webkit-box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
	-moz-box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
	box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
}
/*
Rotate left hand column to the left upon hover */
#grid li:nth-child(3n-2):hover {
	-webkit-transform: scale(1.1) translate3d(0, -30px, 0) rotate(-2.5deg);
	-moz-transform: scale(1.1) translateY(-30px) rotate(-2.5deg);
	-ms-transform: scale(1.1) translateY(-30px) rotate(-2.5deg);
	transform: scale(1.1) translateY(-30px) rotate(-2.5deg);
}
/*
Rotate every third li with :nth-child(3n) (right hand column in this demo) to the right upon hover */
#grid li:nth-child(3n):hover {
	-webkit-transform: scale(1.1) translate3d(0, -30px, 0) rotate(2.5deg);	
	-moz-transform: scale(1.1) translateY(-30px) rotate(2.5deg);	
	-ms-transform: scale(1.1) translateY(-30px) rotate(2.5deg);	
	transform: scale(1.1) translateY(-30px) rotate(2.5deg);	
}

#grid img, #grid li, .backface {
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}

#grid .details { position: absolute; bottom: 0; background: #fff; background: rgba(255, 255, 255, 0.87); border-top: 1px solid #fff; width: 270px; border-bottom: 1px solid rgba(0, 0, 0, 0.25); padding: 10px;
	-webkit-border-radius:  0 0 5px 5px;
	-moz-border-radius: 0 0 5px 5px;
	border-radius: 0 0 5px 5px;
	-webkit-box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.35);
	-moz-box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.35);
	box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.35);
}
#grid .details h3 { margin-bottom: 0px; letter-spacing: -1px; }