/* CSS Document */
@import url('https://fonts.googleapis.com/css?family=Titillium+Web:400,600');

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin:0;
	padding:0;
	border:0;
    font-size:100%;
    -webkit-text-size-adjust:100%;
    -ms-text-size-adjust:100%;
	font:inherit;
	vertical-align:baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display:block;
}
body {
	line-height:1;
}
ol, ul {
	list-style:none;
}
blockquote, q {
	quotes:none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content:'';
	content:none;
}
table {
	border-collapse:collapse;
	border-spacing:0;
}

*,
*:after,
*:before {
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
}




/* MISCELLANEOUS*/

html {
	-webkit-text-size-adjust:none;
    -webkit-tap-highlight-color:rgba(0,0,0,0);
	-ms-tap-highlight-color:rgba(0,0,0,0);
	
	-ms-overflow-style:-ms-autohiding-scrollbar;
	
	-ms-touch-action: manipulation;
	touch-action: manipulation;
}

body {
	margin:0px;
	padding:0px;
	font-family:'Titillium Web', Arial, sans-serif;
	font-weight:400;
	font-size:1.1em;
	font-style:normal;
	line-height:1.5em;
	color:rgb(30,30,30);
	text-align:left;
	background:rgba(255,255,200,0.3) !important;
	
	-webkit-font-smoothing:antialiased;
	font-smoothing:antialiased;
	
    -webkit-tap-highlight-color:rgba(0,0,0,0);
	
	-webkit-hyphens:auto;
	-moz-hyphens:auto;
	-ms-hyphens:auto;
	hyphens:auto;
}

a, img, a img, h1, *:focus {
	outline:none;
	outline-style:none;
	outline-color:invert;
	border:none;
	background-color:transparent;
}

img {
	display:block;
}

h1 {
	font-size:1.6em;
	line-height:1.4em;
	font-weight:400;
	text-align:left;
	padding:0;
	margin:1.5em 0 1em 0;
}

h2 {
	font-size:2.0em;
	line-height:1.2em;
	font-weight:400;
	text-align:left;
	padding-bottom:0.5em;
	margin-bottom:1em;
	border-bottom:1px solid rgba(205,205,205,1);
}

h3 {
	font-size:1.2em;
	line-height:1.4em;
	font-weight:400;
	text-align:left;
	padding:0;
	margin:0 0 1em 0;
}

.small {
	font-size:0.8em;
}

.top {
	margin-top:0px !important;
}

.right {
	margin-right:0px !important
}

.text_left {
	text-align:left !important;
}

.red {
	color:rgb(180,20,20);
}

.yellow {
	color:rgb(255,178,0);
}

.uppercase {
	text-transform:uppercase;
}

.bold {
	font-weight:600;
}

.no_border {
	border:none !important;
}

.null {
	margin:0 !important;
	padding:0 !important;
}

.clear {
	position:relative;
	display:block;
	clear:both;
	width:100%;
	height:1px;
	margin:0;
}

.spacer {
	height:3em;
}

.line {
	display:block;
	width:100%;
	height:1px;
	margin:10% 0 5% 0;
	background:rgb(205,205,205);
}

.table {
	display:block;
	float:left;
	width:110px;
}
.table_big {
	display:block;
	float:left;
	width:30%;
}

ul.count {
    margin:2em 0;
    padding-left:30px;
}
ul.count li {
	list-style:square;
	list-style-position:outside;
	text-align:left;
}

li.list {
	padding-bottom:15px;
	text-indent:0px;
	margin-left:50px;
	text-align:left;
	list-style-position:outside;
	list-style-image:url(../graphics/list_style.png);
}



/* MAIN */

.centering {
    position:relative;
	width:80%;
	height:auto;
	margin:2% auto 0 auto;
	padding:0;
	z-index:50;
}



/* HEADER */

.logo {
	display:block;
    position:relative;
	float:left;
	margin:0 0 5% 0;
	padding:0;
	width:35%;
	height:auto;
}
.logo img {
	width:100%;
	height:100%;
	max-width:380px;
	max-height:128px;
}

#menuWrapper {
	position:relative;
	display:block;
	float:left;
	width:60%;
	height:2.8em;
	margin:0 0 0 5%;
	padding:0;
}

