@charset "UTF-8";
/* CSS Document */

body {
	margin: 0;
	padding: 0;
}
/* ------------------------------------------------------------- Header ------------------------------------------------------------- */
#header {
	background: rgba(0, 0, 0, 0.7);
	height: 150px;
	padding: 0px;
	margin: 0px;
	z-index: 10;
}
#logo {
	background-image: url(images/logo.png);
	left: 50px;
	width: 396px;
	height: 165px;
	position: relative;
	float: left;
}
#navigation {
	position: absolute;
	right: 200px;
	top: 84px;
	width: auto;
}
#navigation li {
	float: left;
	list-style: none outside none;
	margin: 0 18px 0 0;
	padding: 0;
	text-decoration: none;
	width: auto;
}
#navigation li a {
	color: #fff;
	text-transform: uppercase;
	font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
	text-decoration: none;
}
#navigation li a:hover {
	color: #FF3F42;
}
#button_call {
	background: url(images/call_button.png);
	width: 150px;
	height: 150px;
	position: absolute;
	right: 50px;
	top: 30px;
}
/* ------------------------------------------------------------- Allgemeine Stile für Kreise ------------------------------------------------------------- */
.circle {
	display: table-cell;
	text-align: center;
	vertical-align: middle;
	margin: 1em;
	padding: 1em;
	font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
	color: white;
	border-radius: 250px;
	text-transform: uppercase;
	position: absolute;
}
#margin_container {
	bottom: 550px;
	position: absolute;
	width: 99%;
	z-index: -1;
}
#margin_container_band {
	bottom: 250px;
	position: absolute;
	width: 99%;
	z-index: -1;
}
#circle_container {
	margin: auto;
	width: 1200px;
	position: relative;
}
#circle_container_band {
	margin: auto;
	width: 100%;
	position: relative;
}
#circle_container a, #circle_container_band a {
	text-decoration: none;
	color: #fff;
	display: table-cell;
	text-align: center;
	vertical-align: middle;
	opacity: 1!important;
}
.circle div {
	margin: 0;
	padding: 0;
}
/* ------------------------------------------------------------- Individuelle Stile für die Kreise ------------------------------------------------------------- */
		/* ========================= BAND ========================= */
.circle.band {
	width: 200px;
	height: 200px;
	background: rgba(255, 0, 0, 0.7);
	font-size: 36px;
	left: 0px;
	top: 20;
}
.band a {
	height: 200px;
	width: 200px;
}
/* ========================= AUSFLIPPEN ========================= */
.circle.ausflippen {
	width: 150px;
	height: 150px;
	background: rgba(0, 255, 155, 0.7);
	font-size: 28px;
	left: 250px;
	top: -30px;
}
.ausflippen a {
	height: 150px;
	width: 150px;
}
/* ========================= GÄSTEBUCH ========================= */
.circle.gästebuch {
	width: 250px;
	height: 250px;
	background: rgba(155, 0, 255, 0.7);
	font-size: 48px;
	left: 350px;
	top: 80px;
}
.gästebuch a {
	height: 250px;
	width: 250px;
}
/* ========================= TERMINE ========================= */
.circle.termine {
	width: 150px;
	height: 150px;
	background: rgba(100, 200, 255, 0.7);
	font-size: 28px;
	left: 550px;
	top: -60px;
}
.termine a {
	height: 150px;
	width: 150px;
}
/* ========================= FOTOS ========================= */
.circle.fotos {
	width: 200px;
	height: 200px;
	background: rgba(50, 200, 50, 0.7);
	font-size: 48px;
	left: 700px;
	top: 50px;
}
.fotos a {
	height: 200px;
	width: 200px;
}
/* ========================= PRESSE ========================= */			
.circle.presse {
	width: 100px;
	height: 100px;
	background: rgba(255, 155, 0, 0.7);
	font-size: 28px;
	left: 900px;
	top: -30px;
}
.presse a {
	height: 100px;
	width: 100px;
}


