body {background: #bde3ed;
      padding:1em;
      margin:0px;
}
html {
	font-size: 16px;
	font-size: 1rem;
	}

@font-face {
    font-family: 'cabinsketchregular';
    src: url('fonts/cabinsketch-regular-webfont.eot');
    src: url('fonts/cabinsketch-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/cabinsketch-regular-webfont.woff2') format('woff2'),
         url('fonts/cabinsketch-regular-webfont.woff') format('woff'),
         url('fonts/cabinsketch-regular-webfont.ttf') format('truetype'),
         url('fonts/cabinsketch-regular-webfont.svg#cabinsketchregular') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'CandelaBook';
    src: url('CandelaBook-webfont.eot');
    src: url('CandelaBook-webfont.eot?#iefix') format('embedded-opentype'),
         url('CandelaBook-webfont.woff') format('woff'),
         url('CandelaBook-webfont.ttf') format('truetype'),
         url('CandelaBook-webfont.svg#CandelaBook') format('svg');
    font-weight: normal;
    font-style: normal;

}
img {
	max-width: 100%;
	height: auto;
}
* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}
.clearfix {
  overflow: auto;
}
.container {
  position: relative;
}
/*
.vertical-container {
  height: 300px;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
          align-items: center;
  -webkit-justify-content: center;
          justify-content: center;
}
*/
a.mail {color: #1a1a1a;
   text-decoration: none;
}
a.mail:hover {color: #1a1a1a;
   text-decoration: underline;
}
.box1 {
	display: inline;
}
.box2 {
  display: inline-block;
}
#wrapper {
    border: 1px solid #000;
    margin: 0 auto;
    background-color: #ffffff;
    position: relative;
	padding-left: 2em;
    overflow: hidden;
}
#zeile-logo {
	clear: both;
	width: 100%;
}

#logo {
	float: left;
	position: absolute;
}

#vogel-logo {
    position: relative;
    left: 23px;
    margin: 0px;
    top: 39px;
}
a.logoschrift {
	font-family: "cabinsketchregular", serif;
	padding: 5px; 
	font-size: 4.5rem; 
	/*border: 3px solid #1a1a1a;*/
	color: #1a1a1a;
	float: left;
	text-decoration: none;
}
#stapfenoben1 {
    background: url(img/stapfen-oben.png) no-repeat 0 0;
    left: 450px;
    top: 65px;
    width: 555px;
	height: 150px;
	position: relative;

}
#stapfenoben2 {
    background: rgba(0, 0, 0, 0) url("img/stapfen-gerade.png") no-repeat scroll 0 0;
    height: 167px;
    position: absolute;
    top: 176px;
    width: 76px;
}
#zeile-navigation {
	width: 100%;
	clear: both;
}
.navischrift {
	font-family: "cabinsketchregular", serif;
	padding: 5px; 
	font-size: 2.5rem; 
	/*border: 3px solid #1a1a1a;*/
	color: #1a1a1a;
	float: left;	
}
#main-navi {
	width: 90%;
}
ul.flex li {
    display: block;
    flex-grow: 1;
    margin: 0;
    padding: 0;
    position: relative;
}
#main-navi ul {
    left: 75px;
    top: 10px;
    padding: 0;
    margin: 0;
    position: relative;
    width: 80%;
    text-align:justify;
    display: block;
}
ul.flex li a {
    height: auto;
    margin: 0px 40px 0px 0px;
    white-space: normal;
    text-decoration: none;
}
#main-navi li {
    list-style-type: none;
    margin: 0px;
    padding: 0px;
}

#main-navi li a:hover, li ul li a:hover {
	color: #bb231c;
}
a.active {
	color: #bb231c;
}
#zeile-content {
	clear:both;
    position: relative;
}
#content {
clear:both;
width: 88%;
position: relative;
left: 3em;
overflow: auto;
font-family: "Courier", serif;
font-size: 1.1em;
line-height: 1.5;
color: #1a1a1a;
padding: 2em 1em 0 1em;
	/*background-color: #bde3ed;*/
}
.gedicht {
	font-size:80%;
}
h1 {
	 font-family: "Courier", serif;
	 color: #bb231c;
	 line-height: 1em;
	 margin: 5px 0;
	 padding: 5px 0;
}
.sophie {
	float: right; 
	border:1px solid #3e3e3e;
        margin: 0 0 3em 3em;
}

/*FOOTER*/
#footer {
	width:100%;
	margin-bottom:40px;
}
#footer-oben{
	width: 100%;
	clear:both;
}
#footer-rechts{
	float:none;
}
#footer-links{
	float:left;
}
#vogel-footer {
    position: relative;
    margin: 0px;
    float:left;
}
#vogel-footer2 {
    position: relative;
	display: table;
	left: 1em;
}
#gedicht {
    float: right;
    margin: 1em;
}
#uebermich{
    float: right;
    margin: 10px;
}
ul.uebermich {
	margin:0;
	padding:0;
}
ul.kontakt {
	display: table;
	margin:-14px 0 0 0;
	padding: 0;
}
ul.nostyle li {
    list-style-type: none;
}
a.link1-footer {
	float: left;
	border: 1px solid #3e3e3e;
	text-decoration:none;
}
a.link1-footer:hover, a.link2-footer:hover{
	color:#bb231c;
	border: 1px solid #bb231c;
}
a.link2-footer {
	float: left;
	border: 1px solid #3e3e3e;
	text-decoration:none;
	margin: 0px;
}
.vogel-schlaeft {
	float: left;
}
.stapfen-mitte {
	float: left;
}
.stapfen-zwei {
	margin: -10px -6px 0px 200px;
}

/* tablet portrait */
@media only screen and (min-width: 760px), {
    #vogel-navi {float: right; display: none;}
}
/* tablet landscape */
@media only screen and (min-width: 1280px) {
    #vogel-navi {float: right; display: none;}
}
/* smartphone landscape */
@media screen and (max-width:759px) {
    nav li {display: inline;}
    #vogel-navi {float: right; display: inline;}
    .stapfen-mitte {display:none;}
	#wrapper {padding:0;}
	#content {padding:0; left: 1em;}
    /*#content {position: relative; left: 5px; padding: 0px 5px;}*/
    #logo {left: 3em;}
    #footer-oben{display:none;}
	.navischrift {font-size: 2rem; }
	#main-navi ul {top:0px;}
}
/* smartphone portrait */
@media screen and (max-width:479px) {
    #wrapper {max-width:99%; padding:0;}
    a.logoschrift {font-size: 3rem;}
    .vogel-schlaeft {display:none;}
    .stapfen-zwei {display:none;}
    #footer-links {clear:both;}
    a.link2-footer {clear:both;}
	#content {padding:0; left: 1em;}
    /*#content {position: relative; left: 5px; padding: 0px 5px;}*/
    #logo {left: 1em;}
    #vogel-logo {left: 8px; top: 31px;}
    .sophie {float: none;}
    #footer-oben{display:none;}
	.navischrift {font-size: 2rem; }
	#main-navi ul {top:0px;}
}