@import url('../layout-2-root-config.css');

.footer {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
    bottom: 0;
    left: 0;
    right: 0;
    justify-self: self-end;
    padding: 40px 50px 0 50px;
    z-index: 9;
    color: var(--footer-font-color);
    background-color: var(--footer-background-color);
    text-transform: uppercase;
    position: relative;
    margin-top: 50px;
}

.footer-logo {
    width: 50%;
}

    .footer-logo img {
        width: 200px;
        max-width: 100%;
    }

.footer-social-media-icons-wrapper {
    display: flex;
    width: 50%;
    justify-content: flex-end;
}

    .footer-social-media-icons-wrapper ul {
        display: flex;
        width: 200px;
        justify-content: space-between;
        list-style: none;
        padding: 0px;
        margin: 0px;
    }

    .footer-social-media-icons-wrapper li {
        display: inline;
    }

    .footer-social-media-icons-wrapper a {
        background-color: var(--footer-social-media-icon-color);
        color: var(--footer-social-media-icon-font-color);
        text-align: center;
        float: left;
        width: 35px;
        height: 35px;
        border-radius: 100%;
        margin-right: 7px;
    }

.footer-social-media {
    width: 100%;
    display: flex;
    padding-bottom: 5px;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
}

.footer-icon {
    margin-top: 7px;
    font-size: 20px;
    color: var(--footer-social-media-icon-font-color);
}

.footer-social-media-icons-wrapper a:hover,
.footer-social-media-icons-wrapper a:focus {
    background-color: var(--footer-social-media-icon-color-hover);
    color: var(--footer-social-media-icon-font-color);
}

.footer-social-media-icons-wrapper a i {
    padding: 10px 0 0 0;
    font-size: 20px;
    line-height: 38px;
}

.footer h5 {
    font-size: var(--footer-link-header-font-size);
    font-weight: var(--footer-link-header-font-weigth);
    padding-top: 2em;
    color: var(--footer-link-header-font-color);
    text-shadow: 0 0 10px transparent;
}

.footer ul {
    list-style: none;
    padding: 0px;
}

.footer li {
    padding: 5px 0px 5px 0px;
    font-size: var(--footer-link-font-size);
}

    .footer li a {
        color: var(--footer-font-color);
        text-decoration: none;
    }

        .footer li a:hover {
            color: var(--footer-font-color-hover);
        }

    .footer li span {
        color: var(--footer-font-color);
        text-decoration: none;
        cursor: pointer;
    }

        .footer li span:hover {
            color: var(--footer-font-color-hover);
        }

.footer-content-wrapper {
    text-align: left;
    color: #777;
    font-size: 12px;
    font-weight: 300;
    padding: 10px 0px 20px 0px;
    width: 100%;
}

@media screen and (max-width: 991px) {
    .footer-content-padding {
        padding-left: 9%;
    }
}

@media screen and (max-width: 575px) {
    .align-content-flex {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .align-content-flex ul{
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .footer-content-padding {
        padding-left: 0;
    }
}

@media screen and (max-width: 481px) {
    .footer-social-media {
        flex-wrap: wrap;
        flex-direction: column;
    }

    .footer-social-media-icons-wrapper {
        display: flex;
        align-content: center;
        justify-content: center;
        width: 100%;
    }

    .footer-site-map-content {
        width: 100%;
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        align-content: center;
        align-items: center;
    }

    .footer-logo {
        display: flex;
        align-content: center;
        justify-content: center;
        width: 100%;
        margin-bottom: 20px;
    }

    .footer-site-map {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        flex-wrap: nowrap;
        align-content: center;
    }

    .footer-content-wrapper {
        text-align: center;
    }

}