/* |---------=| ↓ |=--------=| Footer |=--------=| ↓ |=---------| */

footer {
    position: relative;
    top: var(--header-position);
    background-color: var(--color-prim);
    width: 100%;
    height: auto;
    color: var(--color-sec);
    padding-bottom: var(--header-position);
}

.footer {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: calc( 1 * var(--space-w)) calc( 1 * var(--space-w));
    box-sizing: border-box;
}

.footer-align-h {
    width: 100%;
    display: flex;
    justify-content: space-evenly;
}

.footer-align-v {
    display: flex;
    flex-direction: column;
    padding: 0 calc( .1 * var(--space-w));
}

.container {
    display: flex;
}

.contact-align-h {
    display: flex;
    justify-content: flex-start;
}

.bottom-footer div {
    text-align: center;
}

.bottom-footer span {
    white-space: nowrap;
}

.contact-align-h,
.bottom-footer a {
    opacity: .7;
    white-space: nowrap;
}

.footer a {
    color : var(--color-sec);
}

.footer a:hover {
    opacity: 1!important;
}

.footer a:active {
    opacity: 1;
}

.footer .contact-align-h:hover a {
    opacity: .7;
}

.footer .contact-align-h div:last-of-type {
    display: flex;
    justify-content: center;
    flex-direction: column;
}

.footer .contact-align-h div:last-of-type a {
    height: 100%;
    display:flex;
    align-items: center;
}

.footer .contact-align-h:hover {
    opacity: 1;
}

.contact-align-h .img {
    display: flex;
    justify-content: center;
    align-items: center;
}

.contact-align-h .img:hover,
.contact-align-h .img:hover + .address {
    opacity: .7;
}

.contact-align-h img {
    width: calc( .7 * var(--header-position));
    height: calc( .7 * var(--header-position));
    margin: 0 calc( .5 * var(--space-w));
    object-fit: contain;
}

.bottom-footer img {
    display: inline;
    width: calc( 1 * var(--font-size));
    height: calc( 1 * var(--font-size));
}

.footer hr {
    width: 50%;
    margin: calc( 1 * var(--space-w)) 0;
}

.hide {
    display: none;
}

.footer-align-v .align-h {
    flex-wrap: wrap;
}

@media screen and (width <= 500px) {
    .footer-align-h {
        flex-direction: column;
    }

    .hide {
        display: inline;
    }
}

.logo-img {
    width: calc( 4.5 * var(--header-position));
    height: calc( 4.5 * var(--header-position));
    object-fit: contain;
}

.button-footer {
    width: calc( 2.2 * var(--font-size));
    height: calc( 2.2 * var(--font-size));
    padding: 0;
    margin: calc( .5 * var(--space-w)) calc( .1 * var(--space-w));
}

.box-top-button {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 0;
}

.bg-top-button {
    display: flex;
    justify-content: right;
    align-items: center;
    width: 100%;
    height: 0;
}

.bg-top-button .button-circle {
    width: calc( 2 * var(--font-size));
    height: calc( 2 * var(--font-size));
    margin: 0 var(--space-w);
    padding: 0;
    position: relative;
}

.site-compliance {
    display: flex;
    justify-content: center;
    margin-top: calc( .5 * var(--space-w));
}

.title-site-compliance {
    font-size: calc( .7 * var(--font-size));
    font-weight: bolder;
    text-align: center;
}

.site-compliance .badge {
    width: calc( 3 * var(--font-size));
    height: calc( 3 * var(--font-size));
}

.site-compliance .badge-pwa {
    width: calc( 5 * var(--font-size));
    height: calc( 3 * var(--font-size));
    padding-left: calc( .5 * var(--font-size));
}

p.site-compliance .badge {
    width: 100%;
    height: calc( 1.5 * var(--font-size));
}

/* |---------=| ↑ |=--------=| Footer |=--------=| ↑ |=---------| */




/* |---------=| ↓ |=--------=| Button Dark Mode |=--------=| ↓ |=---------| */

.bg-butt-mode {
    display: flex;
    justify-content: right!important;
    align-items: center;
    width: 100%;
    height: 0;
}

#toggle-dark-mode {
    position: relative;
    display: inline-block;
    top: calc(.1* var(--header-position));
    width: calc( 1 * var(--header-position));
    height: calc( .5 * var(--header-position));
    border-radius: 100vh;
    background: #fff;
    transition: background-color 0.5s linear;
    -webkit-transition: background-color 0.5s linear;
    -moz-transition: background-color 0.5s linear;
    -o-transition: background-color 0.5s linear;
    cursor: pointer;
    box-shadow: inset 0 .2vh .6vh rgba(0, 0, 0, 0.5),
                inset 0 .2vh .2vh rgba(0, 0, 0, 0.3),
                inset 0 -.1vh .1vh rgba(0, 0, 0, 0.3);
}

#toggle-dark-mode.active {
    background: #222;
}

#toggle-dark-mode .indicator {
    box-sizing: border-box;
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    height: 100%;
    background: #fff;
    border-radius: 50%;
    transform: scale(0.8);
    border: white thin solid;
    box-shadow: 0 0 .9vh rgba(0, 0, 0, .5),
                inset 0 1vh 2vh -1vh rgba(0, 0, 0, 0.5);
    transition: background-color 0.5s linear,
                box-shadow 0.5s linear,
                border 0.5s linear,
                left 0.5s linear;
     -webkit-transition: background-color 0.5s linear,
                box-shadow 0.5s linear,
                border 0.5s linear,
                left 0.5s linear;
    -moz-transition: background-color 0.5s linear,
                box-shadow 0.5s linear,
                border 0.5s linear,
                left 0.5s linear;
    -o-transition: background-color 0.5s linear,
                box-shadow 0.5s linear,
                border 0.5s linear,
                left 0.5s linear;
}

#toggle-dark-mode.active .indicator {
    left: 50%;
    border: #555 thin solid;
    background: #222;
    box-shadow: 0 0 .9vh rgba(0, 0, 0, 0.5),
                inset 0 -1vh 2vh -1vh rgba(0, 0, 0, 1);
}

#toggle-dark-mode img:first-of-type,
#toggle-dark-mode img:last-of-type {
    box-sizing: border-box;
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    height: 100%;
    transform: scale(0.7);
    filter: invert(50%);
}

#toggle-dark-mode img:first-of-type {
    left: 0;
}

#toggle-dark-mode img:last-of-type {
    left: 45%;
}

/* |---------=| ↑ |=--------=| Button Dark Mode |=--------=| ↑ |=---------| */