/* jaz */
@import url(https://fonts.googleapis.com/css?family=Ropa+Sans);
html {
	height: 100%;
	width: 100%;
	background-color: #b6da46;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	background-attachment: fixed;
	font-family: 'Ropa Sans', sans-serif;
	font-style: normal;
	font-weight: 400;
	letter-spacing: 0.5px;
	color: #000;
}
body {
	width: 1200px;
	margin: 0 auto 0 auto;
	padding-bottom: 20px;
}
a {
	color: #fff;
}
a.noline {
	text-decoration: none;
}
a[href$=".pdf"], a[href$=".zip"] { 
  background-image: url(/bilder/pdf.png);
  background-repeat: no-repeat;
  background-size: 30px;
  padding: 8px 0 5px 40px;
  line-height: 30px;
}
a[href$=".zip"] { 
  background-image: url(/bilder/zip.png);
}
#head {
	position: relative;
	width: 100%;
	color: #fff;
}
#head h1 a {
	position: absolute;
	top: -65px;
	display: block;
	width: 120px;
	height: 64px;
	background-image: url(bilder/jugendanimationzug.png);
	background-repeat: no-repeat;
	background-size: 120px;
}
#head h1 span, #head h2 {
	position: absolute;
	top: -200px;
}
a.homebutton {
	display: none;
	position: absolute;
	top: -75px;
	right: 10px;
	width: 40px;
	padding: 7px 5px 4px 5px;
	background-color: #000;
	opacity: 0.5;
}
#navigation {
	overflow: auto;
	list-style: none;
	color: #fff;
}
#navigation li {
	float: left;
}
#socialmedia {
	position: absolute;
	list-style: none;
	top: -55px;
	right: 0;
}
#socialmedia a, #content a.facebook, #content a.whatsapp {
	display: block;
	width: 35px;
	height: 35px;
	background-color: rgba(255,255,255,0.2);
	background-image: url(bilder/socialmedia.png);
	background-repeat: no-repeat;
	background-size: 307.5px;
	box-shadow: 1px 1px 30px rgba(255,255,255,0.4);
	opacity: 0.4;
}
#socialmedia a:hover {
	opacity: 0.6;
}

#socialmedia li {
	float: left;
	margin-left: 10px;
}
a.facebook { }
a.twitter {
	background-position: -45px 0;
}
a.instagram {
	background-position: -90px 0;
}
a.google {
	background-position: -136px 0;
}
a.youtube {
	background-position: -181px 0;
}
a.rss {
	background-position: -227px 0;
}
#headBack, #navBack {
	position: absolute;
	top: 0;
	left: 0;
	height: 125px;
	background-color: rgba(20,20,20,0.4);
	width: 100%;
}
#navBack {
	top: 75px;
	height: 50px;
	background-color: rgba(0,0,0,0.4);
}
#navigation {
	margin-top: 75px;
	font-size: 28px;
	line-height: 50px;
}
#navigation a, #smallnav a {
	text-decoration: none;
}
#navigation li {
	margin-left: 20px;
	padding-left: 20px;
	border-left: 1px solid #fff;
}
#navigation li.contact {
	float: right;
}
#navigation li:first-child, #navigation li.contact {
	margin-left: 0;
	padding-left: 0;
	border-left: none;
}
#navigation li ul {
	display: none;
}
#navigation div.active, #navigation div.path {
	position: absolute;
	top: 50px;
	background-image: url(bilder/pfeil.png);
	background-repeat: no-repeat;
	background-size: 55px;
	height: 35px;
	width: 55px;
	opacity: 0.75;
}
#navigation div.path {
	opacity: 0.3;
}
#wrapper {
	overflow: auto;
}
h1, h2, h3, h4, h5, h6 {
	margin-bottom: 10px;
}
p {
	margin-bottom: 15px;
}
h1 { font-size: 34px; }
h2 { font-size: 20px; margin-top: 15px; }
h3 { font-size: 16px; color: #fff; text-shadow: 0px 0px 8px #666; margin-top: 20px;}
h4 { font-size: 11px; color: rgba(0,0,0,0.3); }
h5 { font-size: 16px; font-style: oblique; font-weight:bold;}
p { font-size: 16px; line-height: 1.3;}
hr {
	border: 0;
	border-bottom: 1px solid rgba(255,255,255,0.3);
	display: block;
	overflow: auto;
	margin: 0 0 10px 0;
	padding: 10px 0 0 0;
	width: 100%;
}
.stats {
	margin-bottom: 5px;
	border-bottom: 1px solid #666;
}
.stats span, .close span {
	float: right;
}
.stats div {
	border-bottom: 4px solid #944;
}
.expand {
	display: none;
}
.expand .close{
	display: block;
	margin: 15px 0 0 0;
	padding: 5px;
	background-color: rgba(255,255,255,0.3);
	border-radius: 2px;
	font-size: 10px;
	text-decoration: none;
}
.tokens {
	display: inline-block;
	background-color: rgba(0,0,0,0.3);
	text-shadow: 0px 0px 2px #000;
	padding: 2px 10px 2px 10px;
	margin: 0 5px 5px 0;
	color: #fff;
	border-radius: 2px;
	line-height: 20px;
}
#content ul, #content ol {
	margin: 0;
	padding: 0;
}
#content ul li, #content ol li{
	margin: 0 0 10px 16px;
	padding: 0;
}
#content a.tokens {
	color: #fff;
}
#content a.tokens:hover {
	background-color: rgba(100,100,100,0.3);
}
#content a.mehr, #content a.archiv {
	padding: 5px 10px 4px 10px;
	background-color: #777;
	color: #fff;
	text-decoration: none;
	font-size: 11px;
	float: left;
	border-radius: 2px;
}
#content a.archiv {
	font-size: 20px;
	float: right;
}
#content a.facebook, #content a.whatsapp {
	position: relative;
	display: inline-block;
	margin: 0 0 0 10px;
	background-size: 200px;
	opacity: 0.9;
	width: 25px;
	height: 25px;
	text-decoration: none;
	opacity: 0.6;
}
#content a.whatsapp {
	display: none;
	margin: 0 0 0 5px;
	background-position: -175px 0;
}
.hidde {
	display: none;
}
#logoPrint {
	display: none;
}

