*{
margin:0;
padding:0;
-webkit-box.sizing:border-box;
-moz-box.sizing:border-box;
box.sizing:border-box;
}

.barra {
position:fixed;
left: 0;
top: 200px;
z-index: 2000;
}

.barra ul {
list-style: none;
}

.barra ul li a {
 display: inline-block;
 color: #fff;
 background: #000;
 padding: 15px 20px;
 font-size: 20px;
 text-decoration: none;
 -webkit-transition:all 500ms ease;
 -o-transition: all 500ms ease;
 transition: all 500ms ease;
 
}

.barra ul li .icon-facebook {background:#3b5998;}
.barra ul li .icon-twitter {background:#00abf0;}
.barra ul li .icon-google {background:#d95232;}
.barra ul li .icon-mail {background:#e60000;}
.barra ul li .icon-instagram {background:#2e5e86;}

.barra ul li a:hover{
padding: 15px 30px;
background: #777877;
}