/*
		Hover Effects using CSS3
		------------------------
		Author: 		@samhs
		
	*/

	#content11 {
	position: relative;
	text-align: center;
	width: 982px;
	height: 200px;
	margin-right: auto;
	margin-left: auto;
	background: #9d9d9d url(libg2.jpg) repeat top left;
	font-family: 'Six Caps', sans-serif;
	font-size: 64.5%;
	border: medium solid #CCC;
	-webkit-border-radius: 6px;
	border-radius: 6px;
	
	}
	
	ul.rolover {
		position:		relative;
		margin:			0;
		padding:		0;
	}
	
	ul.rolover li {
	background:		#d1d694 url(libg.jpg) no-repeat center center;
	position:		relative;
	list-style:		none;
	margin:			0;
	padding:		0;
	width:			245px;
	height:			150px;
	overflow:		hidden;
	border:			8px solid white;
	float:			left;
	margin-right:	20px;
	margin-left:	40px;
	margin-top:     15px;
	margin-bottom:	30px;
	-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;
	background-color: #FF0000;
	}
	
	ul.rolover 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.rolover li:hover img {
		-webkit-transform: scale(6);
		-moz-transform: 	scale(6);
		-ms-transform: 	scale(6);
		-o-transform: 	scale(6);
		opacity:			0;
	}
	
	ul.rolover li h2 {
		font-size:			3em;
		color:				#333;
		margin:				0;
		padding:			0;
		line-height:		1.5em;
		letter-spacing:		0.1em;
		text-align:			center;
		text-transform:		lowercase;
		-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.rolover 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.rolover 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.rolover li:hover hr {
		width:				200px;
	}
		
	
	ul.rolover li p {
		font-family:		helvetica, arial, sans-serif;
		text-transform:		uppercase;
		margin:				0;
		padding:			0;
		font-size:			1.1em;
		padding:			20px;
		text-align:			center;
		text-tranform:		uppercase;
		-webkit-transition: all 0.6s ease-in;
		-webkit-transform:	scale(0.1);
		-moz-transition: 	all 0.6s ease-in;
		-moz-transform:		scale(0.1);
		-ms-transition: 	all 0.6s ease-in;
		-ms-transform:		scale(0.1);
		-o-transition: 		all 0.6s ease-in;
		-o-transform:		scale(0.1);
		opacity:			0;
	}
	
	ul.rolover li:hover p {
		-webkit-transform:	scale(1);
		-moz-transform:		scale(1);
		-ms-transform:		scale(1);
		-o-transform:		scale(1);
		opacity:			1;
	}
	
	ul.rolover li a.button {
		display:			block;
		text-align:			center;
		font-family:		helvetica, arial, sans-serif;
		position:			relative;
		text-transform:		uppercase;
		letter-spacing:		0.2em;
		padding:			4px;
		text-decoration:	none;
		font-size:			1.6em;
		background:			#CC3333;
		color:				#d1d694;
		width:				150px;
		margin-left:		55px;
		border:				none;
		-webkit-transition: all 0.6s ease-in;
		-webkit-transform:	translateY(230px) scale(5);
		-moz-transition: 	all 0.6s ease-in;
		-moz-transform:		translateY(230px) scale(5);
		-ms-transition: 	all 0.6s ease-in;
		-ms-transform:		translateY(230px) scale(5);
		-o-transition: 		all 0.6s ease-in;
		-o-transform:		translateY(230px) scale(5);
		opacity:			0;
		cursor:				pointer;
		z-index:			50;
	}
	
	ul.rolover li:hover a.button {
		-webkit-transform:	translateY(0) scale(1);
		-moz-transform:		translateY(0) scale(1);
		-ms-transform:		translateY(0) scale(1);
		-o-transform:		translateY(0) scale(1);
		opacity:			1;
	}
#contentrojo {
	background-color: #C40005;
	height: 210px;
	width: 100%;
	padding-top: 15px;
}