::-webkit-input-placeholder { color:#eee; }
::-moz-placeholder { color:#eee; } /* firefox 19+ */
:-ms-input-placeholder { color:#eee; } /* ie */
input:-moz-placeholder { color:#eee; }

#content form input, #content form textarea {
	width: 87%;
	background-color: rgba(50, 50, 50,0.2);
	color: #000;
	padding: 5px;
	font-size: 16px;
	margin-bottom: 20px;
	margin-left: 5%;
	margin-right: 5%;
	border: none;
	border-radius: 2px;
}
#content label p {
	margin-bottom: 0;
	padding-bottom: 0;
}
#content label .error{
	padding: 5px;
	border-radius: 2px;
	background-color: rgba(255, 255, 255,0.8);
	color: #000;
}
#content p#paging{
	background-color: rgba(50, 50, 50,0.2);
}
#content p#paging a{
	display: inline-block;
	width: 25px;
	line-height: 25px;
	text-decoration: none;
	text-align: center;
	background-color: rgba(255, 255, 255,0.2);
}
#content p#paging span{
	display: inline-block;
	width: 25px;
	line-height: 25px;
}
#content  p#paging a.pagingAct{
	background-color: rgba(255, 255, 255,0.6);
}
#content  p#paging a:hover{
	background-color: rgba(255, 255, 255,0.8);
}
.triRight, .triLeft {
	display: inline-block;
	border-color: transparent #fff;
	border-style: solid;
	border-width: 7px 0px 7px 7px;
	height: 0px;
	width: 0px;
}
.triLeft {
	border-width: 7px 7px 7px 0px;
}
.left {
	float: left;
	margin: 0 20px 15px 0;
	max-width: 450px;
	/* height: 100%; */
}
.right {
	float: right;
	margin: 0 0 15px 20px;
	max-width: 450px;
	/* height: 100%; */
}
.center {
	float: left;
	max-width: 450px;
	height: 100%;
	margin: 0 auto 15px auto;
}
div.left, div.right, div.center {
	overflow: hidden;
	max-width: 420px;
	margin: 0;
	margin-bottom: 0;
}
.vabox{
	display: inline-block;
	width: 225px;
}
.vawrap{
	width: 400px;
}
.vawrap h1, .vawrap h2, .vawrap h3  {
	margin-top: 0;
}
div.drittel{
	width: 33%;
	margin: 0 0 15px 0;
}
img.flyer{
	width: 400px;
	max-height: 570px;
}
.main{
	margin: 0 0 5px 20px;
}
#sidebar {
	float: right;
	margin: 50px 0 50px 0;
	right: 0;
	width: 262px;
	background-color: #000;
	background-color: rgba(0,0,0,0.7);
	overflow: auto;
	color: #fff;
	padding: 25px 0 25px 0;
	min-height: 500px;
}
#sbcontent {
	padding: 0 20px 20px 20px;
	border-bottom: 1px solid rgba(255,255,255,0.3);
}
#sbcontentU {
	padding: 40px 20px 0 20px;
}
#subnav {
	list-style: none;
}
#subnav div.active {
	float: left;
	position: relative;
	top: -20px;
	left: -20px;
	height: 57px;
	width: 5px;
	margin: 0 -15px 0 0;
	border-left: 10px solid rgba(255,255,255,0.2);
}
#subnav a {
	border-bottom: 1px solid rgba(255,255,255,0.3);
	display: block;
	padding: 20px 20px 20px 20px;
	text-decoration: none;
}
#subnav a:hover {
	background-color: rgba(255,255,255,0.1);
}
#content {
	float: left;
	min-height: 500px;
	width: 850px;
	padding: 25px;
	margin: 50px 0 50px 0;
	background-color: #fff;
	background-color: rgba(255,255,255,0.8);
	overflow: auto;
}
#content a {
	color: #000;
}
#copyright {
	padding: 25px;
	background-color: rgba(0,0,0,0.4);
	box-shadow: inset 0 5px 5px rgba(0,0,0,0.4);
	color: #fff;
}
#copyright a {
	text-decoration: none;
}
#copyright h3 {
	float: right;
	font-size: 11px;
}
#copyright h2 {
	float: left;
	font-size: 11px;
}
#smallnav {
	border-top: 10px solid rgba(0,0,0,0.5);
	margin: 60px -25px 0 -25px;
	padding: 10px 0 0 25px;
	overflow: auto;
}
#smallnav a {
	color: rgba(255,255,255,0.5);
}
#smallnav li {
	line-height: 25px;
	list-style: none;
	float: left;
	width: 230px;
}
[draggable=true] {
    cursor: move;
}
/* Smaller than standard 1200 (devices and browsers) */
@media(max-width: 1200px), print{
	body {width: 1000px;}
	#content {width: 650px;}
	.left {
		max-width: 300px;
		height: auto !important;
	}
	.right {
		max-width: 300px;
		height: auto !important;
	}
	div.left, div.right, div.center {
		max-width: 310px;
		margin: 0;
	}
	img.flyer{
		width: 310px;
		max-height: 440px;
	}
	.vabox{width: 315px;}
}
/* All Mobile Sizes (devices and browser) we start a little earlier */
@media(max-width: 768px){
		#socialmedia{margin: 57px 10px 0 0;}
		body {width: 100%;}
		#navBack, #navigation, #navigation div.active, #subnav {display: none;}
		a.homebutton {display: block;}
		#headBack {height: 80px}
		#wrapper {margin: 90px 0 0 0;}
		#content {
			margin: 50px 0 0 0;
			padding: 0;
			width: 100%;
			display: block;
		}
		.noMobile { display: none; }
		#sidebar {
			display: block;
			width: 100%;
			min-height: 0;
		}
		#head h1 a {top: -75px; left: 10px;}
		#navigation {
			display: block;
			position: absolute;
			z-index: 55;
			top: -76px;
			background-color: rgba(20,20,20,0.9);
			width: 100%;
		}
		#navigation li.contact, #navigation li, #navigation li:first-child {
			float: none;
			border: 0;
			padding: 0px;
			margin: 0;
			border-bottom: 1px solid rgba(255,255,255,0.3);
		}
		#navigation li a {
			border: 0;
			padding: 0 0 0 10px;
			margin: 0;
		}
		#navigation li ul {
			display: block;
			margin-left: 20px;
			list-style: none;
			border: none;
			margin-top: -10px;
			margin-bottom: 10px;
		}
		#head #navigation ul li, #navigation ul li a {
			border: none;
			font-size: 20px;
			line-height: 40px;
		}
		ul#smallnav li a{
			font-style: bold;
			font-weight: bold;
			margin: 0;
			padding: 0;
		}
		ul#smallnav li ul li a{
			font-style: normal;
			font-weight: normal;
			padding: 0;
			margin: 0;
		}
		h1, h2, h3, h4, h5, h6, p {
			margin-left: 10px;
			margin-right: 10px;
		}
		#content a.whatsapp {
			display: inline-block;
		}
}

