#footer {  color: #FFF; margin-top: auto;    }
#footer ul { margin-bottom: 12px; }


#footer li,
:is(#footernav,#footerinfo,#didyouknow) p {
    font-size: 18px; line-height: 1.2; margin-bottom: 0.75em;
}



#footer p:not(.cta) { line-height:140%;  max-width: 32em; margin:1em 1em 1em 0; }

#bottom p { }

#footer h3,
#footerinfo h2  ,
#footer #footernav div:first-child>ul>li>a {
    display: inline-block;
    font-size: 24px; line-height: 1.25;



    font-weight: 700;color: white;
}
#footer #footernav div:first-child>ul>li:has(ul)>a {
    margin-bottom: 0.5em;
}

#footer > div#footerinfo p.logo,
#footernav h2 {font-size: 32px; line-height: normal;font-weight: 700;color: white; display: block;
    padding-bottom: calc(1em - 0.1em); margin-bottom: 1em; border-bottom: 1px solid var(--ttl_lightyellow); line-height: 1;
}
#footer > div#footerinfo p.logo { border-bottom-color: transparent;  padding-bottom: 0; }
#footer > div#footerinfo p.logo a {
    display: block;/* width: 100%;*/

}















/*
#footer :not(#bottom) .wrapper { overflow: auto;}
*/

#footer a { color: inherit;}
#footer .cta a { background-color:var(--ttl_lightyellow); color:var(--ttl_black); white-space: nowrap; }

#footer .cta a:hover { }
#footer .cta a:is(:hover,:focus-visible) { background: var(--ttl_white); }
#footer .cta a:focus-visible {   }

/*
#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#footerinfo p { font-size: 18px; line-height: 140%; }
#footer>div#footerinfo .wrapper > div:first-child .logo ~ p { font-size: 20px; line-height: 150%; }

/*
#footer>div#footernav a:focus-visible{ box-shadow: 0 0 0 2px var(--ttl_footer-1), 0 0 0 4px var(--yellow); }
#footer>div#footerinfo a:focus-visible{ box-shadow: 0 0 0 2px var(--ttl_footer-2), 0 0 0 4px var(--yellow); }
*/

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



@media all and (max-width: 1199.98px) {
    #footer > div#footerinfo {
        background-size: auto 96%;
    }

}



#footer>div#footernav .wrapper { display: flex; justify-content: space-between; flex-wrap: wrap }


#footer>div#footerinfo .wrapper { display: flex; gap:var(--gutter_big); }
#footer>div#footerinfo .wrapper>div:last-child { margin-left: auto; }



#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 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[href^="mailto:"]::before,
#footer>div#footerinfo p:not(.logo) a[href^="tel:"]::before { display: none !important; }

#footer>div#footerinfo p:not(.logo) a[href^="mailto:"],
#footer>div#footerinfo p:not(.logo) a[href^="tel:"] {
    display:inline-flex; align-content: center; align-items: center; margin-top:0.75em;
}
#footer>div#footerinfo p:not(.logo) a[href^="mailto:"]::after,
#footer>div#footerinfo p:not(.logo) a[href^="tel:"]::after { order: -1; transition: all .2s ease-in-out;
    font-family: "social"; font-size: 22px;
    display: flex; align-content: center; align-items: center; justify-content: center; min-width: 40px; margin-right: 0.75em; width: 40px; height: 40px; border-radius: 50%; border:2px solid white; content:"\E806";
}
#footer>div#footerinfo p:not(.logo) a[href^="tel:"]::after { }


#footer>div#footerinfo p:not(.logo) a:is([href^="mailto:"],[href^="tel:"]):hover::after {
    background-color: rgba(255,255,255,1); color:var(--ttl_black);

}


#footer>div#footerinfo p:not(.logo) a:is([href^="mailto:"],[href^="tel:"]) span {
    border-bottom: 1px solid var(--ttl_lightyellow);

}






#bottom   {  background: var(--ttl_black); color: white; overflow: hidden }
#bottom a { color: white; }
#bottom button {
    color: inherit;
    background: none;
    cursor: pointer;
    font-family: inherit;
    font-size: inherit;
}


