/* BUTTONS

01	GENERAL
02	ARROWS
03  COLOR VARIATIONS

*/

/* -----------------------------------------------------------------------
	01	GENERAL
/* ---------------------------------------------------------------------*/

.btn-wfbb,
.btn-primary,
.field--name-field-wfbb-newsletter-articles .node--type-wfbb-newsletter-article a,
#mc-embedded-subscribe {
    border: 2px solid var(--color-primary);
    padding: .5em 1em;
    border-radius: 5rem;
    font-size: 1.125rem;
    margin-top: var(--grid-gap); /*2.250rem*/
    display: inline-block;
    font-weight: 700;
    position: relative;
    color: var(--color-primary);
    cursor: pointer;
    background-color: transparent;
}

.btn-wfbb,
.field--name-field-wfbb-newsletter-articles .node--type-wfbb-newsletter-article a {
    padding: .5em 3em .5em 1em;
}

.btn-wfbb:hover,
.btn-wfbb:focus,
.btn-primary:hover,
.btn-primary:focus,
.field--name-field-wfbb-newsletter-articles .node--type-wfbb-newsletter-article a:hover,
.field--name-field-wfbb-newsletter-articles .node--type-wfbb-newsletter-article a:focus,
#mc-embedded-subscribe:hover,
#mc-embedded-subscribe:focus {
    background-color: var(--color-primary);
    color: #fff;
    text-decoration: none;
    border-color: var(--color-primary);
}

a.btn-wfbb.filled,
.btn-primary.disabled,
.btn-primary:disabled {
    background-color: var(--color-primary);
    color: #fff;
}

.btn-primary.disabled,
.btn-primary:disabled {
    border-color: var(--color-primary);
}

a.btn-wfbb.filled:after {
    background-image: var(--arrow-next-white);
}

a.btn-wfbb.filled:hover {
    background-color: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
}

.main-content .js-pager__items.pager__items.pager-show-more {
    margin: var(--section-inner-side-padding) 0 calc(var(--section-inner-side-padding)  / 2);
    padding: 0;
    list-style: none;
}

.main-content .js-pager__items.pager__items.pager-show-more li {
    display: flex;
    align-items: center;
    justify-content: center;
}


@media (max-width: 767px) {

    .btn-wfbb, .btn-primary, .main-content .js-pager__items.pager__items.pager-show-more a, .field--name-field-wfbb-newsletter-articles .node--type-wfbb-newsletter-article a, #mc-embedded-subscribe {
        font-size: 1rem;
    }

    .btn-wfbb, .field--name-field-wfbb-newsletter-articles .node--type-wfbb-newsletter-article a {
        padding: .25em 2.5em .25em 1em;
    }

}


/* -----------------------------------------------------------------------
	02	ARROWS
/* ---------------------------------------------------------------------*/

.btn-wfbb:after,
.field--name-field-wfbb-newsletter-articles .node--type-wfbb-newsletter-article a:after {
    display: inline-block;
    content: '';
    background-image: var(--arrow-next-primary);
    width: 1.063em;
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    right: 1em;
    height: 100%;
    top: 0;
    background-position: center;
}

.btn-wfbb:hover:after,
.btn-wfbb:focus:after,
.field--name-field-wfbb-newsletter-articles .node--type-wfbb-newsletter-article a:hover:after,
.field--name-field-wfbb-newsletter-articles .node--type-wfbb-newsletter-article a:focus:after {
    background-image: var(--arrow-next-white);
}

.blau .btn-wfbb:after,
.orange .btn-wfbb:after,
.gruen .btn-wfbb:after,
.rot .btn-wfbb:after {
    background-image: var(--arrow-next-white);
}

.blau .btn-wfbb:hover:after,
.blau .btn-wfbb:focus:after {
    background-image: var(--arrow-next-blue);
}

.orange .btn-wfbb:hover:after,
.orange .btn-wfbb:focus:after {
    background-image: var(--arrow-next-orange);
}

.gruen .btn-wfbb:hover:after,
.gruen .btn-wfbb:focus:after {
    background-image: var(--arrow-next-gruen);
}

.rot .btn-wfbb:hover:after,
.rot .btn-wfbb:focus:after {
    background-image: var(--arrow-next-red);
}

/* -----------------------------------------------------------------------
	03	COLOR VARIATIONS
/* ---------------------------------------------------------------------*/

.blau .btn-wfbb,
.orange .btn-wfbb,
.gruen .btn-wfbb,
.rot .btn-wfbb {
    border-color: #fff;
    color: #fff;
}

.blau .btn-wfbb:hover,.blau .btn-wfbb:focus,
.orange .btn-wfbb:hover, .orange .btn-wfbb:focus,
.gruen .btn-wfbb:hover, .gruen .btn-wfbb:focus,
.rot .btn-wfbb:hover, .rot .btn-wfbb:focus {
    background-color: #fff;
}

.blau .btn-wfbb:hover,
.blau .btn-wfbb:focus {
    color: var(--color-blue);
}

.orange .btn-wfbb:hover,
.orange .btn-wfbb:focus{
    color: var(--color-orange);
}

.gruen .btn-wfbb:hover,
.gruen .btn-wfbb:focus{
    color: var(--color-green);
}

.rot .btn-wfbb:hover,
.rot .btn-wfbb:focus {
    color: var(--color-primary);
}