.menu {
    position:relative;
	display:block;
	float:left;
	width:23%;
	height:2.8em;
	margin:0 1%;
	font-size:1.1em;
	line-height:1.3em;
	color:rgb(30,30,30);
	text-align:center;
	text-decoration:none;
	text-transform:uppercase;
	border-bottom:2px solid rgb(240,240,240);

	-webkit-transition:all 500ms ease;
	-moz-transition:all 500ms ease;
	-o-transition:all 500ms ease;
	transition:all 500ms ease;
	
	background-color:none;
	
	z-index:55;
}
.menu:hover, .menu.active {
	color:rgb(180,20,20);
	border-bottom:2px solid;
	border-bottom-color:rgb(150,150,150);
}



/* BOXES */

.box_welcome {
	position:relative;
	float:left;
	width:30%;
	height:500px;
	margin:0 5% 0 0;
	padding:3%;
	-moz-border-radius:25px;
	-webkit-border-radius:25px;
	border-radius:25px;
	box-shadow:0px 0px 7px rgb(195,195,195);
	-moz-box-shadow:0px 0px 7px rgb(195,195,195);
	-webkit-box-shadow:0px 0px 7px rgb(195,195,195);
	background-position:center center;
	background-repeat:no-repeat;
	-webkit-background-size:cover;
	-moz-background-size:cover;
	-o-background-size:cover;
	background-size:cover;
	overflow:hidden;
}
.box_welcome_overlay {
	position:absolute;
	top:100%;
	left:0px;
	width:100%;
	height:100%;
	margin:0;
	padding:10%;
	background:rgba(30,30,30,0.75);
	display:none;
	overflow:hidden;
}

.box_welcome_overlay ul {
	display:block;
	width:100%;
	height:100%;
	margin:0;
	padding:0;
}

.box_welcome_overlay li {
	display:block;
	width:100%;
	height:33.3%;
	margin:0 0 1px 0;
	padding:0;
	background-color:rgb(140,0,0);
	transition:background-color 300ms ease;
	-moz-transition:background-color 300ms ease; 
	-webkit-transition:background-color 300ms ease; 
	-o-transition:background-color 300ms ease;
	-ms-transition:background-color 300ms ease; 
}
.box_welcome_overlay li a {
	display:block;
	width:100%;
	height:100%;
	margin:0;
	padding:5% 8%;
	font-size:1.2em;
	color:rgb(255,255,255);
	text-align:center;
	text-decoration:none;
	text-transform:uppercase;
	transition:color 300ms ease;
	-moz-transition:color 300ms ease; 
	-webkit-transition:color 300ms ease; 
	-o-transition:color 300ms ease;
	-ms-transition:color 300ms ease;
}
.box_welcome_overlay li a span {
	display:block;
	padding:3% 0;
	font-size:0.7em;
	line-height:1.3em;
	text-transform:none;
}
.box_welcome_overlay li:hover, .box_welcome_overlay li.selected {
	background-color:rgb(255,178,0);
}
.box_welcome_overlay li:hover > a, .box_welcome_overlay li.selected > a {
	color:rgb(30,30,30);
}

.box_welcome_overlay li.hl_menu_box_welcome {
	display:block;
	width:100%;
	margin:0 0 1px 0;
	padding:1.2% 5%;
	color:rgb(130,130,130);
	text-transform:uppercase;
	font-weight:400;
	background-color:rgb(240,240,240); 
}

.innen {
	background-image:url(../gallery/innenanlagen.jpg);
}
.aussen {
	background-image:url(../gallery/aussenanlagen.jpg);
}
.weitere {
	background-image:url(../gallery/weitereanlagen.jpg);
}

.hl_box_welcome {
	position:absolute;
	bottom:0;
	left:0;
	width:100%;
	font-size:1.5em;
	line-height:1.5em;
	color:rgb(255,255,255);
	text-transform:uppercase;
	text-align:center;
	padding:0.5em 0;
	background:rgb(100,100,100);
}

.main_content {
    position:relative;
	width:100%;
	height:auto;
	margin:3% auto 10% auto;
	padding:3% 3% 5% 3%;
	text-align:justify;
	-moz-border-radius:8px;
	-webkit-border-radius:8px;
	border-radius:8px;
	background:rgba(255,255,255,1);
	box-shadow:0px 0px 7px rgb(195,195,195);
	-moz-box-shadow:0px 0px 7px rgb(195,195,195);
	-webkit-box-shadow:0px 0px 7px rgb(195,195,195);
	z-index:55;
}

