body {
	font-size:100%;
	margin:0em;
	padding:0em
}


* {
  box-sizing: border-box;
}

#flex-container {
   display: -webkit-flex;
   display: -ms-flex;
   display: flex;
   -webkit-flex-wrap: wrap;
   -ms-flex-wrap: wrap;
   flex-wrap: wrap;
}
.panel-test2 {
  display: -webkit-flex; 
  display: -ms-flexbox; 
  display: flex;

  width: 23%;
  padding: 10px;
  float: left;
  margin: 10px;
  border: 1px solid #aaa;
}

.auto-style1 {
font-size: xx-large;
	font-weight: normal;
}


.auto-style5 {
	border-width: 0px;
}



.test {
  background: gray;
  width: 4000px;
    padding-bottom:75.25%;
   overflow: hidden;
}

.menu {
  float: left;
  width: 20%;
}
.menuitem {
  padding: 8px;
  margin-top: 7px;
  border-bottom: 1px solid #f1f1f1;
}
.main {
  float: left;
  width: 80%;
  padding: 0 20px;
  overflow: hidden;
}
.right {
    float: left;
  width: 20%;
  padding: 10px 15px;
  margin-top: 7px;
}

.foto {
  float: left;
  width: 18%;
  padding: 10px 20px;
  overflow: hidden;
}


@media only screen and (max-width:800px) {
  /* For tablets: */
  .menu {
    width: 52%;
    padding: 0;
  }
  .main {
    width: 80%;
    padding: 0;
  }

  .right {
    width: 50%;
  }
}
@media only screen and (max-width:500px) {
  /* For mobile phones: */
  .main, .right {
    width: 100%;
  }

 .menu {
    width: 50%;
  }
}



.Stil1 {font-size: medium}

a:link {
	color: #000000;
	text-decoration: none;
}
a:visited {
	text-decoration: none;
	color: #000000;
}
a:hover {
	text-decoration: none;
	color: #000000;
}
a:active {
	text-decoration: none;
	color: #000000;
}
.Stil8 {
	font-size: 36px;
	font-family: Arial, Helvetica, sans-serif;
	color: #000000;
}
.Stil13 {color: #666666}
.Stil14 {font-size: xx-large; font-family: Arial, Helvetica, sans-serif; color: #666666; }
.Stil15 {font-size: large}
.Stil22 {font-size: xx-large}
.Stil16 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: large;
	font-weight: bold;
	color: #333333;
}



h1 {
	font-size:3.5em;
	line-height:3.8em;
	font-family:Arial, Helvetica, sans-serif;
	font-weight:100;
	color:black;
	margin:0em;
}

h2 {
	font-size:1.563em;
	line-height:1.8em;
	font-family:Arial, Helvetica, sans-serif;
	font-weight:100;
	color:black;
	margin:0em;
	padding:1.25em;
	text-align:left;
}

p {
	line-height:1.8em;
	font-family:Arial, Helvetica, sans-serif;
	font-weight:100;
	color:black;
	margin:0em;
	padding:0em 1.25em 1.25em 1.25em;
	text-align:left;
}

ul {
		margin:0em;
	padding:0em;
	}

li {
	list-style:square;
		font-family:Arial, Helvetica, sans-serif;
	font-weight:100;
	line-height:1.25em;
	color:gray;
	margin:0.313em 0em 0.313em 0em;
	padding:0em;
	text-align:left;
	}

img 	{
		width:90%;
	height:auto;
	max-width:100%;
	}


a {
text-decoration:none;	
}


#menubar {
display:block;
background:#CCCCCC:;	
}

#menubar ul{
display:block;
width:2em;
padding:0.9em;
	}

#menubar ul li {
display:inline;
width:2em;
padding:0.9em;
	}

#menubar ul li a.menubutton {
box-sizing: content-box;
display:none;
width:2em;
padding:0.9em;
	}



header {
display:block;
text-align:left;
border-radius:1.2em;
	}

nav {
display:block;
height:3em;
background:#f1f1f1;
text-align:left;
	}

nav ul{
display:block;
	}

nav ul li {
display:inline;
margin:0em 0.188em 0em 0.188em;

padding:0.9em;
	}


nav ul li a{
color:#666666;
font-size:1.125em;
 line-height:2.5em; 
 padding:0.563em 0.938em 0,375em 0.938em; 
 transition:background 0.2s;
 -webkite-transition:background 0.2s;
	}


nav ul li a:hover {
background:#CCCCCC;
border-bottom: 0.188em solid black;
	}

nav ul li a:active {
border-bottom: 0.188em solid black;
	}




@media screen and (max-width:600px) {
body {
font-size:90%;
	}
	}

@media screen and (max-width:600px) {
#main aside #main article {
width:100%;
display:block;
margin:0.625em 0em 0.625em 0em;
	}
	}

@media only screen and (max-width:800px) {
  /* For tablets: */
  .main {
    width: 80%;
    padding: 10px;
  } 
    .panel-test2 {
    width: 46%;
    padding: 10px;
  } 

}




@media only screen and (max-width:500px) {
  /* For mobile phones: */
  .main {
    width: 100%;
  }
   .right {
    width: 40%;
  }    
  .panel-test2 {
    width: 100%;
  }
}




@media screen and (max-width:550px) {
body {
font-size:90%;
	}
#menubar ul li a.menubutton {
display:block;
	}
nav {
display:none;
height:auto;
	}


@media screen and (min-width:550px) {
nav.nav {
display:block;
	}
nav ul li {
display:block;
margin:0.3em 0em 0.3em 0em;
	}
	}