@font-face {
    font-family: 'Rock-it';
    src:url('../webfonts/rockit/Rock-it.ttf.woff') format('woff'),
        url('../webfonts/rockit/Rock-it.ttf.svg#Rock-it') format('svg'),
        url('../webfonts/rockit/Rock-it.ttf.eot'),
        url('../webfonts/rockit/Rock-it.ttf.eot?#iefix') format('embedded-opentype'); 
    font-weight: normal;
    font-style: normal;
}

body { overflow-y: scroll; background: #000 url(../img/bg_main_2018.jpg) center top no-repeat; }
body#start { background: #000 url(../img/bg_start_2018.jpg) center top no-repeat; }

h1,
#right_col h2.rockit {
	font-family: 'Rock-it';
}

#right_col h2.rockit {
	background: url(../img/bg_h2_rockit.png) left bottom no-repeat;
}

.pull-left {
	float: left;
	margin-right: 15px;
}

.pull-right {
	float: right;
	margin-left: 15px;
}

.img-intext {
	margin-top: 5px;
	margin-bottom: 5px;
}

.clearfix {
	clear: both;
}

.alert {
	display: block;
	padding: 10px;
}

.alert-danger {
	background-color: #e81722;
	color: #000;
}

.alert-success {
	background-color: #4caf50;
	color: #fff;
}

.alert p:last-child {
	margin-bottom: 0;
}

#logo {
	position: relative;
	/*transform: rotate(-4deg);*/
	top: 0;
	left: 0;
}

#navi_main {
	width: auto;
	position: relative;
	transform: rotate(-6deg);
	top: -25px;
	left: 0;
	border: 0px solid red;
}

#navi_main li {
	position: absolute;
}

#nm_termine {
	left: 10px;
}

#nm_ueber-uns {
	left: 110px;
}

#nm_media {
	left: 250px;
}

#nm_kontakt {
	left: 350px;
}

#nm_spenden {
	left: 460px;
}

#navi_main a {
	font-family: 'Rock-it';
	font-size: 1em;
	color: #d70d18;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

#navi_main a:hover,
#navi_main li.active a {
	color: #fff;
	text-decoration: none;
}

#navi_special {
	position: absolute;
	top: 4px;
	right: 15px;
}

#navi_special #logo_instagram {
	transform: rotate(-6deg);
	position: relative;
	top: -12px;
	left: -4px;
}

.next_events {
	margin-top: 5em;
}

.next_event {
	display: flow-root;
	border-top: 1px solid #1c2d42;
	padding-top: 1em;
	margin-top: 1em;
	width: 100%;
}

.next_event .date {
	float: left;
	width: 50px;
	text-align: center;
	color: #000;
	line-height: 1.8em;
	background: #d70d18;
	padding: 5px 0;
	margin-right: 10px;
}

.next_event .date .day {
	font-size: 2em;
}

.next_event .date .month {
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.next_event .location {
	font-weight: bold;
	padding-top: 0.75em;
}

.past {
	display: none;
}

.next {
	font-weight: bold;
}

.years { font-size: 1.3em; margin-bottom: 1em; }
.years li { display: inline; margin: 0 !important; }
.years li.ui-state-active a { color: #e7ac88; font-weight: bold; }


#tabs li:before,
.years li:before {
	content: " · ";
}

#tabs li.first:before,
.years li.first:before {
	content: "";
}

#besetzung {
	display: flow-root;
	overflow: hidden;
}

#besetzung .trommler {
	float: left;
	margin: 0 14px 15px 0;
	text-align: center;
}

#besetzung .trommler:nth-child(5n+0) {
	margin-right: 0;
}

.thumbnail {
	float: left;
	width: 137px;
	margin: 0 10px 20px 0;
}

.thumbnail:nth-child(4n+1) {
	clear: left;
}

.thumbnail a img {
	height: 90px;
	overflow: hidden;
}

#thumbnails {
	display: flow-root;
}

#thumbnails a {
	display: block;
	float: left;
	margin: 0 10px 20px 0;
}

#thumbnails img {
	width: 135px;
	height: 90px;
	border: 1px solid #e7ac88;
}

#besetzung a,
a.img-intext img,
.thumbnail a img {
	display: block;
	border: 1px solid #e7ac88;
	margin-bottom: 5px;
	padding: 0;
}

#besetzung a:hover,
a.img-intext:hover img,
.thumbnail a:hover img {
	border-color: #e81722;
}

.production {
	margin: 40px 0;
	display: flow-root;
}

.production h2 {
	padding-left: 250px;
}

.production .cover {
	float: left;
	width: 220px;
	text-align: center;
}

.production .cover img {
	box-shadow: 0 0 20px 2px #e81722;
	margin: 5px 0;
}

.production .playlist {
	padding-left: 250px;
}

#navi_footer a.active {
    color: #e7ac88;
}