/* a.button */
a.button,
.btn {
    background: none;
    border: 2px solid var(--primary-color);
    color: var(--primary-color);
    display: inline-block;
    font-size: 20px;
    font-weight: 600;
    min-width: 200px;
    padding: 8px 50px 8px 20px;
    position: relative;
    text-decoration: none;
}

.ce-bodytext a.button,
.ce-bodytext a.btn {
    text-decoration: none;
}

.button::after,
.btn::after {
    content: "\f30b";
    font-family: "Font Awesome 5 Free";
    font-weight: 600;
    position: absolute;
    right: 20px;
    bottom: calc(50% - 15px);
    transition: all .3s ease;
}

#main-nav .menu-item a.more {
    padding: 8px 50px 8px 0;
}

a.button.more,
.btn.more {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: #FFF;
    font-weight: 600;
}

a.button:hover,
.btn:hover {
    background: var(--primary-color);
    color: #fff;
}

.btn.back::after {
    content: "";
}

/* btn */
.btn-primary {
    color: #FFF;
    background-color: var(--base-color);
    border-color: var(--base-color);
}

.btn-primary:hover {
    color: #FFF;
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

.btn.white {
    color: var(--primary-color);
    background-color: #FFF;
    border-color: #FFF;
}

.btn-default {
    color: #FFF;
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

.btn-default:hover {
    color: #FFF;
    background-color: var(--base-color);
    border-color: var(--base-color);
}

.btn-outline-primary {
    color: var(--base-color);
    border-color: var(--primary-color);
}

.btn-outline-primary:hover {
    color: #FFF;
    background-color: var(--base-color);
    border-color: var(--base-color);
}

.btn:focus, .btn.focus {
    box-shadow: 0 0 0 0.2rem rgb(17 58 170 / 25%)
}

.teaser-buttons .btn::after {
    content: '';
}