/* input(135,26): run-time error CSS1034: Expected closing parenthesis, found '<' */
.page > footer {
    border-top: var(--footer-border-width) var(--footer-border-style) var(--footer-border-color);
    padding: var(--gap-primary) 0;
    color: var(--color-text-primary);
    box-shadow: 0px -3px .75rem #000000;
    background-color: var(--color-footer-background);
    background-size: cover;
}

.page footer *{
    font-size: var(--step-0);
}

div.footerContainer{
    display: flex;
    justify-content: space-around;
    flex-direction: row-reverse;
    padding: 0 var(--space-3xl);
    gap: var(--space-m)
}

div.footerHeader{
    color: var(--color-primary);
    font-weight: 600;
    font-size: var(--step-2);
    /*margin-bottom: var(--space-xs);*/
    display: inline-block;
}

footer nav ul {
    font-size: var(--step--1);
    gap: var(--space-3xs);
    justify-content: center;
    flex-wrap: wrap;
    margin: 0;
}

footer nav ul a{
    transition: color 500ms;
    border-radius: var(--radius-fixed-1);
}

footer nav ul a:hover{
    color: var(--color-primary);
}

footer nav ul li {
    padding-bottom: var(--space-3xs);
}

footer nav ul li:not(:first-child) {
    /*border-left: 1px solid var(--color-text-primary);*/
}

footer nav li {
    list-style: none;
}

footer nav li a:hover {
    text-decoration: none;
}

footer .companyInfoAndSocialMedia{
    display: flex;
    flex-direction: column;
    gap: var(--space-m);
}

footer .unsubscribe {
    font-size: var(--step--1);
    display: flex;
    gap: var(--space-s);
    flex-direction: column;
}

footer .copyright, footer .copyright a {
    font-size: var(--step--1);
    color: var(--color-primary);
}


footer .socialMedia {
    gap: var(--space-s);
    flex-wrap: wrap;
    justify-content: center;
}

footer .socialMedia .footerHeader{
    margin-right: var(--space-2xs);
}

footer .socialMedia ul {
    display: inline-flex;
    gap: var(--space-2xs);
}

footer .socialMedia a i {
    font-size: var(--step-2);
}

footer .socialMedia li {
    list-style: none;
    white-space: nowrap;
}

footer .socialMedia a{
    transition: color 500ms;
    text-decoration: none;
}

footer .socialMedia a:hover{
    color: var(--color-primary);
}

footer .companyInfo {
    display: flex;
    flex-direction: column;
    gap: var(--space-3xs);
    justify-content: center;
    font-size: var(--step--1);
}

footer .companyInfo a{
    transition: color 500ms;
}

footer .companyInfo i {
    margin-right: var(--space-2xs);
}

footer .companyInfo a:hover{
    color: var(--color-primary);
}

@media screen and (width <= 700px) {
    div.footerContainer{
        flex-wrap: wrap;
        padding: 0 var(--space-m);
    }

    div.siteMap{
        width: 100%;
    }

    footer .companyAndContactInfo{
        width: 100%;
    }

    footer .copyright {
        text-align: center;
    }
}