.footer-links {

width: 100%;
margin: 10px;
padding: 0;

@media #{$tablet} {
        -webkit-flex: 1 0 180px;
        flex: 1 0 180px;
}

li {
        list-style: none;
        margin: 15px auto;

        @media #{$tablet} {
                max-width: 150px;
        }
        a {

                &:hover {
                        text-decoration: none;
                }
                svg {
                        fill: #999;
                        margin-right: 10px;
                        transition: fill 0.2s ease;
                        vertical-align: middle;
                        position: relative;
                        top: -2px;
                        width: 22px;
                        height: 22px;
                }

                &:hover svg {
                        fill: #fff;
                }

                &.twitter-icon:hover svg {
                        fill: #55acee;
                }

                &.google-plus-icon:hover svg {
                        fill: #db4437;
                }

                &.youtube-icon:hover svg {
                        fill: #cd201f;
                }

                &.instagram-icon:hover svg {
                        fill: #f167f5;
                }

                &.linkedin-icon:hover svg {
                        fill: #0077b5;
                }

                &.pinterest-icon:hover svg {
                        fill: #bd081c;
                }

                &.rss-icon:hover svg {
                        fill: #f26522;
                }
        }
}

}

footer {

padding: 50px 0 50px 0;
font-size: 1.1em;
position: relative;
background: $background-color;
color: #fff;

.copyright {
        font-size: .8em;
        margin: 0 auto;

        @media #{$tablet} {
                text-align: center;
        }

}

&,
a {
        color: #999;
}

h2 {
        font-size: 1.4em;
        margin: 30px 0;
        color: #ccc;
}

.footer-columns {
        @extend %flexbox;
        @include flex-flow(wrap);
        margin: -10px -10px 10px -10px;
}

a {
        text-decoration: none;

        &:hover {
                color: #fff;
        }
}

.legal-line {
        width: 100%;
        padding: 30px 0;
        margin: 0;
        background-color: #222527;

        a {
                font-weight: 600;
        }
}

}