a { font-family: "Roboto", Arial, sans-serif; color: #000; font-size: 10px;}
.xsocial { list-style:none; padding:0;}
.xsocial ul { padding: 0; margin: 0;}
.xsocial li {  padding:0; float:left; margin: 0 5px 0 0; }
.xsocial li a { display:block; width:25px; height:25px; position:relative; }
.xsocial li a strong { position: absolute; left: 0px; top: 10px;}

li.sfb { background:url("/mpf1/img/facebook-16.png") #3B5998; background-repeat:no-repeat; background-position:center; }
li.stwitter { background:url("/mpf1/img/twitter-x-16.png") #000000; background-repeat:no-repeat; background-position:center; }
li.slinkedin { background:url("/mpf1/img/linkedin-16.png") #0e76a8; background-repeat:no-repeat; background-position:center; }
li.spinterest { background:url("/mpf1/img/pinterest-16.png") #E60023; background-repeat:no-repeat; background-position:center; }
li.sinstagram { background:url("/mpf1/img/instagram-16.png") #E1306C; background-repeat:no-repeat; background-position:center; }
li.swsp { background:url("/mpf1/img/whatsapp-16.png") #128c7e; background-repeat:no-repeat; background-position:center; }

.xsocial:hover li { opacity:0.3; }
.xsocial li { transition-property: opacity; transition-duration: 500ms; }
.xsocial li a strong { opacity:0; transition-property: opacity, top; transition-duration: 250ms;}
.xsocial li:hover { opacity:1; }
.xsocial li:hover a strong { opacity:1; top:-23px; }