/* ------------------------------ */
/* ----------- Buttons ---------- */
/* ------------------------------ */

/* General */
.section > .section__button, .section .row > div > .section__button, .section > .section__buttons, .section .row > div > .section__buttons {
    margin-top: 0;
    padding-top: 0;
}
  
.section__button--center, .section__buttons--center {
    text-align: center;
}
  
.section > .section__title + .section__button .button, .section > .section__title + .section__buttons .button {
    margin-top: 0;
}

.section__buttons .button, .buttons .button {
    display: inline-block;
}
  
.section__buttons .button, .buttons .button {
    margin-right: 30px;
}
  
.section__buttons .button:last-child, .buttons .button:last-child {
    margin-right: 0;
}


/* Button */
.button {
    line-height: 0;
}

button {
    cursor: pointer;
    padding: 0;
    color: var(--brand-black);
    background-color: transparent;
    border: 0;
}

.button a, button:not(.site_menu__button):not(.site_cta__close) {
    position: relative;
    display: inline-block;
    font-size: var(--font-size-2);
    font-variation-settings: "wdth" 0, "wght" 500;
    line-height: var(--line-height-3);
    color: var(--brand-black);
    border: 1px solid var(--brand-black);
}

.button:not(.button--ghost) a, button:not(.site_menu__button):not(.site_cta__close), button.button--small:not(.site_menu__button):not(.site_cta__close) {
    font-weight: normal;
    margin-bottom: 5px;
    box-shadow: 5px 5px 0 var(--brand-black);
    
    -webkit-transition: transform var(--transition-1), box-shadow var(--transition-1);
    -o-transition: transform var(--transition-1), box-shadow var(--transition-1);
    transition: transform var(--transition-1), box-shadow var(--transition-1);
}

.button:not(.button--ghost):not(.button--big):not(.button--small) a, button:not(.site_menu__button):not(.site_cta__close):not(.button--filter):not(.button--small) {
    margin-top: var(--spacing-7);
}

.no-touchevents .button:not(.button--ghost) a:hover, .no-touchevents button:not(.site_menu__button):not(.site_cta__close):hover, button.button--filter.is-active {
    transform: translate(5px, 5px);
    box-shadow: 0 0 0 var(--brand-black);
}

.button:not(.button--ghost):not(.button--white) a, button:not(.site_menu__button):not(.site_cta__close):not(.button--filter), button.button--filter.is-active {
    background-color: var(--brand-yellow);
}

.button.button--white a {
    background-color: var(--brand-white);
}

.button--small a, button.button--small:not(.site_menu__button):not(.site_cta__close) {
    font-size: var(--font-size-1);
}


/* Ghost */
.button--ghost a {
    font-weight: 300;
    overflow: hidden;
}

.button--ghost a span {
    position: relative;
    z-index: 1;

    color: var(--brand-black);
    transition: color var(--transition-2);
}

.no-touchevents .button--ghost a:hover span {
    color: var(--brand-white);
}

.button--ghost a::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 0;
    background-color: var(--brand-black);

    transition: width var(--transition-2);
}

.no-touchevents .button--ghost a:hover::after {
    width: 100%;
}


/* Filter */
button.button--filter:last-child {
    margin-right: 0;
}




/* ------------------------------ */
/* -------- Media Queries ------- */
/* ------------------------------ */

.buttons_test > div {
    margin-bottom: 30px;
}


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

    .filter__label {
        padding-top: 10px;
    }

}


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

    .button:not(.button--ghost):not(.button--big):not(.button--small) a, button:not(.site_menu__button):not(.site_cta__close):not(.button--filter):not(.button--small) {
        padding: 17px 30px 14px;
    }

    .button--big a {
        font-size: var(--font-size-2-5);
        padding: 14px 24px 10px;
    }

    .button--small a, button.button--small {
        padding: 15px 22px 11px;
    }

    .button--ghost a {
        padding: 17px 25px 13px;
        border-radius: 52px;
    }

    button.button--filter {
        padding: 9px 15px 6px;
    }

}


@media all and (max-width: 1239.98px) and (min-width: 992px) {

    .button:not(.button--ghost):not(.button--big):not(.button--small) a, button:not(.site_menu__button):not(.site_cta__close):not(.button--filter):not(.button--small) {
        padding: 17px 27px 13px;
    }

    .button--big a {
        font-size: var(--font-size-standard);
        padding: 13px 22px 10px;
    }

    .button--small a, button.button--small {
        padding: 15px 21px 12px;
    }

    .button--ghost a {
        padding: 17px 24px 13px;
        border-radius: 51px;
    }

    button.button--filter {
        padding: 9px 15px 6px;
    }

}


@media all and (max-width: 991.98px) and (min-width: 768px) {

    .button:not(.button--ghost):not(.button--big):not(.button--small) a, button:not(.site_menu__button):not(.site_cta__close):not(.button--filter):not(.button--small) {
        padding: 16px 25px 12px;
    }

    .button--big a {
        font-size: var(--font-size-standard);
        padding: 15px 22px 12px;
    }

    .button--small a, button.button--small {
        padding: 15px 20px 12px;
    }

    .button--ghost a {
        padding: 17px 23px 12px;
        border-radius: 50px;
    }

    button.button--filter {
        padding: 10px 14px 6px;
    }

}


@media all and (max-width: 767.98px) and (min-width: 576px) {

    .button:not(.button--ghost):not(.button--big):not(.button--small) a, button:not(.site_menu__button):not(.site_cta__close):not(.button--filter):not(.button--small) {
        padding: 15px 23px 12px;
    }

    .button--big a {
        font-size: var(--font-size-standard);
        padding: 12px 16px 9px;
    }

    .section__cta--person .button--big a {
        font-size: var(--font-size-2);
    }

    .button--small a, button.button--small {
        padding: 15px 18px 12px;
    }

    .button--ghost a {
        padding: 15px 21px 12px;
        border-radius: 46px;
    }

    .filter__label {
        margin-bottom: var(--spacing-3);
    }

    button.button--filter {
        padding: 10px 12px 7px;
    }

}


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

    .button:not(.button--ghost):not(.button--big):not(.button--small) a, button:not(.site_menu__button):not(.site_cta__close):not(.button--filter):not(.button--small) {
        padding: 14px 20px 11px;
    }

    .button--big a {
        font-size: var(--font-size-standard);
        padding: 12px 16px 8px;
    }

    .section__cta--person .button--big a {
        font-size: var(--font-size-2);
    }

    .button--small a, button.button--small {
        padding: 12px 16px 10px;
    }

    .button--ghost a {
        padding: 14px 20px 10px;
        border-radius: 42px;
    }

    .filter__label {
        margin-bottom: var(--spacing-3);
    }

    button.button--filter {
        padding: 10px 12px 7px;
    }

}