/* CSS Document */

html {
	height:100.5%;
	font-size: 62.5%;
}

/*simple reset */
body, div, dl, dt, dd, h1, h2, h3, h4, h5, h6, pre, p, th, td, ul, ol, li,
article, section, figure, img {
	margin: 0;
	padding: 0;
}

a {
	text-decoration: none;
}

ol, ul {
	list-style: none;
}

body {
	font-size: 1.5rem;
	line-height:  2.3rem;
	font-family: "Roboto", sans-serif;
	font-weight: normal;
	color:rgb(65,65,65); /* grau */
	/*background: url(rhythm_highlight.png);*/
}

h1 {
	font-size: 4rem;
	line-height:  4.6rem;
	margin: 2.3rem;
	font-family: "Roboto Condensed", sans-serif;
	font-weight: normal;
	color: rgb(251, 176, 64);
}

h2 {
	font-size: 2.6rem;
	line-height: 4.6rem;
	margin: 2rem 2.3rem .3rem 2.3rem;
	font-family: "Roboto Condensed", sans-serif;
	font-weight: normal;
}

strong {
	font-weight: bold;
}

em {
	font-style: italic;
	font-weight: normal;
}

.outer-wrapper,
.inner-wrapper {
	width:100%;
}

.inner-wrapper {
	margin-bottom: 2.3rem;
}

.heading-line {
	height: .5rem;
	background: rgb(251, 176, 64);
	width: 100%;
}

.hero-line img {
	max-width: 100%;
	border-bottom: .5rem rgb(251, 176, 64) solid;
}

.inner-wrapper a {
	color: rgb(39, 170, 225);
	border-bottom: 1px solid #ddd;
}

	.inner-wrapper a:hover {
		border-bottom: 1px solid rgb(39, 170, 225);
	}
	
	.inner-wrapper a:focus {
		color: rgb(230, 63, 92);
		border-bottom: 1px solid rgb(230, 63, 92);
	}

.inner-wrapper p {
	margin: 0 2.3rem 2.3rem;
}

.player {
	box-sizing:border-box;
	
	/*width: 100%;*/
	margin: 2.3rem;
}

.youtube {
	display:none;
}

.termin {
	width: 100%;
	border: 1px solid #eee;
	border-radius: 5px;
	background: #fdfdfd;
	padding: 0 .5em 0 .5em;
	margin: 2.3rem 2.3rem 2.3rem 4.6rem;
	box-sizing: border-box;
}

	.termin h4 {
		font-size: 2rem;
		line-height:  2.3rem;
		margin: 1.15rem 0;
		font-family: "Roboto Condensed", sans-serif;
		font-weight: normal;
		color: rgb(251, 176, 64);
		text-align: center;
	}

	.termin .t-date {
		text-align: center;
	}

	.termin h5 {
		font-size: 1.5rem;
		line-height: 2.3rem;
		font-weight: normal;
		text-align: center;
	}
	

@media (min-width:50em) {

	.inner-wrapper {
		width:55em;
		margin:0 auto;
		background: rgba(255, 255, 255, .75);
	}
	

	.inner-wrapper p {
		margin: 0 0 2.3rem;
	}
	
	h1, h2 {
		margin: 2.3rem 0 2.3rem 0;
	}
	
	.content {
		width: 40em;
		float:left;
	}

	.sidebar {
		width: 15em;
		float:left;
	}

	.player {
		margin:0;
		padding: 2.3rem 0;
	}
	
	.youtube {
		width:100%;
		height: auto;
		position:absolute;
		z-index: -1000;
	}
	
	.video_background {
		position: absolute;
		top: 0px;
		right: 0px;
		min-width: 100%;
		min-height: 100%;
		width: auto;
		height: auto;
		z-index: -1000;
		overflow: hidden;
	}
}

.feat .hero-line {
	height: 500px;
	overflow:hidden;
	position:relative;
	border-bottom: .5rem rgb(251, 176, 64) solid;
}

.feat img.image{
	max-width: 100%;
	border-top: .5rem rgb(251, 176, 64) solid;
}

.feat .banner-bottom {
	height: 200px;
	width: 100%;
	background: rgb(39, 170, 225);
}