.ug-nav {
  background: #fff;
  box-sizing: border-box;
  bottom: 0;
  left: -300px;
  overflow-x: auto;
  overflow-y: scroll;
  padding-bottom: 20px;
  position: absolute;
  top: 0;
  transition: left .3s ease-out;
  width: 300px;
  z-index: 50
}

.ug-nav>ul {
  color: #4a4a4a
}

.ug-nav>ul>li {
  font-size: 13px
}

.ug-nav>ul>li>a {
  background-color: #f2f2f2;
  cursor: default;
  color: inherit!important;
  outline: 0;
  display: block;
  position: relative;
  border: 0;
  border-bottom: 1px solid #f2f2f2;
  padding: 12px 12px 12px 10px;
  transition: color .1s linear;
  text-decoration: none
}

.ug-nav>ul>li.close>a:hover>.name, .ug-nav>ul>li>ul>li.active>a, .ug-nav>ul>li>ul>li>a:hover {
  color: #4290a2
}

.ug-nav>ul>li>a>i {
  width: 1em;
  height: 1em;
  display: block;
  float: left;
  margin-top: .23em
}

.ug-nav>ul>li>a>.icon {
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMCAzMCI+PHRpdGxlPmFycm93PC90aXRsZT48cGF0aCBmaWxsPSIjOTk5IiBkPSJNMTAgMjVjLS42IDAtMS0uNS0xLTEgMC0uMy4xLS41LjMtLjdsOS4yLTguMy05LjItOC4zYy0uNC0uNC0uNC0xLS4xLTEuNC40LS40IDEtLjQgMS40LS4xbDEwIDljLjQuNC40IDEgLjEgMS40bC0uMS4xLTEwIDljLS4xLjItLjQuMy0uNi4zeiIvPjwvc3ZnPg==);
  background-size: 1em 1em;
  transition: background-image .1s linear, transform .3s ease;
  transform: rotate(90deg);
}

.ug-nav>ul>li>a>.name {
  display: block;
  line-height: 20px;
  pointer-events: none;
  padding-left: 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

.ug-nav>ul>li>ul {
  overflow: hidden;
  transition: all .4s ease-out
}

.ug-nav>ul>li>ul>li {
  border-bottom: 1px solid #f2f2f2;
  cursor: pointer;
  line-height: 44px;
  padding-left: 45px;
}

.ug-nav>ul>li>ul>li>a {
  color: inherit;
  display: block;
  overflow: hidden;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ug-nav>ul>li.close>a {
  background-color: transparent;
  cursor: pointer
}

.ug-nav>ul>li.close>a>.icon {
  transform: rotate(0)
}

.ug-nav>ul>li.close>a:hover>.icon {
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMCAzMCI+PHRpdGxlPmFycm93PC90aXRsZT48cGF0aCBmaWxsPSIjNGFjYmQ2IiBkPSJNMTAgMjVjLS42IDAtMS0uNS0xLTEgMC0uMy4xLS41LjMtLjdsOS4yLTguMy05LjItOC4zYy0uNC0uNC0uNC0xLS4xLTEuNC40LS40IDEtLjQgMS40LS4xbDEwIDljLjQuNC40IDEgLjEgMS40bC0uMS4xLTEwIDljLS4xLjItLjQuMy0uNi4zeiIvPjwvc3ZnPg==)
}

.ug-nav>ul>li.close>ul {
  height: 0!important
}

@media screen and (max-width:480px) {
  .ug-nav {
    left: -105%;
    position: fixed;
    width: 100%
  } 
}