@import "../scss/_variables.scss"; //

footer {
    font-size: 16px;
    margin: auto;
    width: 100%;
    color: $white;
    background-color: $darkSky;
    @media (min-width: $mediaDesktop) {
        height: 60px;
    }

    a:hover {
        color: $white;
    }

    > ul {
        margin: 0;
        padding: 0 0 0 15px;
        list-style: none;
        display: flex;
        flex-flow: row wrap;
        justify-content: space-between;
        align-items: center;
        @media (max-width: $mediaDesktop) {
            padding: 20px 0;
        }
        @media (max-width: $mediaPhone) {
            padding: 0;
        }

        > li {
            text-align: left;
            flex-grow: 1;
            line-height: 60px;
            @media (max-width: $mediaDesktop) {
                line-height: 19px;
                text-align: center;
                padding: 21.2px 0;
            }
            @media (max-width: $mediaPhone) {
                text-align: center;
                flex-basis: 100%;
                padding: 10px 0;
            }
        }

        > li.logo {
            text-align: center;
            flex-grow: 12;
            @media (max-width: $mediaDesktop) {
                order: -1;
                flex-basis: 100%;
            }
            @media (max-width: $mediaPhone) {
                padding: 40px 0 30px;
            }
        }

        > li.copy-right {
            opacity: 0.5;
            @media (min-width: $mediaDesktop) {
                flex-grow: 0.5;
            }
            @media (max-width: $mediaPhone) {
                padding: 30px 0 40px;
            }
        }

        li > a {
            color: $white;
        }
    }
}