.pic_header {
	position:relative;
	display:block;
	width:100%;
	height:410px;
	margin:0;
	background-position:center center;
	background-repeat:no-repeat;
	
	-webkit-border-radius:30px;
	-moz-box-border-radius:30px;
	border-radius:30px;
	
	overflow:hidden;
}
#pic_404 {
	background-color:rgb(137,37,35);
	background-image:url(../graphics/404.jpg);
	-webkit-background-size:contain;
	-moz-background-size:contain;
	background-size:contain;
}
#pic_ueber_uns {
	background-color:rgba(255,255,200,0.3) !important;
	background-image:url(../graphics/ueber_uns.jpg);
	-webkit-background-size:cover;
	-moz-background-size:cover;
	background-size:cover;
}

.pic_content {
	display:block;
	float:left;
	width:250px;
	height:250px;
	margin:0 5em 5em 3em;
	box-shadow:0px 0px 7px rgb(195,195,195);
	-moz-box-shadow:0px 0px 7px rgb(195,195,195);
	-webkit-box-shadow:0px 0px 7px rgb(195,195,195);
}
.preview {
	display:block;
	width:120px;
	height:100px;
	margin:0 5em -8em 0;
}

.thumbs {
	display:block;
	float:left;
	width:auto;
	height:150px;
	margin:30px;
	padding:0px;
	border:10px solid rgb(255,255,255);
	box-shadow:0px 0px 7px rgb(195,195,195);
	-moz-box-shadow:0px 0px 7px rgb(195,195,195);
	-webkit-box-shadow:0px 0px 7px rgb(195,195,195);
}

.hidden_gallery {
	display:none;
}

.videoWrapper { 
	position:fixed;
	top:0;
	left:0;
	margin:0;
	padding:0;
	width:100%;
	height:100%;
	background:rgba(50,50,50,0.9);
	z-index:9998;
	
	display:none;
}
video { 
	position:relative;
	top:50%;
	left:50%;
	width:60%;
	max-width:1200px;
	height:auto;
	text-align:center;
	z-index:9999;

	display:none;
	
	-webkit-transform:translate(-50%, -50%);
	transform:translate(-50%, -50%);
}
video::-webkit-media-controls-fullscreen-button {
	display:none !important;
}
video::-moz-media-controls-fullscreen-button {
	display:none !important;
}
video::media-controls-fullscreen-button {
	display:none !important;
}

.videoCloseBtn {
	position:fixed;
	top:2.5em;
	right:2.5em;
	width:3em;
	height:3em;
	text-align:left;
	background-color:rgba(0,0,0,0);
	border:2px solid rgb(255,255,255);
	
    -webkit-border-radius:50%; 
    -moz-border-radius:50%;
    border-radius:50%;
	
	z-index:10002;
}
.videoCloseBtn:hover, .videoCloseBtn:focus {
	background-color:rgba(0,0,0,0);
	cursor:pointer;
}
.videoCloseBtn:before, .videoCloseBtn:after {
	position:absolute;
	width:2px;
	background-color:rgb(255,255,255);
	content:'';
	top:20%;
	bottom:20%;
	left:50%;
	margin-left:-1px;
}
.videoCloseBtn:before {
	-webkit-transform:rotate(45deg);
	-ms-transform:rotate(45deg);
	transform:rotate(45deg);
}
.videoCloseBtn:after {
	-webkit-transform:rotate(-45deg);
	-ms-transform:rotate(-45deg);
	transform:rotate(-45deg);
}

.column_content {
	display:block;
	float:left;
	width:60%;
	height:auto;
	margin:0;
	padding:0;
	text-align:justify;
}

/* FIX FOR EASYTABS BORDER-BOX-MODEL, MARGIN */
.no-border-box {
	box-sizing:content-box !important;
	-webkit-box-sizing:content-box !important;
	-moz-box-sizing:content-box !important;
	width:94% !important;
}

.content > .clear:last-child {
	margin:0;
	padding:0;
}

.main_content a:link, .main_content a:visited {
	color:rgb(180,20,20);
	text-decoration:none;
}
.main_content a:hover {
	color:rgb(255,178,0);
	text-decoration:none;
}