@media only screen and (max-width: 1080px) {
#logo {
	margin: auto;
	left: 0px;
	float: none;
	background-image: url(images/logo_small.png)!important;
	background: no-repeat center center;
	width: 85%!important;
	height: 85px!important;
}
#header {
	height: 200px;
}
#button_call {
	display: none;
}
#navigation {
	width: 60%!important;
	top: 5px!important;
	right: 0;
	margin: auto;
	position: relative;
	text-align: center;
	padding: 0;
}
#navigation li {
	display: inline;
	float: none;
}
#margin_container, #margin_container_band {
	width: 100%;
	position: inherit;
}
#circle_container, #circle_container_band {
	width: 300px;
}
#circle_container_band a {
	vertical-align: bottom;
}

/* ------------------------------------------------------------- Individuelle Stile für die Kreise auf mobile ------------------------------------------------------------- */
		/* ========================= BAND ========================= */
.circle.band {
	width: 100px;
	height: 100px;
	background: rgba(255, 0, 0, 0.7);
	font-size: 16px;
	left: 0px;
	top: 0px;
	
}
.band a {
	width: 100px;
	height: 100px;
}
/* ========================= AUSFLIPPEN ========================= */
.circle.ausflippen {
	width: 100px;
	height: 100px;
	background: rgba(0, 255, 155, 0.7);
	font-size: 16px;
	left: 150px;
	top: 0px;
}
.ausflippen a {
	width: 100px;
	height: 100px;
}
/* ========================= GÄSTEBUCH ========================= */
.circle.gästebuch {
	width: 100px;
	height: 100px;
	background: rgba(155, 0, 255, 0.7);
	font-size: 16px;
	left: 0px;
	top: 150px;
}
.gästebuch a {
	width: 100px;
	height: 100px;
}
/* ========================= TERMINE ========================= */
.circle.termine {
	width: 100px;
	height: 100px;
	background: rgba(100, 200, 255, 0.7);
	font-size: 16px;
	left: 150px;
	top: 150px;
}
.termine a {
	width: 100px;
	height: 100px;
}
/* ========================= FOTOS ========================= */
.circle.fotos {
	width: 100px;
	height: 100px;
	background: rgba(50, 200, 50, 0.7);
	font-size: 16px;
	left: 0px;
	top: 300px;
}
.fotos a {
	width: 100px;
	height: 100px;
}
/* ========================= PRESSE ========================= */			
.circle.presse {
	width: 100px;
	height: 100px;
	background: rgba(255, 155, 0, 0.7);
	font-size: 16px;
	left: 150px;
	top: 300px;
}
.presse a {
	width: 100px;
	height: 100px;
}
.circle {margin:0;}
	.popup_inhalt div img { width:265px; height:265px;}
	.popup_inhalt div {  float: none!important;
    text-align: center;}
}

@media only screen and (max-width: 1400px) {
#navigation {
	width: 400px;
	top: 45px;
}
}

#hintergrund {
    display:none;
    z-index:1;
    position: fixed;
    height:100%;
    width:100%;
    top:0px;
    left:0px;
    background:#000000;
}
 
#popup, #popup2, #popup3, #popup4 {
    display: none;
    z-index: 2;
    position: relative;
    max-width:1000px;
    top: 20%;
    font-family: Verdana, Geneva, sans-serif;
    font-size: 14px;
    color: #000;
	margin:auto;


}
 
div.schliessen, div.schliessen2, div.schliessen3, div.schliessen4 {
    position: relative;
    height: 30px;
    width: 30px;
    left: 0px;
    bottom: 24px;
    background: url("img/close.png") no-repeat scroll 0 0 transparent;
    float: right;
    cursor: pointer;
}
 
.popup_inhalt {
    margin: 8px 14px;

}
.popup_inhalt img {

	border:1px solid #fff;
	box-shadow:0 0 20px black;}