.topnavbg{
      width:100%; margin:0; padding:0;
      background-image: linear-gradient(260deg, #c79f54 0%, #b31a1a   100%);
  }
  .topnav {
    overflow: hidden;
    width:1200px; margin:0 auto; padding:0;
  }
  
  .topnav .nav-logo{
    
    margin:0; padding:0;
    background-repeat: no-repeat;
    background-position: center center;
    
   
  }

  .topnav a {
    float: left;
    display: block;
    color: #f2f2f2;
    text-align: left;
    padding: 14px 16px 14px 0;
    text-decoration: none;
    font-family: h1;
    font-size:16px;
  }
/*Logo in Navbar display:block, Logo nicht in Navbar display:none*/
  .topnav a:first-child{
      display:block;
      color:#fff;
      text-decoration: none;
      cursor: default;
      padding: 14px 16px 14px 0;
  }
  .topnav a:first-child:hover, .topnav a:first-child:active{
      color:#fff;
  }
  
  .topnav b{
      color:#fff;
  }
  .topnav a:hover {
    color: #fff;
  }
  
  .topnav a.active {
    color: white;
  }
  
  .topnav .icon {
    display: none;
  }
 
  /* 
    ##Device = Laptops, Desktops
    ##Screen = B/w 1025px to 1200px
  */
  
  @media (min-width: 1025px) and (max-width: 1200px) {
    .topnav{width:100%;}  
    .topnav a:first-child{display:block; padding: 10px 14px 10px 10px}
    .topnav a:not(:first-child) {display: none; padding: 10px 14px 10px 10px;}
    .topnav a.icon {
      float: right;
      display: block;
    }
    .topnav.responsive {position: relative;}
    .topnav.responsive .icon {
      position: absolute;
      right: 0;
      top: 0;
    }
    .topnav.responsive a {
      float: none;
      display: block;
      text-align: left;
    }
    
  }
  
  /* 
    ##Device = Tablets, Ipads (portrait)
    ##Screen = B/w 768px to 1024px
  */
  
  @media (min-width: 768px) and (max-width: 1024px) {
    .topnav{width:100%;}  
    .topnav a:first-child{display:block; padding: 10px 0 0 10px}
    .topnav a:not(:first-child) {display: none; padding: 10px 14px 10px 10px;}
    .topnav a.icon {
      float: right;
      display: block;
    }
    .topnav.responsive {position: relative;}
    .topnav.responsive .icon {
      position: absolute;
      right: 0;
      top: 0;
    }
    .topnav.responsive a {
      float: none;
      display: block;
      text-align: left;
    }
    
  }
  
  /* 
    ##Device = Tablets, Ipads (landscape)
    ##Screen = B/w 768px to 1024px
  */
  
  @media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
    .topnav{width:100%;}  
    .topnav a:first-child{display:block; padding: 10px 0 0 10px}
    .topnav a:not(:first-child) {display: none; padding: 10px 14px 10px 10px;}
    .topnav a.icon {
      float: right;
      display: block;
    }
    .topnav.responsive {position: relative;}
    .topnav.responsive .icon {
      position: absolute;
      right: 0;
      top: 0;
    }
    .topnav.responsive a {
      float: none;
      display: block;
      text-align: left;
    }
    
  }
  
  /* 
    ##Device = Low Resolution Tablets, Mobiles (Landscape)
    ##Screen = B/w 481px to 767px
  */
  
  @media (min-width: 481px) and (max-width: 767px) {
    .topnav{width:100%;}  
    .topnav a:first-child{display:block; padding: 10px 0 0 10px}
    .topnav a:not(:first-child) {display: none; padding: 10px 14px 10px 10px;}
    .topnav a.icon {
      float: right;
      display: block;
    }
    .topnav.responsive {position: relative;}
    .topnav.responsive .icon {
      position: absolute;
      right: 0;
      top: 0;
    }
    .topnav.responsive a {
      float: none;
      display: block;
      text-align: left;
    }
    
  }
  
  /* 
    ##Device = Most of the Smartphones Mobiles (Portrait)
    ##Screen = B/w 320px to 479px
  */
  
  @media (min-width: 0px) and (max-width: 480px) {
    .topnav{width:100%;}  
    .topnav a:first-child{display:block; padding: 10px 0 0 10px}
    .topnav a:not(:first-child) {display: none; padding: 10px 14px 10px 10px;}
    .topnav a.icon {
      float: right;
      display: block;
    }
    .topnav.responsive {position: relative;}
    .topnav.responsive .icon {
      position: absolute;
      right: 0;
      top: 0;
    }
    .topnav.responsive a {
      float: none;
      display: block;
      text-align: left;
    }
    
  }