#bottom .wrapper {   padding-top:16px; padding-bottom:16px; }

#bottom ul { display: flex;  flex-wrap: wrap; margin: 0;    }
#bottom ul li,
#bottom p:not(.cta) { font-size: 14px; margin: 0.5em var(--gutter) 0.5em 0; }
#bottom p:not(.cta)  {  margin: 0.5em 0 0.5em 0; line-height: 1.2; }

@media all and (min-width: 1024px) {
    #bottom p#copyright  {  margin-left: auto; }
}

#bottom p#design  { width:100%; max-width:1800px; font-size: 14px;  }
#bottom p#design a { color: #A4A4A8; display: inline-block;  position: relative; background: none; transition: all 0.2s ease; }

#bottom p#design a::before {
    content: ''; background-color:transparent;
    position: absolute;
    left: 0;
    bottom: 0px;
    width: 100%;
    height: 1px;
    z-index: -1;
    transition: all .15s ease-in-out;
}

#bottom p#design a:is(:hover,:focus-visible)::before {    bottom: 0; height: 100%; background: var(--ttl_lightyellow);  padding:4px 12px; border-radius: 300px;
    width: calc(100% + 24px); height: calc(100% + 8px); bottom: -4px; left: -12px;
}



#bottom p#design a:is(:hover,:focus-visible) {    color:black; /*font-size: 12px;*/  }


@media all and (max-width: 899.98px) {
    #bottom p#design  {   margin-top:1em;}

}

#footerinfo,
#footernav  { padding-top: 64px;padding-bottom: 64px;  }


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

    #bottom .wrapper { display: flex; align-items: flex-start;  flex-wrap: wrap;   }
    #bottom ul+p { margin-left: auto;}

    #footernav .wrapper >div:first-child > ul {
        column-count: 2;
        column-gap: var(--gutter);

    }


    #footernav .wrapper > div:first-child > ul > li {
        break-inside: avoid-column; /*padding: 2em 0 0;*/ margin-bottom: 2em;
    }
}

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

    #footernav  .wrapper >div:first-child > ul {
        column-count: 3;

    }

    #footernav .wrapper>div:first-child
    {width:var(--grid-threequarters); }
    #footernav .wrapper>div:nth-child(2)
    { width:var(--grid-quarter);   }


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


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

    #bottom ul+p,#bottom p#design { margin-top: 1.5em; width: 100%; margin-left: 0}
}
@media all and (max-width: 1199.98px) {
 /*   #footer>div#footerinfo .wrapper>div { width:calc(50% - 32px);  width:calc(50% - (var(--gutter) / 2));   }*/

    #footer>div#footernav .wrapper>div:first-child { width:var(--grid-twothirds);   }
    #footer>div#footernav .wrapper>div:nth-child(2) { width:var(--grid-third);   }


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


    #footer>div#footernav .wrapper>div:first-child ,
    #footer>div#footernav .wrapper>div:nth-child(2) { width:100%;   }

    #footer>div#footernav .wrapper>div:first-child { margin-bottom: 20px;}

    #footernav  .wrapper >div:first-child > ul {
        column-count: 2;

    }
    #footernav  .wrapper >div:first-child > ul > li {
        break-inside: avoid-column; margin-bottom: 2em;
    }



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


    #bottom ul li { width: calc(50% - 16px); margin-right: 32px;}
    #bottom ul li:nth-child(2n+2) { margin-right: 0; }
    #bottom ul+p { margin-top: 1.5em;}
}
@media all and (max-width: 899.98px) {

    #footer>div#footerinfo .wrapper { display: block; }
    #footer>div#footerinfo .wrapper>div:not(:last-child) { margin-bottom: 24px;}
}
@media all and (max-width: 599.98px) {


    #footernav  .wrapper >div:first-child > ul {

        column-count:1;
    }



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

    #footer>div#footerinfo .wrapper>div { width: 100%;}
    #footer>div#footerinfo .wrapper>div:first-child,
    #footer>div#footerinfo .wrapper>div:nth-child(2),
    #footer>div#footerinfo .wrapper>div:nth-child(3) { 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; }
}