/* Added by aq */

.navbar {    
  position: fixed;    
  top: 0;    
  width: 100%;    
  z-index: 1000;    
  background-color: #fff;    
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);    
  display: flex;    
  justify-content: space-between;    
  align-items: center;    
  padding: 0 30px;    
}

.navbar .navbar-left {    
  display: flex;    
  align-items: center;    
  font-size: 1.7em;
  padding-left: 20px;
}    

.navbar .navbar-left a {    
  display: inline-block;    
  color: #333;    
  text-decoration: none;    
}    

.navbar .navbar-left img {    
  vertical-align: middle;    
  width: 30px;    
  margin-right: 0px;    
}    

.navbar .navbar-right {    
  display: flex;    
  align-items: center;    
}    

.navbar .navbar-right a {    
  padding: 14px 20px;    
  display: inline-block;    
  color: #333;    
  text-decoration: none;    
}    

.navbar .navbar-right a:hover {    
  background-color: #ddd;    
  color: #000;    
}    

.navbar .menu-icon {    
  display: none;    
  cursor: pointer;    
  align-items: center;  
}    

body {    
  padding-top: 60px;    
}    

@media (max-width: 900px) {    
  .navbar {    
    flex-direction: row;   
    justify-content: space-between;   
    align-items: center;     
  }    

  .navbar .navbar-right {    
    flex-direction: column;    
    width: 100%;    
    display: none;    
  }    

  .navbar .navbar-right a {    
    width: 100%;    
    text-align: left;    
    padding: 10px 20px;    
  }    

  .navbar .menu-icon {    
    display: flex;    
    align-items: center;
  }    
}    

.navbar .navbar-right.active {    
  display: flex;    
}