#footer-wrap{
    background-color: white;
    padding: 0 0 50px 0;
}

body.page-home{
    #footer{
        margin-top: -40px;
    }
}

#footer{
    padding: 140px 0 40px;
    color: black;
    background-color: white;
    .skew {
        .skewY(-2deg);
    }

    >.container.skew{
        .skewY(2deg);
    }

    a{
        color: black;
    }


    .footer-links{
        margin-bottom: 20px;

        .li-under a:hover::after,
        .li-under a:focus::after {
            opacity: 1;
            -webkit-transform: skewY(15deg) translateY(8px);
            -moz-transform: skewY(15deg) translateY(8px);
            transform: skewY(15deg) translateY(8px);
        }

        .li-under a::after {
            background-color: @purple;
        }

        li{
            a{
                text-transform: uppercase;
                font-size: 12px;
                letter-spacing: 3px;
                .transition( color 0.3s ease );
                font-weight: 400;

                &:hover{
                    color: @purple;
                    .transition( color 0.3s ease );
                    background-color: transparent;
                }
            }
        }
    }

    .buttons.navbar-nav{
        float: none;
        display: inline-block;
        margin-bottom: 30px;
        margin-top: 0px;

        li{
            &.first{
                margin-right: 12px;
            }

            &.download{
                a{
                  background: url(../images/icon-download-purple.png)  8px 6px no-repeat;
                  .img-retina("../images/icon-download-purple.png", "../images/icon-download-purple@2x.png", 20px, 20px);
                }
            }

            &.github{
                a{
                  background: url(../images/icon-github-purple.png)  8px 6px no-repeat;
                  .img-retina("../images/icon-github-purple.png", "../images/icon-github-purple@2x.png", 20px, 20px);
                }
            }
        }

        li > a {
            padding-top: 6px;
            padding-bottom: 6px;
            padding-left: 40px;
        }
    }

    .footer-hashi{
        float: right;
        padding-top: 5px;
        letter-spacing: 2px;

        a{
            color: black;
            font-weight: @font-weight-lato-xb;
        }

        span{
            margin-right: 10px;
        }

        .hashi-logo{
            display: inline-block;
            vertical-align: middle;
            i{
                display: inline-block;
                width: 37px;
                height: 40px;
                background: url(../images/footer-hashicorp-logo.png) 0 0 no-repeat;
                .img-retina("../images/footer-hashicorp-logo.png", "../images/footer-hashicorp-logo@2x.png", 37px, 40px);
            }
        }
    }
}

.page-sub{
    #footer-wrap{
        padding: 0;
    }

    #footer{
        padding: 140px 0 100px;
        background-color: @black;
        transform: none;

        >.container{
            transform: none;
        }

        a{
            color: white;
        }

        .footer-hashi{
            color: white;

            .hashi-logo{
                i{
                    background: url(../images/footer-hashicorp-white-logo.png) 0 0 no-repeat;
                    .img-retina("../images/footer-hashicorp-white-logo.png", "../images/footer-hashicorp-white-logo@2x.png", 37px, 40px);
                }
            }
        }
    }
}

@media (max-width: 992px) {
    .page-sub #footer, #footer{
        .footer-hashi {
            padding-top: 14px;
            span{
                margin-right: 6px;
            }
            .hashi-logo{
                i{
                    margin-top: -6px;
                    width: 20px;
                    height: 22px;
                    background-size: 20px 22px;
                }
            }
        }
    }


}

@media (max-width: 768px) {
    #footer{
        padding: 100px 0 40px;
        text-align: center;

        .footer-links{
            float: none;
            display: inline-block;
        }

        .footer-hashi {
            float: none;
            display: inline-block;

            .pull-right{
                float: none !important;
            }
        }
    }
}

@media (max-width: 320px) {
    #footer{
        text-align: center;

        .footer-links{
            .li-under{
                float: none !important;
            }
        }
    }
}