/*
<div id="liveevents">
<div class="row head">
	<div class="datum">Datum</div>
	<div class="location">Location</div>
	<div class="ort">Ort</div>
	<div class="land">Land</div>
	<div class="was">Was</div>
	<div class="infos">Infos</div>
</div>
<div class="row">
	<div class="datum"></div>
	<div class="location"></div>
	<div class="ort"></div>
	<div class="land"></div>
	<div class="was"></div>
	<div class="infos"></div>
</div>
</div>
*/

#pastevents {display:block !important;}

/* base */
#liveevents {
	display: block;
}

/* clearfix */
#liveevents .clear {
	clear: both;
}

/* row */
#liveevents .row {
	display: block;
	clear: both;
	border-top: 1px dashed #ccc;
	-webkit-transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	-ms-transition: all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;
	cursor: default;
}
#liveevents .row.head {
	border-top: 0;
}

#liveevents .row:hover {
	background-color: rgba(0, 0, 0, 0.05);
}
#liveevents .row.head:hover {
	background-color: transparent;
}

#liveevents .row .item {
	display: block;
	float: left;
	padding: 8px 0;
}
#liveevents .row.head .item {
	font-weight: bold;
}

/* each */
#liveevents .row .datum {
	width: 15%;
}
#liveevents .row .location {
	width: 25%;
}
#liveevents .row .ort {
	width: 18%;
}
#liveevents .row .land {
	width: 9%;
}
#liveevents .row .was {
	width: 25%;
}
#liveevents .row .infos {
	width: 8%;
}

/* media 1000px */
@media screen and (max-width:1000px) {
	#liveevents .row {
		padding: 5px 0;
	}
	#liveevents .row .item {
		width: 33%;
		clear: none;
		padding: 5px 0;
	}
	#liveevents .row .land {
		clear: left;
	}
}

/* media 600px */
@media screen and (max-width:600px) {
	#liveevents .row .item {
		width: 50%;
		clear: none;
	}
	#liveevents .row .ort {
		clear: left;
	}
	#liveevents .row .was {
		clear: left;
	}
}

/* media 400px */
@media screen and (max-width:400px) {
	#liveevents .row {
		padding: 10px 0;
	}
	#liveevents .row .item {
		width: 100%;
		clear: left;
		padding: 2px 0;
	}
}