.sidebar {
  position: fixed;
  height: 100vh;
  width: 60px;
  top: 0;
  left: 0;
  background: linear-gradient(225deg, var(--yellow) 0%, var(--darkyellow) 100%);
  box-shadow: 0 0 12px 0 rgba(0,0,0,0.15);
  z-index: 3;
}
.sidebar .mobilelogo {
  position: absolute;
  width: 44px;
  height: 44px;
  top: 12px;
  left: 8px;
  border-radius: 3px;
  background: white;
  background-image: url('../img/logo/mini.png');
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  display: none;
}
.sidebar ul {
  position: relative;
  float: left;
  width: 100%;
  height: auto;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}
.sidebar ul li {
  position: relative;
  float: left;
  height: auto;
  width: 100%;
  top: 0;
  left: 0;
  text-align: center;
  cursor: pointer;
  padding-top: 20px;
  padding-bottom: 20px;
}
.sidebar ul li img {
  position: relative;
  float: left;
  width: 28px;
  height: 28px;
  top: 0;
  left: 16px;
}
.wrapper .sidebar ul li:hover {
  background-image: linear-gradient(to right, var(--darkyellow), var(--darkestyellow));
}
.sidebar ul li .flyin-title {
  position: absolute;
  width: 200px;
  height: 40px;
  top: 15px;
  left: -500px;
  padding-left: 20px;
  padding-right: 20px;
  border-radius: 20px;
  background: white;
  box-shadow: 0 0 12px 0 rgba(0,0,0,0.15);
  transition: .2s linear all;
  text-align: center;
}
.sidebar ul li .flyin-title p {
  color: var(--darkyellow);
  line-height: 40px;
}
.sidebar ul li:hover > .flyin-title {
  left: 70px;
}

@media all and (max-width: 620px){
  .sidebar .mobilelogo {
    display: block;
  }
  .sidebar ul li .flyin-title {
    xdisplay: none;
  }
}