a { font-family: "Roboto", Arial, sans-serif; color: #000; font-size: 10px;}
.social { list-style:none; margin-top:2em;}
.social li { display:inline; float:left; margin: 0 40px 0 0; }
.social li a { display:block; width:50px; height:50px; position:relative; }
.social li a strong { position: absolute; left: 0px; top: 10px;}

li.fb { background:url("/webapp/img/facebook-32.png") #3B5998; background-repeat:no-repeat; background-position:center; }
li.twitter { background:url("/webapp/img/twitter-x-32.png") #000000; background-repeat:no-repeat; background-position:center; }
li.instagram { background:url("/webapp/img/instagram-32.png") #C13584; background-repeat:no-repeat; background-position:center; }
li.youtube { background:url("/webapp/img/youtube-32.png") #ff0000; background-repeat:no-repeat; background-position:center; }

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