a.button.primary,
button.button.primary,
input[type="submit"] {
    background-color: var(--brand-dark);
    color: var(--white);
    text-decoration: none;
    padding: 20px 40px;
    padding-right: 70px;
    font-size: 20px;
    display: inline-flex;
    position: relative;
    transform: scale(0.9);
    font-family: georgia, sans-serif;
    cursor: pointer;
    transition: 0.2s ease all;
}
a.button.primary:after,
button.button.primary:after,
input[type="submit"]:after {
    content: '';
    background-image: url('assets/white-arrow.svg');
    width: 20px;
    height: 20px;
    background-size: contain;
    background-position: center;
    position: absolute;
    top: 50%;
    right: 40px;
    transform: translateY(-50%);
    background-repeat: no-repeat;
}
a.button.primary:hover,
button.button.primary:hover,
input[type="submit"]:hover {
    transform: scale(1);
    opacity: 0.8;
}
.brand-dark_background a.button.primary,
.brand-dark_background button.button.primary {
    background-color: var(--brand-neutral-1);
    color: var(--brand-dark);
}
.brand-dark_background a.button.primary:after,
.brand-dark_background button.button.primary:after {
    background-image: url('assets/dark-arrow.svg');
}
a.button.tertiary,
button.button.tertiary {
    color: var(--brand-accent-1);
    background: transparent;
    border: 0px;
    padding: 0px;
    position: relative;
    padding-right: 40px;
    font-size: 20px;
    font-family: georgia, sans-serif;
    cursor: pointer;
    transition: 0.2s ease all;
}
a.button.tertiary:hover,
button.button.tertiary:hover {
    opacity: 0.8;
}
a.button.tertiary:after,
button.button.tertiary:after {
    content: '';
    background-image: url('assets/golden-arrow.svg');
    background-position: center;
    background-size: contain;
    width: 20px;
    height: 20px;
    position: absolute;
    top: 50%;
    right: 0px;
    transform: translateY(-50%);
    background-repeat: no-repeat;
    transition: 0.2s ease all;
}
a.button.tertiary:hover:after, button.button.tertiary:hover:after {
    right: -15px;
    transition: 0.2s ease all;
}
a.button.arrow,
div.button.arrow,
button.arrow {
    display: inline-block;
    font-size: 0;
    padding: 0;
    margin: 0;
    height: 56px;
    width: 56px;
    border-style: solid;
    border-width: 2px;
    border-radius: 50%;
    background-size: 14px;
    background-position: center;
    background-repeat: no-repeat;
    transition: ease all .3s;

    border-color: var(--brand-dark);
    background-color: var(--brand-dark);
    background-image: url('assets/white-arrow.svg');
}
a.button.arrow:hover,
div.button.arrow:hover,
button.arrow:hover {
    transform: scale(1);
    opacity: 0.7;
}
/*** Tag Buttons ***/
a.button.tag,
button.tag,
.wpcf7 button[type="submit"].tag,
.wpcf7 input[type="submit"].tag {
    position: relative;
    padding: 10px 20px;
    margin-right: 5px;
    border: 1px solid var(--mid-grey);
    border-radius: 6px;
    font-size: 16px;
    font-weight: 400; /* Regular */
    /* default color tertiary buttons - if they do not have a specific color class */
    color: var(--black);
    background-color: var(--white);
    transition: ease all .3s;
    outline: 0;
}
a.button.tag.active,
button.tag.active,
.wpcf7 button[type="submit"].tag.active,
.wpcf7 input[type="submit"].tag.active {
    background-color: var(--black);
    border-color: var(--black);
    color: var(--white);
}
a.button.tag:hover,
button.tag:hover,
.wpcf7 button[type="submit"].tag:hover,
.wpcf7 input[type="submit"].tag:hover {
    transform: scale(1);
    background-color: var(--brand-accent-1);
    border-color: var(--brand-accent-1);
    cursor: pointer;
    color: var(--white);
}
a.button.tag.active:hover,
button.tag.active:hover,
.wpcf7 button[type="submit"].tag.active:hover,
.wpcf7 input[type="submit"].tag.active:hover {
    background-color: var(--brand-accent-1);
    border-color: var(--brand-accent-1);
    color: var(--white);
    opacity: 0.8;
}