#top_nav {
  padding: 0 5%;
  background-color: #474a4f;
  color: rgb(255, 255, 255);
}

#top_nav .left {
  display: flex;
  display: -webkit-box;
}

#top_nav .title {
  display: flex;
  display: -webkit-flex;
  align-items: center;
  font-size: 24px;
  font-weight: bold;
}

#top_nav ul li {
  height: 45px;
  line-height: 45px;
}

#top_nav ul li a {
  padding: 0 10px;
}

#top_nav a:hover {
  color: #fff !important;
}


/*Sub Nav*/

#top_nav .top_sub_nav {
  position: relative;
  z-index: 3000;
  min-width: 120px;
  background-color: #fff;
}

#top_nav .top_sub_nav .divider {
  display: block;
  height: 0px;
  border-top: 1px solid rgba(0, 0, 0, .15);
}

#top_nav .top_sub_nav a {
  height: 25px;
  line-height: 25px;
  color: #666;
  font-size: 14px;
}

#top_nav .top_sub_nav a:hover {
  color: #666;
  background-color: rgba(0, 0, 0, .35);
}


/*User Info*/

#top_nav #top_nav_myself a {
  display: flex;
  display: -webkit-flex;
  align-items: center;
}

#top_nav #top_nav_myself .avatar {
  width: 35px;
  height: 35px;
  margin-right: 5px;
}

#top_nav_instructors,
#top_nav_heroes,
#top_nav_simulated_invest,
#top_nav_analysis,
#top_nav_comparison,
#top_nav_bond {
  display: none;
}

@media (min-width: 800px) {
  #top_nav {
    padding: 0 10%;
  }
}

@media (min-width: 1366px) {
  #top_nav {
    padding: 0 15%;
  }
  #top_nav ul li {
    display: inline-block;
    height: 50px;
    line-height: 50px;
  }
}