ul.social-menu {
    margin: 0;
    padding: 0;
}
ul.social-menu li {
    display: inline-block;
}
ul.social-menu.sidebar {
    position: absolute;
    top: 250px;
    right: 30px;
    width: 20px;
    z-index: 1;
}
ul.social-menu.sidebar li {
    margin: 0 0 20px;
}

ul.social-menu li a img.normal {
    display: inline;
}
ul.social-menu li a img.hover {
    display: none;
}
ul.social-menu li a:hover img.normal {
    display: none;
}
ul.social-menu li a:hover img.hover {
    display: inline;
}
footer ul.social-menu {
    float: right;
    margin-top: 3vw;
}
footer ul.social-menu li {
    margin-left: 2vw;
}
footer ul.social-menu li:first-child {
    margin-left: 0;
}
footer ul.social-menu li > a,
footer ul.social-menu li > a > img {
    width: 5vw;
    height: 5vw;
}
footer ul.social-menu li > a > img.normal {
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */
    filter: gray; /* IE6-9 */
    -webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */
}