@font-face { font-family: 'coming-soon'; src: url('ComingSoon.ttf') format('truetype'); }

/* Small screens (default) */
html { font-size: 100%; }

/* Medium screens (640px) */
@media (min-width: 40rem) { 
  html { font-size: 112%; }
}

/* Large screens (1024px) */
@media (min-width: 64rem) { 
  html { font-size: 120%; }
}


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

body {  background-image:url(imgs/bg-body.jpg); margin:0px; padding:0px; text-align:center; font-family:'coming-soon'; }

div.main { width:100%; max-width:980px; margin:0px auto 0px auto; padding:0px; background-color: #912226; background-image:url(imgs/bg-main.gif); }

div#kopfzeile,div#fusszeile { width:100%; height:10px; margin:0px; padding:0px; background-color:#912226; }

img#titel { margin:0px auto 0px auto; width:calc(100% - 38px); max-width:942px; height:auto; }
img#content { margin:10px 30px 10px 0px; width:100%; max-width:265px; height:auto; max-height:464px; float:left; clear:both; }
img#content_small { margin:10px 30px 10px 0px; width:100%; max-width:120px; height:auto; max-height:160px; float:left; clear:both; }

a { color:yellow; }
ul, li { list-style-type: none; }

div#navizeile {
	width:calc(100% - 38px);
	max-width:942px;
	margin:20px auto 30px auto;
	text-align:left;
	min-height: 2em;
	background-image:url(imgs/bg-navi.jpg);
	background-position: bottom;
	position:relative;
}

#spaceholder {
	background-image:url(imgs/bg-navi.jpg);
	background-position: bottom;
	display: block;
	padding: 0.5em;
	line-height: 1em;
	font-size: 1em;
	float: left;
	text-decoration: none;
	visibility: hidden;
}
#spaceholder {
	width: auto;
}

#navizeile:after {
content:".";
display:block;
height:0;
font-size:0;
clear:both;
visibility:hidden;
}

#navipunkte ul {
	padding:0px;
	margin:0px;
	list-style-type:none;
}
#navipunkte li {
	list-style-type: none;
	float: left;
	color: #ffff00;
}
#navipunkte a {
	display: block;
	line-height: 1em;
	width: 100%;
	padding: 0.5em;
	font-size: 1em;
	text-decoration: none;
	color: #ffff00;
	background-image:url(imgs/bg-navi.jpg);
	background-position: bottom;
}

#navipunkte a:hover {
	color: white;
}

.menue-button {
	display: none;
}

div#flex_container {
       display: -webkit-box;
       display: -moz-box;
       display: -ms-flexbox;
       display: -webkit-flex;
       -webkit-display: flex;
       display: flex;
       -webkit-flex-direction: row;
       flex-direction: row;
}


div.content {
       display:inline-block;
       float:right;
       -webkit-box-flex: 2;
       -moz-box-flex: 2;
       -webkit-flex: 2;
       -ms-flex: 2;
       flex: 2;
       order:2;
       margin:0px 24px 20px 19px;
       padding:10px 45px 20px 45px;
       background-color:#ffffff;
       box-shadow:5px 5px 5px #8c8c8c;
       font-size:1em;
       font-weight:bold;
       color:#9f0039;
       text-align:left;
}

div.content a { color:#9f0039; }


div.content_title_bg { margin:10px auto 30px auto; padding-left:20px; background-color:#731b20; }
div.content_title { background-color:#413317; font-size:1.5em; line-height:1.8em; font-weight:bold; color:#ffffff; text-align:left; border-left:1px solid white; padding-left:20px; }

div.tourdates_container {
       display:inline-block;
       -webkit-box-flex: 1;
       -moz-box-flex: 1;
       -webkit-flex: 1;
       -ms-flex: 1;
       flex: 1;
       order:1;
       margin:0px 24px 30px 19px;
}

.end_content { clear:both; }

div.tourdates { padding:10px; border-width:5px; border-color:black; border-style:double; border-radius:2em; box-shadow:5px 5px 5px #8c8c8c; font-size:0.8em; color:#000000; background-color:#D28C78; font-family:'coming-soon'; text-align:left; }
div.tourdates a { color:#000000; }


p#copyright { margin-top:20px; margin-bottom:20px; font-size:0.7em; font-family:Arial, Helvetica, sans; }

p#copyright:before {
content:".";
display:block;
height:0;
font-size:0;
clear:both;
visibility:hidden;
}
p#copyright:after {
content:".";
display:block;
height:0;
font-size:0;
clear:both;
visibility:hidden;
}


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

#navipunkte a {
	line-height: 1.8vw;
	font-size: 1.8vw;
}

}



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



img#titel { width:100%; width:calc(100% - 38px); }





.menue-button {
	display: block;
	position:absolute;
	top: 0px;
	right: 0px;
	width: 100%;
	line-height: 1em;
	padding: 0.5em;
	font-size: 1em;
	text-align: right;
	text-decoration: none;
	color: yellow;
	background-image:url(imgs/bg-navi.jpg);
	background-position: bottom;
}

#navipunkte li {
	width: 100%;
}

#spaceholder {
	width: 100%;
}

#navipunkte {
	display: none;
}

.menue-button:hover {
	color: white;
}

#navizeile:target #navipunkte {
	display: block;
}
#navizeile:target .open {
	display: none ; 
}

div#flex_container {
       -webkit-display: flex;
       display: flex;
       -webkit-flex-direction: column;
       flex-direction: column;
}

div.content { order: -1; }


}