body
    {
    width: 98%;
    background: #f2f2f2;
    font-family: calibri;
    } 
.headimage
    {
    max-width: 500px;
    width: 95%; 
    height: auto;
    }
.logo
    {
    width: 60%;
    margin: 0 auto;    
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    }
.headmenue
    {
    margin: 0 auto;
    width: 60%;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    }
.mainbox
    {
    overflow: hidden;
    margin: 0 auto;
    width: 60%;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    }
.headliner
    {
    padding: 10px 5px 5px 5px;
    font-weight: bold;
    font-size: 1.2rem;
    width: 98%;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    margin-bottom: 8px;
    }    
 .headlinerblog
    {
    padding: 5px;
    font-weight: bold;
    font-size: 1.2rem;
    width: 98%;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    margin-bottom: 8px;
    }     

.fotobox
    {
display: grid;
justify-content: center;
align-items: center;
    }
/* Hide the links inside the navigation menu (except for logo/home) */
.topnav #myLinks {
}


/* Style navigation menu links */
.topnav a {
  color: white;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 1.1rem;   
}

/* Style the hamburger menu */
.topnav {
    width: 100%;
  background: #01005a;
  padding: 14px 0px;
  position: relative;
 box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
}
a.icon
    {
    display: none;
    }
/* Add a grey background color on mouse-over */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}
/* Style the active link (or home/logo) */
.active {
display: none; 
} 


@media only screen and (max-width: 900px) {
body 
    {
    background:#f2f2f2;
    font-family: calibri;
    }
.logo
    {
    width: 99%;    
    }
.headmenue
    {
    width: 99%;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    }
.headliner
    {
    width: 98%;
    padding: 5px;
    font-weight: bold;
    font-size: 1.1rem;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    }  
 .headlinerblog
    {
    width: 98%;
    padding: 5px;
    font-weight: bold;
    font-size: 1.1rem;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    margin-bottom: 8px;
    }  
 /* Style the navigation menu */
.topnav {
margin-top: 10px;
padding: 0px;
  overflow: hidden;
  background-color: #01005a;
  position: relative;
}

/* Hide the links inside the navigation menu (except for logo/home) */
.topnav #myLinks {
  display: none;
}

/* Style navigation menu links */
.topnav a {
  color: white;
  padding: 10px 11px;
  text-decoration: none;
  font-size: 1.2rem;
  display: block;
}

/* Style the hamburger menu */
.topnav a.icon {
  background: black;
  display: block;
  position: absolute;
  right: 0;
  top: 0;
 box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
}

/* Add a grey background color on mouse-over */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}

/* Style the active link (or home/logo) */
.active {
  background-color: #01005a;
  color: white;
} 
.mainbox
    {
    margin-top: 8px; 
    width: 99%;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    }
.fotobox
    {
    width: 100%;
display: grid;
justify-content: center;
align-items: center;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    }

    }

.blogbox
    {
    width: 48%;
    height: 400px;
    float: left;
    padding: 5px;
    margin-right: 10px;
    margin-bottom: 10px;

    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);   
    }
.fotoboxsmall
    {
    float:left;
    width: 49%;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    }
.textboxsmall
    {
    font-size: 1.1rem;
    float:right;
    width: 48%;
    padding: 0px 5px 5px 5px;
      word-wrap: break-word;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    }
.headlinersmall
    {
    width: 99%;
    padding: 5px;
    font-weight: bold;
    font-size: 1.1rem;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    margin-bottom: 8px;
    } 
@media only screen and (max-width: 1400px) {
.blogbox
    {
    float: left;
    padding: 5px;
    margin-right: 20px;
    margin-bottom: 20px;
    width: 98%;
    height: 400px;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);    
    }
.textboxsmall
    {
    font-size: 1.1rem;
    padding: 0px 5px 5px 5px;
    float:right;
    width: 48%;
      word-wrap: break-word;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    }
}
a.no
    {
    text-decoration: none;
    color:black;
    }
a.no:hover
    {
    color:grey;
    }

.blogboxlarge
    {
    float: left;
    font-size: 1.2rem;
    padding: 10px;    
    margin-right: 20px;
    margin-bottom: 20px;
    width: 94%;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);    
    }
ul
    {
      list-style-type: circle;
    }
.textbox
    {
    font-size: 1.1rem;
    padding: 5px;
    margin-bottom: 10px;
    min-width: 98%;
    word-wrap: break-word;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    }
.blogbox_kontakt
    {
    width: 530px;
    float: left;
    padding: 5px;
    margin-right: 10px;
    margin-bottom: 10px;

    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);   
    }