.column_left {
	display:block;
	float:left;
	width:45%;
	height:auto;
	margin:0 5% 0 0;
	padding:0 0 3em 0;
	text-align:left;
}

.column_right {
	display:block;
	float:left;
	width:50%;
	height:auto;
	margin:0;
	padding:0 0 2em 0;
	text-align:left;
}

.scrolltop {
	display:block;
	float:right;
	text-align:right;
	margin:2em 0 0 0;
	padding:1em;
	text-transform:uppercase;
	background:rgb(245,245,245);
}


/* MAP */

#iframe_map {
	display:block;
	margin:5% 0;
	padding:0;
	width:100%;
	height:480px;
	border:0;
	z-index:500;
}



/* ACCORDION */

.hl_accordion {
	display:block;
	margin:0 0 1em 0;
	padding:0.5em 1em;
	border-left:2px solid rgba(205,205,205,1.0);
	transition:all 500ms ease;
	-webkit-transition:all 500ms ease; 
	-moz-transition:all 500ms ease; 
	-o-transition:all 500ms ease;
}
.hl_accordion:hover, .active_accordion {
	background:rgba(205,205,205,1.0);
	color:rgb(255,255,255);
	border-left:2px solid rgba(205,205,205,1.0);
	cursor:pointer;
}

.content_accordion {
	padding:0 1.2em !important;
	margin:0;
	display:none;	
}
.spacer_accordion {
	display:block;
	width:100%;
    height:2px;
	margin:2em 0;
    background-color:rgb(200,200,200);
}



/* KONTAKT-FORMULAR */

.input {
	display:block;
	width:100%;
	height:2.6em;
	margin:0 0 1.5em 0;
	padding:0px 10px;
	font-family:'Titillium Web', Arial, sans-serif;
	color:rgb(200,200,200);
	font-size:1.0em;
	font-weight:400;
	line-height:2.6em;
	-webkit-font-smoothing:antialiased;
	background:rgb(255,255,255);
	border:1px solid rgba(205,205,205,1);
	transition:all 500ms ease;
	-webkit-transition:all 500ms ease; 
	-moz-transition:all 500ms ease; 
	-o-transition:all 500ms ease;
}

.textarea {
	display:block;
	width:100%;
	height:150px;
	margin:0 0 1.5em 0;
	padding:15px 10px;
	font-family:'Titillium Web', Arial, sans-serif;
	color:rgb(200,200,200);
	font-size:1.0em;
	font-weight:400;
	line-height:1.5em;
	-webkit-font-smoothing:antialiased;
	background:rgb(255,255,255);
	border:1px solid rgba(205,205,205,1);
	transition:all 500ms ease;
	-webkit-transition:all 500ms ease; 
	-moz-transition:all 500ms ease; 
	-o-transition:all 500ms ease;
	overflow-x:hidden;
	overflow-y:auto;
}

.input:focus, .textarea:focus {
	color:rgb(55,58,58);
	background:rgb(255,255,255);
	box-shadow:2px 2px 0.3em rgba(0,0,0,0.2);
	-webkit-box-shadow:0 0 0.3em rgba(0,0,0,0.2);
	-moz-box-shadow:0 0 0.3em rgba(0,0,0,0.2);
}

#label-datenschutz {
    display:block;
    margin:1.5em 0;
    line-height:1.4em;
    font-size:0.8em;
    color:rgb(100,100,100);
}

#button_senden {
	width:100%;
	height:2.6em;
	margin:0;
	padding:0px 30px;
	font-family:'Titillium Web', Arial, sans-serif;
	color:rgb(255,255,255);
	font-size:1.0em;
	line-height:2.6em;
	text-transform:uppercase;
	background:rgb(255,178,0);
	border:none;
	transition:all 500ms ease;
	-webkit-transition:all 500ms ease; 
	-moz-transition:all 500ms ease; 
	-o-transition:all 500ms ease;
}
#button_senden:hover {
	background:rgb(205,205,205);
	color:rgb(30,30,30);
	cursor:pointer;
}



/* FOOTER */

