/*
@import "public.css";
*/

.eventList ul,
.eventList ul li+li{
	margin-top:2.5%;
}
.eventList ul li a{
	position:relative;
	padding-top:16.66%;
	background:#F4F4F4;
	overflow:hidden;
	display:block;
	text-decoration:none;
	transition:background 0.5s;
}
.eventList ul li a .img,
.eventList ul li a .txt{
	position:absolute;
	top:0;
	width:50%;
	height:100%;
}
.eventList ul li a .img{
	left:0;
}
.eventList ul li a .img img{
	border:none;
	width:100%;
	display:block;
}
.eventList ul li a .img h3{
	position:absolute;
	left:0;
	top:0;
	width:100%;
	padding-top:33.33%;
	font-weight:normal;
	background:rgba(255, 255, 255, 0.9);
	opacity:0;
	transition:opacity 0.5s;
}
.eventList ul li a .img h3 span{
	position:absolute;
	left:0;
	top:50%;
	width:100%;
	text-align:center;
	font-size:20px;
	color:#333;
	-webkit-transform:translateY(-50%);
	transform:translateY(-50%);
}
.eventList ul li a .img h3 span:before{
	content:"| ";
}
.eventList ul li a .img h3 span:after{
	content:" |";
}
.eventList ul li a .txt{
	left:50%;
}
.eventList ul li a .txt .ct{
	position:absolute;
	left:0;
	top:50%;
	padding:5em;
	-webkit-transform:translateY(-50%);
	transform:translateY(-50%);
	line-height:1.6em;
}
.eventList ul li a .txt .ct h3{
	font-size:24px;
	line-height:1.4em;
}
.eventList ul li a:hover{
	background:#F8F8F8;
}
.eventList ul li a:hover .img h3{
	opacity:1;
}


@media screen and (max-width:1023px){
	
	section.eventList{
		margin-left:10px;
		margin-right:10px;
	}
	.eventList ul{
		margin-top:5%;
	}
	.eventList ul li a{
		padding-top:0;
	}
	.eventList ul li a .img,
	.eventList ul li a .txt{
		position:static;
		width:auto;
	}
	.eventList ul li a .txt .ct{
		position:static;
		padding:1em;
		-webkit-transform:none;
		transform:none;
	}
	.eventList ul li a .txt .ct h3{
		font-size:15px;
	}
	.eventList ul li a .txt .ct p{
		font-size:13px;
	}

}