footer{
	position: relative;
	margin-top: var(--rhythm);
}

footer svg{
   stroke:#000000;
}

footer a,
footer a svg{
    transition: all 0.2s ease-in-out;
}

footer p a{
    text-decoration: underline;
    transition: all 0.2s ease-in-out;
}

footer p a:hover{
    text-decoration: none;
    color: var(--color-sc);
}

footer h3{
    font-family: var(--font-light);
    padding-bottom: 0.5em;
}

.footer__main{
    position: relative;
    padding-top: calc(var(--rhythm) / 2);
    padding-bottom: calc(var(--rhythm) / 2);
    background: var(--color-hl);
    color: var(--color-hl-inverted);
    font-size: 16px;
}

.footer__logo {
    text-align: left;
}

.footer__logo svg{
    width: 200px;
    height: auto;
    padding-bottom: 1.188em;
}

.footer__logo img{
    margin-left: 0 !important;
    max-width: 200px;
    height: auto;
    padding-bottom: 1.188em;
}

.footer__about{
    padding-top: 2.25em;
}

.footer__about p a{
    color: var(--color-hl-inverted)
}

.footer__secondary{
    padding-top: calc(var(--gutter) / 1.5);
    padding-bottom: calc(var(--gutter) / 2);
}

.footer__secondary ul{
    padding-bottom: 0;
}

.footer__secondary .inline-list{
    justify-content: center;
}

.footer__secondary .inline-list li{
    margin-left: 0.75em;
    margin-right: 0.75em;
}

.footer__secondary .inline-list li a:hover svg{
    stroke:var(--color-sc);
}

.footer__secondary p{
    width: 100%;
}

.footer__secondary a{
    color: var(--color-fg) !important;
}

.footer__secondary a:hover{
    color: var(--color-sc) !important;
}

@media only screen and (min-width: 768px) {

    .footer__secondary{
        padding-top: var(--gutter);
        padding-bottom: calc(var(--gutter) / 1.5);
        font-size: 16px;
    }

    .footer__secondary p,
    .footer__secondary ul{
        padding-top: 0;
        padding-bottom: 0;
    }

    .footer__secondary .text-center{
        text-align: left;
    }

    .footer__secondary .inline-list{
        justify-content: flex-end;
    }

    .footer__secondary .inline-list li{
        margin-left: 1.188em;
    }

    .footer__main{
        padding-top: calc(var(--rhythm) / 3);
        padding-bottom: calc(var(--rhythm) / 3);
    }
}


