/*
0 - 600px:		Phone
600 - 900px:	Tablet Portrait
900	- 1200px:	Tablet Landscape
[1200-1800] is where our normal styles apply
1800px +:		Big Desktop

$breakpoint argument choices:
- phone
- tab-port
- tab-land
- big-desktop

1em = 16px
*/
.topbar {
  background-color: #fff;
  border-bottom: 1px solid #e2e2e2;
  padding: 15px 0;
}
.right-content {
  float: right;
}
.list-main ul {
  display: flex;
  align-items: center;
}
.list-main li {
  display: inline-block;
  color: #333;
  font-size: 13px;
  font-weight: 500;
  border-right: 1px solid #f0f0f0;
  padding: 4px 13px;
}
.list-main li i {
  display: inline-block;
  margin-right: 4px;
  font-size: 15px;
  color: #F7941D;
  position: relative;
  top: 1px;
}
.list-main li:last-child {
  padding-right: 0;
  border: none;
}
.list-main li a {
  color: #333;
}
.list-main li a:hover {
  color: #F7941D;
}
.topbar-tops-drop {
  position: relative !important;
}
.topbar-tops-drop li {
  border: none;
}
.topbar-tops-drop li ul {
  position: absolute !important;
  top: 100% !important;
  display: none;
  background: #fff;
  font-size: 15px;
  max-height: 200px;
  overflow-y: auto;
  z-index: 9999;
  padding: 10px;
  width: 150px;
  flex-direction: column;
}
@media only screen and (max-width: 450px)\d \a .list-main li {
  border: none !important;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .topbar .top-left {
    text-align: center;
  }
  .topbar .right-content {
    text-align: center;
    float: none;
    margin-top: 8px;
  }
}
@media only screen and (max-width: 767px) {
  .topbar .top-left {
    text-align: center;
  }
  .topbar .right-content {
    text-align: center;
    float: none;
    margin-top: 8px;
  }
}