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

.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 {
    margin-top: 0;
}

.section__buttons .button {
    display: inline-block;
}
  
.section__buttons .button + .button {
    margin-left: 1rem;
}
  
.section > .section__title + .section__buttons .button {
    margin-top: 0;
}

.button a, .button span {
    display: inline-block;
    position: relative;
    font-size: .9rem;
    color: var(--brand-color);
}

.button--back a {
    font-size: 1.2rem;
}

.button a::before, .button a::after, .button span::before, .button span::after {
    content: "";
    position: absolute;
    height: 2px;
    bottom: 2px;
    left: 0;
}

.macos .button a::before, .macos .button a::after, .macos .button span::before, .macos .button span::after,
.ios .button a::before, .ios .button a::after, .ios .button span::before, .ios .button span::after {
    bottom: 1px;
}

.button > a::before, .button > span::before {
    width: 100%;
    background-color: var(--brand-link-color);
}

.button > a::after, .button > span::after {
    width: 0;
    background-color: var(--brand-color);
    -webkit-transition: .75s;
    -o-transition: .75s;
    transition: .75s;
}

.no-touchevents .button > a:hover::after, .no-touchevents .button > span:hover::after{
    width: 100%;
}