#footer {
  display: grid;
  grid-template-areas: 
    "s s s s s s"
    "a a a a a a"
    "l l l l l l"
    "n n n n n n"
    "f f f f f f"
    "c c c c c c"
    "r r r r r r";
  width: 100vw;
  grid-template-columns: repeat(6, 1fr);
}

#footer #services {
  grid-area: s;
}
#footer #about {
  grid-area: a;
  text-align: justify;
}
#footer #links {
  grid-area: l;
}
#footer #newsletter {
  grid-area: n;
}
#footer #follow {
  grid-area: f;
}
#footer #contact {
  grid-area: c;
}
#footer #copyright {
  grid-area: r;
}

@media (min-width: 768px) {
  #footer {
   grid-template-areas: 
    "s s s s s s"
    "a a a l l l"
    "n n n n n n"
    "f f f f f f"
    "c c c c c c"
    "r r r r r r";
  }
}
#services {
    padding: 2rem 0;
    border-top: 1px solid #EEE;
    font-size: 0.9rem;
}
#services .i {
    position: absolute;
    width: 1.5rem;
    height: 1.5rem;
    margin: 0 0 0 -1.75rem;
}
#services ul {
    display: flex;
    flex-wrap: wrap;
    padding: 0;
    margin: 0;
}
#services .service {
    list-style-type: none;
    background-repeat: no-repeat;
    background-position: top left;
    background-size: 2rem 2rem;
    vertical-align: top;
    margin: 0 0.5rem;
    width: 100%;
    text-align: center;
}
#services .service label {
    display: inline-block;
    font-weight: bold;
    height: 1.5rem;
    line-height: 1.5rem;
}
@media (min-width: 768px) {
    #services ul {
        flex-wrap: nowrap;
    }
}#about {
    padding: 15px;
    font-size: 0.9rem;
}
html.minimal #about {
    display: none;
}
#about label {
    font-weight: bold;
    font-size: 0.9rem;
    text-align: left;
    display: block;
}

@media (min-width: 480px) {
    #about label {
    min-height: 1.5rem;
    }
}#links {
    display: flex;
    flex-direction: column;
    margin-bottom: 1rem;
}
html.minimal #links {
    display: none;
}
#links .links-groups {
    flex-grow: 1;
    padding-left: 10px;
    padding-right: 10px;
}
#links details {
    border: 1px solid #eee;
}
#links details > summary {
    height: 2rem;
    line-height: 2rem;
    font-size: 0.9rem;
    list-style: none;
    font-weight: bold;
    background: var(--bg-arrow-down);
    text-align: left;
}
#links details > summary::-webkit-details-marker,
#links details > summary::marker {
    display: none;
}
#links ul {
    margin: 0;
    padding: 0;
}
#links ul li {
    list-style-type: none;
    min-height: 1.5rem;
    line-height: 1.5rem;
}
#links label {
    font-weight: bold;
    font-size: 0.9rem;

}
#links ul li a {
    text-decoration: none;
    color: #444;
    font-size: 0.9rem;
    
}
@media (min-width: 480px) {
#links details > summary {
    line-height: 3rem;
    min-height: 3rem;
    }
}

@media (min-width: 600px) {
    #links {
        flex-direction: row;
    }
    #links details {
        border: none;
    }
    #links details > summary {
        background: none;
        cursor:default;
    }
}#newsletter {
    font-size: 0.9rem;
    text-align: center;
    margin: 1rem 0 0 0;
}
html.minimal #newsletter {
    display: none;
}
#newsletter label {
    display: block;
    height: 2rem;
    font-weight: bold;
}
#newsletter input {
    height: 2rem;
    padding-left: 1rem;
    border: 1px solid #eee;
    border-radius: 0.3rem 0 0 0.3rem;
    width: 15rem;
}
#newsletter button {
    border-radius: 0 0.3rem 0.3rem 0;
}html.minimal #follow {
    display: none;
}