#footer {
	position:relative;
	display:block;
	width:80%;
	height:auto;
	margin:10% auto 2% auto;
	padding:1em 0;
	font-size:0.9em;
	line-height:1.2em;
	color:rgb(255,255,255);
	background:url(../graphics/grafik_footer.png) center right no-repeat rgb(140,0,0);
	-moz-border-radius:8px;
	-webkit-border-radius:8px;
	border-radius:8px;
	box-shadow:0px 0px 7px rgb(195,195,195);
	-moz-box-shadow:0px 0px 7px rgb(195,195,195);
	-webkit-box-shadow:0px 0px 7px rgb(195,195,195);
}

.ft_content {
	float:left;
	width:20%;
	height:auto;
	margin:0 0 0 5%;
	padding:1em 0;
	text-align:left;
}

.hl_footer {
	display:block;
	margin:0 0 1em 0;
	font-weight:600;
	text-transform:uppercase;
}

#footer_adresse {
	display:block;
	width:90%;
	margin:1em auto 2em auto;
	padding:2em 0 0 0;
	font-size:1.2em;
	line-height:1.4em;
	text-align:center;
	border-top:1px solid rgb(205,205,205);
}

#footer a:link, #footer a:visited {
	color:rgb(255,255,255);
	text-decoration:none;
}
#footer a:hover {
	color:rgb(255,178,0);
	text-decoration:none;
}



/* Media queries */

@media
	only screen
		and (max-width: 1280px)
		and (min-width: 1025px)
{ 
body {
	font-size:1.0em;
}
}



@media 
	only screen 
		and (min-device-width: 668px) 
    	and (max-device-width: 1024px) 
    	and (orientation: landscape),
	
	only screen 
    	and (max-width: 1024px)
{
.logo {
	width:30%;
}
#menuWrapper {
	width:65%;
}
h1 {
	font-size:1.3em;
	line-height:1.4em;
	margin:1.5em 0 1em 0;
}

.box_welcome {
	width:100%;
	height:500px;
	margin:0 auto 5% auto;
	padding:3%;
}
.box_welcome_overlay li a {
	padding:2% 5%;
}

.spacer {
	height:1.5em;
}
.column_content {
	width:40%;
}

video { 
	width:80%;
}
}



@media 
	only screen 
    	and (min-device-width: 668px) 
    	and (max-device-width: 768px) 
    	and (orientation: portrait),
	
	only screen 
    	and (max-width: 768px)
{
.centering {
	width:96%;
}

#footer {
	width:96%;
	margin:10% auto 2% auto;
	padding:1em 0;
}

.ft_content {
	width:45%;
}

.column_left {
	width:100%;
}

.column_right {
	width:100%;
}

#iframe_map {
	height:400px;
}
}



@media 
	only screen 
    	and (min-device-width: 320px) 
    	and (max-device-width: 667px) 
    	and (orientation: landscape),
		
	only screen 
    	and (max-width: 667px)
{
h2 {
	font-size:1.6em;
	line-height:1.2em;
}

.logo {
	float:none;
	margin:0 auto 5% auto;
	padding:0;
	width:100%;
	height:auto;
}
.logo img {
	width:100%;
	height:100%;
	margin:0 auto;
	max-width:auto;
	max-height:auto;
}

#menuWrapper {
	float:none;
	width:100%;
	height:auto;
	margin:0 0 2em 0;
}

.menu {
	width:100%;
	height:2.5em;
	margin:0;
	line-height:2.5em;
	border-bottom:none;
}
.menu:hover, .menu.active {
	color:rgb(255,255,255);
	border-bottom:none;
	border-bottom-color:none;
	background-color:rgb(140,0,0);
}

.column_content {
	width:100%;
	height:auto;
	text-align:justify;
}

.pic_content {
	float:none;
	width:70%;
	height:auto;
	margin:0 auto 3em auto;
}

.ft_content {
	width:45%;
}
}



@media 
	only screen 
    	and (min-device-width: 320px) 
    	and (max-device-width: 667px) 
    	and (orientation: portrait),
		
	only screen 
    	and (max-width: 667px)
{
.ft_content {
	width:45%;
}	
}



@media 
	only screen 
    	and (min-device-width: 320px) 
    	and (max-device-width: 667px) 
    	and (orientation: portrait)
{
	
}



/*
rot schrift:		#b41414, rgb 180,20,20
rot:				#780000, rgb 140,0,0
gelb:				#ffb200, rgb 255,178,0
hellgrau:			#dddede, rgb 221,222,222
schwarz:			#1e1e1e, rgb 30,30,30
*/