@font-face { font-family: 'Lato';
             src: url('/assets/font/Lato-Regular.ttf') format('truetype'); }
@font-face { font-family: 'Lato';
             src: url('/assets/font/Lato-Bold.ttf') format('truetype');
			 font-weight: bold;
			 }
@font-face { font-family: 'Lato';
             src: url('/assets/font/Lato-Italic.ttf') format('truetype');
			 font-style: italic;
			 }
@font-face { font-family: 'Lato';
             src: url('/assets/font/Lato-BoldItalic.ttf') format('truetype');
			 font-weight: bold;
			 font-style: italic;
			 }


body {
	font-family: Lato;
	scroll-behavior: smooth;
	text-align:center;
}

span {font-family: Lato;}
.it  {font-style: italic;}
.bo  {font-weight: bold;}

* {
  box-sizing: border-box;
}

img{
max-width: 100%;
}

/* Wrapper f�r die gesammte Seite*/
#wrapper{
	max-width: 800px;
	margin: auto;
}

/* Style the header */
#header {
	background-color: #f1f1f1;
	position: -webkit-sticky;
	position: sticky;
	margin-top:10px;
	margin-bottom: 10px;
}
/* leerzeile nach dem header*/
#header:after {
  content: "";
  display: table;
  clear: both;
}

/*Header links*/
#title{
	max-width:25%;
	float:left;
	background-color: #f1f1f1;
}

#titellogo{
	width:30px;
}

/*Header links (Men�)*/
#menu {
	background-color: #f1f1f1;
	top:0px;
	max-width:75%;
	float:right;
}

/*Hauptmen�*/
ul#navigation {
	margin: 0px;
    padding: 0px;
	list-style-type: none;
}

ul#navigation li {
	padding: 0px;
	margin: 0px;
	display: inline;
}

ul#navigation li a:link {
	border: 1px solid #000;
	background-color: #CCCCCC;
	padding: 2px 5px 2px 5px;
	font-size: 12px;
	color: #000;
	text-decoration: none;
}

ul#navigation li a:hover {
	border: 1px solid #000;
	background-color: #333333;
	padding: 2px 5px 2px 5px;
	color: #fff;
}

/*Content wrapper*/
.content{
	padding-top:75px;
}

/* Create three unequal columns that floats next to each other */
.column {
  float: left;
  padding: 10px;
}

/* Left and right column */
.column.side {
  width: 25%;
}

/* Middle column */
.column.middle {
  width: 50%;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Footer*/
#foot{
  background-color: #f1f1f1;
}

.foot {
  background-color: #f1f1f1;
  float: left;
  padding: 10px;
}

.foot.lside{
	text-align: left;
	width: 33%;
}

.foot.middle{
	text-align: center;
	width: 33%;
}

.foot.rside{
	text-align: right;
	width: 33%;
}

/*Footermen�*/
ul#footmenu{
	list-style-type: none;
}

ul#footmenu li{
}

ul#footmenu li a:link{
	text:black;
}

ul#footmenu li a:hover{

}

/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
@media (max-width: 600px) {
  .column.side, .column.middle {
    width: 100%;
  }
}