.topnav {
    overflow: hidden;
    background-color: rgba(51, 51, 51, 0);
    position: absolute;
    z-index: 2;
    width: 100%;
    letter-spacing: 0.20em;
    padding: 40px;
    text-transform: uppercase;
    position: fixed; 
    
  }

.topnav .logo_img {
    width: 350px;
    
}
  .topnav .nav_link {
    float: right;
    display: block;
    color: #f2f2f2ef;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
    margin-left: 40px;
    margin-top: 2%;
    
  }
  .icon {
     float: right;
    display: block;
    color: #f2f2f2ef;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
    margin-left: 40px;
  }
  .topnav .nav_link:hover {
    color: #ddd;
    font-weight: bold;
 
  }
  
  .topnav .nav_link.active {
    font-weight: bold;
    color: white;
  }
  
  
  .topnav .icon {
    display: none;
  }
  
  @media screen and (max-width: 600px) {
    .topnav a:not(:first-child) {display: none;}
    .topnav a.icon {
      float: right;
      display: block;

    }
  }
  @media screen and (max-width: 980px) {
    .topnav .nav_link {
        font-size: 10px;
    }
    .logo_img{
        width: 250px !important;
    } 
  }

  .topnav.responsive {
    background-color: rgb(196, 196, 196);
    height: auto;
  }
  
  @media screen and (max-width: 900px) {
    .topnav.responsive {
        position: relative;
    }
    .topnav.responsive .icon {
      position: absolute;
      right: 0;
      top: 0;

    }
    .topnav.responsive a {
        
      float: none;
      display: block;
      text-align: left;
      color: black !important;
    }
    .logo_img{
        width: 200px !important;
    } 
  }
  

  .topnav.scrolled {
    background-color: rgba(0, 0, 0, 0.249) !important;
    transition: background-color 200ms linear;
  }

  .black{
    position:fixed;
    top:0;
    background:#333;
    width:100%;
    height:50px;
    
  }