.social-midia-list {
  list-style: none;
  position: fixed;
  top: 50%;
  left: 0%;
  transform: translateY(-50%);
  z-index: 99;
}

.social-midia-list li a {
  display: block;
  margin-left: -2px;
  height: 60px;
  width: 60px;
  border-radius: 0 25px 25px 0;
  border: 2px solid #000;
  background: #FFF;
  margin-bottom: 1em;
  transition: all 0.4s ease;
  color: #2980b9;
  text-decoration: none;
  line-height: 60px;
  position: relative;
}

.social-midia-list li a:hover {
  cursor: pointer;
  width: 180px;
  color: #fff;
}

.social-midia-list li a:hover span {
  left: 0;
}

.social-midia-list li a span {
  padding: 0 30px 0 15px;
  position: absolute;
  left: -120px;
  transition: left 0.4s ease;
}

.social-midia-list li a i {
  position: absolute;
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
  font-size: 1.5em;
}

.social-midia-list li .spotify {
  background: rgba(39, 174, 96, 0.4);
  border-color: #25D366;
  color: #25D366;
}

.social-midia-list li .spotify:hover {
  background: rgba(39, 174, 96, 1);
}

.social-midia-list li .facebook {
  background: rgba(34, 167, 240, 0.4);
  border-color: #3A5696;
  color: #3A5696;
}

.social-midia-list li .facebook:hover {
  background: #3A5696;
}


.social-midia-list li .dribbble {
  background: rgba(210, 82, 127, 0.4);
  border-color: #D2527F;
  color: #D2527F;
}

.social-midia-list li .dribbble:hover {
      background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);;
}