#icons-wrap {
    position:relative;
    overflow:hidden;
    height:6rem
}

#icons {
    z-index:1;
    position:relative;
    list-style-type:none;
    padding:0;
    margin:0;
    overflow-x:auto;
    height:10rem
}

#icons a {
    text-decoration:none;
    display:block
}

#icons li {
    width:7rem;
    height:6rem;
    display:inline-block
}

[class*="icon_svg_"] {
    max-width:100%;
    display:block;
    height:4rem;
    color:#007AC3;
    shape-rendering:geometricPrecision;
    text-rendering:geometricPrecision
}


#icons-wrap .scroll-left,
#icons-wrap .scroll-right {
	position: absolute;
	width: 3rem;
	height: 100%;
	border: 0;
	top: 0;
	z-index: 2;
    overflow: hidden;
    padding: 0;
    font-size: 5rem;
    color: #007AC3;
    cursor: pointer;
}

#icons-wrap .scroll-left {
    left: 0;
    background: -webkit-gradient(linear, right top, left top, from(rgba(255,255,255,0)), to(rgba(255,255,255,1)));
    background: -webkit-linear-gradient(right, rgba(255,255,255,0), rgba(255,255,255,1));
    background: -o-linear-gradient(right, rgba(255,255,255,0), rgba(255,255,255,1));
    background: linear-gradient(to left, rgba(255,255,255,0), rgba(255,255,255,1));
}

#icons-wrap .scroll-left:before {
    font-family: "FontAwesome";
    content: "\f104";
}

#icons-wrap .scroll-right {
    right: 0;
    background: -webkit-gradient(linear, left top, right top, from(rgba(255,255,255,0)), to(rgba(255,255,255,1)));
    background: -webkit-linear-gradient(left, rgba(255,255,255,0), rgba(255,255,255,1));
    background: -o-linear-gradient(left, rgba(255,255,255,0), rgba(255,255,255,1));
    background: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,1));
}
#icons-wrap .scroll-right:before {
    font-family: "FontAwesome";
    content: "\f105";
}

#icons span {color: #222}