#footer {   color: white;  }
#footer ul { margin-bottom: 12px; }

#footer li,
#footer p {
    font-size: 16px; line-height: 19px; margin-bottom: 0.75em;

}
#footer p { line-height:140%;  max-width: 30em; max-width: 23em; }

#footer h3,
#footer h2  ,
#footer #footernav .wrapper>ul>li>a {
    display: inline-block;
    font-size: 22px; line-height: 27px;
    font-weight: 700; margin-bottom: 12px;
}
#footer a { color: inherit;}

#footer a#backtotop:focus-visible span span,
#footer a:not(#backtotop):focus-visible {
    box-shadow: 0 0 0 1px white, 0 0 0 3px var(--orange);
    border-radius: 2px;
}
#footer a#backtotop:focus-visible span span { box-shadow: 0 0 0 1px var(--menu-blue), 0 0 0 3px var(--orange);  }
#footer>div#footernav a:focus-visible{ box-shadow: 0 0 0 1px var(--footer-1), 0 0 0 3px var(--orange); }
#footer>div#footerinfo a:focus-visible{ box-shadow: 0 0 0 1px var(--footer-2), 0 0 0 3px var(--orange); }


#footer>div#footernav{ background: var(--footer-1); color: white;     border: 1px solid transparent; padding-bottom: var(--wrapper-margin); }

#footer>div#footerinfo { background: var(--footer-2); padding:  var(--wrapper-margin) 0;}
#footer>div#footerinfo .wrapper { display: flex; justify-content: space-between; flex-wrap: wrap }
#footer>div#footerinfo .wrapper>div { width:calc(25% - (64px * 0.75)); width: calc(25% - 16px);  }
#footer>div#footerinfo svg { width: 198px; min-width: 198px;
    height: 70px;  display: block }
#footer>div#footerinfo>.wrapper>div:first-child>p:first-child { margin: 0 0 1em; }
#footer>div#footerinfo>.wrapper>div:first-child>p:first-child>a { display:inline-block;}
#footer>div#footerinfo svg path { fill:white;  }

/*
#footer>div#footerinfo p:not(.logo) a {
    transition: all 0.2s ease; cursor: pointer;
    text-decoration: none;
    padding: 1px 0;
    background-image: linear-gradient(rgba(255,255,255,0.5), rgba(255,255,255,0.5)), linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0));
    background-position: 0 100%, 0 100%;
    background-repeat: no-repeat, no-repeat;
    background-size: 0 1px, 100% 1px;
    background-size: 100% 1px, 100% 1px;
    transition: background-size .5s;

}

#footer>div#footerinfo p:not(.logo) a:hover  {
    background-image: linear-gradient(currentColor, currentColor), linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0));
    background-size: 100% 2px, 100% 2px
}
*/


#footer>div#footerinfo a {position: relative; display:inline-block;  transition: all .2s ease-in-out; }
#footer>div#footerinfo p.logo a:hover {
    opacity: 0.7;
}

#footer>div#footerinfo p:not(.logo) a::before {
    content: '';
    background-color: rgba(255,255,255,0.5);
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 100%;
    height: 1px;
    z-index: -1;
    transition: all .2s ease-in-out;
}
#footer>div#footerinfo p:not(.logo) a:hover { color:var(--footer-2); }
#footer>div#footerinfo p:not(.logo) a:hover::before {
    background-color: rgba(255,255,255,1);
    bottom: 0;
    height: 100%;
}


#bottom   { background: white; overflow: hidden }
#bottom a { color: var(--link); }
#bottom ul { display: flex;  flex-wrap: wrap; margin: 0; padding: var(--unit) 0;  }
#bottom ul li { margin: 0.5em var(--gutter) 0.5em 0; }


#bottom p a::before {
    content: ''; background-color:#515661;
    position: absolute;
    left: 0;
    bottom: 0px;
    width: 100%;
    height: 1px;
    z-index: -1;
    transition: all .15s ease-in-out;
}
#bottom p  {font-size: 14px; margin:0 0 var(--unit) 0; }
#bottom p a { color: #515661; display: inline-block;
    position: relative; background: none; transition: all 0.2s ease; }

#bottom p a:is(:hover,:focus-visible) {    color:var(--tc-black); /*font-size: 12px;*/  }
#bottom p a:is(:hover,:focus-visible)::before {    bottom: 0;
    height: 100%; background: var(--orange);  padding:4px 12px; border-radius: 300px;

    width: calc(100% + 24px); height: calc(100% + 8px); bottom: -4px; left: -12px;
}


@media all and (min-width: 900px) {



    #footer #footernav .wrapper > ul {
        column-count: 3;
        column-gap: var(--gutter);
        column-gap: var(--wrapper-margin);

    }

    #footer #footernav .wrapper > ul > li {
        break-inside: avoid-column;padding: 64px 0 0;
    }
}

@media all and (min-width: 1200px) {


    #footer>div#footerinfo .wrapper>div:nth-child(2),
    #footer>div#footerinfo .wrapper>div:nth-child(3)
    { width:calc(var(--grid-sixth) + var(--wrapper-margin));   }


}
@media all and (min-width: 1500px) {
    #footer>div#footerinfo .wrapper>div:nth-child(2),
    #footer>div#footerinfo .wrapper>div:nth-child(3)
    { width:calc(var(--grid-sixth) + var(--gutter));   }

}

@media all and (max-width: 1199px) {
    #footer>div#footerinfo .wrapper>div { width:calc(50% - 32px);  width:calc(50% - (var(--gutter) / 2));   }
    #footer>div#footerinfo .wrapper>div:first-child,
    #footer>div#footerinfo .wrapper>div:nth-child(2) { margin-bottom: 32px; }
}
@media all and (max-width: 899px) {
    #footer #footernav .wrapper > ul {

        column-count: 2;
        column-gap: var(--wrapper-margin);
    }
    #footer #footernav .wrapper > ul > li {
        break-inside: avoid-column; padding: var(--wrapper-margin) 0 0;
    }

    #footer .wrapper { border-width: 40px;}


    #footer h3 { font-size: 18px; line-height: 25px; }
    #footer li,
    #footer p {
        font-size: 14px;

    }
    #footer li{
        line-height: 17px;
    }


}
@media all and (max-width: 599px) {

    #footer p {   max-width: 113em; }

    #footer #footernav .wrapper > ul {

        column-count:1;
    }
    #footer #footernav .wrapper > ul > li {
        padding: 32px 0 0;
    }

    #footer>div#footernav{  padding-bottom: 32px;     }

    #footer>div#footerinfo {  padding: 32px 0;}

    #footer>div#footerinfo .wrapper>div { width: 100%;}
    #footer>div#footerinfo .wrapper>div:not(:last-child) { margin-bottom: 32px; }


    #bottom ul li { width: calc(50% - 16px); margin-right: 32px;}
    #bottom ul li:nth-child(2n+2) { margin-right: 0; }
}