body {  
    background-color: white;
    font-family: Avenir;
} 

/* Header */
.black{
    width: 103%;
    height: 20px;
    position: fixed;
    background-color: black;
    margin-left: -2%;
    margin-top: -16px;
    z-index: 4;
}
.background {
    width: 103%;
    height: 80px;
    position: fixed;
    background-color: white;
    margin-left: -2%;
    margin-top: 4px;
    z-index: 4;
}
#heading
{
    position:fixed;
    top: 20px;
    width: auto;
    height: 60px;
    margin-top: 2px;
    margin-left: 0%;
    margin-bottom: 10px;
    background-color: white;
    z-index: 4;
}
#title {
    position:fixed;
    top: 15px;
    left: 400px;
    margin-left: 1%;
    margin-top: 8px;
    font-family: Avenir;
    font-size: 45px;
    background-color: white;
    z-index: 4;
    
}
.Header 
    {width: 103%;
    height: auto;
    margin-left: -2%;
    float: left;
    }
#block {
    position:fixed;
    right: 0%;
    top: 12px;
    border-bottom: 80px solid #009921;
    border-left: 45px solid transparent;
    height: -80px;
    width: 80px;
    margin-right: -1%;
    z-index: 4;
}
.linie1 {
    position: fixed;
    height: 10px;
    width: 103%;
    background-color: #009921;
    float: left;
    margin-left: -2%;
    top: 91px;
    z-index: 4;
}
/* Menü */

#menuToggle{
    display:none;
    padding-top: 50px;
}
a
{
  text-decoration: none;
  color: #333333;
  
  transition: color 0.3s ease;
}

a:hover
{
  color: white;
}
p {
    font-size: 30px;
    font-family: Avenir;
    font-style: medium;
    color: black;
    text-align: center;
}
.menu {
    width: 16.6%;
    height: auto;
    float:left;
    background-color: white;
    left: -5%;
}
.menuimpressum {
    width: 20%;
    height: auto;
    float:left;
    margin-top: 100px;
    background-color: white;
    left: -5%;
}

p:hover {
    color: #009921;
}

.linie2 {
    height: 4px;
    width: 100%;
    background-color: #009921;
    float: left;
}
.link_text {
    color: #009921;
}

/* Überschriften */
#header {
    float: left;
    font-family: Avenir;
    font-style: italic;
    padding-top: 10px;
    padding-left: 5%;
    padding-right: 4%;
    padding-bottom: 10px;
    border-top: 3px solid #009921;
    border-bottom: 3px solid#009921;
    margin-left: -1%;
    font-size: 25px;
    width: 93%;
    background-color: white;
    color: #009921;
    z-index: 3;
}




/* Inhalt */
#content {
    float: left;
    padding-top: 50px;
    padding-bottom: 0px;
    margin-left: -2%;
    width: 66%;
    z-index: 4;
}
.header3 {
    float: left;
    font-family: Avenir;
    font-size: 25px;
    color: #333333;
    padding-left: 9%;
    padding-right: 9%;
    padding-top: 20px;
    margin-left: -1%;
    z-index: 3;
}
.content {
    float: left;
    width: 82%;
    font-family: Avenir;
    font-size: 17px;
    padding-top: 0px;
    padding-left: 9%;
    padding-right: 9%;
    margin-left: -1%;
    color: #333333;
    z-index: 3;
}
.impressum {
    width: 100%;
    float: left;
    font-family: Avenir;
    font-size: 15px;
    padding-top: 40px;
    padding-bottom: 20px;
    padding-left: 10px;
}



/* Dateien */
.files {
    font-family: Avenir;
    font-size: 17px;
    color: white;
    padding-top: 25px;
    z-index: 5;
    width: 150%;
}
.files:hover {
    color: #009921;
}
#liste {
    position: absolute;
    margin-top: 50px;
}
.image_links {
    width: auto;
    height: 900px;
    z-index: 2;
    filter: brightness(40%);
    float:right;
    margin-right: -0%;
}
#overflow {
    width: 36%;
    height: auto;
    overflow: hidden;
    float: right;
    margin-right: -1%;
}
.logo {
    width: 32%;
    float: right;
    margin-top: 100px;
    margin-right: 2%;
    margin-bottom: 100px;
    opacity: 0.2;
}



/* Footer */
#footer {
    float: left;
    width: 105%;
    background-color: #009921;
    margin-left: -2%;
}
.footer {
    text-align: center;
    width: 33.3%;
    float: left;
    font-size: 15px;
    padding-top: 15px;
    padding-bottom: 15px;
}


