@charset "utf-8";
/* CSS Document */

/*
		Hover Effects using CSS3
		------------------------
		Author: 		@samhs
		
	*/ 
	
	ul.rollover {
		position:		relative;
		margin:			0;
		padding:		0;
	}
	
	ul.rollover li {
		background:		#F1E9F4 ;
		position:		relative;
		list-style:		none;
		margin:			0; 
		padding:		0;
		width:			330px;
		height:			330px;
		overflow:		hidden;
		border:			20px solid white;
		float:			left;
		margin-right:	30px;
		margin-left:	0;
		margin-bottom:	40px;	
		-webkit-box-shadow:		0px 0px 10px #333;
		-moz-box-shadow:		0px 0px 10px #333;
		-ms-box-shadow:		0px 0px 10px #333;
		-o-box-shadow:		0px 0px 10px #333;
		box-shadow:		0px 0px 10px #333;
	}
	  
	ul.rollover li img {
		z-index:		30;
		position:		absolute;
		top:			0px;
		left:			0px;
		-webkit-transition:all 0.7s ease-out;
		-moz-transition:all 0.7s ease-out;
		-ms-transition:all 0.7s ease-out;
		-o-transition:all 0.7s ease-out;
	}
	
	ul.rollover li:hover img {
		-webkit-transform: scale(6);
		-moz-transform: 	scale(6);
		-ms-transform: 	scale(6);
		-o-transform: 	scale(6);
		opacity:			0;
	}
	
	ul.rollover li h2 {
		font-size:			1.5em;
		color:				#333;
		margin:				0;
		padding:			0;
		line-height:		1.5em;
		letter-spacing:		0.1em;
		text-align:			center;
		text-transform:		uppercase;
		-webkit-transition: all 0.5s ease-in;
		-webkit-transform:	scale(0.1);
		-moz-transition: 	all 0.5s ease-in;
		-moz-transform:		scale(0.1);
		-ms-transition: 	all 0.5s ease-in;
		-ms-transform:		scale(0.1);
		-o-transition: 	all 0.5s ease-in;
		-o-transform:		scale(0.1);
		opacity:			0;
	}
	
	ul.rollover li:hover h2 {
		padding-top:		30px;
		-webkit-transform:	scale(1);
		-moz-transform:		scale(1);
		-ms-transform:		scale(1);
		-o-transform:		scale(1);
		opacity:			1;
	}
	
	ul.rollover li hr {
		width:				0px;
		color: 				#333;
		background-color: 	#333;
		border:				none;
		height: 			2px;
		margin:				auto;
		-webkit-transition:	all 0.6s linear;
		-moz-transition:	all 0.6s linear;
		-ms-transition:		all 0.6s linear;
		-o-transition:		all 0.6s linear;
	}
	
	ul.rollover li:hover hr {
		width:				200px;
	}
		
	
	ul.rollover li p {
		font-family:		helvetica, arial, sans-serif;
		font-size:          13px;
		text-transform:		lowercase;
		padding-left:        22px;
		padding-right:       22px;
		 
	} 
	
	/*
		ROLL OVER LEFT Hover Effects using CSS3
		------------------------
		Author: 		@samhs
		
	*/ 
	
	ul.rolloverleft {
		position:		relative;
		margin:			0;
		padding:		0;
	}
	
	ul.rolloverleft li {
		background:		#F1E9F4 ;
		position:		relative;
		list-style:		none;
		margin:			0; 
		padding:		0;
		width:			350px;
		height:			250px;
		overflow:		hidden;
		border:			20px solid white;
		float:			left;
		margin-right:	20px;
		margin-left:	0;
		margin-bottom:	40px;	
		-webkit-box-shadow:		0px 0px 10px #333;
		-moz-box-shadow:		0px 0px 10px #333;
		-ms-box-shadow:		0px 0px 10px #333;
		-o-box-shadow:		0px 0px 10px #333;
		box-shadow:		0px 0px 10px #333;
	}
	 
	ul.rolloverleft li img {
		z-index:		30;
		position:		absolute;
		top:			0px;
		left:			0px;
		-webkit-transition:all 0.7s ease-out;
		-moz-transition:all 0.7s ease-out;
		-ms-transition:all 0.7s ease-out;
		-o-transition:all 0.7s ease-out;
	}
	
	ul.rolloverleft li:hover img {
		-webkit-transform: scale(6);
		-moz-transform: 	scale(6);
		-ms-transform: 	scale(6);
		-o-transform: 	scale(6);
		opacity:			0;
	}
	
	ul.rolloverleft li h2 {
		font-size:			1.5em;
		color:				#333;
		margin:				0;
		padding:			0;
		line-height:		1.5em;
		letter-spacing:		0.1em;
		text-align:			center;
		text-transform:		uppercase;
		-webkit-transition: all 0.5s ease-in;
		-webkit-transform:	scale(0.1);
		-moz-transition: 	all 0.5s ease-in;
		-moz-transform:		scale(0.1);
		-ms-transition: 	all 0.5s ease-in;
		-ms-transform:		scale(0.1);
		-o-transition: 	all 0.5s ease-in;
		-o-transform:		scale(0.1);
		opacity:			0;
	}
	
	ul.rolloverleft li:hover h2 {
		padding-top:		30px;
		-webkit-transform:	scale(1);
		-moz-transform:		scale(1);
		-ms-transform:		scale(1);
		-o-transform:		scale(1);
		opacity:			1;
	}
	
	ul.rolloverleft li hr {
		width:				0px;
		color: 				#333;
		background-color: 	#333;
		border:				none;
		height: 			2px;
		margin:				auto;
		-webkit-transition:	all 0.6s linear;
		-moz-transition:	all 0.6s linear;
		-ms-transition:		all 0.6s linear;
		-o-transition:		all 0.6s linear;
	}
	
	ul.rolloverleft li:hover hr {
		width:				200px;
	}
		
	
	ul.rolloverleft li p {
		font-family:		helvetica, arial, sans-serif;
		font-size:          13px;
		text-transform:		lowercase;
		padding-left:        22px;
		padding-right:       22px;
		 
	}