/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
@media(max-width: 479px){
	#content {
		padding-top: 10px;
		padding-bottom: 10px;
	}
	.left, .right, .center {
		float: left;
		max-width: 102%;
		width: 96%;
		position: relative;
		height: auto !important; 
	}
	div.left, div.right, div.center, div.drittel {
		width: 100%;
		max-width: 100%;
		height: 100%;
	}
	div.left {
		margin-bottom: 20px;
	}
	#content img{
		position: relative; left:-10px;
		max-width: 105%;
		height: 100%;
	}
	p img{position: relative; left:-10px;}
	#content div img{
		left: 10px;
	}
	img.flyer{
		width: 103%;
		max-width: none;
		margin-left: -15px;
		height: auto !important;
	}
	#sidebar{margin-top: 20px;margin-bottom: 20px;}
	#copyright h3 {margin-top: -10px;}
	#copyright h2 {margin-bottom: 10px;margin-top: 5px;}
	#socialmedia a, #content a.facebook, #content a.whatsapp {
		opacity: 0.8;
	}
}

/* ----------------------------------------------------------------------------------------------------------------*/
/* ---------->>> global settings needed for thickbox <<<-----------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/
*{padding: 0; margin: 0;}
/* ----------------------------------------------------------------------------------------------------------------*/
/* ---------->>> thickbox specific link and font settings <<<------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/
#TB_window {
  font: 12px Arial, Helvetica, sans-serif;
  color: #333333;
  border-radius: 10px;
}
#TB_secondLine {
  font: 10px Arial, Helvetica, sans-serif;
  color:#666666;
  padding-top: 5px;
}
#TB_prev, #TB_next {
	position: absolute;
	padding: 5px;
	font-size: 20px;
	border-radius: 10px;
	background-color: #fff;
	border: 4px solid #525252;
	padding-right: 10px;
}
#TB_prev a, #TB_next a {
	text-decoration: none;
}
#TB_prev {
	left: 0;
	margin: -50% 0 0 -98px;
	border-right: none;
}
#TB_next {
	right: -95px;
	margin: -50% 0 0 0;
	border-left: none;
}

#TB_window a:link {color: #666666;}
#TB_window a:visited {color: #666666;}
#TB_window a:hover {color: #000;}
#TB_window a:active {color: #666666;}
#TB_window a:focus{color: #666666;}
/* ----------------------------------------------------------------------------------------------------------------*/
/* ---------->>> thickbox settings <<<-----------------------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/
#TB_overlay {
  position: fixed;
  z-index:100;
  top: 0px;
  left: 0px;
  height:100%;
  width:100%;
}
.TB_overlayMacFFBGHack {background: url(/bilder/macFFBgHack.png) repeat;}
.TB_overlayBG {
  background-color:#000;
  filter:alpha(opacity=75);
  -moz-opacity: 0.75;
  opacity: 0.75;
}
* html #TB_overlay { /* ie6 hack */
     position: absolute;
     height: expression(document.body.scrollHeight > document.body.offsetHeight ? document.body.scrollHeight : document.body.offsetHeight + 'px');
}
#TB_window {
  position: fixed;
  background: #ffffff;
  z-index: 102;
  color:#000000;
  display:none;
  border: 4px solid #525252;
  text-align:left;
  top:50%;
  left:50%;
  min-width: 300px;
}
* html #TB_window { /* ie6 hack */
position: absolute;
margin-top: expression(0 - parseInt(this.offsetHeight / 2) + (TBWindowMargin = document.documentElement && document.documentElement.scrollTop || document.body.scrollTop) + 'px');
}
#TB_window img#TB_Image {
  display:block;
  margin: 15px 0 0 15px;
  border-right: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  border-top: 1px solid #666;
  border-left: 1px solid #666;
}
#TB_caption{
  height:25px;
  padding:7px 30px 30px 25px;
  float:left;
}
#TB_closeWindow{
  height:25px;
  padding:11px 25px 10px 0;
  float:right;
}
#TB_closeAjaxWindow{
  padding:7px 10px 5px 0;
  margin-bottom:1px;
  text-align:right;
  float:right;
}
#TB_ajaxWindowTitle{
  float:left;
  padding:7px 0 5px 11px;
  margin-bottom:1px;
}
#TB_title{
  background-color:#e8e8e8;
  height:27px;
}
#TB_ajaxContent{
  clear:both;
  padding:2px 15px 15px 15px;
  overflow:auto;
  text-align:left;
  line-height:1.4em;
}
#TB_ajaxContent.TB_modal{
  padding:15px;
}
#TB_ajaxContent p{
  padding:5px 0px 5px 0px;
}
#TB_load{
  position: fixed;
  display:none;
  height:13px;
  width:208px;
  z-index:103;
  top: 50%;
  left: 50%;
  margin: -6px 0 0 -104px; /* -height/2 0 0 -width/2 */
}
* html #TB_load { /* ie6 hack */
position: absolute;
margin-top: expression(0 - parseInt(this.offsetHeight / 2) + (TBWindowMargin = document.documentElement && document.documentElement.scrollTop || document.body.scrollTop) + 'px');
}
#TB_HideSelect{
  z-index:99;
  position:fixed;
  top: 0;
  left: 0;
  background-color:#fff;
  border:none;
  filter:alpha(opacity=0);
  -moz-opacity: 0;
  opacity: 0;
  height:100%;
  width:100%;
}
* html #TB_HideSelect { /* ie6 hack */
     position: absolute;
     height: expression(document.body.scrollHeight > document.body.offsetHeight ? document.body.scrollHeight : document.body.offsetHeight + 'px');
}
#TB_iframeContent{
  clear:both;
  border:none;
  margin-bottom:-1px;
  margin-top:1px;
  _margin-bottom:1px;
}