/*Meadia Query Tablet 768x1024px*/
@media only screen and (max-width: 960px) {

/* Header */
.black{
    width: 105%;
    height: 15px;
    position: fixed;
    background-color: black;
    margin-left: -2%;
    margin-top: -8px;
}
.background {
    width: 103%;
    height: 63px;
    position: fixed;
    background-color: white;
    margin-left: -2%;
    margin-top: 7px;
}
#heading
{
    position: fixed;
    width: auto;
    margin-top: 11px;
    height: 40px;
    top: 15px;    
}
#title {
    position: fixed;
    top: 11px;
    margin-top: 14px;
    left: 270px;
    font-family: Avenir;
    font-size: 30px;
    
}
.Header 
    {width: 105%;
    height: auto;
    margin-left: -2%;
    float: left;
}
#block {
    position: fixed;
    top: 15px;
    border-bottom: 61px solid #009921;
    border-left: 35px solid transparent;
    height: 0px;
    width: 50px;
    right: -3%;
}    
.linie1 {
    height: 5px;
    width: 105%;
    background-color: #009921;
    position: fixed;
    top: 76px;
    margin-left: -2%;
}

    
    
/* Menü */
    
.menu {
    display: none;
}    
.menuimpressum {
        display:none;
    }   
a
{
  text-decoration: none;
  color: #333333;
  
  transition: color 0.3s ease;
}

a:hover
{
  color: white;
}

#menuToggle
{
  display: block;
    float: left;
  margin-top: 35px;
  margin-left: 10px;
    margin-bottom: 10px;
  
  z-index: 1;
  
  -webkit-user-select: none;
  user-select: none;
}

#menuToggle input
{
  display: block;
  width: 40px;
  height: 32px;
  position: absolute;
  margin-top: -2px;
  margin-left: -2px;
  
  cursor: pointer;
  
  opacity: 0; /* hide this */
  z-index: 2; /* and place it over the hamburger */
  
  -webkit-touch-callout: none;
}

/* Burger */
#menuToggle span
{
  display: block;
  width: 33px;
  height: 4px;
  margin-bottom: 5px;
  position: relative;
  
  background: #009921;
  border-radius: 3px;
  
  z-index: 1;
  
  transform-origin: 4px 0px;
  
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              opacity 0.55s ease;
}

#menuToggle span:first-child
{
  transform-origin: 0% 0%;
}

#menuToggle span:nth-last-child(2)
{
  transform-origin: 0% 100%;
}

/* Kreuz */
#menuToggle input:checked ~ span
{
  opacity: 1;
  transform: rotate(45deg) translate(-2px, -1px);
  background: white;
}

#menuToggle input:checked ~ span:nth-last-child(3)
{
  opacity: 0;
  transform: rotate(0deg) scale(0.2, 0.2);
}

#menuToggle input:checked ~ span:nth-last-child(2)
{
  transform: rotate(-45deg) translate(0, -1px);
}

#menu
{
  position: absolute;
  width: 100%;
  margin: -102px 0 0 -50px;
  padding: 50px;
  padding-top: 200px;
  
  background: #009921;
  list-style-type: none;
  -webkit-font-smoothing: antialiased;
  /* to stop flickering of text in safari */
  
  transform-origin: 0% 0%;
  transform: translate(-100%, 0);
  
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
}

#menu li
{
  padding: 10px 0;
  font-size: 17px;
}

/* Von links */
#menuToggle input:checked ~ ul
{
  transform: none;
}
 

    

/* Überschriften */
#header {
    float: left;
    font-family: Avenir;
    font-style: italic;
    padding-top: 10px;
    padding-left: 5%;
    padding-right: 4%;
    padding-bottom: 10px;
    border-top: 3px solid #009921;
    border-bottom: 3px solid#009921;
    margin-left: -2%;
    font-size: 20px;
    width: 95%;
    background-color: white;
    color: #009921;
    z-index: 3;
}
    
    
        
