/*------------------------------------------------------------------

  Footer

-------------------------------------------------------------------*/
footer {
    position: relative;
    overflow: hidden;

    .wrapper {
        position: relative;
    }
    
    // social icons
    .social {
        background: $back_darken_color;
        background: rgba($back_darken_color, 0.45);
        text-align: center;
        overflow: hidden;

        .container {
            position: relative;
        }

        h3 {
            margin-top: 5rem;
            margin-bottom: 4rem;
        }

        .icons {
            margin: 0 auto;
            margin-bottom: 5rem;
            max-width: 600px;

            a {
                color: inherit;
                text-decoration: none;

                i {
                    position: relative;
                    display: inline-block;
                    font-size: 5rem;
                    padding: 25px;
                    padding-left: 40px;
                    padding-right: 30px;

                    &:before {
                        position: relative;
                        z-index: 1;
                    }

                    &:after {
                        content: '';
                        position: absolute;
                        top: 0; left: 0; right: 0; bottom: 0;
                        background: rgba($back_darken_color, 0.3);
                        -webkit-transform: skew(-$skew_size);
                        transform: skew(-$skew_size);
                        -webkit-transform-origin: 50% 100%;
                        transform-origin: 50% 100%;
                        -webkit-transition: .3s background ease;
                        transition: .3s background ease;
                    }
                }
                span {
                    display: block;
                }

                &:hover i:after {
                    background: rgba($back_darken_color, 0.4);
                }
            }
        }
      
        // fix on mobile margins
        @media #{$media-xs} {
            .icons > div {
                margin-bottom: 4rem;
            }
            .icons {
                margin-bottom: 1rem;
            }
        }
    }

    // copyright
    .copyright {
        position: relative;
        background: $back_darken_color;
        background: rgba($back_darken_color, 0.7);
        text-align: center;
        padding: 20px;
    }
}