events.css

body {
	font-family: 'Raleway', 'Open Sans', sans-serif;
	background: url(img/evening.jpg) no-repeat center center fixed; 
  	background-size: cover;
}

div#logo {
	text-align:center;
	height: 120px;
	width:100%;
	padding-top:10px;
	opacity: 0.7;
}

img#logo {
	height: 90%;
}

div#banner {
	width:600px;
	margin: 0  auto;
	opacity: 0.7;
}

img#banner {
	width:100%;
}

p#banner-text {
	text-align: center;
	width:600px;
	margin: 0 auto;
	position:relative;
	top:-60px;
	font-size: 22pt;
	font-weight:100;
}


#container {
	margin: auto;
	padding-top: 0px;
	width: 850px;
	text-align: center;
	height:0px;
	overflow-y-bottom: hidden;
}

#alternate {
	margin-top: 35px;
	font-size: 20px;
	animation: fade 1s;
	-webkit-animation: fade 1s;
}

.event {
	padding: 15px;
	background: rgba(255,255,255,0.7);
	margin-top: -20px;
	margin-bottom: 35px;
	height: 140px;
	-webkit-transition: background-color 0.25s ease;
	transition: background-color 0.25s ease;
	animation: load 0.8s;
	-webkit-animation: load 0.8s;
}

.event:hover{
	background-color: rgba(255,255,255,0.9);
	-webkit-transition: background-color 0.25s ease;
	transition: background-color 0.25s ease;
}

.name {
	font-size: 30px;
	margin-top: 0px;
	margin-bottom: 0px;
}

.category {	
	font-size: 16px;
	color: gray;
	margin-top: 4px
}

.info{
	width: 50%;
	height:104px;
	float: left;
	margin-top: 0px;
	margin-bottom: 0px;
}

.time, .location, .rating {
	float: right;
	width: 50%;
	margin-top: 10px;
	margin-bottom: 0px;
}

@keyframes fade
{
	0% {color: transparent;}
	100% {color: black;}
}

@-webkit-keyframes fade
{
	0% {color: transparent;}
	100% {color: black;}
}

@keyframes load
{
	0% {height: 0px; color: transparent;}
	100% {height: 140px; color: black;}
}

@-webkit-keyframes load
{
	0% {height: 0px; color: transparent;}
	100% {height: 140px; color: black;}
}