/* http://meyerweb.com/eric/tools/css/reset/ 

   v2.0 | 20110126

   License: none (public domain)

*/



#mainwrapper {


	height: auto;

	margin: 0 auto 0 auto;


}



/* Image Box Style */

#mainwrapper .box {

	border: 0px solid #fff;

	cursor: pointer;

	height: 275px;

	width: 275px;

	float: left;

	margin: 0 22px 20px 0;

	position: relative;

	overflow: hidden;


	
}

#mainwrapper .box img {

	position: absolute;

	left: 0;

		-webkit-transition: all 300ms ease-out;

		-moz-transition: all 300ms ease-out;

		-o-transition: all 300ms ease-out;

		-ms-transition: all 300ms ease-out;	

	transition: all 300ms ease-out;

}



/* Caption Common Style */

#mainwrapper .box .caption {

	background-color: #d5a622;

	position: absolute;

	color: #fff;

	z-index: 100;

		-webkit-transition: all 300ms ease-out;

		-moz-transition: all 300ms ease-out;

		-o-transition: all 300ms ease-out;

		-ms-transition: all 300ms ease-out;	

		transition: all 300ms ease-out;

	left: 0;

}





/** Caption 1: Simple **/

#mainwrapper .box .simple-caption {

	height: 30px;

	width: 275px;

	display: block;

	bottom: -30px;

	line-height: 25pt;

	text-align: center;

}



/** Caption 2: Full Width & Height **/

#mainwrapper .box .full-caption {

	width: 170px;

	height: 170px;	

	top: -200px;

	text-align: left;

	padding: 15px;

}



/** Caption 3: Fade **/

#mainwrapper .box .fade-caption, #mainwrapper .box .scale-caption  {

	opacity: 0;

	width: 275px;

	height: 275px;

	text-align: left;

	padding: 15px;

}



/** Caption 4: Slide **/

#mainwrapper .box .slide-caption {

	width: 170px;

	height: 170px;	

	text-align: left;

	padding: 15px;

	left: 200px;

}



/** Caption 5: Rotate **/

#mainwrapper #box-5.box .rotate-caption {

	width: 170px;

	height: 170px;	

	text-align: left;

	padding: 15px;

	top: 200px;

	-moz-transform: rotate(-180deg);

	-o-transform: rotate(-180deg);

	-webkit-transform: rotate(-180deg);

	transform: rotate(-180deg);

}



#mainwrapper .box .rotate {

	width: 200px;

	height: 400px;

	-webkit-transition: all 300ms ease-out;

	-moz-transition: all 300ms ease-out;

	-o-transition: all 300ms ease-out;

	-ms-transition: all 300ms ease-out;	

	transition: all 300ms ease-out;

}



/** Caption 6: Scale **/

#mainwrapper .box .scale-caption h3, #mainwrapper .box .scale-caption p {

	position: relative;

	left: -200px;

	width: 170px;

	-webkit-transition: all 300ms ease-out;

	-moz-transition: all 300ms ease-out;

	-o-transition: all 300ms ease-out;

	-ms-transition: all 300ms ease-out;	

	transition: all 300ms ease-out;

}



#mainwrapper .box .scale-caption h3 {

	-webkit-transition-delay: 300ms;

	-moz-transition-delay: 300ms;

	-o-transition-delay: 300ms;

	-ms-transition-delay: 300ms;	

	transition-delay: 300ms;

}



#mainwrapper .box .scale-caption p {

	-webkit-transition-delay: 500ms;

	-moz-transition-delay: 500ms;

	-o-transition-delay: 500ms;

	-ms-transition-delay: 500ms;	

	transition-delay: 500ms;

}



/** Simple Caption :hover Behaviour **/

#mainwrapper .box:hover .simple-caption {

	-moz-transform: translateY(-100%);

	-o-transform: translateY(-100%);

	-webkit-transform: translateY(-100%);

	opacity: 1;

	transform: translateY(-100%);

}



/** Full Caption :hover Behaviour **/

#mainwrapper .box:hover .full-caption {

	-moz-transform: translateY(100%);

	-o-transform: translateY(100%);

	-webkit-transform: translateY(100%);

	opacity: 1;

	transform: translateY(100%);

}



/** Fade Caption :hover Behaviour **/

#mainwrapper .box:hover .fade-caption, #mainwrapper .box:hover .scale-caption  {

	opacity: .9;

}



/** Slide Caption :hover Behaviour **/

#mainwrapper .box:hover .slide-caption {

	background-color: rgba(0,0,0,1) !important;

	-moz-transform: translateX(-100%);

	-o-transform: translateX(-100%);

	-webkit-transform: translateX(-100%);

	opacity: 1;

	transform: translateX(-100%);

}

#mainwrapper .box:hover img#image-4 {

	-moz-transform: translateX(-100%);

	-o-transform: translateX(-100%);

	-webkit-transform: translateX(-100%);

	transform: translateX(-100%);

	opacity: 1;

}



/** Rotate Caption :hover Behaviour **/

#mainwrapper .box:hover .rotate {

	background-color: rgba(0,0,0,1) !important;

	-moz-transform: rotate(-180deg);

	-o-transform: rotate(-180deg);

	-webkit-transform: rotate(-180deg);

	transform: rotate(-180deg);

}



/** Scale Caption :hover Behaviour **/

#mainwrapper .box:hover #image-6 {

	-moz-transform: scale(1.4);

	-o-transform: scale(1.4);

	-webkit-transform: scale(1.4);

	transform: scale(1.4);

}



#mainwrapper .box:hover .scale-caption h3, #mainwrapper .box:hover .scale-caption p {

	-moz-transform: translateX(200px);

	-o-transform: translateX(200px);

	-webkit-transform: translateX(200px);

	transform: translateX(200px);

}