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

.section > .section__button {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

.button a, button, a.skip-link:focus-visible, a.skip-link:focus {
    position: relative;
    display: inline-block;
    font-size: var(--font-size-standard);
    font-weight: 300;
    line-height: var(--line-height-1);
    border: 1px solid;
    border-radius: 54px;

    -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);
}

button {
    cursor: pointer;
    color: var(--brand-dark-blue);
    background-color: transparent;
    border-color: var(--brand-dark-blue);
}

.button.button--ghost a, .button--ghost button {
    color: var(--brand-dark-blue);
    background-color: transparent;
    border-color: var(--brand-dark-blue);
}

.no-touchevents .button.button--ghost a:hover, .no-touchevents .button--ghost button:hover, .button.button--ghost a.is-active {
    color: var(--brand-white);
    background-color: var(--brand-dark-blue);
}

.button.button--filled a, .button--filled button, a.skip-link:focus-visible, a.skip-link:focus {
    color: var(--brand-white);
    background-color: var(--brand-dark-blue);
    border-color: var(--brand-dark-blue);
}

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

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



/* Arrow */
.button--arrow {
    padding: 10px 10px 10px 47px;
    border: none;
    border-radius: 0 !important;
    -webkit-transition: padding-left var(--transition-1);
    -o-transition: padding-left var(--transition-1);
    transition: padding-left var(--transition-1);
}

.no-touchevents .button--arrow:hover {
    padding-left: 55px;
}

.button--arrow .icon {
    position: absolute;
    left: 0;
    -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
            transform: translateY(-50%);
    -webkit-transition: left var(--transition-1);
    -o-transition: left var(--transition-1);
    transition: left var(--transition-1);
}

.no-touchevents .button--arrow:hover .icon {
    left: 8px;
}

.button--arrow span {
    font-size: var(--font-size-2);
}



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

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

    .button, button, .section > .section__button + .section__button .button {
        margin-top: var(--spacing-5);
    }

    .section > .section__button .button {
        margin-top: var(--spacing-8);
    }

    .button--arrow {
        margin-top: var(--spacing-3);
    }

    .button--arrow .icon {
        top: calc(50% + 1px);
    }

}

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

    .button a, button, a.skip-link:focus-visible, a.skip-link:focus {
        padding: 13px 35px 14px;
    }

}


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

    .button a, button, a.skip-link:focus-visible, a.skip-link:focus {
        padding: 12px 30px 13px;
    }

}


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

    .button a, button, a.skip-link:focus-visible, a.skip-link:focus {
        padding: 12px 24px 11px;
    }

    .macos .button a, .macos button, .ios .button a, .ios button {
        padding-top: 11px;
        padding-bottom: 12px;
    }

    .section > .section__button .button {
        margin-top: var(--spacing-7);
    }

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

    .section > .section__button + .section__button .button {
        margin-top: var(--spacing-5);
    }

    .button--arrow {
        margin-top: var(--spacing-2);
    }

    .button--arrow .icon {
        top: 50%;
    }

}