/* Inhalt */
#content {
    float: left;
    padding-top: 20px;
    padding-bottom: 0px;
    margin-left: -2%;
    background-color: white;
    width: 60%;
    z-index: 4;
}
.header3 {
    float: left;
    font-family: Avenir;
    font-size: 20px;
    color: #333333;
    padding-left: 9%;
    padding-right: 9%;
    padding-bottom: 10px;
    margin-left: 0%;
    z-index: 3;
}
.content {
    float: left;
    width: 95%;
    font-family: Avenir;
    font-size: 14px;
    padding-top: 0px;
    padding-left: 9%;
    padding-right: 0%;
    padding-bottom: 0px;
    margin-left: 0%;
    color: #333333;
    z-index: 3;
}
.impressum {
    width: 100%;
    float: left;
    font-family: Avenir;
    font-size: 15px;
    padding-top: 40px;
    padding-bottom: 20px;
    padding-left: 10px;
}
    
    
    
    
/* Dateien */
.files {
    font-family: Avenir;
    font-size: 15px;
    color: white;
    padding-top: 20px;
    z-index: 5;
    width: 50%;
}
.files:hover {
    color: #009921;
}
#liste {
    position: absolute;
    margin-top: 25px;
    margin-left: -40px;
}
.image_links {
    width: auto;
    height: 600px;
    z-index: 2;
    filter: brightness(40%);
    float:right;
    margin-right: -0%;
}
#overflow {
    width: 36%;
    height: auto;
    overflow: hidden;
    float: right;
    margin-right: -1%;
}    
.logo {
    display: none;
}
    
    
/* Footer */    
#footer {
    float: left;
    width: 105%;
    background-color: #009921;
    margin-left: -2%;
}
.footer {
    text-align: center;
    width: 33.3%;
    float: left;
    font-size: 15px;
    padding-top: 10px;
    padding-bottom: 10px;
}
}




/*Meadia Query Smartphone 360x640px*/
@media only screen and (max-width: 600px) {

    
/* Header */
.black{
    width: 101%;
    height: 10px;
    position: fixed;
    background-color: black;
    margin-left: -2%;
    margin-top: -8px;
}
.background {
    width: 103%;
    height: 50px;
    position: fixed;
    background-color: white;
    margin-left: -2%;
    margin-top: 2px;
}
#heading
{
    position: fixed;
    width: auto;
    height: 30px;
    top: 8px;
}
#title {
    position: fixed;
    top: 7px;
    left: 210px;
    font-family: Avenir;
    font-size: 18px;
    
}
.Header 
    {width: 104%;
    height: auto;
    margin-left: -2%;
    float: left;
}
#block {
    position: fixed;
    top: 10px;
    right: 1%;
    border-bottom: 45px solid #009921;
    border-left: 25px solid transparent;
    height: 0px;
    width: 10px;
}    
.linie1 {
    height: 5px;
    width: 101%;
    background-color: #009921;
    position: fixed;
    top: 55px;
    margin-left: -2%;
}
/* Menü */
#menuToggle
{
  display: block;
    float: left;
  margin-top: 15px;
  margin-left: 10px;
    margin-bottom: 10px;
  
  z-index: 1;
  
  -webkit-user-select: none;
  user-select: none;
}

/* Überschriften */
#header {
    float: left;
    font-family: Avenir;
    font-style: italic;
    padding-top: 10px;
    padding-left: 5%;
    padding-right: 4%;
    padding-bottom: 10px;
    border-top: 3px solid #009921;
    border-bottom: 3px solid#009921;
    margin-left: -2%;
    font-size: 20px;
    width: 95%;
    background-color: white;
    color: #009921;
    z-index: 3;
}
    
    
    

/* Inhalt */
#content {
    float: left;
    padding-top: 40px;
    padding-bottom: 10px;
    margin-left: -2%;
    background-color: white;
    width: 100%;
    z-index: 4;
}
.header3 {
    float: left;
    font-family: Avenir;
    font-size: 17px;
    color: #333333;
    padding-left: 5%;
    padding-right: 5%;
    padding-top: 0px;
    margin-left: 0%;
    z-index: 3;
}
.content {
    float: left;
    width: 95%;
    font-family: Avenir;
    font-size: 13px;
    padding-top: 0px;
    padding-left: 5%;
    padding-right: 5%;
    margin-left: 0%;
    color: #333333;
    z-index: 3;
}
.impressum {
    width: 100%;
    float: left;
    font-family: Avenir;
    font-size: 13px;
    padding-top: 30px;
    padding-bottom: 20px;
    padding-left: 10px;
}
    
    
     
/* Dateien */
.files {
    font-family: Avenir;
    font-size: 16px;
    color: white;
    padding-top: 22px;
    z-index: 5;
    width: 100%;
    text-align: center;
}
.files:hover {
    color: #009921;
}
#liste {
    position: absolute;
    margin-top: 5px;
    width: 100%;
    margin-left: -70px;
}
.image_links {
    width: 100%;
    height: auto;
    z-index: 2;
    filter: brightness(40%);
    float:right;
    margin-right: -0%;
}
#overflow {
    width: 104%;
    height: auto;
    overflow: hidden;
    float: right;
    margin-right: -2%;
}
    
    
    
/* Footer */    
#footer {
    float: left;
    width: 105%;
    background-color: #009921;
    margin-left: -2%;
}
.footer {
    text-align: center;
    width: 33.3%;
    float: left;
    font-size: 10px;
    padding-top: 15px;
    padding-bottom: 15px;
}
}