/* The side navigation menu */
.sidenav {
  height: 100%; /* 100% Full-height */
  width: 0; /* 0 width - change this with JavaScript */
  position: fixed; /* Stay in place */
  z-index: 2; /* Stay on top */
  top: 0; /* Stay at the top */
  right: 0px;
  background-color: #111; /* Black*/
  overflow-x: hidden; /* Disable horizontal scroll */
  padding-top: 60px; /* Place content 60px from the top */
  transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
}

/* The navigation menu links */
.sidenav a {
  padding: 8px 8px 8px 62px;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
  transition: 0.3s;
}

/* When you mouse over the navigation links, change their color */
.sidenav a:hover {
  color: #f1f1f1;
}

/* Position and style the close button (top right corner) */
.sidenav .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}

/* Style page content - use this if you want to push the page content to the right when you open the side navigation */
#main {
  transition: margin-left .5s;
  padding: 20px;
}

/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}

/*     navbar leiste     */

/* Create a sticky/fixed navbar */
#navbar {
  overflow: hidden;
  background-color: white;
  padding: 20px 10px; /* Large padding which will shrink on scroll (using JS) */
  transition: 0.4s; /* Adds a transition effect when the padding is decreased */
  position: fixed; /* Sticky/fixed navbar */
  width: 100%;
  top: 0; /* At the top */
  z-index: 1;
}

#openNav {
    position: relative;
    
  width: 40px;
  height: 5px;
  background-color: black;
  margin: 6px 0;
    cursor: pointer;
}

/* Style the navbar links */
#navbar a {
  float: left;
  color: black;
  text-align: center;
  padding: 12px;
  text-decoration: none;
  font-size: 18px;
  line-height: 25px;
  border-radius: 4px;
}

/* Style the logo */
#navbar  {
   
}

#img_logo {
   height:80px;
     transition: 0.4s; /* Adds a transition effect when the padding is decreased */
}


/* Display some links to the right [wichtig] */
#navbar-right {
   position: fixed; width:60px; height:70px; top:0px; z-index:1; right: 0px; cursor: pointer;
}

/* Add responsiveness - on screens less than 580px wide, display the navbar vertically instead of horizontally */
@media screen and (max-width: 580px) {
  #navbar {
    padding: 50px 20px !important; /* Use !important to make sure that JavaScript doesn't override the padding on small screens */
  }
  #navbar a {
    float: none;
    display: block;
    text-align: left;
  }
  #navbar-right {
      cursor: pointer;
    float: none;
  }
}

/*
.nav_links { 
    float: left; 
    width: 30%; 
    margin-right: 2%; 
    padding: 0px;  
    box-sizing: border-box;
    text-align: left;
    padding-top: 0px;
}
.nav_links:last-child { margin-right: 0; }

.nav_links img {
    width:100%;
    opacity: 0.8;
    -webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
   
}
*/
.nav_mitte { 
    
    display: flex; 
    justify-content: center; 
    align-items: center;

}


/*
.nav_rechts { 
    float: left; 
    width: 10%; 
    margin-right: 2%; 
    padding: 0px;  
    box-sizing: border-box;
    text-align: left;
    padding-top: 0px;
    background-color: yellow;
}
.nav_rechts:last-child { margin-right: 0; }

.nav_rechts img {
    width:100%;
    opacity: 0.8;
    -webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
   
}
*/