#follow ul {
    list-style-type: none;
    text-align: right;
    margin: 0;
    padding: 0;
    text-align: center;
}
#follow ul li {
    display: inline;
}
#follow a {
    display: inline-block;
    line-height: 1.5rem;
    height: 1.5rem;
    margin: 0 0.5rem;
}
#follow button {
    height: 2.5rem;
    width: 2.5rem;
}#contact {
    background-color: rgba(0,0,0, 0.8);
    color: white;
    font-size: 0.9rem;
    margin-top: 2rem;
    text-align: center;
    padding: 0.5rem 0;
}
#contact ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
}
#contact ul li {
    line-height: 3rem;
}
#contact span,
#contact a {
   display: inline-block;
    color: white;
    height: 2rem;
    line-height: 2rem;
}

#contact button {
    position: absolute;
    width: 1.5rem;
    height: 1.5rem;
    padding: 1.5rem; /* 48x48 */
    mask-repeat: no-repeat;
    mask-size: 50%;
    mask-position: left center;
    
    /* margin: 0.45rem 0.5rem 0 -2rem; */
    margin-left: -2rem;
}

.i.where { --icon: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiBhcmlhLWhpZGRlbj0idHJ1ZSIgcm9sZT0iaW1nIiBjbGFzcz0iaWNvbmlmeSBpY29uaWZ5LS1pYyIgd2lkdGg9IjFlbSIgaGVpZ2h0PSIxZW0iIHByZXNlcnZlQXNwZWN0UmF0aW89InhNaWRZTWlkIG1lZXQiIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTE4IDhjMC0zLjMxLTIuNjktNi02LTZTNiA0LjY5IDYgOGMwIDQuNSA2IDExIDYgMTFzNi02LjUgNi0xMXptLTggMGMwLTEuMS45LTIgMi0yczIgLjkgMiAyYTIgMiAwIDEgMS00IDB6TTUgMjB2MmgxNHYtMkg1eiIgZmlsbD0iY3VycmVudENvbG9yIj48L3BhdGg+PC9zdmc+); }
.i.phone { --icon: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiBhcmlhLWhpZGRlbj0idHJ1ZSIgcm9sZT0iaW1nIiBjbGFzcz0iaWNvbmlmeSBpY29uaWZ5LS1tZGkiIHdpZHRoPSIxZW0iIGhlaWdodD0iMWVtIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWlkWU1pZCBtZWV0IiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGQ9Ik02LjYyIDEwLjc5YzEuNDQgMi44MyAzLjc2IDUuMTUgNi41OSA2LjU5bDIuMi0yLjJjLjI4LS4yOC42Ny0uMzYgMS4wMi0uMjVjMS4xMi4zNyAyLjMyLjU3IDMuNTcuNTdhMSAxIDAgMCAxIDEgMVYyMGExIDEgMCAwIDEtMSAxQTE3IDE3IDAgMCAxIDMgNGExIDEgMCAwIDEgMS0xaDMuNWExIDEgMCAwIDEgMSAxYzAgMS4yNS4yIDIuNDUuNTcgMy41N2MuMTEuMzUuMDMuNzQtLjI1IDEuMDJsLTIuMiAyLjJ6IiBmaWxsPSJjdXJyZW50Q29sb3IiPjwvcGF0aD48L3N2Zz4=); }
.i.email { --icon: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiBhcmlhLWhpZGRlbj0idHJ1ZSIgcm9sZT0iaW1nIiBjbGFzcz0iaWNvbmlmeSBpY29uaWZ5LS1tZGkiIHdpZHRoPSIxZW0iIGhlaWdodD0iMWVtIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWlkWU1pZCBtZWV0IiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGQ9Ik0yMCA4bC04IDVsLTgtNVY2bDggNWw4LTVtMC0ySDRjLTEuMTEgMC0yIC44OS0yIDJ2MTJhMiAyIDAgMCAwIDIgMmgxNmEyIDIgMCAwIDAgMi0yVjZhMiAyIDAgMCAwLTItMnoiIGZpbGw9ImN1cnJlbnRDb2xvciI+PC9wYXRoPjwvc3ZnPg==); }

@media (min-width: 600px) {
    #contact ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }
    #contact ul li {
        padding: 0 2rem;
    }
}#copyright {
    text-align: center;
    font-size: 0.9rem;
    color: var(--primary-bg-color);
    margin: 0.5rem 0;
}