/** 
 * CM Social Widget module
 * PrestaShop 1.7.x & 8.x
 * CSS
 * Front-office
 */

#social-widget ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
#social-widget li {
  margin-bottom: 5px;
}
#social-widget {
  right: 0;
  position: fixed;
  /* top: 140px; */
  z-index: 99999;
}
#social-widget a {
  background: #333;
  color: #fff;
  display: block;
  height: 35px;
  font: 16px "Open Sans", sans-serif;
  line-height: 35px;
  position: relative;
  text-align: center;
  width: 35px;
  background-image: url("../img/sprite.png")!important;
  background-repeat: no-repeat!important;
  border-radius: 5px 0 0 5px;
}
#social-widget a:hover {
  color: #fff;
  border-radius: 0;
}
#social-widget a span {
  color: #fff;
  line-height: 35px;
  right: -120px;
  position: absolute;
  text-align: center;
  width: 120px;
  font-size: 13px;
  text-shadow: none;
  transition: .5s ease;
  z-index:-1;
  border-radius: 5px 0 0 5px;
}
#social-widget a:hover span {
  right: 100%;
}

/* #1 */
#social-widget a.facebook,
#social-widget a.facebook:hover,
#social-widget a.facebook span { background: #0865fe; background-position: 0px 0px;}

/* #4 */
#social-widget a.youtube,
#social-widget a.youtube:hover,
#social-widget a.youtube span { background: #e52d27; background-position: 0px -35px;}

/* #3 */
#social-widget a.instagram,
#social-widget a.instagram:hover,
#social-widget a.instagram span { background: #f72d07; background-position: 0px -70px;}  

/* #4 */
#social-widget a.tiktok,
#social-widget a.tiktok:hover,
#social-widget a.tiktok span { background: #1e1e1e; background-position: 0px -105px;}  

/* #5 */
#social-widget a.weibo,
#social-widget a.weibo:hover,
#social-widget a.weibo span { background: #d52a2c; background-position: 0px -140px;}  

/* #6 */
#social-widget a.xcom,
#social-widget a.xcom:hover,
#social-widget a.xcom span { background: #272727; background-position: 0px -175px;}

/* #7 */
#social-widget a.reddit,
#social-widget a.reddit:hover,
#social-widget a.reddit span { background: #dd4b39; background-position: 0px -210px;}

/* #8 */
#social-widget a.pinterest,
#social-widget a.pinterest:hover,
#social-widget a.pinterest span { background: #cc2127; background-position: 0px -245px;}  

/* #9 */
#social-widget a.askfm,
#social-widget a.askfm:hover,
#social-widget a.askfm span { background: #784589; background-position: 0px -280px;}

/* #10 */
#social-widget a.tumblr,
#social-widget a.tumblr:hover,
#social-widget a.tumblr span { background: #314358; background-position: 0px -315px;}

/* #11 */
#social-widget a.flickr,
#social-widget a.flickr:hover,
#social-widget a.flickr span { background: #fe0083; background-position: 0px -350px;}

/* #12 */
#social-widget a.discord,
#social-widget a.discord:hover,
#social-widget a.discord span { background: #5165f9; background-position: 0px -385px;}  

/* #13 */
#social-widget a.linkedin,
#social-widget a.linkedin:hover,
#social-widget a.linkedin span { background: #007aaa; background-position: 0px -420px;}

/* #14 */
#social-widget a.vk,
#social-widget a.vk:hover,
#social-widget a.vk span { background: #4c75a3; background-position: 0px -455px;}

/* #15 */
#social-widget a.odnoklassniki,
#social-widget a.odnoklassniki:hover,
#social-widget a.odnoklassniki span { background: #e27e35; background-position: 0px -490px;}

/* #16 */
#social-widget a.meetup,
#social-widget a.meetup:hover,
#social-widget a.meetup span { background: #ed1c40; background-position: 0px -525px;}

/* #17 */
#social-widget a.email,
#social-widget a.email:hover,
#social-widget a.email span { background: #9dc622; background-position: 0px -560px;}

/* #18 */
#social-widget a.phone,
#social-widget a.phone:hover,
#social-widget a.phone span { background: #3387db; background-position: 0px -595px;}

/* #19 */
#social-widget a.vimeo,
#social-widget a.vimeo:hover,
#social-widget a.vimeo span { background: #00adef; background-position: 0px -630px;}

/* #20 */
#social-widget a.qzone,
#social-widget a.qzone:hover,
#social-widget a.qzone span { background: #fece08; background-position: 0px -665px;}

/* #21 */
#social-widget a.twitch,
#social-widget a.twitch:hover,
#social-widget a.twitch span { background: #9147ff; background-position: 0px -700px;}

/* #22 */
#social-widget a.gmaps,
#social-widget a.gmaps:hover,
#social-widget a.gmaps span { background: #56b154; background-position: 0px -735px;}

/* #23 */
#social-widget a.threads,
#social-widget a.threads:hover,
#social-widget a.threads span { background: #272727; background-position: 0px -770px;}

/* #24 */
#social-widget a.telegram,
#social-widget a.telegram:hover,
#social-widget a.telegram span { background: #38B0E3; background-position: 0px -805px;}