@media only screen and (min-width: 965px) {
}

@media only screen and (min-width: 1220px) {
}

@media only screen and (min-width: 1480px) {
}

@media only screen and (min-width: 1700px) {
}

@media only screen and (min-width: 1900px) {
}

@media only screen and (max-width: 960px) {

	html {
		height: 101.1%;
	}
	/* Layout -------------------------------------- */
	body {
		font-size: 95.1%;
	}
	#navbutton {
		display: block;
	}
	#page {
		display: block;
		width: 100%;
		padding: 0;
	}
	#sidebar {
		display: block;
		float: none;
		vertical-align: top;
		background-color: #fff;
		width: 100%;
		height: auto;
		margin: 0 auto;
		padding-top: 30px;
		border: 0px solid red;
	}
	#logo {
		display: block;
		background-color: #fff;
		width: 100%;
		margin: 0 auto;
		margin: 0 auto;
		text-align: center;/*box-shadow: 0 0 22px 0 rgba(0,0,0,0.3);*/
	}
	#logo img {
		display: block;
		padding-top: 30px;
		padding-bottom: 20px;
		width: 40%;
		max-width: 180px;
		height: auto;
		margin: 0 auto;
		text-align: center;
	}
	#navigation {
		position: relative;
		margin: 0 auto;
		margin-bottom: 45px;
		width: 60%;
		padding-top: 40px;
		padding-bottom: 40px;
		background-color: #fff;
		text-align: right;
		font-family: 'Lusitana', 'Open Sans', 'Helvetica', Arial, Verdana, 'sans-serif';
		border-top: 2px solid #0b7fbb;
		border-bottom: 2px solid #0b7fbb;
	}
	.wrapper {
		display: block;
		float: none;
		background-color: #ebf3ef;
		width: 100%;
		vertical-align: top;
		padding-top: 0px;
		padding-bottom: 100px;
		margin: 0 auto;
		border: 0px solid red;
	}
	#header {
		display: block;
		position: relative;
		margin: 0 auto;
		background-color: #497461;	
		z-index: 10;
	}
	#header #headerlayer {
		display: block;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: auto;
		background-color: #497461;
		z-index: 20;
	}
	.headercontent {
		position: relative;
		padding-top: 30px;
		padding-bottom: 0px;
		padding-left: 5%;
		margin: 0 auto;
		z-index: 40;
		color: #fff;
	}
	#content {
		display: block;
		margin: 0 auto;
		width: 100%;
		padding-top: 60px;
		border: 0px solid red;
	}
	#startbild {
		display: block;
		position: relative;
		width: 100%;
		height: auto;
		margin: 0 auto;
		z-index: 50;
		top: 30px;
		text-align: center;
		/*	border-top: 1px dotted #fff;
		border-bottom: 1px dotted #497461;
		padding-top: 10px;
		padding-bottom: 10px;*/

	}
	#startbild img {
		position: relative;
		width: 90%;
		height: auto;
		z-index: 55;
		margin: 0 auto;
		text-align: center;
		box-shadow: 0 0 22px 0 rgba(0,0,0,0.3);

	}
	#traube {
		position: absolute;
		z-index: 60;
		top: -30px;
		right: -20px;
		width: 240px;
		height: auto;

	}
	.contentboxschmal {
		display: block;
		position: relative;
		margin: 0 auto;
		width: 85%;
		max-width: 750px;
		border: 0px solid red;
	}
	.contentboxbreit {
		width: 100%;
		padding-left: 5%;
		padding-right: 5%;
		border: 0px solid red;
	}
	.colblock {
		display: block;
		width: 100%;
		margin-top: 0px;
		padding-top: 40px;
		padding-bottom: 25px;
		border-bottom: 1px solid #0b7fbb;
	}
	.col1-2, .col2-2 {
		width: 100%;
		border: 0px solid red;
		vertical-align: bottom !important;
	}
	.col1-2 {
		float: none;
	}
	.col2-2 {
		float: none;
	}
	.bildbox {
		display: block;
		width: 100%;
		margin-top: 40px;
		margin-bottom: 30px;
		border: 0px solid red;
	}
	.bildbox .untertitel, .bildbox .bild {
		display: inline-block;
		vertical-align: bottom;
	}
	.bildbox .bild {
		width: 60%;
	}
	.bildbox .untertitel {
		width: 37%;
		padding-left: 3%;
		padding-bottom: 20px;
	}
	.colbig {
		position: relative;
		float: none;
		width: auto;
		margin-top: 20px;
		border: 0px solid #00b0f0;
	}
	.colsmall {
		position: relative;
		float: none;
		width: 100%;
		border: 0px solid #00b0f0;
	}
	.veranstaltungen {
		background-color: #ccdfd6;
		padding-top: 30px;
		padding-bottom: 30px;
		margin-top: 50px;
		margin-bottom: 40px;
	}
	.termine {
		width: 50%;
	}
	.colbig img, .colsmall img {
		display: block;
		width: 100%;
		height: auto;
	}
	/* ----- Zeichenformate ---------------------------------------------*/
	h1 {
		font-size: 1.6em;
		font-weight: 400;
		line-height: 120%;
		margin-bottom: 40px;
	}
	h2 {
		margin-top: 1.5em;
		margin-bottom: 0.6em;
		line-height: 130%;
		font-size: 14px;
		font-size: 1.3em;
		text-align: left;
	}

	#header p {	
		line-height: 140%;
	}
	/* Veranstaltungliste ------- */

	#page ul#termine {
		display: block;
		list-style-type: none;
		margin:0;
		padding:0;
		margin-bottom: 30px;
	}

	#page ul#termine li {
		display:inline-block;
		padding: 0;
		margin-bottom: 15px;
		width: 7.8%;
		min-width: 40px;
	}

	ul#termine a {
		display: inline-block;
		width: 100%;
		text-decoration: none;
		font-size: 0.8em;
		font-weight: bold;
		text-align: center;
		padding: 5px;
		padding-right: 9px;
		padding-left: 9px;
	}
	ul#termine a:link, ul#termine a:visited {
		color: #fff;
		background: #4e7865;
	}

	ul#termine a:hover {
		background: #0082bd;
		color: #ffffff;
	}

	table.terminliste {
		display: block;
		width: 99%;
	}
	table.terminliste tr  {
		border-top: 1px solid #fff;
	}
	table.terminliste td p {
		margin: 0;
	}

	table.terminliste td  {
		display: block;
		margin: 0;
		vertical-align: top;
		padding-bottom: 10px;
		padding-top: 10px;
	}
	table.terminliste td.date  {
		width: 100px;
		min-width: 100px;
		font-weight: 600;
	}
	table.terminliste td.date p {
		text-align: left;
	}
	table.terminliste td.veranstbild {
		width: 80%;
		max-width: 220px;
	}
	table.terminliste td.veranstbild p {
		text-align: left;
	}
	/* Responsive tabs ---------- */
	#horizontalTab {
		margin-top: 0px;
		margin-left: 0px;
	}
	#tabbutton {
		list-style-type: none;
		margin: 0;
		margin-bottom: 10px;
		padding: 0;
		width: 98%;
	}
	#tabbutton li {
		text-align: left;
		padding: 0;
		margin-bottom: 10px;
	}
	#tabbutton li a.r-tabs-anchor {
		display: inline-block;
		margin-right: 10px;
		background-color: #fff;
		color: #1e9b3b;
		text-decoration: none;
		padding: 5px;
		padding-left: 15px;
		padding-right: 15px;
		border: 0px solid #1e9b3b;
	}
	#tabbutton li a:hover {
		background-color: #1e9b3b;
		color: #fff;
	}
	#tabbutton li.r-tabs-state-active a {
		background-color: #1e9b3b;
		color: #fff;
	}
	.r-tabs .r-tabs-nav {
		margin: 0;
		padding: 0;
	}
	.r-tabs .r-tabs-tab {
		display: inline-block;
		margin: 0;
		list-style: none;
	}
	.r-tabs .r-tabs-panel {
		width: 100%;
		display: none;
		padding: 7%;
		background-color: #fff;
	}
	.r-tabs .r-tabs-accordion-title {
		display: none;
	}
	.r-tabs .r-tabs-panel.r-tabs-state-active {
		display: block;
	}
	/* Button -------------- */
	p.button {
		text-align: left;
		margin-top: 20px;
		margin-right: 0px;
		line-height: 100%;
	}

	p.button a {
		display: block;
		color: #fff;
		background-color: #497461;
		text-decoration: none;
		padding: 10px;
		padding-top: 10px;
		padding-right: 15px;
		padding-left: 15px;
		border: 1px solid #497461;
		-webkit-box-shadow: 2px 2px 2px 0 #7A7A7A;
		box-shadow: 0px 0px 2px 0 #7A7A7A;
	}
	p.button a:first-of-type {
		margin-right: 0;
		margin-bottom: 15px;
	}
	p.button a:hover {
		color: #497461;
		background-color: #fff;
		border: 1px solid #497461;
		text-decoration: none;
		-webkit-box-shadow: 2px 2px 2px 0 #7A7A7A;
		box-shadow: 0px 0px 0px 0 #7A7A7A;
	}
	p.button a.active, p.button a.aktiv {
		color: #fff;
		background-color: #497461;
		text-decoration: none;
	}
	/* Film-Einbettung ------------------ */

	.embed-container {
		position: relative;
		padding-bottom: 56.25%;
		padding-top: 30px;
		height: 0;
		overflow: hidden;
		max-width: 100%;
		height: auto;
		border: 0px solid #000;
	}
	.embed-container iframe, .embed-container object, .embed-container embed {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 100;
	}

	/* offcanvas - navi einblenden --- */
	#navirespons {
		display: block;
		position:fixed;
		top: 0;
		left: 0;
		width: 100%;
		padding-top: 5px;
		padding-left: 10px;
		padding-right: 10px;
		background-color: #0082bd;
		height: 35px;
		line-height: 35px;
		z-index: 10000;
	}
	.naveins, .navzwei {
		display: block;
	}
	p.navaus a, p.navein a {
		display: block;
		width: 95%;
		margin: 0 auto 0 auto;
		text-align: left;
		text-decoration: none;
		color: #fff;
		font-weight: normal;
		background: url(../images/navi.png);
		background-repeat: no-repeat;
		background-position: center right;
	}
	.aktiv-eins p.navein {
		display: none;
	}
	p.navaus {
		display: none;
	}
	.aktiv-eins p.navaus {
		display: block;
	}
	p.navaus a {
		background: url(../images/navi-aus.png);
		background-repeat: no-repeat;
		background-position: center right;
	}
	#navigation {
		-moz-transition: 0.3s all ease;
		-webkit-transition: 0.3s all ease;
		-o-transition: 0.3s all ease;
		transition: 0.3s all ease;
		width: 100%;
	}
	.js #navigation {
		position: fixed;
		background-color: #fff;
		right: -200%;
		width: 0%;
		top: 30px;
		z-index: 0;
		border: 0px solid red;
	}
	.js .wrapper {
		margin: 0 auto;
		float: none;
		z-index: 4000;
	}
	.aktiv-eins #navigation {
		position: absolute;
		margin: 0 auto;
		width: 100%;
		padding: 4%;
		z-index: 5000;
		right: 0;
		top: 30px;
	}
	.aktiv-eins .wrapper {display: none;
	}

}