/* ------------------------------ */
/* ----------- 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 a, .button > span, button:not(.button--cookie), a.skip-link:focus-visible, a.skip-link:focus {
    font-size: var(--font-size-2);
    font-weight: normal;
    line-height: var(--line-height-1);
}

.button a, .button > span, button {
    position: relative;
    display: inline-block;
}

button {
    cursor: pointer;
    padding: 0;
    line-height: var(--line-height-1);
    background-color: transparent;
}


/* Normal */
.button--normal a, button, a.skip-link:focus-visible, a.skip-link:focus {
    color: var(--brand-black);
    background-color: transparent;
    border: 1px solid var(--brand-black);
    border-radius: 72px;
}

.button--normal a, button {
    margin-top: var(--spacing-3);
     -webkit-transition: color var(--transition-2), background-color var(--transition-2);
    -o-transition: color var(--transition-2), background-color var(--transition-2);
    transition: color var(--transition-2), background-color var(--transition-2);
}

.swiper-slide-left .content h2 + .button--normal a {
    margin-top: calc(var(--spacing-3) / 2);
}

.no-touchevents .button--normal a:hover, .no-touchevents button:hover {
    color: var(--brand-white);
    background-color: var(--brand-black);
}


/* Arrow */
.button--arrow svg {
    position: absolute;
    top: 50%;
}

.button--arrow:not(.button--back) a {
    -webkit-transition: padding-right var(--transition-2);
    -o-transition: padding-right var(--transition-2);
    transition: padding-right var(--transition-2);
}

.button--arrow:not(.button--back) svg {
    right: 0;
}

.button--arrow.button--back a {
    margin-left: -8px;
}

.button--arrow.button--back svg {
    left: 8px;

    -webkit-transition: left var(--transition-2);
    -o-transition: left var(--transition-2);
    transition: left var(--transition-2);
}

.no-touchevents .button--arrow.button--back a:hover svg {
    left: 0;
}



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

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

    .button--normal a, button:not(.button--cookie), a.skip-link:focus-visible, a.skip-link:focus {
        padding: 19px 44px 18px;
    }

    .firefox .button--normal a, .firefox button:not(.button--cookie), .firefox a.skip-link:focus-visible, .firefox a.skip-link:focus {
        padding: 18px 44px 19px;
    }

    button.button--cookie {
        padding: 11px 28px;
        margin-top: 2px;
    }

    .button--arrow:not(.button--back) a {
        padding-right: 62px;
    }

    .no-touchevents .button--arrow:not(.button--back) a:hover {
        padding-right: 70px;
    }

    .button--arrow:not(.button--back) svg {
        -webkit-transform: translateY(-50%);
            -ms-transform: translateY(-50%);
                transform: translateY(-50%);
    }

    .button--arrow.button--back a {
        padding-left: 53px;
    }

    .button--arrow.button--back svg {
        top: 5px;
    }

    .firefox .button--arrow.button--back svg {
        top: 6px;
    }

}


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

    .section__button .button a {
        margin-top: var(--spacing-5);
    }

}


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

    .button--arrow.button--back svg {
        -webkit-transform-origin: left;
            -ms-transform-origin: left;
                transform-origin: left;
    }

}


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

    .button--normal a, button:not(.button--cookie), a.skip-link:focus-visible, a.skip-link:focus {
        padding: 18px 40px 17px;
    }

    button.button--cookie {
        padding: 10px 24px 9px;
        margin-top: 1px;
    }

    .button--arrow:not(.button--back) a {
        padding-right: 60px;
    }

    .no-touchevents .button--arrow:not(.button--back) a:hover {
        padding-right: 68px;
    }

    .button--arrow:not(.button--back) svg {
        -webkit-transform: translateY(-50%) scale(.95);
            -ms-transform: translateY(-50%) scale(.95);
                transform: translateY(-50%) scale(.95);
    }

    .button--arrow.button--back a {
        padding-left: 50px;
    }

    .button--arrow.button--back svg {
        top: 4px;
        -webkit-transform: scale(.95);
            -ms-transform: scale(.95);
                transform: scale(.95);
    }

}


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

    .button--normal a, button:not(.button--cookie), a.skip-link:focus-visible, a.skip-link:focus {
        padding: 16px 34px 15px;
    }

    button.button--cookie {
        padding: 8px 18px;
        margin-top: 1px;
    }
    

    .button--arrow:not(.button--back) a {
        padding-right: 56px;
    }

    .no-touchevents .button--arrow:not(.button--back) a:hover {
        padding-right: 64px;
    }

    .button--arrow:not(.button--back) svg {
        margin-top: -1px;
        -webkit-transform: translateY(-50%) scale(.85);
            -ms-transform: translateY(-50%) scale(.85);
                transform: translateY(-50%) scale(.85);
    }

    .firefox .button--arrow:not(.button--back) svg {
        margin-top: 0;
    }

    .button--arrow.button--back a {
        padding-left: 46px;
    }

    .button--arrow.button--back svg {
        top: 4px;
        -webkit-transform: scale(.9);
            -ms-transform: scale(.9);
                transform: scale(.9);
    }

}


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

    .section__button .button a {
        margin-top: var(--spacing-6);
    }

    .button--normal a, button:not(.button--cookie), a.skip-link:focus-visible, a.skip-link:focus {
        padding: 15px 28px 14px;
    }

    button.button--cookie {
        padding: 9px 24px;
    }

    .button--arrow:not(.button--back) a {
        padding-right: 50px;
    }

    .no-touchevents .button--arrow:not(.button--back) a:hover {
        padding-right: 58px;
    }

    .button--arrow:not(.button--back) svg {
        -webkit-transform: translateY(-50%) scale(.75);
            -ms-transform: translateY(-50%) scale(.75);
                transform: translateY(-50%) scale(.75);
    }

    .button--arrow.button--back a {
        padding-left: 40px;
    }

    .button--arrow.button--back svg {
        top: 3px;
        -webkit-transform: scale(.8);
            -ms-transform: scale(.8);
                transform: scale(.8);
    }

}