section.footer {
    background-image: url(../img/bg/section-footer.jpg);
    background-size: cover;
    padding: 5% 8%;
    height: auto;
    -webkit-transform: translateZ(0);
}

.skrollr section.footer {
    padding: 0 25px 0 40px;
    bottom: 0;
    top: auto;
}

.skrollr section.footer .frame {
    margin: 50px 0px;
    position: relative;
}

section.footer .copyright {
    text-align: center;
    font-family: 'ProximaNovaSemibold';
    font-size: 16px;
    color: #282340;
    margin-top: 14px;
}

.skrollr section.footer .copyright {
    text-align: left;
    position: absolute;
    top: 0;
    left: 0;
}

section.footer .social {
    text-align: center;
    margin: 0;
}

section.footer .social li {
    display: inline-block;
    width: 56px;
    height: 52px;
    padding: 0px;
    margin: 0px;
}

section.footer .social li a {
    display: inline-block;
    width: 56px;
    height: 52px;
    position: relative;
    padding: 0px;
    margin: 0px;
}

section.footer .social li {
    padding: 0px;
    margin: 0px;
}

section.footer .social li a span {
    background-image: url(../img/footer-icons.png);
    background-repeat: no-repeat;
    background-position: 0 0;
    display: block;
    width: 56px;
    height: 52px;
    position: absolute;
    top: 0;
    left: 0;
    -webkit-transition: all 220ms ease-in;
    -moz-transition: all 220ms ease-in;
    -o-transition: all 220ms ease-in;
    transition: all 220ms ease-in;
}

section.footer .social li a span.in {
    -webkit-transform: rotateX(0deg);
    transform: rotateX(0deg);
    top: 0;
    opacity: 1;
}

section.footer .social li a span.out {
    background-position: 0 -52px;
    -webkit-transform: rotateX(90deg);
    transform: rotateX(90deg);
    top: -50%;
    opacity: 0;
}

.skrollr section.footer .social li:hover a span.in {
    -webkit-transform: rotateX(90deg);
    transform: rotateX(90deg);
    top: 50%;
    opacity: 0;
}

.skrollr section.footer .social li:hover a span.out {
    -webkit-transform: rotateX(0deg);
    transform: rotateX(0deg);
    top: 0px;
    opacity: 1;
}

section.footer .social li.facebook a span.in {
    background-position: 0 0;
}

section.footer .social li.twitter a span.in {
    background-position: -56px 0;
}

section.footer .social li.behance a span.in {
    background-position: -112px 0;
}

section.footer .social li.linkedin a span.in {
    background-position: -168px 0;
}

section.footer .social li.instagram a span.in {
    background-position: -224px 0;
}

section.footer .social li.pinterest a span.in {
    background-position: -280px 0;
}

section.footer .social li.facebook a span.out {
    background-position: 0 -52px;
}

section.footer .social li.twitter a span.out {
    background-position: -56px -52px;
}

section.footer .social li.behance a span.out {
    background-position: -112px -52px;
}

section.footer .social li.linkedin a span.out {
    background-position: -168px -52px;
}

section.footer .social li.instagram a span.out {
    background-position: -224px -52px;
}

section.footer .social li.pinterest a span.out {
    background-position: -280px -52px;
}
